diff --git a/docs/todo/external-section-sources.md b/docs/todo/external-section-sources.md
new file mode 100644
index 0000000..78c6959
--- /dev/null
+++ b/docs/todo/external-section-sources.md
@@ -0,0 +1,105 @@
+# External data sources for sections
+
+Allow sections to be auto-filled from external data (e.g. Grain gallery photos, standard.site blog posts) instead of manually curated cards.
+
+## Goals
+
+- Sections can pull items from external sources (ATProto collections, web APIs, etc.) without the user manually creating each card.
+- Extension path mirrors the existing card `loadData` pattern so there's one consistent idea in the codebase.
+- A section can always fall back to manual content (same UX as today).
+- Multiple sections on a page can use different sources; a single page can mix sourced and manual sections.
+
+## Proposed API
+
+### SectionDefinition additions
+
+```ts
+type SectionDefinition = {
+	// existing...
+
+	// Optional external data fetch. Result stored in WebsiteData.additionalData[section.id].
+	loadData?: (section: SectionRecord, ctx: { did; handle; cache? }) => Promise<unknown>;
+	loadDataServer?: (
+		section: SectionRecord,
+		ctx: { did; handle; cache?; env?; platform? }
+	) => Promise<unknown>;
+};
+```
+
+Mirrors the card-level `loadData`/`loadDataServer`. Reuses the same cache service + KV infrastructure.
+
+### sectionData shape
+
+Each section that supports sourcing stores its source config in `sectionData`:
+
+```ts
+// Manual (default)
+sectionData: { source: { provider: 'manual' }, ...otherStuff }
+
+// Sourced from Grain
+sectionData: {
+  source: { provider: 'grain-gallery', galleryUri: 'at://did:.../xyz.grain.photo.gallery/abc' }
+}
+
+// Sourced from standard.site blog
+sectionData: {
+  source: { provider: 'standard-site-blog', did: 'did:...', limit: 10 }
+}
+```
+
+### Source registration
+
+Sources are pluggable modules that can be used by one or more section types:
+
+```ts
+// src/lib/sections/sources/types.ts
+type SectionSource = {
+	id: string; // e.g. 'grain-gallery'
+	name: string; // user-facing name
+	supportedSections: string[]; // e.g. ['gallery']
+	configComponent: Component<{
+		config: any;
+		onchange: (next: any) => void;
+	}>;
+	loadData?: (config: any, ctx: any) => Promise<unknown>;
+	loadDataServer?: (config: any, ctx: any) => Promise<unknown>;
+};
+```
+
+Registered in a central `AllSectionSources` array like cards/sections are. Section types query the list filtered by `supportedSections`.
+
+Example: `src/lib/sections/sources/grain-gallery.ts` registers a source with `supportedSections: ['gallery']` and a `loadDataServer` that fetches photos via the Grain lexicon.
+
+### Rendering flow
+
+The section's `contentComponent` receives:
+
+- `items` (manual cards assigned to the section, as today)
+- `externalData` (from `additionalData[section.id]`)
+
+If `sectionData.source.provider !== 'manual'`, the section renders from `externalData`; otherwise it renders `items`. Optionally, a section could combine both (e.g. pinned manual items + auto-pulled items).
+
+External items are "synthetic": they look like `Item`s at the render layer (enough for `BaseCard` / `Card` to render them) but they have no PDS record and no `sectionId`. They reuse existing card types — a Grain photo renders as a synthetic `image` card, a blog post as a synthetic `link` card. No new card components needed.
+
+### Editing UX
+
+- Section settings popover/drawer gets a **Source** dropdown listing compatible sources (derived from `AllSectionSources` filtered to the current section type)
+- When the source is non-manual, the inline card-editing UI is replaced with the source's `configComponent` (e.g. "Paste Grain gallery URI")
+- Switching source back to "Manual" restores the manual editing UX (and the existing cards resurface)
+- The source's config is persisted in `sectionData.source`
+
+## Implementation order
+
+1. Add `loadData` / `loadDataServer` to `SectionDefinition` and wire into `load.ts` (server-side fan-out like cards already do).
+2. Add the sources registry (`src/lib/sections/sources/index.ts`).
+3. Teach `contentComponent` / `editingContentComponent` to branch on `sectionData.source.provider`.
+4. Build one real source end-to-end: **Grain gallery → Gallery section** (infrastructure already exists in `PhotoGalleryCard`).
+5. Follow with: **standard.site blog → Row section** (requires a blog-post card first, or a synthetic link card with richer metadata).
+
+## Open questions
+
+- Should sources be able to return card-type-specific `cardData`, or should they always return a normalised shape? Probably card-type-specific for flexibility.
+- Pagination: do sources need to know about "load more" or infinite scroll? For now assume batch-fetch (limit in config).
+- Caching: per-section cache key by `section.id + section.updatedAt`? Or by source config hash so multiple sections with the same source share cache? Probably the latter.
+- Mixing sourced + manual: start with mutually exclusive (source OR manual), add mixing later if needed.
+- Mobile UX for the Source dropdown and config UI: same treatment as the card editing popovers.
diff --git a/lexicons/app/blento/card.json b/lexicons/app/blento/card.json
index 3a11945..5917df6 100644
--- a/lexicons/app/blento/card.json
+++ b/lexicons/app/blento/card.json
@@ -23,6 +23,7 @@
 					"color": { "type": "string" },
 					"page": { "type": "string" },
 					"sectionId": { "type": "string" },
+					"rotation": { "type": "integer" },
 					"updatedAt": { "type": "string", "format": "datetime" },
 					"version": { "type": "integer" }
 				}
diff --git a/src/lib/cards/types.ts b/src/lib/cards/types.ts
index dc21d63..e7d5ffc 100644
--- a/src/lib/cards/types.ts
+++ b/src/lib/cards/types.ts
@@ -80,6 +80,9 @@ export type CardDefinition = {
 
 	canResize?: boolean;
 
+	// allow rotation for this card type (default true — section can also disable)
+	allowRotate?: boolean;
+
 	// if true, content can render outside the card's bounds (no overflow:hidden on the inner wrapper)
 	noOverflow?: boolean;
 
diff --git a/src/lib/sections/GallerySection/EditingGallerySection.svelte b/src/lib/sections/GallerySection/EditingGallerySection.svelte
new file mode 100644
index 0000000..740b16e
--- /dev/null
+++ b/src/lib/sections/GallerySection/EditingGallerySection.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { ImageMasonry } from '@foxui/visual';
+	import { Button } from '@foxui/core';
+	import { getDidContext, getSelectCard } from '$lib/website/context';
+	import { getImage } from '$lib/helper';
+	import type { EditingSectionContentProps } from '../types';
+	import SectionChrome from '../SectionChrome.svelte';
+
+	let {
+		section,
+		items = $bindable(),
+		isActive,
+		onlayoutchange,
+		oncreatefilecards,
+		onactivate,
+		onrefchange
+	}: EditingSectionContentProps = $props();
+
+	let d = $derived(section.sectionData);
+	let columns = $derived(Math.max(1, Math.min(6, (d.columns ?? 3) as number)));
+
+	const did = getDidContext();
+	const selectCard = getSelectCard();
+
+	let sectionItems = $derived(
+		items.filter((i) => i.sectionId === section.id).toSorted((a, b) => a.x - b.x)
+	);
+
+	let images = $derived(
+		sectionItems
+			.map((item) => {
+				const src = getImage(item.cardData, did, 'image');
+				if (!src) return null;
+				const ar = item.cardData.aspectRatio as { width: number; height: number } | undefined;
+				const width = ar?.width || item.w || 1;
+				const height = ar?.height || item.h || 1;
+				return {
+					src,
+					name: '',
+					width,
+					height,
+					onclick: () => selectCard(item.id)
+				};
+			})
+			.filter((i) => i !== null)
+	);
+
+	let containerRef: HTMLDivElement | undefined = $state();
+	let hovered = $state(false);
+
+	$effect(() => {
+		onrefchange(containerRef);
+		return () => onrefchange(undefined);
+	});
+
+	$effect(() => {
+		const el = containerRef;
+		if (!el) return;
+		const enter = () => (hovered = true);
+		const leave = () => (hovered = false);
+		const down = () => onactivate();
+		el.addEventListener('pointerenter', enter);
+		el.addEventListener('pointerleave', leave);
+		el.addEventListener('pointerdown', down);
+		return () => {
+			el.removeEventListener('pointerenter', enter);
+			el.removeEventListener('pointerleave', leave);
+			el.removeEventListener('pointerdown', down);
+		};
+	});
+
+	const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`;
+
+	let fileInput: HTMLInputElement | undefined = $state();
+
+	async function handleFiles(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (!input.files || input.files.length < 1) return;
+		const files = Array.from(input.files).filter((f) => f.type.startsWith('image/'));
+		const cards = await oncreatefilecards(files);
+		for (const card of cards) {
+			card.sectionId = section.id;
+			card.w = 2;
+			card.h = 2;
+			card.mobileW = 4;
+			card.mobileH = 4;
+			const current = items.filter((i) => i.sectionId === section.id);
+			card.x = current.length;
+			card.y = 0;
+			items = [...items, card];
+		}
+		onlayoutchange();
+		input.value = '';
+	}
+</script>
+
+<input
+	bind:this={fileInput}
+	type="file"
+	accept="image/*"
+	multiple
+	class="hidden"
+	onchange={handleFiles}
+/>
+
+<div
+	bind:this={containerRef}
+	class="@container/grid pointer-events-auto relative col-span-3 px-2 py-8"
+>
+	<SectionChrome {isActive} {hovered} name={section.name || 'Gallery'} {icon} />
+
+	{#if sectionItems.length > 0}
+		<div class="gallery-compact">
+			<ImageMasonry {images} showNames={false} maxColumns={2} />
+		</div>
+		<div class="gallery-wide">
+			<ImageMasonry {images} showNames={false} maxColumns={columns} />
+		</div>
+	{/if}
+
+	<div class="mt-4 flex justify-center">
+		<Button variant="ghost" onclick={() => fileInput?.click()} class="gap-2">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="size-4"
+			>
+				<path d="M12 5v14" />
+				<path d="M5 12h14" />
+			</svg>
+			Add images
+		</Button>
+	</div>
+</div>
+
+<style>
+	.gallery-wide {
+		display: none;
+	}
+	@container grid (width >= 42rem) {
+		.gallery-compact {
+			display: none;
+		}
+		.gallery-wide {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/sections/GallerySection/GallerySection.svelte b/src/lib/sections/GallerySection/GallerySection.svelte
new file mode 100644
index 0000000..de77c84
--- /dev/null
+++ b/src/lib/sections/GallerySection/GallerySection.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { ImageMasonry } from '@foxui/visual';
+	import { getDidContext } from '$lib/website/context';
+	import { getImage } from '$lib/helper';
+	import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte';
+	import type { SectionContentProps } from '../types';
+
+	let { section, items }: SectionContentProps = $props();
+
+	let d = $derived(section.sectionData);
+	let columns = $derived(Math.max(1, Math.min(6, (d.columns ?? 3) as number)));
+
+	const did = getDidContext();
+
+	let sectionItems = $derived(
+		items.filter((i) => i.sectionId === section.id).toSorted((a, b) => a.x - b.x)
+	);
+
+	let images = $derived(
+		sectionItems
+			.map((item) => {
+				const src = getImage(item.cardData, did, 'image');
+				if (!src) return null;
+				const ar = item.cardData.aspectRatio as { width: number; height: number } | undefined;
+				const width = ar?.width || item.w || 1;
+				const height = ar?.height || item.h || 1;
+				return {
+					src,
+					name: '',
+					width,
+					height,
+					onclick: () => openImageViewer(src)
+				};
+			})
+			.filter((i) => i !== null)
+	);
+</script>
+
+<div class="@container/grid relative col-span-3 px-2 py-8">
+	<div class="gallery-compact">
+		<ImageMasonry {images} showNames={false} maxColumns={2} />
+	</div>
+	<div class="gallery-wide">
+		<ImageMasonry {images} showNames={false} maxColumns={columns} />
+	</div>
+</div>
+
+<style>
+	.gallery-wide {
+		display: none;
+	}
+	@container grid (width >= 42rem) {
+		.gallery-compact {
+			display: none;
+		}
+		.gallery-wide {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/sections/GallerySection/index.ts b/src/lib/sections/GallerySection/index.ts
new file mode 100644
index 0000000..0e53956
--- /dev/null
+++ b/src/lib/sections/GallerySection/index.ts
@@ -0,0 +1,34 @@
+import type { SectionDefinition } from '../types';
+import EditingGallerySection from './EditingGallerySection.svelte';
+import GallerySection from './GallerySection.svelte';
+
+export function defaultGallerySectionData(): Record<string, any> {
+	return {
+		columns: 3,
+		gap: 2
+	};
+}
+
+export const GallerySectionDefinition: SectionDefinition = {
+	type: 'gallery',
+	contentComponent: GallerySection,
+	editingContentComponent: EditingGallerySection,
+	defaultSectionData: defaultGallerySectionData,
+	cardFilter: (def) => def.type === 'image' || def.type === 'gif',
+	addItem: (item, allItems) => {
+		item.w = 2;
+		item.h = 2;
+		item.mobileW = 4;
+		item.mobileH = 4;
+		const sectionItems = allItems.filter((i) => i.sectionId === item.sectionId);
+		item.x = sectionItems.length;
+		item.y = 0;
+		item.mobileX = 0;
+		item.mobileY = sectionItems.length;
+		return [...allItems, item];
+	},
+	deleteItem: (itemId, allItems) => allItems.filter((i) => i.id !== itemId),
+	resizeItem: () => {},
+	name: 'Gallery',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`
+};
diff --git a/src/lib/sections/GridSection/EditingGridSection.svelte b/src/lib/sections/GridSection/EditingGridSection.svelte
index 7076126..d38ad67 100644
--- a/src/lib/sections/GridSection/EditingGridSection.svelte
+++ b/src/lib/sections/GridSection/EditingGridSection.svelte
@@ -4,8 +4,8 @@
 	import { EditableGrid, fixCollisions, compactItems, setPositionOfNewItem } from '$lib/layout';
 	import GridBaseEditingCard from '$lib/cards/_base/BaseCard/GridBaseEditingCard.svelte';
 	import EditingCard from '$lib/cards/_base/Card/EditingCard.svelte';
-	import { SectionDefinitionsByType } from '$lib/sections';
-	import { SECTIONS_EDITING_ENABLED } from '$lib/sections/feature-flag';
+	import SectionChrome from '../SectionChrome.svelte';
+	import { GRID_SECTION_ICON, GRID_SECTION_NAME } from './shared';
 	import { positionItemAtGridPos } from './add-item';
 
 	let {
@@ -28,7 +28,6 @@
 	let sectionItems = $derived(items.filter((i) => i.sectionId === section.id));
 
 	let hovered = $state(false);
-	const def = $derived(SectionDefinitionsByType[section.sectionType]);
 
 	$effect(() => {
 		onrefchange(gridRef);
@@ -85,24 +84,12 @@
 	{ondeselect}
 	onfiledrop={handleFileDrop}
 >
-	{#if SECTIONS_EDITING_ENABLED && (hovered || isActive)}
-		<div
-			class="pointer-events-none absolute inset-0 z-30 rounded-3xl border-2 border-dashed transition-colors duration-150 {isActive
-				? 'border-accent-500/50'
-				: 'border-base-400/30 dark:border-base-500/30'}"
-		>
-			<div
-				class="bg-base-100/80 dark:bg-base-900/80 absolute -top-3 left-4 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm {isActive
-					? 'text-accent-600 dark:text-accent-400'
-					: 'text-base-500 dark:text-base-400'}"
-			>
-				{#if def?.icon}
-					<span class="[&_svg]:size-3">{@html def.icon}</span>
-				{/if}
-				{section.name || def?.name || section.sectionType}
-			</div>
-		</div>
-	{/if}
+	<SectionChrome
+		{isActive}
+		{hovered}
+		name={section.name || GRID_SECTION_NAME}
+		icon={GRID_SECTION_ICON}
+	/>
 
 	{#if sectionItems.length === 0}
 		<div
diff --git a/src/lib/sections/GridSection/index.ts b/src/lib/sections/GridSection/index.ts
index 734e8f0..a249d5b 100644
--- a/src/lib/sections/GridSection/index.ts
+++ b/src/lib/sections/GridSection/index.ts
@@ -4,6 +4,9 @@ import type { SectionDefinition } from '../types';
 import { addItemToGridSection } from './add-item';
 import EditingGridSection from './EditingGridSection.svelte';
 import GridSection from './GridSection.svelte';
+import { GRID_SECTION_NAME, GRID_SECTION_ICON } from './shared';
+
+export * from './shared';
 
 function getSectionItems(allItems: Item[], sectionId: string) {
 	return allItems.filter((i) => i.sectionId === sectionId);
@@ -32,6 +35,6 @@ export const GridSectionDefinition: SectionDefinition = {
 		const sectionItems = getSectionItems(allItems, item.sectionId!);
 		fixCollisions(sectionItems, item, isMobile);
 	},
-	name: 'Grid',
-	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>`
+	name: GRID_SECTION_NAME,
+	icon: GRID_SECTION_ICON
 };
diff --git a/src/lib/sections/GridSection/shared.ts b/src/lib/sections/GridSection/shared.ts
new file mode 100644
index 0000000..bfc4fbf
--- /dev/null
+++ b/src/lib/sections/GridSection/shared.ts
@@ -0,0 +1,2 @@
+export const GRID_SECTION_NAME = 'Grid';
+export const GRID_SECTION_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>`;
diff --git a/src/lib/sections/HeroSection/Decoration.svelte b/src/lib/sections/HeroSection/Decoration.svelte
index fe03153..8b2741a 100644
--- a/src/lib/sections/HeroSection/Decoration.svelte
+++ b/src/lib/sections/HeroSection/Decoration.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DecorationSlot } from '.';
+	import type { DecorationSlot } from './shared';
 	import type { Item } from '$lib/types';
 	import Card from '$lib/cards/_base/Card/Card.svelte';
 	import EditingCard from '$lib/cards/_base/Card/EditingCard.svelte';
@@ -24,10 +24,12 @@
 	const selectedCardId = getSelectedCardId();
 	let isSelected = $derived(!!item && selectedCardId?.() === item.id);
 
+	let rotation = $derived(item?.rotation ?? slot.rotation ?? 0);
+
 	const sideStyle = $derived(
 		slot.side === 'left'
-			? `left: 0; transform: translate(calc(-1 * var(--tx)), -50%) rotate(${slot.rotation ?? 0}deg);`
-			: `right: 0; transform: translate(var(--tx), -50%) rotate(${slot.rotation ?? 0}deg);`
+			? `left: 0; transform: translate(calc(-1 * var(--tx)), -50%) rotate(${rotation}deg);`
+			: `right: 0; transform: translate(var(--tx), -50%) rotate(${rotation}deg);`
 	);
 </script>
 
diff --git a/src/lib/sections/HeroSection/EditingHeroSection.svelte b/src/lib/sections/HeroSection/EditingHeroSection.svelte
index ad7cb85..f451cb1 100644
--- a/src/lib/sections/HeroSection/EditingHeroSection.svelte
+++ b/src/lib/sections/HeroSection/EditingHeroSection.svelte
@@ -15,13 +15,15 @@
 	import type { EditingSectionContentProps } from '../types';
 	import {
 		DEFAULT_DECORATION_SLOTS,
-		canFitInSlot,
 		getSlotAssignments,
 		getSlotItem,
 		heroAlignClasses,
 		heroVerticalAlignClasses
-	} from '.';
+	} from './shared';
 	import Decoration from './Decoration.svelte';
+	import SectionChrome from '../SectionChrome.svelte';
+
+	const heroIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 10h10"/><path d="M7 14h6"/></svg>`;
 
 	let {
 		section,
@@ -142,34 +144,9 @@
 	bind:this={containerRef}
 	class="@container/grid pointer-events-auto relative col-span-3 flex min-h-[calc(100dvh-4rem)] flex-col overflow-visible px-2 py-10 lg:px-8"
 >
-	{#if hovered || isActive}
-		<div
-			class="pointer-events-none absolute inset-0 z-30 rounded-3xl border-2 border-dashed transition-colors duration-150 {isActive
-				? 'border-accent-500/50'
-				: 'border-base-400/30 dark:border-base-500/30'}"
-		>
-			<div
-				class="bg-base-100/80 dark:bg-base-900/80 absolute -top-3 left-4 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm {isActive
-					? 'text-accent-600 dark:text-accent-400'
-					: 'text-base-500 dark:text-base-400'}"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="size-3"
-					><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 10h10" /><path
-						d="M7 14h6"
-					/></svg
-				>
-				Hero
-			</div>
-		</div>
+	<SectionChrome {isActive} {hovered} name={section.name || 'Hero'} icon={heroIcon} />
 
+	{#if hovered || isActive}
 		<div class="pointer-events-auto absolute -top-3 right-4 z-40">
 			<Popover bind:open={settingsOpen}>
 				{#snippet child({ props })}
diff --git a/src/lib/sections/HeroSection/HeroSection.svelte b/src/lib/sections/HeroSection/HeroSection.svelte
index 1468cd6..6fd7a6e 100644
--- a/src/lib/sections/HeroSection/HeroSection.svelte
+++ b/src/lib/sections/HeroSection/HeroSection.svelte
@@ -11,7 +11,7 @@
 		getSlotItem,
 		heroAlignClasses,
 		heroVerticalAlignClasses
-	} from '.';
+	} from './shared';
 	import Decoration from './Decoration.svelte';
 
 	let { section, items }: SectionContentProps = $props();
diff --git a/src/lib/sections/HeroSection/index.ts b/src/lib/sections/HeroSection/index.ts
index 197e06d..bf40428 100644
--- a/src/lib/sections/HeroSection/index.ts
+++ b/src/lib/sections/HeroSection/index.ts
@@ -1,69 +1,10 @@
-import type { Item, SectionRecord } from '$lib/types';
+import type { Item } from '$lib/types';
 import type { SectionDefinition } from '../types';
 import EditingHeroSection from './EditingHeroSection.svelte';
 import HeroSection from './HeroSection.svelte';
+import { DEFAULT_DECORATION_SLOTS, canFitInSlot, defaultHeroSectionData } from './shared';
 
-export type DecorationSlot = {
-	id: string;
-	side: 'left' | 'right';
-	top: number;
-	rotation: number;
-};
-
-export const DEFAULT_DECORATION_SLOTS: DecorationSlot[] = [
-	{ id: 'slot-l-0', side: 'left', top: 15, rotation: -10 },
-	{ id: 'slot-l-1', side: 'left', top: 50, rotation: -4 },
-	{ id: 'slot-l-2', side: 'left', top: 82, rotation: -12 },
-	{ id: 'slot-r-0', side: 'right', top: 18, rotation: 8 },
-	{ id: 'slot-r-1', side: 'right', top: 52, rotation: -12 },
-	{ id: 'slot-r-2', side: 'right', top: 80, rotation: 6 }
-];
-
-export function getSlotAssignments(sectionData: Record<string, any>): Record<string, string> {
-	return (sectionData.slotAssignments as Record<string, string>) ?? {};
-}
-
-export function getSlotItem(
-	slot: DecorationSlot,
-	assignments: Record<string, string>,
-	items: Item[]
-): Item | undefined {
-	const itemId = assignments[slot.id];
-	if (!itemId) return undefined;
-	return items.find((i) => i.id === itemId);
-}
-
-export function canFitInSlot(cardDef: { minW?: number; minH?: number }): boolean {
-	return (cardDef.minW ?? 2) <= 2 && (cardDef.minH ?? 2) <= 2;
-}
-
-export function defaultHeroSectionData(): Record<string, any> {
-	return {
-		title: 'My cool website',
-		subtitle: 'A little something about me, what I do, and why you should stick around.',
-		badge: 'Welcome',
-		buttonText: 'Say hi',
-		buttonHref: '',
-		showBadge: true,
-		showSubtitle: true,
-		showButton: true,
-		textAlign: 'center',
-		verticalAlign: 'center',
-		slotAssignments: {}
-	};
-}
-
-export const heroAlignClasses: Record<string, string> = {
-	left: 'text-left items-start',
-	center: 'text-center items-center',
-	right: 'text-right items-end'
-};
-
-export const heroVerticalAlignClasses: Record<string, string> = {
-	top: 'justify-start',
-	center: 'justify-center',
-	bottom: 'justify-end'
-};
+export * from './shared';
 
 export const HeroSectionDefinition: SectionDefinition = {
 	type: 'hero',
@@ -71,19 +12,23 @@ export const HeroSectionDefinition: SectionDefinition = {
 	editingContentComponent: EditingHeroSection,
 	defaultSectionData: defaultHeroSectionData,
 	cardFilter: canFitInSlot,
+	allowRotate: true,
 	addItem: (item: Item, allItems: Item[], options) => {
 		item.w = 2;
 		item.h = 2;
 		item.mobileW = 2;
 		item.mobileH = 2;
-		if (options.extraData?.slotId) {
-			item.cardData._slotId = options.extraData.slotId;
+		const slotId = options.extraData?.slotId;
+		if (slotId) {
+			item.cardData._slotId = slotId;
+			const slot = DEFAULT_DECORATION_SLOTS.find((s) => s.id === slotId);
+			if (slot && item.rotation === undefined) {
+				item.rotation = slot.rotation;
+			}
 		}
 		return [...allItems, item];
 	},
-	deleteItem: (itemId: string, allItems: Item[]) => {
-		return allItems.filter((i) => i.id !== itemId);
-	},
+	deleteItem: (itemId: string, allItems: Item[]) => allItems.filter((i) => i.id !== itemId),
 	resizeItem: () => {},
 	name: 'Hero',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 10h10"/><path d="M7 14h6"/></svg>`
diff --git a/src/lib/sections/HeroSection/shared.ts b/src/lib/sections/HeroSection/shared.ts
new file mode 100644
index 0000000..5c2c964
--- /dev/null
+++ b/src/lib/sections/HeroSection/shared.ts
@@ -0,0 +1,63 @@
+import type { Item } from '$lib/types';
+
+export type DecorationSlot = {
+	id: string;
+	side: 'left' | 'right';
+	top: number;
+	rotation: number;
+};
+
+export const DEFAULT_DECORATION_SLOTS: DecorationSlot[] = [
+	{ id: 'slot-l-0', side: 'left', top: 15, rotation: -10 },
+	{ id: 'slot-l-1', side: 'left', top: 50, rotation: -4 },
+	{ id: 'slot-l-2', side: 'left', top: 82, rotation: -12 },
+	{ id: 'slot-r-0', side: 'right', top: 18, rotation: 8 },
+	{ id: 'slot-r-1', side: 'right', top: 52, rotation: -12 },
+	{ id: 'slot-r-2', side: 'right', top: 80, rotation: 6 }
+];
+
+export function getSlotAssignments(sectionData: Record<string, any>): Record<string, string> {
+	return (sectionData.slotAssignments as Record<string, string>) ?? {};
+}
+
+export function getSlotItem(
+	slot: DecorationSlot,
+	assignments: Record<string, string>,
+	items: Item[]
+): Item | undefined {
+	const itemId = assignments[slot.id];
+	if (!itemId) return undefined;
+	return items.find((i) => i.id === itemId);
+}
+
+export function canFitInSlot(cardDef: { minW?: number; minH?: number }): boolean {
+	return (cardDef.minW ?? 2) <= 2 && (cardDef.minH ?? 2) <= 2;
+}
+
+export function defaultHeroSectionData(): Record<string, any> {
+	return {
+		title: 'My cool website',
+		subtitle: 'A little something about me, what I do, and why you should stick around.',
+		badge: 'Welcome',
+		buttonText: 'Say hi',
+		buttonHref: '',
+		showBadge: true,
+		showSubtitle: true,
+		showButton: true,
+		textAlign: 'center',
+		verticalAlign: 'center',
+		slotAssignments: {}
+	};
+}
+
+export const heroAlignClasses: Record<string, string> = {
+	left: 'text-left items-start',
+	center: 'text-center items-center',
+	right: 'text-right items-end'
+};
+
+export const heroVerticalAlignClasses: Record<string, string> = {
+	top: 'justify-start',
+	center: 'justify-center',
+	bottom: 'justify-end'
+};
diff --git a/src/lib/sections/RowSection/EditingRowSection.svelte b/src/lib/sections/RowSection/EditingRowSection.svelte
new file mode 100644
index 0000000..90b98d3
--- /dev/null
+++ b/src/lib/sections/RowSection/EditingRowSection.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import BaseEditingCard from '$lib/cards/_base/BaseCard/BaseEditingCard.svelte';
+	import EditingCard from '$lib/cards/_base/Card/EditingCard.svelte';
+	import type { EditingSectionContentProps } from '../types';
+	import SectionChrome from '../SectionChrome.svelte';
+
+	let {
+		section,
+		items = $bindable(),
+		isActive,
+		onlayoutchange,
+		onrequestaddcard,
+		onactivate,
+		onrefchange
+	}: EditingSectionContentProps = $props();
+
+	let sectionItems = $derived(
+		items.filter((i) => i.sectionId === section.id).toSorted((a, b) => a.x - b.x)
+	);
+
+	let containerRef: HTMLDivElement | undefined = $state();
+	let hovered = $state(false);
+
+	$effect(() => {
+		onrefchange(containerRef);
+		return () => onrefchange(undefined);
+	});
+
+	$effect(() => {
+		const el = containerRef;
+		if (!el) return;
+		const enter = () => (hovered = true);
+		const leave = () => (hovered = false);
+		const down = () => onactivate();
+		el.addEventListener('pointerenter', enter);
+		el.addEventListener('pointerleave', leave);
+		el.addEventListener('pointerdown', down);
+		return () => {
+			el.removeEventListener('pointerenter', enter);
+			el.removeEventListener('pointerleave', leave);
+			el.removeEventListener('pointerdown', down);
+		};
+	});
+
+	function deleteItem(id: string) {
+		items = items.filter((i) => i.id !== id);
+		onlayoutchange();
+	}
+
+	const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="8" width="5" height="8" rx="1"/><rect x="10" y="8" width="5" height="8" rx="1"/><rect x="17" y="8" width="5" height="8" rx="1"/></svg>`;
+</script>
+
+<div
+	bind:this={containerRef}
+	class="@container/grid pointer-events-auto relative col-span-3 px-0 py-4"
+>
+	<SectionChrome {isActive} {hovered} name={section.name || 'Row'} {icon} />
+
+	<div class="overflow-x-auto pt-4 pb-14">
+		<div class="flex items-stretch gap-4 px-2">
+			{#each sectionItems as item (item.id)}
+				{@const idx = items.indexOf(item)}
+				<div
+					class="aspect-square w-40 flex-shrink-0 sm:w-48"
+					style={item.rotation ? `transform: rotate(${item.rotation}deg);` : ''}
+				>
+					<BaseEditingCard
+						bind:item={items[idx]}
+						ondelete={() => deleteItem(item.id)}
+						showGridControls={false}
+					>
+						<EditingCard bind:item={items[idx]} />
+					</BaseEditingCard>
+				</div>
+			{/each}
+
+			<button
+				type="button"
+				class="border-base-400/60 dark:border-base-500/60 hover:border-accent-500 hover:bg-accent-500/10 text-base-500 dark:text-base-400 hover:text-accent-600 dark:hover:text-accent-400 flex aspect-square w-40 flex-shrink-0 cursor-pointer flex-col items-center justify-center gap-1 rounded-3xl border-2 border-dashed transition-all duration-150 hover:scale-[1.02] sm:w-48"
+				onclick={() => onrequestaddcard()}
+				aria-label="Add card"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="size-6"
+				>
+					<path d="M12 5v14" />
+					<path d="M5 12h14" />
+				</svg>
+				<span class="text-xs font-medium">Add card</span>
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/sections/RowSection/RowSection.svelte b/src/lib/sections/RowSection/RowSection.svelte
new file mode 100644
index 0000000..841d6c3
--- /dev/null
+++ b/src/lib/sections/RowSection/RowSection.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte';
+	import Card from '$lib/cards/_base/Card/Card.svelte';
+	import type { SectionContentProps } from '../types';
+
+	let { section, items }: SectionContentProps = $props();
+
+	let sectionItems = $derived(
+		items.filter((i) => i.sectionId === section.id).toSorted((a, b) => a.x - b.x)
+	);
+</script>
+
+<div class="@container/grid relative col-span-3 px-0 py-8">
+	<div class="overflow-x-auto">
+		<div class="flex gap-4 px-2">
+			{#each sectionItems as item (item.id)}
+				<div
+					class="aspect-square w-40 flex-shrink-0 sm:w-48"
+					style={item.rotation ? `transform: rotate(${item.rotation}deg);` : ''}
+				>
+					<BaseCard {item}>
+						<Card {item} />
+					</BaseCard>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/src/lib/sections/RowSection/index.ts b/src/lib/sections/RowSection/index.ts
new file mode 100644
index 0000000..d567b77
--- /dev/null
+++ b/src/lib/sections/RowSection/index.ts
@@ -0,0 +1,34 @@
+import type { SectionDefinition } from '../types';
+import EditingRowSection from './EditingRowSection.svelte';
+import RowSection from './RowSection.svelte';
+
+export function defaultRowSectionData(): Record<string, any> {
+	return {
+		scrollMode: 'scroll' // 'scroll' | 'fit'
+	};
+}
+
+export const RowSectionDefinition: SectionDefinition = {
+	type: 'row',
+	contentComponent: RowSection,
+	editingContentComponent: EditingRowSection,
+	defaultSectionData: defaultRowSectionData,
+	cardFilter: (def) => (def.minW ?? 2) <= 2 && (def.minH ?? 2) <= 2,
+	allowRotate: true,
+	addItem: (item, allItems) => {
+		item.w = 2;
+		item.h = 2;
+		item.mobileW = 4;
+		item.mobileH = 4;
+		const sectionItems = allItems.filter((i) => i.sectionId === item.sectionId);
+		item.x = sectionItems.length;
+		item.y = 0;
+		item.mobileX = 0;
+		item.mobileY = sectionItems.length;
+		return [...allItems, item];
+	},
+	deleteItem: (itemId, allItems) => allItems.filter((i) => i.id !== itemId),
+	resizeItem: () => {},
+	name: 'Row',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="8" width="5" height="8" rx="1"/><rect x="10" y="8" width="5" height="8" rx="1"/><rect x="17" y="8" width="5" height="8" rx="1"/></svg>`
+};
diff --git a/src/lib/sections/SectionChrome.svelte b/src/lib/sections/SectionChrome.svelte
new file mode 100644
index 0000000..cee6d3c
--- /dev/null
+++ b/src/lib/sections/SectionChrome.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { SECTIONS_EDITING_ENABLED } from './feature-flag';
+
+	let {
+		isActive,
+		hovered,
+		name,
+		icon
+	}: {
+		isActive: boolean;
+		hovered: boolean;
+		name: string;
+		icon?: string;
+	} = $props();
+</script>
+
+{#if SECTIONS_EDITING_ENABLED && (hovered || isActive)}
+	<div
+		class="pointer-events-none absolute inset-0 z-30 rounded-3xl border-2 border-dashed transition-colors duration-150 {isActive
+			? 'border-accent-500/50'
+			: 'border-base-400/30 dark:border-base-500/30'}"
+	>
+		<div
+			class="bg-base-100/80 dark:bg-base-900/80 absolute -bottom-3 left-4 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm {isActive
+				? 'text-accent-600 dark:text-accent-400'
+				: 'text-base-500 dark:text-base-400'}"
+		>
+			{#if icon}
+				<span class="[&_svg]:size-3">{@html icon}</span>
+			{/if}
+			{name}
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/sections/TextSection/EditingTextSection.svelte b/src/lib/sections/TextSection/EditingTextSection.svelte
new file mode 100644
index 0000000..a9d567f
--- /dev/null
+++ b/src/lib/sections/TextSection/EditingTextSection.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
+	import type { EditingSectionContentProps } from '../types';
+	import { textAlignClasses, textSizeClasses } from './shared';
+	import SectionChrome from '../SectionChrome.svelte';
+
+	let { section, isActive, onlayoutchange, onactivate, onrefchange }: EditingSectionContentProps =
+		$props();
+
+	let d = $derived(section.sectionData);
+	let containerRef: HTMLDivElement | undefined = $state();
+	let hovered = $state(false);
+
+	$effect(() => {
+		onrefchange(containerRef);
+		return () => onrefchange(undefined);
+	});
+
+	$effect(() => {
+		const el = containerRef;
+		if (!el) return;
+		const enter = () => (hovered = true);
+		const leave = () => (hovered = false);
+		const down = () => onactivate();
+		el.addEventListener('pointerenter', enter);
+		el.addEventListener('pointerleave', leave);
+		el.addEventListener('pointerdown', down);
+		return () => {
+			el.removeEventListener('pointerenter', enter);
+			el.removeEventListener('pointerleave', leave);
+			el.removeEventListener('pointerdown', down);
+		};
+	});
+
+	function update(key: string, value: any) {
+		section.sectionData = { ...d, [key]: value };
+		onlayoutchange();
+	}
+
+	const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>`;
+</script>
+
+<div
+	bind:this={containerRef}
+	class="@container/grid pointer-events-auto relative col-span-3 px-4 py-10"
+>
+	<SectionChrome {isActive} {hovered} name={section.name || 'Text'} {icon} />
+
+	<div
+		class={cn(
+			'prose dark:prose-invert prose-neutral prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 mx-auto max-w-3xl',
+			textAlignClasses?.[d.textAlign as string] ?? 'text-left',
+			textSizeClasses[(d.textSize ?? 1) as number]
+		)}
+	>
+		<MarkdownTextEditor
+			contentDict={d}
+			key="text"
+			placeholder="Write some text..."
+			onupdate={(text) => update('text', text)}
+		/>
+	</div>
+</div>
diff --git a/src/lib/sections/TextSection/TextSection.svelte b/src/lib/sections/TextSection/TextSection.svelte
new file mode 100644
index 0000000..5a282f7
--- /dev/null
+++ b/src/lib/sections/TextSection/TextSection.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import { sanitize } from '$lib/sanitize';
+	import { cn } from '@foxui/core';
+	import type { SectionContentProps } from '../types';
+	import { textAlignClasses, textSizeClasses } from './shared';
+
+	let { section }: SectionContentProps = $props();
+
+	let d = $derived(section.sectionData);
+
+	const renderer = new marked.Renderer();
+	renderer.link = ({ href, title, text }) =>
+		`<a target="_blank" href="${href}" title="${title ?? ''}">${text}</a>`;
+</script>
+
+<div class="@container/grid relative col-span-3 px-4 py-10">
+	<div
+		class={cn(
+			'prose dark:prose-invert prose-neutral prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 mx-auto max-w-3xl',
+			textAlignClasses?.[d.textAlign as string] ?? 'text-left',
+			textSizeClasses[(d.textSize ?? 1) as number]
+		)}
+	>
+		{@html sanitize(marked.parse(d.text ?? '', { renderer }) as string, { ADD_ATTR: ['target'] })}
+	</div>
+</div>
diff --git a/src/lib/sections/TextSection/index.ts b/src/lib/sections/TextSection/index.ts
new file mode 100644
index 0000000..b2f079e
--- /dev/null
+++ b/src/lib/sections/TextSection/index.ts
@@ -0,0 +1,18 @@
+import type { SectionDefinition } from '../types';
+import EditingTextSection from './EditingTextSection.svelte';
+import TextSection from './TextSection.svelte';
+import { defaultTextSectionData } from './shared';
+
+export * from './shared';
+
+export const TextSectionDefinition: SectionDefinition = {
+	type: 'text',
+	contentComponent: TextSection,
+	editingContentComponent: EditingTextSection,
+	defaultSectionData: defaultTextSectionData,
+	addItem: (_item, allItems) => allItems,
+	deleteItem: (_itemId, allItems) => allItems,
+	resizeItem: () => {},
+	name: 'Text',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>`
+};
diff --git a/src/lib/sections/TextSection/shared.ts b/src/lib/sections/TextSection/shared.ts
new file mode 100644
index 0000000..59578b4
--- /dev/null
+++ b/src/lib/sections/TextSection/shared.ts
@@ -0,0 +1,15 @@
+export const textAlignClasses: Record<string, string> = {
+	left: 'text-left',
+	center: 'text-center',
+	right: 'text-right'
+};
+
+export const textSizeClasses = ['prose-sm', 'prose-base', 'prose-lg', 'prose-xl'];
+
+export function defaultTextSectionData(): Record<string, any> {
+	return {
+		text: '## A heading\n\nWrite some **markdown** here. Links like [this one](https://blento.app) work too.',
+		textAlign: 'left',
+		textSize: 1
+	};
+}
diff --git a/src/lib/sections/feature-flag.ts b/src/lib/sections/feature-flag.ts
index 7227cd6..1ca99f4 100644
--- a/src/lib/sections/feature-flag.ts
+++ b/src/lib/sections/feature-flag.ts
@@ -1,3 +1,4 @@
+import { dev } from '$app/environment';
 import { env } from '$env/dynamic/public';
 
 /**
diff --git a/src/lib/sections/index.ts b/src/lib/sections/index.ts
index e2641d4..69befd5 100644
--- a/src/lib/sections/index.ts
+++ b/src/lib/sections/index.ts
@@ -1,8 +1,17 @@
 import type { SectionDefinition } from './types';
 import { GridSectionDefinition } from './GridSection';
 import { HeroSectionDefinition } from './HeroSection';
+import { TextSectionDefinition } from './TextSection';
+import { RowSectionDefinition } from './RowSection';
+import { GallerySectionDefinition } from './GallerySection';
 
-export const AllSectionDefinitions = [GridSectionDefinition, HeroSectionDefinition] as const;
+export const AllSectionDefinitions = [
+	GridSectionDefinition,
+	HeroSectionDefinition,
+	TextSectionDefinition,
+	RowSectionDefinition,
+	GallerySectionDefinition
+] as const;
 
 export const SectionDefinitionsByType = AllSectionDefinitions.reduce(
 	(acc, def) => {
diff --git a/src/lib/sections/types.ts b/src/lib/sections/types.ts
index 848b97f..7a9cfdf 100644
--- a/src/lib/sections/types.ts
+++ b/src/lib/sections/types.ts
@@ -32,6 +32,7 @@ export type SectionDefinition = {
 	editingContentComponent: Component<EditingSectionContentProps>;
 	defaultSectionData?: () => Record<string, any>;
 	cardFilter?: (cardDef: CardDefinition) => boolean;
+	allowRotate?: boolean;
 	addItem: (item: Item, allItems: Item[], options: AddItemOptions) => Item[];
 	deleteItem: (itemId: string, allItems: Item[], sectionId: string) => Item[];
 	resizeItem: (item: Item, allItems: Item[], w: number, h: number, isMobile: boolean) => void;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index d5fbd41..55c7c44 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -27,6 +27,8 @@ export type Item = {
 	page?: string;
 
 	sectionId?: string;
+
+	rotation?: number;
 };
 
 export type PronounSet = {
diff --git a/src/lib/website/EditBar.svelte b/src/lib/website/EditBar.svelte
index 6fbf552..43b6599 100644
--- a/src/lib/website/EditBar.svelte
+++ b/src/lib/website/EditBar.svelte
@@ -30,6 +30,8 @@
 		ondeselect,
 		ondelete,
 		onsetsize,
+		allowRotate = false,
+		onrotate,
 		showSectionsModal
 	}: {
 		data: WebsiteData;
@@ -54,6 +56,8 @@
 		ondeselect?: () => void;
 		ondelete?: () => void;
 		onsetsize?: (w: number, h: number) => void;
+		allowRotate?: boolean;
+		onrotate?: (delta: number) => void;
 		showSectionsModal?: () => void;
 	} = $props();
 
@@ -130,6 +134,14 @@
 		return w >= minW && w <= maxW && h >= minH && h <= maxH;
 	}
 
+	function setSize(w: number, h: number) {
+		if (isMobile) {
+			onsetsize?.(w * 2, h * 2);
+		} else {
+			onsetsize?.(w, h);
+		}
+	}
+
 	const showEditControls = $derived(!!selectedCard);
 </script>
 
@@ -144,211 +156,279 @@
 />
 
 {#if dev || (user.isLoggedIn && user.profile?.did === data.did)}
-	<Navbar
-		class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto"
-	>
+	<div class="fixed right-0 bottom-2 left-0 z-50 flex flex-col items-center gap-1.5 px-4">
 		{#if showEditControls}
-			<!-- Mobile edit controls: left = color, size, settings; right = delete, deselect -->
-			<div class="flex items-center gap-1">
-				{#if cardDef?.allowSetColor !== false}
-					<Popover bind:open={colorPopoverOpen}>
+			<Navbar
+				class="dark:bg-base-950 bg-base-100 relative top-auto mx-8 mt-0 h-11 w-[calc(100%-4rem)] max-w-2xl rounded-full px-4"
+			>
+				<div class="flex items-center gap-0.5">
+					{#if cardDef?.allowSetColor !== false}
+						<Popover bind:open={colorPopoverOpen}>
+							{#snippet child({ props })}
+								<button
+									{...props}
+									class={[
+										'cursor-pointer rounded-lg p-1',
+										selectedColor?.class ?? 'text-base-800 dark:text-base-200'
+									]}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+							{/snippet}
+							<ColorSelect
+								selected={selectedColor}
+								colors={colorsChoices}
+								onselected={(color, previous) => {
+									if (typeof previous === 'string' || typeof color === 'string') {
+										return;
+									}
+									if (selectedCard) {
+										selectedCard.color = color.label;
+									}
+								}}
+								class="w-64"
+							/>
+						</Popover>
+					{/if}
+
+					<Popover bind:open={sizePopoverOpen}>
 						{#snippet child({ props })}
-							<button
-								{...props}
-								class={[
-									'cursor-pointer rounded-xl p-2',
-									!selectedCard?.color ||
-									selectedCard.color === 'base' ||
-									selectedCard.color === 'transparent'
-										? 'text-base-800 dark:text-base-200'
-										: 'text-accent-500'
-								]}
-							>
+							<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-lg p-1">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
 									viewBox="0 0 24 24"
-									fill="currentColor"
-									class="size-5"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="size-4"
 								>
 									<path
-										fill-rule="evenodd"
-										d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
-										clip-rule="evenodd"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
 									/>
 								</svg>
 							</button>
 						{/snippet}
-						<ColorSelect
-							selected={selectedColor}
-							colors={colorsChoices}
-							onselected={(color, previous) => {
-								if (typeof previous === 'string' || typeof color === 'string') {
-									return;
-								}
-								if (selectedCard) {
-									selectedCard.color = color.label;
-								}
-							}}
-							class="w-64"
-						/>
+						<div class="flex items-center gap-1">
+							{#if canSetSize(2, 2)}
+								<button
+									onclick={() => setSize(2, 2)}
+									class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+								>
+									<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
+									<span class="sr-only">set size to 1x1</span>
+								</button>
+							{/if}
+							{#if canSetSize(4, 2)}
+								<button
+									onclick={() => setSize(4, 2)}
+									class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+								>
+									<div
+										class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"
+									></div>
+									<span class="sr-only">set size to 2x1</span>
+								</button>
+							{/if}
+							{#if canSetSize(2, 4)}
+								<button
+									onclick={() => setSize(2, 4)}
+									class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+								>
+									<div
+										class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"
+									></div>
+									<span class="sr-only">set size to 1x2</span>
+								</button>
+							{/if}
+							{#if canSetSize(4, 4)}
+								<button
+									onclick={() => setSize(4, 4)}
+									class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+								>
+									<div
+										class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"
+									></div>
+									<span class="sr-only">set size to 2x2</span>
+								</button>
+							{/if}
+						</div>
 					</Popover>
-				{/if}
 
-				<Popover bind:open={sizePopoverOpen}>
-					{#snippet child({ props })}
-						<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
+					{#if cardDef?.settingsComponent && selectedCard}
+						<Popover bind:open={settingsPopoverOpen} class="bg-base-50 dark:bg-base-900">
+							{#snippet child({ props })}
+								<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-lg p-1">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										/>
+									</svg>
+								</button>
+							{/snippet}
+							<cardDef.settingsComponent
+								bind:item={selectedCard}
+								onclose={() => {
+									settingsPopoverOpen = false;
+								}}
+							/>
+						</Popover>
+					{/if}
+
+					{#if allowRotate}
+						<button
+							onclick={() => onrotate?.(-2)}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-lg p-1"
+							aria-label="Rotate -2°"
+						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
 								viewBox="0 0 24 24"
-								stroke-width="1.5"
+								fill="none"
 								stroke="currentColor"
-								class="size-5"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="size-4"
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-								/>
+								<path d="M3 7v6h6" />
+								<path d="M21 17a9 9 0 0 0-15-6.7L3 13" />
 							</svg>
 						</button>
-					{/snippet}
-					<div class="flex items-center gap-1">
-						{#if canSetSize(2, 2)}
-							<button
-								onclick={() => onsetsize?.(4, 4)}
-								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-							>
-								<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
-								<span class="sr-only">set size to 1x1</span>
-							</button>
-						{/if}
-						{#if canSetSize(4, 2)}
-							<button
-								onclick={() => onsetsize?.(8, 4)}
-								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-							>
-								<div class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"></div>
-								<span class="sr-only">set size to 2x1</span>
-							</button>
-						{/if}
-						{#if canSetSize(2, 4)}
-							<button
-								onclick={() => onsetsize?.(4, 8)}
-								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-							>
-								<div class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"></div>
-								<span class="sr-only">set size to 1x2</span>
-							</button>
-						{/if}
-						{#if canSetSize(4, 4)}
-							<button
-								onclick={() => onsetsize?.(8, 8)}
-								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+						<button
+							onclick={() => onrotate?.(2)}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-lg p-1"
+							aria-label="Rotate +2°"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="size-4"
 							>
-								<div class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"></div>
-								<span class="sr-only">set size to 2x2</span>
-							</button>
-						{/if}
-					</div>
-				</Popover>
-
-				{#if cardDef?.settingsComponent && selectedCard}
-					<Popover bind:open={settingsPopoverOpen} class="bg-base-50 dark:bg-base-900">
-						{#snippet child({ props })}
-							<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="2"
-									stroke="currentColor"
-									class="size-5"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
-									/>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-									/>
-								</svg>
-							</button>
-						{/snippet}
-						<cardDef.settingsComponent
-							bind:item={selectedCard}
-							onclose={() => {
-								settingsPopoverOpen = false;
-							}}
-						/>
-					</Popover>
-				{/if}
-			</div>
-			<div class="flex items-center gap-1">
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="text-rose-500 backdrop-blur-none"
-					onclick={() => ondelete?.()}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-5"
+								<path d="M21 7v6h-6" />
+								<path d="M3 17a9 9 0 0 1 15-6.7L21 13" />
+							</svg>
+						</button>
+					{/if}
+				</div>
+				<div class="flex items-center gap-0.5">
+					<Button
+						size="icon"
+						variant="ghost"
+						class="text-rose-500 backdrop-blur-none"
+						onclick={() => ondelete?.()}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-						/>
-					</svg>
-				</Button>
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => ondeselect?.()}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-						class="size-5"
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+							/>
+						</svg>
+					</Button>
+					<Button
+						size="icon"
+						variant="ghost"
+						class="backdrop-blur-none"
+						onclick={() => ondeselect?.()}
 					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-					</svg>
-				</Button>
-			</div>
-		{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-4"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+						</svg>
+					</Button>
+				</div>
+			</Navbar>
+		{/if}
+
+		<Navbar
+			class="dark:bg-base-950 bg-base-100 relative top-auto mt-0 h-13 w-full max-w-3xl rounded-full px-4"
+		>
 			<div class="flex items-center gap-2">
-				<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
+				<Button size="icon" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
+						class="size-4"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 					</svg>
 				</Button>
 			</div>
-		{/if}
-		<div class={['flex items-center gap-2', showEditControls ? 'hidden' : '']}>
-			{#if showSectionsModal}
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={showSectionsModal}
+			<div class="flex items-center gap-2">
+				{#if showSectionsModal}
+					<Button
+						size="icon"
+						variant="ghost"
+						class="backdrop-blur-none"
+						onclick={showSectionsModal}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="size-4"
+						>
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<path d="M3 9h18" />
+							<path d="M3 15h18" />
+						</svg>
+					</Button>
+				{/if}
+				<Toggle
+					class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent"
+					bind:pressed={showingMobileView}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -360,56 +440,38 @@
 						stroke-linejoin="round"
 						class="size-5"
 					>
-						<rect x="3" y="3" width="18" height="18" rx="2" />
-						<path d="M3 9h18" />
-						<path d="M3 15h18" />
+						<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+						<path d="M12 18h.01" />
 					</svg>
-				</Button>
-			{/if}
-			<Toggle
-				class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent"
-				bind:pressed={showingMobileView}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="size-7"
-				>
-					<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
-					<path d="M12 18h.01" />
-				</svg>
-			</Toggle>
-			{#if hasUnsavedChanges}
-				<Button
-					disabled={isSaving}
-					onclick={async () => {
-						save();
-					}}>{isSaving ? 'Saving...' : 'Save'}</Button
-				>
-			{:else}
-				<Button onclick={copyShareLink}>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-						class="size-5"
+				</Toggle>
+				{#if hasUnsavedChanges}
+					<Button
+						size="sm"
+						disabled={isSaving}
+						onclick={async () => {
+							save();
+						}}>{isSaving ? 'Saving...' : 'Save'}</Button
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
-						/>
-					</svg>
-					Share
-				</Button>
-			{/if}
-		</div>
-	</Navbar>
+				{:else}
+					<Button size="sm" onclick={copyShareLink}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+							/>
+						</svg>
+						Share
+					</Button>
+				{/if}
+			</div>
+		</Navbar>
+	</div>
 {/if}
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index dfec3d6..d24925a 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -570,6 +570,19 @@
 				onLayoutChanged();
 			}
 		}}
+		allowRotate={(() => {
+			if (!selectedCard) return false;
+			const section = sections.find((s) => s.id === selectedCard.sectionId);
+			const def = section ? SectionDefinitionsByType[section.sectionType] : undefined;
+			const cardDef = CardDefinitionsByType[selectedCard.cardType];
+			return !!def?.allowRotate && cardDef?.allowRotate !== false;
+		})()}
+		onrotate={(delta: number) => {
+			if (selectedCard) {
+				selectedCard.rotation = (selectedCard.rotation ?? 0) + delta;
+				onLayoutChanged();
+			}
+		}}
 		showSectionsModal={SECTIONS_EDITING_ENABLED
 			? () => {
 					showSectionsModal = true;
diff --git a/src/lib/website/EmptyState.svelte b/src/lib/website/EmptyState.svelte
index 489b968..3c7aa4c 100644
--- a/src/lib/website/EmptyState.svelte
+++ b/src/lib/website/EmptyState.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte';
+	import GridBaseCard from '$lib/cards/_base/BaseCard/GridBaseCard.svelte';
 	import Card from '$lib/cards/_base/Card/Card.svelte';
 	import type { Item, WebsiteData } from '$lib/types';
-	import { text } from '@sveltejs/kit';
 
 	let { data }: { data: WebsiteData } = $props();
 
@@ -89,18 +88,13 @@
 	});
 
 	let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
-
-	let maxMobileHeight = $derived(
-		cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0)
-	);
 </script>
 
 {#each cards as item (item.id)}
-	<BaseCard {item}>
+	<GridBaseCard {item}>
 		<Card {item} />
-	</BaseCard>
+	</GridBaseCard>
 {/each}
 
 <!-- Spacer for grid height -->
-<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
-<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
+<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
diff --git a/src/lib/website/file-processing.ts b/src/lib/website/file-processing.ts
index 0851954..aecfa96 100644
--- a/src/lib/website/file-processing.ts
+++ b/src/lib/website/file-processing.ts
@@ -55,9 +55,12 @@ export async function createImageCard(file: File, page: string, sectionId?: stri
 
 	const item = createEmptyCard(page, sectionId);
 	item.cardType = isGif ? 'gif' : 'image';
-	item.cardData = { image: { blob: file, objectUrl } };
-
 	const { width, height } = await getImageDimensions(objectUrl);
+	item.cardData = {
+		image: { blob: file, objectUrl },
+		aspectRatio: { width, height }
+	};
+
 	const [dw, dh] = getBestGridSize(width, height, desktopSizeCandidates);
 	const [mw, mh] = getBestGridSize(width, height, mobileSizeCandidates);
 	item.w = dw;
diff --git a/src/lib/website/load.ts b/src/lib/website/load.ts
index ae5b977..ee908df 100644
--- a/src/lib/website/load.ts
+++ b/src/lib/website/load.ts
@@ -236,10 +236,31 @@ export async function loadData(
 		sectionRecords = contrailData.sections;
 		pageRecords = contrailData.pages;
 
-		const extracted = extractProfileData(did, contrailData.profiles);
-		profile = extracted.profile;
-		publication = extracted.publication;
-		pronounsRecord = extracted.pronounsRecord;
+		const hasBskyProfile = contrailData.profiles.some(
+			(p) => p.did === did && p.collection === 'app.bsky.actor.profile'
+		);
+
+		if (hasBskyProfile) {
+			const extracted = extractProfileData(did, contrailData.profiles);
+			profile = extracted.profile;
+			publication = extracted.publication;
+			pronounsRecord = extracted.pronounsRecord;
+		} else {
+			// Contrail didn't return profile data (e.g. no card records) — fetch from PDS
+			const [prof, mainPub, pronouns] = await Promise.all([
+				getDetailedProfile({ did }),
+				getSelfPublicationFromPDS(did),
+				getPronounsFromPDS(did)
+			]);
+			profile = prof;
+			publication = mainPub?.value as WebsiteData['publication'] | undefined;
+			pronounsRecord = pronouns;
+
+			// Still extract publication/pronouns from contrail if available
+			const extracted = extractProfileData(did, contrailData.profiles);
+			if (!publication) publication = extracted.publication;
+			if (!pronounsRecord) pronounsRecord = extracted.pronounsRecord;
+		}
 	} else {
 		// Fallback: no D1 available (e.g. vite dev) — use PDS directly
 		const [cardRecords, pageRecs, sectionRecs, mainPub, prof, pronouns] = await Promise.all([
@@ -330,10 +351,29 @@ export async function loadCardData(
 		cardValue = card;
 
 		if (profiles) {
-			const extracted = extractProfileData(did, profiles);
-			profile = extracted.profile;
-			publication = extracted.publication;
-			pronounsRecord = extracted.pronounsRecord;
+			const hasBskyProfile = profiles.some(
+				(p) => p.did === did && p.collection === 'app.bsky.actor.profile'
+			);
+			if (hasBskyProfile) {
+				const extracted = extractProfileData(did, profiles);
+				profile = extracted.profile;
+				publication = extracted.publication;
+				pronounsRecord = extracted.pronounsRecord;
+			} else {
+				// Contrail didn't return bsky profile — fetch from PDS
+				const [prof, mainPub, pronouns] = await Promise.all([
+					getDetailedProfile({ did }),
+					getSelfPublicationFromPDS(did),
+					getPronounsFromPDS(did)
+				]);
+				profile = prof;
+				publication = mainPub?.value as WebsiteData['publication'] | undefined;
+				pronounsRecord = pronouns;
+
+				const extracted = extractProfileData(did, profiles);
+				if (!publication) publication = extracted.publication;
+				if (!pronounsRecord) pronounsRecord = extracted.pronounsRecord;
+			}
 		}
 	}
 
@@ -419,10 +459,19 @@ export async function loadCardTypeData(
 	if (db) {
 		const profiles = await loadProfilesFromContrail(handle, db);
 		if (profiles) {
-			const extracted = extractProfileData(did, profiles);
-			profile = extracted.profile;
-			publication = extracted.publication;
-			pronounsRecord = extracted.pronounsRecord;
+			const hasBskyProfile = profiles.some(
+				(p) => p.did === did && p.collection === 'app.bsky.actor.profile'
+			);
+			if (hasBskyProfile) {
+				const extracted = extractProfileData(did, profiles);
+				profile = extracted.profile;
+				publication = extracted.publication;
+				pronounsRecord = extracted.pronounsRecord;
+			} else {
+				const extracted = extractProfileData(did, profiles);
+				publication = extracted.publication;
+				pronounsRecord = extracted.pronounsRecord;
+			}
 		}
 	}
 
@@ -433,8 +482,8 @@ export async function loadCardTypeData(
 			getPronounsFromPDS(did)
 		]);
 		profile = prof;
-		publication = pubRecord?.value as WebsiteData['publication'] | undefined;
-		pronounsRecord = pronouns;
+		if (!publication) publication = pubRecord?.value as WebsiteData['publication'] | undefined;
+		if (!pronounsRecord) pronounsRecord = pronouns;
 	}
 
 	if (!profile) throw error(404);
diff --git a/wrangler.jsonc b/wrangler.jsonc
index 03c258c..036969c 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -60,8 +60,8 @@
 		{
 			"binding": "DB",
 			"database_name": "blento",
-			"database_id": "922639e7-6321-42c8-a4bd-cdf48428fdac"
-			// "remote": true
+			"database_id": "922639e7-6321-42c8-a4bd-cdf48428fdac",
+			"remote": true
 		}
 	],
 	"triggers": {