diff --git a/src/app.html b/src/app.html
index f273cc5..a047305 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Aurora Records</title>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 877af38..d303b46 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -23,7 +23,7 @@
 	}
 </script>
 
-<header class="sticky top-0 z-20 flex items-center gap-3 px-4 py-3 border-b" style="border-color: var(--border); background: var(--bg-card);">
+<header class="flex items-center gap-3 px-4 py-3 border-b shrink-0" style="border-color: var(--border); background: var(--bg-card);">
 	<h1 class="font-bold whitespace-nowrap">Aurora Records</h1>
 
 	{#if roster.characters.length > 0}
diff --git a/src/lib/components/OutputPanel.svelte b/src/lib/components/OutputPanel.svelte
index 92b4a07..b20b30a 100644
--- a/src/lib/components/OutputPanel.svelte
+++ b/src/lib/components/OutputPanel.svelte
@@ -23,7 +23,7 @@
 	);
 </script>
 
-<div class="flex flex-col h-full rounded border" style="border-color: var(--border); background: var(--bg-card);">
+<div class="flex flex-col h-full min-h-0 rounded border" style="border-color: var(--border); background: var(--bg-card);">
 	<div class="flex border-b" style="border-color: var(--border);">
 		{#each tabs as tab}
 			<button
diff --git a/src/lib/components/OutputTab.svelte b/src/lib/components/OutputTab.svelte
index a0815af..5ea434a 100644
--- a/src/lib/components/OutputTab.svelte
+++ b/src/lib/components/OutputTab.svelte
@@ -16,7 +16,7 @@
 	}
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full min-h-0">
 	<div class="flex items-center justify-between px-3 py-2 text-sm" style="color: var(--text-muted);">
 		<span>{wordCount} words</span>
 		<button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">
diff --git a/src/lib/components/RecordCard.svelte b/src/lib/components/RecordCard.svelte
index 7d1830d..793f468 100644
--- a/src/lib/components/RecordCard.svelte
+++ b/src/lib/components/RecordCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition';
 	import { ChevronDown } from 'lucide-svelte';
 	import type { RecordDef } from '$lib/types';
 	import DynamicField from './fields/DynamicField.svelte';
@@ -25,11 +26,11 @@
 <section class="rounded border" style="border-color: var(--border); background: var(--bg-card);">
 	<button
 		onclick={() => { expanded = !expanded; }}
-		class="flex items-center w-full px-4 py-3 text-left gap-3"
+		class="flex items-center w-full px-4 py-3 text-left gap-3 min-h-[44px]"
 	>
 		<ChevronDown
 			size={16}
-			class="transition-transform shrink-0"
+			class="shrink-0 transition-transform duration-200"
 			style="transform: rotate({expanded ? '0' : '-90'}deg); color: var(--text-muted);"
 		/>
 		<div class="flex-1 min-w-0">
@@ -51,7 +52,7 @@
 	</button>
 
 	{#if expanded}
-		<div class="px-4 pb-4 flex flex-col gap-4">
+		<div transition:slide={{ duration: 150 }} class="px-4 pb-4 flex flex-col gap-4">
 			{#each record.fields as field}
 				<DynamicField
 					{field}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 72c5143..cc1051a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { Eye, PenLine } from 'lucide-svelte';
 	import Header from '$lib/components/Header.svelte';
 	import SchemaForm from '$lib/components/SchemaForm.svelte';
 	import OutputPanel from '$lib/components/OutputPanel.svelte';
@@ -8,6 +9,7 @@
 	import { presets } from '$lib/presets';
 
 	let importData = $state<string | null>(null);
+	let mobileView = $state<'form' | 'preview'>('form');
 
 	onMount(() => {
 		const hash = window.location.hash.slice(1);
@@ -22,22 +24,38 @@
 	}
 </script>
 
-<div class="min-h-screen flex flex-col">
+<div class="h-dvh flex flex-col overflow-hidden">
 	<Header />
 
 	{#if importData}
-		<ImportModal encoded={importData} onClose={closeImport} />
+		<div class="flex-1 overflow-y-auto">
+			<ImportModal encoded={importData} onClose={closeImport} />
+		</div>
 	{:else if roster.active}
 		{@const char = roster.active}
-		<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr]">
-			<div class="p-4">
+		<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr] overflow-hidden relative">
+			<div class="overflow-y-auto p-4 {mobileView === 'preview' ? 'hidden lg:block' : ''}">
 				<div class="max-w-xl mx-auto">
 					<SchemaForm character={char} />
 				</div>
 			</div>
-			<div class="lg:sticky lg:top-[49px] lg:max-h-[calc(100vh-49px)] overflow-y-auto p-4">
+			<div class="p-4 min-h-0 flex flex-col {mobileView === 'form' ? 'hidden lg:flex' : ''}">
 				<OutputPanel character={char} />
 			</div>
+
+			<div class="fixed bottom-4 right-4 lg:hidden z-10">
+				<button
+					onclick={() => { mobileView = mobileView === 'form' ? 'preview' : 'form'; }}
+					class="flex items-center gap-2 px-3 py-2 rounded-full shadow-lg text-sm"
+					style="background: var(--bg-card); border: 1px solid var(--border); color: var(--text);"
+				>
+					{#if mobileView === 'form'}
+						<Eye size={16} /> Preview
+					{:else}
+						<PenLine size={16} /> Edit
+					{/if}
+				</button>
+			</div>
 		</main>
 	{:else}
 		<main class="flex-1 flex flex-col items-center justify-center gap-4">
