diff --git a/src/app.d.ts b/src/app.d.ts
index 78130c5..77f3d3d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -11,6 +11,7 @@ declare global {
 		}
 		interface PageState {
 			sheet?: string;
+			clipOverlay?: string;
 		}
 	}
 }
diff --git a/src/lib/components/ActionSidebar.svelte b/src/lib/components/ActionSidebar.svelte
index 0db02fe..b0a7232 100644
--- a/src/lib/components/ActionSidebar.svelte
+++ b/src/lib/components/ActionSidebar.svelte
@@ -167,7 +167,7 @@
 	.action-sidebar {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 68px);
+		bottom: calc(var(--bottom-nav-height, 64px) + 88px);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
diff --git a/src/lib/components/ActivitySheet.svelte b/src/lib/components/ActivitySheet.svelte
index 3106380..81cd236 100644
--- a/src/lib/components/ActivitySheet.svelte
+++ b/src/lib/components/ActivitySheet.svelte
@@ -3,7 +3,7 @@
 	import { resolve } from '$app/paths';
 	import { relativeTime } from '$lib/utils';
 	import { fetchUnreadCount } from '$lib/stores/notifications';
-	import { viewClipSignal, openCommentsSignal } from '$lib/stores/toasts';
+	import { clipOverlaySignal, openCommentsSignal } from '$lib/stores/toasts';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import BellIcon from 'phosphor-svelte/lib/BellIcon';
 
@@ -126,7 +126,7 @@
 		visible = false;
 		setTimeout(() => {
 			ondismiss();
-			viewClipSignal.set(n.clipId);
+			clipOverlaySignal.set(n.clipId);
 			if (n.type !== 'reaction') {
 				openCommentsSignal.set(n.clipId);
 			}
diff --git a/src/lib/components/AddVideo.svelte b/src/lib/components/AddVideo.svelte
index 8b169a3..aa1ed33 100644
--- a/src/lib/components/AddVideo.svelte
+++ b/src/lib/components/AddVideo.svelte
@@ -8,22 +8,21 @@
 		isPlatformAllowed
 	} from '$lib/url-validation';
 	import { addToast } from '$lib/stores/toasts';
+	import { showShortcutNudge } from '$lib/stores/shortcutNudge';
 	import { page } from '$app/stores';
 	import type { GroupMember } from '$lib/types';
 	import DownloadSimpleIcon from 'phosphor-svelte/lib/DownloadSimpleIcon';
 	import ClipboardIcon from 'phosphor-svelte/lib/ClipboardIcon';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRightIcon';
+	import LightbulbIcon from 'phosphor-svelte/lib/LightbulbIcon';
 
 	const {
 		onsubmitted,
 		initialUrl,
 		members = []
 	}: {
-		onsubmitted?: (
-			clip: { id: string; status: string; contentType: string },
-			caption: string
-		) => void;
+		onsubmitted?: (clip: { id: string; status: string; contentType: string }) => void;
 		initialUrl?: string;
 		members?: GroupMember[];
 	} = $props();
@@ -132,7 +131,7 @@
 				contentType: data.clip.contentType,
 				autoDismiss: 0
 			});
-			onsubmitted?.(data.clip, '');
+			onsubmitted?.(data.clip);
 		} catch {
 			error = 'Something went wrong';
 		} finally {
@@ -229,6 +228,14 @@
 			<p class="platform-blocked">{platformLabel(url.trim())} links aren't allowed in this group</p>
 		{/if}
 		<InlineError message={error} />
+
+		{#if $showShortcutNudge}
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a href="/share/setup" class="share-hint">
+				<LightbulbIcon size={14} />
+				Share clips faster from other apps
+			</a>
+		{/if}
 	</form>
 {/if}
 
@@ -240,7 +247,6 @@
 		gap: var(--space-md);
 		padding: var(--space-sm) var(--space-lg) var(--space-lg);
 	}
-
 	.clipboard-suggestion {
 		display: flex;
 		align-items: center;
@@ -326,8 +332,6 @@
 			transform: translateY(0);
 		}
 	}
-
-	/* iMessage-style compose fields */
 	.compose-fields {
 		width: 100%;
 		background: var(--bg-elevated);
@@ -338,25 +342,21 @@
 			border-color 0.2s ease,
 			box-shadow 0.2s ease;
 	}
-
 	.compose-fields:focus-within {
 		border-color: var(--accent-primary);
 		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
 	}
-
 	.field-row {
 		display: flex;
 		align-items: center;
 		gap: var(--space-sm);
 		padding: var(--space-xs) var(--space-md);
 	}
-
 	.message-row {
 		align-items: flex-start;
 		padding-top: var(--space-sm);
 		padding-bottom: var(--space-sm);
 	}
-
 	.field-label {
 		font-size: 0.8125rem;
 		font-weight: 600;
@@ -364,28 +364,23 @@
 		flex-shrink: 0;
 		min-width: 56px;
 	}
-
 	.message-row .field-label {
 		padding-top: var(--space-xs);
 	}
-
 	.field-divider {
 		height: 1px;
 		background: var(--border);
 		margin: 0 var(--space-md);
 	}
-
 	.field-input-wrap {
 		display: flex;
 		align-items: center;
 		flex: 1;
 		min-width: 0;
 	}
-
 	.field-input-wrap.has-error input {
 		color: var(--error);
 	}
-
 	.field-input-wrap input {
 		flex: 1;
 		padding: 10px 0;
@@ -439,16 +434,13 @@
 		width: 18px;
 		height: 18px;
 	}
-
 	.submit-btn:active {
 		transform: scale(0.92);
 	}
-
 	.submit-btn:disabled {
 		opacity: 0.35;
 		cursor: not-allowed;
 	}
-
 	.spinner {
 		width: 16px;
 		height: 16px;
@@ -457,13 +449,11 @@
 		border-radius: var(--radius-full);
 		animation: spin 0.6s linear infinite;
 	}
-
 	@keyframes spin {
 		to {
 			transform: rotate(360deg);
 		}
 	}
-
 	.platform-blocked {
 		margin: 0;
 		font-size: 0.8125rem;
@@ -476,7 +466,6 @@
 		text-align: center;
 		padding: var(--space-2xl) var(--space-lg);
 	}
-
 	.no-provider-state :global(.no-provider-icon) {
 		width: 40px;
 		height: 40px;
@@ -484,7 +473,6 @@
 		opacity: 0.4;
 		margin-bottom: var(--space-md);
 	}
-
 	.no-provider-title {
 		font-family: var(--font-display);
 		font-size: 1rem;
@@ -497,4 +485,16 @@
 		color: var(--text-muted);
 		margin: 0;
 	}
+	.share-hint {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs);
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.share-hint :global(svg) {
+		flex-shrink: 0;
+	}
 </style>
diff --git a/src/lib/components/AddVideoModal.svelte b/src/lib/components/AddVideoModal.svelte
index f2a409c..cc9a991 100644
--- a/src/lib/components/AddVideoModal.svelte
+++ b/src/lib/components/AddVideoModal.svelte
@@ -4,8 +4,7 @@
 	import AddVideo from './AddVideo.svelte';
 	import UploadStatus from './UploadStatus.svelte';
 	import BaseSheet from './BaseSheet.svelte';
-	import { addToast, toast, toasts } from '$lib/stores/toasts';
-	import { clipReadySignal, viewClipSignal } from '$lib/stores/toasts';
+	import { addToast, toasts, clipReadySignal, clipOverlaySignal } from '$lib/stores/toasts';
 	import { dismissShortcutNudge } from '$lib/stores/shortcutNudge';
 	import { groupMembers } from '$lib/stores/members';
 
@@ -14,13 +13,9 @@
 	let phase = $state<'form' | 'uploading' | 'done' | 'failed'>('form');
 	let clipId = $state('');
 	let clipContentType = $state('');
-	let caption = $state('');
-	let captionDirty = $state(false);
-	let serverTitle = $state<string | null>(null);
 	let serverArtist = $state<string | null>(null);
 	let serverAlbumArt = $state<string | null>(null);
 	let pollTimer: ReturnType<typeof setInterval> | null = null;
-	let savingCaption = $state(false);
 	let addVideoRef = $state<ReturnType<typeof AddVideo> | null>(null);
 	let sheetRef = $state<ReturnType<typeof BaseSheet> | null>(null);
 
@@ -45,13 +40,9 @@
 		timers.forEach(clearTimeout);
 	});
 
-	function handleSubmitted(
-		clip: { id: string; status: string; contentType: string },
-		submittedCaption: string
-	) {
+	function handleSubmitted(clip: { id: string; status: string; contentType: string }) {
 		clipId = clip.id;
 		clipContentType = clip.contentType;
-		caption = submittedCaption;
 		// Remove the processing toast AddVideo created — UploadStatus screen takes over
 		toasts.update((t) => t.filter((item) => item.clipId !== clip.id));
 		phase = 'uploading';
@@ -65,10 +56,6 @@
 				if (!res.ok) return;
 				const data = await res.json();
 
-				// Update metadata from server (e.g. music title/artist from Odesli)
-				if (data.title && !captionDirty) {
-					serverTitle = data.title;
-				}
 				if (data.artist) serverArtist = data.artist;
 				if (data.albumArt) serverAlbumArt = data.albumArt;
 
@@ -101,24 +88,6 @@
 		}
 	}
 
-	async function saveCaption() {
-		if (!captionDirty || !caption.trim()) return;
-		savingCaption = true;
-		try {
-			const res = await fetch(`/api/clips/${clipId}`, {
-				method: 'PATCH',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ title: caption.trim() })
-			});
-			if (!res.ok) {
-				toast.error('Failed to save caption');
-			}
-		} catch {
-			toast.error('Failed to save caption');
-		}
-		savingCaption = false;
-	}
-
 	function dismiss() {
 		// If still uploading, push a background toast
 		if (phase === 'uploading') {
@@ -134,25 +103,15 @@
 	}
 
 	async function handleSaveAndView() {
-		if (captionDirty && caption.trim()) {
-			await saveCaption();
-		}
 		clipReadySignal.set(clipId);
-		viewClipSignal.set(clipId);
+		clipOverlaySignal.set(clipId);
 		sheetRef?.dismiss();
 	}
 
-	function handleCaptionInput(e: Event) {
-		caption = (e.target as HTMLInputElement).value;
-		captionDirty = true;
-	}
-
 	function handleDismissNudge() {
 		dismissShortcutNudge();
 		sheetRef?.dismiss();
 	}
-
-	const displayTitle = $derived(captionDirty ? caption : serverTitle || caption || '');
 </script>
 
 <div class="add-video-wrapper" class:fullscreen={phase !== 'form'}>
@@ -178,14 +137,11 @@
 			<UploadStatus
 				{phase}
 				{clipContentType}
-				{displayTitle}
 				{serverArtist}
 				{serverAlbumArt}
-				{savingCaption}
 				ondismiss={dismiss}
 				onretry={handleRetry}
 				onsaveandview={handleSaveAndView}
-				oncaptioninput={handleCaptionInput}
 				ondismissnudge={handleDismissNudge}
 			/>
 		{/if}
diff --git a/src/lib/components/ClipOverlay.svelte b/src/lib/components/ClipOverlay.svelte
new file mode 100644
index 0000000..098c31d
--- /dev/null
+++ b/src/lib/components/ClipOverlay.svelte
@@ -0,0 +1,356 @@
+<script lang="ts">
+	import { pushState } from '$app/navigation';
+	import { fetchUnwatchedCount } from '$lib/stores/notifications';
+	import { openCommentsSignal } from '$lib/stores/toasts';
+	import {
+		fetchSingleClip,
+		markClipWatched,
+		toggleClipFavorite,
+		sendClipReaction,
+		retryClipDownload
+	} from '$lib/feed';
+	import type { FeedClip } from '$lib/types';
+	import ReelItem from './ReelItem.svelte';
+	import ViewBadge from './ViewBadge.svelte';
+	import ViewersSheet from './ViewersSheet.svelte';
+	import SkeletonReel from './SkeletonReel.svelte';
+	import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';
+	import WarningCircleIcon from 'phosphor-svelte/lib/WarningCircleIcon';
+
+	const {
+		clipId,
+		currentUserId,
+		autoScroll,
+		gifEnabled = false,
+		openComments = false,
+		ondismiss
+	}: {
+		clipId: string;
+		currentUserId: string;
+		autoScroll: boolean;
+		gifEnabled?: boolean;
+		openComments?: boolean;
+		ondismiss: () => void;
+	} = $props();
+
+	let clip = $state<FeedClip | null>(null);
+	let loading = $state(true);
+	let error = $state(false);
+
+	// Swipe-to-dismiss
+	let overlayEl: HTMLDivElement | null = $state(null);
+	let swipeX = $state(0);
+	let swipeAnimating = $state(false);
+
+	// Viewers sheet (rendered here since ViewBadge is in our top bar)
+	let showViewers = $state(false);
+
+	// History management
+	let closedViaBack = false;
+	let dismissed = false;
+
+	function handleDismiss() {
+		if (dismissed) return;
+		dismissed = true;
+		ondismiss();
+	}
+
+	// Load clip data
+	$effect(() => {
+		(async () => {
+			const data = await fetchSingleClip(clipId);
+			if (data) {
+				clip = data;
+			} else {
+				error = true;
+			}
+			loading = false;
+
+			// Open comments after clip loads if requested
+			if (openComments && data) {
+				// Short delay for ReelItem to mount
+				setTimeout(() => openCommentsSignal.set(clipId), 100);
+			}
+		})();
+	});
+
+	// History: push state on mount, pop on dismiss
+	$effect(() => {
+		pushState('', { clipOverlay: clipId });
+		const handlePopState = () => {
+			closedViaBack = true;
+			handleDismiss();
+		};
+		window.addEventListener('popstate', handlePopState);
+
+		return () => {
+			window.removeEventListener('popstate', handlePopState);
+			if (!closedViaBack) history.back();
+		};
+	});
+
+	// Swipe-to-dismiss gesture (swipe left)
+	$effect(() => {
+		if (!overlayEl) return;
+		const el = overlayEl;
+		let startX = 0;
+		let startY = 0;
+		let tracking = false;
+		let decided = false;
+		let isHorizontal = false;
+
+		function onTouchStart(e: TouchEvent) {
+			if (swipeAnimating) return;
+			const target = e.target as HTMLElement;
+			// Don't interfere with progress bar or interactive elements
+			if (target.closest('.progress-bar') || target.closest('.base-sheet')) return;
+			tracking = true;
+			startX = e.touches[0].clientX;
+			startY = e.touches[0].clientY;
+			decided = false;
+			isHorizontal = false;
+		}
+
+		function onTouchMove(e: TouchEvent) {
+			if (!tracking || swipeAnimating) return;
+			const dx = e.touches[0].clientX - startX;
+			const dy = e.touches[0].clientY - startY;
+
+			if (!decided) {
+				if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
+				decided = true;
+				isHorizontal = Math.abs(dx) > Math.abs(dy);
+				if (!isHorizontal) return;
+			}
+
+			if (!isHorizontal) return;
+			e.preventDefault();
+
+			// Only allow leftward swipe to dismiss; rightward gets rubber-band damping
+			swipeX = dx > 0 ? dx * 0.15 : dx;
+		}
+
+		function onTouchEnd() {
+			if (!tracking || !isHorizontal) {
+				tracking = false;
+				decided = false;
+				return;
+			}
+			tracking = false;
+			decided = false;
+
+			const vw = window.innerWidth;
+			const threshold = vw * 0.2;
+
+			// Dismiss if swiped left far enough
+			if (swipeX < -threshold) {
+				swipeAnimating = true;
+				swipeX = -vw;
+				setTimeout(() => {
+					swipeAnimating = false;
+					handleDismiss();
+				}, 300);
+				return;
+			}
+
+			// Snap back
+			swipeAnimating = true;
+			swipeX = 0;
+			setTimeout(() => {
+				swipeAnimating = false;
+			}, 250);
+		}
+
+		el.addEventListener('touchstart', onTouchStart, { passive: true });
+		el.addEventListener('touchmove', onTouchMove, { passive: false });
+		el.addEventListener('touchend', onTouchEnd, { passive: true });
+		return () => {
+			el.removeEventListener('touchstart', onTouchStart);
+			el.removeEventListener('touchmove', onTouchMove);
+			el.removeEventListener('touchend', onTouchEnd);
+		};
+	});
+
+	// Interaction handlers (local state updates)
+	async function handleWatched(id: string) {
+		await markClipWatched(id);
+		if (clip)
+			clip = {
+				...clip,
+				watched: true,
+				viewCount: clip.watched ? clip.viewCount : clip.viewCount + 1
+			};
+		fetchUnwatchedCount();
+	}
+
+	async function handleFavorite(id: string) {
+		const data = await toggleClipFavorite(id);
+		if (data && clip) clip = { ...clip, favorited: data.favorited };
+	}
+
+	async function handleReaction(id: string, emoji: string) {
+		const data = await sendClipReaction(id, emoji);
+		if (data && clip) clip = { ...clip, reactions: data.reactions };
+	}
+
+	async function handleRetry(id: string) {
+		const ok = await retryClipDownload(id);
+		if (ok && clip) clip = { ...clip, status: 'downloading' };
+	}
+
+	function handleCaptionEdit(id: string, newCaption: string) {
+		if (clip) clip = { ...clip, title: newCaption };
+	}
+
+	function handleDelete() {
+		handleDismiss();
+	}
+</script>
+
+<div
+	class="clip-overlay"
+	class:animating={swipeAnimating}
+	style:transform={swipeX !== 0 ? `translateX(${swipeX}px)` : undefined}
+	bind:this={overlayEl}
+>
+	<!-- Top bar: back button + view badge -->
+	<div class="overlay-top-bar">
+		<button class="back-btn" onclick={handleDismiss} aria-label="Go back">
+			<CaretLeftIcon size={22} weight="bold" />
+		</button>
+		{#if clip && clip.viewCount > 0}
+			<ViewBadge
+				viewCount={clip.viewCount}
+				ontap={() => {
+					showViewers = true;
+				}}
+			/>
+		{/if}
+	</div>
+
+	{#if loading}
+		<SkeletonReel />
+	{:else if error || !clip}
+		<div class="overlay-error">
+			<WarningCircleIcon size={48} />
+			<p class="error-title">Clip not found</p>
+			<button class="error-btn" onclick={handleDismiss}>Go back</button>
+		</div>
+	{:else}
+		<div class="overlay-reel">
+			<ReelItem
+				{clip}
+				{currentUserId}
+				active={true}
+				index={0}
+				{autoScroll}
+				{gifEnabled}
+				canEditCaption={clip.addedBy === currentUserId && !clip.seenByOthers}
+				seenByOthers={clip.seenByOthers}
+				hideViewBadge={true}
+				onwatched={handleWatched}
+				onfavorited={handleFavorite}
+				onreaction={handleReaction}
+				onretry={handleRetry}
+				onended={() => {}}
+				oncaptionedit={handleCaptionEdit}
+				ondelete={handleDelete}
+			/>
+		</div>
+	{/if}
+</div>
+
+{#if showViewers}
+	<ViewersSheet {clipId} ondismiss={() => (showViewers = false)} />
+{/if}
+
+<style>
+	.clip-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 40;
+		background: var(--bg-primary);
+	}
+
+	.clip-overlay.animating {
+		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	.overlay-top-bar {
+		position: absolute;
+		top: max(var(--space-md), env(safe-area-inset-top));
+		left: var(--space-lg);
+		z-index: 6;
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+		min-height: 40px;
+	}
+
+	.back-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		background: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+		border: none;
+		border-radius: var(--radius-full);
+		color: var(--reel-text);
+		cursor: pointer;
+		transition: transform 0.1s ease;
+	}
+
+	.back-btn:active {
+		transform: scale(0.93);
+	}
+
+	.back-btn :global(svg) {
+		filter: drop-shadow(0 1px 2px var(--reel-text-shadow));
+	}
+
+	.overlay-reel {
+		height: 100dvh;
+		width: 100%;
+	}
+
+	.overlay-error {
+		height: 100dvh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		color: var(--text-muted);
+	}
+
+	.overlay-error :global(svg) {
+		opacity: 0.4;
+	}
+
+	.error-title {
+		font-family: var(--font-display);
+		font-size: 1.125rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0;
+	}
+
+	.error-btn {
+		margin-top: var(--space-md);
+		padding: 10px 24px;
+		background: var(--accent-primary);
+		color: var(--bg-primary);
+		border: none;
+		border-radius: var(--radius-full);
+		font-size: 0.875rem;
+		font-weight: 700;
+		cursor: pointer;
+	}
+
+	.error-btn:active {
+		transform: scale(0.97);
+	}
+</style>
diff --git a/src/lib/components/CommentInput.svelte b/src/lib/components/CommentInput.svelte
index 7727a46..36ddb8f 100644
--- a/src/lib/components/CommentInput.svelte
+++ b/src/lib/components/CommentInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import GifIcon from 'phosphor-svelte/lib/GifIcon';
+	import KeyboardIcon from 'phosphor-svelte/lib/KeyboardIcon';
 	import MentionInput from './MentionInput.svelte';
 	import type { GroupMember } from '$lib/types';
 
@@ -7,6 +8,7 @@
 		replyingTo,
 		submitting,
 		gifEnabled = false,
+		gifPickerOpen = false,
 		attachedGif = null,
 		members = [],
 		onsubmit,
@@ -17,6 +19,7 @@
 		replyingTo: { id: string; username: string } | null;
 		submitting: boolean;
 		gifEnabled?: boolean;
+		gifPickerOpen?: boolean;
 		attachedGif: { url: string; stillUrl: string; shareUrl?: string } | null;
 		members?: GroupMember[];
 		onsubmit: (text: string, gifUrl?: string) => void;
@@ -39,11 +42,28 @@
 		mentionInputRef?.clear();
 	}
 
+	export function isEmpty() {
+		return text.trim().length === 0;
+	}
+
 	function handleSubmit(e: SubmitEvent) {
 		e.preventDefault();
 		if (!canSubmit || submitting) return;
 		onsubmit(text.trim(), attachedGif?.shareUrl || attachedGif?.url);
 	}
+
+	function getGifBtnLabel() {
+		if (gifPickerOpen) return 'Show keyboard';
+		if (gifEnabled) return 'Attach GIF';
+		return 'GIFs not available';
+	}
+	const gifBtnLabel = $derived(getGifBtnLabel());
+
+	function handleInputFocus() {
+		if (gifPickerOpen) {
+			ongiftoggle();
+		}
+	}
 </script>
 
 {#if replyingTo}
@@ -64,13 +84,17 @@
 	<button
 		type="button"
 		class="gif-btn"
-		class:active={!!attachedGif}
+		class:active={gifPickerOpen || !!attachedGif}
 		disabled={!gifEnabled}
 		onclick={ongiftoggle}
-		aria-label={gifEnabled ? 'Attach GIF' : 'GIFs not available — host must configure GIPHY'}
+		aria-label={gifBtnLabel}
 		title={gifEnabled ? '' : 'Host must configure GIPHY API key'}
 	>
-		<GifIcon size={26} />
+		{#if gifPickerOpen}
+			<KeyboardIcon size={26} />
+		{:else}
+			<GifIcon size={26} />
+		{/if}
 	</button>
 	<MentionInput
 		bind:this={mentionInputRef}
@@ -82,6 +106,7 @@
 		onchange={(t) => {
 			text = t;
 		}}
+		onfocus={handleInputFocus}
 		onsubmit={() => {
 			if (canSubmit && !submitting)
 				onsubmit(text.trim(), attachedGif?.shareUrl || attachedGif?.url);
diff --git a/src/lib/components/CommentsSheet.svelte b/src/lib/components/CommentsSheet.svelte
index 42cfb04..c459abe 100644
--- a/src/lib/components/CommentsSheet.svelte
+++ b/src/lib/components/CommentsSheet.svelte
@@ -76,6 +76,20 @@
 		loadComments();
 	});
 
+	$effect(() => {
+		function handleKeydown(e: KeyboardEvent) {
+			if (e.key === 'Escape') {
+				if (showGifPicker) {
+					showGifPicker = false;
+				} else if (!attachedGif && commentInput?.isEmpty()) {
+					sheetRef?.dismiss();
+				}
+			}
+		}
+		document.addEventListener('keydown', handleKeydown);
+		return () => document.removeEventListener('keydown', handleKeydown);
+	});
+
 	async function loadComments() {
 		loading = true;
 		const result = await fetchComments(clipId);
@@ -234,86 +248,91 @@
 		sheetId="comments"
 		{ondismiss}
 	>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
-		<div class="comments-list" role="list" aria-label="Comments" onclick={dismissHeartPopover}>
-			{#if loading}
-				<p class="empty">Loading...</p>
-			{:else if feedItems.length === 0}
-				<p class="empty">No comments yet</p>
+		<div class="content-area">
+			{#if showGifPicker}
+				<GifPicker
+					onselect={(gif) => {
+						attachedGif = gif;
+						showGifPicker = false;
+					}}
+					onclose={() => {
+						showGifPicker = false;
+						requestAnimationFrame(() => commentInput?.focus());
+					}}
+					autoFocus
+				/>
 			{:else}
-				{#each feedItems as item (item.type === 'comment' ? item.data.id : `reaction-${item.data.emoji}-${item.data.username}-${item.data.createdAt}`)}
-					{#if item.type === 'reaction'}
-						{@const r = item.data}
-						<div class="reaction-event" role="listitem">
-							<span class="reaction-emoji">{r.emoji}</span>
-							<span class="reaction-text">{r.username} reacted</span>
-							<span class="reaction-time">{relativeTime(r.createdAt)}</span>
-						</div>
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+				<div class="comments-list" role="list" aria-label="Comments" onclick={dismissHeartPopover}>
+					{#if loading}
+						<p class="empty">Loading...</p>
+					{:else if feedItems.length === 0}
+						<p class="empty">No comments yet</p>
 					{:else}
-						{@const comment = item.data}
-						<CommentRow
-							{comment}
-							{currentUserId}
-							{memberUsernames}
-							isEditing={editingId === comment.id}
-							bind:editText
-							isJustPosted={comment.id === justPostedId}
-							isJustHearted={justHeartedIds.has(comment.id)}
-							heartPopoverVisible={heartPopoverId === comment.id}
-							onreply={() => startReply(comment)}
-							ontoggleheart={() => toggleHeart(comment)}
-							onstartedit={() => startEdit(comment)}
-							onsaveedit={() => handleEdit(comment.id)}
-							oncanceledit={cancelEdit}
-							ondelete={() => handleDelete(comment.id)}
-							onstartlongpress={() => startHeartLongPress(comment.id)}
-							oncancellongpress={cancelHeartLongPress}
-						/>
-						{#if comment.replies && comment.replies.length > 0}
-							<div class="replies" role="list" aria-label="Replies to {comment.username}">
-								{#each comment.replies as reply (reply.id)}
-									<CommentRow
-										comment={reply}
-										{currentUserId}
-										{memberUsernames}
-										isReply
-										isEditing={editingId === reply.id}
-										bind:editText
-										isJustHearted={justHeartedIds.has(reply.id)}
-										heartPopoverVisible={heartPopoverId === reply.id}
-										ontoggleheart={() => toggleHeart(reply)}
-										onstartedit={() => startEdit(reply)}
-										onsaveedit={() => handleEdit(reply.id)}
-										oncanceledit={cancelEdit}
-										ondelete={() => handleDelete(reply.id)}
-										onstartlongpress={() => startHeartLongPress(reply.id)}
-										oncancellongpress={cancelHeartLongPress}
-									/>
-								{/each}
-							</div>
-						{/if}
+						{#each feedItems as item (item.type === 'comment' ? item.data.id : `reaction-${item.data.emoji}-${item.data.username}-${item.data.createdAt}`)}
+							{#if item.type === 'reaction'}
+								{@const r = item.data}
+								<div class="reaction-event" role="listitem">
+									<span class="reaction-emoji">{r.emoji}</span>
+									<span class="reaction-text">{r.username} reacted</span>
+									<span class="reaction-time">{relativeTime(r.createdAt)}</span>
+								</div>
+							{:else}
+								{@const comment = item.data}
+								<CommentRow
+									{comment}
+									{currentUserId}
+									{memberUsernames}
+									isEditing={editingId === comment.id}
+									bind:editText
+									isJustPosted={comment.id === justPostedId}
+									isJustHearted={justHeartedIds.has(comment.id)}
+									heartPopoverVisible={heartPopoverId === comment.id}
+									onreply={() => startReply(comment)}
+									ontoggleheart={() => toggleHeart(comment)}
+									onstartedit={() => startEdit(comment)}
+									onsaveedit={() => handleEdit(comment.id)}
+									oncanceledit={cancelEdit}
+									ondelete={() => handleDelete(comment.id)}
+									onstartlongpress={() => startHeartLongPress(comment.id)}
+									oncancellongpress={cancelHeartLongPress}
+								/>
+								{#if comment.replies && comment.replies.length > 0}
+									<div class="replies" role="list" aria-label="Replies to {comment.username}">
+										{#each comment.replies as reply (reply.id)}
+											<CommentRow
+												comment={reply}
+												{currentUserId}
+												{memberUsernames}
+												isReply
+												isEditing={editingId === reply.id}
+												bind:editText
+												isJustHearted={justHeartedIds.has(reply.id)}
+												heartPopoverVisible={heartPopoverId === reply.id}
+												ontoggleheart={() => toggleHeart(reply)}
+												onstartedit={() => startEdit(reply)}
+												onsaveedit={() => handleEdit(reply.id)}
+												oncanceledit={cancelEdit}
+												ondelete={() => handleDelete(reply.id)}
+												onstartlongpress={() => startHeartLongPress(reply.id)}
+												oncancellongpress={cancelHeartLongPress}
+											/>
+										{/each}
+									</div>
+								{/if}
+							{/if}
+						{/each}
 					{/if}
-				{/each}
+				</div>
 			{/if}
 		</div>
 
-		{#if showGifPicker}
-			<GifPicker
-				onselect={(gif) => {
-					attachedGif = gif;
-					showGifPicker = false;
-				}}
-				ondismiss={() => {
-					showGifPicker = false;
-				}}
-			/>
-		{/if}
-
 		<CommentInput
 			bind:this={commentInput}
 			{replyingTo}
 			{submitting}
 			{gifEnabled}
+			gifPickerOpen={showGifPicker}
 			{attachedGif}
 			{members}
 			onsubmit={handleSubmit}
@@ -322,6 +341,9 @@
 			}}
 			ongiftoggle={() => {
 				showGifPicker = !showGifPicker;
+				if (!showGifPicker) {
+					requestAnimationFrame(() => commentInput?.focus());
+				}
 			}}
 			onremovegif={() => {
 				attachedGif = null;
@@ -336,8 +358,15 @@
 	}
 	.comments-sheet-wrapper :global(.base-sheet) {
 		height: 70vh;
+		height: 70dvh;
 		background: rgba(0, 0, 0, 0.93);
 	}
+	.content-area {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
 	.comments-list {
 		flex: 1;
 		overflow-y: auto;
diff --git a/src/lib/components/GifPicker.svelte b/src/lib/components/GifPicker.svelte
index b74516a..4ffca56 100644
--- a/src/lib/components/GifPicker.svelte
+++ b/src/lib/components/GifPicker.svelte
@@ -13,12 +13,28 @@
 
 	const {
 		onselect,
-		ondismiss
+		onclose,
+		autoFocus = false
 	}: {
 		onselect: (gif: GifResult) => void;
-		ondismiss: () => void;
+		onclose?: () => void;
+		autoFocus?: boolean;
 	} = $props();
 
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			searchInputEl?.blur();
+			onclose?.();
+		}
+	}
+
+	let searchInputEl = $state<HTMLInputElement | null>(null);
+
+	export function focusSearch() {
+		searchInputEl?.focus();
+	}
+
 	let query = $state('');
 	let gifs = $state<GifResult[]>([]);
 	let loading = $state(false);
@@ -41,6 +57,9 @@
 
 	$effect(() => {
 		loadGifs();
+		if (autoFocus) {
+			requestAnimationFrame(() => searchInputEl?.focus());
+		}
 		return () => {
 			if (debounceTimer) clearTimeout(debounceTimer);
 		};
@@ -108,9 +127,15 @@
 	<div class="picker-header">
 		<div class="search-field">
 			<MagnifyingGlassIcon size={16} weight="bold" />
-			<input type="text" bind:value={query} placeholder="Search GIPHY" inputmode="search" />
+			<input
+				bind:this={searchInputEl}
+				type="text"
+				bind:value={query}
+				placeholder="Search GIPHY"
+				inputmode="search"
+				onkeydown={handleSearchKeydown}
+			/>
 		</div>
-		<button class="close-btn" onclick={ondismiss}>&times;</button>
 	</div>
 
 	<div class="gif-grid" bind:this={gridEl}>
@@ -149,8 +174,8 @@
 	.gif-picker {
 		display: flex;
 		flex-direction: column;
-		height: 40vh;
-		border-top: 1px solid var(--border);
+		flex: 1;
+		min-height: 0;
 		background: var(--bg-elevated);
 	}
 
@@ -190,16 +215,6 @@
 		color: var(--text-muted);
 	}
 
-	.close-btn {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		font-size: 1.25rem;
-		cursor: pointer;
-		padding: var(--space-xs);
-		line-height: 1;
-	}
-
 	.gif-grid {
 		flex: 1;
 		overflow-y: auto;
diff --git a/src/lib/components/MentionInput.svelte b/src/lib/components/MentionInput.svelte
index 9852806..ee4e2fc 100644
--- a/src/lib/components/MentionInput.svelte
+++ b/src/lib/components/MentionInput.svelte
@@ -8,6 +8,7 @@
 		members = [],
 		singleLine = false,
 		onchange,
+		onfocus,
 		onsubmit
 	}: {
 		placeholder?: string;
@@ -16,6 +17,7 @@
 		members?: GroupMember[];
 		singleLine?: boolean;
 		onchange?: (text: string) => void;
+		onfocus?: () => void;
 		onsubmit?: () => void;
 	} = $props();
 
@@ -198,7 +200,10 @@
 				oninput={handleInput}
 				onkeydown={handleKeydown}
 				onclick={handleClick}
-				onfocus={() => (isFocused = true)}
+				onfocus={() => {
+					isFocused = true;
+					onfocus?.();
+				}}
 				onblur={() => (isFocused = false)}
 				onscroll={syncScroll}
 			/>
@@ -215,7 +220,10 @@
 				oninput={handleInput}
 				onkeydown={handleKeydown}
 				onclick={handleClick}
-				onfocus={() => (isFocused = true)}
+				onfocus={() => {
+					isFocused = true;
+					onfocus?.();
+				}}
 				onblur={() => (isFocused = false)}
 				onscroll={syncScroll}
 			></textarea>
diff --git a/src/lib/components/MusicDisc.svelte b/src/lib/components/MusicDisc.svelte
index 75cccac..7958d43 100644
--- a/src/lib/components/MusicDisc.svelte
+++ b/src/lib/components/MusicDisc.svelte
@@ -23,7 +23,29 @@
 	const hasMusicLinks = $derived(!!(spotifyUrl || appleMusicUrl || youtubeMusicUrl));
 </script>
 
+{#if showMusicLinks}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="music-links-backdrop"
+		onclick={() => (showMusicLinks = false)}
+		onkeydown={(e) => e.stopPropagation()}
+	></div>
+{/if}
+
 <div class="music-disc-area" class:ui-hidden={uiHidden}>
+	<button
+		type="button"
+		class="music-disc"
+		class:spinning={active && !paused && !showMusicLinks}
+		onclick={(e) => {
+			e.stopPropagation();
+			if (hasMusicLinks) showMusicLinks = !showMusicLinks;
+		}}
+		aria-label={showMusicLinks ? 'Close music links' : 'Open music links'}
+	>
+		<img src={albumArt} alt="" class="music-disc-img" />
+	</button>
+
 	{#if showMusicLinks && hasMusicLinks}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -39,7 +61,8 @@
 					class="music-link-pill"
 					aria-label="Spotify"
 				>
-					<PlatformIcon platform="spotify" size={16} />
+					<PlatformIcon platform="spotify" size={18} />
+					<span class="music-link-label">Spotify</span>
 				</a>
 			{/if}
 			{#if appleMusicUrl}
@@ -50,7 +73,8 @@
 					class="music-link-pill"
 					aria-label="Apple Music"
 				>
-					<PlatformIcon platform="apple_music" size={16} />
+					<PlatformIcon platform="apple_music" size={18} />
+					<span class="music-link-label">Apple Music</span>
 				</a>
 			{/if}
 			{#if youtubeMusicUrl}
@@ -61,34 +85,25 @@
 					class="music-link-pill"
 					aria-label="YouTube Music"
 				>
-					<PlatformIcon platform="youtube" size={16} />
+					<PlatformIcon platform="youtube" size={18} />
+					<span class="music-link-label">YouTube</span>
 				</a>
 			{/if}
 		</div>
 	{/if}
-	<button
-		type="button"
-		class="music-disc"
-		class:spinning={active && !paused && !showMusicLinks}
-		onclick={(e) => {
-			e.stopPropagation();
-			if (hasMusicLinks) showMusicLinks = !showMusicLinks;
-		}}
-		aria-label={showMusicLinks ? 'Close music links' : 'Open music links'}
-	>
-		<img src={albumArt} alt="" class="music-disc-img" />
-	</button>
 </div>
 
 <style>
+	.music-links-backdrop {
+		position: absolute;
+		inset: 0;
+		z-index: 9;
+	}
 	.music-disc-area {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 10px);
-		display: flex;
-		align-items: center;
-		gap: var(--space-sm);
-		z-index: 5;
+		bottom: calc(var(--bottom-nav-height, 64px) + 28px);
+		z-index: 10;
 		transition: opacity 0.3s ease;
 	}
 	.music-disc-area.ui-hidden {
@@ -117,40 +132,46 @@
 		display: block;
 	}
 	.music-links-popout {
+		position: absolute;
+		right: calc(44px + var(--space-sm));
+		bottom: 0;
 		display: flex;
-		align-items: center;
-		gap: 6px;
+		flex-direction: column;
+		gap: 4px;
+		padding: var(--space-sm);
+		background: var(--bg-elevated);
+		border-radius: var(--radius-md);
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 		animation: links-slide-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
 	}
 	@keyframes links-slide-in {
 		from {
 			opacity: 0;
-			transform: translateX(12px);
+			transform: translateX(12px) scale(0.95);
 		}
 		to {
 			opacity: 1;
-			transform: translateX(0);
+			transform: translateX(0) scale(1);
 		}
 	}
 	.music-link-pill {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		border-radius: var(--radius-full);
-		background: var(--reel-icon-circle-bg);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		color: var(--reel-text);
+		gap: var(--space-sm);
+		padding: var(--space-sm) var(--space-md);
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--text-primary);
 		text-decoration: none;
-		transition:
-			background 0.15s ease,
-			transform 0.1s ease;
+		white-space: nowrap;
+		transition: background 0.15s ease;
 	}
 	.music-link-pill:active {
-		transform: scale(0.93);
-		background: var(--reel-icon-circle-active);
+		background: var(--bg-surface);
+	}
+	.music-link-label {
+		font-size: 0.8125rem;
+		font-weight: 600;
 	}
 	@keyframes spin-disc {
 		to {
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index 4bec6b4..16f7202 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -108,7 +108,7 @@
 <style>
 	.progress-bar {
 		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) - 8px);
+		bottom: calc(var(--bottom-nav-height, 64px) - 14px);
 		left: 0;
 		right: 0;
 		z-index: 6;
diff --git a/src/lib/components/ReelItem.svelte b/src/lib/components/ReelItem.svelte
index 41e9ef2..5880050 100644
--- a/src/lib/components/ReelItem.svelte
+++ b/src/lib/components/ReelItem.svelte
@@ -4,14 +4,19 @@
 	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';
 	import {
 		setupDesktopGestures,
 		setupMobileGestures,
 		setupReelKeyboard
 	} from '$lib/reelInteractions';
-	import { trackVideoTime, sendWatchPercent, flashIndicator } from '$lib/reelPlayback';
+	import {
+		trackVideoTime,
+		sendWatchPercent,
+		flashIndicator,
+		startPeriodicWatchUpdate
+	} from '$lib/reelPlayback';
 	import { feedUiHidden } from '$lib/stores/uiHidden';
 	import { groupMembers } from '$lib/stores/members';
 	import ReelVideo from './ReelVideo.svelte';
@@ -26,7 +31,7 @@
 	import ViewersSheet from './ViewersSheet.svelte';
 	import ReelIndicators from './ReelIndicators.svelte';
 	import MusicDisc from './MusicDisc.svelte';
-	import SpeedPill from './SpeedPill.svelte';
+
 	import type { FeedClip } from '$lib/types';
 
 	const {
@@ -38,6 +43,7 @@
 		gifEnabled = false,
 		canEditCaption = false,
 		seenByOthers = false,
+		hideViewBadge = false,
 		onwatched,
 		onfavorited,
 		onreaction,
@@ -54,6 +60,7 @@
 		gifEnabled?: boolean;
 		canEditCaption?: boolean;
 		seenByOthers?: boolean;
+		hideViewBadge?: boolean;
 		onwatched: (id: string) => void;
 		onfavorited: (id: string) => void;
 		onreaction: (clipId: string, emoji: string) => Promise<void>;
@@ -68,9 +75,7 @@
 	let muted = $derived($globalMuted);
 	let showMuteIndicator = $state(false);
 	let muteIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
-	let speed = $derived($globalPlaybackSpeed);
 	let showSpeedIndicator = $state(false);
-	let speedIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
 
 	let isDesktop = $state(false);
 	let videoEl: HTMLVideoElement | null = $state(null);
@@ -111,7 +116,6 @@
 	});
 	onDestroy(() => {
 		if (muteIndicatorTimer) clearTimeout(muteIndicatorTimer);
-		if (speedIndicatorTimer) clearTimeout(speedIndicatorTimer);
 		if (playIndicatorTimer) clearTimeout(playIndicatorTimer);
 		if (scrubberTimerId) clearTimeout(scrubberTimerId);
 		sendWatchPercent(clip.id, maxPercent);
@@ -152,6 +156,11 @@
 			maxPercent = 0;
 		}
 	});
+	// Send watch percent to server periodically while active
+	$effect(() => {
+		if (!active) return;
+		return startPeriodicWatchUpdate(clip.id, () => maxPercent);
+	});
 	// Deep-link: open comments sheet when signaled (e.g., from push notification)
 	$effect(() => {
 		const target = $openCommentsSignal;
@@ -232,9 +241,6 @@
 		if (videoEl) connectNormalizer(videoEl);
 		muteIndicatorTimer = flashIndicator((v) => (showMuteIndicator = v), muteIndicatorTimer);
 	}
-	function showSpeedChange() {
-		speedIndicatorTimer = flashIndicator((v) => (showSpeedIndicator = v), speedIndicatorTimer);
-	}
 	function seekMedia(time: number, relative = false) {
 		const el = videoEl ?? audioEl;
 		if (el)
@@ -268,9 +274,6 @@
 			{
 				toggleMute,
 				togglePlayPause,
-				stepSpeedUp,
-				stepSpeedDown,
-				showSpeedChange,
 				seek: (s: number) => seekMedia(s, true)
 			},
 			() => showComments || showPicker
@@ -299,39 +302,26 @@
 <div class="reel-item" data-index={index} bind:this={itemEl}>
 	<div class="bottom-gradient" class:ui-hidden={uiHidden}></div>
 	<div class="top-left-row" class:ui-hidden={uiHidden}>
-		{#if clip.viewCount > 0}
-			<ViewBadge viewCount={clip.viewCount} ontap={() => (showViewers = true)} />
+		{#if !hideViewBadge && clip.viewCount > 0}
+			<ViewBadge
+				viewCount={clip.viewCount}
+				ontap={() => {
+					sendWatchPercent(clip.id, maxPercent);
+					showViewers = true;
+				}}
+			/>
 		{/if}
-		<SpeedPill {active} onspeedchange={showSpeedChange} />
 	</div>
 
 	{#if clip.contentType === 'music'}
-		<ReelMusic
-			{clip}
-			{active}
-			{muted}
-			{autoScroll}
-			playbackRate={speed}
-			{onretry}
-			{onended}
-			bind:audioEl
-		/>
+		<ReelMusic {clip} {active} {muted} {autoScroll} {onretry} {onended} bind:audioEl />
 	{:else}
-		<ReelVideo
-			{clip}
-			{active}
-			{muted}
-			{autoScroll}
-			playbackRate={speed}
-			{onretry}
-			{onended}
-			bind:videoEl
-		/>
+		<ReelVideo {clip} {active} {muted} {autoScroll} {onretry} {onended} bind:videoEl />
 	{/if}
 
 	<ReelIndicators
 		{showSpeedIndicator}
-		{speed}
+		speed={1}
 		{showMuteIndicator}
 		{muted}
 		{showPlayIndicator}
@@ -368,37 +358,37 @@
 				showComments = true;
 			}}
 		/>
+	</div>
 
-		<ActionSidebar
-			favorited={clip.favorited}
-			{reactedEmoji}
-			commentCount={clip.commentCount}
-			unreadCommentCount={localUnreadCount}
-			originalUrl={clip.originalUrl}
-			{muted}
+	<ActionSidebar
+		favorited={clip.favorited}
+		{reactedEmoji}
+		commentCount={clip.commentCount}
+		unreadCommentCount={localUnreadCount}
+		originalUrl={clip.originalUrl}
+		{muted}
+		{uiHidden}
+		{isOwn}
+		onsave={() => onfavorited(clip.id)}
+		oncomment={() => {
+			commentsAutoFocus = false;
+			showComments = true;
+		}}
+		onreactionhold={triggerReactionPickerHold}
+		onmute={toggleMute}
+	/>
+
+	{#if clip.contentType === 'music' && clip.albumArt}
+		<MusicDisc
+			albumArt={clip.albumArt}
+			spotifyUrl={clip.spotifyUrl}
+			appleMusicUrl={clip.appleMusicUrl}
+			youtubeMusicUrl={clip.youtubeMusicUrl}
+			{active}
+			{paused}
 			{uiHidden}
-			{isOwn}
-			onsave={() => onfavorited(clip.id)}
-			oncomment={() => {
-				commentsAutoFocus = false;
-				showComments = true;
-			}}
-			onreactionhold={triggerReactionPickerHold}
-			onmute={toggleMute}
 		/>
-
-		{#if clip.contentType === 'music' && clip.albumArt}
-			<MusicDisc
-				albumArt={clip.albumArt}
-				spotifyUrl={clip.spotifyUrl}
-				appleMusicUrl={clip.appleMusicUrl}
-				youtubeMusicUrl={clip.youtubeMusicUrl}
-				{active}
-				{paused}
-				{uiHidden}
-			/>
-		{/if}
-	</div>
+	{/if}
 </div>
 
 {#if showPicker}
diff --git a/src/lib/components/ReelMusic.svelte b/src/lib/components/ReelMusic.svelte
index 22a7e56..a830578 100644
--- a/src/lib/components/ReelMusic.svelte
+++ b/src/lib/components/ReelMusic.svelte
@@ -130,6 +130,7 @@
 		align-items: center;
 		justify-content: center;
 		overflow: hidden;
+		padding-bottom: calc(var(--bottom-nav-height, 64px) + 34px);
 	}
 
 	.music-bg {
diff --git a/src/lib/components/ReelOverlay.svelte b/src/lib/components/ReelOverlay.svelte
index 9b5c903..c660812 100644
--- a/src/lib/components/ReelOverlay.svelte
+++ b/src/lib/components/ReelOverlay.svelte
@@ -105,7 +105,7 @@
 <style>
 	.reel-overlay {
 		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) + 14px);
+		bottom: calc(var(--bottom-nav-height, 64px) + 34px);
 		left: var(--space-lg);
 		right: var(--space-lg);
 		z-index: 5;
diff --git a/src/lib/components/ToastStack.svelte b/src/lib/components/ToastStack.svelte
index 79efc99..05433d9 100644
--- a/src/lib/components/ToastStack.svelte
+++ b/src/lib/components/ToastStack.svelte
@@ -4,7 +4,7 @@
 		removeToast,
 		replaceToast,
 		clipReadySignal,
-		viewClipSignal,
+		clipOverlaySignal,
 		type Toast
 	} from '$lib/stores/toasts';
 	import { onDestroy } from 'svelte';
@@ -93,7 +93,7 @@
 
 	function handleView(toast: Toast) {
 		if (toast.clipId) {
-			viewClipSignal.set(toast.clipId);
+			clipOverlaySignal.set(toast.clipId);
 		}
 		handleDismiss(toast.id);
 	}
diff --git a/src/lib/components/UploadStatus.svelte b/src/lib/components/UploadStatus.svelte
index 8e7dd35..6b6dbac 100644
--- a/src/lib/components/UploadStatus.svelte
+++ b/src/lib/components/UploadStatus.svelte
@@ -2,30 +2,25 @@
 	import { showShortcutNudge, dismissShortcutNudge } from '$lib/stores/shortcutNudge';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import CheckIcon from 'phosphor-svelte/lib/CheckIcon';
+	import LightbulbIcon from 'phosphor-svelte/lib/LightbulbIcon';
 
 	const {
 		phase,
 		clipContentType,
-		displayTitle,
 		serverArtist,
 		serverAlbumArt,
-		savingCaption,
 		ondismiss,
 		onretry,
 		onsaveandview,
-		oncaptioninput,
 		ondismissnudge
 	}: {
 		phase: 'uploading' | 'done' | 'failed';
 		clipContentType: string;
-		displayTitle: string;
 		serverArtist: string | null;
 		serverAlbumArt: string | null;
-		savingCaption: boolean;
 		ondismiss: () => void;
 		onretry: () => void;
 		onsaveandview: () => void;
-		oncaptioninput: (e: Event) => void;
 		ondismissnudge: () => void;
 	} = $props();
 
@@ -78,27 +73,15 @@
 			<p class="artist-label">{serverArtist}</p>
 		{/if}
 
-		<!-- Caption input -->
-		<div class="caption-field">
-			<input
-				type="text"
-				value={displayTitle}
-				oninput={oncaptioninput}
-				placeholder="Add a caption..."
-				maxlength={200}
-			/>
-		</div>
-
 		<!-- Action buttons -->
 		{#if phase === 'done'}
-			<button class="primary-btn" onclick={onsaveandview} disabled={savingCaption}>
-				{savingCaption ? 'Saving...' : 'View in feed'}
-			</button>
+			<button class="primary-btn" onclick={onsaveandview}>View in feed</button>
 
 			{#if $showShortcutNudge}
 				<div class="shortcut-nudge">
 					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 					<a href="/share/setup" class="nudge-link" onclick={ondismissnudge}>
+						<LightbulbIcon size={14} />
 						Share clips faster from other apps
 					</a>
 					<button class="nudge-dismiss" onclick={dismissShortcutNudge} aria-label="Dismiss">
@@ -232,7 +215,7 @@
 		font-size: 1.125rem;
 		font-weight: 700;
 		color: var(--reel-text);
-		margin: 0 0 4px;
+		margin: 0;
 		text-align: center;
 	}
 	.artist-label {
@@ -241,34 +224,9 @@
 		margin: 0 0 var(--space-xl);
 	}
 
-	/* Caption field */
-	.caption-field {
-		width: 100%;
-		margin-top: var(--space-lg);
-		margin-bottom: var(--space-xl);
-	}
-	.caption-field input {
-		width: 100%;
-		padding: 12px var(--space-lg);
-		background: rgba(255, 255, 255, 0.08);
-		border: 1px solid rgba(255, 255, 255, 0.12);
-		border-radius: var(--radius-md);
-		color: var(--reel-text);
-		font-size: 1rem;
-		font-family: var(--font-body);
-		text-align: center;
-		outline: none;
-		transition: border-color 0.2s ease;
-	}
-	.caption-field input::placeholder {
-		color: rgba(255, 255, 255, 0.3);
-	}
-	.caption-field input:focus {
-		border-color: var(--accent-primary);
-	}
-
 	/* Primary button */
 	.primary-btn {
+		margin-top: var(--space-xl);
 		padding: 14px 32px;
 		background: var(--accent-primary);
 		color: var(--bg-primary);
@@ -298,11 +256,17 @@
 		animation: fade-in 0.3s ease 0.5s both;
 	}
 	.nudge-link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs);
 		font-size: 0.75rem;
 		color: rgba(255, 255, 255, 0.5);
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}
+	.nudge-link :global(svg) {
+		flex-shrink: 0;
+	}
 	.nudge-dismiss {
 		background: none;
 		border: none;
diff --git a/src/lib/reelInteractions.ts b/src/lib/reelInteractions.ts
index 8e56389..3bef843 100644
--- a/src/lib/reelInteractions.ts
+++ b/src/lib/reelInteractions.ts
@@ -4,11 +4,12 @@ const IGNORE_SELECTORS = [
 	'.action-sidebar',
 	'.reel-overlay',
 	'.progress-bar',
-	'.speed-pill',
 	'.comment-prompt',
 	'.play-btn',
 	'.progress-row',
-	'.platform-links'
+	'.platform-links',
+	'.music-disc-area',
+	'.music-links-backdrop'
 ];
 
 function shouldIgnoreTarget(e: { clientX: number; clientY: number }): boolean {
@@ -115,9 +116,6 @@ export function setupMobileGestures(
 export interface KeyboardCallbacks {
 	toggleMute: () => void;
 	togglePlayPause: () => void;
-	stepSpeedUp: () => void;
-	stepSpeedDown: () => void;
-	showSpeedChange: () => void;
 	seek: (seconds: number) => void;
 }
 
@@ -134,14 +132,6 @@ export function setupReelKeyboard(
 			case 'M':
 				callbacks.toggleMute();
 				break;
-			case '[':
-				callbacks.stepSpeedDown();
-				callbacks.showSpeedChange();
-				break;
-			case ']':
-				callbacks.stepSpeedUp();
-				callbacks.showSpeedChange();
-				break;
 		}
 
 		switch (e.key) {
diff --git a/src/lib/reelPlayback.ts b/src/lib/reelPlayback.ts
index ffdcece..a591ca5 100644
--- a/src/lib/reelPlayback.ts
+++ b/src/lib/reelPlayback.ts
@@ -55,6 +55,18 @@ export function sendWatchPercent(clipId: string, maxPercent: number): void {
 	}
 }
 
+export function startPeriodicWatchUpdate(
+	clipId: string,
+	getMaxPercent: () => number,
+	intervalMs = 5000
+): () => void {
+	const id = setInterval(() => {
+		const pct = getMaxPercent();
+		if (pct > 0) sendWatchPercent(clipId, pct);
+	}, intervalMs);
+	return () => clearInterval(id);
+}
+
 export function flashIndicator(
 	setter: (visible: boolean) => void,
 	currentTimer: ReturnType<typeof setTimeout> | null
diff --git a/src/lib/stores/toasts.ts b/src/lib/stores/toasts.ts
index 965bad1..5a60f3d 100644
--- a/src/lib/stores/toasts.ts
+++ b/src/lib/stores/toasts.ts
@@ -14,7 +14,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 clipOverlaySignal = 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 e614671..306b107 100644
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@@ -1,4 +1,5 @@
 import { redirect } from '@sveltejs/kit';
+import { dev } from '$app/environment';
 import type { LayoutServerLoad } from './$types';
 import { env } from '$env/dynamic/private';
 
@@ -14,6 +15,6 @@ export const load: LayoutServerLoad = async ({ locals, url }) => {
 		user: locals.user,
 		group: locals.group,
 		vapidPublicKey: env.VAPID_PUBLIC_KEY || '',
-		gifEnabled: !!env.GIPHY_API_KEY
+		gifEnabled: !!env.GIPHY_API_KEY || dev
 	};
 };
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index d66237f..68e8925 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -7,14 +7,10 @@
 	import LinkIcon from 'phosphor-svelte/lib/LinkIcon';
 	import ArrowDownIcon from 'phosphor-svelte/lib/ArrowDownIcon';
 	import FilmSlateIcon from 'phosphor-svelte/lib/FilmSlateIcon';
+	import CheckCircleIcon from 'phosphor-svelte/lib/CheckCircleIcon';
 	import { addVideoModalOpen } from '$lib/stores/addVideoModal';
-	import {
-		addToast,
-		toast,
-		clipReadySignal,
-		viewClipSignal,
-		openCommentsSignal
-	} from '$lib/stores/toasts';
+	import ClipOverlay from '$lib/components/ClipOverlay.svelte';
+	import { addToast, toast, clipReadySignal, clipOverlaySignal } from '$lib/stores/toasts';
 	import { homeTapSignal } from '$lib/stores/homeTap';
 	import { unwatchedCount, fetchUnwatchedCount } from '$lib/stores/notifications';
 	import { feedUiHidden } from '$lib/stores/uiHidden';
@@ -51,6 +47,11 @@
 	let isDesktopFeed = $state(false);
 	const renderWindow = $derived(isDesktopFeed ? 3 : 2);
 
+	// Clip overlay (dedicated single-clip view)
+	let overlayClipId = $state<string | null>(null);
+	let overlayOpenComments = $state(false);
+	const overlayActive = $derived(overlayClipId !== null);
+
 	let pullDistance = $state(0);
 	let isRefreshing = $state(false);
 	let pullSnapping = $state(false);
@@ -161,8 +162,10 @@
 	}
 
 	function scrollToIndex(index: number) {
-		if (!scrollContainer || index < 0 || index >= clips.length) return;
-		const slot = scrollContainer.querySelectorAll('.reel-slot')[index] as HTMLElement | undefined;
+		if (!scrollContainer || index < 0) return;
+		const slots = scrollContainer.querySelectorAll('.reel-slot');
+		if (index >= slots.length) return;
+		const slot = slots[index] as HTMLElement | undefined;
 		if (slot) slot.scrollIntoView({ behavior: 'smooth' });
 	}
 
@@ -378,13 +381,10 @@
 			clips = data.clips;
 			hasMore = data.hasMore;
 			currentOffset = data.clips.length;
-			activeIndex = 0;
-			if (scrollContainer) scrollContainer.scrollTop = 0;
 			const hasNew = data.clips.some((c) => !previousIds.has(c.id));
-			if (!hasNew && data.clips.length > 0) {
-				toast.info('All caught up');
-			} else if (data.clips.length === 0) {
-				toast.info('Nothing new');
+			if (hasNew) {
+				activeIndex = 0;
+				if (scrollContainer) scrollContainer.scrollTop = 0;
 			}
 		} else {
 			toast.error('Failed to refresh feed');
@@ -511,54 +511,35 @@
 	});
 
 	$effect(() => {
-		const targetClipId = $viewClipSignal;
+		const targetClipId = $clipOverlaySignal;
 		if (!targetClipId) return;
-		viewClipSignal.set(null);
-		(async () => {
-			// Fetch the target clip to determine its watched status
-			const targetClip = await fetchSingleClip(targetClipId);
-			const targetFilter: FeedFilter = targetClip?.watched ? 'watched' : 'unwatched';
-
-			filter = targetFilter;
-			currentOffset = 0;
-			hasMore = true;
-			const data = await fetchClips(targetFilter, PAGE_SIZE, sort);
-			if (data) {
-				// Ensure target clip is in the list (it may be beyond the first page)
-				const inPage = data.clips.some((c) => c.id === targetClipId);
-				if (inPage) {
-					clips = data.clips;
-				} else if (targetClip) {
-					// Prepend target clip and de-dupe from the rest
-					clips = [targetClip, ...data.clips.filter((c) => c.id !== targetClipId)];
-				} else {
-					clips = data.clips;
-				}
-				hasMore = data.hasMore;
-				currentOffset = data.clips.length;
-			}
-			loading = false;
-			await new Promise((r) => requestAnimationFrame(r));
-			const idx = clips.findIndex((c) => c.id === targetClipId);
-			if (idx >= 0) {
-				activeIndex = idx;
-				scrollToIndex(idx);
-			}
-		})();
+		clipOverlaySignal.set(null);
+		overlayClipId = targetClipId;
 	});
 
 	$effect(() => {
 		const tap = $homeTapSignal;
 		if (tap > 0) {
 			homeTapSignal.set(0);
-			if (filter !== 'unwatched') setFilter('unwatched');
-			else {
+			if (overlayClipId) {
+				handleOverlayDismiss();
+			} else if (filter !== 'unwatched') {
+				setFilter('unwatched');
+			} else {
 				activeIndex = 0;
 				if (scrollContainer) scrollContainer.scrollTop = 0;
 			}
 		}
 	});
 
+	function handleOverlayDismiss() {
+		overlayClipId = null;
+		overlayOpenComments = false;
+		// Refresh feed to reflect any changes made in the overlay
+		loadInitialClips();
+		fetchUnwatchedCount();
+	}
+
 	function handleCaptionEdit(clipId: string, newCaption: string) {
 		clips = clips.map((c) => (c.id === clipId ? { ...c, title: newCaption } : c));
 	}
@@ -641,13 +622,13 @@
 			})();
 		}
 
-		// Deep-link: jump to a specific clip (and optionally open comments)
+		// Deep-link: open a specific clip in the overlay (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);
+			overlayOpenComments = deepComments;
+			clipOverlaySignal.set(deepClipId);
 			// Clean URL without triggering navigation
 			const clean = new URL(window.location.href);
 			clean.searchParams.delete('clip');
@@ -742,7 +723,7 @@
 							<ReelItem
 								{clip}
 								{currentUserId}
-								active={i === activeIndex}
+								active={i === activeIndex && !overlayActive}
 								index={i}
 								{autoScroll}
 								{gifEnabled}
@@ -781,12 +762,43 @@
 					<div class="reel-slot loading-more-slot">
 						<div class="reel-placeholder"><span class="spinner"></span></div>
 					</div>
+				{:else if !hasMore}
+					<div class="reel-slot end-slide" data-index={clips.length}>
+						<div class="end-slide-content">
+							<span class="end-slide-icon">
+								<CheckCircleIcon size={56} weight="duotone" />
+							</span>
+							<p class="end-slide-title">
+								{filter === 'unwatched' ? "You're all caught up!" : "That's all, folks!"}
+							</p>
+							<p class="end-slide-sub">
+								{#if filter === 'unwatched'}
+									Check back later for new clips
+								{:else if filter === 'watched'}
+									All your watched clips are above
+								{:else}
+									Your favorite clips are above
+								{/if}
+							</p>
+						</div>
+					</div>
 				{/if}
 			</div>
 		{/if}
 	</div>
 </div>
 
+{#if overlayClipId}
+	<ClipOverlay
+		clipId={overlayClipId}
+		{currentUserId}
+		{autoScroll}
+		{gifEnabled}
+		openComments={overlayOpenComments}
+		ondismiss={handleOverlayDismiss}
+	/>
+{/if}
+
 {#if $addVideoModalOpen}
 	<AddVideoModal ondismiss={() => addVideoModalOpen.set(false)} />
 {/if}
@@ -967,6 +979,35 @@
 		color: var(--text-primary);
 		margin: 0;
 	}
+	.end-slide {
+		background: var(--bg-primary);
+	}
+	.end-slide-content {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		animation: empty-in 400ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+	.end-slide-icon {
+		color: var(--accent-primary);
+		opacity: 0.7;
+		margin-bottom: var(--space-xs);
+	}
+	.end-slide-title {
+		font-family: var(--font-display);
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0;
+	}
+	.end-slide-sub {
+		color: var(--text-muted);
+		font-size: 0.875rem;
+		margin: 0;
+	}
 	@keyframes fade-in {
 		from {
 			opacity: 0;
diff --git a/src/routes/api/clips/+server.ts b/src/routes/api/clips/+server.ts
index 101fb2d..d78427c 100644
--- a/src/routes/api/clips/+server.ts
+++ b/src/routes/api/clips/+server.ts
@@ -36,6 +36,54 @@ import { createLogger } from '$lib/server/logger';
 
 const log = createLogger('clips');
 
+/** Set clip status to 'downloading' and trigger the download pipeline. Marks as 'failed' on error. */
+async function startDownload(clipId: string, url: string, contentType: string, label: string) {
+	await db.update(clips).set({ status: 'downloading' }).where(eq(clips.id, clipId));
+
+	const onError = async (err: unknown) => {
+		log.error({ err, clipId }, `download failed (${label})`);
+		await db
+			.update(clips)
+			.set({ status: 'failed' })
+			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
+	};
+
+	if (contentType === 'music') {
+		downloadMusic(clipId, url).catch(onError);
+	} else {
+		downloadVideo(clipId, url).catch(onError);
+	}
+}
+
+/** Validate a clip URL and return an error response, or null if valid. */
+function validateClipUrl(
+	videoUrl: string | undefined,
+	group: { platformFilterMode: string | null; platformFilterList: string | null }
+): Response | null {
+	if (!videoUrl) return json({ error: 'URL required' }, { status: 400 });
+
+	if (!isSupportedUrl(videoUrl)) {
+		return json(
+			{
+				error:
+					'Unsupported URL. Try a link from TikTok, YouTube, Instagram, X, Reddit, Spotify, or other supported platforms.'
+			},
+			{ status: 400 }
+		);
+	}
+
+	const platform = detectPlatform(videoUrl)!;
+	const filterList = group.platformFilterList ? JSON.parse(group.platformFilterList) : null;
+	if (!isPlatformAllowed(platform, group.platformFilterMode ?? 'all', filterList)) {
+		return json(
+			{ error: `${platformLabel(videoUrl) || platform} links are not allowed in this group` },
+			{ status: 400 }
+		);
+	}
+
+	return null;
+}
+
 const VALID_FILTERS = ['unwatched', 'watched', 'favorites'] as const;
 const VALID_SORTS = ['oldest', 'round-robin'] as const;
 
@@ -236,36 +284,29 @@ export const POST: RequestHandler = withAuth(async ({ request }, { user, group }
 	const message =
 		typeof body.message === 'string' ? body.message.trim().slice(0, 500) || null : null;
 
-	if (!videoUrl) return json({ error: 'URL required' }, { status: 400 });
-
-	if (!isSupportedUrl(videoUrl)) {
-		return json(
-			{
-				error:
-					'Unsupported URL. Try a link from TikTok, YouTube, Instagram, X, Reddit, Spotify, or other supported platforms.'
-			},
-			{ status: 400 }
-		);
-	}
-
-	const platform = detectPlatform(videoUrl)!;
-
-	// Enforce group platform filter
-	const filterList = group.platformFilterList ? JSON.parse(group.platformFilterList) : null;
-	if (!isPlatformAllowed(platform, group.platformFilterMode ?? 'all', filterList)) {
-		return json(
-			{ error: `${platformLabel(videoUrl) || platform} links are not allowed in this group` },
-			{ status: 400 }
-		);
-	}
+	const urlError = validateClipUrl(videoUrl, group);
+	if (urlError) return urlError;
+	const validUrl = videoUrl!;
 
+	const platform = detectPlatform(validUrl)!;
 	const contentType = getContentType(platform);
-	const normalizedUrl = normalizeUrl(videoUrl);
+	const normalizedUrl = normalizeUrl(validUrl);
 
 	// Check if this URL already exists in the group's feed
 	const existing = await db.query.clips.findFirst({
 		where: and(eq(clips.groupId, user.groupId), eq(clips.originalUrl, normalizedUrl))
 	});
+	if (existing && existing.status === 'failed') {
+		// Previous attempt failed — retry the download instead of rejecting
+		if (title) {
+			await db.update(clips).set({ title }).where(eq(clips.id, existing.id));
+		}
+		await startDownload(existing.id, validUrl, existing.contentType, 're-add retry');
+		return json(
+			{ clip: { id: existing.id, status: 'downloading', contentType: existing.contentType } },
+			{ status: 201 }
+		);
+	}
 	if (existing) {
 		return json({ error: 'This link has already been added to the feed.' }, { status: 409 });
 	}
@@ -301,19 +342,7 @@ export const POST: RequestHandler = withAuth(async ({ request }, { user, group }
 	});
 
 	// Route to appropriate download pipeline
-	const markFailedOnError = async (err: unknown) => {
-		log.error({ err, clipId }, 'download failed');
-		await db
-			.update(clips)
-			.set({ status: 'failed' })
-			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
-	};
-
-	if (contentType === 'music') {
-		downloadMusic(clipId, videoUrl).catch(markFailedOnError);
-	} else {
-		downloadVideo(clipId, videoUrl).catch(markFailedOnError);
-	}
+	await startDownload(clipId, validUrl, contentType, 'new clip');
 
 	// Push notification is sent after download succeeds (see video/download.ts, music/download.ts)
 
diff --git a/src/routes/api/clips/[id]/+server.ts b/src/routes/api/clips/[id]/+server.ts
index b4fecc6..68d0c27 100644
--- a/src/routes/api/clips/[id]/+server.ts
+++ b/src/routes/api/clips/[id]/+server.ts
@@ -12,31 +12,76 @@ import {
 	notifications
 } from '$lib/server/db/schema';
 import { eq, and, ne, count, inArray } from 'drizzle-orm';
-import { withClipAuth, parseBody, isResponse } from '$lib/server/api-utils';
+import {
+	withClipAuth,
+	parseBody,
+	isResponse,
+	mapUsersByIds,
+	groupReactions
+} from '$lib/server/api-utils';
 import { cleanupClipFiles } from '$lib/server/download-utils';
 
 export const GET: RequestHandler = withClipAuth(async ({ params }, { user, clip }) => {
-	// Check if anyone other than the uploader has watched this clip
-	let canEditCaption = false;
-	if (clip.addedBy === user.id) {
-		const [watchResult] = await db
-			.select({ count: count() })
-			.from(watched)
-			.where(and(eq(watched.clipId, params.id), ne(watched.userId, clip.addedBy)));
-		canEditCaption = watchResult.count === 0;
-	}
+	const clipId = params.id;
+	const userId = user.id;
+
+	// Fetch all related data in parallel
+	const [watchedRows, favRow, clipReactions, clipComments, userCommentView, uploaderInfo] =
+		await Promise.all([
+			db.query.watched.findMany({ where: eq(watched.clipId, clipId) }),
+			db.query.favorites.findFirst({
+				where: and(eq(favorites.clipId, clipId), eq(favorites.userId, userId))
+			}),
+			db.query.reactions.findMany({ where: eq(reactions.clipId, clipId) }),
+			db.query.comments.findMany({ where: eq(comments.clipId, clipId) }),
+			db.query.commentViews.findFirst({
+				where: and(eq(commentViews.clipId, clipId), eq(commentViews.userId, userId))
+			}),
+			mapUsersByIds([clip.addedBy])
+		]);
+
+	const isWatched = watchedRows.some((w) => w.userId === userId);
+	const isFavorited = !!favRow;
+	const viewCount = watchedRows.length;
+	const seenByOthers = watchedRows.some((w) => w.userId !== clip.addedBy);
+	const canEditCaption = clip.addedBy === userId && !seenByOthers;
+
+	const reactionData = groupReactions(clipReactions, userId);
+
+	const commentCount = clipComments.length;
+	const unreadCommentCount = userCommentView
+		? clipComments.filter((c) => c.createdAt > userCommentView.viewedAt).length
+		: commentCount;
+
+	const uploaderUser = uploaderInfo.get(clip.addedBy);
 
 	return json({
 		id: clip.id,
-		status: clip.status,
+		originalUrl: clip.originalUrl,
 		videoPath: clip.videoPath,
 		audioPath: clip.audioPath,
 		thumbnailPath: clip.thumbnailPath,
 		title: clip.title,
 		artist: clip.artist,
 		albumArt: clip.albumArt,
-		contentType: clip.contentType,
+		spotifyUrl: clip.spotifyUrl,
+		appleMusicUrl: clip.appleMusicUrl,
+		youtubeMusicUrl: clip.youtubeMusicUrl,
+		addedBy: clip.addedBy,
+		addedByUsername: uploaderUser?.username || 'Unknown',
+		addedByAvatar: uploaderUser?.avatarPath || null,
 		platform: clip.platform,
+		status: clip.status,
+		contentType: clip.contentType,
+		durationSeconds: clip.durationSeconds,
+		watched: isWatched,
+		favorited: isFavorited,
+		reactions: reactionData,
+		commentCount,
+		unreadCommentCount,
+		viewCount,
+		seenByOthers,
+		createdAt: clip.createdAt,
 		canEditCaption
 	});
 });
diff --git a/src/routes/api/clips/[id]/reactions/+server.ts b/src/routes/api/clips/[id]/reactions/+server.ts
index b3985ae..f64910a 100644
--- a/src/routes/api/clips/[id]/reactions/+server.ts
+++ b/src/routes/api/clips/[id]/reactions/+server.ts
@@ -1,7 +1,7 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
-import { reactions } from '$lib/server/db/schema';
+import { reactions, notifications } from '$lib/server/db/schema';
 import { eq, and } from 'drizzle-orm';
 import { v4 as uuid } from 'uuid';
 import {
@@ -37,18 +37,32 @@ export const POST: RequestHandler = withClipAuth(async ({ params, request }, { u
 		return badRequest('Invalid emoji');
 	}
 
-	// Toggle: if exists, delete; if not, insert
+	// Find any existing reaction by this user on this clip (one reaction per user per clip)
 	const existing = await db.query.reactions.findFirst({
-		where: and(
-			eq(reactions.clipId, clipId),
-			eq(reactions.userId, userId),
-			eq(reactions.emoji, emoji)
-		)
+		where: and(eq(reactions.clipId, clipId), eq(reactions.userId, userId))
 	});
 
+	const sameEmoji = existing?.emoji === emoji;
+
 	if (existing) {
+		// Remove the old reaction
 		await db.delete(reactions).where(eq(reactions.id, existing.id));
-	} else {
+
+		// Remove the old notification entry for this reaction
+		await db
+			.delete(notifications)
+			.where(
+				and(
+					eq(notifications.clipId, clipId),
+					eq(notifications.actorId, userId),
+					eq(notifications.type, 'reaction'),
+					eq(notifications.emoji, existing.emoji)
+				)
+			);
+	}
+
+	if (!sameEmoji) {
+		// Add the new reaction (either fresh or replacing a different emoji)
 		await db.insert(reactions).values({
 			id: uuid(),
 			clipId,
@@ -77,5 +91,8 @@ export const POST: RequestHandler = withClipAuth(async ({ params, request }, { u
 		where: eq(reactions.clipId, clipId)
 	});
 
-	return json({ reactions: groupReactions(allReactions, userId), toggled: !existing });
+	return json({
+		reactions: groupReactions(allReactions, userId),
+		toggled: !sameEmoji || !existing
+	});
 });
diff --git a/src/routes/api/clips/share/+server.ts b/src/routes/api/clips/share/+server.ts
index 5494d4b..1b92bc6 100644
--- a/src/routes/api/clips/share/+server.ts
+++ b/src/routes/api/clips/share/+server.ts
@@ -20,6 +20,25 @@ import { createLogger } from '$lib/server/logger';
 
 const log = createLogger('share');
 
+/** Set clip status to 'downloading' and trigger the download pipeline. Marks as 'failed' on error. */
+async function startDownload(clipId: string, url: string, contentType: string, label: string) {
+	await db.update(clips).set({ status: 'downloading' }).where(eq(clips.id, clipId));
+
+	const onError = async (err: unknown) => {
+		log.error({ err, clipId }, `download failed (${label})`);
+		await db
+			.update(clips)
+			.set({ status: 'failed' })
+			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
+	};
+
+	if (contentType === 'music') {
+		downloadMusic(clipId, url).catch(onError);
+	} else {
+		downloadVideo(clipId, url).catch(onError);
+	}
+}
+
 /** Shortcut-friendly JSON response. Every response includes `success` (1|0) and `message`. */
 function shareResponse(
 	success: boolean,
@@ -169,6 +188,13 @@ export const POST: RequestHandler = async ({ request, url, locals }) => {
 	const existing = await db.query.clips.findFirst({
 		where: and(eq(clips.groupId, group.id), eq(clips.originalUrl, normalizedVideoUrl))
 	});
+	if (existing && existing.status === 'failed') {
+		// Previous attempt failed — retry the download instead of rejecting
+		await startDownload(existing.id, videoUrl, existing.contentType, 're-share retry');
+		return shareResponse(true, '✅  Clip shared! (retrying download)', 201, {
+			clipId: existing.id
+		});
+	}
 	if (existing) {
 		return shareResponse(false, '❌  This clip has already been shared!', 409);
 	}
@@ -196,19 +222,7 @@ export const POST: RequestHandler = async ({ request, url, locals }) => {
 	});
 
 	// 10. Async download
-	const markFailedOnError = async (err: unknown) => {
-		log.error({ err, clipId }, 'download failed');
-		await db
-			.update(clips)
-			.set({ status: 'failed' })
-			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
-	};
-
-	if (contentType === 'music') {
-		downloadMusic(clipId, videoUrl).catch(markFailedOnError);
-	} else {
-		downloadVideo(clipId, videoUrl).catch(markFailedOnError);
-	}
+	await startDownload(clipId, videoUrl, contentType, 'new clip');
 
 	// Push notification is sent after download succeeds (see video/download.ts, music/download.ts)
 
diff --git a/src/routes/api/gifs/search/+server.ts b/src/routes/api/gifs/search/+server.ts
index b7586c2..46c333b 100644
--- a/src/routes/api/gifs/search/+server.ts
+++ b/src/routes/api/gifs/search/+server.ts
@@ -1,13 +1,50 @@
 import { json } from '@sveltejs/kit';
+import { dev } from '$app/environment';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/private';
 import { withAuth, safeInt } from '$lib/server/api-utils';
 
 const GIPHY_BASE = 'https://api.giphy.com/v1/gifs';
 
+// Placeholder GIFs for dev mode when no GIPHY API key is configured
+function generateDevGifs(count: number) {
+	const colors = [
+		'E74C3C',
+		'3498DB',
+		'2ECC71',
+		'F39C12',
+		'9B59B6',
+		'1ABC9C',
+		'E91E63',
+		'00BCD4',
+		'FF5722',
+		'795548'
+	];
+	const widths = [200, 200, 200, 200, 200];
+	const heights = [200, 150, 250, 180, 220];
+	return Array.from({ length: count }, (_, i) => {
+		const w = widths[i % widths.length];
+		const h = heights[i % heights.length];
+		const color = colors[i % colors.length];
+		const url = `https://placehold.co/${w}x${h}/${color}/white?text=GIF+${i + 1}`;
+		return {
+			id: `dev-${i}`,
+			title: `Dev GIF ${i + 1}`,
+			url,
+			stillUrl: url,
+			shareUrl: url,
+			width: w,
+			height: h
+		};
+	});
+}
+
 export const GET: RequestHandler = withAuth(async ({ url }, _auth) => {
 	const apiKey = env.GIPHY_API_KEY;
-	if (!apiKey) return json({ error: 'GIF search not configured' }, { status: 503 });
+	if (!apiKey) {
+		if (dev) return json({ gifs: generateDevGifs(20) });
+		return json({ error: 'GIF search not configured' }, { status: 503 });
+	}
 
 	const q = url.searchParams.get('q')?.trim();
 	const limit = safeInt(url.searchParams.get('limit'), 20, 30);