diff --git a/.gitignore b/.gitignore
index 054022cb1..353a45940 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ vite.config.ts.timestamp-*
 .env
 
 # alternative package managers
+bun.lock
 bun.lockb
 deno.lock
 
diff --git a/package.json b/package.json
index d90cca821..2807b062a 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
 		"@inlang/paraglide-js": "^2.16.1",
 		"@netlify/edge-functions": "^3.0.6",
 		"@sveltejs/adapter-netlify": "^5.2.4",
-		"@sveltejs/kit": "^2.58.0",
+		"@sveltejs/kit": "^2.59.0",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@types/escape-html": "^1.0.4",
 		"@types/glidejs__glide": "^3.6.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b6d02c6a..22eaddb75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
         version: 1.5.2
       '@prgm/sveltekit-progress-bar':
         specifier: ^3.0.2
-        version: 3.0.2(@sveltejs/kit@2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))
+        version: 3.0.2(@sveltejs/kit@2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))
       '@remix-run/headers':
         specifier: ^0.12.0
         version: 0.12.0
@@ -131,10 +131,10 @@ importers:
         version: 3.0.6
       '@sveltejs/adapter-netlify':
         specifier: ^5.2.4
-        version: 5.2.4(@sveltejs/kit@2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))
+        version: 5.2.4(@sveltejs/kit@2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))
       '@sveltejs/kit':
-        specifier: ^2.58.0
-        version: 2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+        specifier: ^2.59.0
+        version: 2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^7.0.0
         version: 7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
@@ -1685,8 +1685,8 @@ packages:
       svelte: ^5.0.0
       vite: ^6.3.0 || >=7.0.0
 
-  '@sveltejs/kit@2.58.0':
-    resolution: {integrity: sha512-kT9GCN8yJTkCK1W+Gi/bvGooWAM7y7WXP+yd+rf6QOIjyoK1ERPrMwSufXJUNu2pMWIqruhFvmz+LbOqsEmKmA==}
+  '@sveltejs/kit@2.59.0':
+    resolution: {integrity: sha512-WeJaGKvDf3uVQB4bnDHhM+BXCY34LC1v0HiPqnSpvNkjB54r8DAUP1rpk73s+5zprIirEKtUcVfgh6+fPODjzQ==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -4543,9 +4543,9 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@prgm/sveltekit-progress-bar@3.0.2(@sveltejs/kit@2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))':
+  '@prgm/sveltekit-progress-bar@3.0.2(@sveltejs/kit@2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))':
     dependencies:
-      '@sveltejs/kit': 2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@sveltejs/kit': 2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
       svelte: 5.55.7(@typescript-eslint/types@8.59.3)
 
   '@remix-run/headers@0.12.0': {}
@@ -4820,10 +4820,10 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
-  '@sveltejs/adapter-netlify@5.2.4(@sveltejs/kit@2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))':
+  '@sveltejs/adapter-netlify@5.2.4(@sveltejs/kit@2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))':
     dependencies:
       '@iarna/toml': 2.2.5
-      '@sveltejs/kit': 2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@sveltejs/kit': 2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
       esbuild: 0.25.12
       set-cookie-parser: 2.7.2
 
@@ -4840,7 +4840,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@sveltejs/kit@2.58.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+  '@sveltejs/kit@2.59.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.7(@typescript-eslint/types@8.59.3))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(svelte@5.55.7(@typescript-eslint/types@8.59.3))(typescript@5.9.3)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.9(acorn@8.16.0)
diff --git a/src/lib/components/Backdrop.svelte b/src/lib/components/Backdrop.svelte
index 05bc98c37..b93f20355 100644
--- a/src/lib/components/Backdrop.svelte
+++ b/src/lib/components/Backdrop.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition'
 
-	export let open: boolean | undefined
+	interface Props {
+		open: boolean | undefined
+	}
+
+	let { open }: Props = $props()
 </script>
 
 {#if open}
diff --git a/src/lib/components/Banner.svelte b/src/lib/components/Banner.svelte
index 63e56cba1..29fa7664f 100644
--- a/src/lib/components/Banner.svelte
+++ b/src/lib/components/Banner.svelte
@@ -1,28 +1,46 @@
 <script lang="ts">
 	import X from 'lucide-svelte/icons/x'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { fade } from 'svelte/transition'
 	import { deLocalizeHref } from '$lib/paraglide/runtime'
 	import { setItem } from '$lib/localStorage'
 	import LinkWithoutIcon from '$lib/components/LinkWithoutIcon.svelte'
 	import { onMount } from 'svelte'
 
-	export let type: 'main' | 'campaign' = 'main'
-	export let id: string | null = null
-	export let href: string | null = null
-	export let contrast = false
+	interface Props {
+		contrast?: boolean
+		href?: string | null
+		id?: string | null
+		type?: 'main' | 'campaign'
+		children?: import('svelte').Snippet
+	}
+
+	let { children, contrast = false, href = null, id = null, type = 'main' }: Props = $props()
+
+	// Initialize dismissed state during SSR based on the current pathname
+	const isCurrentPage = (href: string | null) =>
+		href !== null && deLocalizeHref(page.url.pathname) === href
+	// svelte-ignore state_referenced_locally
+	let dismissed = $state(isCurrentPage(href))
 
-	let dismissed = false
-	let bannerEl: HTMLDivElement
+	// Hide on navigation to the target/href page
+	$effect(() => {
+		if (isCurrentPage(href)) {
+			dismissed = true
+		}
+	})
+
+	let bannerEl: HTMLDivElement | undefined = $state()
 
 	function pushGtmEvent(eventObj: Record<string, unknown>) {
 		if (typeof window !== 'undefined') {
-			window.dataLayer = window.dataLayer || []
+			window.dataLayer = window.dataLayer ?? []
 			window.dataLayer.push(eventObj)
 		}
 	}
 
-	function close() {
+	function close(ev: MouseEvent) {
+		ev.stopPropagation()
 		dismissed = true
 		if (id) {
 			const prefix = type === 'campaign' ? 'campaign_banner' : 'banner'
@@ -48,13 +66,8 @@
 		}
 	}
 
-	// Hide on navigation to the target/href page
-	$: if (href && deLocalizeHref($page.url.pathname) === href) {
-		dismissed = true
-	}
-
-	$: isCampaign = type === 'campaign'
-	$: dataIdAttr = isCampaign ? 'data-campaign-banner-id' : 'data-banner-id'
+	let isCampaign = $derived(type === 'campaign')
+	let dataIdAttr = $derived(isCampaign ? 'data-campaign-banner-id' : 'data-banner-id')
 
 	onMount(() => {
 		if (dismissed) return
@@ -100,7 +113,7 @@
 		data-pagefind-ignore
 		transition:fade={{ duration: 200 }}
 		bind:this={bannerEl}
-		on:click={handleBannerClick}
+		onclick={handleBannerClick}
 	>
 		{#if isCampaign}
 			<div class="accent-line"></div>
@@ -108,22 +121,18 @@
 
 		<span class="content">
 			{#if isCampaign && href}
-				<LinkWithoutIcon {href} class="campaign-link" on:click={close}>
+				<LinkWithoutIcon {href} class="campaign-link" onclick={close}>
 					<span class="campaign-text">
-						<slot></slot>
+						{@render children?.()}
 					</span>
 					<span class="campaign-cta">Take action →</span>
 				</LinkWithoutIcon>
 			{:else}
-				<slot></slot>
+				{@render children?.()}
 			{/if}
 		</span>
 
-		<button
-			class="close banner-close-btn"
-			class:campaign-close={isCampaign}
-			on:click|stopPropagation={close}
-		>
+		<button class="close banner-close-btn" class:campaign-close={isCampaign} onclick={close}>
 			<X size={isCampaign ? '1em' : '1.2em'} />
 			<span class="sr-only">Close</span>
 		</button>
diff --git a/src/lib/components/Block.svelte b/src/lib/components/Block.svelte
index d4761b9b6..a2eed308f 100644
--- a/src/lib/components/Block.svelte
+++ b/src/lib/components/Block.svelte
@@ -2,10 +2,16 @@
 	import Link from '$lib/components/Link.svelte'
 	import SvelteIntersectionObserver from '$lib/components/SvelteIntersectionObserver.svelte'
 
-	let isIntersecting: boolean
+	let isIntersecting: boolean = $state(false)
 
-	export let href: string
-	export let linkText: string
+	interface Props {
+		href: string
+		linkText: string
+		title?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let { href, linkText, title, children }: Props = $props()
 </script>
 
 <SvelteIntersectionObserver
@@ -17,9 +23,9 @@
 	<div class="block-wrapper">
 		<Link {href}>
 			<div class="text">
-				<h2 class="title" class:underline={isIntersecting}><slot name="title"></slot></h2>
+				<h2 class="title" class:underline={isIntersecting}>{@render title?.()}</h2>
 				<p>
-					<slot></slot>
+					{@render children?.()}
 				</p>
 				<span class="c2a">{linkText} ></span>
 			</div>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 68f49ef62..0c6b5a73b 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-	export let subtle = false
-	export let disabled = false
+	interface Props {
+		subtle?: boolean
+		disabled?: boolean
+		onclick?: (event: MouseEvent) => void
+		children?: import('svelte').Snippet
+	}
+
+	let { subtle = false, disabled = false, onclick, children }: Props = $props()
 </script>
 
-<button on:click class:subtle class:disabled>
-	<slot></slot>
+<button {onclick} class:subtle class:disabled>
+	{@render children?.()}
 </button>
 
 <style>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 81a9bb9b9..3b659ffe7 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -1,9 +1,14 @@
-<script>
-	export let className = ''
+<script lang="ts">
+	interface Props {
+		className?: string
+		children?: import('svelte').Snippet
+	}
+
+	let { className = '', children }: Props = $props()
 </script>
 
 <div class="card {className}">
-	<slot></slot>
+	{@render children?.()}
 </div>
 
 <style>
diff --git a/src/lib/components/CollagenSignup.svelte b/src/lib/components/CollagenSignup.svelte
index 777a23c23..1c1736dea 100644
--- a/src/lib/components/CollagenSignup.svelte
+++ b/src/lib/components/CollagenSignup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import NewsletterSignup from '$lib/components/NewsletterSignup.svelte'
 	import Banner from '$lib/components/Banner.svelte'
 	import Link from '$lib/components/Link.svelte'
@@ -8,16 +8,24 @@
 
 	const campaign = 'sayno'
 
-	export let userHasUid = false
-	export let subscribeEmail = ''
-	export let newsletterEmail = ''
-	let submitted = false
-	let hideSharing = false
+	interface Props {
+		userHasUid?: boolean
+		subscribeEmail?: string
+		newsletterEmail?: string
+	}
+
+	let {
+		userHasUid = $bindable(false),
+		subscribeEmail = $bindable(''),
+		newsletterEmail = $bindable('')
+	}: Props = $props()
+	let submitted = $state(false)
+	let hideSharing = $state(false)
 
 	onMount(() => {
-		userHasUid = detectAndStoreCollagenUid(campaign, $page.url.searchParams)
-		hideSharing = $page.url.searchParams.has('x002')
-		subscribeEmail = $page.url.searchParams.get('subscribe-email') || ''
+		userHasUid = detectAndStoreCollagenUid(campaign, page.url.searchParams)
+		hideSharing = page.url.searchParams.has('x002')
+		subscribeEmail = page.url.searchParams.get('subscribe-email') || ''
 		if (userHasUid && subscribeEmail) {
 			newsletterEmail = subscribeEmail
 		}
@@ -33,7 +41,7 @@
 		{/if}
 	</Banner>
 
-	<div on:submit={() => (submitted = true)}>
+	<div onsubmit={() => (submitted = true)}>
 		<NewsletterSignup bind:email={newsletterEmail} />
 	</div>
 
diff --git a/src/lib/components/DonorBoxEmbed.svelte b/src/lib/components/DonorBoxEmbed.svelte
index 5a64807b0..84fa8e932 100644
--- a/src/lib/components/DonorBoxEmbed.svelte
+++ b/src/lib/components/DonorBoxEmbed.svelte
@@ -2,17 +2,21 @@
 	import { onMount } from 'svelte'
 	import { getLocale } from '$lib/paraglide/runtime'
 
-	/** DonorBox campaign slug (required) */
-	export let campaignSlug: string
-
-	/** iframe height in pixels */
-	export let height = 685
+	interface Props {
+		/** DonorBox campaign slug (required) */
+		campaignSlug: string
+		/** iframe height in pixels */
+		height?: number
+		/** Whether to enable PayPal Express in the widget */
+		paypalExpress?: boolean
+	}
 
-	/** Whether to enable PayPal Express in the widget */
-	export let paypalExpress = true
+	let { campaignSlug, height = 685, paypalExpress = true }: Props = $props()
 
 	const locale = getLocale()
-	$: embedSrc = `https://donorbox.org/embed/${campaignSlug}?hide_donation_meter=true&language=${locale}`
+	let embedSrc = $derived(
+		`https://donorbox.org/embed/${campaignSlug}?hide_donation_meter=true&language=${locale}`
+	)
 
 	onMount(() => {
 		const script = document.createElement('script')
diff --git a/src/lib/components/Doomers.svelte b/src/lib/components/Doomers.svelte
index 5bc1c081c..78a9c07b1 100644
--- a/src/lib/components/Doomers.svelte
+++ b/src/lib/components/Doomers.svelte
@@ -246,8 +246,7 @@
 			source: 'https://www.theguardian.com/science/2011/aug/17/shark-attacks-rare-deaths-rarer',
 			isGrounding: true
 		}
-	]
-	doomers = doomers.sort((a, b) => b.number - a.number)
+	].sort((a, b) => b.number - a.number)
 </script>
 
 <ul>
diff --git a/src/lib/components/Edit.svelte b/src/lib/components/Edit.svelte
index fb8834b84..4fe004710 100644
--- a/src/lib/components/Edit.svelte
+++ b/src/lib/components/Edit.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Link from '$lib/components/Link.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import * as m from '$lib/paraglide/messages.js'
 	import { getLocale } from '$lib/paraglide/runtime.js'
 
@@ -11,22 +11,34 @@
 	const markdownFiles = import.meta.glob('/src/posts/**/*.md')
 	const svelteFiles = import.meta.glob('/src/routes/**/+page.svelte')
 
-	$: pathname = $page.url.pathname
+	let pathname = $derived(page.url.pathname)
 	const currentLocale: string = getLocale() // broaden to avoid "never"
 	const isTranslatedPage = currentLocale != 'en'
 
-	let editUrl: string | null = null
-	let translationIssueUrl: string | null = null
-
-	$: {
-		editUrl = null
-		translationIssueUrl = null
-
-		// Get the English canonical path (without locale prefix)
-		let englishPath = pathname.replace(new RegExp(`^/${currentLocale}(/|$)`), '$1')
-		if (englishPath === '') englishPath = '/'
+	// Get the English canonical path (without locale prefix)
+	let englishPath = $derived(pathname.replace(new RegExp(`^/${currentLocale}(/|$)`), '$1') || '/')
+	let relativePath = $derived.by(() => {
+		if (englishPath === '/') return '/src/routes/+page.svelte'
+		const markdownPath = `/src/posts${englishPath}.md`
+		if (markdownFiles[markdownPath]) return markdownPath
+		const sveltePath = `/src/routes${englishPath}/+page.svelte`
+		if (svelteFiles[sveltePath]) return sveltePath
+		return null
+	})
+	let editUrl: string | null = $derived.by(() => {
+		if (!relativePath) return null
+		if (relativePath.endsWith('.md')) {
+			// Always point to the original English content in the CMS
+			return DECAP_BASE_URL + englishPath
+		} else if (relativePath.endsWith('.svelte')) {
+			const rootPath = relativePath.substring('/src/'.length)
+			return GITHUB_BASE_URL + rootPath
+		}
+		return null
+	})
 
-		// For translated pages, we need to create a translation issue URL
+	// For translated pages, we need to create a translation issue URL
+	let translationIssueUrl: string | null = $derived.by(() => {
 		if (isTranslatedPage) {
 			const encodedTitle = encodeURIComponent(`Translation improvement for ${pathname}`)
 			const encodedBody = encodeURIComponent(
@@ -43,29 +55,10 @@
 					`---\n` +
 					`Note: Our translations are generated by an AI system using translation prompts. Your feedback will help us improve these prompts rather than directly editing translated text.`
 			)
-			translationIssueUrl = `${GITHUB_ISSUES_URL}?title=${encodedTitle}&body=${encodedBody}`
-		}
-
-		let relativePath = englishPath == '/' ? '/src/routes/+page.svelte' : null
-		if (!relativePath) {
-			const markdownPath = `/src/posts${englishPath}.md`
-			if (markdownFiles[markdownPath]) relativePath = markdownPath
+			return `${GITHUB_ISSUES_URL}?title=${encodedTitle}&body=${encodedBody}`
 		}
-		if (!relativePath) {
-			const sveltePath = `/src/routes${englishPath}/+page.svelte`
-			if (svelteFiles[sveltePath]) relativePath = sveltePath
-		}
-
-		if (relativePath) {
-			if (relativePath.endsWith('.md')) {
-				// Always point to the original English content in the CMS
-				editUrl = DECAP_BASE_URL + englishPath
-			} else if (relativePath.endsWith('.svelte')) {
-				const rootPath = relativePath.substring('/src/'.length)
-				editUrl = GITHUB_BASE_URL + rootPath
-			}
-		}
-	}
+		return null
+	})
 </script>
 
 {#if isTranslatedPage}
diff --git a/src/lib/components/Home.svelte b/src/lib/components/Home.svelte
index 176d656ba..5dd5581b8 100644
--- a/src/lib/components/Home.svelte
+++ b/src/lib/components/Home.svelte
@@ -30,18 +30,24 @@
 <div class="divider"></div>
 <section>
 	<Block linkText={m.home_risks_c2a()} href="/risks">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
-		<span slot="title">{@html m.home_risks_title()}</span>
+		{#snippet title()}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
+			<span>{@html m.home_risks_title()}</span>
+		{/snippet}
 		{m.home_risks_content()}
 	</Block>
 	<Block linkText={m.home_proposal_c2a()} href="/proposal">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
-		<span slot="title">{@html m.home_proposal_title()}</span>
+		{#snippet title()}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
+			<span>{@html m.home_proposal_title()}</span>
+		{/snippet}
 		{m.home_proposal_content()}
 	</Block>
 	<Block linkText={m.home_action_c2a()} href="/action">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
-		<span slot="title">{@html m.home_action_title()}</span>
+		{#snippet title()}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
+			<span>{@html m.home_action_title()}</span>
+		{/snippet}
 		{m.home_action_content()}
 	</Block>
 </section>
diff --git a/src/lib/components/IconBullet.svelte b/src/lib/components/IconBullet.svelte
index d09901d54..c4837c626 100644
--- a/src/lib/components/IconBullet.svelte
+++ b/src/lib/components/IconBullet.svelte
@@ -2,13 +2,19 @@
 	import type { Icon } from 'lucide-svelte'
 	import MessageWithLink from '$lib/components/MessageWithLink.svelte'
 
-	export let icon: typeof Icon
-	export let content: () => string
+	interface Props {
+		icon: typeof Icon
+		content: () => string
+	}
+
+	let { icon, content }: Props = $props()
+
+	const SvelteComponent = $derived(icon)
 </script>
 
 <div class="icon-bullet" role="listitem">
 	<span class="icon">
-		<svelte:component this={icon} size="1em" />
+		<SvelteComponent size="1em" />
 	</span>
 	<span>
 		<MessageWithLink content={content()} />
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 797615b12..22707905b 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -2,12 +2,21 @@
 	import type { Picture } from '$lib/types'
 	import { layoutWidth } from '$lib/config'
 
-	export let src: string
-	export let alt: string | null = null
-	export let title: string | null = null
-	export let sizes: string = `min(${layoutWidth}, 100vw)`
-	let className: string = ''
-	export { className as class }
+	interface Props {
+		src: string
+		alt?: string | null
+		title?: string | null
+		sizes?: string | null
+		class?: string
+	}
+
+	let {
+		src,
+		alt = null,
+		title = null,
+		sizes = `min(${layoutWidth}, 100vw)`,
+		class: className = ''
+	}: Props = $props()
 
 	// Use import.meta.glob to statically analyze all potential static assets
 	const pictureModules = import.meta.glob<Picture>(
@@ -26,17 +35,9 @@
 		query: { url: true }
 	})
 
-	let picture: Picture | null = null
-	let assetUrl: string | null = null
-
-	if (src.startsWith('/')) {
-		const fullPath = `../../assets/images${src}`
-		if (pictureModules[fullPath]) {
-			picture = pictureModules[fullPath]
-		} else if (assetUrlModules[fullPath]) {
-			assetUrl = assetUrlModules[fullPath]
-		}
-	}
+	let fullPath = $derived(src.startsWith('/') ? `../../assets/images${src}` : null)
+	let picture: Picture | null = $derived(pictureModules[fullPath ?? ''] ?? null)
+	let assetUrl: string | null = $derived(assetUrlModules[fullPath ?? ''] ?? null)
 </script>
 
 {#if picture}
diff --git a/src/lib/components/LanguageSwitcher.svelte b/src/lib/components/LanguageSwitcher.svelte
index d2e36878c..c0eb3e118 100644
--- a/src/lib/components/LanguageSwitcher.svelte
+++ b/src/lib/components/LanguageSwitcher.svelte
@@ -7,14 +7,18 @@
 		setLocale,
 		type Locale
 	} from '$lib/paraglide/runtime.js'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import Globe from 'lucide-svelte/icons/globe'
 	import Navlink from '$lib/components/navbar/Navlink.svelte'
 	import { building } from '$app/environment'
 	import { onMount } from 'svelte'
 	import Card from '$lib/components/Card.svelte'
 
-	export let inverted = false
+	interface Props {
+		inverted?: boolean
+	}
+
+	let { inverted = false }: Props = $props()
 
 	// Check if we should show the language switcher (only show when multiple locales)
 	const showSwitcher = locales.length > 1
@@ -24,9 +28,9 @@
 	// Keep a map of locale-specific display names
 	const nativeLanguageNames: Record<string, Intl.DisplayNames> = {}
 
-	let open = false
-	let button: HTMLButtonElement
-	let dropdown: HTMLDivElement
+	let open = $state(false)
+	let button: HTMLButtonElement | undefined = $state()
+	let dropdown: HTMLDivElement | undefined = $state()
 
 	// Get native name for a language
 	function getNativeLanguageName(locale: string): string {
@@ -92,7 +96,7 @@
 		if (showSwitcher) {
 			const clickListener = (event: MouseEvent) => {
 				const node = event.target as Node | null
-				if (open && !button.contains(node) && !dropdown.contains(node)) {
+				if (open && button && !button.contains(node) && dropdown && !dropdown.contains(node)) {
 					open = false
 				}
 			}
@@ -151,7 +155,7 @@
 		<button
 			class="button reset-button"
 			bind:this={button}
-			on:click={(e) => {
+			onclick={(e) => {
 				e.preventDefault()
 				open = !open
 			}}
@@ -166,9 +170,9 @@
 			<div class="list">
 				<!-- Add Auto-detect option at the top -->
 				<a
-					href={deLocalizeHref($page.url.pathname)}
+					href={deLocalizeHref(page.url.pathname)}
 					hreflang="auto"
-					on:click={handleLanguageClick}
+					onclick={handleLanguageClick}
 					class="auto-detect"
 				>
 					<span class="auto-icon">🌐</span> <span class="auto-text">AUTO</span>
@@ -178,12 +182,12 @@
 				<div class="divider"></div>
 
 				{#each locales as locale}
-					{@const href = localizeHref($page.url.pathname, { locale })}
+					{@const href = localizeHref(page.url.pathname, { locale })}
 					<a
 						{href}
 						hreflang={locale}
 						aria-current={locale === getLocale() ? 'page' : undefined}
-						on:click={handleLanguageClick}
+						onclick={handleLanguageClick}
 					>
 						{getDualLanguageName(locale)}
 					</a>
diff --git a/src/lib/components/LatestNews.svelte b/src/lib/components/LatestNews.svelte
index 44f53cb14..ff5a67a90 100644
--- a/src/lib/components/LatestNews.svelte
+++ b/src/lib/components/LatestNews.svelte
@@ -4,11 +4,11 @@
 	import NewsCard from '$lib/components/NewsCard.svelte'
 	import { onMount } from 'svelte'
 
-	let loading = true
-	let currentPage = 1
-	let totalPages = 1
 	const pageSize = 6
-	let newsItems: NewsItem[] = Array.from({ length: pageSize })
+	let newsItems: NewsItem[] = $state(Array.from({ length: pageSize }))
+	let loading = $state(true)
+	let currentPage = $state(1)
+	let totalPages = $state(1)
 
 	async function loadPage(page: number) {
 		loading = true
@@ -49,7 +49,7 @@
 				<button
 					class="page-btn"
 					disabled={currentPage <= 1}
-					on:click={() => goToPage(currentPage - 1)}
+					onclick={() => goToPage(currentPage - 1)}
 					aria-label="Previous page"
 				>
 					‹
@@ -59,7 +59,7 @@
 					<button
 						class="page-btn"
 						class:active={currentPage === i + 1}
-						on:click={() => goToPage(i + 1)}
+						onclick={() => goToPage(i + 1)}
 					>
 						{i + 1}
 					</button>
@@ -68,7 +68,7 @@
 				<button
 					class="page-btn"
 					disabled={currentPage >= totalPages}
-					on:click={() => goToPage(currentPage + 1)}
+					onclick={() => goToPage(currentPage + 1)}
 					aria-label="Next page"
 				>
 					›
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
index a8fd9bbf4..dc4fce79d 100644
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@@ -3,21 +3,34 @@
 	import ExternalLink from 'lucide-svelte/icons/external-link'
 	import Mail from 'lucide-svelte/icons/mail'
 	import type { LinkType } from '$lib/types'
+	import { getLinkType } from '$lib/link'
 
-	export let href: string
-	export let target: string | null = null
-	let className: string = ''
-	export { className as class }
-	export let rel: string | null = null
+	interface Props {
+		href: string
+		target?: string | null
+		class?: string
+		rel?: string | null
+		children?: import('svelte').Snippet
+		[key: string]: unknown
+	}
+
+	let {
+		href,
+		target = null,
+		class: className = '',
+		rel = null,
+		children,
+		...rest
+	}: Props = $props()
 
 	const ICON_PROPS = { size: '0.7em' }
 
 	// Link component determines the type
-	let type: LinkType
+	let type: LinkType = $derived(getLinkType(href))
 </script>
 
-<Link {href} {target} {rel} class={className} bind:type {...$$restProps}>
-	<slot></slot>{#if type != 'internal'}
+<Link {href} {target} {rel} class={className} {type} {...rest}>
+	{@render children?.()}{#if type != 'internal'}
 		<span style="white-space: nowrap">
 			&nbsp;
 			<span class="icon">
diff --git a/src/lib/components/LinkWithoutIcon.svelte b/src/lib/components/LinkWithoutIcon.svelte
index 411215df2..b40789c1e 100644
--- a/src/lib/components/LinkWithoutIcon.svelte
+++ b/src/lib/components/LinkWithoutIcon.svelte
@@ -1,22 +1,39 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { pushState } from '$app/navigation'
 	import { localizeHref, locales } from '$lib/paraglide/runtime'
 	import type { LinkType } from '$lib/types'
-	import type { Action } from 'svelte/action'
+	import type { Attachment } from 'svelte/attachments'
+	import { getLinkType } from '$lib/link'
 
-	export let href: string | null = null
-	export let target: string | null = null
-	let className: string = ''
-	export { className as class }
-	export let rel: string | null = null
+	interface Props {
+		href?: string | null
+		target?: string | null
+		class?: string
+		rel?: string | null
+		type?: LinkType
+		onclick?: (event: MouseEvent) => void
+		children?: import('svelte').Snippet
+		[key: string]: unknown
+	}
+
+	let {
+		href = null,
+		target = null,
+		class: className = '',
+		rel = null,
+		type,
+		onclick,
+		children,
+		...rest
+	}: Props = $props()
 
-	export let type: LinkType = 'internal'
+	let resolvedType: LinkType = $derived(type ?? getLinkType(href))
 
 	// Localization helpers
 	const localePattern = new RegExp(`^/(${locales.join('|')})(/|$)`)
 	const shouldLocalizeHref = (h: string): boolean =>
-		type === 'internal' &&
+		resolvedType === 'internal' &&
 		h.startsWith('/') &&
 		!h.match(localePattern) &&
 		!h.includes('#no-localize')
@@ -26,56 +43,38 @@
 		return shouldLocalizeHref(h) ? localizeHref(cleaned) : cleaned
 	}
 
-	// Normalize and localize href
-	let resolvedHref: string | null = null
-	$: {
-		if (href) {
-			if (
-				(href.startsWith('http:') || href.startsWith('https:')) &&
-				!href.startsWith('https://pauseai.info/') &&
-				!(href.includes('s3.amazonaws') && href.includes('/pauseai-'))
-			) {
-				type = 'external'
-				// Automatically open petition and action-specific tools in a new tab
-				if (!target && (href.includes('change.org') || href.includes('activoice.org'))) {
-					target = '_blank'
-					if (!rel) rel = 'noopener noreferrer'
-				}
-			} else if (href.startsWith('mailto:')) {
-				type = 'mail'
-			}
+	// Automatically open petition and action-specific tools in a new tab
+	let isPetitionLink = $derived(
+		resolvedType === 'external' &&
+			href !== null &&
+			(href.includes('change.org') || href.includes('activoice.org'))
+	)
+	let resolvedTarget = $derived(target ?? (isPetitionLink ? '_blank' : null))
+	let resolvedRel = $derived(rel ?? (isPetitionLink ? 'noopener noreferrer' : null))
 
-			resolvedHref = processHref(href)
-		}
-	}
+	// Normalize and localize href
+	let resolvedHref: string | null = $derived(href ? processHref(href) : null)
 
 	/** Action for smooth scrolling to anchor links */
-	const smoothScroll: Action<HTMLAnchorElement, string | null> = (
-		node: HTMLAnchorElement,
-		h: string | null
-	) => {
-		const handleClick = (ev: MouseEvent) => {
-			if (h && h.startsWith('#')) {
-				ev.preventDefault()
-				const url = $page.url
-				url.hash = h
-				pushState(url, $page.state)
-				const targetEl = document.querySelector<HTMLElement>(h)
-				if (!targetEl) return
-				targetEl.scrollIntoView({ behavior: 'smooth' })
-				targetEl.tabIndex = -1
-				targetEl.focus({ preventScroll: true })
+	const smoothScroll: (h: string | null) => Attachment<HTMLAnchorElement> = (h: string | null) => {
+		return (node: HTMLAnchorElement) => {
+			const handleClick = (ev: MouseEvent) => {
+				if (h && h.startsWith('#')) {
+					ev.preventDefault()
+					const url = page.url
+					url.hash = h
+					pushState(url, page.state)
+					const targetEl = document.querySelector<HTMLElement>(h)
+					if (!targetEl) return
+					targetEl.scrollIntoView({ behavior: 'smooth' })
+					targetEl.tabIndex = -1
+					targetEl.focus({ preventScroll: true })
+				}
 			}
-		}
 
-		node.addEventListener('click', handleClick)
-		return {
-			update(newHref: string | null) {
-				h = newHref
-			},
-			destroy() {
-				node.removeEventListener('click', handleClick)
-			}
+			node.addEventListener('click', handleClick)
+
+			return () => node.removeEventListener('click', handleClick)
 		}
 	}
 </script>
@@ -83,11 +82,12 @@
 <!-- eslint-disable-next-line svelte/no-restricted-html-elements - Warning is about using this component -->
 <a
 	href={resolvedHref}
-	{target}
-	{rel}
+	target={resolvedTarget}
+	rel={resolvedRel}
 	class={className}
-	use:smoothScroll={resolvedHref}
-	{...$$restProps}
+	{@attach smoothScroll(resolvedHref)}
+	{onclick}
+	{...rest}
 >
-	<slot></slot>
+	{@render children?.()}
 </a>
diff --git a/src/lib/components/LoadingSpinner.svelte b/src/lib/components/LoadingSpinner.svelte
index 39e4a4c8d..b4a347e28 100644
--- a/src/lib/components/LoadingSpinner.svelte
+++ b/src/lib/components/LoadingSpinner.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let size: 'small' | 'medium' | 'large' = 'medium'
-	export let color: string = 'currentColor'
+	interface Props {
+		size?: 'small' | 'medium' | 'large'
+		color?: string
+	}
+
+	let { size = 'medium', color = 'currentColor' }: Props = $props()
 </script>
 
 <div class="spinner {size}" style="color: {color}">
diff --git a/src/lib/components/LumaSignup.svelte b/src/lib/components/LumaSignup.svelte
index af640580a..4323b26c7 100644
--- a/src/lib/components/LumaSignup.svelte
+++ b/src/lib/components/LumaSignup.svelte
@@ -4,7 +4,12 @@
 	const BASE_URL = 'https://lu.ma'
 	const EMBED_BASE_URL = 'https://embed.lu.ma'
 
-	export let eventId: string
+	interface Props {
+		eventId: string
+		children?: import('svelte').Snippet
+	}
+
+	let { eventId, children }: Props = $props()
 </script>
 
 <svelte:head>
@@ -18,7 +23,7 @@
 		data-luma-action="checkout"
 		data-luma-event-id={eventId}
 	>
-		<slot></slot>
+		{@render children?.()}
 	</LinkWithoutIcon>
 </div>
 
diff --git a/src/lib/components/MessageWithLink.svelte b/src/lib/components/MessageWithLink.svelte
index a16482491..a99d2abc5 100644
--- a/src/lib/components/MessageWithLink.svelte
+++ b/src/lib/components/MessageWithLink.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import Link from './Link.svelte'
 
-	/**
-	 * The `content` prop can contain HTML and markdown-style links.
-	 * It is only meant for static messages and should not be used for user-generated content.
-	 * @example "Hello <strong>world</strong>, visit [Svelte](https://svelte.dev) today!"
-	 */
-	export let content = ''
+	interface Props {
+		/**
+		 * The `content` prop can contain HTML and markdown-style links.
+		 * It is only meant for static messages and should not be used for user-generated content.
+		 * @example "Hello <strong>world</strong>, visit [Svelte](https://svelte.dev) today!"
+		 */
+		content?: string
+	}
+
+	let { content = '' }: Props = $props()
 
 	type LinkPart = {
 		type: 'link'
@@ -51,7 +55,7 @@
 	}
 
 	// Re-parse whenever content changes
-	$: parts = parseContent(content)
+	let parts = $derived(parseContent(content))
 </script>
 
 <!-- Render the parsed parts -->
diff --git a/src/lib/components/NationalGroupItem.svelte b/src/lib/components/NationalGroupItem.svelte
index 0641a700f..b38923585 100644
--- a/src/lib/components/NationalGroupItem.svelte
+++ b/src/lib/components/NationalGroupItem.svelte
@@ -18,10 +18,14 @@
 	// Lucide icons for missing ones
 	import { Globe, Link, Calendar, Mail } from 'lucide-svelte'
 
-	export let nationalGroup: NationalGroup
+	interface Props {
+		nationalGroup: NationalGroup
+	}
+
+	let { nationalGroup }: Props = $props()
 
 	const baseImagePath = '/images/'
-	const imageUrl = nationalGroup.image || `${baseImagePath}default.png` // Directly use nationalGroup.image or default
+	const imageUrl = $derived(nationalGroup.image ?? `${baseImagePath}default.png`) // Directly use nationalGroup.image or default
 
 	const iconMap: Record<NationalGroupLink, Component | ComponentType> = {
 		website: Globe,
@@ -40,16 +44,16 @@
 
 	const linkEntries = typedEntries(iconMap)
 
-	let isOpen = false
+	let isOpen = $state(false)
 
 	function toggleOpen() {
 		isOpen = !isOpen
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<li class="national-group" on:click={toggleOpen} class:is-open={isOpen}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<li class="national-group" onclick={toggleOpen} class:is-open={isOpen}>
 	<div class="header">
 		<div class="icon" class:is-open={isOpen}>
 			<svg
diff --git a/src/lib/components/NationalGroupsList.svelte b/src/lib/components/NationalGroupsList.svelte
index df6b54ca4..466af6536 100644
--- a/src/lib/components/NationalGroupsList.svelte
+++ b/src/lib/components/NationalGroupsList.svelte
@@ -4,7 +4,11 @@
 	import NationalGroupItem from '$lib/components/NationalGroupItem.svelte'
 	import { fetchNationalGroups } from '$lib/nationalGroups'
 
-	export let nationalGroups: NationalGroup[] = []
+	interface Props {
+		nationalGroups?: NationalGroup[]
+	}
+
+	let { nationalGroups = $bindable([]) }: Props = $props()
 
 	onMount(async () => {
 		if (nationalGroups.length === 0) {
diff --git a/src/lib/components/NearbyEvent.svelte b/src/lib/components/NearbyEvent.svelte
index 8f9fa6f1a..3a61ac215 100644
--- a/src/lib/components/NearbyEvent.svelte
+++ b/src/lib/components/NearbyEvent.svelte
@@ -6,9 +6,13 @@
 	import type { CalendarResponse, Event } from '$api/calendar/+server'
 	import Banner from '$lib/components/Banner.svelte'
 
-	export let contrast: boolean
-	export let eventFound = false
-	export let geo: GeoApiResponse | null = null
+	interface Props {
+		contrast: boolean
+		eventFound?: boolean
+		geo?: GeoApiResponse | null
+	}
+
+	let { contrast, eventFound = $bindable(false), geo = null }: Props = $props()
 
 	const FORMAT = new Intl.DateTimeFormat('en', { day: 'numeric', month: 'long' })
 	const MAX_DISTANCE_KM = 100
@@ -16,19 +20,13 @@
 		jogj70dj: 480 // Override for specific D.C. (Capitol Hill) event to include users up to 250 miles away
 	}
 
-	let events: CalendarResponse | null = null
-	let nearbyEvent: Event | null = null
-
-	$: eventFound = !!nearbyEvent
+	let events: CalendarResponse | null = $state(null)
+	let nearbyEvent: Event | null = $derived(geo && events ? findNearbyEvent(geo, events) : null)
 
 	onMount(async () => {
 		events = await fetchLuma()
 	})
 
-	$: if (geo && events) {
-		nearbyEvent = findNearbyEvent(geo, events)
-	}
-
 	function findNearbyEvent(geo: GeoApiResponse, events: CalendarResponse) {
 		const { latitude: userLatitude, longitude: userLongitude } = geo
 		if (userLatitude == null || userLongitude == null) return null
@@ -52,6 +50,10 @@
 		const response = await fetch('/api/calendar?days=30')
 		return (await response.json()) as CalendarResponse
 	}
+
+	$effect(() => {
+		eventFound = !!nearbyEvent
+	})
 </script>
 
 {#if nearbyEvent}
diff --git a/src/lib/components/NetlifyImage.svelte b/src/lib/components/NetlifyImage.svelte
index 9659d65c5..5182ac236 100644
--- a/src/lib/components/NetlifyImage.svelte
+++ b/src/lib/components/NetlifyImage.svelte
@@ -1,23 +1,37 @@
 <script lang="ts">
 	import { SvelteURLSearchParams } from 'svelte/reactivity'
 
-	export let src: string
-	export let alt: string
-	export let widths: number[] = [400, 800, 1200, 1600, 2400]
-	export let sizes: string = '(min-width: 1280px) 1200px, 100vw'
-	export let quality: number = 80
-	export let fit: 'cover' | 'contain' | 'fill' | 'inside' | 'outside' = 'contain'
-
-	export let pictureClass: string | undefined = undefined
-	export let imgClass: string | undefined = undefined
-	export let style: string | undefined = undefined
-	export let loading: 'lazy' | 'eager' = 'lazy'
-	export let decoding: 'async' | 'sync' | 'auto' = 'async'
+	interface Props {
+		src: string
+		alt: string
+		widths?: number[]
+		sizes?: string
+		quality?: number
+		fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
+		pictureClass?: string | undefined
+		imgClass?: string | undefined
+		style?: string | undefined
+		loading?: 'lazy' | 'eager'
+		decoding?: 'async' | 'sync' | 'auto'
+		onFailed?: (() => void) | undefined
+	}
 
-	/** Callback when the image fails to load entirely (including fallback) */
-	export let onFailed: (() => void) | undefined = undefined
+	let {
+		src,
+		alt,
+		widths = [400, 800, 1200, 1600, 2400],
+		sizes = '(min-width: 1280px) 1200px, 100vw',
+		quality = 80,
+		fit = 'contain',
+		pictureClass = undefined,
+		imgClass = undefined,
+		style = undefined,
+		loading = 'lazy',
+		decoding = 'async',
+		onFailed = undefined
+	}: Props = $props()
 
-	let useFallback = false
+	let useFallback = $state(false)
 
 	function handleError(e: Event) {
 		const imgElement = e.target as HTMLImageElement
@@ -62,22 +76,24 @@
 	const webpSrcSet = buildSrcSet('webp')
 
 	// Fallback to a jpeg
-	const fallbackSrc = buildNetlifyUrl(src, {
-		w: widths[0], // Smallest width for browsers that don't support srcset
-		q: quality,
-		fm: 'jpg',
-		fit
-	})
+	const fallbackSrc = $derived(
+		buildNetlifyUrl(src, {
+			w: widths[0], // Smallest width for browsers that don't support srcset
+			q: quality,
+			fm: 'jpg',
+			fit
+		})
+	)
 </script>
 
 {#if useFallback}
-	<img on:error={handleError} {src} {alt} class={imgClass} {style} {loading} {decoding} />
+	<img onerror={handleError} {src} {alt} class={imgClass} {style} {loading} {decoding} />
 {:else}
 	<picture class={pictureClass} {style}>
 		<source type="image/avif" srcset={avifSrcSet} {sizes} />
 		<source type="image/webp" srcset={webpSrcSet} {sizes} />
 		<img
-			on:error={handleError}
+			onerror={handleError}
 			src={fallbackSrc}
 			{alt}
 			{sizes}
diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte
index 951595e26..417026e89 100644
--- a/src/lib/components/NewsCard.svelte
+++ b/src/lib/components/NewsCard.svelte
@@ -6,19 +6,22 @@
 	import NetlifyImage from './NetlifyImage.svelte'
 	import Skeleton from './Skeleton.svelte'
 
-	let isExternal: boolean
-	let hasImageError = false
+	interface Props {
+		item?: NewsItem
+		loading?: boolean
+		imageSizes?: string
+		id?: string
+	}
 
-	export let item: NewsItem | undefined = undefined
-	export let loading: boolean = false
-	export let imageSizes: string | undefined = undefined
-	/** Optional anchor id (e.g. for hash links from elsewhere) */
-	export let id: string | undefined = undefined
+	let { item, loading = false, imageSizes, id }: Props = $props()
 
-	$: isExternal = item?.source === 'substack' || item?.source === 'press'
+	let isExternal = $derived(item?.source === 'substack' || item?.source === 'press')
+	let hasImageError = $state(false)
 
-	// Reset error state if image changes
-	$: if (item?.image) hasImageError = false
+	// Reset error state when item changes and new item has image
+	$effect(() => {
+		if (item?.image) hasImageError = false
+	})
 </script>
 
 <div>
diff --git a/src/lib/components/NewsletterSignup.svelte b/src/lib/components/NewsletterSignup.svelte
index f74cc6f9d..111f6ccf8 100644
--- a/src/lib/components/NewsletterSignup.svelte
+++ b/src/lib/components/NewsletterSignup.svelte
@@ -2,17 +2,26 @@
 	import * as m from '$lib/paraglide/messages.js'
 	import { tick } from 'svelte'
 
-	// Localizable text
-	export let placeholderText = m.newsletter_email_placeholder()
-	export let buttonText = m.newsletter_button()
-	export let headingText = m.newsletter_heading()
-	export let descriptionText = m.newsletter_description()
+	interface Props {
+		// Localizable text
+		placeholderText?: m.LocalizedString
+		buttonText?: m.LocalizedString
+		headingText?: m.LocalizedString
+		descriptionText?: m.LocalizedString
+		// State variable for email binding (for external use)
+		email?: string
+	}
 
-	// State variable for email binding (for external use)
-	export let email = ''
+	let {
+		placeholderText = m.newsletter_email_placeholder(),
+		buttonText = m.newsletter_button(),
+		headingText = m.newsletter_heading(),
+		descriptionText = m.newsletter_description(),
+		email = $bindable('')
+	}: Props = $props()
 
 	// State for showing success message
-	let showSuccess = false
+	let showSuccess = $state(false)
 	let formElement: HTMLFormElement
 
 	const handleSubmit = async (e: Event) => {
@@ -43,7 +52,7 @@
 			action="https://pauseai.substack.com/api/v1/free"
 			method="POST"
 			target="_blank"
-			on:submit={handleSubmit}
+			onsubmit={handleSubmit}
 		>
 			<div class="input-group">
 				<input
diff --git a/src/lib/components/PostMeta.svelte b/src/lib/components/PostMeta.svelte
index 11cbf173b..46903d177 100644
--- a/src/lib/components/PostMeta.svelte
+++ b/src/lib/components/PostMeta.svelte
@@ -1,22 +1,33 @@
 <script lang="ts">
 	import { title as siteName, url as rootUrl } from '$lib/config'
 	import type { BlogPosting, WithContext } from 'schema-dts'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { deLocalizeHref } from '$lib/paraglide/runtime'
 
-	export let title: string
-	export let description: string
-	export let date: string | undefined = undefined
-	/** URL or relative path to cover / preview image */
-	export let image = '/Cover.jpg'
-	/** Canonical URL for this page (og:url) */
-	export let pageUrl: string = `${rootUrl}${deLocalizeHref($page.url.pathname)}`
-	/** Alt text for the image (og:image:alt) */
-	export let imageAlt: string | undefined = undefined
+	interface Props {
+		title: string
+		description?: string
+		date?: string
+		/** URL or relative path to cover / preview image */
+		image?: string
+		/** Canonical URL for this page (og:url) */
+		pageUrl?: string
+		/** Alt text for the image (og:image:alt) */
+		imageAlt?: string
+	}
+
+	let {
+		title,
+		description = '',
+		date,
+		image = '/Cover.jpg',
+		pageUrl = `${rootUrl}${deLocalizeHref(page.url.pathname)}`,
+		imageAlt
+	}: Props = $props()
 
-	const imageUrl = image.startsWith('/') ? `${rootUrl}${image}` : image
+	const imageUrl = $derived(image.startsWith('/') ? `${rootUrl}${image}` : image)
 
-	const schemaOrgMarkup: WithContext<BlogPosting> = {
+	const schemaOrgMarkup: WithContext<BlogPosting> = $derived({
 		'@context': 'https://schema.org',
 		'@type': 'BlogPosting',
 		headline: title,
@@ -31,7 +42,7 @@
 			name: siteName,
 			url: rootUrl
 		}
-	}
+	})
 </script>
 
 <svelte:head>
diff --git a/src/lib/components/PreloadFonts.svelte b/src/lib/components/PreloadFonts.svelte
index 3e9bcd726..110c700ac 100644
--- a/src/lib/components/PreloadFonts.svelte
+++ b/src/lib/components/PreloadFonts.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let urls: string[]
+	interface Props {
+		urls: string[]
+	}
+
+	let { urls }: Props = $props()
 </script>
 
 <svelte:head>
diff --git a/src/lib/components/PressCoveragePanel.svelte b/src/lib/components/PressCoveragePanel.svelte
index a29a66f43..369b795f1 100644
--- a/src/lib/components/PressCoveragePanel.svelte
+++ b/src/lib/components/PressCoveragePanel.svelte
@@ -3,10 +3,14 @@
 	import NewsCard from '$lib/components/NewsCard.svelte'
 	import type { NewsItem } from '$lib/types'
 
-	export let coverage: PressCoverage[] = []
-	export let typeOrder: string[] = []
-	export let outletOrder: string[] = []
-	export let loading: boolean = false
+	interface Props {
+		coverage?: PressCoverage[]
+		typeOrder?: string[]
+		outletOrder?: string[]
+		loading?: boolean
+	}
+
+	let { coverage = [], typeOrder = [], outletOrder = [], loading = false }: Props = $props()
 
 	function toNewsItem(item: PressCoverage): NewsItem {
 		return {
@@ -20,30 +24,31 @@
 		}
 	}
 
-	let availableTypes: string[] = []
 	// Extract unique type names for tab labels
-	$: availableTypes = Array.from(new Set(coverage.map((c) => c.type))).filter(Boolean)
+	let availableTypes: string[] = $derived(
+		Array.from(new Set(coverage.map((c) => c.type))).filter(Boolean)
+	)
 
 	// Sort them based on the schema order fetched directly from Notion
-	$: orderedTabs = typeOrder.length > 0 ? typeOrder : outletOrder
-	$: tabs = [...availableTypes].sort((a, b) => {
-		const indexA = orderedTabs.indexOf(a)
-		const indexB = orderedTabs.indexOf(b)
-		if (indexA !== -1 && indexB !== -1) return indexA - indexB
-		if (indexA !== -1) return -1
-		if (indexB !== -1) return 1
-		return a.localeCompare(b)
-	})
-
-	let activeTab = ''
-	$: {
-		// Set default to International if available, or first ordered tab
-		if (!tabs.includes(activeTab) && tabs.length > 0) {
-			activeTab = tabs.find((t) => t.includes('International')) || tabs[0]
-		}
-	}
-
-	$: filteredCoverage = coverage.filter((c) => c.type === activeTab)
+	let orderedTabs = $derived(typeOrder.length > 0 ? typeOrder : outletOrder)
+	let tabs = $derived(
+		availableTypes.toSorted((a, b) => {
+			const indexA = orderedTabs.indexOf(a)
+			const indexB = orderedTabs.indexOf(b)
+			if (indexA !== -1 && indexB !== -1) return indexA - indexB
+			if (indexA !== -1) return -1
+			if (indexB !== -1) return 1
+			return a.localeCompare(b)
+		})
+	)
+
+	let selectedTab = $state('')
+	let activeTab = $derived(
+		!tabs.includes(selectedTab) && tabs.length > 0
+			? (tabs.find((t) => t.includes('International')) ?? tabs[0])
+			: selectedTab
+	)
+	let filteredCoverage = $derived(coverage.filter((c) => c.type === activeTab))
 </script>
 
 <div class="coverage-layout">
@@ -61,7 +66,7 @@
 				<button
 					class="tab-button"
 					class:active={activeTab === tab}
-					on:click={() => (activeTab = tab)}
+					onclick={() => (selectedTab = tab)}
 				>
 					{tab}
 				</button>
diff --git a/src/lib/components/PressCoveragePanelLoader.svelte b/src/lib/components/PressCoveragePanelLoader.svelte
index 2b01b3f60..2ca292e1a 100644
--- a/src/lib/components/PressCoveragePanelLoader.svelte
+++ b/src/lib/components/PressCoveragePanelLoader.svelte
@@ -3,12 +3,12 @@
 	import PressCoveragePanel from './PressCoveragePanel.svelte'
 	import { getPressCoverage } from '$lib/press-coverage.remote'
 
-	let data: Awaited<ReturnType<typeof getPressCoverage>> = {
+	let data: Awaited<ReturnType<typeof getPressCoverage>> = $state({
 		coverage: [],
 		typeOrder: [],
 		outletOrder: []
-	}
-	let loading = true
+	})
+	let loading = $state(true)
 
 	onMount(async () => {
 		try {
diff --git a/src/lib/components/Processing.svelte b/src/lib/components/Processing.svelte
index 9052ce939..c3b53e4d4 100644
--- a/src/lib/components/Processing.svelte
+++ b/src/lib/components/Processing.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let errorMessage: string | undefined = undefined
+	interface Props {
+		errorMessage?: string | undefined
+	}
+
+	let { errorMessage = undefined }: Props = $props()
 </script>
 
 {#if errorMessage}
diff --git a/src/lib/components/QuoteContent.svelte b/src/lib/components/QuoteContent.svelte
index 321258ba6..e3e9d097a 100644
--- a/src/lib/components/QuoteContent.svelte
+++ b/src/lib/components/QuoteContent.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { CarouselQuote } from '$lib/types'
 
-	export let quote: CarouselQuote
+	interface Props {
+		quote: CarouselQuote
+	}
+
+	let { quote }: Props = $props()
 </script>
 
 <svelte:element
diff --git a/src/lib/components/QuotesCarousel.svelte b/src/lib/components/QuotesCarousel.svelte
index feb869509..4cd69ad5c 100644
--- a/src/lib/components/QuotesCarousel.svelte
+++ b/src/lib/components/QuotesCarousel.svelte
@@ -25,8 +25,8 @@
 	const AUTOPLAY_INTERVAL = 10_000
 
 	let glide: Glide
-	let currentSlide: number | null = null
-	let isSwiping = false
+	let currentSlide: number | null = $state(null)
+	let isSwiping = $state(false)
 
 	const quotes: CarouselQuote[] = [
 		{
diff --git a/src/lib/components/SearchModal.svelte b/src/lib/components/SearchModal.svelte
index 5e0a1fab3..188b98a01 100644
--- a/src/lib/components/SearchModal.svelte
+++ b/src/lib/components/SearchModal.svelte
@@ -4,16 +4,22 @@
 	import type { PagefindModal, PagefindSearchResult } from '@pagefind/component-ui'
 	import { onMount } from 'svelte'
 
-	export let open = false
+	interface Props {
+		open?: boolean
+	}
 
-	let theme: 'light' | 'dark' = 'light'
-	let modalEl: PagefindModal | null = null
-	let ready = false
+	let { open = $bindable(false) }: Props = $props()
 
-	$: if (browser && open && modalEl && ready) {
-		modalEl.open()
-		open = false
-	}
+	let theme: 'light' | 'dark' = $state('light')
+	let modalEl: PagefindModal | null = $state(null)
+	let ready = $state(false)
+
+	$effect(() => {
+		if (browser && open && modalEl && ready) {
+			modalEl.open()
+			open = false
+		}
+	})
 
 	onMount(() => {
 		const init = async () => {
diff --git a/src/lib/components/ShareButtons.svelte b/src/lib/components/ShareButtons.svelte
index 2613b6d15..02eb9be46 100644
--- a/src/lib/components/ShareButtons.svelte
+++ b/src/lib/components/ShareButtons.svelte
@@ -14,8 +14,12 @@
 	import Linkedin from '$lib/components/icons/linkedin.svelte'
 	import Reddit from '$lib/components/icons/reddit.svelte'
 
-	export let campaign: string // Campaign name (e.g., "sayno")
-	export let uid: string | null = null // Optional referral tracking ID
+	interface Props {
+		campaign: string // Campaign name (e.g., "sayno")
+		uid?: string | null // Optional referral tracking ID
+	}
+
+	let { campaign, uid = null }: Props = $props()
 
 	const COLLAGEN_BASE = 'https://collagen.pauseai.info'
 
@@ -39,11 +43,11 @@
 	{#each platforms as platform}
 		<button
 			class="share-button"
-			on:click={() => handleShare(platform.name)}
+			onclick={() => handleShare(platform.name)}
 			aria-label="Share on {platform.label}"
 		>
 			<span class="icon">
-				<svelte:component this={platform.component} />
+				<platform.component />
 			</span>
 			<span class="label">{platform.label}</span>
 		</button>
diff --git a/src/lib/components/Skeleton.svelte b/src/lib/components/Skeleton.svelte
index e7ac5dc22..717318f31 100644
--- a/src/lib/components/Skeleton.svelte
+++ b/src/lib/components/Skeleton.svelte
@@ -7,16 +7,31 @@
 	type Variant = 'text' | 'rect' | 'circle'
 	type Animation = 'shimmer' | 'pulse' | 'none'
 
-	let className = ''
-	export { className as class }
-	export let width: string = '100%'
-	export let height: string = '1em'
-	export let variant: Variant = 'text'
-	export let animation: Animation = 'shimmer'
-	export let count: number = 1
-	export let loading: boolean = true
-	export let random: boolean = false
-	export let seed: number = 0
+	interface Props {
+		class?: string
+		width?: string
+		height?: string
+		variant?: Variant
+		animation?: Animation
+		count?: number
+		loading?: boolean
+		random?: boolean
+		seed?: number
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		class: className = '',
+		width = '100%',
+		height = '1em',
+		variant = 'text',
+		animation = 'shimmer',
+		count = 1,
+		loading = true,
+		random = false,
+		seed = 0,
+		children
+	}: Props = $props()
 
 	function isLastLineOfMultilineText(variant: Variant, index: number, totalCount: number) {
 		return variant === 'text' && index === totalCount - 1 && totalCount > 1
@@ -48,7 +63,7 @@
 		></span>
 	{/each}
 {:else}
-	<slot></slot>
+	{@render children?.()}
 {/if}
 
 <style>
diff --git a/src/lib/components/StatBlock.svelte b/src/lib/components/StatBlock.svelte
index 9dd4bb122..e1c044f8e 100644
--- a/src/lib/components/StatBlock.svelte
+++ b/src/lib/components/StatBlock.svelte
@@ -3,11 +3,15 @@
 	import SvelteIntersectionObserver from '$lib/components/SvelteIntersectionObserver.svelte'
 	import Link from '$lib/components/Link.svelte'
 
-	export let percentage: number
-	export let text: string
-	export let link: string
+	interface Props {
+		percentage: number
+		text: string
+		link: string
+	}
+
+	let { percentage, text, link }: Props = $props()
 
-	let isIntersecting: boolean
+	let isIntersecting: boolean = $state(false)
 </script>
 
 <SvelteIntersectionObserver bind:isIntersecting defaultToIntersecting disconnectOnIntersect>
diff --git a/src/lib/components/SvelteIntersectionObserver.svelte b/src/lib/components/SvelteIntersectionObserver.svelte
index c4ef4f44c..9a2f3e068 100644
--- a/src/lib/components/SvelteIntersectionObserver.svelte
+++ b/src/lib/components/SvelteIntersectionObserver.svelte
@@ -1,11 +1,23 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 
-	export let defaultToIntersecting = false
-	export let disconnectOnIntersect = false
-	export let isIntersecting: boolean = defaultToIntersecting
-	export let rootMargin: string = '0px'
-	export let threshold: number | number[] = 0
+	interface Props {
+		defaultToIntersecting?: boolean
+		disconnectOnIntersect?: boolean
+		isIntersecting?: boolean
+		rootMargin?: string
+		threshold?: number | number[]
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		defaultToIntersecting = false,
+		disconnectOnIntersect = false,
+		isIntersecting = $bindable(defaultToIntersecting),
+		rootMargin = '0px',
+		threshold = 0,
+		children
+	}: Props = $props()
 
 	let element: HTMLElement
 	let observer: IntersectionObserver
@@ -25,5 +37,5 @@
 </script>
 
 <div bind:this={element}>
-	<slot></slot>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/Tabs.svelte b/src/lib/components/Tabs.svelte
index b81fbc9f3..fcce6187d 100644
--- a/src/lib/components/Tabs.svelte
+++ b/src/lib/components/Tabs.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 
-	export let tabs: { title: string; content: string }[] = []
-	export let activeTab = 0
+	interface Props {
+		tabs?: { title: string; content: string }[]
+		activeTab?: number
+	}
+
+	let { tabs = [], activeTab = $bindable(0) }: Props = $props()
 
 	let tabButtons: HTMLDivElement
 	let tabContents: HTMLDivElement
@@ -44,7 +48,7 @@
 <div class="tabs-container">
 	<div class="tab-buttons" class:tabs-6={tabs.length === 6} bind:this={tabButtons}>
 		{#each tabs as tab, i}
-			<button class="tab-button" class:active={i === activeTab} on:click={() => updateActiveTab(i)}>
+			<button class="tab-button" class:active={i === activeTab} onclick={() => updateActiveTab(i)}>
 				{tab.title}
 			</button>
 		{/each}
diff --git a/src/lib/components/TallyEmbed.svelte b/src/lib/components/TallyEmbed.svelte
index e32139cfd..aec59467e 100644
--- a/src/lib/components/TallyEmbed.svelte
+++ b/src/lib/components/TallyEmbed.svelte
@@ -2,53 +2,61 @@
 	import { onMount } from 'svelte'
 	import { SvelteURLSearchParams } from 'svelte/reactivity'
 
-	// ─── REQUIRED ────────────────────────────────────────────────────────
-
-	/** Tally form ID (required) */
-	export let formId: string
-
-	// ─── OPTIONAL ────────────────────────────────────────────────────────
-
-	/** Optional custom domain (Pro feature) */
-	export let customDomain = ''
-
-	// Toggle UI features
-
-	export let alignLeft = true
-	export let hideTitle = true
-	export let transparentBackground = true
-	export let dynamicHeight = true
-
-	/** Additional hidden query parameters */
-	export let extraParams: Record<string, string | number | boolean> = {}
+	interface Props {
+		// ─── REQUIRED ────────────────────────────────────────────────────────
+		/** Tally form ID (required) */
+		formId: string
+
+		// ─── OPTIONAL ────────────────────────────────────────────────────────
+		/** Optional custom domain (Pro feature) */
+		customDomain?: string
+		// Toggle UI features
+		alignLeft?: boolean
+		hideTitle?: boolean
+		transparentBackground?: boolean
+		dynamicHeight?: boolean
+		/** Additional hidden query parameters */
+		extraParams?: Record<string, string | number | boolean>
+		/** Initial iframe height in pixels */
+		height?: number
+	}
 
-	/** Initial iframe height in pixels */
-	export let height = 282
+	let {
+		formId,
+		customDomain = '',
+		alignLeft = true,
+		hideTitle = true,
+		transparentBackground = true,
+		dynamicHeight = true,
+		extraParams = {},
+		height = 282
+	}: Props = $props()
 
 	// ─── EMBED URL CONSTRUCTION ─────────────────────────────────────────
 
-	$: baseUrl = customDomain
-		? `${customDomain.replace(/\/+$/, '')}/${formId}`
-		: `https://tally.so/embed/${formId}`
-
-	let urlParams = new SvelteURLSearchParams()
+	let baseUrl = $derived(
+		customDomain
+			? `${customDomain.replace(/\/+$/, '')}/${formId}`
+			: `https://tally.so/embed/${formId}`
+	)
 
-	$: {
-		urlParams = new SvelteURLSearchParams()
+	let urlParams = $derived.by(() => {
+		const params = new SvelteURLSearchParams()
 
-		if (alignLeft) urlParams.set('alignLeft', '1')
-		if (hideTitle) urlParams.set('hideTitle', '1')
-		if (transparentBackground) urlParams.set('transparentBackground', '1')
-		if (dynamicHeight) urlParams.set('dynamicHeight', '1')
+		if (alignLeft) params.set('alignLeft', '1')
+		if (hideTitle) params.set('hideTitle', '1')
+		if (transparentBackground) params.set('transparentBackground', '1')
+		if (dynamicHeight) params.set('dynamicHeight', '1')
 
 		for (const [key, value] of Object.entries(extraParams)) {
 			if (value != null && value !== '') {
-				urlParams.set(key, value.toString())
+				params.set(key, value.toString())
 			}
 		}
-	}
+		return params
+	})
 
-	$: formSrc = `${baseUrl}?${urlParams.toString()}`
+	let formSrc = $derived(`${baseUrl}?${urlParams.toString()}`)
 
 	// execute after DOM is ready
 	onMount(() => {
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index d706a5923..7fe458392 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -2,7 +2,7 @@
 	import { userTheme, toggleTheme } from '$lib/theme'
 </script>
 
-<button class="button-to-link" on:click={toggleTheme} aria-label="Toggle theme"
+<button class="button-to-link" onclick={toggleTheme} aria-label="Toggle theme"
 	>{$userTheme} Theme</button
 >
 
diff --git a/src/lib/components/UKMPEmailForm.svelte b/src/lib/components/UKMPEmailForm.svelte
index 233a63eb3..51574ba22 100644
--- a/src/lib/components/UKMPEmailForm.svelte
+++ b/src/lib/components/UKMPEmailForm.svelte
@@ -4,19 +4,24 @@
 	import LoadingSpinner from './LoadingSpinner.svelte'
 	import Link from '$lib/components/Link.svelte'
 
-	export let mp: {
-		name: string
-		email: string
-		salutation: string
-		constituency: string
+	interface Props {
+		mp: {
+			name: string
+			email: string
+			salutation: string
+			constituency: string
+		}
+		userPostcode: string
+		userName: string
+		onsubmit?: (e: SubmitEvent) => void
 	}
-	export let userPostcode: string
-	export let userName: string
 
-	let senderName = userName
-	let senderEmail = ''
-	let subject = `Request to co-sign letter on AI liability`
-	let message = `Dear ${mp.salutation},
+	let { mp, userPostcode, userName, onsubmit }: Props = $props()
+
+	let senderName = $derived(userName)
+	let senderEmail = $state('')
+	let subject = $state(`Request to co-sign letter on AI liability`)
+	let message = $derived(`Dear ${mp.salutation},
 
 Would you be willing to sign this open letter supporting legislation to hold AI companies accountable when their models cause severe harm to our critical infrastructure?
 
@@ -32,17 +37,18 @@ Thank you for your consideration,
 
 ${userName}
 
-${userPostcode.toUpperCase()}`
+${userPostcode.toUpperCase()}`)
 
-	let messageTextarea: HTMLTextAreaElement
-	let subjectTextarea: HTMLTextAreaElement
-	let isSubmitting = false
-	let submitStatus: 'idle' | 'success' | 'error' = 'idle'
-	let errorMessage = ''
+	let messageTextarea: HTMLTextAreaElement | undefined = $state()
+	let subjectTextarea: HTMLTextAreaElement | undefined = $state()
+	let isSubmitting = $state(false)
+	let submitStatus: 'idle' | 'success' | 'error' = $state('idle')
+	let errorMessage = $state('')
 
-	$: htmlPreview = micromark(message)
+	let htmlPreview = $derived(micromark(message))
 
 	function insertMarkdown(before: string, after: string = '') {
+		if (!messageTextarea) return
 		const start = messageTextarea.selectionStart
 		const end = messageTextarea.selectionEnd
 		const selectedText = message.substring(start, end)
@@ -53,8 +59,8 @@ ${userPostcode.toUpperCase()}`
 
 		// Move cursor to end of inserted text
 		setTimeout(() => {
-			messageTextarea.focus()
-			messageTextarea.setSelectionRange(
+			messageTextarea?.focus()
+			messageTextarea?.setSelectionRange(
 				start + before.length,
 				start + before.length + selectedText.length
 			)
@@ -62,6 +68,7 @@ ${userPostcode.toUpperCase()}`
 	}
 
 	function insertBulletPoint() {
+		if (!messageTextarea) return
 		const start = messageTextarea.selectionStart
 		const end = messageTextarea.selectionEnd
 
@@ -86,9 +93,9 @@ ${userPostcode.toUpperCase()}`
 
 			// Adjust cursor position to account for the removed "- "
 			setTimeout(() => {
-				messageTextarea.focus()
+				messageTextarea?.focus()
 				const adjustment = currentLine.length - bulletRemoved.length
-				messageTextarea.setSelectionRange(start - adjustment, end - adjustment)
+				messageTextarea?.setSelectionRange(start - adjustment, end - adjustment)
 			}, 0)
 		} else {
 			// Insert "- " at the beginning of the current line
@@ -97,8 +104,8 @@ ${userPostcode.toUpperCase()}`
 
 			// Adjust cursor position to account for the inserted "- "
 			setTimeout(() => {
-				messageTextarea.focus()
-				messageTextarea.setSelectionRange(start + 2, end + 2)
+				messageTextarea?.focus()
+				messageTextarea?.setSelectionRange(start + 2, end + 2)
 			}, 0)
 		}
 	}
@@ -118,14 +125,18 @@ ${userPostcode.toUpperCase()}`
 	}
 
 	// Auto-resize when message changes
-	$: if (messageTextarea && message) {
-		autoResize()
-	}
+	$effect(() => {
+		if (messageTextarea && message) {
+			autoResize()
+		}
+	})
 
 	// Auto-resize when subject changes
-	$: if (subjectTextarea && subject) {
-		autoResizeSubject()
-	}
+	$effect(() => {
+		if (subjectTextarea && subject) {
+			autoResizeSubject()
+		}
+	})
 
 	async function handleSubmit() {
 		if (!senderEmail.trim()) {
@@ -177,7 +188,12 @@ ${userPostcode.toUpperCase()}`
 			<p>✅ Your email has been sent to {mp.name}!</p>
 		</div>
 	{:else}
-		<form on:submit|preventDefault>
+		<form
+			onsubmit={(e) => {
+				e.preventDefault()
+				onsubmit?.(e)
+			}}
+		>
 			<div class="form-group">
 				<label for="sender-email">Your email</label>
 				<input
@@ -197,7 +213,7 @@ ${userPostcode.toUpperCase()}`
 					bind:value={subject}
 					required
 					placeholder="Email subject"
-					on:input={autoResizeSubject}
+					oninput={autoResizeSubject}
 					rows="1"
 					class="subject-textarea"
 				></textarea>
@@ -214,19 +230,19 @@ ${userPostcode.toUpperCase()}`
 				</div>
 
 				<div class="markdown-toolbar">
-					<button type="button" on:click={() => insertMarkdown('**', '**')} title="Bold">
+					<button type="button" onclick={() => insertMarkdown('**', '**')} title="Bold">
 						<strong>B</strong>
 					</button>
-					<button type="button" on:click={() => insertMarkdown('_', '_')} title="Italic">
+					<button type="button" onclick={() => insertMarkdown('_', '_')} title="Italic">
 						<em>i</em>
 					</button>
-					<button type="button" on:click={() => insertMarkdown('# ', '')} title="Heading">
+					<button type="button" onclick={() => insertMarkdown('# ', '')} title="Heading">
 						H1
 					</button>
-					<button type="button" on:click={() => insertMarkdown('## ', '')} title="Subheading">
+					<button type="button" onclick={() => insertMarkdown('## ', '')} title="Subheading">
 						H2
 					</button>
-					<button type="button" on:click={() => insertBulletPoint()} title="Bullet point">
+					<button type="button" onclick={() => insertBulletPoint()} title="Bullet point">
 						• List
 					</button>
 				</div>
@@ -238,7 +254,7 @@ ${userPostcode.toUpperCase()}`
 						bind:value={message}
 						required
 						placeholder="Your message to the MP"
-						on:input={autoResize}
+						oninput={autoResize}
 						rows="1"
 					></textarea>
 				</div>
@@ -294,7 +310,7 @@ ${userPostcode.toUpperCase()}`
 				</div>
 			{/if}
 
-			<button type="button" disabled={isSubmitting} class="submit-button" on:click={handleSubmit}>
+			<button type="button" disabled={isSubmitting} class="submit-button" onclick={handleSubmit}>
 				{#if isSubmitting}
 					Sending
 					<LoadingSpinner size="small" color="currentColor" />
diff --git a/src/lib/components/UKMPLookup.svelte b/src/lib/components/UKMPLookup.svelte
index 96ff0ddce..a4ab2f0fd 100644
--- a/src/lib/components/UKMPLookup.svelte
+++ b/src/lib/components/UKMPLookup.svelte
@@ -17,13 +17,13 @@
 		responded: boolean
 	}
 
-	let postcode = ''
-	let userName = ''
-	let mp: MP | null = null
-	let contactStatus: MPContactStatus | null = null
-	let loading = false
-	let errorMessage = ''
-	let errorType: 'validation' | 'not_found' | 'server_error' | 'network' | '' = ''
+	let postcode = $state('')
+	let userName = $state('')
+	let mp: MP | null = $state(null)
+	let contactStatus: MPContactStatus | null = $state(null)
+	let loading = $state(false)
+	let errorMessage = $state('')
+	let errorType: 'validation' | 'not_found' | 'server_error' | 'network' | '' = $state('')
 
 	async function lookupMP() {
 		const trimmedPostcode = postcode.trim()
@@ -107,7 +107,7 @@
 					placeholder="Alex Morgan"
 					class="name-input"
 					class:error={errorMessage}
-					on:keypress={handleKeyPress}
+					onkeypress={handleKeyPress}
 					disabled={loading}
 				/>
 			</div>
@@ -120,13 +120,13 @@
 					placeholder="SW1A 1AA"
 					class="postcode-input"
 					class:error={errorMessage}
-					on:keypress={handleKeyPress}
+					onkeypress={handleKeyPress}
 					disabled={loading}
 				/>
 			</div>
 		</div>
 		<div class="button-row">
-			<Button on:click={lookupMP} disabled={loading || !postcode.trim() || !userName.trim()}>
+			<Button onclick={lookupMP} disabled={loading || !postcode.trim() || !userName.trim()}>
 				<span class="button-content">
 					{#if loading}
 						Looking up
diff --git a/src/lib/components/custom/a.svelte b/src/lib/components/custom/a.svelte
index 5d95ca369..5fb60d9a8 100644
--- a/src/lib/components/custom/a.svelte
+++ b/src/lib/components/custom/a.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import Link from '$lib/components/Link.svelte'
 
-	export let href: string
-	export let target: string | null = null
-	let className: string = ''
-	export { className as class }
-	export let rel: string | null = null
+	interface Props {
+		href: string
+		target?: string | null
+		class?: string
+		rel?: string | null
+		children?: import('svelte').Snippet
+	}
+
+	let { href, target = null, class: className = '', rel = null, children }: Props = $props()
 </script>
 
 <Link {href} {target} {rel} class={className}>
-	<slot></slot>
+	{@render children?.()}
 </Link>
diff --git a/src/lib/components/custom/img.svelte b/src/lib/components/custom/img.svelte
index 2ffa9bb76..6de240d70 100644
--- a/src/lib/components/custom/img.svelte
+++ b/src/lib/components/custom/img.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import Image from '../Image.svelte'
 
-	export let src: string
-	export let alt: string
+	interface Props {
+		src: string
+		alt: string
+	}
+
+	let { src, alt }: Props = $props()
 </script>
 
 <Image {src} {alt} />
diff --git a/src/lib/components/custom/table.svelte b/src/lib/components/custom/table.svelte
index ba60630d1..644b33652 100644
--- a/src/lib/components/custom/table.svelte
+++ b/src/lib/components/custom/table.svelte
@@ -1,7 +1,15 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
+</script>
+
 <div class="table-container">
 	<div class="table-border">
 		<table>
-			<slot></slot>
+			{@render children?.()}
 		</table>
 	</div>
 </div>
diff --git a/src/lib/components/logo.svelte b/src/lib/components/logo.svelte
index 6713c94db..908513f5a 100644
--- a/src/lib/components/logo.svelte
+++ b/src/lib/components/logo.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
-	export let width = 243
-	export let height = (width * 22) / 81
-	export let animate = false
-	export let fill: string | null = null
-	export let inverted = false
-	$: orange = inverted ? 'white' : '#FF9416'
-	$: modifiedFill = fill ?? (inverted ? 'black' : 'var(--text)')
+	interface Props {
+		width?: number
+		height?: number
+		animate?: boolean
+		fill?: string | null
+		inverted?: boolean
+	}
+
+	let {
+		width = 243,
+		height = (width * 22) / 81,
+		animate = false,
+		fill = null,
+		inverted = false
+	}: Props = $props()
+	let orange = $derived(inverted ? 'white' : '#FF9416')
+	let modifiedFill = $derived(fill ?? (inverted ? 'black' : 'var(--text)'))
 </script>
 
 <svg
diff --git a/src/lib/components/navbar/Navbar.svelte b/src/lib/components/navbar/Navbar.svelte
index 2c340ec45..ab4c34e99 100644
--- a/src/lib/components/navbar/Navbar.svelte
+++ b/src/lib/components/navbar/Navbar.svelte
@@ -2,17 +2,22 @@
 	import WideNavbar from './wide/WideNavbar.svelte'
 	import NarrowNavbar from './narrow/NarrowNavbar.svelte'
 
-	export let inverted = false
+	interface Props {
+		inverted?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let { inverted = false, children }: Props = $props()
 </script>
 
 <div class="wide-navbar">
 	<WideNavbar {inverted}>
-		<slot></slot>
+		{@render children?.()}
 	</WideNavbar>
 </div>
 <div class="narrow-navbar">
 	<NarrowNavbar {inverted}>
-		<slot></slot>
+		{@render children?.()}
 	</NarrowNavbar>
 </div>
 
diff --git a/src/lib/components/navbar/Navlink.svelte b/src/lib/components/navbar/Navlink.svelte
index bacc88e0e..6f9747d69 100644
--- a/src/lib/components/navbar/Navlink.svelte
+++ b/src/lib/components/navbar/Navlink.svelte
@@ -2,24 +2,39 @@
 	import WideNavlink from './wide/WideNavlink.svelte'
 	import NarrowNavlink from './narrow/NarrowNavlink.svelte'
 
-	export let href: string | undefined = undefined
-	export let c2a = false
-	export let ariaLabel: string | undefined = undefined
-	export let inverted = false
-	export let first = false
-	export let narrow = false
-	export let active = false
-	export let external = false
+	interface Props {
+		href?: string
+		c2a?: boolean
+		ariaLabel?: string
+		inverted?: boolean
+		first?: boolean
+		narrow?: boolean
+		active?: boolean
+		external?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		href,
+		c2a = false,
+		ariaLabel,
+		inverted = false,
+		first = false,
+		narrow = false,
+		active = false,
+		external = false,
+		children
+	}: Props = $props()
 </script>
 
 <span class="wide-navlink">
 	<WideNavlink {href} {c2a} {ariaLabel} {inverted} {first} {narrow} {active} {external}>
-		<slot></slot>
+		{@render children?.()}
 	</WideNavlink>
 </span>
 <span class="narrow-navlink">
 	<NarrowNavlink {href} {c2a} {ariaLabel} {inverted} {first} {narrow} {active} {external}>
-		<slot></slot>
+		{@render children?.()}
 	</NarrowNavlink>
 </span>
 
diff --git a/src/lib/components/navbar/narrow/NarrowNavbar.svelte b/src/lib/components/navbar/narrow/NarrowNavbar.svelte
index c4df85b94..8127720b4 100644
--- a/src/lib/components/navbar/narrow/NarrowNavbar.svelte
+++ b/src/lib/components/navbar/narrow/NarrowNavbar.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import UniversalNavbar from '../universal/UniversalNavbar.svelte'
+	interface Props {
+		children?: import('svelte').Snippet
+		[key: string]: unknown
+	}
+
+	let { children, ...rest }: Props = $props()
 </script>
 
-<UniversalNavbar {...$$restProps}>
-	<slot></slot>
+<UniversalNavbar {...rest}>
+	{@render children?.()}
 </UniversalNavbar>
diff --git a/src/lib/components/navbar/narrow/NarrowNavlink.svelte b/src/lib/components/navbar/narrow/NarrowNavlink.svelte
index f2508287e..ec88f0430 100644
--- a/src/lib/components/navbar/narrow/NarrowNavlink.svelte
+++ b/src/lib/components/navbar/narrow/NarrowNavlink.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
 	import UniversalNavlink from '../universal/UniversalNavlink.svelte'
 
-	export let href: string | undefined
-	export let c2a: boolean
-	export let ariaLabel: string | undefined
-	export let inverted: boolean
-	export let first: boolean
-	export let narrow: boolean
-	export let active: boolean
-	export let external: boolean
+	interface Props {
+		href: string | undefined
+		c2a: boolean
+		ariaLabel: string | undefined
+		inverted: boolean
+		first: boolean
+		narrow: boolean
+		active: boolean
+		external: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let { href, c2a, ariaLabel, inverted, first, narrow, active, external, children }: Props =
+		$props()
 </script>
 
 <UniversalNavlink {href} {c2a} {ariaLabel} {inverted} {first} {narrow} {active} {external}>
-	<slot></slot>
+	{@render children?.()}
 </UniversalNavlink>
diff --git a/src/lib/components/navbar/universal/UniversalNavbar.svelte b/src/lib/components/navbar/universal/UniversalNavbar.svelte
index 805782bf1..ef989b614 100644
--- a/src/lib/components/navbar/universal/UniversalNavbar.svelte
+++ b/src/lib/components/navbar/universal/UniversalNavbar.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import Link from '$lib/components/Link.svelte'
 	import Logo from '$lib/components/logo.svelte'
 	import { emulateCqwIfNeeded } from '$lib/container-query-units'
 	import { localizeHref } from '$lib/paraglide/runtime'
 	import { onMount } from 'svelte'
 
-	export let inverted = false
+	interface Props {
+		inverted?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let { inverted = false, children }: Props = $props()
 
-	$: logo_animate = localizeHref($page.url.pathname) != '/'
+	let logo_animate = $derived(localizeHref(page.url.pathname) != '/')
 
 	let nav: HTMLElement
 
@@ -29,7 +34,7 @@
 	</div>
 
 	<div class="nav-links">
-		<slot></slot>
+		{@render children?.()}
 	</div>
 </nav>
 
diff --git a/src/lib/components/navbar/universal/UniversalNavlink.svelte b/src/lib/components/navbar/universal/UniversalNavlink.svelte
index 2ff89118a..bd9c5a9ae 100644
--- a/src/lib/components/navbar/universal/UniversalNavlink.svelte
+++ b/src/lib/components/navbar/universal/UniversalNavlink.svelte
@@ -1,35 +1,48 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import LinkWithoutIcon from '$lib/components/LinkWithoutIcon.svelte'
 	import { localizeHref } from '$lib/paraglide/runtime'
 	import clsx from 'clsx'
 
-	export let href: string | undefined = undefined
-	export let c2a = false
-	export let ariaLabel: string | undefined = undefined
-	export let inverted = false
-	export let first = false
-	export let narrow = false
-	export let active = false
-	export let external = false
+	interface Props {
+		href?: string
+		c2a?: boolean
+		ariaLabel?: string
+		inverted?: boolean
+		first?: boolean
+		narrow?: boolean
+		active?: boolean
+		external?: boolean
+		children?: import('svelte').Snippet
+	}
 
-	$: localizedHref = href && !external ? localizeHref(href) : href
+	let {
+		href,
+		c2a = false,
+		ariaLabel,
+		inverted = false,
+		first = false,
+		narrow = false,
+		active = false,
+		external = false,
+		children
+	}: Props = $props()
 
-	$: {
-		active = localizeHref($page.url.pathname) == localizedHref
-	}
+	let localizedHref = $derived(href && !external ? localizeHref(href) : href)
+
+	let resolvedActive = $derived(active || localizeHref(page.url.pathname) == localizedHref)
 
-	$: classes = clsx('navlink', { first, c2a, inverted, narrow, active })
+	let classes = $derived(clsx('navlink', { first, c2a, inverted, narrow, active: resolvedActive }))
 </script>
 
 <span>
 	{#if href}
 		<LinkWithoutIcon href={localizedHref} class={classes} aria-label={ariaLabel}>
-			<slot></slot>
+			{@render children?.()}
 		</LinkWithoutIcon>
 	{:else}
 		<span class={classes} aria-label={ariaLabel}>
-			<slot></slot>
+			{@render children?.()}
 		</span>
 	{/if}
 </span>
diff --git a/src/lib/components/navbar/wide/WideNavbar.svelte b/src/lib/components/navbar/wide/WideNavbar.svelte
index c4df85b94..8127720b4 100644
--- a/src/lib/components/navbar/wide/WideNavbar.svelte
+++ b/src/lib/components/navbar/wide/WideNavbar.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import UniversalNavbar from '../universal/UniversalNavbar.svelte'
+	interface Props {
+		children?: import('svelte').Snippet
+		[key: string]: unknown
+	}
+
+	let { children, ...rest }: Props = $props()
 </script>
 
-<UniversalNavbar {...$$restProps}>
-	<slot></slot>
+<UniversalNavbar {...rest}>
+	{@render children?.()}
 </UniversalNavbar>
diff --git a/src/lib/components/navbar/wide/WideNavlink.svelte b/src/lib/components/navbar/wide/WideNavlink.svelte
index f2508287e..ec88f0430 100644
--- a/src/lib/components/navbar/wide/WideNavlink.svelte
+++ b/src/lib/components/navbar/wide/WideNavlink.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
 	import UniversalNavlink from '../universal/UniversalNavlink.svelte'
 
-	export let href: string | undefined
-	export let c2a: boolean
-	export let ariaLabel: string | undefined
-	export let inverted: boolean
-	export let first: boolean
-	export let narrow: boolean
-	export let active: boolean
-	export let external: boolean
+	interface Props {
+		href: string | undefined
+		c2a: boolean
+		ariaLabel: string | undefined
+		inverted: boolean
+		first: boolean
+		narrow: boolean
+		active: boolean
+		external: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let { href, c2a, ariaLabel, inverted, first, narrow, active, external, children }: Props =
+		$props()
 </script>
 
 <UniversalNavlink {href} {c2a} {ariaLabel} {inverted} {first} {narrow} {active} {external}>
-	<slot></slot>
+	{@render children?.()}
 </UniversalNavlink>
diff --git a/src/lib/components/simple-toc/Node.svelte b/src/lib/components/simple-toc/Node.svelte
index 6a9de4fa7..2259be39d 100644
--- a/src/lib/components/simple-toc/Node.svelte
+++ b/src/lib/components/simple-toc/Node.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
+	import Node from './Node.svelte'
 	import Link from '../Link.svelte'
 
-	export let headings: Element[]
+	interface Props {
+		headings: Element[]
+	}
+
+	let { headings }: Props = $props()
 
-	let level = extractLevel(headings[0])
+	let level = $derived(extractLevel(headings[0]))
 
 	function extractLevel(heading: Element): number {
 		return parseInt(heading.tagName.substring(1))
@@ -26,7 +31,7 @@
 			{@const previousLevel = extractLevel(headings[i - 1])}
 			{#if currentLevel > level && previousLevel == level}
 				{@const sliced = headings.slice(i)}
-				<svelte:self headings={sliced} />
+				<Node headings={sliced} />
 			{/if}
 		{/if}
 		{#if currentLevel == level}
diff --git a/src/lib/components/simple-toc/SimpleToc.svelte b/src/lib/components/simple-toc/SimpleToc.svelte
index 36218fde8..73de72646 100644
--- a/src/lib/components/simple-toc/SimpleToc.svelte
+++ b/src/lib/components/simple-toc/SimpleToc.svelte
@@ -4,13 +4,13 @@
 	import * as m from '$lib/paraglide/messages.js'
 	import Node from './Node.svelte'
 
-	let heading: HTMLHeadingElement
-	let headingsBelow: Element[] | undefined
+	let heading: HTMLHeadingElement | undefined = $state()
+	let headingsBelow: Element[] | undefined = $state()
 
 	onMount(() => {
-		const parent = heading.parentElement
+		const parent = heading?.parentElement
 		const siblings = parent?.children
-		if (!siblings) return
+		if (!heading || !siblings) return
 		const siblingsArray = Array.from(siblings)
 		const index = siblingsArray.indexOf(heading)
 		const siblingsBelow = siblingsArray.slice(index + 1)
diff --git a/src/lib/components/widget-consent/WidgetConsent.svelte b/src/lib/components/widget-consent/WidgetConsent.svelte
index 345ade16e..b3cf90f84 100644
--- a/src/lib/components/widget-consent/WidgetConsent.svelte
+++ b/src/lib/components/widget-consent/WidgetConsent.svelte
@@ -3,22 +3,27 @@
 	import Link from '$lib/components/Link.svelte'
 	import consent from '$lib/components/widget-consent/WidgetConsentStore'
 	import loadTwitter from '$lib/components/widget-consent/loadTwitter'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 
-	let wrapper: HTMLDivElement | undefined
+	let wrapper: HTMLDivElement | undefined = $state()
 
-	$: {
+	$effect(() => {
 		if (wrapper) {
 			loadTwitter()
 			window.twttr?.ready(() => {
 				if (wrapper) window.twttr?.load(wrapper)
 			})
 		}
-	}
+	})
 </script>
 
 {#if $consent}
 	<div bind:this={wrapper}>
-		<slot></slot>
+		{@render children?.()}
 	</div>
 {:else}
 	<div class="widget-consent">
@@ -27,7 +32,7 @@
 			the <Link href="https://twitter.com/en/privacy">privacy policy of X</Link>.
 		</div>
 		<Button
-			on:click={() => {
+			onclick={() => {
 				let wasSet = false
 				if ($consent != null) wasSet = true
 				$consent = true
diff --git a/src/lib/components/widget-consent/WithdrawWidgetConsent.svelte b/src/lib/components/widget-consent/WithdrawWidgetConsent.svelte
index 7cfec45ca..228212e44 100644
--- a/src/lib/components/widget-consent/WithdrawWidgetConsent.svelte
+++ b/src/lib/components/widget-consent/WithdrawWidgetConsent.svelte
@@ -6,7 +6,7 @@
 <button
 	class="button-to-link"
 	title="Withdraw consent for social widgets"
-	on:click={() => {
+	onclick={() => {
 		if ($consent) {
 			$consent = false
 			toast.success('Consent for social widgets withdrawn!')
diff --git a/src/lib/images.ts b/src/lib/images.ts
index 5962dcc7b..246fb82d6 100644
--- a/src/lib/images.ts
+++ b/src/lib/images.ts
@@ -31,6 +31,7 @@ export function resolveImageUrl(imagePath: string) {
 
 export function getPostMetaImageUrl(imagePath: string): string
 export function getPostMetaImageUrl(imagePath: undefined): undefined
+export function getPostMetaImageUrl(imagePath: string | undefined): string | undefined
 export function getPostMetaImageUrl(imagePath: string | undefined) {
 	if (!imagePath) {
 		return imagePath
diff --git a/src/lib/link.ts b/src/lib/link.ts
new file mode 100644
index 000000000..4ec0eb2b9
--- /dev/null
+++ b/src/lib/link.ts
@@ -0,0 +1,15 @@
+import type { LinkType } from './types'
+
+export function getLinkType(href: string | null): LinkType {
+	if (
+		href &&
+		(href.startsWith('http:') || href.startsWith('https:')) &&
+		!href.startsWith('https://pauseai.info/') &&
+		!(href.includes('s3.amazonaws') && href.includes('/pauseai-'))
+	) {
+		return 'external'
+	} else if (href && href.startsWith('mailto:')) {
+		return 'mail'
+	}
+	return 'internal'
+}
diff --git a/src/mdsvex.svelte b/src/mdsvex.svelte
index 5a829d5c6..076e9595e 100644
--- a/src/mdsvex.svelte
+++ b/src/mdsvex.svelte
@@ -1,7 +1,18 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	// eslint-disable-next-line no-restricted-imports -- reserved for mdsvex
-	import { img, a, table } from '$lib/components/custom'
-	export { img, a, table }
+	import { img as MdsvexImg, a as MdsvexA, table as MdsvexTable } from '$lib/components/custom'
+
+	export const img = MdsvexImg
+	export const a = MdsvexA
+	export const table = MdsvexTable
+</script>
+
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 </script>
 
-<slot></slot>
+{@render children?.()}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 45487c56d..f067367a1 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,6 +1,6 @@
 <script>
-	import { page } from '$app/stores'
-	const { status, error } = $page
+	import { page } from '$app/state'
+	const { status, error } = page
 </script>
 
 <div class="error">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a42b4dc3b..e850c8a17 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { GeoApiResponse } from '$api/geo/+server'
 	import { browser } from '$app/environment'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import Banner from '$lib/components/Banner.svelte'
 	import Hero from '$lib/components/Hero.svelte'
 	import Link from '$lib/components/Link.svelte'
@@ -31,12 +31,17 @@
 	import hydrationAwareClick from './hydration-aware-click.js?raw'
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+		children?: import('svelte').Snippet
+	}
+
+	let { data, children }: Props = $props()
 
-	let eventFound: boolean
-	let geoForNearbyEvent: GeoApiResponse | null = null
-	$: hero = deLocalizeHref($page.url.pathname) === '/'
-	$: embed = $page.route.id?.startsWith('/embed/') ?? false
+	let eventFound: boolean = $state(false)
+	let geoForNearbyEvent: GeoApiResponse | null = $state(null)
+	let hero = $derived(deLocalizeHref(page.url.pathname) === '/')
+	let embed = $derived(page.route.id?.startsWith('/embed/') ?? false)
 
 	onMount(async () => {
 		document.documentElement.removeAttribute('data-waiting')
@@ -73,9 +78,11 @@
 	})
 
 	// NearbyEvent overrides the main banner
-	$: if (browser && eventFound) {
-		delete document.documentElement.dataset.activeBanner
-	}
+	$effect(() => {
+		if (browser && eventFound) {
+			delete document.documentElement.dataset.activeBanner
+		}
+	})
 
 	function sanitizeScript(code: string) {
 		return code
@@ -179,10 +186,10 @@
 {/if}
 
 <div class="layout" class:hero-page={hero} class:embed>
-	{#if $page.route.id === '/sayno'}
+	{#if page.route.id === '/sayno'}
 		<!-- Dynamic import and render the selfie UX component -->
 		{#await import('./sayno/SelfieUX.svelte') then module}
-			<svelte:component this={module.default} />
+			<module.default />
 		{/await}
 	{/if}
 
@@ -191,8 +198,8 @@
 	{/if}
 
 	<main>
-		<PageTransition url={$page.url.pathname}>
-			<slot></slot>
+		<PageTransition url={page.url.pathname}>
+			{@render children?.()}
 		</PageTransition>
 	</main>
 
@@ -214,7 +221,7 @@
 		}}
 	/>
 
-	{#if !['/', '/communities', '/outcomes', '/pdoom', '/quotes', '/dear-sir-demis-2025'].includes(deLocalizeHref($page.url.pathname))}
+	{#if !['/', '/communities', '/outcomes', '/pdoom', '/quotes', '/dear-sir-demis-2025'].includes(deLocalizeHref(page.url.pathname))}
 		<Toc />
 	{/if}
 
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 2363d062c..7b74b53b7 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -5,13 +5,23 @@
 	import { getPostMetaImageUrl } from '$lib/images.js'
 	import type { PageData } from './$types'
 
+	interface Props {
+		data: PageData
+	}
+
 	// don't destructure to maintain reactivity for invalidation after language detection
-	export let data: PageData
+	let { data }: Props = $props()
 
-	$: meta = data.meta
-	$: ({ title = data.slug, date, description, image, author, showImage = true } = meta)
-	$: parent = data.slug.split('/').slice(0, -1).join('/')
-	$: metaImageUrl = getPostMetaImageUrl(image)
+	let {
+		title,
+		date,
+		description,
+		image,
+		author,
+		showImage = true
+	} = $derived({ title: data.slug, ...data.meta })
+	let parent = $derived(data.slug.split('/').slice(0, -1).join('/'))
+	let metaImageUrl = $derived(getPostMetaImageUrl(image))
 </script>
 
 <svelte:head>
@@ -43,7 +53,7 @@
 	{/if}
 
 	<div class="prose">
-		<svelte:component this={data.content} />
+		<data.content />
 	</div>
 </article>
 
diff --git a/src/routes/[slug]/+page.ts b/src/routes/[slug]/+page.ts
index 4d9370ce7..4d53c7da0 100644
--- a/src/routes/[slug]/+page.ts
+++ b/src/routes/[slug]/+page.ts
@@ -2,6 +2,7 @@ import { dev } from '$app/environment'
 import { getLocale } from '$lib/paraglide/runtime'
 import type { PageLoad } from './$types'
 import { asError } from '$lib/utils'
+import type { DescriptiveFrontmatterMeta } from '$lib/types'
 
 export const load: PageLoad = async ({ params: { slug }, depends, data: serverData }) => {
 	depends('paraglide:lang')
@@ -12,7 +13,7 @@ export const load: PageLoad = async ({ params: { slug }, depends, data: serverDa
 		return {
 			...serverData,
 			content,
-			meta,
+			meta: meta as DescriptiveFrontmatterMeta,
 			slug
 		}
 	} catch {
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 267baa466..b727f259d 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -2,12 +2,12 @@
 	import PostMeta from '$lib/components/PostMeta.svelte'
 	import { meta } from './meta'
 	import PersonCard from './person.svelte'
-	import type { Person } from '$lib/types'
 	import Link from '$lib/components/Link.svelte'
+	import type { PageProps } from './$types'
 
-	export let data
+	let { data }: PageProps = $props()
 
-	const peopleGroups = data.people as Record<string, Person[]>
+	const peopleGroups = $derived(data.people)
 
 	const groupOrder = [
 		'Executive Team',
@@ -17,12 +17,13 @@
 	]
 
 	// Get all group keys and sort them according to the manual order
-	const allGroupKeys = Object.keys(peopleGroups)
-	const groupKeys = groupOrder.filter((group) => allGroupKeys.includes(group))
+	const allGroupKeys = $derived(Object.keys(peopleGroups))
 
 	// Add any groups that weren't in the manual order (in case new ones appear)
-	const remainingGroups = allGroupKeys.filter((group) => !groupOrder.includes(group))
-	groupKeys.push(...remainingGroups)
+	const remainingGroups = $derived(allGroupKeys.filter((group) => !groupOrder.includes(group)))
+	const groupKeys = $derived(
+		groupOrder.filter((group) => allGroupKeys.includes(group)).concat(remainingGroups)
+	)
 
 	const { title, description, date } = meta
 </script>
diff --git a/src/routes/about/person.svelte b/src/routes/about/person.svelte
index 4c17f22d4..39b24a32c 100644
--- a/src/routes/about/person.svelte
+++ b/src/routes/about/person.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-	export let image: string | undefined
-	export let name: string | undefined
-	export let title: string | undefined
+	interface Props {
+		image: string | undefined
+		name: string | undefined
+		title: string | undefined
+	}
+
+	let { image, name, title }: Props = $props()
 </script>
 
 <li class="person">
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index fbc8be972..2f45e3ff2 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -4,13 +4,14 @@
 	import type { ChatRequest, ChatResponse, Message } from '$api/chat/+server'
 	import { onMount } from 'svelte'
 
-	let messages: Message[] =
+	let messages: Message[] = $state(
 		typeof localStorage !== 'undefined'
 			? (JSON.parse(localStorage.getItem('messages') || '[]') as Message[])
 			: []
+	)
 
-	let input = ''
-	let loading = false
+	let input = $state('')
+	let loading = $state(false)
 	const maxMessages = 20
 
 	function clear() {
@@ -25,7 +26,8 @@
 		window.alert('Copied to clipboard!')
 	}
 
-	async function sendMessage() {
+	async function sendMessage(ev: Event) {
+		ev.preventDefault()
 		if (input.trim() === '') return
 
 		messages = [...messages, { content: input, role: 'user' }]
@@ -56,8 +58,7 @@
 
 	function handleKeyDown(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
-			event.preventDefault()
-			void sendMessage()
+			void sendMessage(event)
 			input = ''
 		}
 	}
@@ -94,14 +95,14 @@
 <footer>
 	{#if messages.length > maxMessages}
 		<p>You reached the maximum amount of messages, you can clear the chat</p>
-		<button class="button" on:click={clear}>Clear chat</button>
-		<button class="button" on:click={copy}>Copy chat</button>
+		<button class="button" onclick={clear}>Clear chat</button>
+		<button class="button" onclick={copy}>Copy chat</button>
 	{:else}
-		<form on:submit|preventDefault={sendMessage}>
-			<textarea placeholder="Type here" bind:value={input} on:keydown={handleKeyDown}></textarea>
+		<form onsubmit={sendMessage}>
+			<textarea placeholder="Type here" bind:value={input} onkeydown={handleKeyDown}></textarea>
 			<div class="buttons">
-				<button on:click={clear} class="button button--alt">Clear chat</button>
-				<button on:click={copy} class="button button--alt">Copy chat</button>
+				<button onclick={clear} class="button button--alt">Clear chat</button>
+				<button onclick={copy} class="button button--alt">Copy chat</button>
 				<button type="submit" disabled={loading || input == ''}> Send </button>
 			</div>
 		</form>
diff --git a/src/routes/communities/+page.svelte b/src/routes/communities/+page.svelte
index fc2a414df..bb140d808 100644
--- a/src/routes/communities/+page.svelte
+++ b/src/routes/communities/+page.svelte
@@ -22,13 +22,9 @@
 
 	let map: maplibregl.Map
 	let mapContainer: HTMLDivElement
-	let lng: number
-	let lat: number
-	let zoom: number
-
-	lng = -71.224518
-	lat = 42.213995
-	zoom = 1
+	let lng: number = $state(-71.224518)
+	let lat: number = $state(42.213995)
+	let zoom: number = $state(1)
 
 	function updateData() {
 		zoom = map.getZoom()
diff --git a/src/routes/communities/CommunitiesList.svelte b/src/routes/communities/CommunitiesList.svelte
index f6e0152db..c9e798ab0 100644
--- a/src/routes/communities/CommunitiesList.svelte
+++ b/src/routes/communities/CommunitiesList.svelte
@@ -16,53 +16,65 @@
 	import type { NationalGroup } from '$lib/types'
 	import { SvelteSet } from 'svelte/reactivity'
 
-	export let communities: Community[] = []
+	interface Props {
+		communities?: Community[]
+	}
+
+	let { communities = [] }: Props = $props()
 
-	let nationalGroups: NationalGroup[] = []
+	let nationalGroups: NationalGroup[] = $state([])
 
 	onMount(async () => {
 		nationalGroups = await fetchNationalGroups()
 	})
 
 	// Group communities by their country/national community
-	const groupedCommunities = communities
-		.filter((community) => community.type === 'local')
-		.reduce(
-			(acc, community) => {
-				const nationalName = community.country || 'Other'
-				if (!acc[nationalName]) {
-					acc[nationalName] = []
-				}
-				acc[nationalName].push(community)
-				return acc
-			},
-			{} as Record<string, Community[]>
-		)
+	const groupedCommunities = $derived(
+		communities
+			.filter((community) => community.type === 'local')
+			.reduce(
+				(acc, community) => {
+					const nationalName = community.country || 'Other'
+					if (!acc[nationalName]) {
+						acc[nationalName] = []
+					}
+					acc[nationalName].push(community)
+					return acc
+				},
+				{} as Record<string, Community[]>
+			)
+	)
 
-	const nationalChapters = communities.filter((community) => community.type === 'national')
+	const nationalChapters = $derived(
+		communities.filter((community) => community.type === 'national')
+	)
 
-	const allNationalities = [
+	const allNationalities = $derived([
 		...new Set([...Object.keys(groupedCommunities), ...nationalChapters.map((c) => c.name)])
-	]
+	])
 
 	// Sort nationalities alphabetically, with "Other" at the end
-	const sortedNationalities = allNationalities.sort((a, b) => {
-		if (a === 'Other') return 1
-		if (b === 'Other') return -1
-		return a.localeCompare(b)
-	})
+	const sortedNationalities = $derived(
+		allNationalities.sort((a, b) => {
+			if (a === 'Other') return 1
+			if (b === 'Other') return -1
+			return a.localeCompare(b)
+		})
+	)
 
 	// Find the link for each nationality
-	const nationalLinks = nationalChapters.reduce(
-		(acc, community) => {
-			acc[community.name] = community.link
-			return acc
-		},
-		{} as Record<string, string>
+	const nationalLinks = $derived(
+		nationalChapters.reduce(
+			(acc, community) => {
+				acc[community.name] = community.link
+				return acc
+			},
+			{} as Record<string, string>
+		)
 	)
 
 	// Start with all countries collapsed by default
-	let expandedCountries: Set<string> = new Set()
+	let expandedCountries: Set<string> = $state(new Set())
 
 	function toggleCountry(country: string) {
 		const newSet = new SvelteSet(expandedCountries)
@@ -90,7 +102,7 @@
 					class:expanded={expandedCountries.has(nationality)}
 					class:has-communities={localCommunities.length > 0}
 					disabled={localCommunities.length === 0}
-					on:click={() => toggleCountry(nationality)}
+					onclick={() => toggleCountry(nationality)}
 				>
 					<div class="icon" class:is-open={expandedCountries.has(nationality)}>
 						{#if localCommunities.length > 0}
@@ -125,7 +137,7 @@
 								class="social-link"
 								target="_blank"
 								rel="noopener noreferrer"
-								on:click={(e) => e.stopPropagation()}
+								onclick={(e: MouseEvent) => e.stopPropagation()}
 							>
 								{#if link.includes('discord')}
 									<Discord />
diff --git a/src/routes/contact-us/+page.svelte b/src/routes/contact-us/+page.svelte
index 74909da01..b62b0a3ed 100644
--- a/src/routes/contact-us/+page.svelte
+++ b/src/routes/contact-us/+page.svelte
@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment'
 	import { enhance } from '$app/forms'
 	import { toast } from 'svelte-french-toast'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { onMount } from 'svelte'
 	import Link from '$lib/components/Link.svelte'
 	import PostMeta from '$lib/components/PostMeta.svelte'
@@ -11,11 +11,11 @@
 
 	const { title, description } = meta
 
-	let activeTab: 'media' | 'partnerships' | 'feedback' = 'partnerships'
-	let loading = false
-	let honeypot = ''
+	let activeTab: 'media' | 'partnerships' | 'feedback' = $state('partnerships')
+	let loading = $state(false)
+	let honeypot = $state('')
 
-	let formData = {
+	let formData = $state({
 		media: { name: '', email: '', subject: '', organization: '', details: '' },
 		partnerships: {
 			name: '',
@@ -27,7 +27,7 @@
 			message: ''
 		},
 		feedback: { name: '', email: '', subject: '', message: '' }
-	}
+	})
 
 	type ContactFormState = typeof formData
 
@@ -82,7 +82,7 @@
 	}
 
 	onMount(() => {
-		const tab = $page.url.searchParams.get('tab')
+		const tab = page.url.searchParams.get('tab')
 		if (tab === 'media') {
 			activeTab = 'media'
 		} else if (tab === 'partnerships') {
@@ -106,9 +106,11 @@
 		}
 	})
 
-	$: if (browser && formData) {
-		localStorage.setItem('contactFormData', JSON.stringify(formData))
-	}
+	$effect(() => {
+		if (browser && formData) {
+			localStorage.setItem('contactFormData', JSON.stringify(formData))
+		}
+	})
 
 	function handleEnhance({ cancel }: { cancel: () => void }) {
 		if (activeTab === 'partnerships') {
@@ -172,21 +174,21 @@
 		<button
 			class="tab-button"
 			class:active={activeTab === 'partnerships'}
-			on:click={() => (activeTab = 'partnerships')}
+			onclick={() => (activeTab = 'partnerships')}
 		>
 			Partnerships
 		</button>
 		<button
 			class="tab-button"
 			class:active={activeTab === 'media'}
-			on:click={() => (activeTab = 'media')}
+			onclick={() => (activeTab = 'media')}
 		>
 			Press & Media
 		</button>
 		<button
 			class="tab-button"
 			class:active={activeTab === 'feedback'}
-			on:click={() => (activeTab = 'feedback')}
+			onclick={() => (activeTab = 'feedback')}
 		>
 			Feedback
 		</button>
diff --git a/src/routes/dear-sir-demis-2025/+page.svelte b/src/routes/dear-sir-demis-2025/+page.svelte
index e8f4d9fb2..0cb54644e 100644
--- a/src/routes/dear-sir-demis-2025/+page.svelte
+++ b/src/routes/dear-sir-demis-2025/+page.svelte
@@ -8,16 +8,20 @@
 	import type { PageData } from './$types'
 	import type { Signatory } from './types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 
-	const { signatories } = data
+	const { signatories } = $derived(data)
 
 	const { title, description, date } = meta
 
 	// Separate parliamentarians from organizations (excluding PauseAI)
-	const parliamentarians = signatories.filter((s: Signatory) => s.type !== 'Organization')
-	const organizationsUnsorted = signatories.filter(
-		(s: Signatory) => s.type === 'Organization' && s.name !== 'PauseAI Global'
+	const parliamentarians = $derived(signatories.filter((s: Signatory) => s.type !== 'Organization'))
+	const organizationsUnsorted = $derived(
+		signatories.filter((s: Signatory) => s.type === 'Organization' && s.name !== 'PauseAI Global')
 	)
 
 	// Custom order for organizations
@@ -28,38 +32,40 @@
 		'Open Data Manchester'
 	]
 
-	const organizations: { name: string; type: string }[] = organizationsUnsorted.sort(
-		(a: Signatory, b: Signatory) => {
+	const organizations: { name: string; type: string }[] = $derived(
+		organizationsUnsorted.sort((a: Signatory, b: Signatory) => {
 			const aIndex = organizationOrder.indexOf(a.name)
 			const bIndex = organizationOrder.indexOf(b.name)
 			if (aIndex === -1) return 1
 			if (bIndex === -1) return -1
 			return aIndex - bIndex
-		}
+		})
 	)
 
 	// Sort parliamentarians alphabetically by last name (as in the PDF)
-	const sortedParliamentarians = parliamentarians.sort((a: Signatory, b: Signatory) => {
-		const getLastName = (name: string) => {
-			// Handle titles and complex names
-			let cleanName = name
-				.replace(/^(Lord|Baroness|Right Revd Dr|Sir|Dame)\s+/, '')
-				.replace(/\s+(MC|TD|MP|MSP|MS|MLA)$/, '')
-
-			const parts = cleanName.split(' ')
-			return parts[parts.length - 1].toLowerCase()
-		}
-
-		return getLastName(a.name).localeCompare(getLastName(b.name))
-	})
+	const sortedParliamentarians = $derived(
+		parliamentarians.sort((a: Signatory, b: Signatory) => {
+			const getLastName = (name: string) => {
+				// Handle titles and complex names
+				let cleanName = name
+					.replace(/^(Lord|Baroness|Right Revd Dr|Sir|Dame)\s+/, '')
+					.replace(/\s+(MC|TD|MP|MSP|MS|MLA)$/, '')
+
+				const parts = cleanName.split(' ')
+				return parts[parts.length - 1].toLowerCase()
+			}
+
+			return getLastName(a.name).localeCompare(getLastName(b.name))
+		})
+	)
 
 	// Map organization names to their logo files (theme-aware with cache busting)
-	$: organizationLogos = {
+	let organizationLogos = $derived({
 		'Open Rights Group': `/open-letter/civil_society_logos/${$theme === 'dark' ? 'white' : 'black'}/open_rights_group.png?theme=${$theme}`,
 		'Connected by Data': `/open-letter/civil_society_logos/${$theme === 'dark' ? 'white' : 'black'}/connected_by_data.png?theme=${$theme}`,
 		'Open Data Manchester': `/open-letter/civil_society_logos/${$theme === 'dark' ? 'white' : 'black'}/open_data_manchester.png?theme=${$theme}`,
 		'Safe AI for Children Alliance': `/open-letter/civil_society_logos/${$theme === 'dark' ? 'white' : 'black'}/safe_ai_for_children_alliance.png?theme=${$theme}`
-	} as Record<string, string>
+	} as Record<string, string>)
 
 	function getOrganizationWebsite(name: string): string {
 		const websites = {
diff --git a/src/routes/dear-sir-demis-2025/QuoteHighlight.svelte b/src/routes/dear-sir-demis-2025/QuoteHighlight.svelte
index 03127f1fb..ab655eb65 100644
--- a/src/routes/dear-sir-demis-2025/QuoteHighlight.svelte
+++ b/src/routes/dear-sir-demis-2025/QuoteHighlight.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
 	import type { Quote } from './types'
 
-	export let quote: Quote
+	interface Props {
+		quote: Quote
+	}
+
+	let { quote }: Props = $props()
 
-	const displayName = quote.displayName || quote.name
+	const displayName = $derived(quote.displayName ?? quote.name)
 </script>
 
 <div class="quote-highlight">
diff --git a/src/routes/dear-sir-demis-2025/SignatoryCard.svelte b/src/routes/dear-sir-demis-2025/SignatoryCard.svelte
index e3300503d..8df7e5c96 100644
--- a/src/routes/dear-sir-demis-2025/SignatoryCard.svelte
+++ b/src/routes/dear-sir-demis-2025/SignatoryCard.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { Signatory } from './types'
 
-	export let signatory: Signatory
+	interface Props {
+		signatory: Signatory
+	}
+
+	let { signatory }: Props = $props()
 
 	// Determine the portrait path based on chamber and processed images
 	function getPortraitPath(signatory: { portrait?: string }) {
@@ -16,8 +20,8 @@
 		return null
 	}
 
-	const portraitPath = getPortraitPath(signatory)
-	const displayName = signatory.displayName || signatory.name
+	const portraitPath = $derived(getPortraitPath(signatory))
+	const displayName = $derived(signatory.displayName ?? signatory.name)
 
 	// Convert Lord/Baroness to Peer for display
 	function getDisplayType(type: string) {
@@ -27,7 +31,7 @@
 		return type
 	}
 
-	const displayType = getDisplayType(signatory.type)
+	const displayType = $derived(getDisplayType(signatory.type))
 </script>
 
 <div class="signatory-card">
diff --git a/src/routes/email-builder/+page.svelte b/src/routes/email-builder/+page.svelte
index 7a021bbf2..9aa2fa3f2 100644
--- a/src/routes/email-builder/+page.svelte
+++ b/src/routes/email-builder/+page.svelte
@@ -87,8 +87,8 @@
 		}
 	]
 
-	let selectedAction = actions[0]
-	let selectedConcern = concerns[0]
+	let selectedAction = $state(actions[0])
+	let selectedConcern = $state(concerns[0])
 
 	type Section = {
 		name: string
@@ -189,7 +189,7 @@
 		{#each concerns as section}
 			<button
 				class={selectedConcern == section ? 'tag tag--selected' : 'tag'}
-				on:click={() => (selectedConcern = section)}>{section.name}</button
+				onclick={() => (selectedConcern = section)}>{section.name}</button
 			>&nbsp;
 		{/each}
 	</li>
@@ -207,7 +207,7 @@
 		{#each actions as section}
 			<button
 				class={selectedAction == section ? 'tag tag--selected' : 'tag'}
-				on:click={() => (selectedAction = section)}>{section.name}</button
+				onclick={() => (selectedAction = section)}>{section.name}</button
 			>&nbsp;
 		{/each}
 	</li>
@@ -249,8 +249,8 @@
 		<div
 			id={letterId}
 			contenteditable="true"
-			on:click={handleClick}
-			on:keydown={handleKeydown}
+			onclick={handleClick}
+			onkeydown={handleKeydown}
 			role="document"
 			tabindex="-1"
 		>
@@ -262,7 +262,7 @@
 				intelligence.
 			</p>
 
-			<svelte:component this={selectedConcern.section} />
+			<selectedConcern.section />
 
 			<p>
 				The advancements in the AI landscape have progressed much faster than anticipated. In 2020,
@@ -305,7 +305,7 @@
 				need politicians to initialize treaty negotiations.
 			</p>
 
-			<svelte:component this={selectedAction.section} />
+			<selectedAction.section />
 
 			<p>Best regards,</p>
 
@@ -315,7 +315,7 @@
 </div>
 
 <div class="actionBar">
-	<Button on:click={() => copyHTMLWithoutStyles()}>Copy</Button>
+	<Button onclick={() => copyHTMLWithoutStyles()}>Copy</Button>
 </div>
 
 <style>
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
index 959544177..bc4284e58 100644
--- a/src/routes/header.svelte
+++ b/src/routes/header.svelte
@@ -9,7 +9,11 @@
 
 	const enableBot = false
 
-	export let inverted = false
+	interface Props {
+		inverted?: boolean
+	}
+
+	let { inverted = false }: Props = $props()
 
 	const openSearch = (e: MouseEvent) => {
 		e.preventDefault()
diff --git a/src/routes/outcomes/+page.svelte b/src/routes/outcomes/+page.svelte
index 8df2efc97..8236bbb1b 100644
--- a/src/routes/outcomes/+page.svelte
+++ b/src/routes/outcomes/+page.svelte
@@ -5,23 +5,23 @@
 	import { outcomesMeta } from './meta'
 	import PostMeta from '$lib/components/PostMeta.svelte'
 
-	let intro = true
-	let showProbabilities = false
-	let top: HTMLElement
+	let intro = $state(true)
+	let showProbabilities = $state(false)
+	let top: HTMLElement | undefined = $state()
 	let { title, description, date } = outcomesMeta
 </script>
 
 <PostMeta {title} {description} {date} />
 
 <div class="header">
-	<button class="reset-button" on:click={() => (intro = true)} bind:this={top}>
+	<button class="reset-button" onclick={() => (intro = true)} bind:this={top}>
 		<h1>{title}</h1>
 	</button>
 	{#if !intro}
 		<div class="headerbuttons">
-			<Button subtle on:click={() => (intro = true)}>Restart</Button>
+			<Button subtle onclick={() => (intro = true)}>Restart</Button>
 			<!--
-			<Button subtle on:click={() => (showProbabilities = !showProbabilities)}
+			<Button subtle onclick={() => (showProbabilities = !showProbabilities)}
 				>{showProbabilities ? 'Hide' : 'Show'} probabilities</Button> 
 			-->
 		</div>
@@ -36,14 +36,14 @@
 	</p>
 	<div class="wrapper">
 		<Button
-			on:click={() => {
+			onclick={() => {
 				intro = false
 				showProbabilities = false
 			}}>Start</Button
 		>
 	</div>
 {:else}
-	<TreeNode node={tree} bind:showProbabilities bind:top bind:intro />
+	<TreeNode node={tree} {top} bind:showProbabilities bind:intro />
 {/if}
 
 <style>
diff --git a/src/routes/outcomes/Propability.svelte b/src/routes/outcomes/Propability.svelte
index 196a5f1d8..8e7d9e298 100644
--- a/src/routes/outcomes/Propability.svelte
+++ b/src/routes/outcomes/Propability.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-	export let probability = 0.5
-	$: num = probability * 100
-	$: decimals = num < 1 ? 2 : num < 10 ? 1 : 0
-	export let showLabel = false
+	interface Props {
+		probability?: number
+		showLabel?: boolean
+	}
+
+	let { probability = 0.5, showLabel = false }: Props = $props()
 	const label = (probability: number) => {
 		if (probability == 0) return 'impossible'
 		if (probability < 0.1) return 'unlikely'
@@ -13,6 +15,8 @@
 		if (probability == 1) return 'certain'
 		return 'very likely'
 	}
+	let num = $derived(probability * 100)
+	let decimals = $derived(num < 1 ? 2 : num < 10 ? 1 : 0)
 </script>
 
 {num.toFixed(decimals)}%
diff --git a/src/routes/outcomes/SelectButton.svelte b/src/routes/outcomes/SelectButton.svelte
index d80f0a288..7951a80a2 100644
--- a/src/routes/outcomes/SelectButton.svelte
+++ b/src/routes/outcomes/SelectButton.svelte
@@ -1,18 +1,28 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte'
 	import Propability from './Propability.svelte'
-	export let selected: 'yes' | 'no' | undefined
-	export let probability: number
-	export let yes = false
-	export let showProbabilities: boolean
-	export let onClick: () => void
-	$: current = selected == (yes ? 'yes' : 'no')
+	interface Props {
+		selected: 'yes' | 'no' | undefined
+		probability: number
+		yes?: boolean
+		showProbabilities: boolean
+		onClick: () => void
+	}
+
+	let {
+		selected = $bindable(),
+		probability,
+		yes = false,
+		showProbabilities,
+		onClick
+	}: Props = $props()
+	let current = $derived(selected == (yes ? 'yes' : 'no'))
 </script>
 
 <div class="wrapper {current ? 'selected' : ''}">
 	<Button
 		subtle={selected && !current}
-		on:click={() => {
+		onclick={() => {
 			selected = yes ? 'yes' : 'no'
 			onClick()
 		}}
diff --git a/src/routes/outcomes/Slider.svelte b/src/routes/outcomes/Slider.svelte
index 606263e83..b70e3ac44 100644
--- a/src/routes/outcomes/Slider.svelte
+++ b/src/routes/outcomes/Slider.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import Propability from './Propability.svelte'
-	export let probability = 0.5
 	import { fade } from 'svelte/transition'
+	interface Props {
+		probability?: number
+	}
+
+	let { probability = $bindable(0.5) }: Props = $props()
 </script>
 
 <div class="percentage-slider" in:fade={{ duration: 200 }}>
diff --git a/src/routes/outcomes/TreeNode.svelte b/src/routes/outcomes/TreeNode.svelte
index 139b7483d..c6c786795 100644
--- a/src/routes/outcomes/TreeNode.svelte
+++ b/src/routes/outcomes/TreeNode.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import TreeNode from './TreeNode.svelte'
 	import Slider from './Slider.svelte'
 	import Propability from './Propability.svelte'
 	import type { TreeNodeType } from './tree'
@@ -6,16 +7,26 @@
 	import Button from '$lib/components/Button.svelte'
 	import { fade } from 'svelte/transition'
 
-	export let node: TreeNodeType
-	export let parentProbability = 1
-	export let showProbabilities = false
-	export let top: HTMLElement
-	export let intro: boolean
-	let probability: number = node.probability
-	let showInfo = false
-	let selected: 'yes' | 'no' | undefined
-	$: selectedNode = selected == 'yes' ? node.yes : node.no
-	$: selectedProbability = selected == 'yes' ? probability : 1 - probability
+	interface Props {
+		node: TreeNodeType
+		parentProbability?: number
+		showProbabilities?: boolean
+		top: HTMLElement
+		intro: boolean
+	}
+
+	let {
+		node,
+		parentProbability = 1,
+		showProbabilities = $bindable(false),
+		top,
+		intro = $bindable()
+	}: Props = $props()
+	let probability: number = $derived(node.probability)
+	let showInfo = $state(false)
+	let selected: 'yes' | 'no' | undefined = $state()
+	let selectedNode = $derived(selected == 'yes' ? node.yes : node.no)
+	let selectedProbability = $derived(selected == 'yes' ? probability : 1 - probability)
 
 	const scrollToTop = () => {
 		setTimeout(() => {
@@ -23,7 +34,7 @@
 		}, 10)
 	}
 
-	let child: HTMLElement
+	let child: HTMLElement | undefined = $state()
 	const scrollToNextChild = () => {
 		setTimeout(() => {
 			if (child) {
@@ -38,7 +49,7 @@
 		<h2>
 			{node.text}
 		</h2>
-		<Button subtle on:click={() => (showInfo = !showInfo)}>Info</Button>
+		<Button subtle onclick={() => (showInfo = !showInfo)}>Info</Button>
 	</div>
 
 	{#if showInfo}
@@ -55,10 +66,10 @@
 		{#if showProbabilities}
 			<Slider bind:probability />
 			<!-- {#if probability !== node.probability && showInfo}
-				<Button subtle on:click={() => (probability = node.probability)}>Reset</Button>
+				<Button subtle onclick={() => (probability = node.probability)}>Reset</Button>
 			{/if} -->
 		{:else}
-			<!-- <Button subtle on:click={() => (showProbabilities = !showProbabilities)}>
+			<!-- <Button subtle onclick={() => (showProbabilities = !showProbabilities)}>
 				<Propability {probability} /> chance
 			</Button> -->
 		{/if}
@@ -83,11 +94,11 @@
 		{#key selectedNode.text}
 			<div class="child" in:fade={{ duration: 200 }} bind:this={child}>
 				{#if selectedNode.type == 'question'}
-					<svelte:self
+					<TreeNode
 						node={selectedNode}
 						parentProbability={parentProbability * selectedProbability}
+						{top}
 						bind:showProbabilities
-						bind:top
 						bind:intro
 					/>
 				{:else}
@@ -112,7 +123,7 @@
 					<div class="buttons">
 						<!--
 						<Button
-							on:click={() => {
+							onclick={() => {
 								showProbabilities = !showProbabilities
 								scrollToTop()
 							}}
@@ -121,7 +132,7 @@
 						</Button>-->
 						<Button
 							subtle
-							on:click={() => {
+							onclick={() => {
 								intro = true
 								scrollToTop()
 							}}>Restart</Button
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
index a88015712..677659160 100644
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@@ -4,8 +4,12 @@
 	import Link from '$lib/components/Link.svelte'
 	import type { PageData } from './$types'
 
-	export let data: PageData
-	const { posts } = data
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
+	const { posts } = $derived(data)
 </script>
 
 <svelte:head>
diff --git a/src/routes/quotes/+page.svelte b/src/routes/quotes/+page.svelte
index 24212b30b..3e3ab8656 100644
--- a/src/routes/quotes/+page.svelte
+++ b/src/routes/quotes/+page.svelte
@@ -6,9 +6,13 @@
 	import GithubSlugger from 'github-slugger'
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
 
-	const { quotes } = data
+	let { data }: Props = $props()
+
+	const { quotes } = $derived(data)
 </script>
 
 <svelte:head>
diff --git a/src/routes/quotes/Quote.svelte b/src/routes/quotes/Quote.svelte
index 182c6acec..86e44a49a 100644
--- a/src/routes/quotes/Quote.svelte
+++ b/src/routes/quotes/Quote.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { writable, type Writable } from 'svelte/store'
 
 	let isIos: Writable<boolean | null> = writable(null)
@@ -15,20 +15,33 @@
 
 	const DOWNLOAD_WIDTH = 2000
 
-	export let background = ''
-	export let text = ''
-	export let author = ''
-	export let author_description = ''
-	export let source: string | null = null
-	export let notice: string | null = null
-	export let color: string | null = null
-	export let padding: string | null = null
-
-	$: bg_url = new URL(`../../assets/quote-bg/${background}.jpg`, import.meta.url).href
-	$: color_style = color ? `color: ${color}` : ''
-	$: content_style = padding
-		? `padding: calc(var(--zoom) * ${padding}) 0 0 calc(var(--zoom) * ${padding});`
-		: ''
+	interface Props {
+		background?: string
+		text?: string
+		author?: string
+		author_description?: string
+		source?: string | null
+		notice?: string | null
+		color?: string | null
+		padding?: string | null
+	}
+
+	let {
+		background = '',
+		text = '',
+		author = '',
+		author_description = '',
+		source = null,
+		notice = null,
+		color = null,
+		padding = null
+	}: Props = $props()
+
+	let bg_url = $derived(new URL(`../../assets/quote-bg/${background}.jpg`, import.meta.url).href)
+	let color_style = $derived(color ? `color: ${color}` : '')
+	let content_style = $derived(
+		padding ? `padding: calc(var(--zoom) * ${padding}) 0 0 calc(var(--zoom) * ${padding});` : ''
+	)
 
 	let containerElement: HTMLDivElement
 	let quoteElement: HTMLDivElement
@@ -93,7 +106,7 @@
 	</div>
 	<div class="quote-below">
 		{#if !$isIos}
-			<Button subtle on:click={downloadQuote}>Download</Button>
+			<Button subtle onclick={downloadQuote}>Download</Button>
 		{/if}
 		{#if source}
 			<div class="reset-anchors">
diff --git a/src/routes/sayno/+page.svelte b/src/routes/sayno/+page.svelte
index 56f336ace..c23e6f0c4 100644
--- a/src/routes/sayno/+page.svelte
+++ b/src/routes/sayno/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import PostMeta from '$lib/components/PostMeta.svelte'
 	import Link from '$lib/components/Link.svelte'
 	import Banner from '$lib/components/Banner.svelte'
@@ -29,8 +29,8 @@
 	const imageAlt = 'Collage of hundreds of faces'
 
 	// Track user state for contextual messaging
-	let userJustValidated = false // UID in URL params (just clicked validate link)
-	let userPreviouslyUploaded = false // UID in localStorage (uploaded before on this device)
+	let userJustValidated = $state(false) // UID in URL params (just clicked validate link)
+	let userPreviouslyUploaded = $state(false) // UID in localStorage (uploaded before on this device)
 
 	interface CloudinaryWidget {
 		destroy(): void
@@ -61,7 +61,7 @@
 
 	onMount(() => {
 		// Check if UID in URL params (just validated email)
-		userJustValidated = detectAndStoreCollagenUid('sayno', $page.url.searchParams)
+		userJustValidated = detectAndStoreCollagenUid('sayno', page.url.searchParams)
 
 		// Check if UID exists from previous upload (but not in URL)
 		if (!userJustValidated) {
diff --git a/src/routes/sayno/SelfieUX.svelte b/src/routes/sayno/SelfieUX.svelte
index 4d856fd8c..8066fb90b 100644
--- a/src/routes/sayno/SelfieUX.svelte
+++ b/src/routes/sayno/SelfieUX.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import Button from '$lib/components/Button.svelte'
 	import Link from '$lib/components/Link.svelte'
 	import {
@@ -24,20 +24,24 @@
 	} from './selfieStore'
 
 	// Local element references
-	let videoElement: HTMLVideoElement | null = null
-	let canvasElement: HTMLCanvasElement | null = null
+	let videoElement: HTMLVideoElement | null = $state(null)
+	let canvasElement: HTMLCanvasElement | null = $state(null)
 
 	// Update store when elements are bound
-	$: setVideoElement(videoElement)
-	$: setCanvasElement(canvasElement)
+	$effect(() => {
+		setVideoElement(videoElement)
+	})
+	$effect(() => {
+		setCanvasElement(canvasElement)
+	})
 
-	$: emailValid = $userEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($userEmail)
+	let emailValid = $derived($userEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($userEmail))
 
 	// Check if x002 experiment parameter is present (control = hide sharing)
-	$: hideSharing = $page.url.searchParams.has('x002')
+	let hideSharing = $derived(page.url.searchParams.has('x002'))
 
 	// Local UI state
-	let showTips = false
+	let showTips = $state(false)
 </script>
 
 <!-- Compact capture UX above standard page header -->
@@ -82,7 +86,7 @@
 				</div>
 				<button
 					class="capture-button primary"
-					on:click={requestCameraPermission}
+					onclick={requestCameraPermission}
 					disabled={($cameraPermissionRequested && !$cameraAvailable) || $cameraPermissionDenied}
 				>
 					{#if $cameraPermissionRequested && !$cameraAvailable && !$cameraPermissionDenied}
@@ -98,7 +102,7 @@
 				<div class="camera-box">
 					<video
 						bind:this={videoElement}
-						on:loadedmetadata={() => {
+						onloadedmetadata={() => {
 							console.log('Video metadata loaded')
 							if (stream && videoElement && !videoElement.srcObject) {
 								videoElement.srcObject = stream
@@ -113,7 +117,7 @@
 					></video>
 					<canvas bind:this={canvasElement} style="display: none;"></canvas>
 				</div>
-				<button class="capture-button primary" on:click={captureFromCamera} disabled={$isCapturing}>
+				<button class="capture-button primary" onclick={captureFromCamera} disabled={$isCapturing}>
 					{#if $isCapturing}
 						Capturing...
 					{:else}
@@ -121,7 +125,7 @@
 					{/if}
 				</button>
 			{/if}
-			<button class="capture-button secondary" on:click={openUploadWidget}>
+			<button class="capture-button secondary" onclick={openUploadWidget}>
 				Use Existing Photo
 			</button>
 		</div>
@@ -139,7 +143,7 @@
 							type="email"
 							bind:value={$userEmail}
 							placeholder="your@email.com"
-							on:keypress={(e) => {
+							onkeypress={(e) => {
 								if (e.key === 'Enter' && emailValid) {
 									void finalizeSubmission()
 								}
@@ -154,7 +158,7 @@
 
 					{#if $userEmail && emailValid}
 						<div class="button-center">
-							<Button on:click={finalizeSubmission} disabled={$isProcessing}>
+							<Button onclick={finalizeSubmission} disabled={$isProcessing}>
 								{#if $isProcessing}
 									Processing...
 								{:else}
@@ -166,7 +170,7 @@
 				</div>
 
 				<div class="action-buttons">
-					<Button on:click={removeUpload} subtle={true} disabled={$isProcessing}>
+					<Button onclick={removeUpload} subtle={true} disabled={$isProcessing}>
 						{#if $isProcessing}
 							Processing...
 						{:else}
@@ -185,7 +189,7 @@
 				<div class="tips-section">
 					<button
 						class="tips-toggle"
-						on:click={() => (showTips = !showTips)}
+						onclick={() => (showTips = !showTips)}
 						aria-expanded={showTips}
 					>
 						{showTips ? '▼' : '▶'} Tips for a better selfie
diff --git a/src/routes/sayno/share/+page.svelte b/src/routes/sayno/share/+page.svelte
index ccae1c127..e8cc1f378 100644
--- a/src/routes/sayno/share/+page.svelte
+++ b/src/routes/sayno/share/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import ShareButtons from '$lib/components/ShareButtons.svelte'
 	import { getCollagenUid } from '$lib/collagen'
 
-	let uid: string | null = null
+	let uid: string | null = $state(null)
 
 	onMount(() => {
 		// Try query param first, then localStorage
-		uid = $page.url.searchParams.get('uid') || getCollagenUid('sayno')
+		uid = page.url.searchParams.get('uid') ?? getCollagenUid('sayno')
 	})
 </script>
 
diff --git a/src/routes/statement/+page.svelte b/src/routes/statement/+page.svelte
index e9d354304..0cd1c28f5 100644
--- a/src/routes/statement/+page.svelte
+++ b/src/routes/statement/+page.svelte
@@ -5,17 +5,21 @@
 	import Signatory from './signatory.svelte'
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 
-	const { signatories, totalCount } = data
+	const { signatories, totalCount } = $derived(data)
 	const { title, description, date } = meta
 
 	// Variable to control how many signatories are shown
 	const shortListN = 5
-	let showAll = false
-	let expandAllBios = false
+	let showAll = $state(false)
+	let expandAllBios = $state(false)
 	// Reactive variable to determine the list of signatories to display
-	$: visibleSignatories = showAll ? signatories : signatories.slice(0, shortListN)
+	let visibleSignatories = $derived(showAll ? signatories : signatories.slice(0, shortListN))
 	// Function to toggle between limited and full list and bios
 	function toggleShowAll() {
 		showAll = !showAll
@@ -25,7 +29,7 @@
 	// Milestone goals for signatures
 	const milestones = [2000, 2500, 3000, 4000, 5000, 10000, 15000, 20000, 25000, 30000]
 	// Find the next milestone goal
-	const nextGoal = milestones.find((goal) => totalCount < goal) || milestones[milestones.length - 1]
+	const nextGoal = milestones.find((goal) => totalCount < goal) ?? milestones[milestones.length - 1]
 </script>
 
 <PostMeta {title} {description} {date} />
@@ -52,7 +56,7 @@
 
 <div class="signatories-header">
 	<h2>Signatories ({totalCount})</h2>
-	<button class="expand-all" on:click={toggleShowAll} aria-label="Expand all signatories and bios">
+	<button class="expand-all" onclick={toggleShowAll} aria-label="Expand all signatories and bios">
 		{showAll ? 'Collapse All' : 'Expand All'}
 	</button>
 </div>
@@ -68,7 +72,7 @@
 	</ul>
 
 	<!-- Button to toggle between limited and full list -->
-	<button on:click={toggleShowAll}>
+	<button onclick={toggleShowAll}>
 		{showAll ? 'Show Less' : 'Show All Signatories'}
 	</button>
 </section>
diff --git a/src/routes/statement/signatory.svelte b/src/routes/statement/signatory.svelte
index 8b787dd81..041203ea9 100644
--- a/src/routes/statement/signatory.svelte
+++ b/src/routes/statement/signatory.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-	export let name: string // defaults to 'Anonymous'
-	export let country: string // defaults to empty string
-	export let bio: string | undefined
-	export let expandAllBios: boolean = false
+	interface Props {
+		name: string // defaults to 'Anonymous'
+		country: string // defaults to empty string
+		bio: string | undefined
+		expandAllBios?: boolean
+	}
+
+	let { name, country, bio, expandAllBios = false }: Props = $props()
 	const len = 60
-	let bioOpen = false
-	let bioTruncated = bio?.substring(0, len)
+	let bioOpen = $state(false)
+	let bioTruncated = $derived(bio?.substring(0, len))
 </script>
 
 <li class="person">
@@ -25,7 +29,7 @@
 				{:else}
 					{bioOpen ? bio : bioTruncated}
 					{#if !bioOpen && bio.length > len}
-						<button on:click={() => (bioOpen = !bioOpen)}>...</button>
+						<button onclick={() => (bioOpen = !bioOpen)}>...</button>
 					{/if}
 				{/if}
 			</div>
diff --git a/src/routes/submitted/+page.svelte b/src/routes/submitted/+page.svelte
index 688eee003..905681637 100644
--- a/src/routes/submitted/+page.svelte
+++ b/src/routes/submitted/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { onMount } from 'svelte'
 	import { SvelteURLSearchParams } from 'svelte/reactivity'
 
@@ -9,7 +9,7 @@
 	const PAYMENT_ANSWER_REGEX = /Yes/
 
 	onMount(() => {
-		const url = $page.url
+		const url = page.url
 		const params = new SvelteURLSearchParams(url.search)
 		const paymentAnswer = params.get('payment')
 		const redirectToPayment = paymentAnswer && PAYMENT_ANSWER_REGEX.test(paymentAnswer)
diff --git a/src/routes/transition.svelte b/src/routes/transition.svelte
index 34ce0a158..89795c5ac 100644
--- a/src/routes/transition.svelte
+++ b/src/routes/transition.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition'
 
-	export let url: string
+	interface Props {
+		url: string
+		children?: import('svelte').Snippet
+	}
+
+	let { url, children }: Props = $props()
 </script>
 
 {#key url}
 	<div class="transition" in:fade>
-		<slot></slot>
+		{@render children?.()}
 	</div>
 {/key}
 
diff --git a/src/routes/verify/+page.svelte b/src/routes/verify/+page.svelte
index 10bc555ea..62c0048d8 100644
--- a/src/routes/verify/+page.svelte
+++ b/src/routes/verify/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import toast from 'svelte-french-toast'
 	import Processing from '$lib/components/Processing.svelte'
 
-	let errorMessage: string | undefined
+	let errorMessage: string | undefined = $state()
 
 	onMount(async () => {
 		try {
-			const apiUrl = `/api/verify${$page.url.search}`
+			const apiUrl = `/api/verify${page.url.search}`
 
 			const response = await fetch(apiUrl)
 			if (response.ok) {
diff --git a/src/routes/write/+page.svelte b/src/routes/write/+page.svelte
index 631490241..5f10f8144 100644
--- a/src/routes/write/+page.svelte
+++ b/src/routes/write/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { botName } from '$lib/config'
 	import type { ChatResponse, WriteApiAvailabilityResponse } from '$api/write/+server'
 	import { onMount } from 'svelte'
 
@@ -24,13 +23,14 @@
 	// Use a unique localStorage key to avoid conflicts with other pages
 	const STORAGE_KEY = 'email_writer_messages'
 
-	let messages: Message[] =
+	let messages: Message[] = $state(
 		typeof localStorage !== 'undefined' ? JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') : []
+	)
 
 	// Array for form
-	let input_arr = new Array<string>(35)
-	let loading = false
-	let apiAvailable = true // Default to true, will be updated after first API call
+	let input_arr = $state(new Array<string>(35))
+	let loading = $state(false)
+	let apiAvailable = $state(true) // Default to true, will be updated after first API call
 	const maxMessages = 20
 
 	// Organizing the form questions into sections and subsections
@@ -458,19 +458,19 @@
 
 		<div class="control-buttons">
 			<button
-				on:click={sendMessage}
+				onclick={sendMessage}
 				disabled={!apiAvailable || loading}
 				class="button {!apiAvailable ? 'button--disabled' : ''}"
 			>
 				Write Content
 			</button>
-			<button on:click={runTest} class="button" disabled={!apiAvailable || loading}>
+			<button onclick={runTest} class="button" disabled={!apiAvailable || loading}>
 				(Demo for beta)
 			</button>
-			<button on:click={copy} class="button" disabled={loading || messages.length === 0}>
+			<button onclick={copy} class="button" disabled={loading || messages.length === 0}>
 				Copy Content
 			</button>
-			<button on:click={clear} class="button" disabled={loading || messages.length === 0}>
+			<button onclick={clear} class="button" disabled={loading || messages.length === 0}>
 				Reset All
 			</button>
 		</div>
@@ -496,10 +496,10 @@
 <footer>
 	{#if messages.length > maxMessages}
 		<p>You reached the maximum amount of messages, you can either copy or reset</p>
-		<button class="button" on:click={copy}>Copy Content</button>
-		<button class="button" on:click={clear}>Reset All</button>
+		<button class="button" onclick={copy}>Copy Content</button>
+		<button class="button" onclick={clear}>Reset All</button>
 	{:else}
-		<form on:submit|preventDefault>
+		<form onsubmit={(e) => e.preventDefault()}>
 			<!-- Render form sections using the structured data -->
 			{#each formSections as section, sectionIndex}
 				<h1>{section.title}</h1>
@@ -527,7 +527,7 @@
 						<textarea
 							placeholder="Type here (Question {globalIndex + 1})"
 							bind:value={input_arr[globalIndex]}
-							on:keydown={handleKeyDown}
+							onkeydown={handleKeyDown}
 						></textarea>
 					{/each}
 				{/each}