diff --git a/e2e-tests/explorer.spec.ts b/e2e-tests/explorer.spec.ts
index e99fe7b..a62cfc8 100644
--- a/e2e-tests/explorer.spec.ts
+++ b/e2e-tests/explorer.spec.ts
@@ -6,7 +6,7 @@ test.describe('Explorer', () => {
 	});
 
 	test('Running tasks queue', async ({ page }) => {
-		const select = page.getByRole('combobox');
+		const select = page.getByTestId('example-select');
 		const option = page.getByRole('option', { name: 'tasks queue' });
 		const slider = page.getByRole('slider');
 		const script = page.getByText('script');
diff --git a/index.html b/index.html
index af3fd3d..f19400e 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark" style="color-scheme: dark">
+<html lang="en" class="dark" data-theme="midnight" style="color-scheme: dark">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/icon.svg" />
@@ -13,8 +13,25 @@
 		<script>
 			(function () {
 				try {
-					var theme = localStorage.getItem('theme');
-					if (theme === 'light') {
+					var stored = localStorage.getItem('theme');
+					var theme = stored;
+					if (stored === 'dark') theme = 'midnight';
+					else if (stored === 'light') theme = 'paper';
+					var lightThemes = { paper: 1, github: 1 };
+					var known = {
+						midnight: 1,
+						paper: 1,
+						nord: 1,
+						dracula: 1,
+						monokai: 1,
+						catppuccin: 1,
+						solarized: 1,
+						github: 1,
+					};
+					if (!theme || !known[theme]) theme = 'midnight';
+					var isLight = !!lightThemes[theme];
+					document.documentElement.setAttribute('data-theme', theme);
+					if (isLight) {
 						document.documentElement.classList.remove('dark');
 						document.documentElement.style.colorScheme = 'light';
 					} else {
diff --git a/src/App.tsx b/src/App.tsx
index 1903eab..0f59b25 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,8 +12,8 @@ export default function App() {
 	return (
 		<div className="flex flex-col grow min-h-screen">
 			<Header />
-			<div className="grow grid grid-cols-2 md:grid-cols-5 p-4 gap-4 lg:p-6 lg:gap-6">
-				<div className="col-span-2 h-full grid grid-rows-5 gap-4 lg:gap-6">
+			<main className="grow grid grid-cols-2 md:grid-cols-5 p-3 gap-3 sm:p-4 sm:gap-4 lg:p-6 lg:gap-5 xl:gap-6">
+				<div className="col-span-2 h-full grid grid-rows-5 gap-3 sm:gap-4 lg:gap-5 xl:gap-6">
 					<div className="row-span-3 flex overflow-auto">
 						<Configurator />
 					</div>
@@ -24,7 +24,7 @@ export default function App() {
 						<RequestAnimationFrame />
 					</div>
 				</div>
-				<div className="col-span-2 md:col-span-1 h-full grid grid-rows-2 gap-4 lg:gap-6">
+				<div className="col-span-2 md:col-span-1 h-full grid grid-rows-2 gap-3 sm:gap-4 lg:gap-5 xl:gap-6">
 					<div className="row-span-1 flex overflow-auto">
 						<Callstack />
 					</div>
@@ -32,7 +32,7 @@ export default function App() {
 						<Console />
 					</div>
 				</div>
-				<div className="col-span-2 h-full grid grid-rows-5 gap-4 lg:gap-6">
+				<div className="col-span-2 h-full grid grid-rows-5 gap-3 sm:gap-4 lg:gap-5 xl:gap-6">
 					<div className="row-span-1 flex overflow-auto">
 						<TasksQueue />
 					</div>
@@ -43,7 +43,7 @@ export default function App() {
 						<EventLoop />
 					</div>
 				</div>
-			</div>
+			</main>
 		</div>
 	);
 }
diff --git a/src/components/card.tsx b/src/components/card.tsx
index b87236e..cb9ffde 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -10,11 +10,11 @@ export function Card({ className, text }: CardProps) {
 	return (
 		<div
 			className={cn(
-				'bg-[var(--color-secondary)] border rounded-lg grow',
+				'bg-secondary border border-border/70 rounded-lg grow animate-in fade-in-0 slide-in-from-bottom-1 duration-200',
 				className
 			)}
 		>
-			<div className="flex grow h-full items-center justify-center p-2 break-all">
+			<div className="flex grow h-full items-center justify-center p-2 break-all text-sm">
 				{text}
 			</div>
 		</div>
diff --git a/src/components/chadcdn/dialog.tsx b/src/components/chadcdn/dialog.tsx
index 3bcbe1b..11361ae 100644
--- a/src/components/chadcdn/dialog.tsx
+++ b/src/components/chadcdn/dialog.tsx
@@ -100,7 +100,10 @@ function DialogTitle({
 	return (
 		<DialogPrimitive.Title
 			data-slot="dialog-title"
-			className={cn('text-lg leading-none font-semibold', className)}
+			className={cn(
+				'text-xl md:text-2xl leading-snug font-semibold tracking-tight',
+				className
+			)}
 			{...props}
 		/>
 	);
@@ -111,11 +114,16 @@ function DialogDescription({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
 	return (
-		<DialogPrimitive.Description
-			data-slot="dialog-description"
-			className={cn('text-muted-foreground text-sm', className)}
-			{...props}
-		/>
+		<DialogPrimitive.Description asChild>
+			<div
+				data-slot="dialog-description"
+				className={cn(
+					'text-muted-foreground text-base md:text-lg leading-relaxed space-y-3 [&_p]:mb-0 [&_p]:text-inherit [&_li]:text-inherit',
+					className
+				)}
+				{...props}
+			/>
+		</DialogPrimitive.Description>
 	);
 }
 
diff --git a/src/components/infoContainer.tsx b/src/components/infoContainer.tsx
index e780661..9e9c93a 100644
--- a/src/components/infoContainer.tsx
+++ b/src/components/infoContainer.tsx
@@ -19,26 +19,29 @@ export function InfoContainer({
 	title,
 }: InfoContainerProps) {
 	return (
-		<div
+		<section
 			data-testid="info-container"
 			className={cn(
-				'bg-[var(--color-card)] border rounded-lg p-2 lg:p-4 grow flex flex-col gap-2 lg:gap-4 max-w-full min-h-[10vh] md:min-h-0',
+				'bg-card text-card-foreground border border-border/80 rounded-xl p-3 lg:p-4 grow flex flex-col gap-2.5 lg:gap-4 max-w-full min-h-[10vh] md:min-h-0 shadow-[var(--shadow-panel)] transition-[background-color,border-color,box-shadow,color] duration-200',
 				className
 			)}
 		>
 			<div className="flex items-center justify-between gap-2">
-				<h3>{title}</h3>
+				<h3 className="text-sm font-semibold tracking-tight lg:text-base">
+					{title}
+				</h3>
 				<Modal title={title} description={description}>
 					<Button
 						variant="ghost"
 						size="iconSmall"
 						data-testid="info-container-button"
+						className="text-muted-foreground hover:text-foreground"
 					>
-						<Info className="size-5" />
+						<Info className="size-4 lg:size-5" />
 					</Button>
 				</Modal>
 			</div>
 			{children}
-		</div>
+		</section>
 	);
 }
diff --git a/src/components/progressCard.tsx b/src/components/progressCard.tsx
index 7cff91a..8d3b254 100644
--- a/src/components/progressCard.tsx
+++ b/src/components/progressCard.tsx
@@ -35,7 +35,7 @@ export function ProgressCard({
 
 	return (
 		<div
-			className={`relative flex items-center p-1 flex-1 rounded-lg`}
+			className="relative flex items-center p-1 flex-1 rounded-lg animate-in fade-in-0 slide-in-from-bottom-1 duration-200"
 			style={{
 				backgroundImage: `conic-gradient(
           currentColor,
@@ -46,11 +46,11 @@ export function ProgressCard({
 		>
 			<div
 				className={cn(
-					'bg-[var(--color-secondary)] border rounded-lg grow h-full',
+					'bg-secondary border border-border/70 rounded-lg grow h-full',
 					className
 				)}
 			>
-				<div className="flex grow h-full items-center justify-center p-2 break-all">
+				<div className="flex grow h-full items-center justify-center p-2 break-all text-sm">
 					{text}
 				</div>
 			</div>
diff --git a/src/features/header/header.tsx b/src/features/header/header.tsx
index da22785..4dc78cf 100644
--- a/src/features/header/header.tsx
+++ b/src/features/header/header.tsx
@@ -18,13 +18,22 @@ function GitHubIcon({ className }: { className?: string }) {
 
 export function Header() {
 	return (
-		<div className="flex px-4 py-2 lg:px-6 lg:py-4 items-center justify-between border-b">
-			<div className="flex items-center gap-2">
-				<Repeat />
-				<h2>Event loop explorer</h2>
+		<header className="flex shrink-0 items-center justify-between gap-3 border-b border-border/80 px-4 py-3 lg:px-6 lg:py-4 backdrop-blur-sm bg-background/70 transition-[background-color,border-color] duration-200">
+			<div className="flex items-center gap-3 min-w-0">
+				<span className="flex size-10 shrink-0 items-center justify-center self-center rounded-lg bg-secondary text-foreground">
+					<Repeat className="size-5" aria-hidden="true" />
+				</span>
+				<div className="flex min-w-0 flex-col justify-center leading-none">
+					<h2 className="m-0 truncate text-lg font-semibold leading-tight tracking-tight md:text-xl">
+						Event loop explorer
+					</h2>
+					<p className="m-0 mt-1 hidden text-xs leading-tight text-muted-foreground sm:block">
+						Step through the browser event loop
+					</p>
+				</div>
 			</div>
 
-			<div className="flex items-center gap-2">
+			<div className="flex items-center gap-1">
 				<Button asChild variant="ghost" size="iconBig">
 					<a
 						href="https://github.com/vault-developer/event-loop-explorer"
@@ -32,11 +41,11 @@ export function Header() {
 						rel="noreferrer"
 						aria-label="GitHub repository"
 					>
-						<GitHubIcon className="size-6" />
+						<GitHubIcon className="size-5" />
 					</a>
 				</Button>
 				<ThemeToggle />
 			</div>
-		</div>
+		</header>
 	);
 }
diff --git a/src/features/header/themeToggle.test.tsx b/src/features/header/themeToggle.test.tsx
index 70f5076..3bf1848 100644
--- a/src/features/header/themeToggle.test.tsx
+++ b/src/features/header/themeToggle.test.tsx
@@ -1,49 +1,63 @@
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi, type Mock } from 'vitest';
+import {
+	afterEach,
+	beforeAll,
+	describe,
+	expect,
+	it,
+	vi,
+	type Mock,
+} from 'vitest';
 import { ThemeToggle } from './themeToggle';
-import { useTheme } from '@/theme';
+import { useTheme, THEMES } from '@/theme';
 
-vi.mock('@/theme', () => ({
-	useTheme: vi.fn(),
-}));
+vi.mock('@/theme', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/theme')>();
+	return {
+		...actual,
+		useTheme: vi.fn(),
+	};
+});
+
+beforeAll(() => {
+	Element.prototype.scrollIntoView = vi.fn();
+	HTMLElement.prototype.hasPointerCapture = vi.fn();
+	HTMLElement.prototype.releasePointerCapture = vi.fn();
+	HTMLElement.prototype.setPointerCapture = vi.fn();
+});
 
 afterEach(cleanup);
 
 describe('ThemeToggle', () => {
-	it('should render Sun and Moon icons', () => {
+	it('should render the current theme label', () => {
 		(useTheme as Mock).mockReturnValue({
-			theme: 'dark',
+			theme: 'midnight',
 			setTheme: vi.fn(),
+			themeDefinition: THEMES.midnight,
 		});
 		render(<ThemeToggle />);
 
-		const moonIcon = screen.getByTestId('moon-icon');
-		const sunIcon = screen.getByTestId('sun-icon');
-		expect(moonIcon).toBeInTheDocument();
-		expect(sunIcon).toBeInTheDocument();
+		expect(screen.getByTestId('theme-toggle')).toBeInTheDocument();
+		expect(screen.getByLabelText('Select theme')).toBeInTheDocument();
+		expect(screen.getByText('Midnight')).toBeInTheDocument();
 	});
 
-	it('should toggle light theme on button click', () => {
+	it('should list theme presets and call setTheme on select', async () => {
 		const setThemeMock = vi.fn();
 		(useTheme as Mock).mockReturnValue({
-			theme: 'light',
+			theme: 'midnight',
 			setTheme: setThemeMock,
+			themeDefinition: THEMES.midnight,
 		});
 		render(<ThemeToggle />);
-		const toggleButton = screen.getByRole('button', { name: 'Toggle theme' });
-		fireEvent.click(toggleButton);
-		expect(setThemeMock).toHaveBeenCalledWith('dark');
-	});
 
-	it('should toggle dark theme on button click', () => {
-		const setThemeMock = vi.fn();
-		(useTheme as Mock).mockReturnValue({
-			theme: 'dark',
-			setTheme: setThemeMock,
-		});
-		render(<ThemeToggle />);
-		const toggleButton = screen.getByRole('button', { name: 'Toggle theme' });
-		fireEvent.click(toggleButton);
-		expect(setThemeMock).toHaveBeenCalledWith('light');
+		const trigger = screen.getByLabelText('Select theme');
+		fireEvent.pointerDown(trigger);
+		fireEvent.keyDown(trigger, { key: 'Enter' });
+
+		const nordOption = await screen.findByRole('option', { name: /Nord/i });
+		fireEvent.click(nordOption);
+
+		expect(setThemeMock).toHaveBeenCalledWith('nord');
 	});
 });
diff --git a/src/features/header/themeToggle.tsx b/src/features/header/themeToggle.tsx
index 08a682d..65ba69c 100644
--- a/src/features/header/themeToggle.tsx
+++ b/src/features/header/themeToggle.tsx
@@ -1,29 +1,49 @@
-import { useTheme } from '@/theme';
-import { Button } from '@/components/chadcdn/button';
-import { Moon, Sun } from 'lucide-react';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from '@/components/chadcdn/select';
+import { THEME_IDS, THEMES, useTheme, type ThemeId } from '@/theme';
+
+function ThemeSwatch({ colors }: { colors: [string, string, string] }) {
+	return (
+		<span className="flex items-center gap-0.5" aria-hidden="true">
+			{colors.map((color) => (
+				<span
+					key={color}
+					className="size-2 rounded-full"
+					style={{ backgroundColor: color }}
+				/>
+			))}
+		</span>
+	);
+}
 
 export function ThemeToggle() {
-	const { setTheme, theme } = useTheme();
-	const onToggle = () => setTheme(theme === 'light' ? 'dark' : 'light');
+	const { theme, setTheme } = useTheme();
 
 	return (
-		<Button
-			variant="ghost"
-			size="iconBig"
-			onClick={onToggle}
-			data-testid="theme-toggle"
-		>
-			<Sun
-				data-testid="sun-icon"
-				className="absolute scale-100 dark:scale-0 rotate-0 dark:rotate-90 transition-all size-6"
-				size={24}
-			/>
-			<Moon
-				data-testid="moon-icon"
-				className="absolute scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all size-6"
-				size={24}
-			/>
-			<span className="sr-only">Toggle theme</span>
-		</Button>
+		<Select value={theme} onValueChange={(value) => setTheme(value as ThemeId)}>
+			<SelectTrigger
+				size="sm"
+				data-testid="theme-toggle"
+				aria-label="Select theme"
+				className="min-w-0 gap-2 border-transparent bg-transparent shadow-none hover:bg-accent dark:hover:bg-accent/50 transition-colors"
+			>
+				<ThemeSwatch colors={THEMES[theme].swatch} />
+				<span className="hidden sm:inline">{THEMES[theme].label}</span>
+			</SelectTrigger>
+			<SelectContent align="end" className="min-w-[11rem]">
+				{THEME_IDS.map((id) => (
+					<SelectItem key={id} value={id}>
+						<span className="flex items-center gap-2">
+							<ThemeSwatch colors={THEMES[id].swatch} />
+							{THEMES[id].label}
+						</span>
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
 	);
 }
diff --git a/src/features/sections/configurator/controls.ui.tsx b/src/features/sections/configurator/controls.ui.tsx
index 2b4b81f..be809be 100644
--- a/src/features/sections/configurator/controls.ui.tsx
+++ b/src/features/sections/configurator/controls.ui.tsx
@@ -51,7 +51,11 @@ export const ControlsUi: FC<ControlsUiProps> = ({
 						defaultValue={DEFAULT_EXAMPLE_KEY}
 						onValueChange={onExampleSelect}
 					>
-						<SelectTrigger className="w-[210px]">
+						<SelectTrigger
+							className="w-[210px]"
+							aria-label="Select example"
+							data-testid="example-select"
+						>
 							<SelectValue placeholder="select an example" />
 						</SelectTrigger>
 						<SelectContent>
diff --git a/src/features/sections/configurator/editor.tsx b/src/features/sections/configurator/editor.tsx
index 7d19fa4..88045df 100644
--- a/src/features/sections/configurator/editor.tsx
+++ b/src/features/sections/configurator/editor.tsx
@@ -1,8 +1,14 @@
 import { type FC, type RefObject, useEffect, useRef } from 'react';
 import { AceEditor, type AceEditorInstance } from '@/utils/aceEditor';
 import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-one_dark';
 import 'ace-builds/src-noconflict/theme-textmate';
+import 'ace-builds/src-noconflict/theme-nord_dark';
+import 'ace-builds/src-noconflict/theme-dracula';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-tomorrow_night';
+import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-github';
 import { useControlsStore, useEditorStore } from '@/store/store';
 import { useTheme } from '@/theme';
 
@@ -12,11 +18,10 @@ interface EditorProps {
 }
 
 export const Editor: FC<EditorProps> = ({ code, setCode }) => {
-	const { theme } = useTheme();
+	const { themeDefinition } = useTheme();
 	const editorRef = useRef<AceEditorInstance>(null);
 	const setEditorRef = useEditorStore((state) => state.setRef);
 	const status = useControlsStore((state) => state.status);
-	const textTheme = theme === 'light' ? 'textmate' : 'solarized_dark';
 	const readOnly = status !== 'idle';
 
 	useEffect(() => {
@@ -32,7 +37,7 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
 			value={code}
 			height={'100%'}
 			mode="javascript"
-			theme={textTheme}
+			theme={themeDefinition.aceTheme}
 			setOptions={{
 				useWorker: false,
 				readOnly: readOnly,
diff --git a/src/features/sections/eventLoop/wheel.tsx b/src/features/sections/eventLoop/wheel.tsx
index a51fffe..557f342 100644
--- a/src/features/sections/eventLoop/wheel.tsx
+++ b/src/features/sections/eventLoop/wheel.tsx
@@ -8,9 +8,10 @@ const POINTER_LEFT_ID = 'wheel-pointer-left';
 const POINTER_RIGHT_ID = 'wheel-pointer-right';
 const WHEEL_ID = 'wheel';
 
-const MICROTASK_CLASS = 'microtask fill-[var(--chart-1)]';
-const MACROTASK_CLASS = 'macrotask fill-[var(--chart-2)]';
-const RENDER_CLASS = 'render fill-[var(--chart-3)]';
+const SEGMENT_TRANSITION = 'transition-opacity duration-200 ease-out';
+const MICROTASK_CLASS = `microtask fill-[var(--chart-1)] ${SEGMENT_TRANSITION}`;
+const MACROTASK_CLASS = `macrotask fill-[var(--chart-2)] ${SEGMENT_TRANSITION}`;
+const RENDER_CLASS = `render fill-[var(--chart-3)] ${SEGMENT_TRANSITION}`;
 
 const SEGMENT_OFFSET = -9;
 const POINTER_OFFSET = -99;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e526ad1..4224ca9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -15,7 +15,7 @@
 	--color-border: var(--border);
 	--color-accent-foreground: var(--primary);
 	--color-accent: var(--secondary);
-	--color-muted-foreground: var(--primary);
+	--color-muted-foreground: var(--muted-foreground);
 	--color-muted: var(--secondary);
 	--color-secondary-foreground: var(--primary);
 	--color-secondary: var(--secondary);
@@ -25,6 +25,7 @@
 	--color-popover: var(--card);
 	--color-card-foreground: var(--primary);
 	--color-card: var(--card);
+	--shadow-panel: var(--shadow-panel);
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);
@@ -32,27 +33,156 @@
 }
 
 :root {
-	--radius: 0.625rem;
+	--radius: 0.75rem;
+	--transition-theme:
+		background-color 200ms ease, color 200ms ease, border-color 200ms ease,
+		fill 200ms ease, stroke 200ms ease, box-shadow 200ms ease;
+}
 
-	--primary: #09090b;
-	--background: #fff;
-	--card: #fff;
-	--secondary: #e4e4e7;
-	--border: #b9b9c6;
+[data-theme='midnight'] {
+	--primary: #e2e8f0;
+	--muted-foreground: #94a3b8;
+	--background: #0f1117;
+	--card: #181c27;
+	--secondary: #252a38;
+	--border: #3a4155;
 	--chart-1: #60a5fa;
 	--chart-2: #4ade80;
 	--chart-3: #fb7185;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.2);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(58 65 85 / 0.45),
+		transparent 55%
+	);
 }
 
-.dark {
-	--primary: #dbe2f0;
-	--background: #18181b;
-	--card: #21222c;
-	--secondary: #2b2e3b;
-	--border: #414558;
-	--chart-1: #60a5fa;
-	--chart-2: #4ade80;
-	--chart-3: #fb7185;
+[data-theme='paper'] {
+	--primary: #1e293b;
+	--muted-foreground: #64748b;
+	--background: #f4f6f9;
+	--card: #ffffff;
+	--secondary: #e8ecf2;
+	--border: #c9d1dc;
+	--chart-1: #2563eb;
+	--chart-2: #16a34a;
+	--chart-3: #e11d48;
+	--shadow-panel:
+		0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(148 163 184 / 0.28),
+		transparent 55%
+	);
+}
+
+[data-theme='nord'] {
+	--primary: #eceff4;
+	--muted-foreground: #88c0d0;
+	--background: #2e3440;
+	--card: #3b4252;
+	--secondary: #434c5e;
+	--border: #4c566a;
+	--chart-1: #81a1c1;
+	--chart-2: #a3be8c;
+	--chart-3: #bf616a;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.18);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(136 192 208 / 0.18),
+		transparent 55%
+	);
+}
+
+[data-theme='dracula'] {
+	--primary: #f8f8f2;
+	--muted-foreground: #bd93f9;
+	--background: #282a36;
+	--card: #343746;
+	--secondary: #44475a;
+	--border: #6272a4;
+	--chart-1: #8be9fd;
+	--chart-2: #50fa7b;
+	--chart-3: #ff79c6;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.22);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(189 147 249 / 0.16),
+		transparent 55%
+	);
+}
+
+[data-theme='monokai'] {
+	--primary: #f8f8f2;
+	--muted-foreground: #a6a39d;
+	--background: #272822;
+	--card: #2f3129;
+	--secondary: #3e3d32;
+	--border: #75715e;
+	--chart-1: #66d9ef;
+	--chart-2: #a6e22e;
+	--chart-3: #f92672;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.22);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(249 38 114 / 0.12),
+		transparent 55%
+	);
+}
+
+[data-theme='catppuccin'] {
+	--primary: #cdd6f4;
+	--muted-foreground: #a6adc8;
+	--background: #1e1e2e;
+	--card: #262637;
+	--secondary: #313244;
+	--border: #45475a;
+	--chart-1: #89b4fa;
+	--chart-2: #a6e3a1;
+	--chart-3: #f38ba8;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.22);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(137 180 250 / 0.14),
+		transparent 55%
+	);
+}
+
+[data-theme='solarized'] {
+	--primary: #839496;
+	--muted-foreground: #657b83;
+	--background: #002b36;
+	--card: #073642;
+	--secondary: #0a4553;
+	--border: #586e75;
+	--chart-1: #268bd2;
+	--chart-2: #859900;
+	--chart-3: #dc322f;
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.25);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(38 139 210 / 0.16),
+		transparent 55%
+	);
+}
+
+[data-theme='github'] {
+	--primary: #1f2328;
+	--muted-foreground: #656d76;
+	--background: #f6f8fa;
+	--card: #ffffff;
+	--secondary: #eff2f5;
+	--border: #d0d7de;
+	--chart-1: #0969da;
+	--chart-2: #1a7f37;
+	--chart-3: #cf222e;
+	--shadow-panel:
+		0 1px 2px rgb(31 35 40 / 0.06), 0 8px 24px rgb(31 35 40 / 0.06);
+	--atmosphere: radial-gradient(
+		120% 80% at 50% -10%,
+		rgb(9 105 218 / 0.08),
+		transparent 55%
+	);
 }
 
 @layer base {
@@ -60,7 +190,10 @@
 		@apply border-border outline-ring/50;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground text-sm;
+		background-image: var(--atmosphere);
+		background-attachment: fixed;
+		transition: var(--transition-theme);
 	}
 }
 
diff --git a/src/styles/typography.css b/src/styles/typography.css
index 499904c..9396512 100644
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -1,22 +1,19 @@
-@reference "tailwindcss";
-@reference "tw-animate-css";
+@reference "./globals.css";
 
-h2 {
-	@apply scroll-m-20 pb-1 text-xl md:text-2xl font-semibold tracking-tight first:mt-0;
-}
+@layer base {
+	h2 {
+		@apply scroll-m-20 text-xl md:text-2xl font-semibold tracking-tight first:mt-0;
+	}
 
-h3 {
-	@apply scroll-m-20 text-base font-semibold tracking-tight;
-}
+	h3 {
+		@apply scroll-m-20 text-sm lg:text-base font-semibold tracking-tight text-foreground;
+	}
 
-div {
-	@apply text-sm;
-}
-
-p {
-	@apply text-sm mb-4;
-}
+	p {
+		@apply mb-4 text-muted-foreground;
+	}
 
-li {
-	@apply mb-2 last:mb-0;
+	li {
+		@apply mb-2 last:mb-0;
+	}
 }
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ea9b822..54bb0a7 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,2 +1,11 @@
-export { ThemeProvider, useTheme } from './theme';
-export type { Theme } from './theme';
+export {
+	ThemeProvider,
+	useTheme,
+	THEMES,
+	THEME_IDS,
+	DEFAULT_THEME,
+	resolveThemeId,
+	applyTheme,
+	getStoredTheme,
+} from './theme';
+export type { Theme, ThemeId, ThemeMode, ThemeDefinition } from './theme';
diff --git a/src/theme/theme.test.ts b/src/theme/theme.test.ts
new file mode 100644
index 0000000..8fda12c
--- /dev/null
+++ b/src/theme/theme.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, resolveThemeId } from '@/theme';
+
+describe('resolveThemeId', () => {
+	it('migrates legacy dark to midnight', () => {
+		expect(resolveThemeId('dark')).toBe('midnight');
+	});
+
+	it('migrates legacy light to paper', () => {
+		expect(resolveThemeId('light')).toBe('paper');
+	});
+
+	it('keeps known theme ids', () => {
+		expect(resolveThemeId('nord')).toBe('nord');
+		expect(resolveThemeId('github')).toBe('github');
+		expect(resolveThemeId('catppuccin')).toBe('catppuccin');
+	});
+
+	it('falls back to default for unknown or null values', () => {
+		expect(resolveThemeId(null)).toBe(DEFAULT_THEME);
+		expect(resolveThemeId('unknown')).toBe(DEFAULT_THEME);
+		expect(resolveThemeId('')).toBe(DEFAULT_THEME);
+	});
+});
diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx
index 98e5645..764a4b2 100644
--- a/src/theme/theme.tsx
+++ b/src/theme/theme.tsx
@@ -8,32 +8,126 @@ import {
 	type ReactNode,
 } from 'react';
 
-export type Theme = 'light' | 'dark';
+export type ThemeId =
+	| 'midnight'
+	| 'paper'
+	| 'nord'
+	| 'dracula'
+	| 'monokai'
+	| 'catppuccin'
+	| 'solarized'
+	| 'github';
+
+export type ThemeMode = 'light' | 'dark';
+
+export type ThemeDefinition = {
+	id: ThemeId;
+	label: string;
+	mode: ThemeMode;
+	aceTheme: string;
+	swatch: [string, string, string];
+};
+
+export const THEMES: Record<ThemeId, ThemeDefinition> = {
+	midnight: {
+		id: 'midnight',
+		label: 'Midnight',
+		mode: 'dark',
+		aceTheme: 'one_dark',
+		swatch: ['#60a5fa', '#4ade80', '#fb7185'],
+	},
+	paper: {
+		id: 'paper',
+		label: 'Paper',
+		mode: 'light',
+		aceTheme: 'textmate',
+		swatch: ['#2563eb', '#16a34a', '#e11d48'],
+	},
+	nord: {
+		id: 'nord',
+		label: 'Nord',
+		mode: 'dark',
+		aceTheme: 'nord_dark',
+		swatch: ['#81a1c1', '#a3be8c', '#bf616a'],
+	},
+	dracula: {
+		id: 'dracula',
+		label: 'Dracula',
+		mode: 'dark',
+		aceTheme: 'dracula',
+		swatch: ['#8be9fd', '#50fa7b', '#ff79c6'],
+	},
+	monokai: {
+		id: 'monokai',
+		label: 'Monokai',
+		mode: 'dark',
+		aceTheme: 'monokai',
+		swatch: ['#66d9ef', '#a6e22e', '#f92672'],
+	},
+	catppuccin: {
+		id: 'catppuccin',
+		label: 'Catppuccin',
+		mode: 'dark',
+		aceTheme: 'tomorrow_night',
+		swatch: ['#89b4fa', '#a6e3a1', '#f38ba8'],
+	},
+	solarized: {
+		id: 'solarized',
+		label: 'Solarized',
+		mode: 'dark',
+		aceTheme: 'solarized_dark',
+		swatch: ['#268bd2', '#859900', '#dc322f'],
+	},
+	github: {
+		id: 'github',
+		label: 'GitHub',
+		mode: 'light',
+		aceTheme: 'github',
+		swatch: ['#0969da', '#1a7f37', '#cf222e'],
+	},
+};
+
+export const THEME_IDS = Object.keys(THEMES) as ThemeId[];
+
+export const DEFAULT_THEME: ThemeId = 'midnight';
+
+/** @deprecated Use ThemeId */
+export type Theme = ThemeId;
 
 export type ThemeContextValue = {
-	theme: Theme;
-	setTheme: (theme: Theme) => void;
+	theme: ThemeId;
+	setTheme: (theme: ThemeId) => void;
+	themeDefinition: ThemeDefinition;
 };
 
 const STORAGE_KEY = 'theme';
 
 export const ThemeContext = createContext<ThemeContextValue | null>(null);
 
-function getStoredTheme(): Theme {
+function isThemeId(value: string): value is ThemeId {
+	return value in THEMES;
+}
+
+export function resolveThemeId(stored: string | null): ThemeId {
+	if (stored === 'dark') return 'midnight';
+	if (stored === 'light') return 'paper';
+	if (stored && isThemeId(stored)) return stored;
+	return DEFAULT_THEME;
+}
+
+export function getStoredTheme(): ThemeId {
 	try {
-		const stored = localStorage.getItem(STORAGE_KEY);
-		if (stored === 'light' || stored === 'dark') {
-			return stored;
-		}
+		return resolveThemeId(localStorage.getItem(STORAGE_KEY));
 	} catch {
-		// ignore
+		return DEFAULT_THEME;
 	}
-	return 'dark';
 }
 
-function applyTheme(theme: Theme) {
+export function applyTheme(theme: ThemeId) {
 	const root = document.documentElement;
-	if (theme === 'dark') {
+	const definition = THEMES[theme];
+	root.setAttribute('data-theme', theme);
+	if (definition.mode === 'dark') {
 		root.classList.add('dark');
 		root.style.colorScheme = 'dark';
 	} else {
@@ -43,7 +137,7 @@ function applyTheme(theme: Theme) {
 }
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
-	const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());
+	const [theme, setThemeState] = useState<ThemeId>(() => getStoredTheme());
 
 	useEffect(() => {
 		applyTheme(theme);
@@ -54,11 +148,19 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 		}
 	}, [theme]);
 
-	const setTheme = useCallback((next: Theme) => {
+	const setTheme = useCallback((next: ThemeId) => {
+		if (!isThemeId(next)) return;
 		setThemeState(next);
 	}, []);
 
-	const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+	const value = useMemo(
+		() => ({
+			theme,
+			setTheme,
+			themeDefinition: THEMES[theme],
+		}),
+		[theme, setTheme]
+	);
 
 	return (
 		<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
