diff --git a/docs/Beta.md b/docs/Beta.md
index 8831e50..f067970 100644
--- a/docs/Beta.md
+++ b/docs/Beta.md
@@ -3,24 +3,26 @@
 - site.standard
   - move description to markdownDescription and set description as text only
 
+- allow editing on mobile
+
+- get automatic layout for mobile if only edited on desktop (and vice versa)
+
+- add cards in middle of current position (both mobile and desktop version)
+
+- show nsfw warnings
+
 - big button card
 
 - card with big call to action button
 
-- link card allow changing favicon, og image (+ hide favicon)
-
 - video card?
 
 - allow setting base and accent color
 
 - ask to fill with some default cards on page creation
 
-- share button (copy share link to blento, maybe post to bluesky?)
-
-- add icons to "change card to..." popover
-
 - when adding images try to add them in a size that best fits aspect ratio
 
 - onboarding
 
-- show alert when user tries to close window with unsaved changes
+- fix invalid handle thing
diff --git a/docs/CardIdeas.md b/docs/CardIdeas.md
index c466d6d..98a8f0f 100644
--- a/docs/CardIdeas.md
+++ b/docs/CardIdeas.md
@@ -3,21 +3,22 @@
 ## media
 
 - general video card
-- inline youtube video
+- [x] inline youtube video
 - cartoons: aka https://www.opendoodles.com/
 - excalidraw (/svg card)
 - latest blog post (e.g. leaflet)
 - fake 3d image (with depth map)
-- fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
-- gifs
-- little drawing app
+- [x] fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
+- [x] gifs
+- [x] little drawing app
 - css voxel art
 - 3d model
+- spotify or apple music playlist
 
 ## social accounts
 
 - instagram card (showing follow button, follower count, latest posts)
-- github card (showing activity grid)
+- [x] github card (showing activity grid)
 - bluesky account card (showing follow button, follower count, avatar, name, cover image)
 - youtube channel card (showing channel name, latest videos, follow button?)
 - bluesky posts workcloud
@@ -40,12 +41,16 @@
 - teal.fm
   - [x] last played songs
 - tangled.sh
+  - pinned repos
+  - activity heatmap?
 - popfeed.social
   - reading goal
   - [x] latest ratings
   - lists
-- smokesignal.events (https://pdsls.dev/at://did:plc:xbtmt2zjwlrfegqvch7fboei/events.smokesignal.calendar.event/3ltn2qrxf3626)
-- statusphere.xyz (https://googlefonts.github.io/noto-emoji-animation/, https://gist.github.com/sanjacob/a0ccdf6d88f15bf158d8895090722d14)
+- smokesignal.events
+  - [x] specific event
+  - all future events i'm hosting/attending
+- [x] statusphere.xyz (TODO: assing to specific record)
 - goals.garden
 - flashes.blue (https://pdsls.dev/at://did:plc:aytgljyikzbtgrnac2u4ccft/blue.flashes.actor.portfolio, https://app.flashes.blue/profile/j4ck.xyz)
 - room: flo-bit.dev/room
diff --git a/src/lib/components/select-theme/SelectTheme.svelte b/src/lib/components/select-theme/SelectTheme.svelte
new file mode 100644
index 0000000..a5c3847
--- /dev/null
+++ b/src/lib/components/select-theme/SelectTheme.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Paragraph } from '@foxui/core';
+	import { ColorSelect } from '@foxui/colors';
+
+	let accentColors = [
+		{ class: 'text-red-500', label: 'red' },
+		{ class: 'text-orange-500', label: 'orange' },
+		{ class: 'text-amber-500', label: 'amber' },
+		{ class: 'text-yellow-500', label: 'yellow' },
+		{ class: 'text-lime-500', label: 'lime' },
+		{ class: 'text-green-500', label: 'green' },
+		{ class: 'text-emerald-500', label: 'emerald' },
+		{ class: 'text-teal-500', label: 'teal' },
+		{ class: 'text-cyan-500', label: 'cyan' },
+		{ class: 'text-sky-500', label: 'sky' },
+		{ class: 'text-blue-500', label: 'blue' },
+		{ class: 'text-indigo-500', label: 'indigo' },
+		{ class: 'text-violet-500', label: 'violet' },
+		{ class: 'text-purple-500', label: 'purple' },
+		{ class: 'text-fuchsia-500', label: 'fuchsia' },
+		{ class: 'text-pink-500', label: 'pink' },
+		{ class: 'text-rose-500', label: 'rose' }
+	];
+
+	let baseColors = [
+		{ class: 'text-gray-500', label: 'gray' },
+		{ class: 'text-stone-500', label: 'stone' },
+		{ class: 'text-zinc-500', label: 'zinc' },
+		{ class: 'text-neutral-500', label: 'neutral' },
+		{ class: 'text-slate-500', label: 'slate' }
+	];
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+
+	let selectedAccentColor = $derived(
+		accentColors.find((c) => c.label === accentColor) ?? accentColors[15]
+	);
+
+	let selectedBaseColor = $derived(baseColors.find((c) => c.label === baseColor) ?? baseColors[1]);
+</script>
+
+{#if selectAccentColor}
+	<Paragraph class="mb-2">Accent Color</Paragraph>
+	<ColorSelect
+		selected={selectedAccentColor}
+		colors={accentColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			accentColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+		class="w-64"
+	/>
+{/if}
+
+{#if selectBaseColor}
+	<Paragraph class="mt-4 mb-2">Base Color</Paragraph>
+	<ColorSelect
+		selected={selectedBaseColor}
+		colors={baseColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			baseColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+	/>
+{/if}
diff --git a/src/lib/components/select-theme/SelectThemePopover.svelte b/src/lib/components/select-theme/SelectThemePopover.svelte
new file mode 100644
index 0000000..8a295cb
--- /dev/null
+++ b/src/lib/components/select-theme/SelectThemePopover.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { buttonVariants, Popover, cn } from '@foxui/core';
+	import SelectTheme from './SelectTheme.svelte';
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+</script>
+
+<Popover>
+	{#snippet child({ props })}
+		<button
+			{...props}
+			class={cn(
+				buttonVariants({ variant: 'link', size: 'default' }),
+				'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
+			)}
+		>
+			{#if selectAccentColor}
+				<div
+					class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+
+			{#if selectBaseColor}
+				<div
+					class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+		</button>
+	{/snippet}
+	<SelectTheme bind:accentColor bind:baseColor {selectAccentColor} {selectBaseColor} {onchanged} />
+</Popover>
diff --git a/src/lib/components/select-theme/index.ts b/src/lib/components/select-theme/index.ts
new file mode 100644
index 0000000..23cb636
--- /dev/null
+++ b/src/lib/components/select-theme/index.ts
@@ -0,0 +1,2 @@
+export { default as SelectTheme } from './SelectTheme.svelte';
+export { default as SelectThemePopover } from './SelectThemePopover.svelte';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 03e8240..0cbc785 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -51,6 +51,10 @@ export type WebsiteData = {
 
 			// 'side' (default on desktop) or 'top' (always top like mobile view)
 			profilePosition?: 'side' | 'top';
+
+			// theme colors
+			accentColor?: string;
+			baseColor?: string;
 		};
 	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;
diff --git a/src/lib/website/EditableProfile.svelte b/src/lib/website/EditableProfile.svelte
index dfce27c..195f54b 100644
--- a/src/lib/website/EditableProfile.svelte
+++ b/src/lib/website/EditableProfile.svelte
@@ -5,12 +5,22 @@
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import { Avatar, Button } from '@foxui/core';
 	import { getIsMobile } from './context';
-	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 
 	let { data = $bindable(), hideBlento = false }: { data: WebsiteData; hideBlento?: boolean } =
 		$props();
 
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
+
 	let profilePosition = $derived(getProfilePosition(data));
 
 	function toggleProfilePosition() {
@@ -130,6 +140,13 @@
 				{/if}
 			</Button>
 		{/if}
+
+		<!-- Theme selection -->
+		<SelectThemePopover
+			{accentColor}
+			{baseColor}
+			onchanged={(newAccent, newBase) => updateTheme(newAccent, newBase)}
+		/>
 	</div>
 
 	<div
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index 572c175..25f9647 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -572,6 +572,8 @@
 	favicon={data.profile.avatar ?? null}
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Account {data} />
diff --git a/src/lib/website/Head.svelte b/src/lib/website/Head.svelte
index 08aa863..909edbc 100644
--- a/src/lib/website/Head.svelte
+++ b/src/lib/website/Head.svelte
@@ -1,13 +1,25 @@
 <script lang="ts">
+	import ThemeScript from './ThemeScript.svelte';
+
 	let {
 		favicon,
 		title,
 		image,
-		description
-	}: { favicon: string | null; title: string | null; image?: string; description?: string } =
-		$props();
+		description,
+		accentColor,
+		baseColor
+	}: {
+		favicon: string | null;
+		title: string | null;
+		image?: string;
+		description?: string;
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
 </script>
 
+<ThemeScript {accentColor} {baseColor} />
+
 <svelte:head>
 	{#if favicon}
 		<link rel="icon" href={favicon} />
diff --git a/src/lib/website/ThemeScript.svelte b/src/lib/website/ThemeScript.svelte
new file mode 100644
index 0000000..65433dc
--- /dev/null
+++ b/src/lib/website/ThemeScript.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	let {
+		accentColor = 'pink',
+		baseColor = 'stone'
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
+
+	let script = $derived(
+		`<script>(function(){document.documentElement.classList.add(${JSON.stringify(accentColor)},${JSON.stringify(baseColor)});})();<` +
+			'/script>'
+	);
+</script>
+
+<svelte:head>
+	{@html script}
+</svelte:head>
diff --git a/src/lib/website/Website.svelte b/src/lib/website/Website.svelte
index c3233ef..1932a9f 100644
--- a/src/lib/website/Website.svelte
+++ b/src/lib/website/Website.svelte
@@ -60,6 +60,8 @@
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
 	description={getDescription(data)}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Context {data}>