diff --git a/web/src/routes/library/artists/+page.svelte b/web/src/routes/library/artists/+page.svelte
new file mode 100644
index 00000000..a388c7eb
--- /dev/null
+++ b/web/src/routes/library/artists/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { createArtistsQuery } from '$lib/api/queries';
+  import ArtistCard from '$lib/components/ArtistCard.svelte';
+  import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
+  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import { useDelayed } from '$lib/utils/useDelayed.svelte';
+  import type { ArtistRef } from '$lib/api/types';
+
+  const queryStore = $derived(createArtistsQuery('alpha'));
+  const query = $derived($queryStore);
+  const artists = $derived(query.data?.pages?.flatMap((p) => p.items) ?? []);
+  const total = $derived(query.data?.pages?.[0]?.total ?? 0);
+  const showSkeleton = useDelayed(() => query.isPending);
+</script>
+
+<div class="space-y-4">
+  <header>
+    <h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
+    {#if !query.isPending && !query.isError}
+      <p class="text-sm text-text-secondary">
+        {total} {total === 1 ? 'artist' : 'artists'}
+      </p>
+    {/if}
+  </header>
+
+  {#if query.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+  {:else if showSkeleton.value && artists.length === 0}
+    <p class="text-text-secondary">Loading…</p>
+  {:else if !query.isPending && total === 0}
+    <p class="text-text-secondary">No artists yet — scan a library folder via the server's config.</p>
+  {:else}
+    <AlphabeticalGrid
+      items={artists}
+      getKey={(a: ArtistRef) => a.sort_name || a.name}
+    >
+      {#snippet item(a: ArtistRef)}
+        <ArtistCard artist={a} />
+      {/snippet}
+    </AlphabeticalGrid>
+
+    {#if query.hasNextPage}
+      <button
+        type="button"
+        class="w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
+        disabled={query.isFetchingNextPage}
+        onclick={() => query.fetchNextPage()}
+      >
+        {query.isFetchingNextPage ? 'Loading…' : 'Load more'}
+      </button>
+    {:else if artists.length > 0}
+      <p class="py-2 text-center text-sm text-text-secondary">End of library</p>
+    {/if}
+  {/if}
+</div>
diff --git a/web/src/routes/library/artists/page.test.ts b/web/src/routes/library/artists/page.test.ts
new file mode 100644
index 00000000..c7e086fd
--- /dev/null
+++ b/web/src/routes/library/artists/page.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+vi.mock('$lib/api/queries', () => ({
+  createArtistsQuery: () => readable({
+    data: { pages: [{
+      items: [
+        { id: 'a1', name: 'Alpha', sort_name: 'Alpha', album_count: 1, cover_url: '' },
+        { id: 'b1', name: 'Beta',  sort_name: 'Beta',  album_count: 2, cover_url: '' }
+      ],
+      total: 2, limit: 50, offset: 0
+    }] },
+    isPending: false,
+    isError: false,
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    refetch: () => {},
+    fetchNextPage: () => {}
+  })
+}));
+vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } }));
+vi.mock('$lib/player/store.svelte', () => ({ playQueue: vi.fn() }));
+
+import Page from './+page.svelte';
+
+describe('/library/artists', () => {
+  test('renders title + count + alphabetical dividers', () => {
+    render(Page);
+    expect(screen.getByRole('heading', { name: /artists/i })).toBeInTheDocument();
+    expect(screen.getByText(/2 artists/)).toBeInTheDocument();
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+});