diff --git a/frontend/src/lib/components/BackButton.svelte b/frontend/src/lib/components/BackButton.svelte
new file mode 100644
index 00000000..4b2edbaf
--- /dev/null
+++ b/frontend/src/lib/components/BackButton.svelte
@@ -0,0 +1,25 @@
+
+
+
diff --git a/frontend/src/lib/components/BackButton.svelte.spec.ts b/frontend/src/lib/components/BackButton.svelte.spec.ts
new file mode 100644
index 00000000..ce714912
--- /dev/null
+++ b/frontend/src/lib/components/BackButton.svelte.spec.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import BackButton from './BackButton.svelte';
+
+afterEach(cleanup);
+
+describe('BackButton', () => {
+ it('renders a button with "Zurück" text', async () => {
+ render(BackButton);
+ await expect.element(page.getByRole('button', { name: /zurück/i })).toBeInTheDocument();
+ });
+
+ it('calls history.back() when clicked', async () => {
+ const backSpy = vi.spyOn(history, 'back').mockImplementation(() => {});
+ render(BackButton);
+
+ await page.getByRole('button', { name: /zurück/i }).click();
+
+ expect(backSpy).toHaveBeenCalledOnce();
+ backSpy.mockRestore();
+ });
+
+ it('has min-h-[44px] for touch target compliance', async () => {
+ render(BackButton);
+ const btn = document.querySelector('button');
+ expect(btn?.className).toContain('min-h-[44px]');
+ });
+});