diff --git a/README.md b/README.md
index 4e83027..31e3edf 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,6 @@
-# sv
+# atmo.watch
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-pnpm dlx sv@0.17.0 create --template minimal --types ts --add prettier eslint vitest="usages:unit,component" playwright tailwindcss="plugins:typography,forms" --install pnpm 06-atmo-watch
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+review movies and tv shows with your atmosphere account, using popfeed.social's lexicons.
 
 ## API Worker
 
diff --git a/src/lib/components/AccountMenuItem.svelte b/src/lib/components/AccountMenuItem.svelte
index bee6805..574c678 100644
--- a/src/lib/components/AccountMenuItem.svelte
+++ b/src/lib/components/AccountMenuItem.svelte
@@ -3,9 +3,20 @@
 	import type { Pathname } from '$app/types';
 	import { loginDialog } from '$lib/login.svelte';
 	import { UserRound } from '@lucide/svelte';
+	import Avatar from './Avatar.svelte';
 	import MenuItem from './MenuItem.svelte';
 
-	let { did, onLoginOpen }: { did: string | null; onLoginOpen?: () => void } = $props();
+	let {
+		did,
+		avatarUrl,
+		variant = 'sidebar',
+		onLoginOpen
+	}: {
+		did: string | null;
+		avatarUrl?: string;
+		variant?: 'sidebar' | 'bottom';
+		onLoginOpen?: () => void;
+	} = $props();
 	let profileHref: Pathname | undefined = $derived(
 		did ? (`/profile/${did}` as Pathname) : undefined
 	);
@@ -25,7 +36,16 @@
 	tooltip={did ? 'Profile' : 'Log in'}
 	{active}
 	onclick={openLogin}
-	class="md:mt-auto"
+	{variant}
+	class={variant === 'sidebar' ? (did ? 'p-1.5 md:mt-auto md:p-1.5' : 'md:mt-auto') : undefined}
 >
-	<UserRound class="size-5 shrink-0" strokeWidth={1.5} aria-hidden="true" />
+	{#if did}
+		<Avatar
+			src={avatarUrl}
+			alt=""
+			class={variant === 'bottom' ? 'size-6 shrink-0' : 'size-7 shrink-0'}
+		/>
+	{:else}
+		<UserRound class="size-5 shrink-0" strokeWidth={1.5} aria-hidden="true" />
+	{/if}
 </MenuItem>
diff --git a/src/lib/components/AppMenu.svelte b/src/lib/components/AppMenu.svelte
index dede2d8..cd3cc6e 100644
--- a/src/lib/components/AppMenu.svelte
+++ b/src/lib/components/AppMenu.svelte
@@ -4,69 +4,48 @@
 	import MenuItem from './MenuItem.svelte';
 	import SearchMenuItem from './SearchMenuItem.svelte';
 
-	let { did }: { did: string | null } = $props();
-	let menuOpen = $state(false);
-
-	$effect(() => {
-		if (page.url.pathname) menuOpen = false;
-	});
+	let { did, avatarUrl }: { did: string | null; avatarUrl?: string } = $props();
 </script>
 
+{#snippet homeIcon()}
+	<svg
+		class="size-5 shrink-0"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		aria-hidden="true"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="m2.25 12 8.954-8.955a1.125 1.125 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125C4.5 20.496 5.004 21 5.625 21H9.75v-4.875C9.75 15.504 10.254 15 10.875 15h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75"
+		/>
+	</svg>
+{/snippet}
+
 <aside
-	class={`fixed top-2 bottom-2 left-0 z-40 w-56 py-2 transition-transform duration-200 md:w-[4.5rem] md:translate-x-0 ${
-		menuOpen ? 'translate-x-0' : '-translate-x-64'
-	}`}
+	class="fixed top-2 bottom-2 left-0 z-40 hidden w-[4.5rem] py-2 md:block"
 	aria-label="Main navigation"
 >
-	<nav
-		class="flex h-full flex-col items-start justify-end gap-2 bg-base-950/90 px-3 pt-3 pb-14 backdrop-blur-xl md:items-center md:justify-start md:bg-transparent md:px-0 md:py-0 md:backdrop-blur-none"
-	>
+	<nav class="flex h-full flex-col items-center justify-start gap-2">
 		<MenuItem href="/" label="Home" active={page.url.pathname === '/'}>
-			<svg
-				class="size-5 shrink-0"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.5"
-				aria-hidden="true"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="m2.25 12 8.954-8.955a1.125 1.125 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125C4.5 20.496 5.004 21 5.625 21H9.75v-4.875C9.75 15.504 10.254 15 10.875 15h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75"
-				/>
-			</svg>
+			{@render homeIcon()}
 		</MenuItem>
 
-		<SearchMenuItem {did} onOpen={() => (menuOpen = false)} />
-		<AccountMenuItem {did} onLoginOpen={() => (menuOpen = false)} />
+		<SearchMenuItem {did} />
+		<AccountMenuItem {did} {avatarUrl} />
 	</nav>
 </aside>
 
-{#if menuOpen}
-	<button
-		type="button"
-		onclick={() => (menuOpen = false)}
-		class="fixed inset-0 z-30 bg-base-950/85 backdrop-blur-sm md:hidden"
-	>
-		<span class="sr-only">Close menu</span>
-	</button>
-{/if}
-
-<button
-	type="button"
-	onclick={() => (menuOpen = !menuOpen)}
-	class="fixed bottom-3 left-3 z-50 inline-flex size-10 items-center justify-center rounded-lg border border-white/10 bg-base-900/80 text-white shadow-lg backdrop-blur-sm md:hidden"
-	aria-expanded={menuOpen}
-	aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+<nav
+	class="fixed bottom-[calc(0.75rem+env(safe-area-inset-bottom))] left-1/2 z-50 grid min-h-14 w-[calc(100%-1.5rem)] max-w-sm -translate-x-1/2 grid-cols-3 rounded-2xl border border-white/10 bg-base-950/90 p-1.5 shadow-2xl shadow-black/40 backdrop-blur-xl md:hidden"
+	aria-label="Main navigation"
 >
-	{#if menuOpen}
-		<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-		</svg>
-	{:else}
-		<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5h16.5m-16.5 9h16.5" />
-		</svg>
-	{/if}
-</button>
+	<MenuItem href="/" label="Home" active={page.url.pathname === '/'} variant="bottom">
+		{@render homeIcon()}
+	</MenuItem>
+
+	<SearchMenuItem {did} variant="bottom" />
+	<AccountMenuItem {did} {avatarUrl} variant="bottom" />
+</nav>
diff --git a/src/lib/components/BackdropGallery.svelte b/src/lib/components/BackdropGallery.svelte
new file mode 100644
index 0000000..ea3cbd7
--- /dev/null
+++ b/src/lib/components/BackdropGallery.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { backdropUrl } from '$lib/images';
+	import type { MediaImage } from '$lib/types';
+
+	let {
+		images,
+		title
+	}: {
+		images: readonly MediaImage[];
+		title: string;
+	} = $props();
+
+	let open = $state(false);
+	let selectedIndex = $state(0);
+	let selectedImage = $derived(images[selectedIndex]);
+
+	function openImage(index: number) {
+		selectedIndex = index;
+		open = true;
+	}
+
+	function moveSelection(offset: number) {
+		if (images.length < 2) return;
+		selectedIndex = (selectedIndex + offset + images.length) % images.length;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!open) return;
+
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			moveSelection(-1);
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			moveSelection(1);
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="mt-4 grid gap-3 sm:grid-cols-2">
+	{#each images as image, index (image.source === 'tmdb' ? image.path : image.url)}
+		<button
+			type="button"
+			onclick={() => openImage(index)}
+			class="group overflow-hidden rounded-xl border border-white/10 bg-base-900 text-left transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+			aria-label={`Open backdrop ${index + 1} of ${images.length} for ${title}`}
+		>
+			<img
+				src={backdropUrl(image, 'w780')}
+				alt=""
+				loading="lazy"
+				class="aspect-video size-full object-cover transition-transform duration-300 group-hover:scale-[1.015] motion-reduce:transition-none"
+			/>
+		</button>
+	{/each}
+</div>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay class="fixed inset-0 z-[100] bg-black/85 backdrop-blur-md" />
+		<Dialog.Content
+			class="fixed top-1/2 left-1/2 z-[101] w-[calc(100%-2rem)] max-w-7xl -translate-x-1/2 -translate-y-1/2 outline-none sm:w-[calc(100%-6rem)]"
+		>
+			<Dialog.Title class="sr-only">Backdrops for {title}</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				Backdrop {selectedIndex + 1} of {images.length}. Use the left and right arrow keys to
+				browse, or press Escape to close.
+			</Dialog.Description>
+
+			{#if selectedImage}
+				<img
+					src={backdropUrl(selectedImage, 'original')}
+					alt="Backdrop {selectedIndex + 1} for {title}"
+					class="mx-auto max-h-[calc(100dvh-6rem)] max-w-full rounded-xl border border-white/15 bg-black object-contain shadow-2xl"
+				/>
+			{/if}
+
+			{#if images.length > 1}
+				<button
+					type="button"
+					onclick={() => moveSelection(-1)}
+					class="absolute top-1/2 left-2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/15 bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:left-4"
+					aria-label="Previous backdrop"
+				>
+					<svg
+						class="size-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.8"
+							d="m15 18-6-6 6-6"
+						/>
+					</svg>
+				</button>
+
+				<button
+					type="button"
+					onclick={() => moveSelection(1)}
+					class="absolute top-1/2 right-2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/15 bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:right-4"
+					aria-label="Next backdrop"
+				>
+					<svg
+						class="size-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.8"
+							d="m9 18 6-6-6-6"
+						/>
+					</svg>
+				</button>
+
+				<div
+					class="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-black/65 px-2.5 py-1 text-xs font-medium text-white tabular-nums backdrop-blur-sm"
+				>
+					{selectedIndex + 1} / {images.length}
+				</div>
+			{/if}
+
+			<Dialog.Close
+				class="absolute -top-12 right-0 inline-flex size-9 items-center justify-center rounded-full border border-white/15 bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+			>
+				<svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+					<path
+						fill-rule="evenodd"
+						d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				<span class="sr-only">Close backdrops</span>
+			</Dialog.Close>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/src/lib/components/ItemPage.svelte b/src/lib/components/ItemPage.svelte
index 09c29d7..8497edd 100644
--- a/src/lib/components/ItemPage.svelte
+++ b/src/lib/components/ItemPage.svelte
@@ -2,6 +2,7 @@
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import Avatar from './Avatar.svelte';
+	import BackdropGallery from './BackdropGallery.svelte';
 	import Container from './Container.svelte';
 	import ExternalRatings from './ExternalRatings.svelte';
 	import ItemsGrid from './ItemsGrid.svelte';
@@ -62,6 +63,7 @@
 	);
 	let showAllReviews = $state(false);
 	let showAllRecommendations = $state(false);
+	let showAllCast = $state(false);
 	let writtenReviews = $derived(data.reviews.filter((review) => review.text.trim()));
 	let displayedReviews = $derived(showAllReviews ? writtenReviews : writtenReviews.slice(0, 3));
 	let mobileRecommendations = $derived(
@@ -70,11 +72,15 @@
 	let desktopRecommendations = $derived(
 		showAllRecommendations ? data.recommendations : data.recommendations.slice(0, 10)
 	);
+	let castShowMoreClass = $derived(
+		data.cast.length > 10 ? '' : data.cast.length > 8 ? 'lg:hidden' : 'sm:hidden'
+	);
 
 	$effect(() => {
 		if (data.item.tmdbId > 0 && data.item.creativeWorkType) {
 			showAllReviews = false;
 			showAllRecommendations = false;
+			showAllCast = false;
 		}
 	});
 </script>
@@ -114,19 +120,13 @@
 
 <main class="relative isolate min-h-dvh overflow-hidden bg-base-950 text-white">
 	{#if data.item.backdrop}
-		<div
-			class="pointer-events-none absolute inset-x-0 top-0 h-[36rem] overflow-hidden sm:h-[46rem]"
-		>
-			<img
-				src={backdropUrl(data.item.backdrop)}
-				alt=""
-				class="absolute inset-0 size-full scale-105 object-cover object-center opacity-35 blur-[2px]"
-			/>
-			<div
-				class="absolute inset-0 bg-gradient-to-b from-black/25 via-base-950/75 to-base-950"
-			></div>
-		</div>
+		<img
+			src={backdropUrl(data.item.backdrop, 'w780')}
+			alt=""
+			class="pointer-events-none fixed inset-0 size-full object-cover object-center opacity-20"
+		/>
 	{/if}
+	<div class="pointer-events-none fixed inset-0 bg-black/50"></div>
 
 	<Container class="relative z-10 pt-8 pb-12 sm:pt-12">
 		<div class="px-4">
@@ -325,15 +325,23 @@
 			{/if}
 
 			{#if data.cast.length > 0}
-				<section class="mt-10 border-t border-white/10 pt-6 pb-8 text-sm text-white">
+				<section class="mt-10 border-t border-white/10 pt-6 text-sm text-white">
 					<h2 class="text-lg font-semibold tracking-tight">Cast</h2>
 					<div class="mt-4 grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-4 lg:grid-cols-5">
-						{#each data.cast as castMember (castMember.id)}
+						{#each data.cast as castMember, index (castMember.id)}
 							<a
 								href={resolve('/cast/[id]', {
 									id: `${castMember.id}-${slugify(castMember.name)}`
 								})}
-								class="flex min-w-0 flex-col items-center gap-1.5 transition-opacity hover:opacity-75"
+								class={`min-w-0 flex-col items-center gap-1.5 transition-opacity hover:opacity-75 ${
+									showAllCast || index < 6
+										? 'flex'
+										: index < 8
+											? 'hidden sm:flex'
+											: index < 10
+												? 'hidden lg:flex'
+												: 'hidden'
+								}`}
 							>
 								<Avatar
 									src={profileUrl(castMember.profile_path, 'h632')}
@@ -347,6 +355,37 @@
 							</a>
 						{/each}
 					</div>
+
+					{#if !showAllCast && data.cast.length > 6}
+						<button
+							type="button"
+							onclick={() => (showAllCast = true)}
+							class={`mt-5 inline-flex h-8 items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.07] px-3 text-xs font-semibold text-white transition-colors hover:bg-white/[0.12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70 ${castShowMoreClass}`}
+						>
+							show more
+							<svg
+								class="size-3.5"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="1.8"
+									d="m6 9 6 6 6-6"
+								/>
+							</svg>
+						</button>
+					{/if}
+				</section>
+			{/if}
+
+			{#if data.backdrops.length > 0}
+				<section class="mt-10 border-t border-white/10 pt-6 pb-8 text-sm text-white">
+					<h2 class="text-lg font-semibold tracking-tight">Backdrops</h2>
+					<BackdropGallery images={data.backdrops} title={data.item.title} />
 				</section>
 			{/if}
 		</div>
diff --git a/src/lib/components/MediaCollection.svelte b/src/lib/components/MediaCollection.svelte
new file mode 100644
index 0000000..139bd36
--- /dev/null
+++ b/src/lib/components/MediaCollection.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import ItemsGrid from './ItemsGrid.svelte';
+	import type { MediaSummary } from '$lib/types';
+	import { cn } from '$lib/utils';
+
+	let {
+		title,
+		items,
+		class: className
+	}: {
+		title: string;
+		items: readonly MediaSummary[];
+		class?: string;
+	} = $props();
+
+	let expanded = $state(false);
+	let mobileItems = $derived(expanded ? items : items.slice(0, 6));
+	let desktopItems = $derived(expanded ? items : items.slice(0, 10));
+</script>
+
+<section class={cn('w-full', className)}>
+	<h2 class="text-lg font-semibold tracking-tight text-white">{title}</h2>
+
+	<div class="lg:hidden">
+		<ItemsGrid items={mobileItems} class="mt-4" />
+	</div>
+	<div class="hidden lg:block">
+		<ItemsGrid items={desktopItems} class="mt-4" />
+	</div>
+
+	{#if !expanded && items.length > 6}
+		<button
+			type="button"
+			onclick={() => (expanded = true)}
+			class={cn(
+				'mt-5 inline-flex h-8 items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.07] px-3 text-xs font-semibold text-white transition-colors hover:bg-white/[0.12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70',
+				items.length <= 10 && 'lg:hidden'
+			)}
+		>
+			show more
+			<svg
+				class="size-3.5"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m6 9 6 6 6-6" />
+			</svg>
+		</button>
+	{/if}
+</section>
diff --git a/src/lib/components/MenuItem.svelte b/src/lib/components/MenuItem.svelte
index f1d1fe5..e7ac9c6 100644
--- a/src/lib/components/MenuItem.svelte
+++ b/src/lib/components/MenuItem.svelte
@@ -10,6 +10,7 @@
 		tooltip = label,
 		active = false,
 		onclick,
+		variant = 'sidebar',
 		class: className,
 		children
 	}: {
@@ -18,13 +19,17 @@
 		tooltip?: string;
 		active?: boolean;
 		onclick?: () => void;
+		variant?: 'sidebar' | 'bottom';
 		class?: string;
 		children: Snippet;
 	} = $props();
 
 	let styles = $derived(
 		cn(
-			'group relative flex h-10 w-full items-center gap-3 rounded-lg p-2.5 text-sm font-semibold transition-colors md:size-10',
+			'group relative flex transition-colors',
+			variant === 'bottom'
+				? 'h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-2 py-1 text-[0.65rem] font-medium'
+				: 'h-10 w-full items-center gap-3 rounded-lg p-2.5 text-sm font-semibold md:size-10',
 			active
 				? 'bg-accent-500/10 text-accent-300'
 				: 'text-base-300 hover:bg-white/10 hover:text-white',
@@ -35,12 +40,14 @@
 
 {#snippet content()}
 	{@render children()}
-	<span class="md:sr-only">{label}</span>
-	<span
-		class="pointer-events-none absolute left-14 hidden rounded-lg bg-accent-950/20 px-3 py-2 text-xs whitespace-nowrap text-white opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100 md:block"
-	>
-		{tooltip}
-	</span>
+	<span class={variant === 'bottom' ? 'max-w-full truncate' : 'md:sr-only'}>{label}</span>
+	{#if variant === 'sidebar'}
+		<span
+			class="pointer-events-none absolute left-14 hidden rounded-lg bg-accent-950/20 px-3 py-2 text-xs whitespace-nowrap text-white opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100 md:block"
+		>
+			{tooltip}
+		</span>
+	{/if}
 {/snippet}
 
 {#if href}
diff --git a/src/lib/components/SearchMenuItem.svelte b/src/lib/components/SearchMenuItem.svelte
index fccbbfa..f7f2d2e 100644
--- a/src/lib/components/SearchMenuItem.svelte
+++ b/src/lib/components/SearchMenuItem.svelte
@@ -7,7 +7,11 @@
 	import MenuItem from './MenuItem.svelte';
 	import SearchCommand from './SearchCommand.svelte';
 
-	let { did, onOpen }: { did: string | null; onOpen?: () => void } = $props();
+	let {
+		did,
+		variant = 'sidebar',
+		onOpen
+	}: { did: string | null; variant?: 'sidebar' | 'bottom'; onOpen?: () => void } = $props();
 	let open = $state(false);
 
 	$effect(() => {
@@ -31,7 +35,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<MenuItem label="Search" onclick={openSearch}>
+	<MenuItem label="Search" onclick={openSearch} {variant}>
 		<svg
 			class="size-5 shrink-0"
 			viewBox="0 0 24 24"
diff --git a/src/lib/reviews.server.ts b/src/lib/reviews.server.ts
index b1fdab2..5442455 100644
--- a/src/lib/reviews.server.ts
+++ b/src/lib/reviews.server.ts
@@ -6,6 +6,7 @@ import type * as ReviewListRecords from '$lib/contrail/types/types/watch/atmo/re
 import type {
 	ActorSummary,
 	MediaImage,
+	MediaSummary,
 	ReviewCardModel,
 	ReviewCommentModel,
 	SupportedCreativeWorkType
@@ -174,6 +175,33 @@ export async function getReviewInteractions(reviewUri: string, viewerDid: string
 	};
 }
 
+export async function getRecentlyReviewedMedia(): Promise<MediaSummary[]> {
+	const response = await contrail.get('watch.atmo.review.listRecords', {
+		params: { limit: 200, order: 'desc' }
+	});
+
+	if (!response.ok) {
+		throw new Error(`Could not load recent reviews from Contrail (${response.status})`);
+	}
+
+	const seen = new Set<string>();
+	const media: MediaSummary[] = [];
+
+	for (const record of response.data.records) {
+		const review = toReview(record);
+		if (!review?.media.poster) continue;
+
+		const key = `${review.media.creativeWorkType}:${review.media.tmdbId}`;
+		if (seen.has(key)) continue;
+
+		seen.add(key);
+		media.push(review.media);
+		if (media.length === 20) break;
+	}
+
+	return media;
+}
+
 export async function getMediaReviews(
 	tmdbId: number,
 	creativeWorkType: SupportedCreativeWorkType
diff --git a/src/lib/tmdb.server.ts b/src/lib/tmdb.server.ts
index feec1f8..21a7c34 100644
--- a/src/lib/tmdb.server.ts
+++ b/src/lib/tmdb.server.ts
@@ -30,13 +30,14 @@ import type {
 	WatchProvider
 } from './types';
 
-const MEDIA_APPENDS: ['credits', 'recommendations', 'external_ids', 'videos', 'watch/providers'] = [
+const MEDIA_APPENDS: [
 	'credits',
 	'recommendations',
 	'external_ids',
 	'videos',
-	'watch/providers'
-];
+	'watch/providers',
+	'images'
+] = ['credits', 'recommendations', 'external_ids', 'videos', 'watch/providers', 'images'];
 const PERSON_APPENDS: ['combined_credits'] = ['combined_credits'];
 
 const HOUR = 60 * 60;
@@ -93,16 +94,18 @@ function getMediaSource(
 	creativeWorkType: SupportedCreativeWorkType,
 	cache: ReturnType<typeof getPublicDataCache>
 ): Promise<MediaDetailsSource> {
-	return cachePublicData(cache, `tmdb:media:${creativeWorkType}:${tmdbId}`, async () => {
+	return cachePublicData(cache, `tmdb:media:v2:${creativeWorkType}:${tmdbId}`, async () => {
 		const tmdb = getClient();
 		return creativeWorkType === 'movie'
 			? tmdb.movies.details({
 					movie_id: tmdbId,
-					append_to_response: MEDIA_APPENDS
+					append_to_response: MEDIA_APPENDS,
+					include_image_language: ['en', 'null']
 				})
 			: tmdb.tv_series.details({
 					series_id: tmdbId,
-					append_to_response: MEDIA_APPENDS
+					append_to_response: MEDIA_APPENDS,
+					include_image_language: ['en', 'null']
 				});
 	});
 }
@@ -169,6 +172,13 @@ function toCastMember(person: Cast): CastMember {
 	};
 }
 
+function toBackdropGallery(source: MediaDetailsSource): MediaImage[] {
+	const paths = [source.backdrop_path, ...source.images.backdrops.map((image) => image.file_path)];
+	return [...new Set(paths.filter((path): path is string => Boolean(path)))]
+		.slice(0, 6)
+		.map((path) => ({ source: 'tmdb', path }));
+}
+
 const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
 
 function getRegionName(code: string) {
@@ -286,6 +296,7 @@ export async function getMediaPage(
 			toMediaSummary(item, creativeWorkType)
 		),
 		cast: details.credits.cast.map(toCastMember),
+		backdrops: toBackdropGallery(details),
 		imdb_id: details.external_ids.imdb_id ?? null,
 		imdb_votes: omdb.imdbVotes,
 		ratings: omdb.ratings,
@@ -297,7 +308,8 @@ export async function getMediaPage(
 async function loadHomePage() {
 	const empty = {
 		currentlyInTheaters: [] as MediaSummary[],
-		popular: [] as MediaSummary[]
+		popularMovies: [] as MediaSummary[],
+		popularShows: [] as MediaSummary[]
 	};
 	let tmdb: TMDB;
 
@@ -318,7 +330,6 @@ async function loadHomePage() {
 			? theatersResult.value.results
 					.map((item) => toMediaSummary(item, 'movie'))
 					.filter((item) => item.poster)
-					.slice(0, 16)
 			: [];
 	const popularMovies =
 		popularMoviesResult.status === 'fulfilled'
@@ -326,24 +337,22 @@ async function loadHomePage() {
 					.map((item) => toMediaSummary(item, 'movie'))
 					.filter((item) => item.poster)
 			: [];
-	const popularTv =
+	const popularShows =
 		popularTvResult.status === 'fulfilled'
 			? popularTvResult.value.results
 					.map((item) => toMediaSummary(item, 'tv_show'))
 					.filter((item) => item.poster)
 			: [];
-	const popular = Array.from({ length: Math.max(popularMovies.length, popularTv.length) })
-		.flatMap((_, index) => [popularMovies[index], popularTv[index]])
-		.filter((item): item is MediaSummary => Boolean(item))
-		.slice(0, 16);
 
-	return { currentlyInTheaters, popular };
+	return { currentlyInTheaters, popularMovies, popularShows };
 }
 
 export function getHomePage() {
 	const cache = getPublicDataCache(DISCOVERY_TTL);
-	return cachePublicData(cache, 'tmdb:home', loadHomePage, (data) =>
-		Boolean(data.currentlyInTheaters.length || data.popular.length)
+	return cachePublicData(cache, 'tmdb:home:v2', loadHomePage, (data) =>
+		Boolean(
+			data.currentlyInTheaters.length || data.popularMovies.length || data.popularShows.length
+		)
 	);
 }
 
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index e484482..3045a40 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,5 +1,26 @@
+import type { Did } from '@atcute/lexicons';
+import { getAtprotoCdnImageUrl } from '$lib/atproto/images';
+import { contrail } from '$lib/contrail';
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = ({ locals }) => ({
-	did: locals.did
+async function getViewerAvatar(did: Did) {
+	try {
+		const response = await contrail.get('watch.atmo.getProfile', { params: { actor: did } });
+		if (!response.ok) return undefined;
+
+		const bskyProfile = response.data.profiles.find(
+			(entry) => entry.collection === 'app.bsky.actor.profile'
+		);
+		const avatar =
+			bskyProfile?.value && 'avatar' in bskyProfile.value ? bskyProfile.value.avatar : undefined;
+		return avatar ? getAtprotoCdnImageUrl({ did, blob: avatar, preset: 'avatar' }) : undefined;
+	} catch (cause) {
+		console.error('Could not load viewer avatar from Contrail', cause);
+		return undefined;
+	}
+}
+
+export const load: LayoutServerLoad = async ({ locals }) => ({
+	did: locals.did,
+	avatarUrl: locals.did ? await getViewerAvatar(locals.did) : undefined
 });
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4270264..ba3bee0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,13 +8,13 @@
 	let { data, children } = $props();
 </script>
 
-<div class="flex min-h-dvh flex-col">
+<div class="flex min-h-dvh flex-col pb-20 md:pb-0">
 	<div class="flex-1">
 		{@render children()}
 	</div>
 	<Footer />
 </div>
 
-<AppMenu did={data.did} />
+<AppMenu did={data.did} avatarUrl={data.avatarUrl} />
 <LoginDialog />
 <ReviewDialog />
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index dc28c1a..428f791 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,4 +1,15 @@
 import type { PageServerLoad } from './$types';
+import { getRecentlyReviewedMedia } from '$lib/reviews.server';
 import { getHomePage } from '$lib/tmdb.server';
 
-export const load: PageServerLoad = async () => getHomePage();
+export const load: PageServerLoad = async () => {
+	const [homePage, recentlyReviewedInAtmosphere] = await Promise.all([
+		getHomePage(),
+		getRecentlyReviewedMedia().catch((cause) => {
+			console.error('Could not load recently reviewed media from Contrail', cause);
+			return [];
+		})
+	]);
+
+	return { ...homePage, recentlyReviewedInAtmosphere };
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0d0a479..d12131b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
 	import Container from '$lib/components/Container.svelte';
-	import ItemsGrid from '$lib/components/ItemsGrid.svelte';
+	import MediaCollection from '$lib/components/MediaCollection.svelte';
 	import SearchCommand from '$lib/components/SearchCommand.svelte';
-	import TabSelect from '$lib/components/TabSelect.svelte';
 
 	let { data } = $props();
-	let selected = $state<'popular' | 'theaters'>('popular');
-	let selectedItems = $derived(selected === 'popular' ? data.popular : data.currentlyInTheaters);
-	const collections = [
-		{ value: 'popular', label: 'popular' },
-		{ value: 'theaters', label: 'in theaters' }
-	] satisfies Array<{ value: typeof selected; label: string }>;
+	let collections = $derived(
+		[
+			{ title: 'Popular movies', items: data.popularMovies },
+			{ title: 'In theaters', items: data.currentlyInTheaters },
+			{ title: 'Popular shows', items: data.popularShows },
+			{ title: 'Recently reviewed in the atmosphere', items: data.recentlyReviewedInAtmosphere }
+		].filter((collection) => collection.items.length > 0)
+	);
 </script>
 
 <svelte:head>
@@ -26,16 +27,18 @@
 			<SearchCommand did={data.did} />
 		</div>
 
-		<section class="mt-20 w-full pb-12">
-			<h2 class="sr-only">Browse movies and TV shows</h2>
-
-			<TabSelect bind:value={selected} options={collections} label="Choose collection" />
-
-			{#if selectedItems.length > 0}
-				<ItemsGrid items={selectedItems} />
-			{:else}
-				<p class="mt-8 text-sm text-base-400">This collection is unavailable right now.</p>
-			{/if}
-		</section>
+		{#if collections.length > 0}
+			<div class="mt-20 space-y-12 pb-12">
+				{#each collections as collection, index (collection.title)}
+					<MediaCollection
+						title={collection.title}
+						items={collection.items}
+						class={index > 0 ? 'border-t border-white/10 pt-8' : undefined}
+					/>
+				{/each}
+			</div>
+		{:else}
+			<p class="mt-20 pb-12 text-sm text-base-400">No movies or shows are available right now.</p>
+		{/if}
 	</Container>
 </main>
diff --git a/src/routes/profile/[actor]/+layout.server.ts b/src/routes/profile/[actor]/+layout.server.ts
index 528a5c2..19b725c 100644
--- a/src/routes/profile/[actor]/+layout.server.ts
+++ b/src/routes/profile/[actor]/+layout.server.ts
@@ -39,12 +39,23 @@ export const load: LayoutServerLoad = async ({ params }) => {
 	const did = profileEntry.did;
 	const avatar =
 		bskyProfile?.value && 'avatar' in bskyProfile.value ? bskyProfile.value.avatar : undefined;
+	const popfeedBanner = popfeedProfile?.value?.banner;
+	const bskyBanner = bskyProfile?.value?.banner;
+	const banner = popfeedBanner ?? bskyBanner;
+	const bannerUrl = banner
+		? getAtprotoCdnImageUrl({ did, blob: banner, preset: 'banner' })
+		: undefined;
+
 	return {
 		profile: {
 			did,
 			handle: profileEntry.handle ?? did,
 			displayName: popfeedProfile?.value?.displayName ?? bskyProfile?.value?.displayName,
-			avatarUrl: avatar ? getAtprotoCdnImageUrl({ did, blob: avatar, preset: 'avatar' }) : undefined
+			description: popfeedProfile?.value?.description ?? bskyProfile?.value?.description,
+			avatarUrl: avatar
+				? getAtprotoCdnImageUrl({ did, blob: avatar, preset: 'avatar' })
+				: undefined,
+			bannerUrl
 		}
 	};
 };
diff --git a/src/routes/profile/[actor]/+page.svelte b/src/routes/profile/[actor]/+page.svelte
index 53e2575..d993fd6 100644
--- a/src/routes/profile/[actor]/+page.svelte
+++ b/src/routes/profile/[actor]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import Avatar from '$lib/components/Avatar.svelte';
+	import { UserProfile } from '@foxui/social';
 	import Container from '$lib/components/Container.svelte';
 	import ItemCard from '$lib/components/ItemCard.svelte';
 	import ListCard from '$lib/components/ListCard.svelte';
@@ -42,19 +42,19 @@
 
 <main class="min-h-dvh bg-base-950 pb-12 text-base-50">
 	<Container class="px-4 pt-12">
-		<header class="flex items-center gap-4 border-b border-base-800 pb-8 sm:gap-6">
-			<Avatar
-				src={data.profile.avatarUrl}
-				alt={`@${data.profile.handle}'s Bluesky avatar`}
-				class="size-20 shrink-0 sm:size-24"
-			/>
-			<h1 class="min-w-0 truncate text-xl font-semibold text-white sm:text-2xl">
-				@{data.profile.handle}
-			</h1>
-		</header>
+		<UserProfile
+			class="not-prose"
+			profile={{
+				handle: `@${data.profile.handle}`,
+				displayName: data.profile.displayName,
+				description: data.profile.description,
+				avatar: data.profile.avatarUrl,
+				banner: data.profile.bannerUrl
+			}}
+		/>
 
 		{#if profileTabs.length > 0}
-			<section class="pt-8" aria-labelledby="activity-heading">
+			<section class="mx-auto max-w-2xl pt-8" aria-labelledby="activity-heading">
 				<h2 id="activity-heading" class="sr-only">@{data.profile.handle}'s activity</h2>
 				<TabSelect
 					bind:value={selectedSection}
@@ -83,7 +83,7 @@
 				{/if}
 			</section>
 		{:else}
-			<p class="pt-8 text-sm text-base-400">No reviews, ratings, or lists yet.</p>
+			<p class="mx-auto max-w-2xl pt-8 text-sm text-base-400">No reviews, ratings, or lists yet.</p>
 		{/if}
 	</Container>
 </main>