diff --git a/web/src/routes/library/liked/+page.svelte b/web/src/routes/library/liked/+page.svelte
new file mode 100644
index 00000000..1c722f70
--- /dev/null
+++ b/web/src/routes/library/liked/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import {
+    createLikedTracksInfiniteQuery,
+    createLikedAlbumsInfiniteQuery,
+    createLikedArtistsInfiniteQuery
+  } from '$lib/api/likes';
+  import ArtistRow from '$lib/components/ArtistRow.svelte';
+  import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import TrackRow from '$lib/components/TrackRow.svelte';
+
+  const artistsStore = $derived(createLikedArtistsInfiniteQuery());
+  const albumsStore  = $derived(createLikedAlbumsInfiniteQuery());
+  const tracksStore  = $derived(createLikedTracksInfiniteQuery());
+
+  const artistsQuery = $derived($artistsStore);
+  const albumsQuery  = $derived($albumsStore);
+  const tracksQuery  = $derived($tracksStore);
+
+  const artists = $derived(artistsQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
+  const albums  = $derived(albumsQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
+  const tracks  = $derived(tracksQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
+
+  const artistsTotal = $derived(artistsQuery?.data?.pages?.[0]?.total ?? 0);
+  const albumsTotal  = $derived(albumsQuery?.data?.pages?.[0]?.total ?? 0);
+  const tracksTotal  = $derived(tracksQuery?.data?.pages?.[0]?.total ?? 0);
+</script>
+
+<div class="space-y-6">
+  <h1 class="text-2xl font-semibold">Liked</h1>
+
+  <section>
+    <h2 class="mb-2 text-lg font-semibold">Artists</h2>
+    {#if artistsTotal === 0}
+      <p class="text-text-secondary">No liked artists yet.</p>
+    {:else}
+      <div>
+        {#each artists as a (a.id)}
+          <ArtistRow artist={a} />
+        {/each}
+      </div>
+      {#if artistsQuery?.hasNextPage}
+        <button
+          type="button"
+          class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
+          disabled={artistsQuery.isFetchingNextPage}
+          onclick={() => artistsQuery.fetchNextPage()}
+        >
+          {artistsQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
+        </button>
+      {/if}
+    {/if}
+  </section>
+
+  <section>
+    <h2 class="mb-2 text-lg font-semibold">Albums</h2>
+    {#if albumsTotal === 0}
+      <p class="text-text-secondary">No liked albums yet.</p>
+    {:else}
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+        {#each albums as al (al.id)}
+          <AlbumCard album={al} />
+        {/each}
+      </div>
+      {#if albumsQuery?.hasNextPage}
+        <button
+          type="button"
+          class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
+          disabled={albumsQuery.isFetchingNextPage}
+          onclick={() => albumsQuery.fetchNextPage()}
+        >
+          {albumsQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
+        </button>
+      {/if}
+    {/if}
+  </section>
+
+  <section>
+    <h2 class="mb-2 text-lg font-semibold">Tracks</h2>
+    {#if tracksTotal === 0}
+      <p class="text-text-secondary">No liked tracks yet.</p>
+    {:else}
+      <div class="overflow-hidden rounded border border-border">
+        {#each tracks as t, i (t.id)}
+          <TrackRow tracks={tracks} index={i} />
+        {/each}
+      </div>
+      {#if tracksQuery?.hasNextPage}
+        <button
+          type="button"
+          class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
+          disabled={tracksQuery.isFetchingNextPage}
+          onclick={() => tracksQuery.fetchNextPage()}
+        >
+          {tracksQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
+        </button>
+      {/if}
+    {/if}
+  </section>
+</div>
diff --git a/web/src/routes/library/liked/liked.test.ts b/web/src/routes/library/liked/liked.test.ts
new file mode 100644
index 00000000..bcb2d29b
--- /dev/null
+++ b/web/src/routes/library/liked/liked.test.ts
@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { mockInfiniteQuery } from '../../../test-utils/query';
+import type { ArtistRef, AlbumRef, TrackRef, Page } from '$lib/api/types';
+import { readable } from 'svelte/store';
+
+vi.mock('$lib/api/likes', () => ({
+  createLikedIdsQuery: () => readable({
+    data: { track_ids: [], album_ids: [], artist_ids: [] },
+    isPending: false,
+    isError: false
+  }),
+  createLikedTracksInfiniteQuery: vi.fn(),
+  createLikedAlbumsInfiniteQuery: vi.fn(),
+  createLikedArtistsInfiniteQuery: vi.fn(),
+  likeEntity: vi.fn(),
+  unlikeEntity: vi.fn()
+}));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({}) };
+});
+
+vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } }));
+vi.mock('$lib/player/store.svelte', () => ({
+  playQueue: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn()
+}));
+
+import LikedPage from './+page.svelte';
+import {
+  createLikedTracksInfiniteQuery,
+  createLikedAlbumsInfiniteQuery,
+  createLikedArtistsInfiniteQuery
+} from '$lib/api/likes';
+
+function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
+  return { items, total, offset, limit };
+}
+
+afterEach(() => vi.clearAllMocks());
+
+describe('liked library page', () => {
+  test('renders three sections when each has items', () => {
+    const ar: ArtistRef = { id: 'a1', name: 'X', album_count: 1 };
+    const al: AlbumRef = {
+      id: 'al1', title: 'Y', artist_id: 'a1', artist_name: 'X',
+      year: 2020, track_count: 1, duration_sec: 100, cover_url: '/x'
+    };
+    const tr: TrackRef = {
+      id: 't1', title: 'Z', album_id: 'al1', album_title: 'Y',
+      artist_id: 'a1', artist_name: 'X',
+      track_number: 1, disc_number: 1, duration_sec: 100,
+      stream_url: '/api/tracks/t1/stream'
+    };
+    (createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page([ar], 1)] })
+    );
+    (createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page([al], 1)] })
+    );
+    (createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page([tr], 1)] })
+    );
+    render(LikedPage);
+    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 section renders "No liked X yet" hint', () => {
+    (createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
+    );
+    (createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
+    );
+    (createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<TrackRef>([], 0)] })
+    );
+    render(LikedPage);
+    expect(screen.getAllByText(/no liked/i)).toHaveLength(3);
+  });
+
+  test('Load more calls fetchNextPage on each section that has more', async () => {
+    const fetchTracks = vi.fn();
+    (createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<TrackRef>([], 100)], hasNextPage: true, fetchNextPage: fetchTracks })
+    );
+    (createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
+    );
+    (createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
+    );
+    render(LikedPage);
+    const buttons = screen.getAllByRole('button', { name: /load more/i });
+    expect(buttons).toHaveLength(1);
+    await fireEvent.click(buttons[0]);
+    expect(fetchTracks).toHaveBeenCalledTimes(1);
+  });
+});