diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 003711fc..a2b5d10d 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,34 +1,36 @@
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)",
-			"Bash(ls:*)",
-			"Bash(pnpm format:*)",
-			"Bash(pnpm add:*)",
-			"WebSearch",
-			"WebFetch(domain:github.com)",
-			"WebFetch(domain:flipclockjs.com)",
-			"WebFetch(domain:codepen.io)",
-			"WebFetch(domain:flo-bit.dev)",
-			"Bash(pnpm install)",
-			"Bash(pnpm install:*)",
-			"Bash(pnpm config:*)",
-			"Bash(lsof:*)",
-			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)",
-			"Bash(pnpm build:*)",
-			"Bash(pnpm remove:*)",
-			"Bash(grep:*)",
-			"Bash(find:*)",
-			"Bash(npx prettier:*)",
-			"Bash(node -e:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm format:*)",
+      "Bash(pnpm add:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:flipclockjs.com)",
+      "WebFetch(domain:codepen.io)",
+      "WebFetch(domain:flo-bit.dev)",
+      "Bash(pnpm install)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm config:*)",
+      "Bash(lsof:*)",
+      "Bash(pnpm dev)",
+      "Bash(pnpm exec svelte-kit:*)",
+      "Bash(pnpm build:*)",
+      "Bash(pnpm remove:*)",
+      "Bash(grep:*)",
+      "Bash(find:*)",
+      "Bash(npx prettier:*)",
+      "Bash(node -e:*)",
+      "mcp__plugin_svelte_svelte__get-documentation",
+      "WebFetch(domain:bits-ui.com)"
+    ]
+  }
 }
diff --git a/package.json b/package.json
index d889dbef..71c40663 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
 		"@foxui/social": "^0.4.7",
 		"@foxui/time": "^0.4.7",
 		"@foxui/visual": "^0.4.7",
+		"@internationalized/date": "^3.11.0",
 		"@number-flow/svelte": "^0.3.10",
 		"@tailwindcss/typography": "^0.5.19",
 		"@threlte/core": "^8.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 320fabac..a1ad7dba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       '@foxui/visual':
         specifier: ^0.4.7
         version: 0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)
+      '@internationalized/date':
+        specifier: ^3.11.0
+        version: 3.11.0
       '@number-flow/svelte':
         specifier: ^0.3.10
         version: 0.3.10(svelte@5.48.0)
@@ -124,7 +127,7 @@ importers:
         version: 0.176.0
       bits-ui:
         specifier: ^2.15.4
-        version: 2.15.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
+        version: 2.15.4(@internationalized/date@3.11.0)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -964,8 +967,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@internationalized/date@3.10.1':
-    resolution: {integrity: sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==}
+  '@internationalized/date@3.11.0':
+    resolution: {integrity: sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q==, tarball: https://registry.npmjs.org/@internationalized/date/-/date-3.11.0.tgz}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -1233,7 +1236,7 @@ packages:
       vite: ^6.3.0 || ^7.0.0
 
   '@swc/helpers@0.5.18':
-    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
+    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==, tarball: https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz}
 
   '@tailwindcss/forms@0.5.11':
     resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
@@ -3043,7 +3046,7 @@ packages:
       typescript: '>=4.8.4'
 
   tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==, tarball: https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz}
 
   turndown@7.2.2:
     resolution: {integrity: sha512-1F7db8BiExOKxjSMU2b7if62D/XOyQyZbPKq/nUwopfgnHlqXHqQ0lvfUTeUIr1lZJzOPFn43dODyMSIfvWRKQ==}
@@ -3811,7 +3814,7 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@internationalized/date@3.10.1':
+  '@internationalized/date@3.11.0':
     dependencies:
       '@swc/helpers': 0.5.18
 
@@ -4587,7 +4590,7 @@ snapshots:
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.5
-      '@internationalized/date': 3.10.1
+      '@internationalized/date': 3.11.0
       css.escape: 1.5.1
       esm-env: 1.2.2
       runed: 0.23.4(svelte@5.48.0)
@@ -4595,11 +4598,11 @@ snapshots:
       svelte-toolbelt: 0.7.1(svelte@5.48.0)
       tabbable: 6.4.0
 
-  bits-ui@2.15.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0):
+  bits-ui@2.15.4(@internationalized/date@3.11.0)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.5
-      '@internationalized/date': 3.10.1
+      '@internationalized/date': 3.11.0
       esm-env: 1.2.2
       runed: 0.35.1(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
       svelte: 5.48.0
diff --git a/src/lib/components/DatePicker.svelte b/src/lib/components/DatePicker.svelte
new file mode 100644
index 00000000..b3a03326
--- /dev/null
+++ b/src/lib/components/DatePicker.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { DatePicker } from 'bits-ui';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = '',
+		locale = 'en',
+		onSelect
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+		locale?: string;
+		onSelect?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+
+	const currentYear = new Date().getFullYear();
+	const yearRange = Array.from({ length: 7 }, (_, i) => currentYear - 1 + i);
+	const today = new Date();
+	const todayDay = today.getDate();
+	const todayMonth = today.getMonth() + 1;
+	const todayYear = today.getFullYear();
+
+	let internalValue: CalendarDate | undefined = $state(undefined);
+
+	function parseDateStr(str: string): CalendarDate | undefined {
+		if (!str) return undefined;
+		const [yearStr, monthStr, dayStr] = str.split('-');
+		const year = parseInt(yearStr, 10);
+		const month = parseInt(monthStr, 10);
+		const day = parseInt(dayStr, 10);
+		if (isNaN(year) || isNaN(month) || isNaN(day)) return undefined;
+		return new CalendarDate(year, month, day);
+	}
+
+	function formatDateStr(dt: CalendarDate): string {
+		const y = String(dt.year).padStart(4, '0');
+		const m = String(dt.month).padStart(2, '0');
+		const d = String(dt.day).padStart(2, '0');
+		return `${y}-${m}-${d}`;
+	}
+
+	let internalMinValue: CalendarDate | undefined = $derived.by(() => {
+		return parseDateStr(minValue);
+	});
+
+	$effect(() => {
+		const parsed = parseDateStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.year !== internalValue.year ||
+					parsed.month !== internalValue.month ||
+					parsed.day !== internalValue.day
+				) {
+					internalValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	function handleValueChange(newVal: DateValue | undefined) {
+		if (newVal && newVal instanceof CalendarDate) {
+			internalValue = newVal;
+			value = formatDateStr(newVal);
+		}
+	}
+
+	function handleOpenChange(open: boolean) {
+		isOpen = open;
+	}
+
+	function handleOpenChangeComplete(open: boolean) {
+		if (!open && internalValue) {
+			onSelect?.();
+		}
+	}
+</script>
+
+<DatePicker.Root
+	bind:value={internalValue}
+	onValueChange={handleValueChange}
+	onOpenChange={handleOpenChange}
+	onOpenChangeComplete={handleOpenChangeComplete}
+	minValue={internalMinValue}
+	granularity="day"
+	fixedWeeks={true}
+	weekdayFormat="short"
+	{locale}
+	{required}
+>
+	<div
+		class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex items-center rounded-xl border px-2.5 py-1.5 text-sm transition-colors"
+	>
+		<DatePicker.Input>
+			{#snippet children({ segments })}
+				{#each segments as segment, i (segment.part + i)}
+					{#if segment.part === 'literal'}
+						<span class="text-base-400 dark:text-base-500">{segment.value}</span>
+					{:else}
+						<DatePicker.Segment
+							part={segment.part}
+							class="hover:bg-base-200 focus:bg-base-200 dark:hover:bg-base-700 dark:focus:bg-base-700 rounded px-0.5 focus:outline-none"
+						>
+							{segment.value}
+						</DatePicker.Segment>
+					{/if}
+				{/each}
+			{/snippet}
+		</DatePicker.Input>
+
+		<DatePicker.Trigger
+			class="text-base-400 hover:text-base-600 dark:text-base-500 dark:hover:text-base-300 ml-auto cursor-pointer pl-1.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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+				/>
+			</svg>
+		</DatePicker.Trigger>
+	</div>
+
+	<DatePicker.Content
+		class="border-base-200 bg-base-50 dark:border-base-700 dark:bg-base-900 z-50 rounded-2xl border p-4 shadow-lg"
+	>
+		<DatePicker.Calendar>
+			{#snippet children({ months, weekdays })}
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.PrevButton>
+
+					<div class="flex items-center gap-1.5">
+						<DatePicker.MonthSelect
+							monthFormat="long"
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+						<DatePicker.YearSelect
+							years={yearRange}
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+					</div>
+
+					<DatePicker.NextButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.NextButton>
+				</DatePicker.Header>
+
+				{#each months as month (month.value.month)}
+					<DatePicker.Grid class="mt-3 w-full">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as weekday, i (i)}
+									<DatePicker.HeadCell
+										class="text-base-400 dark:text-base-500 flex-1 text-center text-xs font-medium"
+									>
+										{weekday}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+
+						<DatePicker.GridBody>
+							{#each month.weeks as week, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each week as day (day.toString())}
+										<DatePicker.Cell date={day} month={month.value} class="flex-1 p-0.5">
+											<DatePicker.Day>
+												{#snippet children({ selected, disabled, day: dayText })}
+													<div
+														class="relative flex size-9 items-center justify-center rounded-lg text-sm
+														{selected
+															? 'bg-accent-500 font-medium text-white'
+															: disabled
+																? 'text-base-300 dark:text-base-600 pointer-events-none'
+																: day.month !== month.value.month
+																	? 'text-base-300 dark:text-base-600'
+																	: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+													>
+														{dayText}
+														{#if day.day === todayDay && day.month === todayMonth && day.year === todayYear}
+															<span
+																class="bg-accent-500 absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full"
+																class:bg-white={selected}
+															></span>
+														{/if}
+													</div>
+												{/snippet}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>
diff --git a/src/lib/components/DateTimePicker.svelte b/src/lib/components/DateTimePicker.svelte
new file mode 100644
index 00000000..df75172b
--- /dev/null
+++ b/src/lib/components/DateTimePicker.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	// @ts-nocheck
+	import DatePickerField from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+	import { untrack } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = ''
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+	} = $props();
+
+	let datePart = $state('');
+	let timePart = $state('00:00');
+	let timeEl: HTMLDivElement | undefined = $state(undefined);
+
+	const locale = browser ? navigator.language || 'en' : 'en';
+	let minDatePart = $derived(minValue ? minValue.split('T')[0] || '' : '');
+
+	// Sync external value -> date/time parts
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v) {
+				const [d, t] = v.split('T');
+				if (d && d !== datePart) datePart = d;
+				if (t && t !== timePart) timePart = t;
+			}
+		});
+	});
+
+	// Sync date/time parts -> external value
+	$effect(() => {
+		const d = datePart;
+		const t = timePart;
+		untrack(() => {
+			if (d) {
+				const newVal = `${d}T${t || '00:00'}`;
+				if (newVal !== value) value = newVal;
+			}
+		});
+	});
+
+	function focusTime() {
+		// Small delay to let the popover finish closing
+		setTimeout(() => {
+			if (timeEl) {
+				const segment = timeEl.querySelector('[data-segment]');
+				if (segment instanceof HTMLElement) {
+					segment.focus();
+				}
+			}
+		}, 50);
+	}
+</script>
+
+<div class="flex items-center gap-1.5">
+	<DatePickerField
+		bind:value={datePart}
+		{required}
+		minValue={minDatePart}
+		{locale}
+		onSelect={focusTime}
+	/>
+	<div bind:this={timeEl}>
+		<TimePicker bind:value={timePart} {locale} />
+	</div>
+</div>
diff --git a/src/lib/components/TimePicker.svelte b/src/lib/components/TimePicker.svelte
new file mode 100644
index 00000000..e9b565fa
--- /dev/null
+++ b/src/lib/components/TimePicker.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { TimeField } from 'bits-ui';
+	import { Time } from '@internationalized/date';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		locale = 'en'
+	}: {
+		value: string;
+		required?: boolean;
+		locale?: string;
+	} = $props();
+
+	let internalValue: Time | undefined = $state(undefined);
+
+	function parseTimeStr(str: string): Time | undefined {
+		if (!str) return undefined;
+		const [hourStr, minuteStr] = str.split(':');
+		const hour = parseInt(hourStr, 10);
+		const minute = parseInt(minuteStr, 10);
+		if (isNaN(hour) || isNaN(minute)) return undefined;
+		return new Time(hour, minute);
+	}
+
+	function formatTimeStr(t: Time): string {
+		const h = String(t.hour).padStart(2, '0');
+		const m = String(t.minute).padStart(2, '0');
+		return `${h}:${m}`;
+	}
+
+	$effect(() => {
+		const parsed = parseTimeStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.hour !== internalValue.hour ||
+					parsed.minute !== internalValue.minute
+				) {
+					internalValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	function handleValueChange(newVal: Time | undefined) {
+		if (newVal && newVal instanceof Time) {
+			internalValue = newVal;
+			value = formatTimeStr(newVal);
+		}
+	}
+</script>
+
+<TimeField.Root
+	bind:value={internalValue}
+	onValueChange={handleValueChange}
+	granularity="minute"
+	{locale}
+	{required}
+>
+	<div
+		class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex items-center rounded-xl border px-2.5 py-1.5 text-sm transition-colors"
+	>
+		<TimeField.Input>
+			{#snippet children({ segments })}
+				{#each segments as segment, i (segment.part + i)}
+					{#if segment.part === 'literal'}
+						<span class="text-base-400 dark:text-base-500">{segment.value}</span>
+					{:else}
+						<TimeField.Segment
+							part={segment.part}
+							class="hover:bg-base-200 focus:bg-base-200 dark:hover:bg-base-700 dark:focus:bg-base-700 rounded px-0.5 focus:outline-none"
+						>
+							{segment.value}
+						</TimeField.Segment>
+					{/if}
+				{/each}
+			{/snippet}
+		</TimeField.Input>
+
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="text-base-400 dark:text-base-500 ml-auto size-4 pl-0.5"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			/>
+		</svg>
+	</div>
+</TimeField.Root>
diff --git a/src/routes/[[actor=actor]]/events/+page.svelte b/src/routes/[[actor=actor]]/events/+page.svelte
index 07b8c28c..d69df228 100644
--- a/src/routes/[[actor=actor]]/events/+page.svelte
+++ b/src/routes/[[actor=actor]]/events/+page.svelte
@@ -4,6 +4,8 @@
 	import { user } from '$lib/atproto/auth.svelte';
 	import { Avatar as FoxAvatar, Badge, Button } from '@foxui/core';
 	import Avatar from 'svelte-boring-avatars';
+	import * as TID from '@atcute/tid';
+	import { goto } from '$app/navigation';
 
 	let { data } = $props();
 
@@ -110,7 +112,17 @@
 				</div>
 			</div>
 			{#if isOwner}
-				<Button href="./events/new" variant="primary">New event</Button>
+				<Button
+					variant="primary"
+					onclick={() => {
+						const rkey = TID.now();
+						const handle =
+							user.profile?.handle && user.profile.handle !== 'handle.invalid'
+								? user.profile.handle
+								: user.did;
+						goto(`/${handle}/events/${rkey}/edit`);
+					}}>New event</Button
+				>
 			{/if}
 		</div>
 
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
index 89da235b..ddc9d0cc 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
+++ b/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
@@ -251,7 +251,7 @@
 						{eventData.name}
 					</h1>
 					{#if isOwner}
-						<Button href="./edit" size="sm" class="shrink-0">Edit</Button>
+						<Button href="./{rkey}/edit" size="sm" class="shrink-0">Edit</Button>
 					{/if}
 				</div>
 
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts b/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts
index 463a15e7..83344078 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts
+++ b/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts
@@ -22,7 +22,7 @@ export async function load({ params, platform, request }) {
 				did: did as Did,
 				collection: 'community.lexicon.calendar.event',
 				rkey
-			}),
+			}).catch(() => null),
 			cache
 				? cache.getProfile(did as Did).catch(() => null)
 				: getBlentoOrBskyProfile({ did: did as Did })
@@ -40,7 +40,13 @@ export async function load({ params, platform, request }) {
 		]);
 
 		if (!eventRecord?.value) {
-			throw error(404, 'Event not found');
+			return {
+				eventData: null,
+				did,
+				rkey,
+				hostProfile: hostProfile ?? null,
+				eventCid: null
+			};
 		}
 
 		const eventData: EventData = eventRecord.value as EventData;
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte b/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte
index 1095c581..b3a0212d 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte
+++ b/src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte
@@ -1,10 +1,20 @@
 <script lang="ts">
 	import { user } from '$lib/atproto/auth.svelte';
 	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
-	import { uploadBlob, putRecord, resolveHandle } from '$lib/atproto/methods';
+	import { uploadBlob, putRecord, deleteRecord, resolveHandle } from '$lib/atproto/methods';
 	import { getCDNImageBlobUrl } from '$lib/atproto';
 	import { compressImage } from '$lib/atproto/image-helper';
-	import { Avatar as FoxAvatar, Badge, Button, ToggleGroup, ToggleGroupItem } from '@foxui/core';
+	import { validateLink } from '$lib/helper';
+	import {
+		Avatar as FoxAvatar,
+		Button,
+		PopoverRoot,
+		PopoverTrigger,
+		PopoverContent,
+		ToggleGroup,
+		ToggleGroupItem,
+		Input
+	} from '@foxui/core';
 	import { goto } from '$app/navigation';
 	import { tokenize, type Token } from '@atcute/bluesky-richtext-parser';
 	import type { Handle } from '@atcute/lexicons';
@@ -12,10 +22,13 @@
 	import { browser } from '$app/environment';
 	import { putImage, getImage, deleteImage } from '$lib/components/image-store';
 	import Modal from '$lib/components/modal/Modal.svelte';
+	import Avatar from 'svelte-boring-avatars';
+	import DateTimePicker from '$lib/components/DateTimePicker.svelte';
 
 	let { data } = $props();
 
 	let rkey: string = $derived(data.rkey);
+	let isNew = $derived(data.eventData === null);
 	let DRAFT_KEY = $derived(`blento-event-edit-${rkey}`);
 
 	type EventMode = 'inperson' | 'virtual' | 'hybrid';
@@ -52,6 +65,7 @@
 	let thumbnailPreview: string | null = $state(null);
 	let submitting = $state(false);
 	let error: string | null = $state(null);
+	let titleEl: HTMLTextAreaElement | undefined = $state(undefined);
 
 	let location: EventLocation | null = $state(null);
 	let locationChanged = $state(false);
@@ -62,11 +76,12 @@
 	let locationResult: { displayName: string; location: EventLocation } | null = $state(null);
 
 	let links: Array<{ uri: string; name: string }> = $state([]);
+	let editingDates = $state(false);
 	let showLinkPopup = $state(false);
 	let newLinkUri = $state('');
 	let newLinkName = $state('');
+	let linkError = $state('');
 
-	let hasDraft = $state(false);
 	let draftLoaded = $state(false);
 
 	function isoToDatetimeLocal(iso: string): string {
@@ -81,16 +96,9 @@
 		return 'inperson';
 	}
 
-	function populateFromEventData() {
+	function populateLocationFromEventData() {
 		const eventData = data.eventData;
-		name = eventData.name || '';
-		description = eventData.description || '';
-		startsAt = eventData.startsAt ? isoToDatetimeLocal(eventData.startsAt) : '';
-		endsAt = eventData.endsAt ? isoToDatetimeLocal(eventData.endsAt) : '';
-		mode = eventData.mode ? stripModePrefix(eventData.mode) : 'inperson';
-		links = eventData.uris ? eventData.uris.map((l) => ({ uri: l.uri, name: l.name || '' })) : [];
-
-		// Load existing location
+		if (!eventData) return;
 		if (eventData.locations && eventData.locations.length > 0) {
 			const loc = eventData.locations.find((v) => v.$type === 'community.lexicon.location.address');
 			if (loc) {
@@ -109,8 +117,11 @@
 			}
 		}
 		locationChanged = false;
+	}
 
-		// Load existing thumbnail from CDN
+	function populateThumbnailFromEventData() {
+		const eventData = data.eventData;
+		if (!eventData) return;
 		if (eventData.media && eventData.media.length > 0) {
 			const media = eventData.media.find((m) => m.role === 'thumbnail');
 			if (media?.content) {
@@ -123,7 +134,29 @@
 		}
 	}
 
+	function populateFromEventData() {
+		const eventData = data.eventData;
+		if (!eventData) return;
+		name = eventData.name || '';
+		description = eventData.description || '';
+		startsAt = eventData.startsAt ? isoToDatetimeLocal(eventData.startsAt) : '';
+		endsAt = eventData.endsAt ? isoToDatetimeLocal(eventData.endsAt) : '';
+		mode = eventData.mode ? stripModePrefix(eventData.mode) : 'inperson';
+		links = eventData.uris ? eventData.uris.map((l) => ({ uri: l.uri, name: l.name || '' })) : [];
+		populateLocationFromEventData();
+		populateThumbnailFromEventData();
+	}
+
 	onMount(async () => {
+		// Migrate old creation draft if this is a new event
+		if (isNew) {
+			const oldDraft = localStorage.getItem('blento-event-draft');
+			if (oldDraft && !localStorage.getItem(DRAFT_KEY)) {
+				localStorage.setItem(DRAFT_KEY, oldDraft);
+				localStorage.removeItem('blento-event-draft');
+			}
+		}
+
 		const saved = localStorage.getItem(DRAFT_KEY);
 		if (saved) {
 			try {
@@ -137,6 +170,9 @@
 				locationChanged = draft.locationChanged || false;
 				if (draft.locationChanged) {
 					location = draft.location || null;
+				} else if (!isNew) {
+					// For edits without location changes, load from event data
+					populateLocationFromEventData();
 				}
 				thumbnailChanged = draft.thumbnailChanged || false;
 
@@ -148,32 +184,20 @@
 						thumbnailPreview = URL.createObjectURL(img.blob);
 						thumbnailChanged = true;
 					}
-				} else if (!thumbnailChanged) {
+				} else if (!thumbnailChanged && !isNew) {
 					// No new thumbnail in draft, show existing one from event data
-					if (data.eventData.media && data.eventData.media.length > 0) {
-						const media = data.eventData.media.find((m) => m.role === 'thumbnail');
-						if (media?.content) {
-							const url = getCDNImageBlobUrl({
-								did: data.did,
-								blob: media.content,
-								type: 'jpeg'
-							});
-							if (url) {
-								thumbnailPreview = url;
-							}
-						}
-					}
+					populateThumbnailFromEventData();
 				}
-
-				hasDraft = true;
 			} catch {
 				localStorage.removeItem(DRAFT_KEY);
-				populateFromEventData();
+				if (!isNew) populateFromEventData();
 			}
-		} else {
+		} else if (!isNew) {
 			populateFromEventData();
 		}
 		draftLoaded = true;
+		if (!startsAt) editingDates = true;
+		titleEl?.focus();
 	});
 
 	let saveDraftTimeout: ReturnType<typeof setTimeout> | undefined;
@@ -195,7 +219,6 @@
 			if (locationChanged) draft.location = location;
 			if (thumbnailKey) draft.thumbnailKey = thumbnailKey;
 			localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
-			hasDraft = true;
 		}, 500);
 	}
 
@@ -213,15 +236,6 @@
 		saveDraft();
 	});
 
-	function deleteDraft() {
-		localStorage.removeItem(DRAFT_KEY);
-		if (thumbnailKey) deleteImage(thumbnailKey);
-		thumbnailKey = null;
-		thumbnailChanged = false;
-		populateFromEventData();
-		hasDraft = false;
-	}
-
 	async function searchLocation() {
 		const q = locationSearch.trim();
 		if (!q) return;
@@ -281,11 +295,17 @@
 	}
 
 	function addLink() {
-		const uri = newLinkUri.trim();
-		if (!uri) return;
+		const raw = newLinkUri.trim();
+		if (!raw) return;
+		const uri = validateLink(raw);
+		if (!uri) {
+			linkError = 'Please enter a valid URL';
+			return;
+		}
 		links.push({ uri, name: newLinkName.trim() });
 		newLinkUri = '';
 		newLinkName = '';
+		linkError = '';
 		showLinkPopup = false;
 	}
 
@@ -386,6 +406,19 @@
 			startDate.getDate() === endDate.getDate()
 	);
 
+	// Auto-adjust end date if start moves past it
+	$effect(() => {
+		if (startsAt && endsAt) {
+			const s = new Date(startsAt);
+			const e = new Date(endsAt);
+			if (s >= e) {
+				const adjusted = new Date(s);
+				adjusted.setHours(adjusted.getHours() + 1);
+				endsAt = isoToDatetimeLocal(adjusted.toISOString());
+			}
+		}
+	});
+
 	async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> {
 		const encoder = new TextEncoder();
 		const facets: Record<string, unknown>[] = [];
@@ -447,7 +480,7 @@
 		try {
 			let media: Array<Record<string, unknown>> | undefined;
 
-			if (thumbnailChanged) {
+			if (isNew || thumbnailChanged) {
 				if (thumbnailFile) {
 					const compressed = await compressImage(thumbnailFile);
 					const blobRef = await uploadBlob({ blob: compressed.blob });
@@ -464,17 +497,18 @@
 						];
 					}
 				}
-				// If thumbnailChanged but no thumbnailFile, media stays undefined (thumbnail removed)
+				// If changed/new but no thumbnailFile, media stays undefined (thumbnail removed/absent)
 			} else {
 				// Thumbnail not changed — reuse original media from eventData
-				if (data.eventData.media && data.eventData.media.length > 0) {
+				if (data.eventData?.media && data.eventData.media.length > 0) {
 					media = data.eventData.media as Array<Record<string, unknown>>;
 				}
 			}
 
-			// Preserve original createdAt
-			const originalCreatedAt =
-				(data.eventData as Record<string, unknown>).createdAt || new Date().toISOString();
+			const createdAt = isNew
+				? new Date().toISOString()
+				: ((data.eventData as Record<string, unknown>)?.createdAt as string) ||
+					new Date().toISOString();
 
 			const record: Record<string, unknown> = {
 				$type: 'community.lexicon.calendar.event',
@@ -482,7 +516,7 @@
 				mode: `community.lexicon.calendar.event#${mode}`,
 				status: 'community.lexicon.calendar.event#scheduled',
 				startsAt: new Date(startsAt).toISOString(),
-				createdAt: originalCreatedAt
+				createdAt
 			};
 
 			const trimmedDescription = description.trim();
@@ -503,7 +537,7 @@
 			if (links.length > 0) {
 				record.uris = links;
 			}
-			if (locationChanged) {
+			if (isNew || locationChanged) {
 				if (location) {
 					record.locations = [
 						{
@@ -512,8 +546,8 @@
 						}
 					];
 				}
-				// If locationChanged but no location, locations stays undefined (removed)
-			} else if (data.eventData.locations && data.eventData.locations.length > 0) {
+				// If changed/new but no location, locations stays undefined (removed/absent)
+			} else if (data.eventData?.locations && data.eventData.locations.length > 0) {
 				record.locations = data.eventData.locations;
 			}
 
@@ -532,19 +566,45 @@
 						: user.did;
 				goto(`/${handle}/events/${rkey}`);
 			} else {
-				error = 'Failed to save event. Please try again.';
+				error = `Failed to ${isNew ? 'create' : 'save'} event. Please try again.`;
 			}
 		} catch (e) {
-			console.error('Failed to save event:', e);
-			error = 'Failed to save event. Please try again.';
+			console.error(`Failed to ${isNew ? 'create' : 'save'} event:`, e);
+			error = `Failed to ${isNew ? 'create' : 'save'} event. Please try again.`;
 		} finally {
 			submitting = false;
 		}
 	}
+
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	async function handleDelete() {
+		deleting = true;
+		try {
+			await deleteRecord({
+				collection: 'community.lexicon.calendar.event',
+				rkey
+			});
+			localStorage.removeItem(DRAFT_KEY);
+			if (thumbnailKey) deleteImage(thumbnailKey);
+			const handle =
+				user.profile?.handle && user.profile.handle !== 'handle.invalid'
+					? user.profile.handle
+					: user.did;
+			goto(`/${handle}/events`);
+		} catch (e) {
+			console.error('Failed to delete event:', e);
+			error = 'Failed to delete event. Please try again.';
+		} finally {
+			deleting = false;
+			showDeleteConfirm = false;
+		}
+	}
 </script>
 
 <svelte:head>
-	<title>Edit Event</title>
+	<title>{isNew ? 'Create Event' : 'Edit Event'}</title>
 </svelte:head>
 
 <div class="min-h-screen px-6 py-12 sm:py-12">
@@ -558,23 +618,12 @@
 			<div
 				class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900/50 rounded-2xl border p-8 text-center"
 			>
-				<p class="text-base-600 dark:text-base-400 mb-4">Log in to edit this event.</p>
+				<p class="text-base-600 dark:text-base-400 mb-4">
+					Log in to {isNew ? 'create an event' : 'edit this event'}.
+				</p>
 				<Button onclick={() => loginModalState.show()}>Log in</Button>
 			</div>
 		{:else}
-			<div class="mb-6 flex items-center gap-3">
-				<Badge size="sm">Local edit</Badge>
-				{#if hasDraft}
-					<button
-						type="button"
-						onclick={deleteDraft}
-						class="text-base-500 dark:text-base-400 cursor-pointer text-xs hover:text-red-500 hover:underline"
-					>
-						Discard changes
-					</button>
-				{/if}
-			</div>
-
 			<form
 				onsubmit={(e) => {
 					e.preventDefault();
@@ -600,39 +649,32 @@
 							onchange={onFileChange}
 							class="hidden"
 						/>
-						{#if thumbnailPreview}
-							<div class="relative">
-								<button type="button" onclick={() => fileInput?.click()} class="w-full">
-									<img
-										src={thumbnailPreview}
-										alt="Thumbnail preview"
-										class="border-base-200 dark:border-base-800 aspect-square w-full cursor-pointer rounded-2xl border object-cover"
-									/>
-								</button>
-								<button
-									type="button"
-									onclick={removeThumbnail}
-									aria-label="Remove thumbnail"
-									class="bg-base-900/70 absolute top-2 right-2 flex size-7 items-center justify-center rounded-full text-white hover:bg-red-600"
+						<div class="group relative">
+							{#if thumbnailPreview}
+								<img
+									src={thumbnailPreview}
+									alt="Thumbnail preview"
+									class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover"
+								/>
+							{:else}
+								<div
+									class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full"
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{:else}
+									<Avatar
+										size={400}
+										name={rkey}
+										variant="marble"
+										colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+										square
+									/>
+								</div>
+							{/if}
+							<!-- Upload overlay on hover -->
 							<button
 								type="button"
 								onclick={() => fileInput?.click()}
-								class="border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600 text-base-500 dark:text-base-400 flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed transition-colors {isDragOver
-									? 'border-accent-500 bg-accent-50 dark:bg-accent-950 text-accent-500'
+								class="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-2xl bg-black/0 text-white/0 transition-colors group-hover:bg-black/40 group-hover:text-white/90 {isDragOver
+									? 'bg-black/40 text-white/90'
 									: ''}"
 							>
 								<svg
@@ -641,7 +683,7 @@
 									viewBox="0 0 24 24"
 									stroke-width="1.5"
 									stroke="currentColor"
-									class="mb-1 size-6"
+									class="size-6"
 								>
 									<path
 										stroke-linecap="round"
@@ -649,21 +691,52 @@
 										d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"
 									/>
 								</svg>
-								<span class="text-sm">Add image</span>
+								<span class="text-sm font-medium">Upload thumbnail</span>
 							</button>
-						{/if}
+							{#if thumbnailPreview}
+								<Button
+									variant="ghost"
+									size="iconSm"
+									onclick={removeThumbnail}
+									class="bg-base-900/70 absolute top-2 right-2 text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-3.5"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+										/>
+									</svg>
+								</Button>
+							{/if}
+						</div>
 					</div>
 
 					<!-- Right column: event details -->
 					<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
-						<!-- Name -->
-						<input
-							type="text"
-							bind:value={name}
-							required
-							placeholder="Event name"
-							class="text-base-900 dark:text-base-50 placeholder:text-base-300 dark:placeholder:text-base-700 mb-2 w-full border-0 bg-transparent text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
-						/>
+						<!-- Name + Save button -->
+						<div class="mb-2 flex items-start justify-between gap-4">
+							<textarea
+								bind:this={titleEl}
+								bind:value={name}
+								required
+								placeholder="Event name"
+								rows={1}
+								class="text-base-900 dark:text-base-50 placeholder:text-base-500 dark:placeholder:text-base-500 w-full min-w-0 resize-none border-0 bg-transparent px-0 text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
+								style="field-sizing: content;"
+							></textarea>
+							<Button
+								type="submit"
+								size="sm"
+								class="shrink-0"
+								disabled={submitting || !name.trim() || !startsAt}
+							>
+								{submitting ? (isNew ? 'Creating...' : 'Saving...') : isNew ? 'Create' : 'Save'}
+							</Button>
+						</div>
 
 						<!-- Mode toggle -->
 						<div class="mb-8">
@@ -686,9 +759,9 @@
 						</div>
 
 						<!-- Date row -->
-						<div class="mb-4 flex items-center gap-4">
+						<div class="mb-4 flex items-start gap-4">
 							<div
-								class="border-base-200 dark:border-base-700 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
+								class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
 							>
 								{#if startDate}
 									<span
@@ -706,7 +779,7 @@
 										viewBox="0 0 24 24"
 										stroke-width="1.5"
 										stroke="currentColor"
-										class="text-base-400 dark:text-base-500 size-5"
+										class="text-base-900 dark:text-base-200 size-5"
 									>
 										<path
 											stroke-linecap="round"
@@ -717,39 +790,127 @@
 								{/if}
 							</div>
 							<div class="flex-1">
-								{#if startDate}
-									<p class="text-base-900 dark:text-base-50 font-semibold">
-										{formatWeekday(startDate)}, {formatFullDate(startDate)}
-										{#if endDate && !isSameDay}
-											- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+								{#if startDate && !editingDates}
+									<!-- Display mode: show formatted date, click to edit -->
+									<div class="flex items-start gap-2">
+										<button
+											type="button"
+											onclick={() => (editingDates = true)}
+											class="cursor-pointer text-left"
+										>
+											<p class="text-base-900 dark:text-base-50 font-semibold">
+												{formatWeekday(startDate)}, {formatFullDate(startDate)}
+												{#if endDate && !isSameDay}
+													- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+												{/if}
+											</p>
+											<p class="text-base-500 dark:text-base-400 text-sm">
+												{formatTime(startDate)}
+												{#if endDate && isSameDay}
+													- {formatTime(endDate)}
+												{/if}
+											</p>
+										</button>
+										<Button variant="ghost" size="iconSm" onclick={() => (editingDates = true)}>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="size-3.5"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+												/>
+											</svg>
+										</Button>
+									</div>
+								{:else}
+									<!-- Edit mode: show pickers -->
+									<div class="flex flex-col gap-2">
+										<div class="flex items-center gap-2">
+											{#if endsAt}
+												<span class="text-base-500 dark:text-base-400 w-9 text-xs">Start</span>
+											{/if}
+											<DateTimePicker bind:value={startsAt} required />
+										</div>
+										{#if endsAt}
+											<div class="flex items-center gap-2">
+												<span class="text-base-500 dark:text-base-400 w-9 text-xs">End</span>
+												<DateTimePicker bind:value={endsAt} minValue={startsAt} />
+												<Button variant="ghost" size="iconSm" onclick={() => (endsAt = '')}>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="1.5"
+														stroke="currentColor"
+														class="size-3.5"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M6 18 18 6M6 6l12 12"
+														/>
+													</svg>
+												</Button>
+											</div>
+										{:else}
+											<Button
+												variant="ghost"
+												size="sm"
+												class="w-fit"
+												onclick={() => {
+													if (startsAt) {
+														const d = new Date(startsAt);
+														d.setHours(d.getHours() + 1);
+														endsAt = isoToDatetimeLocal(d.toISOString());
+													} else {
+														endsAt = '';
+													}
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="size-3.5"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M12 4.5v15m7.5-7.5h-15"
+													/>
+												</svg>
+												Add end date
+											</Button>
 										{/if}
-									</p>
-									<p class="text-base-500 dark:text-base-400 text-sm">
-										{formatTime(startDate)}
-										{#if endDate && isSameDay}
-											- {formatTime(endDate)}
+										{#if startDate}
+											<Button size="sm" onclick={() => (editingDates = false)} class="mt-1 w-fit">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="2"
+													stroke="currentColor"
+													class="size-3.5"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="m4.5 12.75 6 6 9-13.5"
+													/>
+												</svg>
+												Done
+											</Button>
 										{/if}
-									</p>
+									</div>
 								{/if}
-								<div class="mt-1 flex flex-wrap gap-3">
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">Start</span>
-										<input
-											type="datetime-local"
-											bind:value={startsAt}
-											required
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">End</span>
-										<input
-											type="datetime-local"
-											bind:value={endsAt}
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-								</div>
 							</div>
 						</div>
 
@@ -757,7 +918,7 @@
 						{#if location}
 							<div class="mb-6 flex items-center gap-4">
 								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+									class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 items-center justify-center rounded-xl border"
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -782,40 +943,29 @@
 								<p class="text-base-900 dark:text-base-50 flex-1 font-semibold">
 									{getLocationDisplayString(location)}
 								</p>
-								<button
-									type="button"
-									onclick={removeLocation}
-									class="text-base-400 shrink-0 hover:text-red-500"
-									aria-label="Remove location"
-								>
+								<Button variant="ghost" size="iconSm" onclick={removeLocation} class="shrink-0">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 20 20"
 										fill="currentColor"
-										class="size-4"
+										class="size-3.5"
 									>
 										<path
 											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 										/>
 									</svg>
-								</button>
+								</Button>
 							</div>
 						{:else}
-							<button
-								type="button"
-								onclick={() => (showLocationModal = true)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 mb-6 flex items-center gap-4 transition-colors"
-							>
-								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
-								>
+							<div class="mb-6">
+								<Button variant="ghost" onclick={() => (showLocationModal = true)}>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										fill="none"
 										viewBox="0 0 24 24"
 										stroke-width="1.5"
 										stroke="currentColor"
-										class="size-5"
+										class="size-4"
 									>
 										<path
 											stroke-linecap="round"
@@ -828,9 +978,9 @@
 											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
 										/>
 									</svg>
-								</div>
-								<span class="text-sm">Add location</span>
-							</button>
+									Add location
+								</Button>
+							</div>
 						{/if}
 
 						<!-- About Event -->
@@ -844,7 +994,8 @@
 								bind:value={description}
 								rows={4}
 								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
-								class="text-base-700 dark:text-base-300 placeholder:text-base-300 dark:placeholder:text-base-700 w-full resize-none border-0 bg-transparent leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
+								class="text-base-700 dark:text-base-300 placeholder:text-base-500 dark:placeholder:text-base-500 w-full resize-none border-0 bg-transparent px-0 leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
+								style="field-sizing: content;"
 							></textarea>
 						</div>
 
@@ -852,8 +1003,14 @@
 							<p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
 						{/if}
 
-						<Button type="submit" disabled={submitting}>
-							{submitting ? 'Saving...' : 'Save Changes'}
+						<Button type="submit" disabled={submitting || !name.trim() || !startsAt}>
+							{submitting
+								? isNew
+									? 'Creating...'
+									: 'Saving...'
+								: isNew
+									? 'Create Event'
+									: 'Save Changes'}
 						</Button>
 					</div>
 
@@ -899,11 +1056,11 @@
 									<span class="text-base-700 dark:text-base-300 truncate text-sm">
 										{link.name || link.uri.replace(/^https?:\/\//, '')}
 									</span>
-									<button
-										type="button"
+									<Button
+										variant="ghost"
+										size="iconSm"
 										onclick={() => removeLink(i)}
-										class="text-base-400 ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500"
-										aria-label="Remove link"
+										class="ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
 									>
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
@@ -915,68 +1072,118 @@
 												d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 											/>
 										</svg>
-									</button>
+									</Button>
 								</div>
 							{/each}
 						</div>
 
-						<div class="relative mt-3">
-							<button
-								type="button"
-								onclick={() => (showLinkPopup = !showLinkPopup)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 flex items-center gap-1.5 text-sm transition-colors"
-							>
-								<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>
-								Add link
-							</button>
+						<div class="mt-3">
+							<PopoverRoot bind:open={showLinkPopup}>
+								<PopoverTrigger>
+									<Button size="sm">
+										<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>
 
-							{#if showLinkPopup}
-								<div
-									class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 absolute top-full left-0 z-10 mt-2 w-64 rounded-xl border p-3 shadow-lg"
-								>
-									<input
+										Add link
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent side="bottom" sideOffset={8} class="w-64 p-3">
+									<Input
 										type="url"
 										bind:value={newLinkUri}
 										placeholder="https://..."
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-2 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+										variant="secondary"
+										class="mb-2"
+										onkeydown={(e) => {
+											if (e.key === 'Enter') {
+												e.preventDefault();
+												addLink();
+											}
+										}}
 									/>
-									<input
+									<Input
 										type="text"
 										bind:value={newLinkName}
 										placeholder="Label (optional)"
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-3 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+										variant="secondary"
+										class="mb-2"
+										onkeydown={(e) => {
+											if (e.key === 'Enter') {
+												e.preventDefault();
+												addLink();
+											}
+										}}
 									/>
+									{#if linkError}
+										<p class="mb-2 text-xs text-red-500">{linkError}</p>
+									{/if}
 									<div class="flex justify-end gap-2">
-										<button
-											type="button"
-											onclick={() => (showLinkPopup = false)}
-											class="text-base-500 dark:text-base-400 text-xs hover:underline"
+										<Button
+											variant="ghost"
+											size="sm"
+											onclick={() => {
+												showLinkPopup = false;
+												linkError = '';
+												newLinkUri = '';
+												newLinkName = '';
+											}}
 										>
 											Cancel
-										</button>
-										<button
-											type="button"
-											onclick={addLink}
-											disabled={!newLinkUri.trim()}
-											class="bg-base-900 dark:bg-base-100 text-base-50 dark:text-base-900 disabled:bg-base-300 dark:disabled:bg-base-700 rounded-lg px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
-										>
-											Add
-										</button>
+										</Button>
+										<Button onclick={addLink} size="sm" disabled={!newLinkUri.trim()}>Add</Button>
 									</div>
-								</div>
-							{/if}
+								</PopoverContent>
+							</PopoverRoot>
 						</div>
 					</div>
 				</div>
+
+				{#if !isNew}
+					<div class="border-base-200 dark:border-base-800 mt-12 border-t pt-8">
+						{#if showDeleteConfirm}
+							<div class="flex items-center gap-3">
+								<p class="text-sm text-red-600 dark:text-red-400">
+									Are you sure? This cannot be undone.
+								</p>
+								<Button
+									variant="secondary"
+									size="sm"
+									onclick={() => (showDeleteConfirm = false)}
+									disabled={deleting}
+								>
+									Cancel
+								</Button>
+								<Button
+									size="sm"
+									onclick={handleDelete}
+									disabled={deleting}
+									variant="red"
+								>
+									{deleting ? 'Deleting...' : 'Delete'}
+								</Button>
+							</div>
+						{:else}
+							<Button
+								variant="red"
+								onclick={() => (showDeleteConfirm = true)}
+							>
+								Delete event
+							</Button>
+						{/if}
+					</div>
+				{/if}
 			</form>
 		{/if}
 	</div>
@@ -993,12 +1200,7 @@
 		class="mt-2"
 	>
 		<div class="flex gap-2">
-			<input
-				type="text"
-				bind:value={locationSearch}
-				placeholder="Search for a city or address..."
-				class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 flex-1 rounded-lg border px-3 py-2 text-sm focus:outline-none"
-			/>
+			<Input type="text" class="flex-1" bind:value={locationSearch} />
 			<Button type="submit" disabled={locationSearching || !locationSearch.trim()}>
 				{locationSearching ? 'Searching...' : 'Search'}
 			</Button>
diff --git a/src/routes/[[actor=actor]]/events/new/+page.svelte b/src/routes/[[actor=actor]]/events/new/+page.svelte
deleted file mode 100644
index 0c248cdd..00000000
--- a/src/routes/[[actor=actor]]/events/new/+page.svelte
+++ /dev/null
@@ -1,967 +0,0 @@
-<script lang="ts">
-	import { user } from '$lib/atproto/auth.svelte';
-	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
-	import { uploadBlob, resolveHandle } from '$lib/atproto/methods';
-	import { compressImage } from '$lib/atproto/image-helper';
-	import { Avatar as FoxAvatar, Badge, Button, ToggleGroup, ToggleGroupItem } from '@foxui/core';
-	import { goto } from '$app/navigation';
-	import { tokenize, type Token } from '@atcute/bluesky-richtext-parser';
-	import type { Handle } from '@atcute/lexicons';
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { putImage, getImage, deleteImage } from '$lib/components/image-store';
-	import Modal from '$lib/components/modal/Modal.svelte';
-
-	const DRAFT_KEY = 'blento-event-draft';
-
-	type EventMode = 'inperson' | 'virtual' | 'hybrid';
-
-	interface EventLocation {
-		street?: string;
-		locality?: string;
-		region?: string;
-		country?: string;
-	}
-
-	interface EventDraft {
-		name: string;
-		description: string;
-		startsAt: string;
-		endsAt: string;
-		links: Array<{ uri: string; name: string }>;
-		mode?: EventMode;
-		thumbnailKey?: string;
-		location?: EventLocation;
-	}
-
-	let thumbnailKey: string | null = $state(null);
-
-	let name = $state('');
-	let description = $state('');
-	let startsAt = $state('');
-	let endsAt = $state('');
-	let mode: EventMode = $state('inperson');
-	let thumbnailFile: File | null = $state(null);
-	let thumbnailPreview: string | null = $state(null);
-	let submitting = $state(false);
-	let error: string | null = $state(null);
-
-	let location: EventLocation | null = $state(null);
-	let showLocationModal = $state(false);
-	let locationSearch = $state('');
-	let locationSearching = $state(false);
-	let locationError = $state('');
-	let locationResult: { displayName: string; location: EventLocation } | null = $state(null);
-
-	let links: Array<{ uri: string; name: string }> = $state([]);
-	let showLinkPopup = $state(false);
-	let newLinkUri = $state('');
-	let newLinkName = $state('');
-
-	let hasDraft = $state(false);
-	let draftLoaded = $state(false);
-
-	onMount(async () => {
-		const saved = localStorage.getItem(DRAFT_KEY);
-		if (saved) {
-			try {
-				const draft: EventDraft = JSON.parse(saved);
-				name = draft.name || '';
-				description = draft.description || '';
-				startsAt = draft.startsAt || '';
-				endsAt = draft.endsAt || '';
-				links = draft.links || [];
-				mode = draft.mode || 'inperson';
-				location = draft.location || null;
-
-				if (draft.thumbnailKey) {
-					const img = await getImage(draft.thumbnailKey);
-					if (img) {
-						thumbnailKey = draft.thumbnailKey;
-						thumbnailFile = new File([img.blob], img.name, { type: img.blob.type });
-						thumbnailPreview = URL.createObjectURL(img.blob);
-					}
-				}
-
-				hasDraft = true;
-			} catch {
-				localStorage.removeItem(DRAFT_KEY);
-			}
-		}
-		draftLoaded = true;
-	});
-
-	let saveDraftTimeout: ReturnType<typeof setTimeout> | undefined;
-
-	function saveDraft() {
-		if (!draftLoaded || !browser) return;
-		clearTimeout(saveDraftTimeout);
-		saveDraftTimeout = setTimeout(() => {
-			const draft: EventDraft = { name, description, startsAt, endsAt, links, mode };
-			if (thumbnailKey) draft.thumbnailKey = thumbnailKey;
-			if (location) draft.location = location;
-			const hasContent = name || description || startsAt || endsAt || links.length > 0 || location;
-			if (hasContent) {
-				localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
-				hasDraft = true;
-			} else {
-				localStorage.removeItem(DRAFT_KEY);
-				hasDraft = false;
-			}
-		}, 500);
-	}
-
-	$effect(() => {
-		// track all draft fields by reading them
-		void [
-			name,
-			description,
-			startsAt,
-			endsAt,
-			mode,
-			JSON.stringify(links),
-			JSON.stringify(location)
-		];
-		saveDraft();
-	});
-
-	function deleteDraft() {
-		localStorage.removeItem(DRAFT_KEY);
-		if (thumbnailKey) deleteImage(thumbnailKey);
-		name = '';
-		description = '';
-		startsAt = '';
-		endsAt = '';
-		links = [];
-		mode = 'inperson';
-		location = null;
-		thumbnailFile = null;
-		if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
-		thumbnailPreview = null;
-		thumbnailKey = null;
-		hasDraft = false;
-	}
-
-	async function searchLocation() {
-		const q = locationSearch.trim();
-		if (!q) return;
-		locationError = '';
-		locationSearching = true;
-		locationResult = null;
-
-		try {
-			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q));
-			if (!response.ok) throw new Error('response not ok');
-			const data = await response.json();
-			if (!data || data.error) throw new Error('no results');
-
-			const addr = data.address || {};
-			const road = addr.road || '';
-			const houseNumber = addr.house_number || '';
-			const street = road ? (houseNumber ? `${road} ${houseNumber}` : road) : '';
-			const locality =
-				addr.city || addr.town || addr.village || addr.municipality || addr.hamlet || '';
-			const region = addr.state || addr.county || '';
-			const country = addr.country || '';
-
-			locationResult = {
-				displayName: data.display_name || q,
-				location: {
-					...(street && { street }),
-					...(locality && { locality }),
-					...(region && { region }),
-					...(country && { country })
-				}
-			};
-		} catch {
-			locationError = "Couldn't find that location.";
-		} finally {
-			locationSearching = false;
-		}
-	}
-
-	function confirmLocation() {
-		if (locationResult) {
-			location = locationResult.location;
-		}
-		showLocationModal = false;
-		locationSearch = '';
-		locationResult = null;
-		locationError = '';
-	}
-
-	function removeLocation() {
-		location = null;
-	}
-
-	function getLocationDisplayString(loc: EventLocation): string {
-		return [loc.street, loc.locality, loc.region, loc.country].filter(Boolean).join(', ');
-	}
-
-	function addLink() {
-		const uri = newLinkUri.trim();
-		if (!uri) return;
-		links.push({ uri, name: newLinkName.trim() });
-		newLinkUri = '';
-		newLinkName = '';
-		showLinkPopup = false;
-	}
-
-	function removeLink(index: number) {
-		links.splice(index, 1);
-	}
-
-	let fileInput: HTMLInputElement | undefined = $state();
-
-	let hostName = $derived(user.profile?.displayName || user.profile?.handle || user.did || '');
-
-	async function setThumbnail(file: File) {
-		thumbnailFile = file;
-		if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
-		thumbnailPreview = URL.createObjectURL(file);
-
-		if (thumbnailKey) await deleteImage(thumbnailKey);
-		thumbnailKey = crypto.randomUUID();
-		await putImage(thumbnailKey, file, file.name);
-		saveDraft();
-	}
-
-	async function onFileChange(e: Event) {
-		const input = e.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (!file) return;
-		setThumbnail(file);
-	}
-
-	let isDragOver = $state(false);
-
-	function onDragOver(e: DragEvent) {
-		e.preventDefault();
-		isDragOver = true;
-	}
-
-	function onDragLeave(e: DragEvent) {
-		e.preventDefault();
-		isDragOver = false;
-	}
-
-	function onDrop(e: DragEvent) {
-		e.preventDefault();
-		isDragOver = false;
-		const file = e.dataTransfer?.files?.[0];
-		if (file?.type.startsWith('image/')) {
-			setThumbnail(file);
-		}
-	}
-
-	function removeThumbnail() {
-		thumbnailFile = null;
-		if (thumbnailPreview) {
-			URL.revokeObjectURL(thumbnailPreview);
-			thumbnailPreview = null;
-		}
-		if (thumbnailKey) {
-			deleteImage(thumbnailKey);
-			thumbnailKey = null;
-		}
-		if (fileInput) fileInput.value = '';
-		saveDraft();
-	}
-
-	function formatMonth(date: Date): string {
-		return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
-	}
-
-	function formatDay(date: Date): number {
-		return date.getDate();
-	}
-
-	function formatWeekday(date: Date): string {
-		return date.toLocaleDateString('en-US', { weekday: 'long' });
-	}
-
-	function formatFullDate(date: Date): string {
-		const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' };
-		if (date.getFullYear() !== new Date().getFullYear()) {
-			options.year = 'numeric';
-		}
-		return date.toLocaleDateString('en-US', options);
-	}
-
-	function formatTime(date: Date): string {
-		return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
-	}
-
-	let startDate = $derived(startsAt ? new Date(startsAt) : null);
-	let endDate = $derived(endsAt ? new Date(endsAt) : null);
-	let isSameDay = $derived(
-		startDate &&
-			endDate &&
-			startDate.getFullYear() === endDate.getFullYear() &&
-			startDate.getMonth() === endDate.getMonth() &&
-			startDate.getDate() === endDate.getDate()
-	);
-
-	async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> {
-		const encoder = new TextEncoder();
-		const facets: Record<string, unknown>[] = [];
-		let byteOffset = 0;
-
-		for (const token of tokens) {
-			const tokenBytes = encoder.encode(token.raw);
-			const byteStart = byteOffset;
-			const byteEnd = byteOffset + tokenBytes.length;
-
-			if (token.type === 'mention') {
-				try {
-					const did = await resolveHandle({ handle: token.handle as Handle });
-					if (did) {
-						facets.push({
-							index: { byteStart, byteEnd },
-							features: [{ $type: 'app.bsky.richtext.facet#mention', did }]
-						});
-					}
-				} catch {
-					// skip unresolvable mentions
-				}
-			} else if (token.type === 'autolink') {
-				facets.push({
-					index: { byteStart, byteEnd },
-					features: [{ $type: 'app.bsky.richtext.facet#link', uri: token.url }]
-				});
-			} else if (token.type === 'topic') {
-				facets.push({
-					index: { byteStart, byteEnd },
-					features: [{ $type: 'app.bsky.richtext.facet#tag', tag: token.name }]
-				});
-			}
-
-			byteOffset = byteEnd;
-		}
-
-		return facets;
-	}
-
-	async function handleSubmit() {
-		error = null;
-
-		if (!name.trim()) {
-			error = 'Name is required.';
-			return;
-		}
-		if (!startsAt) {
-			error = 'Start date is required.';
-			return;
-		}
-		if (!user.client || !user.did) {
-			error = 'You must be logged in.';
-			return;
-		}
-
-		submitting = true;
-
-		try {
-			let media: Array<Record<string, unknown>> | undefined;
-
-			if (thumbnailFile) {
-				const compressed = await compressImage(thumbnailFile);
-				const blobRef = await uploadBlob({ blob: compressed.blob });
-				if (blobRef) {
-					media = [
-						{
-							role: 'thumbnail',
-							content: blobRef,
-							aspect_ratio: {
-								width: compressed.aspectRatio.width,
-								height: compressed.aspectRatio.height
-							}
-						}
-					];
-				}
-			}
-
-			const record: Record<string, unknown> = {
-				$type: 'community.lexicon.calendar.event',
-				name: name.trim(),
-				mode: `community.lexicon.calendar.event#${mode}`,
-				status: 'community.lexicon.calendar.event#scheduled',
-				startsAt: new Date(startsAt).toISOString(),
-				createdAt: new Date().toISOString()
-			};
-
-			const trimmedDescription = description.trim();
-			if (trimmedDescription) {
-				record.description = trimmedDescription;
-				const tokens = tokenize(trimmedDescription);
-				const facets = await tokensToFacets(tokens);
-				if (facets.length > 0) {
-					record.facets = facets;
-				}
-			}
-			if (endsAt) {
-				record.endsAt = new Date(endsAt).toISOString();
-			}
-			if (media) {
-				record.media = media;
-			}
-			if (links.length > 0) {
-				record.uris = links;
-			}
-			if (location) {
-				record.locations = [
-					{
-						$type: 'community.lexicon.location.address',
-						...location
-					}
-				];
-			}
-
-			const response = await user.client.post('com.atproto.repo.createRecord', {
-				input: {
-					collection: 'community.lexicon.calendar.event',
-					repo: user.did,
-					record
-				}
-			});
-
-			if (response.ok) {
-				localStorage.removeItem(DRAFT_KEY);
-				if (thumbnailKey) deleteImage(thumbnailKey);
-				const parts = response.data.uri.split('/');
-				const rkey = parts[parts.length - 1];
-				const handle =
-					user.profile?.handle && user.profile.handle !== 'handle.invalid'
-						? user.profile.handle
-						: user.did;
-				goto(`/${handle}/events/${rkey}`);
-			} else {
-				error = 'Failed to create event. Please try again.';
-			}
-		} catch (e) {
-			console.error('Failed to create event:', e);
-			error = 'Failed to create event. Please try again.';
-		} finally {
-			submitting = false;
-		}
-	}
-</script>
-
-<svelte:head>
-	<title>Create Event</title>
-</svelte:head>
-
-<div class="min-h-screen px-6 py-12 sm:py-12">
-	<div class="mx-auto max-w-3xl">
-		{#if user.isInitializing}
-			<div class="flex items-center gap-3">
-				<div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div>
-				<div class="bg-base-300 dark:bg-base-700 h-4 w-48 animate-pulse rounded"></div>
-			</div>
-		{:else if !user.isLoggedIn}
-			<div
-				class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-950/50 rounded-2xl border p-8 text-center"
-			>
-				<p class="text-base-600 dark:text-base-400 mb-4">Log in to create an event.</p>
-				<Button onclick={() => loginModalState.show()}>Log in</Button>
-			</div>
-		{:else}
-			<div class="mb-6 flex items-center gap-3">
-				<Badge size="sm">Local draft</Badge>
-				{#if hasDraft}
-					<button
-						type="button"
-						onclick={deleteDraft}
-						class="text-base-500 dark:text-base-400 cursor-pointer text-xs hover:text-red-500 hover:underline"
-					>
-						Delete draft
-					</button>
-				{/if}
-			</div>
-
-			<form
-				onsubmit={(e) => {
-					e.preventDefault();
-					handleSubmit();
-				}}
-			>
-				<!-- Two-column layout mirroring detail page -->
-				<div
-					class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]"
-				>
-					<!-- Thumbnail (left column) -->
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none"
-						ondragover={onDragOver}
-						ondragleave={onDragLeave}
-						ondrop={onDrop}
-					>
-						<input
-							bind:this={fileInput}
-							type="file"
-							accept="image/*"
-							onchange={onFileChange}
-							class="hidden"
-						/>
-						{#if thumbnailPreview}
-							<div class="relative">
-								<button type="button" onclick={() => fileInput?.click()} class="w-full">
-									<img
-										src={thumbnailPreview}
-										alt="Thumbnail preview"
-										class="border-base-200 dark:border-base-800 aspect-square w-full cursor-pointer rounded-2xl border object-cover"
-									/>
-								</button>
-								<button
-									type="button"
-									onclick={removeThumbnail}
-									aria-label="Remove thumbnail"
-									class="bg-base-900/70 absolute top-2 right-2 flex size-7 items-center justify-center rounded-full text-white hover:bg-red-600"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{:else}
-							<button
-								type="button"
-								onclick={() => fileInput?.click()}
-								class="border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600 text-base-500 dark:text-base-400 flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed transition-colors {isDragOver
-									? 'border-accent-500 bg-accent-50 dark:bg-accent-950 text-accent-500'
-									: ''}"
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="mb-1 size-6"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"
-									/>
-								</svg>
-								<span class="text-sm">Add image</span>
-							</button>
-						{/if}
-					</div>
-
-					<!-- Right column: event details -->
-					<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
-						<!-- Name -->
-						<input
-							type="text"
-							bind:value={name}
-							required
-							placeholder="Event name"
-							class="text-base-900 dark:text-base-50 placeholder:text-base-500 dark:placeholder:text-base-500 mb-2 w-full border-0 bg-transparent text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
-						/>
-
-						<!-- Mode toggle -->
-						<div class="mb-8">
-							<ToggleGroup
-								type="single"
-								bind:value={
-									() => {
-										return mode;
-									},
-									(val) => {
-										if (val) mode = val;
-									}
-								}
-								class="w-fit"
-							>
-								<ToggleGroupItem size="sm" value="inperson">In Person</ToggleGroupItem>
-								<ToggleGroupItem size="sm" value="virtual">Virtual</ToggleGroupItem>
-								<ToggleGroupItem size="sm" value="hybrid">Hybrid</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						<!-- Date row -->
-						<div class="mb-4 flex items-center gap-4">
-							<div
-								class="border-base-200 dark:border-base-700 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
-							>
-								{#if startDate}
-									<span
-										class="text-base-500 dark:text-base-400 text-[9px] leading-none font-semibold"
-									>
-										{formatMonth(startDate)}
-									</span>
-									<span class="text-base-900 dark:text-base-50 text-lg leading-tight font-bold">
-										{formatDay(startDate)}
-									</span>
-								{:else}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="text-base-400 dark:text-base-500 size-5"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
-										/>
-									</svg>
-								{/if}
-							</div>
-							<div class="flex-1">
-								{#if startDate}
-									<p class="text-base-900 dark:text-base-50 font-semibold">
-										{formatWeekday(startDate)}, {formatFullDate(startDate)}
-										{#if endDate && !isSameDay}
-											- {formatWeekday(endDate)}, {formatFullDate(endDate)}
-										{/if}
-									</p>
-									<p class="text-base-500 dark:text-base-400 text-sm">
-										{formatTime(startDate)}
-										{#if endDate && isSameDay}
-											- {formatTime(endDate)}
-										{/if}
-									</p>
-								{/if}
-								<div class="mt-1 flex flex-wrap gap-3">
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">Start</span>
-										<input
-											type="datetime-local"
-											bind:value={startsAt}
-											required
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">End</span>
-										<input
-											type="datetime-local"
-											bind:value={endsAt}
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-								</div>
-							</div>
-						</div>
-
-						<!-- Location row -->
-						{#if location}
-							<div class="mb-6 flex items-center gap-4">
-								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="text-base-900 dark:text-base-200 size-5"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
-										/>
-									</svg>
-								</div>
-								<p class="text-base-900 dark:text-base-50 flex-1 font-semibold">
-									{getLocationDisplayString(location)}
-								</p>
-								<button
-									type="button"
-									onclick={removeLocation}
-									class="text-base-400 shrink-0 hover:text-red-500"
-									aria-label="Remove location"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{:else}
-							<button
-								type="button"
-								onclick={() => (showLocationModal = true)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 mb-6 flex items-center gap-4 transition-colors"
-							>
-								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
-								>
-									<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
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
-										/>
-									</svg>
-								</div>
-								<span class="text-sm">Add location</span>
-							</button>
-						{/if}
-
-						<!-- About Event -->
-						<div class="mt-8 mb-8">
-							<p
-								class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase"
-							>
-								About
-							</p>
-							<textarea
-								bind:value={description}
-								rows={4}
-								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
-								class="text-base-700 dark:text-base-300 placeholder:text-base-500 dark:placeholder:text-base-500 w-full resize-none border-0 bg-transparent leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
-							></textarea>
-						</div>
-
-						{#if error}
-							<p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
-						{/if}
-
-						<Button type="submit" disabled={submitting}>
-							{submitting ? 'Creating...' : 'Create Event'}
-						</Button>
-					</div>
-
-					<!-- Hosted By -->
-					<div class="order-3 md:order-0 md:col-start-1">
-						<p
-							class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase"
-						>
-							Hosted By
-						</p>
-						<div class="flex items-center gap-2.5">
-							<FoxAvatar src={user.profile?.avatar} alt={hostName} class="size-8 shrink-0" />
-							<span class="text-base-900 dark:text-base-100 truncate text-sm font-medium">
-								{hostName}
-							</span>
-						</div>
-					</div>
-
-					<!-- Links -->
-					<div class="order-4 md:order-0 md:col-start-1">
-						<p
-							class="text-base-500 dark:text-base-400 mb-4 text-xs font-semibold tracking-wider uppercase"
-						>
-							Links
-						</p>
-						<div class="space-y-3">
-							{#each links as link, i (i)}
-								<div class="group flex items-center gap-1.5">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="text-base-700 dark:text-base-300 size-3.5 shrink-0"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-										/>
-									</svg>
-									<span class="text-base-700 dark:text-base-300 truncate text-sm">
-										{link.name || link.uri.replace(/^https?:\/\//, '')}
-									</span>
-									<button
-										type="button"
-										onclick={() => removeLink(i)}
-										class="text-base-400 ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500"
-										aria-label="Remove link"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="size-3.5"
-										>
-											<path
-												d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-											/>
-										</svg>
-									</button>
-								</div>
-							{/each}
-						</div>
-
-						<div class="relative mt-3">
-							<button
-								type="button"
-								onclick={() => (showLinkPopup = !showLinkPopup)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 flex items-center gap-1.5 text-sm transition-colors"
-							>
-								<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>
-								Add link
-							</button>
-
-							{#if showLinkPopup}
-								<div
-									class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 absolute top-full left-0 z-10 mt-2 w-64 rounded-xl border p-3 shadow-lg"
-								>
-									<input
-										type="url"
-										bind:value={newLinkUri}
-										placeholder="https://..."
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-2 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
-									/>
-									<input
-										type="text"
-										bind:value={newLinkName}
-										placeholder="Label (optional)"
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-3 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
-									/>
-									<div class="flex justify-end gap-2">
-										<button
-											type="button"
-											onclick={() => (showLinkPopup = false)}
-											class="text-base-500 dark:text-base-400 text-xs hover:underline"
-										>
-											Cancel
-										</button>
-										<button
-											type="button"
-											onclick={addLink}
-											disabled={!newLinkUri.trim()}
-											class="bg-base-900 dark:bg-base-100 text-base-50 dark:text-base-900 disabled:bg-base-300 dark:disabled:bg-base-700 rounded-lg px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
-										>
-											Add
-										</button>
-									</div>
-								</div>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</form>
-		{/if}
-	</div>
-</div>
-
-<!-- Location modal -->
-<Modal bind:open={showLocationModal}>
-	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add location</p>
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-			searchLocation();
-		}}
-		class="mt-2"
-	>
-		<div class="flex gap-2">
-			<input
-				type="text"
-				bind:value={locationSearch}
-				placeholder="Search for a city or address..."
-				class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 flex-1 rounded-lg border px-3 py-2 text-sm focus:outline-none"
-			/>
-			<Button type="submit" disabled={locationSearching || !locationSearch.trim()}>
-				{locationSearching ? 'Searching...' : 'Search'}
-			</Button>
-		</div>
-	</form>
-
-	{#if locationError}
-		<p class="mt-3 text-sm text-red-600 dark:text-red-400">{locationError}</p>
-	{/if}
-
-	{#if locationResult}
-		<div
-			class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 mt-4 overflow-hidden rounded-xl border p-4"
-		>
-			<div class="flex items-start gap-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="text-base-500 mt-0.5 size-5 shrink-0"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-					/>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
-					/>
-				</svg>
-				<div class="min-w-0 flex-1">
-					<p class="text-base-900 dark:text-base-50 font-medium">
-						{getLocationDisplayString(locationResult.location)}
-					</p>
-					<p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-xs">
-						{locationResult.displayName}
-					</p>
-				</div>
-			</div>
-			<div class="mt-4 flex justify-end">
-				<Button onclick={confirmLocation}>Use this location</Button>
-			</div>
-		</div>
-	{/if}
-
-	<p class="text-base-400 dark:text-base-500 mt-4 text-xs">
-		Geocoding by <a
-			href="https://nominatim.openstreetmap.org/"
-			class="hover:text-base-600 dark:hover:text-base-400 underline"
-			target="_blank">Nominatim</a
-		>
-		/ &copy;
-		<a
-			href="https://www.openstreetmap.org/copyright"
-			class="hover:text-base-600 dark:hover:text-base-400 underline"
-			target="_blank">OpenStreetMap contributors</a
-		>
-	</p>
-</Modal>