diff --git a/web/src/lib/components/HorizontalScrollRow.svelte b/web/src/lib/components/HorizontalScrollRow.svelte
index a6c5ec4a..865089af 100644
--- a/web/src/lib/components/HorizontalScrollRow.svelte
+++ b/web/src/lib/components/HorizontalScrollRow.svelte
@@ -3,14 +3,24 @@
   import type { Snippet } from 'svelte';
 
   let {
-    items,
+    rows,
     item,
     title,
     ariaLabel
   }: {
-    items: T[];
+    /** One or more visual rows of items rendered inside a single shared
+        horizontal scroller. Pass [items] for a single-row section. */
+    rows: T[][];
+    /** Render snippet for a single item. The second arg is the global
+        index across the flattened sequence (rows[0] then rows[1] etc.) —
+        useful when the snippet needs section-wide indexing, e.g. a
+        compact track card whose play action takes its position in the
+        whole section's track list. */
     item?: Snippet<[T, number]>;
+    /** Section heading shown to the left of the arrows. Omit for an
+        unlabeled scroller. */
     title?: string;
+    /** Accessible label for the section as a whole. */
     ariaLabel?: string;
   } = $props();
 
@@ -22,6 +32,16 @@
   const atStart = $derived(scrollLeft <= 1);
   const atEnd   = $derived(scrollLeft + clientWidth >= scrollWidth - 1);
 
+  // Per-row offsets so the snippet's second arg can be the global index.
+  // [0, len(rows[0]), len(rows[0])+len(rows[1]), ...]
+  const rowOffsets = $derived.by(() => {
+    const out: number[] = [0];
+    for (let i = 0; i < rows.length - 1; i++) {
+      out.push(out[i] + rows[i].length);
+    }
+    return out;
+  });
+
   function refreshMetrics() {
     if (!scroller) return;
     scrollLeft  = scroller.scrollLeft;
@@ -39,8 +59,8 @@
   $effect(() => { refreshMetrics(); });
 </script>
 
-<div class="row" aria-label={ariaLabel}>
-  <header class="row-header">
+<div class="section" aria-label={ariaLabel}>
+  <header class="section-header">
     {#if title}
       <h2 class="font-display text-2xl font-medium text-text-primary">{title}</h2>
     {:else}
@@ -72,26 +92,32 @@
     bind:this={scroller}
     onscroll={refreshMetrics}
     data-testid="scroll-container"
-    class="scroller flex gap-4 overflow-x-auto"
+    class="scroller overflow-x-auto"
   >
-    {#each items as it, i (i)}
-      {@render item?.(it, i)}
-    {/each}
+    <div class="track inline-flex flex-col gap-4">
+      {#each rows as row, rowIdx (rowIdx)}
+        <div class="rack flex gap-4">
+          {#each row as it, colIdx (colIdx)}
+            {@render item?.(it, rowOffsets[rowIdx] + colIdx)}
+          {/each}
+        </div>
+      {/each}
+    </div>
   </div>
 </div>
 
 <style>
-  /* Bleed the row past the parent's right padding (16px from Shell's p-4)
+  /* Bleed the section past the parent's right padding (16px from Shell's p-4)
      so the scroller's items extend to the viewport's right edge. */
-  .row {
+  .section {
     margin-right: -1rem;
   }
-  .row-header {
+  .section-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    /* Re-add the right gutter so the header stays aligned with the rest
-       of the page content (the scroller below remains full-bleed). */
+    /* Re-add the right gutter so the header stays aligned with page
+       content; the scroller below remains full-bleed. */
     padding-right: 1rem;
     margin-bottom: 0.5rem;
   }
@@ -103,7 +129,10 @@
     scroll-snap-type: x mandatory;
     scrollbar-width: thin;
   }
-  .scroller > :global(*) {
+  /* Cards are two levels deep (.scroller > .track > .rack > card-wrapper),
+     so target them via the rack. flex-shrink: 0 keeps each card at its
+     intended width even though the rack tries to fit the scroller width. */
+  .rack > :global(*) {
     flex-shrink: 0;
     scroll-snap-align: start;
   }
diff --git a/web/src/lib/components/HorizontalScrollRow.test.ts b/web/src/lib/components/HorizontalScrollRow.test.ts
index 9f640c15..10489ac6 100644
--- a/web/src/lib/components/HorizontalScrollRow.test.ts
+++ b/web/src/lib/components/HorizontalScrollRow.test.ts
@@ -6,18 +6,18 @@ afterEach(() => vi.clearAllMocks());
 
 describe('HorizontalScrollRow', () => {
   test('renders left and right scroll buttons', () => {
-    render(HorizontalScrollRow, { props: { items: ['a', 'b', 'c'] } });
+    render(HorizontalScrollRow, { props: { rows: [['a', 'b', 'c']] } });
     expect(screen.getByRole('button', { name: /scroll left/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /scroll right/i })).toBeInTheDocument();
   });
 
   test('left button starts disabled (scrollLeft is 0)', () => {
-    render(HorizontalScrollRow, { props: { items: ['a'] } });
+    render(HorizontalScrollRow, { props: { rows: [['a']] } });
     expect(screen.getByRole('button', { name: /scroll left/i })).toBeDisabled();
   });
 
   test('clicking right button calls scrollBy on the container', async () => {
-    const { container } = render(HorizontalScrollRow, { props: { items: ['a', 'b'] } });
+    const { container } = render(HorizontalScrollRow, { props: { rows: [['a', 'b']] } });
     const scroller = container.querySelector('[data-testid="scroll-container"]') as HTMLElement;
     const spy = vi.fn();
     scroller.scrollBy = spy as unknown as HTMLElement['scrollBy'];
@@ -31,12 +31,12 @@ describe('HorizontalScrollRow', () => {
   });
 
   test('renders title as a heading when prop is provided', () => {
-    render(HorizontalScrollRow, { props: { items: ['a'], title: 'My section' } });
+    render(HorizontalScrollRow, { props: { rows: [['a']], title: 'My section' } });
     expect(screen.getByRole('heading', { name: 'My section' })).toBeInTheDocument();
   });
 
   test('omits heading when title prop is absent', () => {
-    render(HorizontalScrollRow, { props: { items: ['a'] } });
+    render(HorizontalScrollRow, { props: { rows: [['a']] } });
     expect(screen.queryByRole('heading')).not.toBeInTheDocument();
   });
 });
diff --git a/web/src/lib/components/InfiniteScrollSentinel.svelte b/web/src/lib/components/InfiniteScrollSentinel.svelte
index 8423d21c..657e3cf8 100644
--- a/web/src/lib/components/InfiniteScrollSentinel.svelte
+++ b/web/src/lib/components/InfiniteScrollSentinel.svelte
@@ -9,10 +9,14 @@
   let {
     onIntersect,
     enabled = true,
-    rootMargin = '300px'
+    rootMargin = '800px'
   }: {
     onIntersect: () => void;
     enabled?: boolean;
+    /** Distance below the viewport at which the sentinel triggers. Larger
+        values fire earlier so the next page is fetched well before the
+        user scrolls into empty space. Default 800px ≈ 3-4 rows of
+        cards on a typical library grid. */
     rootMargin?: string;
   } = $props();
 
diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 47fab8f8..3834efe9 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -46,7 +46,7 @@
 </script>
 
 {#if current}
-  <div class="flex min-h-[108px] items-center gap-4 border-t border-border bg-surface px-4 py-4">
+  <div class="flex min-h-[108px] items-center gap-4 border-t border-border bg-surface px-4 py-1.5">
     <!-- Left: cover + title + artist + like + menu -->
     <div class="flex w-72 min-w-0 items-center gap-3">
       <a
@@ -57,7 +57,7 @@
         <img
           src={`/api/albums/${current.album_id}/cover`}
           alt=""
-          class="h-20 w-20 rounded-md object-cover"
+          class="h-24 w-24 rounded-md object-cover"
           onerror={onCoverError}
         />
       </a>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 6334abb3..39ba768d 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -28,7 +28,7 @@
   {:else if showSkeleton.value && !data}
     <p class="text-text-secondary">Loading…</p>
   {:else if data}
-    <!-- Recently added: 50 albums in 2 rows of 25 -->
+    <!-- Recently added: 50 albums in 2 rows of 25, scrolling together -->
     <section class="space-y-3">
       {#if data.recently_added_albums.length === 0}
         <header>
@@ -36,21 +36,21 @@
         </header>
         <p class="text-text-secondary">Nothing added yet. Scan a folder via the server's config.</p>
       {:else}
-        {#each chunk(data.recently_added_albums, 25) as row, i (i)}
-          <HorizontalScrollRow
-            items={row}
-            title={i === 0 ? 'Recently added' : undefined}
-            ariaLabel="Recently added row {i + 1}"
-          >
-            {#snippet item(album: import('$lib/api/types').AlbumRef)}
-              <div class="w-44"><AlbumCard {album} /></div>
-            {/snippet}
-          </HorizontalScrollRow>
-        {/each}
+        <HorizontalScrollRow
+          rows={chunk(data.recently_added_albums, 25)}
+          title="Recently added"
+          ariaLabel="Recently added"
+        >
+          {#snippet item(album: import('$lib/api/types').AlbumRef)}
+            <div class="w-44"><AlbumCard {album} /></div>
+          {/snippet}
+        </HorizontalScrollRow>
       {/if}
     </section>
 
-    <!-- Rediscover: albums + artists -->
+    <!-- Rediscover: albums + artists. Kept as two scrollers because the
+         card types differ (square vs circular); coupling them in one
+         scroller would interleave shapes awkwardly. -->
     <section class="space-y-3">
       {#if data.rediscover_albums.length === 0 && data.rediscover_artists.length === 0}
         <header>
@@ -60,7 +60,7 @@
       {:else}
         {#if data.rediscover_albums.length > 0}
           <HorizontalScrollRow
-            items={data.rediscover_albums}
+            rows={[data.rediscover_albums]}
             title="Rediscover"
             ariaLabel="Rediscover albums"
           >
@@ -71,7 +71,7 @@
         {/if}
         {#if data.rediscover_artists.length > 0}
           <HorizontalScrollRow
-            items={data.rediscover_artists}
+            rows={[data.rediscover_artists]}
             title={data.rediscover_albums.length === 0 ? 'Rediscover' : undefined}
             ariaLabel="Rediscover artists"
           >
@@ -83,7 +83,7 @@
       {/if}
     </section>
 
-    <!-- Most played: 75 tracks in 3 rows of 25 -->
+    <!-- Most played: 75 tracks in 3 rows of 25, scrolling together -->
     <section class="space-y-3">
       {#if data.most_played_tracks.length === 0}
         <header>
@@ -91,21 +91,19 @@
         </header>
         <p class="text-text-secondary">No plays to draw from. Listen to something.</p>
       {:else}
-        {#each chunk(data.most_played_tracks, 25) as row, i (i)}
-          <HorizontalScrollRow
-            items={row}
-            title={i === 0 ? 'Most played' : undefined}
-            ariaLabel="Most played row {i + 1}"
-          >
-            {#snippet item(track: import('$lib/api/types').TrackRef, idx: number)}
-              <CompactTrackCard
-                {track}
-                sectionTracks={row}
-                index={idx}
-              />
-            {/snippet}
-          </HorizontalScrollRow>
-        {/each}
+        <HorizontalScrollRow
+          rows={chunk(data.most_played_tracks, 25)}
+          title="Most played"
+          ariaLabel="Most played"
+        >
+          {#snippet item(track: import('$lib/api/types').TrackRef, globalIdx: number)}
+            <CompactTrackCard
+              {track}
+              sectionTracks={data.most_played_tracks}
+              index={globalIdx}
+            />
+          {/snippet}
+        </HorizontalScrollRow>
       {/if}
     </section>
 
@@ -118,7 +116,7 @@
         <p class="text-text-secondary">No recent plays.</p>
       {:else}
         <HorizontalScrollRow
-          items={data.last_played_artists}
+          rows={[data.last_played_artists]}
           title="Last played"
           ariaLabel="Last played artists"
         >