diff --git a/src/app.html b/src/app.html
index 745dc8e..e74f1f3 100644
--- a/src/app.html
+++ b/src/app.html
@@ -16,11 +16,11 @@
 		<meta property="og:image" content="/icons/icon-512.png" />
 		<link rel="manifest" href="/manifest.json" />
 		<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+		<link rel="icon" id="dynamic-favicon" type="image/svg+xml" href="/icon/favicon.svg" />
 		<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
-		<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@400;600;700;800&family=Unbounded:wght@800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet" />
 		%sveltekit.head%
 		<script>
 			(function() {
@@ -32,8 +32,10 @@
 				if (a) {
 					try {
 						var c = JSON.parse(decodeURIComponent(a[1]));
-						document.documentElement.style.setProperty('--accent-primary', c.hex);
-						document.documentElement.style.setProperty('--accent-primary-dark', c.dark);
+						if (/^#[0-9a-fA-F]{3,8}$/.test(c.hex) && /^#[0-9a-fA-F]{3,8}$/.test(c.dark)) {
+							document.documentElement.style.setProperty('--accent-primary', c.hex);
+							document.documentElement.style.setProperty('--accent-primary-dark', c.dark);
+						}
 					} catch(e) { /* ignore malformed cookie */ }
 				}
 			})();
diff --git a/src/lib/__tests__/phone.test.ts b/src/lib/__tests__/phone.test.ts
new file mode 100644
index 0000000..76ad329
--- /dev/null
+++ b/src/lib/__tests__/phone.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { rawDigits, formatPhone, toE164 } from '../phone';
+
+describe('rawDigits', () => {
+	it('strips non-digit characters', () => {
+		expect(rawDigits('(555) 123-4567')).toBe('5551234567');
+	});
+
+	it('returns empty string for empty input', () => {
+		expect(rawDigits('')).toBe('');
+	});
+
+	it('returns digits only from mixed input', () => {
+		expect(rawDigits('+1 (555) 123-4567')).toBe('15551234567');
+	});
+
+	it('passes through pure digit strings unchanged', () => {
+		expect(rawDigits('1234567890')).toBe('1234567890');
+	});
+});
+
+describe('formatPhone', () => {
+	it('returns empty string for no digits', () => {
+		expect(formatPhone('')).toBe('');
+	});
+
+	it('formats 1-3 digits with opening paren', () => {
+		expect(formatPhone('5')).toBe('(5');
+		expect(formatPhone('55')).toBe('(55');
+		expect(formatPhone('555')).toBe('(555');
+	});
+
+	it('formats 4-6 digits with area code and space', () => {
+		expect(formatPhone('5551')).toBe('(555) 1');
+		expect(formatPhone('55512')).toBe('(555) 12');
+		expect(formatPhone('555123')).toBe('(555) 123');
+	});
+
+	it('formats 7-10 digits with full formatting', () => {
+		expect(formatPhone('5551234')).toBe('(555) 123-4');
+		expect(formatPhone('55512345')).toBe('(555) 123-45');
+		expect(formatPhone('555123456')).toBe('(555) 123-456');
+		expect(formatPhone('5551234567')).toBe('(555) 123-4567');
+	});
+
+	it('truncates digits beyond 10', () => {
+		expect(formatPhone('55512345678')).toBe('(555) 123-4567');
+	});
+});
+
+describe('toE164', () => {
+	it('converts formatted phone to E.164', () => {
+		expect(toE164('(555) 123-4567')).toBe('+15551234567');
+	});
+
+	it('converts raw digits to E.164', () => {
+		expect(toE164('5551234567')).toBe('+15551234567');
+	});
+
+	it('handles empty string', () => {
+		expect(toE164('')).toBe('+1');
+	});
+
+	it('handles partial input', () => {
+		expect(toE164('(555')).toBe('+1555');
+	});
+});
diff --git a/src/lib/components/ActivitySheet.svelte b/src/lib/components/ActivitySheet.svelte
index c72a5e5..3106380 100644
--- a/src/lib/components/ActivitySheet.svelte
+++ b/src/lib/components/ActivitySheet.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { goto, pushState } from '$app/navigation';
+	import { pushState } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { relativeTime } from '$lib/utils';
 	import { fetchUnreadCount } from '$lib/stores/notifications';
+	import { viewClipSignal, openCommentsSignal } from '$lib/stores/toasts';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import BellIcon from 'phosphor-svelte/lib/BellIcon';
 
@@ -10,7 +11,7 @@
 
 	interface Notification {
 		id: string;
-		type: 'reaction' | 'comment' | 'mention';
+		type: 'reaction' | 'comment' | 'reply' | 'mention';
 		clipId: string;
 		emoji: string | null;
 		commentPreview: string | null;
@@ -79,6 +80,7 @@
 		return () => {
 			document.body.style.overflow = '';
 			window.removeEventListener('popstate', handlePopState);
+			if (fadeTimer) clearTimeout(fadeTimer);
 			if (!closedViaBack) history.back();
 		};
 	});
@@ -88,6 +90,8 @@
 		loadNotifications();
 	});
 
+	let fadeTimer: ReturnType<typeof setTimeout> | null = null;
+
 	async function loadNotifications() {
 		const res = await fetch('/api/notifications?limit=50');
 		if (res.ok) {
@@ -96,18 +100,20 @@
 		}
 		loading = false;
 
-		// Mark all as read on server
-		await fetch('/api/notifications/mark-read', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ all: true })
-		});
-		fetchUnreadCount();
-
-		// Fade out unread backgrounds after a short delay
-		setTimeout(() => {
-			items = items.map((n) => ({ ...n, read: true }));
-		}, 1000);
+		// Only mark as read if fetch succeeded
+		if (res.ok) {
+			await fetch('/api/notifications/mark-read', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ all: true })
+			});
+			fetchUnreadCount();
+
+			// Fade out unread backgrounds after a short delay
+			fadeTimer = setTimeout(() => {
+				items = items.map((n) => ({ ...n, read: true }));
+			}, 1000);
+		}
 	}
 
 	function dismiss() {
@@ -115,13 +121,15 @@
 		setTimeout(() => ondismiss(), 300);
 	}
 
-	function handleNotificationClick(e: Event, clipId: string) {
+	function handleNotificationClick(e: Event, n: Notification) {
 		e.preventDefault();
 		visible = false;
 		setTimeout(() => {
 			ondismiss();
-			// eslint-disable-next-line svelte/no-navigation-without-resolve -- query params appended to resolved base
-			goto(`${resolve('/')}?clip=${clipId}`);
+			viewClipSignal.set(n.clipId);
+			if (n.type !== 'reaction') {
+				openCommentsSignal.set(n.clipId);
+			}
 		}, 300);
 	}
 
@@ -132,6 +140,9 @@
 		if (n.type === 'mention') {
 			return 'mentioned you';
 		}
+		if (n.type === 'reply') {
+			return 'replied to your comment';
+		}
 		return 'commented on your clip';
 	}
 </script>
@@ -170,7 +181,7 @@
 								class="notification-item"
 								class:unread={!n.read}
 								style="animation-delay: {Math.min(i, 15) * 30}ms"
-								onclick={(e) => handleNotificationClick(e, n.clipId)}
+								onclick={(e) => handleNotificationClick(e, n)}
 							>
 								<div class="actor-avatar">
 									{#if n.actorAvatar}
diff --git a/src/lib/components/InstallBanner.svelte b/src/lib/components/InstallBanner.svelte
index fd05d91..184d2c4 100644
--- a/src/lib/components/InstallBanner.svelte
+++ b/src/lib/components/InstallBanner.svelte
@@ -7,7 +7,6 @@
 	} from '$lib/stores/pwa';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import ExportIcon from 'phosphor-svelte/lib/ExportIcon';
-	import DownloadSimpleIcon from 'phosphor-svelte/lib/DownloadSimpleIcon';
 
 	let showingInstructions = $state(false);
 
@@ -64,23 +63,17 @@
 			{/if}
 		</div>
 	{:else}
-		<!-- Android / Chrome install banner -->
+		<!-- Android / Chrome smart app banner -->
 		<div class="install-banner" role="alert">
-			<div class="install-content">
-				<div class="install-icon">
-					<DownloadSimpleIcon size={18} />
-				</div>
-				<div class="install-text">
-					<strong>Install scrolly</strong>
-					<span>Add to your home screen for the best experience</span>
-				</div>
-			</div>
-			<div class="install-actions">
-				<button class="install-btn" onclick={handleInstall}>Install</button>
-				<button class="dismiss-btn" onclick={dismissInstall} aria-label="Dismiss">
-					<XIcon size={16} />
-				</button>
+			<button class="banner-close" onclick={dismissInstall} aria-label="Close">
+				<XIcon size={14} />
+			</button>
+			<img class="banner-icon" src="/icons/icon-192.png" alt="" />
+			<div class="banner-text">
+				<strong>scrolly</strong>
+				<span>Your crew's private feed</span>
 			</div>
+			<button class="banner-action" onclick={handleInstall}>INSTALL</button>
 		</div>
 	{/if}
 {/if}
@@ -237,110 +230,87 @@
 		opacity: 0.6;
 	}
 
-	/* ========== Android install banner ========== */
+	/* ========== Android smart app banner ========== */
 
 	.install-banner {
 		position: fixed;
-		bottom: calc(80px + env(safe-area-inset-bottom) + var(--space-sm));
-		left: 50%;
-		transform: translateX(-50%);
+		bottom: 0;
+		left: 0;
+		right: 0;
 		z-index: 200;
-		width: calc(100% - var(--space-lg) * 2);
-		max-width: 400px;
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
-		gap: var(--space-sm);
-		padding: var(--space-md);
+		gap: var(--space-md);
+		padding: var(--space-md) var(--space-lg);
+		padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
 		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-		animation: slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
-	}
-
-	.install-content {
-		display: flex;
-		align-items: center;
-		gap: var(--space-sm);
-		flex: 1;
-		min-width: 0;
+		border-top: 1px solid var(--border);
+		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+		animation: slide-up 0.3s cubic-bezier(0.2, 0, 0, 1);
 	}
 
-	.install-icon {
+	.banner-close {
 		flex-shrink: 0;
-		width: 32px;
-		height: 32px;
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		padding: 4px;
+		margin: -4px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
-		border-radius: var(--radius-sm);
-		color: var(--accent-primary);
 	}
 
-	.install-icon :global(svg) {
-		width: 18px;
-		height: 18px;
+	.banner-close :global(svg) {
+		width: 14px;
+		height: 14px;
 	}
 
-	.install-text {
+	.banner-icon {
+		flex-shrink: 0;
+		width: 40px;
+		height: 40px;
+		border-radius: var(--radius-sm);
+		object-fit: cover;
+	}
+
+	.banner-text {
+		flex: 1;
+		min-width: 0;
 		display: flex;
 		flex-direction: column;
 		gap: 1px;
-		min-width: 0;
 	}
 
-	.install-text strong {
-		font-family: var(--font-display);
-		font-size: 0.8125rem;
-		font-weight: 700;
+	.banner-text strong {
+		font-size: 0.875rem;
+		font-weight: 600;
 		color: var(--text-primary);
+		line-height: 1.3;
 	}
 
-	.install-text span {
+	.banner-text span {
 		font-size: 0.6875rem;
 		color: var(--text-muted);
 		line-height: 1.3;
 	}
 
-	.install-actions {
-		display: flex;
-		align-items: center;
-		gap: var(--space-xs);
+	.banner-action {
 		flex-shrink: 0;
-	}
-
-	.install-btn {
-		padding: var(--space-xs) var(--space-md);
-		background: var(--accent-primary);
-		color: var(--bg-primary);
+		background: none;
 		border: none;
-		border-radius: var(--radius-full);
-		font-size: 0.75rem;
+		color: var(--accent-blue);
+		font-size: 0.8125rem;
 		font-weight: 700;
+		letter-spacing: 0.04em;
 		cursor: pointer;
+		padding: var(--space-xs) var(--space-sm);
 		font-family: var(--font-body);
 	}
 
-	.install-btn:active {
-		transform: scale(0.97);
-	}
-
-	.dismiss-btn {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		cursor: pointer;
-		padding: 4px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.dismiss-btn :global(svg) {
-		width: 16px;
-		height: 16px;
+	.banner-action:active {
+		opacity: 0.6;
 	}
 
 	/* ========== Animations ========== */
@@ -359,11 +329,11 @@
 	@keyframes slide-up {
 		from {
 			opacity: 0;
-			transform: translateX(-50%) translateY(12px);
+			transform: translateY(100%);
 		}
 		to {
 			opacity: 1;
-			transform: translateX(-50%) translateY(0);
+			transform: translateY(0);
 		}
 	}
 
diff --git a/src/lib/components/ReelItem.svelte b/src/lib/components/ReelItem.svelte
index 2f3074f..769034c 100644
--- a/src/lib/components/ReelItem.svelte
+++ b/src/lib/components/ReelItem.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { get } from 'svelte/store';
 	import { isPointerFine } from '$lib/gestures';
 	import { fetchUnreadCount } from '$lib/stores/notifications';
+	import { openCommentsSignal } from '$lib/stores/toasts';
 	import { globalMuted } from '$lib/stores/mute';
 	import { globalPlaybackSpeed, stepSpeedUp, stepSpeedDown } from '$lib/stores/playbackSpeed';
 	import { connectNormalizer } from '$lib/audio/normalizer';
@@ -65,18 +65,12 @@
 
 	let itemEl: HTMLDivElement | null = $state(null);
 	let hasMarkedWatched = $state(false);
-	let muted = $state(get(globalMuted));
+	let muted = $derived($globalMuted);
 	let showMuteIndicator = $state(false);
 	let muteIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
-	let speed = $state(get(globalPlaybackSpeed));
+	let speed = $derived($globalPlaybackSpeed);
 	let showSpeedIndicator = $state(false);
 	let speedIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
-	const unsubMute = globalMuted.subscribe((v) => {
-		muted = v;
-	});
-	const unsubSpeed = globalPlaybackSpeed.subscribe((v) => {
-		speed = v;
-	});
 
 	let isDesktop = $state(false);
 	let videoEl: HTMLVideoElement | null = $state(null);
@@ -115,8 +109,9 @@
 		isDesktop = isPointerFine();
 	});
 	onDestroy(() => {
-		unsubMute();
-		unsubSpeed();
+		if (muteIndicatorTimer) clearTimeout(muteIndicatorTimer);
+		if (speedIndicatorTimer) clearTimeout(speedIndicatorTimer);
+		if (playIndicatorTimer) clearTimeout(playIndicatorTimer);
 		if (scrubberTimerId) clearTimeout(scrubberTimerId);
 		sendWatchPercent(clip.id, maxPercent);
 	});
@@ -156,6 +151,14 @@
 			maxPercent = 0;
 		}
 	});
+	// Deep-link: open comments sheet when signaled (e.g., from push notification)
+	$effect(() => {
+		const target = $openCommentsSignal;
+		if (target === clip.id && active) {
+			openCommentsSignal.set(null);
+			showComments = true;
+		}
+	});
 
 	$effect(() => {
 		const el = videoEl ?? audioEl;
diff --git a/src/lib/components/settings/GroupNameEdit.svelte b/src/lib/components/settings/GroupNameEdit.svelte
index e2e2936..2f6eb17 100644
--- a/src/lib/components/settings/GroupNameEdit.svelte
+++ b/src/lib/components/settings/GroupNameEdit.svelte
@@ -4,21 +4,28 @@
 
 	const { initialName }: { initialName: string } = $props();
 
-	let savedName = $state('');
-	let name = $state('');
-	let initialized = false;
+	let savedName = $state(initialName);
+	let name = $state(initialName);
+	let saving = $state(false);
+	let saved = $state(false);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+	let savedFeedbackTimer: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
-		if (!initialized) {
-			savedName = initialName;
-			name = initialName;
-			initialized = true;
-		}
+		return () => {
+			if (debounceTimer) clearTimeout(debounceTimer);
+			if (savedFeedbackTimer) clearTimeout(savedFeedbackTimer);
+		};
 	});
-	let saving = $state(false);
-	let saved = $state(false);
+
+	function debouncedSave() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => save(), 800);
+	}
 
 	async function save() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = null;
 		const trimmed = name.trim();
 		if (!trimmed || trimmed === savedName) {
 			name = savedName;
@@ -37,7 +44,7 @@
 				savedName = data.name;
 				name = data.name;
 				saved = true;
-				setTimeout(() => (saved = false), 2000);
+				savedFeedbackTimer = setTimeout(() => (saved = false), 2000);
 			} else {
 				name = savedName;
 				toast.error('Failed to save group name');
@@ -59,6 +66,7 @@
 		type="text"
 		bind:value={name}
 		onblur={save}
+		oninput={debouncedSave}
 		onkeydown={handleKeydown}
 		maxlength="50"
 		disabled={saving}
diff --git a/src/lib/components/settings/NotificationSettings.svelte b/src/lib/components/settings/NotificationSettings.svelte
index 4be87a4..40cf817 100644
--- a/src/lib/components/settings/NotificationSettings.svelte
+++ b/src/lib/components/settings/NotificationSettings.svelte
@@ -16,7 +16,7 @@
 		prefs: NotificationPrefs;
 		prefsLoading: boolean;
 		onTogglePush: () => void;
-		onUpdatePref: (key: string, value: boolean) => void;
+		onUpdatePref: (key: keyof NotificationPrefs, value: boolean) => void;
 	} = $props();
 </script>
 
diff --git a/src/lib/components/settings/UsernameEdit.svelte b/src/lib/components/settings/UsernameEdit.svelte
new file mode 100644
index 0000000..d8dadd8
--- /dev/null
+++ b/src/lib/components/settings/UsernameEdit.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { toast } from '$lib/stores/toasts';
+	import { saveUsername } from '$lib/settingsApi';
+	import CheckIcon from 'phosphor-svelte/lib/CheckIcon';
+
+	const { initialUsername }: { initialUsername: string } = $props();
+
+	let savedName = $state(initialUsername);
+	let name = $state(initialUsername);
+	let saving = $state(false);
+	let saved = $state(false);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+	let savedFeedbackTimer: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		return () => {
+			if (debounceTimer) clearTimeout(debounceTimer);
+			if (savedFeedbackTimer) clearTimeout(savedFeedbackTimer);
+		};
+	});
+
+	function debouncedSave() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => save(), 800);
+	}
+
+	async function save() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = null;
+		const trimmed = name.trim();
+		if (!trimmed || trimmed === savedName) {
+			name = savedName;
+			return;
+		}
+
+		saving = true;
+		try {
+			const result = await saveUsername(trimmed);
+			if (result) {
+				savedName = result.username;
+				name = result.username;
+				saved = true;
+				savedFeedbackTimer = setTimeout(() => (saved = false), 2000);
+			} else {
+				name = savedName;
+				toast.error('Failed to save username');
+			}
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			(e.target as HTMLInputElement).blur();
+		}
+	}
+</script>
+
+<div class="name-edit">
+	<input
+		type="text"
+		bind:value={name}
+		onblur={save}
+		oninput={debouncedSave}
+		onkeydown={handleKeydown}
+		maxlength="30"
+		disabled={saving}
+		placeholder="Your name"
+	/>
+	{#if saved}
+		<span class="saved-indicator">
+			<CheckIcon size={18} weight="bold" />
+		</span>
+	{/if}
+</div>
+
+<style>
+	.name-edit {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	input {
+		width: 100%;
+		padding: var(--space-sm) var(--space-md);
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--radius-sm);
+		font-family: var(--font-display);
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		text-align: center;
+		transition: border-color 0.2s ease;
+	}
+
+	input:hover {
+		border-color: var(--border);
+	}
+
+	input:focus {
+		outline: none;
+		border-color: var(--accent-primary);
+		background: var(--bg-surface);
+	}
+
+	input:disabled {
+		opacity: 0.5;
+	}
+
+	input::placeholder {
+		color: var(--text-muted);
+	}
+
+	.saved-indicator {
+		position: absolute;
+		right: var(--space-sm);
+		color: var(--success);
+		display: flex;
+		align-items: center;
+		animation: fade-in 0.2s ease;
+	}
+
+	.saved-indicator :global(svg) {
+		width: 18px;
+		height: 18px;
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>
diff --git a/src/lib/iconSvg.ts b/src/lib/iconSvg.ts
new file mode 100644
index 0000000..c1d2936
--- /dev/null
+++ b/src/lib/iconSvg.ts
@@ -0,0 +1,73 @@
+import { getAccentColor } from '$lib/colors';
+
+// SVG path data for the scrolly glyph (extracted from src/lib/assets/favicon.svg)
+const GLYPH_PATHS =
+	'<path d="M28100 51040 c-1050 -220 -1860 -680 -2710 -1530 -840 -840 -1280 -1610 -1540 -2720 -440 -1890 140 -3880 1550 -5290 1110 -1110 2330 -1600 4000 -1600 1610 0 2790 500 3960 1660 1730 1710 2140 4270 1070 6520 -350 740 -1690 2100 -2410 2460 -1200 610 -2610 790 -3920 500z"/>' +
+	'<path d="M22910 39350 c-1430 -400 -2850 -1590 -3580 -3010 -670 -1300 -1580 -4350 -1970 -6660 -500 -2890 -360 -7860 280 -9690 680 -1970 1960 -3000 4090 -3280 470 -70 2980 -110 6280 -110 3020 0 5490 -30 5490 -70 0 -570 1350 -12920 1450 -13290 410 -1470 2100 -2480 3580 -2150 810 180 1550 670 1990 1310 710 1020 710 660 -210 9650 -590 5700 -880 8200 -1020 8690 -170 590 -290 780 -770 1260 -980 970 -720 940 -6960 980l-5390 30 70 1120c40 620 130 1590 200 2170 100 790 110 1090 20 1220 -60 90 -1180 1430 -2490 2970 -1300 1540 -2470 2970 -2600 3180 -180 310 -220 530 -220 1190 0 720 30 860 300 1290 430 690 1070 1060 1960 1130 830 60 1370 -120 1890 -610 190 -190 1500 -1700 2890 -3360 1400 -1660 2590 -3000 2650 -2970 60 20 1800 750 3860 1610 2060 860 3940 1590 4170 1620 230 30 550 10 710 -50 270 -90 330 -70 600 210 160 180 350 430 420 570 180 340 170 1290 -20 1650 -480 910 -1560 1360 -2480 1030 -180 -60 -1050 -650 -1930 -1300 -880 -660 -2280 -1710 -3130 -2330l-1530 -1140 -2480 3350c-2370 3200 -2500 3360 -3030 3620 -470 230 -700 270 -1550 290 -660 20 -1180 -20 -1540 -120z"/>' +
+	'<path d="M23300 36810 c-1020 -210 -1700 -1020 -1700 -2010 0 -620 200 -980 1170 -2110 490 -570 1990 -2340 3330 -3940 1340 -1590 2510 -2960 2590 -3030 370 -290 740 -430 1240 -440 460 -10 1030 200 5320 1980 3260 1350 4910 2090 5140 2290 420 370 710 970 710 1500 0 1160 -1190 2200 -2290 2000 -200 -40 -2130 -810 -4300 -1710 -2170 -910 -3950 -1630 -3960 -1620 -170 260 -5030 5980 -5390 6360 -370 390 -640 570 -1000 670 -270 80 -500 140 -500 140 -10 -10 -170 -40 -360 -80z"/>' +
+	'<path d="M42380 35030 l-1870 -1870 370 -410c200 -230 420 -490 470 -590 90 -140 390 120 2080 1820 1280 1290 1970 2050 1970 2190 0 370 -380 730 -780 730 -330 0 -490 -130 -2240 -1870z"/>' +
+	'<path d="M6750 25260 c-370 -160 -700 -520 -840 -890 -80 -200 -110 -4040 -110 -12330l0 -12040 9520 20 9510 30 720 3450c400 1900 770 3700 840 4010 120 570 120 570 590 690 1790 450 3460 1520 4220 2700 460 730 600 1380 600 2820l0 1280 -8570 0 -8580 0 -490 280c-950 520 -900 270 -960 4900 -60 4640 -40 4560 -900 5000 -420 210 -550 220 -2850 220 -1780 -10 -2480 -40 -2700 -140z"/>';
+
+/**
+ * Generate an SVG icon with the scrolly glyph in the given accent color.
+ */
+export function generateIconSvg(
+	accentHex: string,
+	options: { maskable?: boolean; monochrome?: boolean } = {}
+): string {
+	const { maskable = false, monochrome = false } = options;
+
+	if (monochrome) {
+		return [
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">',
+			'<g transform="translate(0,512) scale(0.01,-0.01)" fill="#FFFFFF" stroke="none">',
+			GLYPH_PATHS,
+			'</g></svg>'
+		].join('');
+	}
+
+	const rx = maskable ? '' : ' rx="96"';
+
+	// For maskable, scale the glyph to 70% centered for the safe zone
+	const glyphContent = maskable
+		? '<g transform="translate(256,256) scale(0.7) translate(-256,-256)">' +
+			`<g transform="translate(56,476) scale(0.0078,-0.0078)" fill="${accentHex}" stroke="none">` +
+			GLYPH_PATHS +
+			'</g></g>'
+		: `<g transform="translate(56,476) scale(0.0078,-0.0078)" fill="${accentHex}" stroke="none">` +
+			GLYPH_PATHS +
+			'</g>';
+
+	return (
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">' +
+		`<rect width="512" height="512"${rx} fill="#000"/>` +
+		glyphContent +
+		'</svg>'
+	);
+}
+
+/**
+ * Generate a data URL for the favicon SVG with the given accent color.
+ */
+export function generateFaviconDataUrl(accentHex: string): string {
+	return `data:image/svg+xml,${encodeURIComponent(generateIconSvg(accentHex))}`;
+}
+
+/**
+ * Resolve the accent hex from a color key string.
+ */
+export function resolveAccentHex(accentColorKey: string | null | undefined): string {
+	return getAccentColor(accentColorKey).hex;
+}
+
+/**
+ * Update the dynamic favicon link element with a new accent color.
+ * Call this client-side when the accent color changes.
+ */
+export function updateFavicon(accentHex: string): void {
+	if (typeof document === 'undefined') return;
+	const link = document.getElementById('dynamic-favicon') as HTMLLinkElement | null;
+	if (link) {
+		link.href = generateFaviconDataUrl(accentHex);
+	}
+}
diff --git a/src/lib/phone.ts b/src/lib/phone.ts
new file mode 100644
index 0000000..2ccb1a6
--- /dev/null
+++ b/src/lib/phone.ts
@@ -0,0 +1,18 @@
+/** Extract raw digits from a formatted phone display string. */
+export function rawDigits(formatted: string): string {
+	return formatted.replace(/\D/g, '');
+}
+
+/** Format digits as (XXX) XXX-XXXX for display. */
+export function formatPhone(digits: string): string {
+	if (digits.length === 0) return '';
+	if (digits.length <= 3) return `(${digits}`;
+	if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+	return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+}
+
+/** Convert a formatted display string to E.164 format (+1XXXXXXXXXX). */
+export function toE164(formatted: string): string {
+	const digits = rawDigits(formatted);
+	return `+1${digits}`;
+}
diff --git a/src/lib/server/api-utils.ts b/src/lib/server/api-utils.ts
index 2bfe398..b9c06d3 100644
--- a/src/lib/server/api-utils.ts
+++ b/src/lib/server/api-utils.ts
@@ -211,10 +211,14 @@ export async function notifyClipOwner(opts: {
 		where: eq(notificationPreferences.userId, opts.recipientId)
 	});
 	if (!prefs || prefs[opts.preferenceKey]) {
+		const url =
+			opts.type === 'comment' || opts.type === 'reply'
+				? `/?clip=${opts.clipId}&comments=true`
+				: `/?clip=${opts.clipId}`;
 		sendNotification(opts.recipientId, {
 			title: opts.pushTitle,
 			body: opts.pushBody,
-			url: '/',
+			url,
 			tag: opts.pushTag
 		}).catch((err) => log.error({ err }, 'push notification failed'));
 	}
diff --git a/src/lib/server/mentions.ts b/src/lib/server/mentions.ts
index dfad705..9c7b3aa 100644
--- a/src/lib/server/mentions.ts
+++ b/src/lib/server/mentions.ts
@@ -61,7 +61,7 @@ export async function notifyMentions(opts: {
 			sendNotification(recipient.id, {
 				title: `${opts.actorUsername} mentioned you`,
 				body: opts.commentPreview,
-				url: '/',
+				url: `/?clip=${opts.clipId}&comments=true`,
 				tag: `mention-${opts.clipId}`
 			}).catch((err) => log.error({ err }, 'mention push notification failed'));
 		}
diff --git a/src/lib/server/music/download.ts b/src/lib/server/music/download.ts
index 4c56172..58a9da9 100644
--- a/src/lib/server/music/download.ts
+++ b/src/lib/server/music/download.ts
@@ -41,7 +41,7 @@ interface MusicMetadata {
 
 async function resolveOdesli(url: string): Promise<MusicMetadata> {
 	const apiUrl = `https://api.song.link/v1-alpha.1/links?url=${encodeURIComponent(url)}`;
-	const res = await fetch(apiUrl);
+	const res = await fetch(apiUrl, { signal: AbortSignal.timeout(15000) });
 
 	if (!res.ok) {
 		log.error({ status: res.status, url }, 'odesli API error');
@@ -97,6 +97,9 @@ async function finalizeMusicClip(
 				durationSeconds: result.duration
 			})
 			.where(eq(clips.id, clipId));
+		await notifyNewClip(clipId).catch((err) =>
+			log.error({ err, clipId }, 'push notification failed')
+		);
 		return;
 	}
 
@@ -133,6 +136,9 @@ async function downloadMusicInner(clipId: string, url: string): Promise<void> {
 			.update(clips)
 			.set({ status: 'failed', title: 'No download provider configured' })
 			.where(eq(clips.id, clipId));
+		await notifyNewClip(clipId).catch((err) =>
+			log.error({ err, clipId }, 'push notification failed')
+		);
 		return;
 	}
 
@@ -187,11 +193,17 @@ async function downloadMusicInner(clipId: string, url: string): Promise<void> {
 			// Failed to download audio, but metadata + platform links are still visible
 			await cleanupClipFiles(clipId);
 			await db.update(clips).set({ status: 'failed' }).where(eq(clips.id, clipId));
+			await notifyNewClip(clipId).catch((err) =>
+				log.error({ err, clipId }, 'push notification failed')
+			);
 		}
 	} catch (err) {
 		log.error({ err, clipId }, 'music download failed');
 		await cleanupClipFiles(clipId);
 		await db.update(clips).set({ status: 'failed' }).where(eq(clips.id, clipId));
+		await notifyNewClip(clipId).catch((err2) =>
+			log.error({ err: err2, clipId }, 'push notification failed')
+		);
 	}
 }
 
diff --git a/src/lib/server/push.ts b/src/lib/server/push.ts
index 3cd8ec0..bb24870 100644
--- a/src/lib/server/push.ts
+++ b/src/lib/server/push.ts
@@ -51,8 +51,11 @@ export async function sendNotification(
 					payloadStr
 				);
 			} catch (err: unknown) {
-				const pushErr = err as { statusCode?: number };
-				if (pushErr.statusCode === 410 || pushErr.statusCode === 404) {
+				const statusCode =
+					typeof err === 'object' && err !== null && 'statusCode' in err
+						? (err as { statusCode: number }).statusCode
+						: undefined;
+				if (statusCode === 410 || statusCode === 404) {
 					await db.delete(pushSubscriptions).where(eq(pushSubscriptions.id, sub.id));
 				} else {
 					log.error({ err, subscriptionId: sub.id }, 'push failed for subscription');
@@ -63,7 +66,7 @@ export async function sendNotification(
 }
 
 /**
- * Send push notification to the group after a clip download succeeds.
+ * Send push notification to the group after a clip is published (ready or failed).
  * Called from the download pipeline — NOT from the API endpoint.
  */
 export async function notifyNewClip(clipId: string): Promise<void> {
@@ -82,9 +85,9 @@ export async function notifyNewClip(clipId: string): Promise<void> {
 	await sendGroupNotification(
 		clip.groupId,
 		{
-			title: 'New clip added',
-			body: `${uploader.username} shared a new ${label}`,
-			url: '/',
+			title: `${uploader.username} added a ${label}`,
+			body: clip.title || 'Tap to watch',
+			url: `/?clip=${clipId}`,
 			tag: 'new-clip'
 		},
 		'newAdds',
diff --git a/src/lib/server/scheduler.ts b/src/lib/server/scheduler.ts
index 49ba784..cbd824e 100644
--- a/src/lib/server/scheduler.ts
+++ b/src/lib/server/scheduler.ts
@@ -18,6 +18,13 @@ let lastBackupDate: string | null = null;
 const CHECK_INTERVAL = 60 * 60 * 1000; // 1 hour
 const REMINDER_HOUR = 9; // 9 AM server time
 const BACKUP_HOUR = 2; // 2 AM server time
+const REMINDER_BODIES = [
+	'Your group has been sharing — catch up!',
+	'New stuff from your crew awaits.',
+	'See what your friends have been posting.',
+	"You're falling behind — time to scroll.",
+	'Fresh clips in the feed. Take a look!'
+];
 
 export function startScheduler(): void {
 	checkAndSendReminders();
@@ -96,7 +103,7 @@ async function sendDailyReminders(): Promise<void> {
 					and(
 						eq(clips.groupId, user.groupId),
 						eq(clips.status, 'ready'),
-						sql`${clips.id} NOT IN (SELECT ${watched.clipId} FROM ${watched} WHERE ${watched.userId} = ${user.id})`
+						sql`NOT EXISTS (SELECT 1 FROM ${watched} WHERE ${watched.clipId} = ${clips.id} AND ${watched.userId} = ${user.id})`
 					)
 				);
 
@@ -105,7 +112,7 @@ async function sendDailyReminders(): Promise<void> {
 
 			await sendNotification(user.id, {
 				title: `${unwatchedCount} unwatched ${unwatchedCount === 1 ? 'clip' : 'clips'}`,
-				body: 'Check out what your group has been sharing!',
+				body: REMINDER_BODIES[Math.floor(Math.random() * REMINDER_BODIES.length)],
 				url: '/',
 				tag: 'daily-reminder'
 			});
diff --git a/src/lib/server/video/download.ts b/src/lib/server/video/download.ts
index 0cedaa2..fbd03af 100644
--- a/src/lib/server/video/download.ts
+++ b/src/lib/server/video/download.ts
@@ -31,12 +31,20 @@ async function handleDownloadError(
 			.update(clips)
 			.set({ status: 'failed', title: `Exceeds ${sizeMb} MB limit` })
 			.where(eq(clips.id, clipId));
+		// Still notify — clip is viewable via external link
+		await notifyNewClip(clipId).catch((err2) =>
+			log.error({ err: err2, clipId }, 'push notification failed')
+		);
 		return;
 	}
 
 	log.error({ err, clipId }, 'download failed');
 	await cleanupClipFiles(clipId);
 	await db.update(clips).set({ status: 'failed' }).where(eq(clips.id, clipId));
+	// Still notify — clip is viewable via external link
+	await notifyNewClip(clipId).catch((err2) =>
+		log.error({ err: err2, clipId }, 'push notification failed')
+	);
 }
 
 async function downloadVideoInner(clipId: string, url: string): Promise<void> {
@@ -51,6 +59,10 @@ async function downloadVideoInner(clipId: string, url: string): Promise<void> {
 			.update(clips)
 			.set({ status: 'failed', title: 'No download provider configured' })
 			.where(eq(clips.id, clipId));
+		// Still notify — clip is viewable via external link
+		await notifyNewClip(clipId).catch((err) =>
+			log.error({ err, clipId }, 'push notification failed')
+		);
 		return;
 	}
 
@@ -75,6 +87,10 @@ async function downloadVideoInner(clipId: string, url: string): Promise<void> {
 					durationSeconds: result.duration
 				})
 				.where(eq(clips.id, clipId));
+			// Still notify — clip is viewable via external link
+			await notifyNewClip(clipId).catch((err) =>
+				log.error({ err, clipId }, 'push notification failed')
+			);
 			return;
 		}
 
diff --git a/src/lib/settingsApi.ts b/src/lib/settingsApi.ts
index bfa2aef..bcc57ce 100644
--- a/src/lib/settingsApi.ts
+++ b/src/lib/settingsApi.ts
@@ -1,4 +1,5 @@
 import { ACCENT_COLORS, type AccentColorKey } from '$lib/colors';
+import { updateFavicon } from '$lib/iconSvg';
 
 export type NotificationPrefs = {
 	newAdds: boolean;
@@ -8,6 +9,20 @@ export type NotificationPrefs = {
 	dailyReminder: boolean;
 };
 
+// --- Helpers ---
+
+async function savePreference(data: Record<string, unknown>): Promise<void> {
+	try {
+		await fetch('/api/profile/preferences', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(data)
+		});
+	} catch (err) {
+		console.warn('failed to save preference', err);
+	}
+}
+
 // --- Theme ---
 
 export function applyTheme(value: 'system' | 'light' | 'dark'): void {
@@ -20,29 +35,33 @@ export function applyTheme(value: 'system' | 'light' | 'dark'): void {
 }
 
 export async function saveThemePreference(value: 'system' | 'light' | 'dark'): Promise<void> {
-	await fetch('/api/profile/preferences', {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ themePreference: value })
-	});
+	await savePreference({ themePreference: value });
+}
+
+// --- Username ---
+
+export async function saveUsername(username: string): Promise<{ username: string } | null> {
+	try {
+		const res = await fetch('/api/profile/preferences', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ username })
+		});
+		if (res.ok) return res.json();
+	} catch (err) {
+		console.warn('failed to save username', err);
+	}
+	return null;
 }
 
 // --- Playback ---
 
 export async function saveAutoScroll(value: boolean): Promise<void> {
-	await fetch('/api/profile/preferences', {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ autoScroll: value })
-	});
+	await savePreference({ autoScroll: value });
 }
 
 export async function saveMutedByDefault(value: boolean): Promise<void> {
-	await fetch('/api/profile/preferences', {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ mutedByDefault: value })
-	});
+	await savePreference({ mutedByDefault: value });
 }
 
 // --- Accent color ---
@@ -52,28 +71,44 @@ export function applyAccentColor(key: AccentColorKey): void {
 	document.documentElement.style.setProperty('--accent-primary', color.hex);
 	document.documentElement.style.setProperty('--accent-primary-dark', color.dark);
 	document.cookie = `scrolly_accent=${encodeURIComponent(JSON.stringify({ hex: color.hex, dark: color.dark }))};path=/;max-age=31536000;SameSite=Lax`;
+	updateFavicon(color.hex);
 }
 
 export async function saveAccentColor(key: AccentColorKey): Promise<void> {
-	await fetch('/api/group/accent', {
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ accentColor: key })
-	});
+	try {
+		await fetch('/api/group/accent', {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ accentColor: key })
+		});
+	} catch (err) {
+		console.warn('failed to save accent color', err);
+	}
 }
 
 // --- Notification preferences ---
 
 export async function fetchNotificationPrefs(): Promise<NotificationPrefs> {
-	const res = await fetch('/api/notifications/preferences');
-	if (res.ok) return res.json();
+	try {
+		const res = await fetch('/api/notifications/preferences');
+		if (res.ok) return res.json();
+	} catch (err) {
+		console.warn('failed to fetch notification prefs', err);
+	}
 	return { newAdds: true, reactions: true, comments: true, mentions: true, dailyReminder: false };
 }
 
-export async function updateNotificationPref(key: string, value: boolean): Promise<void> {
-	await fetch('/api/notifications/preferences', {
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ [key]: value })
-	});
+export async function updateNotificationPref(
+	key: keyof NotificationPrefs,
+	value: boolean
+): Promise<void> {
+	try {
+		await fetch('/api/notifications/preferences', {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ [key]: value })
+		});
+	} catch (err) {
+		console.warn('failed to update notification pref', err);
+	}
 }
diff --git a/src/lib/stores/toasts.ts b/src/lib/stores/toasts.ts
index 5e62a29..965bad1 100644
--- a/src/lib/stores/toasts.ts
+++ b/src/lib/stores/toasts.ts
@@ -15,6 +15,7 @@ export interface Toast {
 export const toasts = writable<Toast[]>([]);
 export const clipReadySignal = writable<string | null>(null);
 export const viewClipSignal = writable<string | null>(null);
+export const openCommentsSignal = writable<string | null>(null);
 
 let toastCounter = 0;
 
diff --git a/src/routes/(app)/+layout.server.ts b/src/routes/(app)/+layout.server.ts
index 4eea6e8..e614671 100644
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@@ -2,12 +2,13 @@ import { redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 import { env } from '$env/dynamic/private';
 
-export const load: LayoutServerLoad = async ({ locals }) => {
+export const load: LayoutServerLoad = async ({ locals, url }) => {
+	const returnTo = url.search ? url.pathname + url.search : '';
 	if (!locals.user) {
-		redirect(302, '/join');
+		redirect(302, returnTo ? `/join?returnTo=${encodeURIComponent(returnTo)}` : '/join');
 	}
 	if (!locals.user.username) {
-		redirect(302, '/onboard');
+		redirect(302, returnTo ? `/onboard?returnTo=${encodeURIComponent(returnTo)}` : '/onboard');
 	}
 	return {
 		user: locals.user,
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 89bf61a..72d05d9 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -28,6 +28,9 @@
 	onMount(() => {
 		startPolling();
 		fetchGroupMembers();
+
+		// Tell fixed-position components (e.g. InstallBanner) about the bottom nav height
+		document.documentElement.style.setProperty('--bottom-nav-height', '80px');
 		// Initialize mute state from user preference
 		const user = page.data?.user;
 		if (user) {
@@ -56,6 +59,7 @@
 			stopPolling();
 			themeObserver.disconnect();
 			darkMq.removeEventListener('change', syncThemeColor);
+			document.documentElement.style.removeProperty('--bottom-nav-height');
 		};
 	});
 
@@ -306,7 +310,7 @@
 	}
 
 	.overlay-mode .tab {
-		color: rgba(255, 255, 255, 0.5);
+		color: var(--reel-text-subtle);
 	}
 
 	.tab.active {
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index f400db2..023d588 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -8,11 +8,17 @@
 	import ArrowDownIcon from 'phosphor-svelte/lib/ArrowDownIcon';
 	import FilmSlateIcon from 'phosphor-svelte/lib/FilmSlateIcon';
 	import { addVideoModalOpen } from '$lib/stores/addVideoModal';
-	import { addToast, toast, clipReadySignal, viewClipSignal } from '$lib/stores/toasts';
+	import {
+		addToast,
+		toast,
+		clipReadySignal,
+		viewClipSignal,
+		openCommentsSignal
+	} from '$lib/stores/toasts';
 	import { homeTapSignal } from '$lib/stores/homeTap';
 	import { feedUiHidden } from '$lib/stores/uiHidden';
 	import { onMount, onDestroy } from 'svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import type { FeedClip } from '$lib/types';
 	import type { FeedFilter } from '$lib/feed';
 	import {
@@ -63,9 +69,9 @@
 		swipeX !== 0 && typeof window !== 'undefined' ? -swipeX / window.innerWidth : 0
 	);
 
-	const currentUserId = $derived($page.data.user?.id ?? '');
-	const autoScroll = $derived($page.data.user?.autoScroll ?? false);
-	const gifEnabled = $derived(!!$page.data.gifEnabled);
+	const currentUserId = $derived(page.data.user?.id ?? '');
+	const autoScroll = $derived(page.data.user?.autoScroll ?? false);
+	const gifEnabled = $derived(!!page.data.gifEnabled);
 
 	async function loadInitialClips() {
 		loading = true;
@@ -395,7 +401,7 @@
 		if (!targetClipId) return;
 		viewClipSignal.set(null);
 		(async () => {
-			filter = 'unwatched';
+			filter = 'all' as FeedFilter;
 			currentOffset = 0;
 			hasMore = true;
 			const data = await fetchClips('all', PAGE_SIZE);
@@ -506,6 +512,21 @@
 				}
 			})();
 		}
+
+		// Deep-link: jump to a specific clip (and optionally open comments)
+		const params = new URLSearchParams(window.location.search);
+		const deepClipId = params.get('clip');
+		const deepComments = params.get('comments') === 'true';
+		if (deepClipId) {
+			viewClipSignal.set(deepClipId);
+			if (deepComments) openCommentsSignal.set(deepClipId);
+			// Clean URL without triggering navigation
+			const clean = new URL(window.location.href);
+			clean.searchParams.delete('clip');
+			clean.searchParams.delete('comments');
+			history.replaceState(null, '', clean.pathname + clean.search || '/');
+		}
+
 		loadInitialClips();
 	});
 
@@ -650,7 +671,7 @@
 	}
 	.pull-arrow {
 		display: inline-flex;
-		color: rgba(255, 255, 255, 0.7);
+		color: var(--reel-text-dim);
 		transform: rotate(180deg);
 		transition:
 			transform 0.2s ease,
@@ -664,7 +685,7 @@
 		display: inline-block;
 		width: 22px;
 		height: 22px;
-		border: 2.5px solid rgba(255, 255, 255, 0.2);
+		border: 2.5px solid var(--reel-spinner-track);
 		border-top-color: var(--accent-primary);
 		border-radius: var(--radius-full);
 		animation: spin 0.8s linear infinite;
@@ -784,7 +805,7 @@
 		position: fixed;
 		inset: 0;
 		z-index: 90;
-		background: rgba(0, 0, 0, 0.75);
+		background: var(--reel-gradient-heavy);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
index c19f815..b46321d 100644
--- a/src/routes/(app)/settings/+page.svelte
+++ b/src/routes/(app)/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	/* eslint-disable max-lines */
 	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import {
 		isPushSupported,
 		getExistingSubscription,
@@ -34,11 +34,12 @@
 	import DownloadProviderManager from '$lib/components/settings/DownloadProviderManager.svelte';
 	import PlatformFilter from '$lib/components/settings/PlatformFilter.svelte';
 	import ShortcutManager from '$lib/components/settings/ShortcutManager.svelte';
+	import UsernameEdit from '$lib/components/settings/UsernameEdit.svelte';
 	import AvatarCropModal from '$lib/components/AvatarCropModal.svelte';
 
-	const vapidPublicKey = $derived($page.data.vapidPublicKey as string);
-	const user = $derived($page.data.user);
-	const group = $derived($page.data.group);
+	const vapidPublicKey = $derived(page.data.vapidPublicKey as string);
+	const user = $derived(page.data.user);
+	const group = $derived(page.data.group);
 	const isHost = $derived(group?.createdBy === user?.id);
 
 	let activeTab = $state<'me' | 'group'>('me');
@@ -116,14 +117,16 @@
 	}
 
 	function toggleAutoScroll() {
-		autoScrollOverride = !autoScroll;
-		saveAutoScroll(!autoScroll);
+		const newValue = !autoScroll;
+		autoScrollOverride = newValue;
+		saveAutoScroll(newValue);
 	}
 
 	function toggleMutedByDefault() {
-		mutedByDefaultOverride = !mutedByDefault;
-		globalMuted.set(!mutedByDefault);
-		saveMutedByDefault(!mutedByDefault);
+		const newValue = !mutedByDefault;
+		mutedByDefaultOverride = newValue;
+		globalMuted.set(newValue);
+		saveMutedByDefault(newValue);
 	}
 
 	async function togglePush() {
@@ -147,7 +150,7 @@
 		saveAccentColor(key);
 	}
 
-	function handleUpdatePref(key: string, value: boolean) {
+	function handleUpdatePref(key: keyof NotificationPrefs, value: boolean) {
 		prefs = { ...prefs, [key]: value };
 		updateNotificationPref(key, value);
 	}
@@ -188,7 +191,7 @@
 				{#if avatarPath}
 					<button class="remove-photo-btn" onclick={handleRemoveAvatar}>Remove photo</button>
 				{/if}
-				<h2 class="profile-name">{user?.username}</h2>
+				<UsernameEdit initialUsername={user?.username ?? ''} />
 				<span class="profile-phone">{user?.phone}</span>
 				{#if group}
 					<span class="group-pill">{group.name}</span>
@@ -485,14 +488,6 @@
 		padding: 0;
 	}
 
-	.profile-name {
-		font-family: var(--font-display);
-		font-size: 1.25rem;
-		font-weight: 700;
-		color: var(--text-primary);
-		margin: 0;
-	}
-
 	.profile-phone {
 		color: var(--text-muted);
 		font-size: 0.8125rem;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 79e8888..5876670 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import favicon from '$lib/assets/favicon.svg?url';
+	import { updateFavicon } from '$lib/iconSvg';
 	import ToastStack from '$lib/components/ToastStack.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import InstallBanner from '$lib/components/InstallBanner.svelte';
@@ -18,13 +18,15 @@
 		isStandalone.set(detectStandaloneMode());
 		initInstallPrompt();
 		initSwUpdateListener();
+
+		// Set dynamic favicon with the current accent color
+		const accent = getComputedStyle(document.documentElement)
+			.getPropertyValue('--accent-primary')
+			.trim();
+		if (accent) updateFavicon(accent);
 	});
 </script>
 
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
-
 {@render children()}
 <ToastStack />
 <ConfirmDialog />
diff --git a/src/routes/api/auth/+server.ts b/src/routes/api/auth/+server.ts
index 6da0b0c..9be5936 100644
--- a/src/routes/api/auth/+server.ts
+++ b/src/routes/api/auth/+server.ts
@@ -13,6 +13,7 @@ import { eq, and, desc } from 'drizzle-orm';
 import { sendVerification, checkVerification } from '$lib/server/sms/verify';
 import { dev } from '$app/environment';
 import { createLogger } from '$lib/server/logger';
+import { checkRateLimit, rateLimitResponse } from '$lib/server/rate-limit';
 
 const log = createLogger('auth');
 
@@ -224,12 +225,20 @@ async function handleLoginVerifyCode(body: Record<string, string>) {
 }
 
 // POST /api/auth - Login, join, send/verify phone code, or onboard
-export const POST: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request, getClientAddress }) => {
 	const body = await request.json();
 	const { action } = body;
 
 	// Unauthenticated actions
-	if (action === 'join') return handleJoin(body);
+	if (action === 'join') {
+		const ip = getClientAddress();
+		const result = checkRateLimit(`join:${ip}`, { windowMs: 15 * 60 * 1000, maxRequests: 5 });
+		if (!result.allowed) {
+			log.warn({ ip }, 'join rate limit exceeded');
+			return rateLimitResponse(result.resetAt);
+		}
+		return handleJoin(body);
+	}
 	if (action === 'login-send-code') return handleLoginSendCode(body);
 	if (action === 'login-verify-code') return handleLoginVerifyCode(body);
 
diff --git a/src/routes/api/clips/[id]/comments/+server.ts b/src/routes/api/clips/[id]/comments/+server.ts
index e4a9792..3984114 100644
--- a/src/routes/api/clips/[id]/comments/+server.ts
+++ b/src/routes/api/clips/[id]/comments/+server.ts
@@ -107,8 +107,8 @@ async function dispatchCommentNotification(
 				clipId,
 				type: 'reply',
 				preferenceKey: 'comments',
-				pushTitle: 'New reply',
-				pushBody: `${actor.username} replied: ${preview}`,
+				pushTitle: `${actor.username} replied to you`,
+				pushBody: preview,
 				pushTag: `reply-${clipId}`,
 				commentPreview: preview
 			});
@@ -124,8 +124,8 @@ async function dispatchCommentNotification(
 				clipId,
 				type: 'comment',
 				preferenceKey: 'comments',
-				pushTitle: 'New comment',
-				pushBody: `${actor.username}: ${preview}`,
+				pushTitle: `${actor.username} commented on your clip`,
+				pushBody: preview,
 				pushTag: `comment-${clipId}`,
 				commentPreview: preview
 			});
diff --git a/src/routes/api/clips/[id]/reactions/+server.ts b/src/routes/api/clips/[id]/reactions/+server.ts
index 11642ea..b3985ae 100644
--- a/src/routes/api/clips/[id]/reactions/+server.ts
+++ b/src/routes/api/clips/[id]/reactions/+server.ts
@@ -65,8 +65,8 @@ export const POST: RequestHandler = withClipAuth(async ({ params, request }, { u
 			clipId,
 			type: 'reaction',
 			preferenceKey: 'reactions',
-			pushTitle: 'New reaction',
-			pushBody: `${user.username} reacted ${emoji} to your clip`,
+			pushTitle: `${user.username} reacted ${emoji}`,
+			pushBody: 'on your clip',
 			pushTag: `reaction-${clipId}`,
 			emoji
 		});
diff --git a/src/routes/api/profile/preferences/+server.ts b/src/routes/api/profile/preferences/+server.ts
index ca8b6f1..99f6f54 100644
--- a/src/routes/api/profile/preferences/+server.ts
+++ b/src/routes/api/profile/preferences/+server.ts
@@ -5,30 +5,38 @@ import { users } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
 import { withAuth, parseBody, isResponse } from '$lib/server/api-utils';
 
+function validateUsername(body: Record<string, unknown>): { value: string } | { error: string } {
+	const username = typeof body.username === 'string' ? body.username.trim() : '';
+	if (!username || username.length > 30) return { error: 'Username must be 1–30 characters' };
+	return { value: username };
+}
+
+const VALID_THEMES = ['system', 'light', 'dark'];
+
 export const POST: RequestHandler = withAuth(async ({ request }, { user }) => {
 	const body = await parseBody<Record<string, unknown>>(request);
 	if (isResponse(body)) return body;
 
 	const updates: Record<string, unknown> = {};
 
+	if ('username' in body) {
+		const result = validateUsername(body);
+		if ('error' in result) return json({ error: result.error }, { status: 400 });
+		updates.username = result.value;
+	}
+
 	if ('themePreference' in body) {
-		if (!['system', 'light', 'dark'].includes(body.themePreference as string)) {
+		if (!VALID_THEMES.includes(body.themePreference as string)) {
 			return json({ error: 'Invalid theme preference' }, { status: 400 });
 		}
 		updates.themePreference = body.themePreference;
 	}
 
-	if ('autoScroll' in body) {
-		if (typeof body.autoScroll !== 'boolean') {
-			return json({ error: 'Invalid autoScroll value' }, { status: 400 });
-		}
+	if ('autoScroll' in body && typeof body.autoScroll === 'boolean') {
 		updates.autoScroll = body.autoScroll;
 	}
 
-	if ('mutedByDefault' in body) {
-		if (typeof body.mutedByDefault !== 'boolean') {
-			return json({ error: 'Invalid mutedByDefault value' }, { status: 400 });
-		}
+	if ('mutedByDefault' in body && typeof body.mutedByDefault === 'boolean') {
 		updates.mutedByDefault = body.mutedByDefault;
 	}
 
diff --git a/src/routes/icon/[name]/+server.ts b/src/routes/icon/[name]/+server.ts
new file mode 100644
index 0000000..135628a
--- /dev/null
+++ b/src/routes/icon/[name]/+server.ts
@@ -0,0 +1,30 @@
+import type { RequestHandler } from './$types';
+import { generateIconSvg, resolveAccentHex } from '$lib/iconSvg';
+
+const ICON_CONFIG: Record<string, { maskable?: boolean; monochrome?: boolean }> = {
+	'favicon.svg': {},
+	'icon-192.svg': {},
+	'icon-512.svg': {},
+	'icon-maskable-192.svg': { maskable: true },
+	'icon-maskable-512.svg': { maskable: true },
+	'apple-touch-icon.svg': {},
+	'badge-72.svg': { monochrome: true }
+};
+
+export const GET: RequestHandler = ({ params, locals }) => {
+	const config = ICON_CONFIG[params.name];
+	if (!config) {
+		return new Response('Not found', { status: 404 });
+	}
+
+	const accentHex = resolveAccentHex(locals.group?.accentColor);
+	const svg = generateIconSvg(accentHex, config);
+
+	return new Response(svg, {
+		headers: {
+			'Content-Type': 'image/svg+xml',
+			'Cache-Control': 'private, no-cache',
+			Vary: 'Cookie'
+		}
+	});
+};
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index 1d96c6f..c0a211b 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -4,6 +4,7 @@
 	import iconUrl from '$lib/assets/icon.svg?url';
 	import InlineError from '$lib/components/InlineError.svelte';
 	import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRightIcon';
+	import { rawDigits, formatPhone, toE164 } from '$lib/phone';
 
 	let view = $state<'login' | 'verify'>('login');
 	let phoneDisplay = $state('');
@@ -21,25 +22,6 @@
 		};
 	});
 
-	// Extract raw digits from formatted display
-	function rawDigits(formatted: string): string {
-		return formatted.replace(/\D/g, '');
-	}
-
-	// Format digits as (XXX) XXX-XXXX for display
-	function formatPhone(digits: string): string {
-		if (digits.length === 0) return '';
-		if (digits.length <= 3) return `(${digits}`;
-		if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
-		return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
-	}
-
-	// Convert display format to E.164 for Twilio
-	function toE164(formatted: string): string {
-		const digits = rawDigits(formatted);
-		return `+1${digits}`;
-	}
-
 	function handlePhoneInput(e: Event) {
 		const input = e.target as HTMLInputElement;
 		const digits = rawDigits(input.value).slice(0, 10);
@@ -113,7 +95,8 @@
 			}
 			const params = new URLSearchParams(window.location.search);
 			const returnTo = params.get('returnTo');
-			window.location.href = returnTo && returnTo.startsWith('/') ? returnTo : '/';
+			window.location.href =
+				returnTo && returnTo.startsWith('/') && !returnTo.startsWith('//') ? returnTo : '/';
 		} catch {
 			error = 'Something went wrong';
 		} finally {
@@ -152,6 +135,17 @@
 		const input = e.target as HTMLInputElement;
 		const value = input.value.replace(/\D/g, '');
 
+		if (value.length > 1) {
+			// Multi-digit paste via input event (common on Android IME)
+			for (let i = 0; i < 6; i++) {
+				codeDigits[i] = value[i] || '';
+			}
+			code = codeDigits.join('');
+			const nextEmpty = codeDigits.findIndex((d) => d === '');
+			codeInputs[nextEmpty === -1 ? 5 : nextEmpty]?.focus();
+			return;
+		}
+
 		if (value.length > 0) {
 			codeDigits[index] = value[0];
 			// Auto-advance to next input
@@ -192,6 +186,12 @@
 
 <svelte:head>
 	<title>scrolly — Sign In</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Unbounded:wght@800;900&family=Space+Mono:wght@400;700&display=swap"
+		rel="stylesheet"
+	/>
 </svelte:head>
 
 <div class="join-page" class:mounted>
@@ -269,7 +269,7 @@
 						handleVerifyLogin();
 					}}
 				>
-					<div class="code-inputs" onpaste={handleCodePaste}>
+					<div class="code-inputs">
 						{#each codeDigits as digit, i (i)}
 							<input
 								type="text"
@@ -278,6 +278,7 @@
 								value={digit}
 								oninput={(e) => handleCodeInput(i, e)}
 								onkeydown={(e) => handleCodeKeydown(i, e)}
+								onpaste={handleCodePaste}
 								disabled={loading}
 								class="code-box"
 								class:filled={digit !== ''}
@@ -337,6 +338,7 @@
 		justify-content: center;
 		min-height: 100dvh;
 		padding: var(--space-xl);
+		padding-bottom: calc(var(--space-xl) + 72px);
 		background: var(--bg-primary);
 		overflow: hidden;
 	}
diff --git a/src/routes/manifest.json/+server.ts b/src/routes/manifest.json/+server.ts
new file mode 100644
index 0000000..1d3e3a3
--- /dev/null
+++ b/src/routes/manifest.json/+server.ts
@@ -0,0 +1,93 @@
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = () => {
+	const manifest = {
+		name: 'scrolly',
+		short_name: 'scrolly',
+		description: 'Private video sharing for your friend group',
+		id: '/',
+		start_url: '/',
+		scope: '/',
+		display: 'standalone',
+		orientation: 'portrait',
+		lang: 'en',
+		categories: ['social', 'entertainment'],
+		background_color: '#000000',
+		theme_color: '#000000',
+		icons: [
+			{
+				src: '/icon/icon-192.svg',
+				sizes: 'any',
+				type: 'image/svg+xml',
+				purpose: 'any'
+			},
+			{
+				src: '/icon/icon-512.svg',
+				sizes: 'any',
+				type: 'image/svg+xml',
+				purpose: 'any'
+			},
+			{
+				src: '/icon/icon-maskable-192.svg',
+				sizes: 'any',
+				type: 'image/svg+xml',
+				purpose: 'maskable'
+			},
+			{
+				src: '/icon/icon-maskable-512.svg',
+				sizes: 'any',
+				type: 'image/svg+xml',
+				purpose: 'maskable'
+			},
+			// PNG fallbacks for platforms that don't support SVG manifest icons
+			{
+				src: '/icons/icon-192.png',
+				sizes: '192x192',
+				type: 'image/png',
+				purpose: 'any'
+			},
+			{
+				src: '/icons/icon-512.png',
+				sizes: '512x512',
+				type: 'image/png',
+				purpose: 'any'
+			},
+			{
+				src: '/icons/icon-maskable-192.png',
+				sizes: '192x192',
+				type: 'image/png',
+				purpose: 'maskable'
+			},
+			{
+				src: '/icons/icon-maskable-512.png',
+				sizes: '512x512',
+				type: 'image/png',
+				purpose: 'maskable'
+			},
+			{
+				src: '/icon/badge-72.svg',
+				sizes: 'any',
+				type: 'image/svg+xml',
+				purpose: 'monochrome'
+			}
+		],
+		share_target: {
+			action: '/share',
+			method: 'GET',
+			enctype: 'application/x-www-form-urlencoded',
+			params: {
+				url: 'url',
+				text: 'text',
+				title: 'title'
+			}
+		}
+	};
+
+	return new Response(JSON.stringify(manifest, null, '\t'), {
+		headers: {
+			'Content-Type': 'application/manifest+json',
+			'Cache-Control': 'private, no-cache',
+			Vary: 'Cookie'
+		}
+	});
+};
diff --git a/src/routes/onboard/+page.svelte b/src/routes/onboard/+page.svelte
index 3def2c1..89b5d1a 100644
--- a/src/routes/onboard/+page.svelte
+++ b/src/routes/onboard/+page.svelte
@@ -1,16 +1,48 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
 	import InlineError from '$lib/components/InlineError.svelte';
+	import { rawDigits, formatPhone, toE164 } from '$lib/phone';
 
 	let step = $state<'info' | 'verify'>('info');
 	let username = $state('');
-	let phone = $state('');
+	let phoneDisplay = $state('');
 	let code = $state('');
 	let error = $state('');
 	let loading = $state(false);
 	let resendCountdown = $state(0);
 	let resendTimer: ReturnType<typeof setInterval> | null = null;
 
+	$effect(() => {
+		return () => {
+			if (resendTimer) clearInterval(resendTimer);
+		};
+	});
+
+	function handlePhoneInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const digits = rawDigits(input.value).slice(0, 10);
+		phoneDisplay = formatPhone(digits);
+		requestAnimationFrame(() => {
+			input.setSelectionRange(phoneDisplay.length, phoneDisplay.length);
+		});
+	}
+
+	function handlePhoneKeydown(e: KeyboardEvent) {
+		if (e.key === 'Backspace' && phoneDisplay.length > 0) {
+			e.preventDefault();
+			const digits = rawDigits(phoneDisplay);
+			phoneDisplay = formatPhone(digits.slice(0, -1));
+		}
+	}
+
+	const phoneValid = $derived(rawDigits(phoneDisplay).length === 10);
+	const phoneE164 = $derived(toE164(phoneDisplay));
+
+	function handleCodeInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+		code = input.value.replace(/\D/g, '').slice(0, 6);
+	}
+
 	function startResendTimer() {
 		resendCountdown = 60;
 		resendTimer = setInterval(() => {
@@ -29,7 +61,7 @@
 			const res = await fetch('/api/auth', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ action: 'send-code', phone: phone.trim() })
+				body: JSON.stringify({ action: 'send-code', phone: phoneE164 })
 			});
 			const data = await res.json();
 			if (!res.ok) {
@@ -52,7 +84,7 @@
 			const verifyRes = await fetch('/api/auth', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ action: 'verify-code', phone: phone.trim(), code: code.trim() })
+				body: JSON.stringify({ action: 'verify-code', phone: phoneE164, code: code.trim() })
 			});
 			const verifyData = await verifyRes.json();
 			if (!verifyRes.ok) {
@@ -66,7 +98,7 @@
 				body: JSON.stringify({
 					action: 'onboard',
 					username: username.trim(),
-					phone: phone.trim()
+					phone: phoneE164
 				})
 			});
 			const onboardData = await onboardRes.json();
@@ -75,7 +107,10 @@
 				return;
 			}
 
-			window.location.href = '/';
+			const params = new URLSearchParams(window.location.search);
+			const returnTo = params.get('returnTo');
+			window.location.href =
+				returnTo && returnTo.startsWith('/') && !returnTo.startsWith('//') ? returnTo : '/';
 		} catch {
 			error = 'Something went wrong';
 		} finally {
@@ -90,7 +125,7 @@
 			const res = await fetch('/api/auth', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ action: 'send-code', phone: phone.trim() })
+				body: JSON.stringify({ action: 'send-code', phone: phoneE164 })
 			});
 			const data = await res.json();
 			if (!res.ok) {
@@ -136,13 +171,19 @@
 
 			<label>
 				<span>Phone number</span>
-				<input
-					type="tel"
-					bind:value={phone}
-					placeholder="+1234567890"
-					autocomplete="tel"
-					disabled={loading}
-				/>
+				<div class="phone-input-group">
+					<span class="country-code">+1</span>
+					<input
+						type="tel"
+						value={phoneDisplay}
+						oninput={handlePhoneInput}
+						onkeydown={handlePhoneKeydown}
+						placeholder="(555) 123-4567"
+						autocomplete="tel"
+						disabled={loading}
+						class="phone-input"
+					/>
+				</div>
 				<small>We'll send you a verification code</small>
 			</label>
 
@@ -167,12 +208,12 @@
 			</p>
 			<!-- eslint-enable svelte/no-navigation-without-resolve -->
 
-			<button type="submit" disabled={loading || !username.trim() || !phone.trim()}>
+			<button type="submit" disabled={loading || !username.trim() || !phoneValid}>
 				{loading ? 'Sending...' : 'Send Verification Code'}
 			</button>
 		</form>
 	{:else}
-		<p>Enter the 6-digit code we sent to {phone}</p>
+		<p>Enter the 6-digit code we sent to +1 {phoneDisplay}</p>
 
 		<form
 			onsubmit={(e) => {
@@ -184,11 +225,11 @@
 				<span>Verification code</span>
 				<input
 					type="text"
-					bind:value={code}
+					value={code}
+					oninput={handleCodeInput}
 					placeholder="000000"
 					autocomplete="one-time-code"
 					inputmode="numeric"
-					maxlength="6"
 					disabled={loading}
 					class="code-input"
 				/>
@@ -227,6 +268,7 @@
 		justify-content: center;
 		min-height: 100dvh;
 		padding: var(--space-lg);
+		padding-bottom: calc(var(--space-lg) + 72px);
 		background: var(--bg-primary);
 	}
 
@@ -285,6 +327,51 @@
 		border-color: var(--accent-primary);
 	}
 
+	.phone-input-group {
+		display: flex;
+		align-items: center;
+		background: var(--bg-surface);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-full);
+		overflow: hidden;
+		transition: border-color 0.2s ease;
+	}
+
+	.phone-input-group:focus-within {
+		border-color: var(--accent-primary);
+	}
+
+	.country-code {
+		font-family: var(--font-display);
+		font-weight: 600;
+		font-size: 1rem;
+		color: var(--text-muted);
+		padding: var(--space-md) 0 var(--space-md) var(--space-lg);
+		user-select: none;
+		flex-shrink: 0;
+	}
+
+	.phone-input {
+		flex: 1;
+		padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-sm);
+		border: none;
+		border-radius: 0;
+		font-size: 1rem;
+		font-weight: 500;
+		letter-spacing: 0.02em;
+		background: transparent;
+		color: var(--text-primary);
+	}
+
+	.phone-input::placeholder {
+		color: var(--text-muted);
+		font-weight: 400;
+	}
+
+	.phone-input:focus {
+		outline: none;
+	}
+
 	.code-input {
 		text-align: center;
 		letter-spacing: 0.3em;
diff --git a/static/manifest.json b/static/manifest.json
deleted file mode 100644
index 4e3b6a6..0000000
--- a/static/manifest.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-	"name": "scrolly",
-	"short_name": "scrolly",
-	"description": "Private video sharing for your friend group",
-	"id": "/",
-	"start_url": "/",
-	"scope": "/",
-	"display": "standalone",
-	"orientation": "portrait",
-	"lang": "en",
-	"categories": ["social", "entertainment"],
-	"background_color": "#000000",
-	"theme_color": "#000000",
-	"icons": [
-		{
-			"src": "/icons/icon-192.png",
-			"sizes": "192x192",
-			"type": "image/png",
-			"purpose": "any"
-		},
-		{
-			"src": "/icons/icon-512.png",
-			"sizes": "512x512",
-			"type": "image/png",
-			"purpose": "any"
-		},
-		{
-			"src": "/icons/icon-maskable-192.png",
-			"sizes": "192x192",
-			"type": "image/png",
-			"purpose": "maskable"
-		},
-		{
-			"src": "/icons/icon-maskable-512.png",
-			"sizes": "512x512",
-			"type": "image/png",
-			"purpose": "maskable"
-		},
-		{
-			"src": "/icons/badge-72.png",
-			"sizes": "72x72",
-			"type": "image/png",
-			"purpose": "monochrome"
-		}
-	],
-	"share_target": {
-		"action": "/share",
-		"method": "GET",
-		"enctype": "application/x-www-form-urlencoded",
-		"params": {
-			"url": "url",
-			"text": "text",
-			"title": "title"
-		}
-	}
-}