diff --git a/frontend/src/lib/components/SortDropdown.svelte b/frontend/src/lib/components/SortDropdown.svelte
new file mode 100644
index 00000000..abc7012b
--- /dev/null
+++ b/frontend/src/lib/components/SortDropdown.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+interface Props {
+	sort: string;
+	dir: string;
+}
+
+let { sort = $bindable(), dir = $bindable() }: Props = $props();
+
+function toggleDir() {
+	dir = dir === 'asc' ? 'desc' : 'asc';
+}
+</script>
+
+<div class="inline-flex items-center gap-1">
+	<select
+		role="combobox"
+		bind:value={sort}
+		class="border-brand-sand rounded border bg-white px-2 py-1 font-sans text-sm text-brand-navy focus:ring-2 focus:ring-brand-mint focus:outline-none"
+	>
+		<option value="DATE">{m.docs_sort_date()}</option>
+		<option value="TITLE">{m.docs_sort_title()}</option>
+		<option value="SENDER">{m.docs_sort_sender()}</option>
+		<option value="RECEIVER">{m.docs_sort_receiver()}</option>
+		<option value="UPLOAD_DATE">{m.docs_sort_upload()}</option>
+	</select>
+	<button
+		type="button"
+		onclick={toggleDir}
+		class="border-brand-sand hover:bg-brand-sand flex items-center justify-center rounded border bg-white px-2 py-1 text-sm text-brand-navy transition-colors"
+		aria-label={dir === 'asc' ? 'Aufsteigend sortieren' : 'Absteigend sortieren'}
+	>
+		{dir === 'asc' ? '↑' : '↓'}
+	</button>
+</div>
diff --git a/frontend/src/lib/components/SortDropdown.svelte.spec.ts b/frontend/src/lib/components/SortDropdown.svelte.spec.ts
new file mode 100644
index 00000000..2c4282a8
--- /dev/null
+++ b/frontend/src/lib/components/SortDropdown.svelte.spec.ts
@@ -0,0 +1,36 @@
+import { render } from 'vitest-browser-svelte';
+import { describe, expect, it } from 'vitest';
+import { page } from '@vitest/browser/context';
+import SortDropdown from './SortDropdown.svelte';
+
+describe('SortDropdown', () => {
+	it('renders a select with all sort options', async () => {
+		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
+		const select = page.getByRole('combobox');
+		await expect.element(select).toBeInTheDocument();
+	});
+
+	it('shows the current sort value as selected', async () => {
+		render(SortDropdown, { sort: 'TITLE', dir: 'asc' });
+		const select = page.getByRole('combobox');
+		await expect.element(select).toHaveValue('TITLE');
+	});
+
+	it('renders direction toggle button', async () => {
+		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
+		const btn = page.getByRole('button');
+		await expect.element(btn).toBeInTheDocument();
+	});
+
+	it('direction button shows ↑ when dir is asc', async () => {
+		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
+		const btn = page.getByRole('button');
+		await expect.element(btn).toHaveTextContent('↑');
+	});
+
+	it('direction button shows ↓ when dir is desc', async () => {
+		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
+		const btn = page.getByRole('button');
+		await expect.element(btn).toHaveTextContent('↓');
+	});
+});