diff --git a/frontend/src/lib/auth/LoginForm.svelte b/frontend/src/lib/auth/LoginForm.svelte
new file mode 100644
index 0000000..166bf51
--- /dev/null
+++ b/frontend/src/lib/auth/LoginForm.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	type FormResult = {
+		errors?: Record<string, string>;
+		email?: string;
+	} | null;
+
+	let { form = null }: { form?: FormResult } = $props();
+
+	let email = $state('');
+	let password = $state('');
+	let showPassword = $state(false);
+	let formError = $state('');
+
+	let errors = $state({
+		email: '',
+		password: ''
+	});
+
+	$effect(() => {
+		if (form?.errors) {
+			errors.email = form.errors.email ?? '';
+			errors.password = form.errors.password ?? '';
+			formError = form.errors.form ?? '';
+			if (form.email) email = form.email;
+		}
+	});
+
+	function validate(): boolean {
+		let hasError = false;
+
+		errors.email = '';
+		errors.password = '';
+		formError = '';
+
+		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailPattern.test(email)) {
+			errors.email = 'Ungültige E-Mail-Adresse';
+			hasError = true;
+		}
+
+		if (!password) {
+			errors.password = 'Passwort ist erforderlich';
+			hasError = true;
+		}
+
+		return hasError;
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		if (validate()) {
+			event.preventDefault();
+		}
+	}
+</script>
+
+<form method="POST" novalidate use:enhance onsubmit={handleSubmit}>
+	<h1
+		class="font-[var(--font-display)] text-[18px] font-medium tracking-[-0.02em] text-[var(--color-text)]
+			md:text-[28px]"
+	>
+		Willkommen zurück
+	</h1>
+
+	<p
+		class="mb-[20px] text-[12px] text-[var(--color-text-muted)]
+			md:mb-[32px] md:text-[14px]"
+	>
+		Melde dich an, um fortzufahren.
+	</p>
+
+	<!-- Email field -->
+	<div class="mb-[16px]">
+		<label
+			for="email"
+			class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
+		>
+			E-Mail
+		</label>
+		<input
+			type="email"
+			id="email"
+			name="email"
+			placeholder="du@beispiel.de"
+			autocomplete="email"
+			bind:value={email}
+			class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
+				{errors.email ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
+		/>
+		{#if errors.email}
+			<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
+				{errors.email}
+			</p>
+		{/if}
+	</div>
+
+	<!-- Password field -->
+	<div class="mb-[16px]">
+		<label
+			for="password"
+			class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
+		>
+			Passwort
+		</label>
+		<div class="relative">
+			<input
+				type={showPassword ? 'text' : 'password'}
+				id="password"
+				name="password"
+				placeholder="Dein Passwort"
+				autocomplete="current-password"
+				bind:value={password}
+				class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] pr-[44px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
+					{errors.password ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
+			/>
+			<button
+				type="button"
+				onclick={() => (showPassword = !showPassword)}
+				aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+				class="absolute top-1/2 right-[12px] -translate-y-1/2 cursor-pointer bg-transparent p-0 text-[12px] text-[var(--color-text-muted)]"
+			>
+				{showPassword ? 'Verbergen' : 'Anzeigen'}
+			</button>
+		</div>
+		{#if errors.password}
+			<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
+				{errors.password}
+			</p>
+		{/if}
+	</div>
+
+	{#if formError}
+		<p class="mb-[16px] rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-error),transparent_90%)] px-[12px] py-[10px] text-[12px] text-[var(--color-error)]">
+			{formError}
+		</p>
+	{/if}
+
+	<!-- Submit button -->
+	<button
+		type="submit"
+		class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
+	>
+		Anmelden &rarr;
+	</button>
+
+	<!-- Signup link -->
+	<p
+		class="mt-[16px] text-center text-[12px] text-[var(--color-text-muted)]
+			md:text-[13px]"
+	>
+		Noch kein Konto? <a href="/signup" class="font-medium text-[var(--green)] hover:underline">Registrieren</a>
+	</p>
+</form>
diff --git a/frontend/src/lib/auth/LoginForm.test.ts b/frontend/src/lib/auth/LoginForm.test.ts
new file mode 100644
index 0000000..d338b02
--- /dev/null
+++ b/frontend/src/lib/auth/LoginForm.test.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import LoginForm from './LoginForm.svelte';
+
+vi.mock('$app/forms', () => ({
+	enhance: () => ({ destroy: () => {} })
+}));
+
+describe('LoginForm', () => {
+	it('renders email and password fields with correct labels', () => {
+		render(LoginForm);
+		expect(screen.getByLabelText('E-Mail')).toBeInTheDocument();
+		expect(screen.getByLabelText('Passwort')).toBeInTheDocument();
+	});
+
+	it('renders heading and subtitle', () => {
+		render(LoginForm);
+		expect(screen.getByText('Willkommen zurück')).toBeInTheDocument();
+		expect(screen.getByText('Melde dich an, um fortzufahren.')).toBeInTheDocument();
+	});
+
+	it('renders submit button', () => {
+		render(LoginForm);
+		expect(screen.getByRole('button', { name: /anmelden/i })).toBeInTheDocument();
+	});
+
+	it('renders signup link', () => {
+		render(LoginForm);
+		const link = screen.getByRole('link', { name: /registrieren/i });
+		expect(link).toHaveAttribute('href', '/signup');
+		expect(link.className).toContain('text-[var(--green)]');
+		expect(link.className).toContain('font-medium');
+	});
+
+	it('submit button uses --green-dark for WCAG AA', () => {
+		render(LoginForm);
+		const button = screen.getByRole('button', { name: /anmelden/i });
+		expect(button.className).toContain('bg-[var(--green-dark)]');
+	});
+
+	it('password field is initially of type password', () => {
+		render(LoginForm);
+		expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'password');
+	});
+
+	it('password toggle switches type', async () => {
+		const user = userEvent.setup();
+		render(LoginForm);
+
+		const input = screen.getByLabelText('Passwort');
+		const toggle = screen.getByRole('button', { name: /passwort anzeigen/i });
+
+		await user.click(toggle);
+		expect(input).toHaveAttribute('type', 'text');
+
+		await user.click(toggle);
+		expect(input).toHaveAttribute('type', 'password');
+	});
+
+	it('inputs have correct autocomplete attributes', () => {
+		render(LoginForm);
+		expect(screen.getByLabelText('E-Mail')).toHaveAttribute('autocomplete', 'email');
+		expect(screen.getByLabelText('Passwort')).toHaveAttribute('autocomplete', 'current-password');
+	});
+
+	it('shows validation error for invalid email on submit', async () => {
+		const user = userEvent.setup();
+		render(LoginForm);
+
+		await user.type(screen.getByLabelText('E-Mail'), 'notanemail');
+		await user.type(screen.getByLabelText('Passwort'), 'password123');
+		await user.click(screen.getByRole('button', { name: /anmelden/i }));
+
+		expect(screen.getByText('Ungültige E-Mail-Adresse')).toBeInTheDocument();
+	});
+
+	it('shows validation error for empty password on submit', async () => {
+		const user = userEvent.setup();
+		render(LoginForm);
+
+		await user.type(screen.getByLabelText('E-Mail'), 'test@example.com');
+		await user.click(screen.getByRole('button', { name: /anmelden/i }));
+
+		expect(screen.getByText('Passwort ist erforderlich')).toBeInTheDocument();
+	});
+
+	it('shows no errors when fields are valid', async () => {
+		const user = userEvent.setup();
+		render(LoginForm);
+
+		await user.type(screen.getByLabelText('E-Mail'), 'test@example.com');
+		await user.type(screen.getByLabelText('Passwort'), 'password123');
+		await user.click(screen.getByRole('button', { name: /anmelden/i }));
+
+		expect(screen.queryByText('Ungültige E-Mail-Adresse')).not.toBeInTheDocument();
+		expect(screen.queryByText('Passwort ist erforderlich')).not.toBeInTheDocument();
+	});
+
+	it('displays server-side form error from form prop', () => {
+		render(LoginForm, {
+			props: {
+				form: {
+					errors: { form: 'E-Mail oder Passwort ist falsch.' },
+					email: 'test@example.com'
+				}
+			}
+		});
+		expect(screen.getByText('E-Mail oder Passwort ist falsch.')).toBeInTheDocument();
+	});
+
+	it('renders placeholders', () => {
+		render(LoginForm);
+		expect(screen.getByPlaceholderText('du@beispiel.de')).toBeInTheDocument();
+		expect(screen.getByPlaceholderText('Dein Passwort')).toBeInTheDocument();
+	});
+});