diff --git a/src/lib/components/admin/AlbumSelectorModal.svelte b/src/lib/components/admin/AlbumSelectorModal.svelte
new file mode 100644
index 0000000..8483789
--- /dev/null
+++ b/src/lib/components/admin/AlbumSelectorModal.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import AlbumSelector from './AlbumSelector.svelte'
+	import Button from './Button.svelte'
+	import LoadingSpinner from './LoadingSpinner.svelte'
+	import type { Album } from '@prisma/client'
+
+	interface Props {
+		isOpen: boolean
+		selectedMediaIds: number[]
+		onClose?: () => void
+		onSave?: () => void
+	}
+
+	let { isOpen = $bindable(), selectedMediaIds = [], onClose, onSave }: Props = $props()
+
+	// State
+	let selectedAlbumId = $state<number | null>(null)
+	let isSaving = $state(false)
+	let error = $state('')
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (isOpen) {
+			selectedAlbumId = null
+			error = ''
+		}
+	})
+
+	async function handleSave() {
+		if (!selectedAlbumId || selectedMediaIds.length === 0) return
+
+		try {
+			isSaving = true
+			error = ''
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			const response = await fetch(`/api/albums/${selectedAlbumId}/media`, {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ mediaIds: selectedMediaIds })
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to add media to album')
+			}
+
+			handleClose()
+			onSave?.()
+		} catch (err) {
+			console.error('Failed to update album:', err)
+			error = err instanceof Error ? err.message : 'Failed to update album'
+		} finally {
+			isSaving = false
+		}
+	}
+
+	function handleClose() {
+		selectedAlbumId = null
+		error = ''
+		isOpen = false
+		onClose?.()
+	}
+
+	function handleCancel() {
+		handleClose()
+	}
+
+	function handleAlbumSelect(albumId: number | null) {
+		selectedAlbumId = albumId
+	}
+
+	// Computed
+	const canSave = $derived(selectedAlbumId !== null && selectedMediaIds.length > 0)
+	const mediaCount = $derived(selectedMediaIds.length)
+</script>
+
+<Modal bind:isOpen onClose={handleClose} size="medium" showCloseButton={false}>
+	<div class="album-selector-modal">
+		<!-- Header -->
+		<div class="modal-header">
+			<div class="header-top">
+				<h2>Add to Album</h2>
+				<button class="close-button" onclick={handleClose} aria-label="Close modal">
+					<svg
+						width="20"
+						height="20"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6 6L18 18M6 18L18 6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</div>
+			<p class="modal-subtitle">
+				Select an album to add {mediaCount}
+				{mediaCount === 1 ? 'item' : 'items'} to
+			</p>
+
+			{#if error}
+				<div class="error-message">{error}</div>
+			{/if}
+		</div>
+
+		<!-- Album Selector -->
+		<div class="modal-body">
+			<AlbumSelector {selectedAlbumId} onSelect={handleAlbumSelect} placeholder="Choose an album" />
+		</div>
+
+		<!-- Footer -->
+		<div class="modal-footer">
+			<div class="action-summary">
+				{#if selectedAlbumId}
+					<span>Ready to add {mediaCount} {mediaCount === 1 ? 'item' : 'items'}</span>
+				{:else}
+					<span>Select an album to continue</span>
+				{/if}
+			</div>
+			<div class="action-buttons">
+				<Button variant="ghost" onclick={handleCancel}>Cancel</Button>
+				<Button variant="primary" onclick={handleSave} disabled={!canSave || isSaving}>
+					{#if isSaving}
+						<LoadingSpinner buttonSize="small" />
+						Adding...
+					{:else}
+						Add to Album
+					{/if}
+				</Button>
+			</div>
+		</div>
+	</div>
+</Modal>
+
+<style lang="scss">
+	.album-selector-modal {
+		display: flex;
+		flex-direction: column;
+		min-height: 300px;
+		position: relative;
+		padding: 0;
+	}
+
+	.modal-header {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		padding: $unit-3x;
+		border-bottom: 1px solid $grey-90;
+
+		h2 {
+			margin: 0;
+			font-size: 1.5rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+	}
+
+	.header-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.modal-subtitle {
+		margin: 0;
+		font-size: 0.875rem;
+		color: $grey-40;
+	}
+
+	.close-button {
+		width: 32px;
+		height: 32px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+		padding: 0;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+	}
+
+	.error-message {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+		padding: $unit-2x;
+		border-radius: $unit;
+		border: 1px solid rgba(239, 68, 68, 0.2);
+		margin-top: $unit-2x;
+	}
+
+	.modal-body {
+		flex: 1;
+		padding: $unit-3x;
+		display: flex;
+		flex-direction: column;
+		min-height: 150px;
+	}
+
+	.modal-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: $unit-3x;
+		padding: $unit-3x;
+		border-top: 1px solid $grey-90;
+		background: $grey-95;
+	}
+
+	.action-summary {
+		font-size: 0.875rem;
+		color: $grey-30;
+		flex: 1;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: $unit-2x;
+	}
+</style>
diff --git a/src/lib/components/admin/InlineComposerModal.svelte b/src/lib/components/admin/InlineComposerModal.svelte
new file mode 100644
index 0000000..4af376c
--- /dev/null
+++ b/src/lib/components/admin/InlineComposerModal.svelte
@@ -0,0 +1,840 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import { goto } from '$app/navigation'
+	import Modal from './Modal.svelte'
+	import EnhancedComposer from './EnhancedComposer.svelte'
+	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
+	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import MediaDetailsModal from './MediaDetailsModal.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import type { JSONContent } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+
+	export let isOpen = false
+	export let initialMode: 'modal' | 'page' = 'modal'
+	export let initialPostType: 'post' | 'essay' = 'post'
+	export let initialContent: JSONContent | undefined = undefined
+	export let closeOnSave = true
+
+	type PostType = 'post' | 'essay'
+	type ComposerMode = 'modal' | 'page'
+
+	let postType: PostType = initialPostType
+	let mode: ComposerMode = initialMode
+	let content: JSONContent = initialContent || {
+		type: 'doc',
+		content: [{ type: 'paragraph' }]
+	}
+	let characterCount = 0
+	let editorInstance: any
+
+	// Essay metadata
+	let essayTitle = ''
+	let essaySlug = ''
+	let essayExcerpt = ''
+	let essayTags = ''
+	let essayTab = 0
+
+	// Photo attachment state
+	let attachedPhotos: Media[] = []
+	let isMediaLibraryOpen = false
+	let fileInput: HTMLInputElement
+
+	// Media details modal state
+	let selectedMedia: Media | null = null
+	let isMediaDetailsOpen = false
+
+	const CHARACTER_LIMIT = 600
+	const dispatch = createEventDispatcher()
+
+	function handleClose() {
+		if (hasContent() && !confirm('Are you sure you want to close? Your changes will be lost.')) {
+			return
+		}
+		resetComposer()
+		isOpen = false
+		dispatch('close')
+	}
+
+	function hasContent(): boolean {
+		return characterCount > 0 || attachedPhotos.length > 0
+	}
+
+	function resetComposer() {
+		postType = initialPostType
+		content = {
+			type: 'doc',
+			content: [{ type: 'paragraph' }]
+		}
+		characterCount = 0
+		attachedPhotos = []
+		if (editorInstance) {
+			editorInstance.clear()
+		}
+	}
+
+	function switchToEssay() {
+		// Store content in sessionStorage to avoid messy URLs
+		if (content && content.content && content.content.length > 0) {
+			sessionStorage.setItem('draft_content', JSON.stringify(content))
+		}
+		goto('/admin/posts/new?type=essay')
+	}
+
+	function generateSlug(title: string): string {
+		return title
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	}
+
+	$: if (essayTitle && !essaySlug) {
+		essaySlug = generateSlug(essayTitle)
+	}
+
+	function handlePhotoUpload() {
+		fileInput.click()
+	}
+
+	async function handleFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement
+		const files = input.files
+		if (!files || files.length === 0) return
+
+		for (const file of files) {
+			if (!file.type.startsWith('image/')) continue
+
+			const formData = new FormData()
+			formData.append('file', file)
+			formData.append('type', 'image')
+
+			// Add auth header if needed
+			const auth = localStorage.getItem('admin_auth')
+			const headers: Record<string, string> = {}
+			if (auth) {
+				headers.Authorization = `Basic ${auth}`
+			}
+
+			try {
+				const response = await fetch('/api/media/upload', {
+					method: 'POST',
+					headers,
+					body: formData
+				})
+
+				if (response.ok) {
+					const media = await response.json()
+					attachedPhotos = [...attachedPhotos, media]
+				} else {
+					console.error('Failed to upload image:', response.status)
+				}
+			} catch (error) {
+				console.error('Error uploading image:', error)
+			}
+		}
+
+		// Clear the input
+		input.value = ''
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const mediaArray = Array.isArray(media) ? media : [media]
+		const currentIds = attachedPhotos.map((p) => p.id)
+		const newMedia = mediaArray.filter((m) => !currentIds.includes(m.id))
+		attachedPhotos = [...attachedPhotos, ...newMedia]
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	function removePhoto(photoId: number) {
+		attachedPhotos = attachedPhotos.filter((p) => p.id !== photoId)
+	}
+
+	function handlePhotoClick(photo: Media) {
+		selectedMedia = photo
+		isMediaDetailsOpen = true
+	}
+
+	function handleMediaDetailsClose() {
+		isMediaDetailsOpen = false
+		selectedMedia = null
+	}
+
+	function handleMediaUpdate(updatedMedia: Media) {
+		// Update the photo in the attachedPhotos array
+		attachedPhotos = attachedPhotos.map((photo) =>
+			photo.id === updatedMedia.id ? updatedMedia : photo
+		)
+	}
+
+	async function handleSave() {
+		if (!hasContent() && postType !== 'essay') return
+		if (postType === 'essay' && !essayTitle) return
+
+		let postData: any = {
+			content,
+			status: 'published',
+			attachedPhotos: attachedPhotos.map((photo) => photo.id)
+		}
+
+		if (postType === 'essay') {
+			postData = {
+				...postData,
+				type: 'essay', // No mapping needed anymore
+				title: essayTitle,
+				slug: essaySlug,
+				excerpt: essayExcerpt,
+				tags: essayTags ? essayTags.split(',').map((tag) => tag.trim()) : []
+			}
+		} else {
+			// All other content is just a "post" with attachments
+			postData = {
+				...postData,
+				type: 'post' // No mapping needed anymore
+			}
+		}
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+			if (auth) {
+				headers.Authorization = `Basic ${auth}`
+			}
+
+			const response = await fetch('/api/posts', {
+				method: 'POST',
+				headers,
+				body: JSON.stringify(postData)
+			})
+
+			if (response.ok) {
+				resetComposer()
+				if (closeOnSave) {
+					isOpen = false
+				}
+				dispatch('saved')
+				if (postType === 'essay') {
+					goto('/admin/posts')
+				}
+			} else {
+				console.error('Failed to save post')
+			}
+		} catch (error) {
+			console.error('Error saving post:', error)
+		}
+	}
+
+	$: isOverLimit = characterCount > CHARACTER_LIMIT
+	$: canSave =
+		(postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) ||
+		(postType === 'essay' && essayTitle.length > 0 && content)
+</script>
+
+{#if mode === 'modal'}
+	<Modal bind:isOpen size="medium" on:close={handleClose} showCloseButton={false}>
+		<div class="composer">
+			<div class="composer-header">
+				<Button variant="ghost" onclick={handleClose}>Cancel</Button>
+				<div class="header-right">
+					<Button
+						variant="ghost"
+						iconOnly
+						onclick={switchToEssay}
+						title="Expand to essay"
+						class="expand-button"
+					>
+						<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+							<path
+								d="M10 6L14 2M14 2H10M14 2V6"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M6 10L2 14M2 14H6M2 14V10"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</Button>
+					<Button variant="primary" onclick={handleSave} disabled={!canSave}>Post</Button>
+				</div>
+			</div>
+
+			<div class="composer-body">
+				<EnhancedComposer
+					bind:this={editorInstance}
+					bind:data={content}
+					onChange={(newContent) => {
+						content = newContent
+					}}
+					onCharacterCount={(count) => {
+						characterCount = count
+					}}
+					placeholder="What's on your mind?"
+					minHeight={80}
+					autofocus={true}
+					variant="inline"
+				/>
+
+				{#if attachedPhotos.length > 0}
+					<div class="attached-photos">
+						{#each attachedPhotos as photo}
+							<div class="photo-item">
+								<button
+									class="photo-button"
+									onclick={() => handlePhotoClick(photo)}
+									title="View media details"
+								>
+									<img src={photo.url} alt={photo.description || ''} class="photo-preview" />
+								</button>
+								<button
+									class="remove-photo"
+									onclick={() => removePhoto(photo.id)}
+									title="Remove photo"
+									aria-label="Remove photo"
+								>
+									<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+										<path
+											d="M4 4L12 12M4 12L12 4"
+											stroke="currentColor"
+											stroke-width="1.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				<div class="composer-footer">
+					<div class="footer-left">
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={handlePhotoUpload}
+							title="Add image"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<rect
+									x="2"
+									y="2"
+									width="14"
+									height="14"
+									rx="2"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<circle cx="5.5" cy="5.5" r="1.5" fill="currentColor" />
+								<path
+									d="M2 12l4-4 3 3 5-5 2 2"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={() => (isMediaLibraryOpen = true)}
+							title="Browse library"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M2 5L9 12L16 5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+					</div>
+
+					<div class="footer-right">
+						{#if postType === 'post'}
+							<span
+								class="character-count"
+								class:warning={characterCount > CHARACTER_LIMIT * 0.9}
+								class:error={isOverLimit}
+							>
+								{CHARACTER_LIMIT - characterCount}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</Modal>
+{:else if mode === 'page'}
+	{#if postType === 'essay'}
+		<div class="essay-composer">
+			<div class="essay-header">
+				<h1>New Essay</h1>
+				<div class="essay-actions">
+					<Button variant="secondary" onclick={() => goto('/admin/posts')}>Cancel</Button>
+					<Button variant="primary" onclick={handleSave} disabled={!canSave}>Publish</Button>
+				</div>
+			</div>
+
+			<AdminSegmentedControl bind:selectedIndex={essayTab}>
+				<button slot="0">Metadata</button>
+				<button slot="1">Content</button>
+			</AdminSegmentedControl>
+
+			<div class="essay-content">
+				{#if essayTab === 0}
+					<div class="metadata-section">
+						<Input label="Title" bind:value={essayTitle} placeholder="Essay title" required />
+
+						<Input label="Slug" bind:value={essaySlug} placeholder="essay-slug" />
+
+						<Input
+							type="textarea"
+							label="Excerpt"
+							bind:value={essayExcerpt}
+							placeholder="Brief description of your essay"
+							rows={3}
+						/>
+
+						<Input
+							label="Tags"
+							bind:value={essayTags}
+							placeholder="design, development, thoughts"
+							helpText="Comma-separated list of tags"
+						/>
+					</div>
+				{:else}
+					<div class="content-section">
+						<EnhancedComposer
+							bind:this={editorInstance}
+							bind:data={content}
+							onChange={(newContent) => {
+								content = newContent
+							}}
+							onCharacterCount={(count) => {
+								characterCount = count
+							}}
+							placeholder="Start writing your essay..."
+							minHeight={500}
+							autofocus={true}
+							variant="full"
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="inline-composer">
+			{#if hasContent()}
+				<Button
+					variant="ghost"
+					iconOnly
+					buttonSize="icon"
+					onclick={switchToEssay}
+					title="Switch to essay mode"
+					class="floating-expand-button"
+				>
+					<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<path
+							d="M10 6L14 2M14 2H10M14 2V6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M6 10L2 14M2 14H6M2 14V10"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</Button>
+			{/if}
+			<div class="composer-body">
+				<EnhancedComposer
+					bind:this={editorInstance}
+					bind:data={content}
+					onChange={(newContent) => {
+						content = newContent
+					}}
+					onCharacterCount={(count) => {
+						characterCount = count
+					}}
+					placeholder="What's on your mind?"
+					minHeight={120}
+					autofocus={true}
+					variant="inline"
+				/>
+
+				{#if attachedPhotos.length > 0}
+					<div class="attached-photos">
+						{#each attachedPhotos as photo}
+							<div class="photo-item">
+								<button
+									class="photo-button"
+									onclick={() => handlePhotoClick(photo)}
+									title="View media details"
+								>
+									<img src={photo.url} alt={photo.description || ''} class="photo-preview" />
+								</button>
+								<button
+									class="remove-photo"
+									onclick={() => removePhoto(photo.id)}
+									title="Remove photo"
+									aria-label="Remove photo"
+								>
+									<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+										<path
+											d="M4 4L12 12M4 12L12 4"
+											stroke="currentColor"
+											stroke-width="1.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				<div class="composer-footer">
+					<div class="footer-left">
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={handlePhotoUpload}
+							title="Add image"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<rect
+									x="2"
+									y="2"
+									width="14"
+									height="14"
+									rx="2"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<circle cx="5.5" cy="5.5" r="1.5" fill="currentColor" />
+								<path
+									d="M2 12l4-4 3 3 5-5 2 2"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={() => (isMediaLibraryOpen = true)}
+							title="Browse library"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M2 5L9 12L16 5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+					</div>
+
+					<div class="footer-right">
+						<span
+							class="character-count"
+							class:warning={characterCount > CHARACTER_LIMIT * 0.9}
+							class:error={isOverLimit}
+						>
+							{CHARACTER_LIMIT - characterCount}
+						</span>
+						<Button variant="primary" onclick={handleSave} disabled={!canSave}>Post</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+{/if}
+
+<!-- Hidden file input for photo upload -->
+<input
+	bind:this={fileInput}
+	type="file"
+	accept="image/*"
+	multiple
+	onchange={handleFileUpload}
+	style="display: none;"
+/>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="multiple"
+	fileType="image"
+	onSelect={handleMediaSelect}
+	onClose={handleMediaLibraryClose}
+/>
+
+<!-- Media Details Modal -->
+{#if selectedMedia}
+	<MediaDetailsModal
+		bind:isOpen={isMediaDetailsOpen}
+		media={selectedMedia}
+		onClose={handleMediaDetailsClose}
+		onUpdate={handleMediaUpdate}
+	/>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.composer {
+		padding: 0;
+		max-width: 600px;
+		margin: 0 auto;
+	}
+
+	.composer-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: $unit-2x;
+	}
+
+	.header-right {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+	}
+
+	.composer-body {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.link-fields {
+		padding: 0 $unit-2x $unit-2x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.composer-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: calc($unit * 1.5) $unit-2x;
+		border-top: 1px solid $grey-80;
+		background-color: $grey-5;
+	}
+
+	.footer-left,
+	.footer-right {
+		display: flex;
+		align-items: center;
+		gap: $unit-half;
+	}
+
+	.character-count {
+		font-size: 13px;
+		color: $grey-50;
+		font-weight: 400;
+		padding: 0 $unit;
+		min-width: 30px;
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+
+		&.warning {
+			color: $universe-color;
+		}
+
+		&.error {
+			color: $red-50;
+			font-weight: 500;
+		}
+	}
+
+	// Essay composer styles
+	.essay-composer {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: $unit-3x;
+	}
+
+	.essay-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $unit-3x;
+
+		h1 {
+			font-size: 28px;
+			font-weight: 600;
+			margin: 0;
+		}
+	}
+
+	.essay-actions {
+		display: flex;
+		gap: $unit;
+	}
+
+	.essay-content {
+		margin-top: $unit-3x;
+	}
+
+	.metadata-section {
+		max-width: 600px;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+	}
+
+	.content-section {
+		:global(.editor) {
+			min-height: 500px;
+		}
+	}
+
+	// Inline composer styles
+	.inline-composer {
+		position: relative;
+		background: white;
+		border-radius: $unit-2x;
+		border: 1px solid $grey-80;
+		overflow: hidden;
+		width: 100%;
+
+		.composer-body {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	:global(.floating-expand-button) {
+		position: absolute !important;
+		top: $unit-2x;
+		right: $unit-2x;
+		z-index: 10;
+		background-color: rgba(255, 255, 255, 0.9) !important;
+		backdrop-filter: blur(8px);
+		border: 1px solid $grey-80 !important;
+
+		&:hover {
+			background-color: rgba(255, 255, 255, 0.95) !important;
+		}
+	}
+
+	.inline-composer .link-fields {
+		padding: 0 $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		margin-top: $unit-2x;
+	}
+
+	.inline-composer .composer-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: $unit-2x $unit-3x;
+		border-top: 1px solid $grey-80;
+		background-color: $grey-90;
+	}
+
+	.attached-photos {
+		padding: 0 $unit-3x $unit-2x;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+	}
+
+	.photo-item {
+		position: relative;
+
+		.photo-button {
+			border: none;
+			background: none;
+			padding: 0;
+			cursor: pointer;
+			display: block;
+			transition: transform 0.2s ease;
+
+			&:hover {
+				transform: scale(1.05);
+			}
+		}
+
+		:global(.photo-preview) {
+			width: 64px;
+			height: 64px;
+			object-fit: cover;
+			border-radius: 12px;
+			display: block;
+		}
+
+		.remove-photo {
+			position: absolute;
+			top: -6px;
+			right: -6px;
+			width: 20px;
+			height: 20px;
+			border: none;
+			border-radius: 50%;
+			background: rgba(0, 0, 0, 0.8);
+			color: white;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.2s ease;
+			opacity: 0;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.9);
+			}
+
+			svg {
+				width: 10px;
+				height: 10px;
+			}
+		}
+
+		&:hover .remove-photo {
+			opacity: 1;
+		}
+	}
+
+	.inline-composer .attached-photos {
+		padding: 0 $unit-3x $unit-2x;
+	}
+</style>
diff --git a/src/lib/components/admin/MediaLibraryModal.svelte b/src/lib/components/admin/MediaLibraryModal.svelte
deleted file mode 100644
index 2f2ee11..0000000
--- a/src/lib/components/admin/MediaLibraryModal.svelte
+++ /dev/null
@@ -1,225 +0,0 @@
-<script lang="ts">
-	import Modal from './Modal.svelte'
-	import Button from './Button.svelte'
-	import MediaSelector from './MediaSelector.svelte'
-	import type { Media } from '@prisma/client'
-
-	interface Props {
-		isOpen: boolean
-		mode: 'single' | 'multiple'
-		fileType?: 'image' | 'video' | 'all'
-		selectedIds?: number[]
-		title?: string
-		confirmText?: string
-		onSelect: (media: Media | Media[]) => void
-		onClose: () => void
-	}
-
-	let {
-		isOpen = $bindable(),
-		mode,
-		fileType = 'all',
-		selectedIds = [],
-		title = mode === 'single' ? 'Select Media' : 'Select Media Files',
-		confirmText = mode === 'single' ? 'Select' : 'Select Files',
-		onSelect,
-		onClose
-	}: Props = $props()
-
-	let selectedMedia = $state<Media[]>([])
-	let isLoading = $state(false)
-
-	function handleMediaSelect(media: Media[]) {
-		selectedMedia = media
-	}
-
-	function handleConfirm() {
-		if (selectedMedia.length === 0) return
-
-		if (mode === 'single') {
-			onSelect(selectedMedia[0])
-		} else {
-			onSelect(selectedMedia)
-		}
-
-		handleClose()
-	}
-
-	function handleClose() {
-		selectedMedia = []
-		isOpen = false
-		onClose()
-	}
-
-	function handleCancel() {
-		handleClose()
-	}
-
-	// Computed properties
-	const canConfirm = $derived(selectedMedia.length > 0)
-	const selectionCount = $derived(selectedMedia.length)
-	const footerText = $derived(
-		mode === 'single'
-			? canConfirm
-				? '1 item selected'
-				: 'No item selected'
-			: `${selectionCount} item${selectionCount !== 1 ? 's' : ''} selected`
-	)
-</script>
-
-<Modal {isOpen} size="full" closeOnBackdrop={false} showCloseButton={false} on:close={handleClose}>
-	<div class="media-library-modal">
-		<!-- Header -->
-		<header class="modal-header">
-			<div class="header-content">
-				<h2 class="modal-title">{title}</h2>
-				<p class="modal-subtitle">
-					{#if fileType === 'image'}
-						Browse and select image files
-					{:else if fileType === 'video'}
-						Browse and select video files
-					{:else}
-						Browse and select media files
-					{/if}
-				</p>
-			</div>
-			<Button variant="ghost" iconOnly onclick={handleClose} aria-label="Close modal">
-				<svg
-					slot="icon"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M6 6L18 18M6 18L18 6"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-					/>
-				</svg>
-			</Button>
-		</header>
-
-		<!-- Media Browser -->
-		<div class="modal-body">
-			<MediaSelector
-				{mode}
-				{fileType}
-				{selectedIds}
-				on:select={(e) => handleMediaSelect(e.detail)}
-				bind:loading={isLoading}
-			/>
-		</div>
-
-		<!-- Footer -->
-		<footer class="modal-footer">
-			<div class="footer-info">
-				<span class="selection-count">{footerText}</span>
-			</div>
-			<div class="footer-actions">
-				<Button variant="ghost" onclick={handleCancel} disabled={isLoading}>Cancel</Button>
-				<Button variant="primary" onclick={handleConfirm} disabled={!canConfirm || isLoading}>
-					{confirmText}
-				</Button>
-			</div>
-		</footer>
-	</div>
-</Modal>
-
-<style lang="scss">
-	.media-library-modal {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		min-height: 80vh;
-		max-height: 90vh;
-	}
-
-	.modal-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: $unit-3x $unit-4x;
-		border-bottom: 1px solid $grey-80;
-		background-color: white;
-		flex-shrink: 0;
-	}
-
-	.header-content {
-		flex: 1;
-	}
-
-	.modal-title {
-		font-size: 1.5rem;
-		font-weight: 600;
-		margin: 0 0 $unit-half 0;
-		color: $grey-10;
-	}
-
-	.modal-subtitle {
-		font-size: 0.875rem;
-		color: $grey-30;
-		margin: 0;
-	}
-
-	.modal-body {
-		flex: 1;
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.modal-footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: $unit-3x $unit-4x;
-		border-top: 1px solid $grey-80;
-		background-color: $grey-95;
-		flex-shrink: 0;
-	}
-
-	.footer-info {
-		flex: 1;
-	}
-
-	.selection-count {
-		font-size: 0.875rem;
-		color: $grey-30;
-		font-weight: 500;
-	}
-
-	.footer-actions {
-		display: flex;
-		gap: $unit-2x;
-		align-items: center;
-	}
-
-	// Responsive adjustments
-	@media (max-width: 768px) {
-		.modal-header {
-			padding: $unit-2x $unit-3x;
-		}
-
-		.modal-footer {
-			padding: $unit-2x $unit-3x;
-			flex-direction: column;
-			gap: $unit-2x;
-			align-items: stretch;
-		}
-
-		.footer-info {
-			text-align: center;
-		}
-
-		.footer-actions {
-			justify-content: center;
-		}
-
-		.modal-title {
-			font-size: 1.25rem;
-		}
-	}
-</style>
diff --git a/src/lib/components/admin/MediaSelector.svelte b/src/lib/components/admin/MediaSelector.svelte
deleted file mode 100644
index a0400e0..0000000
--- a/src/lib/components/admin/MediaSelector.svelte
+++ /dev/null
@@ -1,631 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte'
-	import Input from './Input.svelte'
-	import Button from './Button.svelte'
-	import LoadingSpinner from './LoadingSpinner.svelte'
-	import type { Media } from '@prisma/client'
-
-	interface Props {
-		mode: 'single' | 'multiple'
-		fileType?: 'image' | 'video' | 'all'
-		selectedIds?: number[]
-		loading?: boolean
-	}
-
-	let { mode, fileType = 'all', selectedIds = [], loading = $bindable(false) }: Props = $props()
-
-	const dispatch = createEventDispatcher<{
-		select: Media[]
-	}>()
-
-	// State
-	let media = $state<Media[]>([])
-	let selectedMedia = $state<Media[]>([])
-	let currentPage = $state(1)
-	let totalPages = $state(1)
-	let total = $state(0)
-	let searchQuery = $state('')
-	let filterType = $state<string>(fileType === 'all' ? 'all' : fileType)
-	let photographyFilter = $state<string>('all')
-	let searchTimeout: ReturnType<typeof setTimeout>
-
-	// Initialize selected media from IDs
-	$effect(() => {
-		if (selectedIds.length > 0 && media.length > 0) {
-			selectedMedia = media.filter((item) => selectedIds.includes(item.id))
-			dispatch('select', selectedMedia)
-		}
-	})
-
-	// Watch for search query changes with debounce
-	$effect(() => {
-		if (searchQuery !== undefined) {
-			clearTimeout(searchTimeout)
-			searchTimeout = setTimeout(() => {
-				currentPage = 1
-				loadMedia()
-			}, 300)
-		}
-	})
-
-	// Watch for filter changes
-	$effect(() => {
-		if (filterType !== undefined) {
-			currentPage = 1
-			loadMedia()
-		}
-	})
-
-	// Watch for photography filter changes
-	$effect(() => {
-		if (photographyFilter !== undefined) {
-			currentPage = 1
-			loadMedia()
-		}
-	})
-
-	onMount(() => {
-		loadMedia()
-	})
-
-	async function loadMedia(page = 1) {
-		try {
-			loading = true
-			const auth = localStorage.getItem('admin_auth')
-			if (!auth) return
-
-			let url = `/api/media?page=${page}&limit=24`
-
-			if (filterType !== 'all') {
-				url += `&mimeType=${filterType}`
-			}
-
-			if (photographyFilter !== 'all') {
-				url += `&isPhotography=${photographyFilter}`
-			}
-
-			if (searchQuery) {
-				url += `&search=${encodeURIComponent(searchQuery)}`
-			}
-
-			const response = await fetch(url, {
-				headers: { Authorization: `Basic ${auth}` }
-			})
-
-			if (!response.ok) {
-				throw new Error('Failed to load media')
-			}
-
-			const data = await response.json()
-
-			if (page === 1) {
-				media = data.media
-			} else {
-				media = [...media, ...data.media]
-			}
-
-			currentPage = page
-			totalPages = data.pagination.totalPages
-			total = data.pagination.total
-		} catch (error) {
-			console.error('Error loading media:', error)
-		} finally {
-			loading = false
-		}
-	}
-
-	function handleMediaClick(item: Media) {
-		if (mode === 'single') {
-			selectedMedia = [item]
-			dispatch('select', selectedMedia)
-		} else {
-			const isSelected = selectedMedia.some((m) => m.id === item.id)
-
-			if (isSelected) {
-				selectedMedia = selectedMedia.filter((m) => m.id !== item.id)
-			} else {
-				selectedMedia = [...selectedMedia, item]
-			}
-
-			dispatch('select', selectedMedia)
-		}
-	}
-
-	function handleSelectAll() {
-		if (selectedMedia.length === media.length) {
-			selectedMedia = []
-		} else {
-			selectedMedia = [...media]
-		}
-		dispatch('select', selectedMedia)
-	}
-
-	function loadMore() {
-		if (currentPage < totalPages && !loading) {
-			loadMedia(currentPage + 1)
-		}
-	}
-
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B'
-		const k = 1024
-		const sizes = ['B', 'KB', 'MB', 'GB']
-		const i = Math.floor(Math.log(bytes) / Math.log(k))
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
-	}
-
-	function isSelected(item: Media): boolean {
-		return selectedMedia.some((m) => m.id === item.id)
-	}
-
-	// Computed properties
-	const hasMore = $derived(currentPage < totalPages)
-	const showSelectAll = $derived(mode === 'multiple' && media.length > 0)
-	const allSelected = $derived(media.length > 0 && selectedMedia.length === media.length)
-</script>
-
-<div class="media-selector">
-	<!-- Search and Filter Controls -->
-	<div class="controls">
-		<div class="search-filters">
-			<Input type="search" placeholder="Search media files..." bind:value={searchQuery} />
-
-			<select bind:value={filterType} class="filter-select">
-				<option value="all">All Files</option>
-				<option value="image">Images</option>
-				<option value="video">Videos</option>
-			</select>
-
-			<select bind:value={photographyFilter} class="filter-select">
-				<option value="all">All Media</option>
-				<option value="true">Photography</option>
-				<option value="false">Non-Photography</option>
-			</select>
-		</div>
-
-		{#if showSelectAll}
-			<Button variant="ghost" onclick={handleSelectAll}>
-				{allSelected ? 'Clear All' : 'Select All'}
-			</Button>
-		{/if}
-	</div>
-
-	<!-- Results Info -->
-	{#if total > 0}
-		<div class="results-info">
-			<span class="total-count">{total} file{total !== 1 ? 's' : ''} found</span>
-		</div>
-	{/if}
-
-	<!-- Media Grid -->
-	<div class="media-grid-container">
-		{#if loading && media.length === 0}
-			<div class="loading-container">
-				<LoadingSpinner />
-				<p>Loading media...</p>
-			</div>
-		{:else if media.length === 0}
-			<div class="empty-state">
-				<svg
-					width="64"
-					height="64"
-					viewBox="0 0 24 24"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="2" />
-					<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
-					<path d="M3 16l5-5 3 3 4-4 4 4" stroke="currentColor" stroke-width="2" fill="none" />
-				</svg>
-				<h3>No media found</h3>
-				<p>Try adjusting your search or upload some files</p>
-			</div>
-		{:else}
-			<div class="media-grid">
-				{#each media as item (item.id)}
-					<button
-						type="button"
-						class="media-item"
-						class:selected={isSelected(item)}
-						onclick={() => handleMediaClick(item)}
-					>
-						<!-- Thumbnail -->
-						<div class="media-thumbnail">
-							{#if item.mimeType?.startsWith('image/')}
-								<img
-									src={item.mimeType === 'image/svg+xml' ? item.url : item.thumbnailUrl || item.url}
-									alt={item.filename}
-									loading="lazy"
-								/>
-							{:else}
-								<div class="media-placeholder">
-									<svg
-										width="32"
-										height="32"
-										viewBox="0 0 24 24"
-										fill="none"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<rect
-											x="3"
-											y="5"
-											width="18"
-											height="14"
-											rx="2"
-											stroke="currentColor"
-											stroke-width="2"
-										/>
-										<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
-										<path
-											d="M3 16l5-5 3 3 4-4 4 4"
-											stroke="currentColor"
-											stroke-width="2"
-											fill="none"
-										/>
-									</svg>
-								</div>
-							{/if}
-
-							<!-- Selection Indicator -->
-							{#if mode === 'multiple'}
-								<div class="selection-checkbox">
-									<input type="checkbox" checked={isSelected(item)} readonly />
-								</div>
-							{/if}
-
-							<!-- Selected Overlay -->
-							{#if isSelected(item)}
-								<div class="selected-overlay">
-									<svg
-										width="24"
-										height="24"
-										viewBox="0 0 24 24"
-										fill="none"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path
-											d="M9 12l2 2 4-4"
-											stroke="currentColor"
-											stroke-width="2"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-										/>
-									</svg>
-								</div>
-							{/if}
-						</div>
-
-						<!-- Media Info -->
-						<div class="media-info">
-							<div class="media-filename" title={item.filename}>
-								{item.filename}
-							</div>
-							<div class="media-indicators">
-								{#if item.isPhotography}
-									<span class="indicator-pill photography" title="Photography">
-										<svg
-											width="10"
-											height="10"
-											viewBox="0 0 24 24"
-											fill="none"
-											xmlns="http://www.w3.org/2000/svg"
-										>
-											<polygon
-												points="12,2 15.09,8.26 22,9 17,14.74 18.18,21.02 12,17.77 5.82,21.02 7,14.74 2,9 8.91,8.26"
-												fill="currentColor"
-											/>
-										</svg>
-										Photo
-									</span>
-								{/if}
-								{#if item.altText}
-									<span class="indicator-pill alt-text" title="Alt text: {item.altText}">
-										Alt
-									</span>
-								{:else}
-									<span class="indicator-pill no-alt-text" title="No alt text"> No Alt </span>
-								{/if}
-							</div>
-							<div class="media-meta">
-								<span class="file-size">{formatFileSize(item.size)}</span>
-								{#if item.width && item.height}
-									<span class="dimensions">{item.width}×{item.height}</span>
-								{/if}
-							</div>
-						</div>
-					</button>
-				{/each}
-			</div>
-
-			<!-- Load More Button -->
-			{#if hasMore}
-				<div class="load-more-container">
-					<Button variant="ghost" onclick={loadMore} disabled={loading} class="load-more-button">
-						{#if loading}
-							<LoadingSpinner buttonSize="small" />
-							Loading...
-						{:else}
-							Load More
-						{/if}
-					</Button>
-				</div>
-			{/if}
-		{/if}
-	</div>
-</div>
-
-<style lang="scss">
-	.media-selector {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		padding: $unit-3x $unit-4x;
-	}
-
-	.controls {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: $unit-2x;
-		margin-bottom: $unit-3x;
-		flex-shrink: 0;
-	}
-
-	.search-filters {
-		display: flex;
-		gap: $unit-2x;
-		flex: 1;
-		max-width: 600px;
-	}
-
-	.filter-select {
-		padding: $unit $unit-2x;
-		border: 1px solid $grey-80;
-		border-radius: $card-corner-radius;
-		background-color: white;
-		font-size: 0.875rem;
-		min-width: 120px;
-
-		&:focus {
-			outline: none;
-			border-color: $blue-60;
-			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-		}
-	}
-
-	.results-info {
-		margin-bottom: $unit-2x;
-		flex-shrink: 0;
-	}
-
-	.total-count {
-		font-size: 0.875rem;
-		color: $grey-30;
-	}
-
-	.media-grid-container {
-		flex: 1;
-		overflow-y: auto;
-		min-height: 0;
-	}
-
-	.loading-container,
-	.empty-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: $unit-6x;
-		text-align: center;
-		color: $grey-40;
-		min-height: 300px;
-
-		svg {
-			margin-bottom: $unit-2x;
-			color: $grey-60;
-		}
-
-		h3 {
-			margin: 0 0 $unit 0;
-			font-size: 1.125rem;
-			font-weight: 600;
-			color: $grey-20;
-		}
-
-		p {
-			margin: 0;
-			font-size: 0.875rem;
-		}
-	}
-
-	.media-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-		gap: $unit-2x;
-		padding-bottom: $unit-2x;
-	}
-
-	.media-item {
-		display: flex;
-		flex-direction: column;
-		background: white;
-		border: 2px solid $grey-90;
-		border-radius: $card-corner-radius;
-		padding: $unit;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		text-align: left;
-		width: 100%;
-
-		&:hover {
-			border-color: $grey-70;
-			transform: translateY(-1px);
-			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-		}
-
-		&.selected {
-			border-color: $blue-60;
-			background-color: rgba(59, 130, 246, 0.05);
-		}
-
-		&:focus {
-			outline: none;
-			border-color: $blue-60;
-			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-		}
-	}
-
-	.media-thumbnail {
-		position: relative;
-		width: 100%;
-		height: 120px;
-		border-radius: calc($card-corner-radius - 2px);
-		overflow: hidden;
-		background-color: $grey-95;
-		margin-bottom: $unit;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	.media-placeholder {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		color: $grey-60;
-		background-color: $grey-95;
-	}
-
-	.selection-checkbox {
-		position: absolute;
-		top: $unit;
-		left: $unit;
-		z-index: 2;
-
-		input {
-			width: 18px;
-			height: 18px;
-			cursor: pointer;
-		}
-	}
-
-	.selected-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba(59, 130, 246, 0.2);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: $blue-60;
-	}
-
-	.media-info {
-		flex: 1;
-	}
-
-	.media-filename {
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: $grey-10;
-		margin-bottom: $unit-half;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.media-indicators {
-		display: flex;
-		gap: $unit-half;
-		flex-wrap: wrap;
-		margin-bottom: $unit-half;
-	}
-
-	.media-meta {
-		display: flex;
-		gap: $unit;
-		font-size: 0.75rem;
-		color: $grey-40;
-	}
-
-	// Indicator pill styles
-	.indicator-pill {
-		display: inline-flex;
-		align-items: center;
-		gap: $unit-half;
-		padding: 2px $unit;
-		border-radius: 4px;
-		font-size: 0.625rem;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		line-height: 1;
-
-		svg {
-			width: 8px;
-			height: 8px;
-			flex-shrink: 0;
-		}
-
-		&.photography {
-			background-color: rgba(139, 92, 246, 0.1);
-			color: #7c3aed;
-			border: 1px solid rgba(139, 92, 246, 0.2);
-
-			svg {
-				fill: #7c3aed;
-			}
-		}
-
-		&.alt-text {
-			background-color: rgba(34, 197, 94, 0.1);
-			color: #16a34a;
-			border: 1px solid rgba(34, 197, 94, 0.2);
-		}
-
-		&.no-alt-text {
-			background-color: rgba(239, 68, 68, 0.1);
-			color: #dc2626;
-			border: 1px solid rgba(239, 68, 68, 0.2);
-		}
-	}
-
-	.load-more-container {
-		display: flex;
-		justify-content: center;
-		padding: $unit-3x 0;
-	}
-
-	// Responsive adjustments
-	@media (max-width: 768px) {
-		.media-selector {
-			padding: $unit-2x;
-		}
-
-		.controls {
-			flex-direction: column;
-			align-items: stretch;
-			gap: $unit-2x;
-		}
-
-		.search-filters {
-			max-width: none;
-		}
-
-		.media-grid {
-			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-			gap: $unit;
-		}
-
-		.media-thumbnail {
-			height: 100px;
-		}
-	}
-</style>
diff --git a/src/lib/components/admin/UnifiedMediaModal.svelte b/src/lib/components/admin/UnifiedMediaModal.svelte
new file mode 100644
index 0000000..fadd52c
--- /dev/null
+++ b/src/lib/components/admin/UnifiedMediaModal.svelte
@@ -0,0 +1,864 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import AdminFilters from './AdminFilters.svelte'
+	import Select from './Select.svelte'
+	import Input from './Input.svelte'
+	import Button from './Button.svelte'
+	import LoadingSpinner from './LoadingSpinner.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import { InfiniteLoader, LoaderState } from 'svelte-infinite'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		isOpen: boolean
+		mode?: 'single' | 'multiple'
+		fileType?: 'image' | 'video' | 'all'
+		albumId?: number
+		selectedIds?: number[]
+		title?: string
+		confirmText?: string
+		showInAlbumMode?: boolean
+		onSelect?: (media: Media | Media[]) => void
+		onClose?: () => void
+		onSave?: () => void
+	}
+
+	let {
+		isOpen = $bindable(),
+		mode = 'multiple',
+		fileType = 'all',
+		albumId,
+		selectedIds = [],
+		title = '',
+		confirmText = '',
+		showInAlbumMode = false,
+		onSelect,
+		onClose,
+		onSave
+	}: Props = $props()
+
+	// State
+	let selectedMedia = $state<Media[]>([])
+	let media = $state<Media[]>([])
+	let isSaving = $state(false)
+	let error = $state('')
+	let currentPage = $state(1)
+	let totalPages = $state(1)
+	let total = $state(0)
+
+	// Filter states
+	let filterType = $state<string>(fileType === 'all' ? 'all' : fileType)
+	let photographyFilter = $state<string>('all')
+	let searchQuery = $state('')
+	let searchTimeout: ReturnType<typeof setTimeout>
+
+	// Infinite scroll state
+	const loaderState = new LoaderState()
+
+	// Filter options
+	const typeFilterOptions = [
+		{ value: 'all', label: 'All types' },
+		{ value: 'image', label: 'Images' },
+		{ value: 'video', label: 'Videos' }
+	]
+
+	const photographyFilterOptions = [
+		{ value: 'all', label: 'All Media' },
+		{ value: 'true', label: 'Photography' },
+		{ value: 'false', label: 'Non-Photography' }
+	]
+
+	// Computed properties
+	const computedTitle = $derived(
+		title ||
+			(showInAlbumMode
+				? 'Add Photos to Album'
+				: mode === 'single'
+					? 'Select Media'
+					: 'Select Media Files')
+	)
+
+	const computedConfirmText = $derived(
+		confirmText || (showInAlbumMode ? 'Add Photos' : mode === 'single' ? 'Select' : 'Select Files')
+	)
+
+	const canConfirm = $derived(selectedMedia.length > 0 && (!showInAlbumMode || albumId))
+	const mediaCount = $derived(selectedMedia.length)
+
+	const footerText = $derived(
+		showInAlbumMode && canConfirm
+			? `Add ${mediaCount} ${mediaCount === 1 ? 'photo' : 'photos'} to album`
+			: mode === 'single'
+				? canConfirm
+					? '1 item selected'
+					: 'No item selected'
+				: `${mediaCount} item${mediaCount !== 1 ? 's' : ''} selected`
+	)
+
+	// State for preventing flicker
+	let isInitialLoad = $state(true)
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (isOpen) {
+			selectedMedia = []
+			// Don't clear media immediately - let new data replace old
+			currentPage = 1
+			isInitialLoad = true
+			loaderState.reset()
+			loadMedia(1)
+
+			// Initialize selected media from IDs if provided
+			if (selectedIds.length > 0) {
+				// Will be populated when media loads
+			}
+		}
+	})
+
+	// Watch for filter changes
+	let previousFilterType = filterType
+	let previousPhotographyFilter = photographyFilter
+
+	$effect(() => {
+		if (
+			(filterType !== previousFilterType || photographyFilter !== previousPhotographyFilter) &&
+			isOpen
+		) {
+			previousFilterType = filterType
+			previousPhotographyFilter = photographyFilter
+			currentPage = 1
+			media = []
+			loaderState.reset()
+			loadMedia(1)
+		}
+	})
+
+	// Watch for search query changes with debounce
+	$effect(() => {
+		if (searchQuery !== undefined) {
+			clearTimeout(searchTimeout)
+			searchTimeout = setTimeout(() => {
+				currentPage = 1
+				media = []
+				loaderState.reset()
+				loadMedia(1)
+			}, 300)
+		}
+	})
+
+	// Initialize selected media from IDs when media loads
+	$effect(() => {
+		if (selectedIds.length > 0 && media.length > 0) {
+			const preselected = media.filter((item) => selectedIds.includes(item.id))
+			if (preselected.length > 0) {
+				selectedMedia = [...selectedMedia, ...preselected]
+			}
+		}
+	})
+
+	async function loadMedia(page = currentPage) {
+		try {
+			// Short delay to prevent flicker
+			await new Promise((resolve) => setTimeout(resolve, 500))
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			let url = `/api/media?page=${page}&limit=24`
+
+			if (filterType !== 'all') {
+				url += `&mimeType=${filterType}`
+			}
+
+			if (photographyFilter !== 'all') {
+				url += `&isPhotography=${photographyFilter}`
+			}
+
+			if (searchQuery) {
+				url += `&search=${encodeURIComponent(searchQuery)}`
+			}
+
+			// Filter by albumId when we have one and we're not in the "add to album" mode
+			// (In "add to album" mode, we want to see all media to add to the album)
+			if (albumId && !showInAlbumMode) {
+				url += `&albumId=${albumId}`
+			}
+
+			const response = await fetch(url, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to load media')
+			}
+
+			const data = await response.json()
+
+			if (page === 1) {
+				// Only clear media after we have new data to prevent flash
+				media = data.media
+				isInitialLoad = false
+			} else {
+				media = [...media, ...data.media]
+			}
+
+			currentPage = page
+			totalPages = data.pagination.totalPages
+			total = data.pagination.total
+
+			// Update loader state
+			if (currentPage >= totalPages) {
+				loaderState.complete()
+			} else {
+				loaderState.loaded()
+			}
+		} catch (error) {
+			console.error('Error loading media:', error)
+			loaderState.error()
+		}
+	}
+
+	async function loadMore() {
+		if (currentPage < totalPages) {
+			await loadMedia(currentPage + 1)
+		}
+	}
+
+	function handleMediaClick(item: Media) {
+		if (mode === 'single') {
+			selectedMedia = [item]
+		} else {
+			const isSelected = selectedMedia.some((m) => m.id === item.id)
+
+			if (isSelected) {
+				selectedMedia = selectedMedia.filter((m) => m.id !== item.id)
+			} else {
+				selectedMedia = [...selectedMedia, item]
+			}
+		}
+	}
+
+	function isSelected(item: Media): boolean {
+		return selectedMedia.some((m) => m.id === item.id)
+	}
+
+	async function handleConfirm() {
+		if (!canConfirm) return
+
+		// If in album mode, save to album
+		if (showInAlbumMode && albumId) {
+			try {
+				isSaving = true
+				error = ''
+				const auth = localStorage.getItem('admin_auth')
+				if (!auth) return
+
+				const mediaIds = selectedMedia.map((m) => m.id)
+
+				const response = await fetch(`/api/albums/${albumId}/media`, {
+					method: 'POST',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({ mediaIds })
+				})
+
+				if (!response.ok) {
+					throw new Error('Failed to add media to album')
+				}
+
+				handleClose()
+				onSave?.()
+			} catch (err) {
+				console.error('Failed to update album:', err)
+				error = err instanceof Error ? err.message : 'Failed to update album'
+			} finally {
+				isSaving = false
+			}
+		} else {
+			// Regular selection mode
+			if (mode === 'single') {
+				onSelect?.(selectedMedia[0])
+			} else {
+				onSelect?.(selectedMedia)
+			}
+
+			handleClose()
+		}
+	}
+
+	function handleClose() {
+		selectedMedia = []
+		error = ''
+		isOpen = false
+		onClose?.()
+	}
+
+	function handleCancel() {
+		handleClose()
+	}
+</script>
+
+<Modal bind:isOpen onClose={handleClose} size="large" showCloseButton={false}>
+	<div class="unified-media-modal">
+		<!-- Sticky Header -->
+		<div class="modal-header">
+			<div class="header-top">
+				<h2>{computedTitle}</h2>
+				<button class="close-button" onclick={handleClose} aria-label="Close modal">
+					<svg
+						width="20"
+						height="20"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6 6L18 18M6 18L18 6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			{#if error}
+				<div class="error-message">{error}</div>
+			{/if}
+
+			<!-- Filters -->
+			<AdminFilters>
+				{#snippet left()}
+					<Select
+						bind:value={filterType}
+						options={typeFilterOptions}
+						size="small"
+						variant="minimal"
+					/>
+					<Select
+						bind:value={photographyFilter}
+						options={photographyFilterOptions}
+						size="small"
+						variant="minimal"
+					/>
+				{/snippet}
+				{#snippet right()}
+					<Input
+						type="search"
+						bind:value={searchQuery}
+						placeholder="Search files..."
+						size="small"
+						fullWidth={false}
+						pill={true}
+						prefixIcon
+						class="search-input"
+					>
+						<svg
+							slot="prefix"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+							/>
+						</svg>
+					</Input>
+				{/snippet}
+			</AdminFilters>
+		</div>
+
+		<!-- Media Grid -->
+		<div class="media-grid-container">
+			{#if isInitialLoad && media.length === 0}
+				<!-- Loading skeleton -->
+				<div class="media-grid">
+					{#each Array(12) as _, i}
+						<div class="media-item skeleton" aria-hidden="true">
+							<div class="media-thumbnail skeleton-bg"></div>
+						</div>
+					{/each}
+				</div>
+			{:else if media.length === 0 && currentPage === 1}
+				<div class="empty-state">
+					<svg
+						width="64"
+						height="64"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect
+							x="3"
+							y="5"
+							width="18"
+							height="14"
+							rx="2"
+							stroke="currentColor"
+							stroke-width="2"
+						/>
+						<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+						<path d="M3 16l5-5 3 3 4-4 4 4" stroke="currentColor" stroke-width="2" fill="none" />
+					</svg>
+					<h3>No media found</h3>
+					<p>
+						{#if fileType !== 'all'}
+							Try adjusting your filters or search
+						{:else}
+							Try adjusting your search or filters
+						{/if}
+					</p>
+				</div>
+			{:else}
+				<div class="media-grid">
+					{#each media as item, i (item.id)}
+						<button
+							type="button"
+							class="media-item"
+							class:selected={isSelected(item)}
+							onclick={() => handleMediaClick(item)}
+						>
+							<!-- Thumbnail -->
+							<div
+								class="media-thumbnail"
+								class:is-svg={item.mimeType === 'image/svg+xml'}
+								style="background-color: {item.mimeType === 'image/svg+xml'
+									? 'transparent'
+									: item.dominantColor || '#f5f5f5'}"
+							>
+								{#if item.mimeType?.startsWith('image/')}
+									<SmartImage
+										media={item}
+										alt={item.filename}
+										loading={i < 8 ? 'eager' : 'lazy'}
+										class="media-image {item.mimeType === 'image/svg+xml' ? 'svg-image' : ''}"
+										containerWidth={150}
+									/>
+								{:else}
+									<div class="media-placeholder">
+										<svg
+											width="32"
+											height="32"
+											viewBox="0 0 24 24"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<rect
+												x="5"
+												y="3"
+												width="14"
+												height="18"
+												rx="2"
+												stroke="currentColor"
+												stroke-width="2"
+												fill="none"
+											/>
+											<path
+												d="M9 7H15M9 11H15M9 15H13"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+											/>
+										</svg>
+									</div>
+								{/if}
+
+								<!-- Hover Overlay -->
+								<div class="hover-overlay"></div>
+
+								<!-- Selected Indicator -->
+								{#if isSelected(item)}
+									<div class="selected-indicator">
+										<svg
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<path
+												d="M7 13l3 3 7-7"
+												stroke="white"
+												stroke-width="3"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>
+									</div>
+								{/if}
+							</div>
+						</button>
+					{/each}
+				</div>
+
+				<!-- Infinite Loader -->
+				<InfiniteLoader
+					{loaderState}
+					triggerLoad={loadMore}
+					intersectionOptions={{ rootMargin: '0px 0px 200px 0px' }}
+				>
+					<div style="height: 1px;"></div>
+
+					{#snippet loading()}
+						<div class="loading-container">
+							<LoadingSpinner size="medium" text="Loading more..." />
+						</div>
+					{/snippet}
+
+					{#snippet error()}
+						<div class="error-retry">
+							<p class="error-text">Failed to load media</p>
+							<button
+								class="retry-button"
+								onclick={() => {
+									loaderState.reset()
+									loadMore()
+								}}
+							>
+								Try again
+							</button>
+						</div>
+					{/snippet}
+
+					{#snippet noData()}
+						<!-- Empty snippet to hide "No more data" text -->
+					{/snippet}
+				</InfiniteLoader>
+			{/if}
+		</div>
+
+		<!-- Footer -->
+		<div class="modal-footer">
+			<div class="action-summary">
+				<span>{footerText}</span>
+			</div>
+			<div class="action-buttons">
+				<Button variant="ghost" onclick={handleCancel}>Cancel</Button>
+				<Button variant="primary" onclick={handleConfirm} disabled={!canConfirm || isSaving}>
+					{#if isSaving}
+						<LoadingSpinner buttonSize="small" />
+						{showInAlbumMode ? 'Adding...' : 'Selecting...'}
+					{:else}
+						{computedConfirmText}
+					{/if}
+				</Button>
+			</div>
+		</div>
+	</div>
+</Modal>
+
+<style lang="scss">
+	.unified-media-modal {
+		display: flex;
+		flex-direction: column;
+		min-height: 600px;
+		position: relative;
+		padding: 0;
+	}
+
+	.modal-header {
+		position: sticky;
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		top: 0;
+		background: white;
+		z-index: 10;
+		padding: $unit-3x $unit-3x 0 $unit-3x;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+		h2 {
+			margin: 0;
+			font-size: 1.5rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(.admin-filters) {
+			padding: 0;
+		}
+	}
+
+	.header-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $unit-2x;
+	}
+
+	.close-button {
+		width: 32px;
+		height: 32px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+		padding: 0;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+	}
+
+	.error-message {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+		padding: $unit-2x;
+		border-radius: $unit;
+		border: 1px solid rgba(239, 68, 68, 0.2);
+		margin-bottom: $unit-2x;
+	}
+
+	.media-grid-container {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		padding: 0 $unit-3x;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-6x;
+		text-align: center;
+		color: $grey-40;
+		min-height: 400px;
+
+		svg {
+			color: $grey-70;
+			margin-bottom: $unit-2x;
+		}
+
+		h3 {
+			margin: 0 0 $unit 0;
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: $grey-30;
+		}
+
+		p {
+			margin: 0;
+			color: $grey-50;
+		}
+	}
+
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: $unit-2x;
+		padding: $unit-3x 0;
+	}
+
+	.media-item {
+		position: relative;
+		aspect-ratio: 1;
+		background: $grey-95;
+		border: none;
+		border-radius: $unit-2x;
+		overflow: hidden;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		padding: 0;
+
+		&:hover .hover-overlay {
+			opacity: 1;
+		}
+	}
+
+	.media-thumbnail {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		transition: background-color 0.3s ease;
+
+		:global(.media-image) {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			animation: fadeIn 0.3s ease-in-out;
+		}
+
+		&.is-svg {
+			padding: $unit-2x;
+			box-sizing: border-box;
+			background-color: $grey-95 !important;
+
+			:global(.svg-image) {
+				object-fit: contain !important;
+			}
+		}
+	}
+
+	.media-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: $grey-60;
+	}
+
+	.hover-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(255, 255, 255, 0.1);
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		pointer-events: none;
+	}
+
+	.selected-indicator {
+		position: absolute;
+		top: $unit;
+		right: $unit;
+		width: 28px;
+		height: 28px;
+		background: $blue-50;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	.loading-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: $unit-4x;
+	}
+
+	.error-retry {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit-2x;
+		padding: $unit-4x;
+
+		.error-text {
+			color: $grey-40;
+			margin: 0;
+		}
+
+		.retry-button {
+			padding: $unit $unit-2x;
+			background: white;
+			border: 1px solid $grey-80;
+			border-radius: $unit;
+			color: $grey-20;
+			font-size: 0.875rem;
+			cursor: pointer;
+			transition: all 0.2s ease;
+
+			&:hover {
+				background: $grey-95;
+				border-color: $grey-70;
+			}
+		}
+	}
+
+	.modal-footer {
+		position: sticky;
+		bottom: 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: $unit-3x;
+		padding: $unit-3x $unit-4x $unit-4x;
+		border-top: 1px solid $grey-85;
+		background: white;
+		z-index: 10;
+		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+	}
+
+	.action-summary {
+		font-size: 0.875rem;
+		color: $grey-30;
+		flex: 1;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: $unit-2x;
+	}
+
+	// Match search input font size to select dropdowns
+	:global(.search-input .input) {
+		font-size: 13px !important;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	// Skeleton loader styles
+	.skeleton {
+		pointer-events: none;
+		cursor: default;
+	}
+
+	.skeleton-bg {
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: shimmer 1.5s infinite;
+	}
+
+	@keyframes shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	.media-image-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: $unit;
+		text-align: center;
+		font-size: 0.75rem;
+		color: $grey-50;
+		word-break: break-word;
+	}
+
+	// Hide the infinite scroll intersection target
+	:global(.infinite-intersection-target) {
+		height: 0 !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		visibility: hidden;
+	}
+</style>
diff --git a/src/lib/stores/media-selection.ts b/src/lib/stores/media-selection.ts
new file mode 100644
index 0000000..66bb488
--- /dev/null
+++ b/src/lib/stores/media-selection.ts
@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store'
+import type { Media } from '@prisma/client'
+
+interface MediaSelectionState {
+	isOpen: boolean
+	mode: 'single' | 'multiple'
+	fileType?: 'image' | 'video' | 'all'
+	albumId?: number
+	onSelect?: (media: Media | Media[]) => void
+	onClose?: () => void
+}
+
+function createMediaSelectionStore() {
+	const { subscribe, set, update } = writable<MediaSelectionState>({
+		isOpen: false,
+		mode: 'single',
+		fileType: 'all'
+	})
+
+	return {
+		subscribe,
+		open: (options: Partial<MediaSelectionState>) => {
+			update((state) => ({
+				...state,
+				...options,
+				isOpen: true
+			}))
+		},
+		close: () => {
+			update((state) => ({
+				...state,
+				isOpen: false,
+				onSelect: undefined,
+				onClose: undefined
+			}))
+		}
+	}
+}
+
+export const mediaSelectionStore = createMediaSelectionStore()