diff --git a/web/src/routes/search/+page.svelte b/web/src/routes/search/+page.svelte
index 576cfb9d..c5501398 100644
--- a/web/src/routes/search/+page.svelte
+++ b/web/src/routes/search/+page.svelte
@@ -1,2 +1,112 @@
-<h1 class="text-2xl font-semibold">Search</h1>
-<p class="mt-2 text-text-secondary">Search lands in a subsequent plan.</p>
+<script lang="ts">
+  import { page } from '$app/state';
+  import { createSearchQuery } from '$lib/api/queries';
+  import ArtistRow from '$lib/components/ArtistRow.svelte';
+  import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import TrackRow from '$lib/components/TrackRow.svelte';
+  import SearchSkeleton from '$lib/components/SearchSkeleton.svelte';
+  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import { useDelayed } from '$lib/utils/useDelayed.svelte';
+  import { playRadio } from '$lib/player/store.svelte';
+  import type { TrackRef } from '$lib/api/types';
+
+  const q = $derived((page.url.searchParams.get('q') ?? '').trim());
+  const queryStore = $derived(q ? createSearchQuery(q) : null);
+  const query = $derived(queryStore ? $queryStore : null);
+
+  const artists = $derived(query?.data?.artists);
+  const albums  = $derived(query?.data?.albums);
+  const tracks  = $derived(query?.data?.tracks);
+
+  const allEmpty = $derived(
+    !!query?.data &&
+    artists?.items.length === 0 &&
+    albums?.items.length === 0 &&
+    tracks?.items.length === 0
+  );
+
+  const showSkeleton = useDelayed(() => !!query?.isPending);
+
+  function onTrackPlay(_tracks: TrackRef[], index: number) {
+    playRadio(_tracks[index].id);
+  }
+</script>
+
+<div class="space-y-6">
+  {#if !q}
+    <p class="text-text-secondary">
+      Start typing to search artists, albums, and tracks.
+    </p>
+  {:else if query?.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+  {:else if showSkeleton.value && !query?.data}
+    <SearchSkeleton />
+  {:else if allEmpty}
+    <p class="text-text-secondary">
+      No matches for <span class="font-medium">'{q}'</span>.
+    </p>
+  {:else if query?.data}
+    {#if artists && artists.items.length > 0}
+      <section>
+        <header class="mb-2 flex items-baseline justify-between">
+          <h2 class="text-lg font-semibold">Artists</h2>
+          {#if artists.total > artists.items.length}
+            <a
+              href={`/search/artists?q=${encodeURIComponent(q)}`}
+              class="text-sm text-accent hover:underline"
+            >
+              See all {artists.total} →
+            </a>
+          {/if}
+        </header>
+        <div>
+          {#each artists.items as a (a.id)}
+            <ArtistRow artist={a} />
+          {/each}
+        </div>
+      </section>
+    {/if}
+
+    {#if albums && albums.items.length > 0}
+      <section>
+        <header class="mb-2 flex items-baseline justify-between">
+          <h2 class="text-lg font-semibold">Albums</h2>
+          {#if albums.total > albums.items.length}
+            <a
+              href={`/search/albums?q=${encodeURIComponent(q)}`}
+              class="text-sm text-accent hover:underline"
+            >
+              See all {albums.total} →
+            </a>
+          {/if}
+        </header>
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          {#each albums.items as al (al.id)}
+            <AlbumCard album={al} />
+          {/each}
+        </div>
+      </section>
+    {/if}
+
+    {#if tracks && tracks.items.length > 0}
+      <section>
+        <header class="mb-2 flex items-baseline justify-between">
+          <h2 class="text-lg font-semibold">Tracks</h2>
+          {#if tracks.total > tracks.items.length}
+            <a
+              href={`/search/tracks?q=${encodeURIComponent(q)}`}
+              class="text-sm text-accent hover:underline"
+            >
+              See all {tracks.total} →
+            </a>
+          {/if}
+        </header>
+        <div class="overflow-hidden rounded border border-border">
+          {#each tracks.items as t, i (t.id)}
+            <TrackRow tracks={tracks.items} index={i} onPlay={onTrackPlay} />
+          {/each}
+        </div>
+      </section>
+    {/if}
+  {/if}
+</div>
diff --git a/web/src/routes/search/search.test.ts b/web/src/routes/search/search.test.ts
new file mode 100644
index 00000000..8aab5c7d
--- /dev/null
+++ b/web/src/routes/search/search.test.ts
@@ -0,0 +1,135 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { mockQuery } from '../../test-utils/query';
+import type { ArtistRef, AlbumRef, TrackRef, SearchResponse } from '$lib/api/types';
+
+const state = vi.hoisted(() => ({
+  pageUrl: new URL('http://localhost/search')
+}));
+
+vi.mock('$app/state', () => ({
+  page: { get url() { return state.pageUrl; } }
+}));
+
+vi.mock('$lib/api/queries', () => ({
+  createSearchQuery: vi.fn()
+}));
+
+vi.mock('$lib/player/store.svelte', () => ({
+  playQueue: vi.fn(),
+  playRadio: vi.fn(),
+  enqueueTrack: vi.fn(),
+  enqueueTracks: vi.fn()
+}));
+
+vi.mock('$lib/api/client', () => ({
+  api: { get: vi.fn() }
+}));
+
+import SearchPage from './+page.svelte';
+import { createSearchQuery } from '$lib/api/queries';
+
+function emptyResp(): SearchResponse {
+  return {
+    artists: { items: [], total: 0, limit: 10, offset: 0 },
+    albums:  { items: [], total: 0, limit: 10, offset: 0 },
+    tracks:  { items: [], total: 0, limit: 10, offset: 0 }
+  };
+}
+
+const artist: ArtistRef = { id: 'a1', name: 'Miles Davis', album_count: 12 };
+const album: AlbumRef = {
+  id: 'al1', title: 'Kind of Blue', artist_id: 'a1', artist_name: 'Miles Davis',
+  year: 1959, track_count: 5, duration_sec: 2630, cover_url: '/api/albums/al1/cover'
+};
+const track: TrackRef = {
+  id: 't1', title: 'So What',
+  album_id: 'al1', album_title: 'Kind of Blue',
+  artist_id: 'a1', artist_name: 'Miles Davis',
+  track_number: 1, disc_number: 1, duration_sec: 545,
+  stream_url: '/api/tracks/t1/stream'
+};
+
+afterEach(() => {
+  vi.clearAllMocks();
+  state.pageUrl = new URL('http://localhost/search');
+});
+
+describe('search page', () => {
+  test('empty ?q= shows the "Start typing" prompt and fires no query', () => {
+    state.pageUrl = new URL('http://localhost/search');
+    render(SearchPage);
+    expect(screen.getByText(/start typing/i)).toBeInTheDocument();
+    expect(createSearchQuery).not.toHaveBeenCalled();
+  });
+
+  test('all three sections render when all three facets have items', () => {
+    state.pageUrl = new URL('http://localhost/search?q=miles');
+    const resp: SearchResponse = {
+      ...emptyResp(),
+      artists: { items: [artist], total: 1, limit: 10, offset: 0 },
+      albums:  { items: [album],  total: 1, limit: 10, offset: 0 },
+      tracks:  { items: [track],  total: 1, limit: 10, offset: 0 }
+    };
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
+    render(SearchPage);
+    expect(screen.getByRole('heading', { name: /artists/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /albums/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument();
+  });
+
+  test('empty facets are hidden', () => {
+    state.pageUrl = new URL('http://localhost/search?q=miles');
+    const resp: SearchResponse = {
+      ...emptyResp(),
+      tracks: { items: [track], total: 1, limit: 10, offset: 0 }
+    };
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
+    render(SearchPage);
+    expect(screen.queryByRole('heading', { name: /artists/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: /albums/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument();
+  });
+
+  test('"See all N →" link renders when total > items.length', () => {
+    state.pageUrl = new URL('http://localhost/search?q=miles');
+    const resp: SearchResponse = {
+      ...emptyResp(),
+      artists: { items: [artist], total: 47, limit: 10, offset: 0 }
+    };
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
+    render(SearchPage);
+    const link = screen.getByRole('link', { name: /see all 47/i });
+    expect(link).toHaveAttribute('href', '/search/artists?q=miles');
+  });
+
+  test('"See all" link omitted when total === items.length', () => {
+    state.pageUrl = new URL('http://localhost/search?q=miles');
+    const resp: SearchResponse = {
+      ...emptyResp(),
+      tracks: { items: [track], total: 1, limit: 10, offset: 0 }
+    };
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
+    render(SearchPage);
+    expect(screen.queryByRole('link', { name: /see all/i })).not.toBeInTheDocument();
+  });
+
+  test('all three facets empty renders "No matches"', () => {
+    state.pageUrl = new URL('http://localhost/search?q=zzz');
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: emptyResp() })
+    );
+    render(SearchPage);
+    expect(screen.getByText(/no matches for/i)).toBeInTheDocument();
+    expect(screen.getByText(/zzz/)).toBeInTheDocument();
+  });
+
+  test('error state renders ApiErrorBanner', () => {
+    state.pageUrl = new URL('http://localhost/search?q=miles');
+    (createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ isError: true, error: { code: 'server_error', message: 'boom' } })
+    );
+    render(SearchPage);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+});