diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index e02d950..abe4795 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -5,7 +5,7 @@ import {
   CalendarIcon,
   CogIcon,
   FilmIcon,
-  PlayIcon,
+  Squares2X2Icon,
   ArrowRightOnRectangleIcon
 } from '@heroicons/react/24/outline';
 
@@ -14,7 +14,7 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const { logout } = useAuth();
+  const { user, logout } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -24,62 +24,65 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   };
 
   const navigation = [
-    { name: 'Dashboard', href: '/', icon: PlayIcon },
-    { name: 'Watch Items', href: '/watch-items', icon: FilmIcon },
+    { name: 'Overview', href: '/', icon: Squares2X2Icon },
+    { name: 'Watch lists', href: '/watch-items', icon: FilmIcon },
     { name: 'Upcoming', href: '/upcoming', icon: CalendarIcon },
-    { name: 'Configuration', href: '/config', icon: CogIcon },
+    { name: 'Settings', href: '/config', icon: CogIcon },
   ];
 
   return (
-    <div className="min-h-screen bg-dark-bg-primary">
-      <nav className="bg-dark-bg-secondary shadow-lg border-b border-dark-border">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex">
-              <div className="flex-shrink-0 flex items-center">
-                <div className="flex items-center space-x-3">
-                  <img src="/assets/logo.svg" alt="Letterboxarr" className="h-8 w-8" />
-                  <h1 className="text-xl font-bold text-dark-text-primary">Letterboxarr</h1>
-                </div>
-              </div>
-              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-                {navigation.map((item) => {
-                  const isCurrent = location.pathname === item.href;
-                  return (
-                    <Link
-                      key={item.name}
-                      to={item.href}
-                      className={`${
-                        isCurrent
-                          ? 'border-brand-blue text-dark-text-primary'
-                          : 'border-transparent text-dark-text-muted hover:border-dark-border hover:text-dark-text-secondary'
-                      } inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors`}
-                    >
-                      <item.icon className="h-4 w-4 mr-2" />
-                      {item.name}
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-            <div className="flex items-center">
-              <button
-                onClick={handleLogout}
-                className="btn-secondary inline-flex items-center text-sm font-medium"
+    <div className="min-h-screen bg-dark-bg-primary lg:pl-56">
+      <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-brand-blue focus:p-3 focus:text-dark-bg-primary">
+        Skip to content
+      </a>
+      <aside className="border-b border-dark-border/50 bg-dark-bg-secondary lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-56 lg:flex-col lg:border-b-0 lg:border-r">
+        <div className="flex items-center justify-between gap-3 px-5 pt-5 lg:px-6 lg:pt-8">
+          <Link to="/" className="flex items-center gap-2 text-lg font-bold tracking-tight" aria-label="Letterboxarr overview">
+            <img src="/assets/logo.svg" alt="" className="h-8 w-8" />
+            Letterboxarr
+          </Link>
+          <button onClick={handleLogout} className="rounded-md p-2 text-dark-text-muted hover:text-dark-text-primary lg:hidden" aria-label="Log out">
+            <ArrowRightOnRectangleIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <nav aria-label="Main navigation" className="grid grid-cols-4 gap-1 px-3 py-4 lg:mt-9 lg:grid-cols-1 lg:gap-2 lg:px-4 lg:py-0">
+          {navigation.map(item => {
+            const isCurrent = location.pathname === item.href
+              || (item.href === '/watch-items' && location.pathname.startsWith('/movies/'));
+            return (
+              <Link
+                key={item.href}
+                to={item.href}
+                aria-current={isCurrent ? 'page' : undefined}
+                className={`flex min-h-11 items-center justify-center gap-2 rounded-md px-2 py-2.5 text-xs font-medium transition-colors sm:text-sm lg:justify-start lg:px-3 ${
+                  isCurrent
+                    ? 'bg-dark-bg-primary text-brand-blue'
+                    : 'text-dark-text-muted hover:bg-dark-bg-primary/50 hover:text-dark-text-primary'
+                }`}
               >
-                <ArrowRightOnRectangleIcon className="h-4 w-4 mr-1" />
-                Logout
-              </button>
-            </div>
-          </div>
+                <item.icon className="hidden h-4 w-4 flex-shrink-0 sm:block" aria-hidden="true" />
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto hidden px-6 pb-7 pt-8 lg:block">
+          <p className="text-xs text-dark-text-muted">Your personal film collection</p>
+          <p className="mt-2 truncate text-sm text-dark-text-secondary" title={user?.username}>{user?.username}</p>
+          <button onClick={handleLogout} className="mt-4 inline-flex items-center gap-2 rounded-md py-2 text-xs text-dark-text-muted hover:text-dark-text-primary">
+            <ArrowRightOnRectangleIcon className="h-4 w-4" aria-hidden="true" />
+            Log out
+          </button>
         </div>
-      </nav>
+      </aside>
 
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <main id="main-content" tabIndex={-1} className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-10 lg:py-4">
         {children}
       </main>
     </div>
   );
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/frontend/src/components/SyncStatusBanner.tsx b/frontend/src/components/SyncStatusBanner.tsx
index 69dbdc6..87f33d4 100644
--- a/frontend/src/components/SyncStatusBanner.tsx
+++ b/frontend/src/components/SyncStatusBanner.tsx
@@ -5,6 +5,7 @@ import { ProgressTrack } from './CategoryProgress';
 
 interface SyncStatusBannerProps {
   progress: SyncProgress;
+  embedded?: boolean;
 }
 
 // A round is four phases long and the slow ones are a page a second, so a sync
@@ -15,7 +16,7 @@ interface SyncStatusBannerProps {
 // It is only rendered while a round runs, so there is no idle state to design:
 // it appears when one starts, whether or not this browser was what started it,
 // and goes when it ends.
-const SyncStatusBanner: React.FC<SyncStatusBannerProps> = ({ progress }) => {
+const SyncStatusBanner: React.FC<SyncStatusBannerProps> = ({ progress, embedded = false }) => {
   const { label, item, done, total, step, steps, added } = progress;
 
   // A phase with nothing due — release dates already current, say — is still a
@@ -23,8 +24,8 @@ const SyncStatusBanner: React.FC<SyncStatusBannerProps> = ({ progress }) => {
   const share = total > 0 ? done / total : 1;
 
   return (
-    <div className="card mt-6 p-4" role="status" aria-live="polite">
-      <div className="flex items-baseline gap-3">
+    <div className={embedded ? 'mt-5 border-t border-dark-border/50 pt-4' : 'card mt-6 p-4'} role="status" aria-live="polite">
+      <div className="flex flex-wrap items-baseline gap-3">
         {/* Self-evident from the moving bar below, so kept out of the reading */}
         <ArrowPathIcon className="h-4 w-4 flex-shrink-0 animate-spin text-brand-blue self-center" aria-hidden="true" />
 
@@ -36,7 +37,7 @@ const SyncStatusBanner: React.FC<SyncStatusBannerProps> = ({ progress }) => {
             it changes every second or so, and a line that reflows as it goes
             would move the counts beside it. */}
         {item && (
-          <p className="min-w-0 flex-1 truncate text-sm text-dark-text-muted" title={item}>
+          <p className="min-w-0 basis-full truncate text-sm text-dark-text-muted sm:flex-1" title={item}>
             · {item}
           </p>
         )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e4ff794..9bf540c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -20,18 +20,32 @@ code {
 
 @layer components {
   .btn-primary {
-    @apply bg-transparent text-brand-green border border-brand-green font-medium px-4 py-2 rounded-md hover:opacity-70 transition-all duration-200;
+    @apply bg-brand-green text-dark-bg-primary border border-brand-green font-semibold px-4 py-2 rounded-md hover:opacity-80 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
   }
   
   .btn-secondary {
-    @apply bg-dark-bg-tertiary text-dark-text-primary border border-dark-border hover:bg-dark-border transition-colors px-4 py-2 rounded-md;
+    @apply bg-dark-bg-secondary text-dark-text-secondary border border-dark-border/60 hover:bg-dark-bg-tertiary transition-colors px-4 py-2 rounded-md;
   }
   
   .card {
-    @apply bg-dark-bg-secondary border border-dark-border rounded-lg shadow-lg;
+    @apply bg-dark-bg-secondary border border-dark-border/50 rounded-lg;
   }
   
   .input-field {
     @apply bg-dark-bg-tertiary border border-dark-border text-dark-text-primary placeholder-dark-text-muted focus:border-brand-blue focus:ring-1 focus:ring-brand-blue rounded-md px-3 py-2;
   }
-}
\ No newline at end of file
+}
+
+@layer base {
+  :where(a, button, input, select, textarea, summary):focus-visible {
+    @apply outline outline-2 outline-offset-4 outline-brand-blue;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
diff --git a/frontend/src/pages/ConfigPage.tsx b/frontend/src/pages/ConfigPage.tsx
index d80cffb..0eca9fb 100644
--- a/frontend/src/pages/ConfigPage.tsx
+++ b/frontend/src/pages/ConfigPage.tsx
@@ -67,9 +67,9 @@ const ConfigPage: React.FC = () => {
 
   return (
     <Layout>
-      <div className="px-4 py-6 sm:px-0">
+      <div className="py-6 lg:py-8">
         <div className="border-b border-dark-border pb-5">
-          <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Configuration</h1>
+          <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Settings</h1>
           <p className="mt-2 max-w-4xl text-sm text-dark-text-muted">
             Configure your Radarr connection, sync settings, and Letterboxd filters.
           </p>
@@ -94,7 +94,7 @@ const ConfigPage: React.FC = () => {
                     <input
                       type="number"
                       {...register('sync.interval_minutes', { required: true, min: 1, valueAsNumber: true })}
-                      className="input-field"
+                      className="input-field w-full min-w-0"
                       placeholder="60"
                     />
                     <p className="mt-2 text-sm text-dark-text-muted">
@@ -129,7 +129,7 @@ const ConfigPage: React.FC = () => {
                     <input
                       type="url"
                       {...register('radarr.url', { required: true })}
-                      className="input-field"
+                      className="input-field w-full min-w-0"
                       placeholder="https://radarr.example.com"
                     />
                     {errors.radarr?.url && (
@@ -144,7 +144,7 @@ const ConfigPage: React.FC = () => {
                     <input
                       type="password"
                       {...register('radarr.api_key', { required: true })}
-                      className="input-field"
+                      className="input-field w-full min-w-0"
                       placeholder="Enter your Radarr API key"
                     />
                     {errors.radarr?.api_key && (
@@ -152,7 +152,7 @@ const ConfigPage: React.FC = () => {
                     )}
                   </div>
 
-                  <div className="col-span-3">
+                  <div className="col-span-6 sm:col-span-3">
                     <label htmlFor="radarr.quality_profile" className="block text-sm font-medium text-dark-text-secondary">
                       Quality Profile
                     </label>
@@ -161,7 +161,7 @@ const ConfigPage: React.FC = () => {
                         <input
                           type="number"
                           {...register('radarr.quality_profile', { required: true, min: 1, valueAsNumber: true })}
-                          className="input-field"
+                          className="input-field w-full min-w-0"
                           placeholder="1"
                         />
                         <p className="mt-2 text-sm text-dark-text-muted">
@@ -170,14 +170,14 @@ const ConfigPage: React.FC = () => {
                         </p>
                       </>
                     ) : profiles === null ? (
-                      <div className="input-field flex items-center text-dark-text-muted">
+                      <div className="input-field flex min-w-0 items-center text-dark-text-muted">
                         <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-dark-text-muted mr-2"></div>
                         Loading profiles from Radarr...
                       </div>
                     ) : (
                       <select
                         {...register('radarr.quality_profile', { required: true, valueAsNumber: true })}
-                        className="input-field"
+                        className="input-field w-full min-w-0"
                       >
                         {/* A profile deleted in Radarr would otherwise silently
                             become whichever one happens to be listed first */}
@@ -198,14 +198,14 @@ const ConfigPage: React.FC = () => {
                     )}
                   </div>
 
-                  <div className="col-span-3">
+                  <div className="col-span-6 sm:col-span-3">
                     <label htmlFor="radarr.root_folder" className="block text-sm font-medium text-dark-text-secondary">
                       Root Folder Path
                     </label>
                     <input
                       type="text"
                       {...register('radarr.root_folder', { required: true })}
-                      className="input-field"
+                      className="input-field w-full min-w-0"
                       placeholder="/media/movies"
                     />
                     {errors.radarr?.root_folder && (
@@ -214,7 +214,7 @@ const ConfigPage: React.FC = () => {
                   </div>
 
                   <div className="col-span-6">
-                    <div className="flex items-center space-x-6">
+                    <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
                       <div className="flex items-center">
                         <input
                           id="monitor_added"
@@ -266,7 +266,7 @@ const ConfigPage: React.FC = () => {
                       <input
                         type="text"
                         {...register('letterboxd.username')}
-                        className="input-field rounded-none rounded-r-md w-full"
+                        className="input-field min-w-0 rounded-none rounded-r-md w-full"
                         placeholder="your-username"
                       />
                     </div>
@@ -294,7 +294,7 @@ const ConfigPage: React.FC = () => {
                     <label htmlFor="letterboxd.country" className="block text-sm font-medium text-dark-text-secondary">
                       Country (optional)
                     </label>
-                    <select {...register('letterboxd.country')} className="input-field">
+                    <select {...register('letterboxd.country')} className="input-field w-full min-w-0">
                       <option value="">No preference — earliest date anywhere</option>
                       {/* A country set by hand in config.yml that Letterboxd has
                           never been seen to name would otherwise be replaced by
@@ -382,7 +382,7 @@ const ConfigPage: React.FC = () => {
               disabled={saving}
               className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {saving ? 'Saving...' : 'Save Configuration'}
+              {saving ? 'Saving...' : 'Save settings'}
             </button>
           </div>
         </form>
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 3f7bb6a..164963c 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,18 +1,20 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Link } from 'react-router-dom';
-import { configAPI, dashboardAPI, radarrAPI, syncAPI } from '../utils/api';
-import { Config, DashboardSummary, QualityProfile, SyncProgress, SyncRun } from '../types';
+import { configAPI, dashboardAPI, radarrAPI, syncAPI, watchItemsAPI } from '../utils/api';
+import { Config, DashboardSummary, QualityProfile, SyncProgress, SyncRun, WatchItemsPage } from '../types';
 import toast from 'react-hot-toast';
+import { isAxiosError } from 'axios';
 import Layout from '../components/Layout';
 import SyncStatusBanner from '../components/SyncStatusBanner';
 import { relativeTime, duration } from '../utils/time';
+import { watchItemPath } from '../utils/letterboxd';
 import {
   CheckCircleIcon,
   ClockIcon,
   ExclamationCircleIcon,
-  EyeIcon,
   FilmIcon,
-  PlayIcon
+  ArrowPathIcon,
+  ArrowRightIcon
 } from '@heroicons/react/24/outline';
 
 // How long to wait before asking again after a failed request. The progress
@@ -25,19 +27,32 @@ const DashboardPage: React.FC = () => {
   const [config, setConfig] = useState<Config | null>(null);
   const [summary, setSummary] = useState<DashboardSummary | null>(null);
   const [profiles, setProfiles] = useState<QualityProfile[] | null>(null);
+  const [lists, setLists] = useState<WatchItemsPage | null>(null);
+  const [configMissing, setConfigMissing] = useState(false);
+  const [starting, setStarting] = useState(false);
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [progress, setProgress] = useState<SyncProgress | null>(null);
   const lastRunId = useRef<number | null>(null);
 
   const load = useCallback(async () => {
-    const [configData, summaryData] = await Promise.all([
-      configAPI.get().catch(() => null),
-      dashboardAPI.get().catch(() => null)
+    const [configData, summaryData, listData] = await Promise.all([
+      configAPI.get().then(data => {
+        setConfigMissing(false);
+        return data;
+      }).catch(error => {
+        setConfigMissing(isAxiosError(error) && error.response?.status === 404);
+        return null;
+      }),
+      dashboardAPI.get().catch(() => null),
+      watchItemsAPI.getPage({
+        offset: 0, limit: 4, search: '', auto_add: 'all', tags: [], sort: 'config'
+      }).catch(() => null)
     ]);
 
     setConfig(configData);
     setSummary(summaryData);
+    setLists(listData);
 
     if (summaryData) {
       setSyncing(summaryData.sync.running);
@@ -117,6 +132,8 @@ const DashboardPage: React.FC = () => {
   }, [syncing, load]);
 
   const runSync = async () => {
+    setStarting(true);
+    setProgress(null);
     try {
       await syncAPI.run();
       setSyncing(true);
@@ -125,14 +142,17 @@ const DashboardPage: React.FC = () => {
       toast.error(error.response?.data?.detail || 'Failed to start sync');
       // A 409 means one is already going, so follow that one instead
       if (error.response?.status === 409) setSyncing(true);
+    } finally {
+      setStarting(false);
     }
   };
 
   if (loading) {
     return (
       <Layout>
-        <div className="flex justify-center items-center h-64">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-blue"></div>
+        <div className="flex h-64 items-center justify-center gap-3 text-sm text-dark-text-muted" role="status">
+          <ArrowPathIcon className="h-5 w-5 animate-spin text-brand-blue" aria-hidden="true" />
+          Loading your overview…
         </div>
       </Layout>
     );
@@ -140,281 +160,173 @@ const DashboardPage: React.FC = () => {
 
   const lastSync: SyncRun | null = summary?.sync.last ?? null;
   const qualityProfile = profiles?.find(profile => profile.id === config?.radarr.quality_profile);
-
-  const syncSummary = () => {
-    if (syncing) return 'Running now';
-    if (!lastSync) return 'Never';
-    return relativeTime(lastSync.finished_at ?? lastSync.started_at);
-  };
+  const busy = syncing || starting;
+  const failed = Boolean(lastSync && (lastSync.error || !lastSync.finished_at));
+  const StatusIcon = !summary || failed ? ExclamationCircleIcon : lastSync ? CheckCircleIcon : ClockIcon;
+  const statusTitle = !summary
+    ? 'Sync status unavailable'
+    : busy ? 'Sync in progress'
+      : lastSync?.error ? 'Last sync needs attention'
+        : lastSync?.finished_at ? 'Last sync completed'
+          : lastSync ? 'Previous sync interrupted' : 'Ready for your first sync';
 
   const syncDetail = () => {
-    // What it is actually doing is on the banner above, phase by phase; naming
-    // one phase here was wrong for three quarters of every round
-    if (syncing) return 'A sync is running';
-    if (!lastSync) return 'No sync has run yet';
+    if (!summary) return 'Could not load sync status. Try again to check your latest run.';
+    if (busy) return 'Following your lists, films, release dates and ratings.';
+    if (!lastSync) return 'Run a sync to read your watch lists and send new films to Radarr.';
     if (lastSync.error) return lastSync.error;
-
-    const took = lastSync.finished_at ? duration(lastSync.finished_at - lastSync.started_at) : null;
-    const added = `${lastSync.added} added of ${lastSync.considered} found`;
-    return took ? `${added}, took ${took}` : added;
+    if (!lastSync.finished_at) return 'The previous sync did not finish. Run a sync to try again.';
+    return `${lastSync.added} added of ${lastSync.considered} found · ${relativeTime(lastSync.finished_at)} · Took ${duration(lastSync.finished_at - lastSync.started_at)}`;
   };
 
-  const statCard = (
-    key: string,
-    label: string,
-    value: React.ReactNode,
-    detail: React.ReactNode,
-    icon: React.ReactNode
-  ) => (
-    <div key={key} className="card overflow-hidden">
-      <div className="p-5">
-        <div className="flex items-center">
-          <div className="flex-shrink-0">{icon}</div>
-          <div className="ml-5 w-0 flex-1">
-            <dl>
-              <dt className="text-sm font-medium text-dark-text-muted truncate">{label}</dt>
-              <dd className="text-lg font-medium text-dark-text-primary">{value}</dd>
-            </dl>
-          </div>
-        </div>
-        <p className="mt-2 text-xs text-dark-text-muted truncate" title={typeof detail === 'string' ? detail : undefined}>
-          {detail}
-        </p>
-      </div>
-    </div>
-  );
+  const filters = config ? [
+    config.letterboxd.filters.skip_documentaries && 'Documentaries',
+    config.letterboxd.filters.skip_short_films && 'Short films',
+    config.letterboxd.filters.skip_unreleased && 'Unreleased films',
+    config.letterboxd.filters.skip_tv_shows && 'TV shows'
+  ].filter(Boolean) : [];
 
   return (
     <Layout>
-      <div className="px-4 py-6 sm:px-0">
-        <div className="border-b border-dark-border pb-5 flex justify-between items-start gap-4">
+      <div className="py-6 lg:py-8">
+        <header className="flex flex-wrap items-start justify-between gap-5">
           <div>
-            <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Dashboard</h1>
-            <p className="mt-2 max-w-4xl text-sm text-dark-text-muted">
-              Overview of your Letterboxarr sync status and configuration.
-            </p>
+            <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">Your film pipeline.</h1>
+            <p className="mt-3 text-sm text-dark-text-muted">A little less managing. A little more cinema.</p>
           </div>
-          <button
-            onClick={runSync}
-            disabled={syncing || !summary}
-            className="btn-primary flex flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {syncing ? (
-              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-            ) : (
-              <PlayIcon className="w-4 mr-2" />
-            )}
-            {syncing ? 'Syncing...' : 'Run Sync Now'}
+          <button onClick={runSync} disabled={busy || !summary} className="btn-primary inline-flex items-center gap-2 text-sm">
+            <ArrowPathIcon className={`h-4 w-4 ${busy ? 'animate-spin' : ''}`} aria-hidden="true" />
+            {busy ? 'Syncing…' : 'Sync now'}
           </button>
-        </div>
+        </header>
 
-        {/* Only while a round runs, and only once its first progress has
-            arrived: an empty banner between pressing the button and the first
-            answer would jump the cards down and back up again */}
-        {syncing && progress?.running && <SyncStatusBanner progress={progress} />}
-
-        {/* Status Cards */}
-        <div className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-          {statCard(
-            'sync',
-            'Last Sync',
-            syncSummary(),
-            syncDetail(),
-            lastSync?.error && !syncing
-              ? <ExclamationCircleIcon className="h-6 w-6 text-brand-orange" />
-              : <ClockIcon className="h-6 w-6 text-brand-blue" />
-          )}
-          {statCard(
-            'items',
-            'Watch Items',
-            summary?.watch_items ?? 0,
-            <Link to="/watch-items" className="text-brand-blue hover:text-brand-blue/80">
-              Manage lists
-            </Link>,
-            <FilmIcon className="h-6 w-6 text-dark-text-muted" />
-          )}
-          {statCard(
-            'added',
-            'Added to Radarr',
-            summary?.added_to_radarr ?? 0,
-            summary && summary.added_last_week > 0
-              ? `${summary.added_last_week} in the last 7 days`
-              : 'None in the last 7 days',
-            <CheckCircleIcon className="h-6 w-6 text-brand-green" />
-          )}
-          {statCard(
-            'watched',
-            'Films Watched',
-            summary?.watched ?? '—',
-            summary?.watched == null
-              ? 'Set a Letterboxd username to track this'
-              : `On letterboxd.com/${config?.letterboxd.username}`,
-            <EyeIcon className="h-6 w-6 text-brand-blue" />
-          )}
-        </div>
-
-        {/* Recently added to Radarr */}
-        {summary && summary.recently_added.length > 0 && (
-          <div className="mt-6 card overflow-hidden">
-            <div className="px-4 py-5 sm:px-6">
-              <h3 className="text-lg leading-6 font-medium text-dark-text-primary">
-                Recently Added to Radarr
-              </h3>
-              <p className="mt-1 max-w-2xl text-sm text-dark-text-muted">
-                The most recent movies this sync handed to Radarr.
-              </p>
-            </div>
-            <ul className="border-t border-dark-border divide-y divide-dark-border">
-              {summary.recently_added.map(movie => (
-                <li key={movie.movie_id} className="px-4 py-3 sm:px-6">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="flex items-center min-w-0">
-                      <FilmIcon className="h-5 w-5 text-dark-text-muted mr-3 flex-shrink-0" />
-                      <p className="text-sm font-medium text-dark-text-primary truncate">
-                        {movie.letterboxd_slug ? (
-                          <a
-                            href={`https://letterboxd.com/film/${movie.letterboxd_slug}/`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="hover:text-brand-blue"
-                          >
-                            {movie.title}{movie.year ? ` (${movie.year})` : ''}
-                          </a>
-                        ) : (
-                          <>{movie.title}{movie.year ? ` (${movie.year})` : ''}</>
-                        )}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-2 flex-shrink-0">
-                      {movie.tags.map((tag, index) => (
-                        <span
-                          key={index}
-                          className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-brand-blue/20 text-brand-blue border border-brand-blue/30"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                      <span className="text-xs text-dark-text-muted whitespace-nowrap">
-                        {relativeTime(movie.added_at)}
-                      </span>
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
+        {!config && (
+          <section className="mt-7 rounded-lg border border-brand-orange/30 bg-brand-orange/10 p-5" aria-label="Configuration notice">
+            <h2 className="text-sm font-semibold text-brand-orange">{configMissing ? 'Set up your film pipeline' : 'Settings unavailable'}</h2>
+            <p className="mt-2 text-sm text-dark-text-secondary">
+              {configMissing
+                ? 'Configure Radarr and your Letterboxd watch lists to get started.'
+                : 'Could not load your settings. Open settings to try again.'}
+            </p>
+            <Link to="/config" className="mt-3 inline-flex items-center gap-2 text-sm text-brand-blue">
+              Open settings <ArrowRightIcon className="h-4 w-4" aria-hidden="true" />
+            </Link>
+          </section>
         )}
 
-        {/* Current Configuration Summary */}
-        {config && (
-          <div className="mt-6 card overflow-hidden">
-            <div className="px-4 py-5 sm:px-6 flex items-center justify-between gap-4">
-              <div>
-                <h3 className="text-lg leading-6 font-medium text-dark-text-primary">Current Configuration</h3>
-                <p className="mt-1 max-w-2xl text-sm text-dark-text-muted">
-                  Summary of your current sync configuration.
-                </p>
+        <section className="card mt-7 p-5 sm:p-6" aria-label="Sync status">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="min-w-0 basis-full sm:flex-1" role="status">
+              <div className="flex items-center gap-2.5">
+                {busy
+                  ? <ArrowPathIcon className="h-5 w-5 flex-shrink-0 animate-spin text-brand-blue" aria-hidden="true" />
+                  : <StatusIcon className={`h-5 w-5 flex-shrink-0 ${!summary || failed ? 'text-brand-orange' : lastSync?.finished_at ? 'text-brand-green' : 'text-brand-blue'}`} aria-hidden="true" />}
+                <h2 className="text-base font-semibold">{statusTitle}</h2>
               </div>
-              <Link to="/config" className="btn-secondary text-sm flex-shrink-0">
-                Edit
-              </Link>
-            </div>
-            <div className="border-t border-dark-border px-4 py-5 sm:p-0">
-              <dl className="sm:divide-y sm:divide-dark-border">
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Radarr URL</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    {config.radarr.url}
-                  </dd>
-                </div>
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Quality Profile</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    {qualityProfile ? qualityProfile.name : `Profile ${config.radarr.quality_profile}`}
-                  </dd>
-                </div>
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Root Folder</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    {config.radarr.root_folder}
-                  </dd>
-                </div>
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Sync Interval</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    Every {config.sync.interval_minutes} minutes
-                  </dd>
-                </div>
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Lists</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    {summary?.lists_refreshed_at != null
-                      ? `Last read from Letterboxd ${relativeTime(summary.lists_refreshed_at)}`
-                      : 'Not read from Letterboxd yet'}
-                  </dd>
-                </div>
-                <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                  <dt className="text-sm font-medium text-dark-text-muted">Global Filters</dt>
-                  <dd className="mt-1 text-sm text-dark-text-primary sm:mt-0 sm:col-span-2">
-                    <div className="flex flex-wrap gap-2">
-                      {config.letterboxd.filters.skip_documentaries && (
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-dark-bg-tertiary text-dark-text-primary border border-dark-border">
-                          Skip Documentaries
-                        </span>
-                      )}
-                      {config.letterboxd.filters.skip_short_films && (
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-dark-bg-tertiary text-dark-text-primary border border-dark-border">
-                          Skip Short Films
-                        </span>
-                      )}
-                      {config.letterboxd.filters.skip_unreleased && (
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-dark-bg-tertiary text-dark-text-primary border border-dark-border">
-                          Skip Unreleased
-                        </span>
-                      )}
-                      {config.letterboxd.filters.skip_tv_shows && (
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-dark-bg-tertiary text-dark-text-primary border border-dark-border">
-                          Skip TV Shows
-                        </span>
-                      )}
-                      {!config.letterboxd.filters.skip_documentaries &&
-                        !config.letterboxd.filters.skip_short_films &&
-                        !config.letterboxd.filters.skip_unreleased &&
-                        !config.letterboxd.filters.skip_tv_shows && (
-                          <span className="text-sm text-dark-text-muted">None, everything is synced</span>
-                        )}
-                    </div>
-                  </dd>
-                </div>
-              </dl>
+              <p className="mt-2 break-words text-xs leading-relaxed text-dark-text-muted sm:ml-7">{syncDetail()}</p>
+              {!summary && <button onClick={() => { setLoading(true); load().finally(() => setLoading(false)); }} className="btn-secondary mt-3 text-xs">Try again</button>}
             </div>
+            {config && <div className="text-xs sm:text-right"><p className="text-dark-text-muted">Sync interval</p><p className="mt-1 text-dark-text-secondary">Every {config.sync.interval_minutes} minutes</p></div>}
           </div>
-        )}
+          {syncing && progress?.running && <SyncStatusBanner progress={progress} embedded />}
+        </section>
 
-        {/* No Configuration Warning */}
-        {!config && (
-          <div className="mt-6 bg-brand-orange/10 border border-brand-orange/20 rounded-md p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <ExclamationCircleIcon className="h-5 w-5 text-brand-orange" />
-              </div>
-              <div className="ml-3">
-                <h3 className="text-sm font-medium text-brand-orange">Configuration Required</h3>
-                <div className="mt-2 text-sm text-dark-text-secondary">
-                  <p>
-                    No configuration found. Please set up your Radarr connection and Letterboxd settings
-                    in the configuration page to get started.
-                  </p>
-                </div>
-                <div className="mt-4">
-                  <Link to="/config" className="btn-secondary text-sm">
-                    Configure Now
-                  </Link>
-                </div>
+        <dl className="my-8 grid grid-cols-3 divide-x divide-dark-border/50 sm:my-10">
+          <div className="min-w-0 pr-3 sm:pr-6">
+            <dt className="text-xs text-dark-text-muted sm:text-sm">Added to Radarr</dt>
+            <dd className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{summary?.added_to_radarr.toLocaleString() ?? '—'}</dd>
+            <dd className="mt-2 text-xs text-brand-green">{summary ? `${summary.added_last_week.toLocaleString()} in the last 7 days` : 'Count unavailable'}</dd>
+          </div>
+          <div className="min-w-0 px-3 sm:px-6">
+            <dt className="text-xs text-dark-text-muted sm:text-sm">Watch lists</dt>
+            <dd className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{summary?.watch_items.toLocaleString() ?? '—'}</dd>
+            <dd className="mt-2 text-xs"><Link to="/watch-items" className="text-brand-blue hover:underline">Manage lists</Link></dd>
+          </div>
+          <div className="min-w-0 pl-3 sm:pl-6">
+            <dt className="text-xs text-dark-text-muted sm:text-sm">Films watched</dt>
+            <dd className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{summary?.watched?.toLocaleString() ?? '—'}</dd>
+            <dd className="mt-2 break-words text-xs text-dark-text-muted">
+              {!summary ? 'Count unavailable' : summary.watched == null
+                ? <Link to="/config" className="text-brand-blue hover:underline">Set your Letterboxd username</Link>
+                : 'On Letterboxd'}
+            </dd>
+          </div>
+        </dl>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
+          <section aria-labelledby="recent-heading" className="min-w-0">
+            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+              <h2 id="recent-heading" className="text-lg font-semibold tracking-tight">Recently added</h2>
+              <span className="text-xs text-dark-text-muted">Sent to Radarr</span>
+            </div>
+            {summary && summary.recently_added.length > 0 ? (
+              <ul className="divide-y divide-dark-border/40">
+                {summary.recently_added.map(movie => (
+                  <li key={movie.movie_id} className="flex items-center gap-3 py-4">
+                    <div className="flex h-14 w-10 flex-shrink-0 items-center justify-center rounded border border-dark-border/50 bg-dark-bg-secondary">
+                      <FilmIcon className="h-5 w-5 text-brand-blue" aria-hidden="true" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="break-words text-sm font-medium">
+                        {movie.letterboxd_slug ? <a href={`https://letterboxd.com/film/${movie.letterboxd_slug}/`} target="_blank" rel="noopener noreferrer" className="hover:text-brand-blue">{movie.title}</a> : movie.title}
+                      </h3>
+                      <p className="mt-1 text-xs text-dark-text-muted">{movie.year ? `${movie.year} · ` : ''}Added {relativeTime(movie.added_at)}</p>
+                      {movie.tags.length > 0 && <div className="mt-2 flex flex-wrap gap-1.5">{movie.tags.map(tag => <span key={tag} className="max-w-full break-words rounded border border-brand-blue/20 bg-brand-blue/5 px-2 py-0.5 text-xs text-brand-blue">{tag}</span>)}</div>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <div className="rounded-lg border border-dashed border-dark-border/60 px-5 py-10">
+                <FilmIcon className="mb-3 h-7 w-7 text-dark-text-muted" aria-hidden="true" />
+                <h3 className="text-sm font-medium">{summary ? 'No films added yet' : 'Recent additions unavailable'}</h3>
+                <p className="mt-2 text-sm text-dark-text-muted">{!summary ? 'Try loading the sync status again to see recent films.' : summary.watch_items === 0 ? 'Add a watch list to start sending films to Radarr.' : 'Films will appear here after a sync sends them to Radarr.'}</p>
               </div>
+            )}
+          </section>
+
+          <aside className="card min-w-0 p-5 sm:p-6" aria-labelledby="lists-heading">
+            <div className="flex items-center justify-between gap-3">
+              <h2 id="lists-heading" className="text-lg font-semibold tracking-tight">Your lists</h2>
+              <Link to="/watch-items" className="text-xs text-brand-blue hover:underline">View all{lists ? ` (${lists.total})` : ''}</Link>
             </div>
-          </div>
+            {lists && lists.items.length > 0 ? (
+              <ul className="mt-2 divide-y divide-dark-border/40">
+                {lists.items.map(item => (
+                  <li key={item.id ?? item.path} className="py-4 last:pb-0">
+                    <Link to={item.id != null ? `/movies/${item.id}` : '/watch-items'} className="block break-words text-sm font-medium hover:text-brand-blue">{item.name || watchItemPath(item)}</Link>
+                    <p className="mt-1.5 text-xs text-dark-text-muted">
+                      {item.progress?.read ? `${item.progress.total.toLocaleString()} films · ` : ''}
+                      {item.last_refreshed != null ? `Read ${relativeTime(item.last_refreshed)}` : 'Not read from Letterboxd yet'}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <div className="mt-4 text-sm text-dark-text-muted">
+                <p>{lists ? 'Add a Letterboxd list, watchlist or film collection to start following its films.' : 'Could not load your watch lists. Open watch lists to try again.'}</p>
+                <Link to="/watch-items" className="mt-4 inline-flex items-center gap-2 text-brand-blue">{lists ? 'Add a watch list' : 'Open watch lists'}<ArrowRightIcon className="h-4 w-4" aria-hidden="true" /></Link>
+              </div>
+            )}
+          </aside>
+        </div>
+
+        {config && (
+          <details className="mt-9 border-t border-dark-border/50 pt-5">
+            <summary className="cursor-pointer text-sm font-medium text-dark-text-secondary">Sync settings <span className="ml-2 text-xs font-normal text-dark-text-muted">{qualityProfile?.name ?? `Profile ${config.radarr.quality_profile}`} · Every {config.sync.interval_minutes} minutes</span></summary>
+            <dl className="mt-5 grid gap-5 text-sm sm:grid-cols-2">
+              <div><dt className="text-xs text-dark-text-muted">Radarr URL</dt><dd className="mt-1 break-all">{config.radarr.url}</dd></div>
+              <div><dt className="text-xs text-dark-text-muted">Root folder</dt><dd className="mt-1 break-all">{config.radarr.root_folder}</dd></div>
+              <div><dt className="text-xs text-dark-text-muted">Lists last read</dt><dd className="mt-1">{summary ? summary.lists_refreshed_at != null ? relativeTime(summary.lists_refreshed_at) : 'Not read from Letterboxd yet' : 'Read time unavailable'}</dd></div>
+              <div><dt className="text-xs text-dark-text-muted">Skipped categories</dt><dd className="mt-1">{filters.length ? filters.join(', ') : 'None, all categories are synced'}</dd></div>
+            </dl>
+            <Link to="/config" className="mt-5 inline-flex items-center gap-2 text-sm text-brand-blue">Edit settings <ArrowRightIcon className="h-4 w-4" aria-hidden="true" /></Link>
+          </details>
         )}
+        <footer className="mt-7 flex flex-wrap items-center justify-between gap-3 text-xs text-dark-text-muted">
+          <span>Letterboxd → Letterboxarr → Radarr</span>
+          <Link to="/upcoming" className="inline-flex items-center gap-2 hover:text-brand-blue">Explore upcoming releases <ArrowRightIcon className="h-3 w-3" aria-hidden="true" /></Link>
+        </footer>
       </div>
     </Layout>
   );
diff --git a/frontend/src/pages/MoviesPage.tsx b/frontend/src/pages/MoviesPage.tsx
index 15214f2..07180a8 100644
--- a/frontend/src/pages/MoviesPage.tsx
+++ b/frontend/src/pages/MoviesPage.tsx
@@ -258,7 +258,7 @@ const MoviesPage: React.FC = () => {
 
   return (
     <Layout>
-      <div className="px-4 py-6 sm:px-0">
+      <div className="py-6 lg:py-8">
         <div className="border-b border-dark-border pb-5 flex justify-between items-start gap-4">
           <div className="min-w-0">
             <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">
diff --git a/frontend/src/pages/UpcomingPage.tsx b/frontend/src/pages/UpcomingPage.tsx
index 1563ef3..5f850cb 100644
--- a/frontend/src/pages/UpcomingPage.tsx
+++ b/frontend/src/pages/UpcomingPage.tsx
@@ -363,7 +363,7 @@ const UpcomingPage: React.FC = () => {
 
   return (
     <Layout>
-      <div className="px-4 py-6 sm:px-0">
+      <div className="py-6 lg:py-8">
         <div className="border-b border-dark-border pb-5 flex justify-between items-start gap-4">
           <div className="min-w-0">
             <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Upcoming</h1>
diff --git a/frontend/src/pages/WatchItemsPage.tsx b/frontend/src/pages/WatchItemsPage.tsx
index b0130d2..c3c08ae 100644
--- a/frontend/src/pages/WatchItemsPage.tsx
+++ b/frontend/src/pages/WatchItemsPage.tsx
@@ -315,7 +315,7 @@ const WatchItemsPage: React.FC = () => {
 
     if (state.watched === null) {
       return note(`${state.total} movies`,
-                  'Set your Letterboxd username in Configuration to see how much of this '
+                  'Set your Letterboxd username in Settings to see how much of this '
                   + 'list you have watched.');
     }
 
@@ -557,10 +557,10 @@ const WatchItemsPage: React.FC = () => {
 
   return (
     <Layout>
-      <div className="px-4 py-6 sm:px-0">
+      <div className="py-6 lg:py-8">
         <div className="border-b border-dark-border pb-5 flex justify-between items-center">
           <div>
-            <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Watch Items</h1>
+            <h1 className="text-2xl font-bold leading-6 text-dark-text-primary">Watch lists</h1>
             <p className="mt-2 max-w-4xl text-sm text-dark-text-muted">
               Manage your Letterboxd lists to sync with Radarr.
             </p>