diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 5ae5e90c..3447118e 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -1,41 +1,9 @@
 <script lang="ts">
-import { enhance } from '$app/forms';
-import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import PersonalInfoForm from './PersonalInfoForm.svelte';
+import PasswordChangeForm from './PasswordChangeForm.svelte';
 
 let { data, form } = $props();
-
-function isoToGerman(iso: string | undefined): string {
-	if (!iso) return '';
-	const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-	if (!match) return '';
-	return `${match[3]}.${match[2]}.${match[1]}`;
-}
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	return `${match[3]}-${match[2]}-${match[1]}`;
-}
-
-let birthDateDisplay = $state(untrack(() => isoToGerman(data.user?.birthDate)));
-let birthDateIso = $state(untrack(() => data.user?.birthDate ?? ''));
-
-function handleBirthDateInput(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let formatted: string;
-	if (digits.length <= 2) {
-		formatted = digits;
-	} else if (digits.length <= 4) {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
-	input.value = formatted;
-	birthDateDisplay = formatted;
-	birthDateIso = germanToIso(formatted);
-}
 </script>
 
 <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
@@ -59,181 +27,7 @@ function handleBirthDateInput(e: Event) {
 	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.profile_heading()}</h1>
 
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-		<!-- Personal info card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.profile_section_personal()}
-			</h2>
-
-			{#if form?.updateSuccess}
-				<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
-					{m.profile_saved()}
-				</div>
-			{/if}
-			{#if form?.updateError}
-				<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
-					{form.updateError}
-				</div>
-			{/if}
-
-			<form method="POST" action="?/updateProfile" use:enhance>
-				<div class="space-y-4">
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_first_name()}
-						</span>
-						<input
-							type="text"
-							name="firstName"
-							value={data.user?.firstName ?? ''}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_last_name()}
-						</span>
-						<input
-							type="text"
-							name="lastName"
-							value={data.user?.lastName ?? ''}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_birth_date()}
-						</span>
-						<input
-							type="text"
-							placeholder="TT.MM.JJJJ"
-							value={birthDateDisplay}
-							oninput={handleBirthDateInput}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-						<input type="hidden" name="birthDate" value={birthDateIso} />
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_email()}
-						</span>
-						<input
-							type="email"
-							name="email"
-							value={data.user?.email ?? ''}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_contact()}
-						</span>
-						<textarea
-							name="contact"
-							rows="3"
-							placeholder={m.profile_contact_placeholder()}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-							>{data.user?.contact ?? ''}</textarea
-						>
-					</label>
-				</div>
-
-				<button
-					type="submit"
-					class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
-				>
-					{m.btn_save()}
-				</button>
-			</form>
-		</div>
-
-		<!-- Password change card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.profile_section_password()}
-			</h2>
-
-			{#if form?.passwordSuccess}
-				<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
-					{m.profile_password_changed()}
-				</div>
-			{/if}
-			{#if form?.passwordError}
-				<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
-					{#if form.passwordError === 'PASSWORDS_DO_NOT_MATCH'}
-						{m.profile_password_mismatch()}
-					{:else}
-						{form.passwordError}
-					{/if}
-				</div>
-			{/if}
-
-			<form method="POST" action="?/changePassword" use:enhance>
-				<div class="space-y-4">
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_current_password()}
-						</span>
-						<input
-							type="password"
-							name="currentPassword"
-							required
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_new_password()}
-						</span>
-						<input
-							type="password"
-							name="newPassword"
-							required
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_new_password_confirm()}
-						</span>
-						<input
-							type="password"
-							name="confirmPassword"
-							required
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-				</div>
-
-				<button
-					type="submit"
-					class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
-				>
-					{m.btn_save()}
-				</button>
-			</form>
-		</div>
+		<PersonalInfoForm user={data.user} form={form} />
+		<PasswordChangeForm form={form} />
 	</div>
 </div>
diff --git a/frontend/src/routes/profile/PasswordChangeForm.svelte b/frontend/src/routes/profile/PasswordChangeForm.svelte
new file mode 100644
index 00000000..27f22efd
--- /dev/null
+++ b/frontend/src/routes/profile/PasswordChangeForm.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	form
+}: {
+	form?: { passwordSuccess?: boolean; passwordError?: string } | null;
+} = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.profile_section_password()}
+	</h2>
+
+	{#if form?.passwordSuccess}
+		<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+			{m.profile_password_changed()}
+		</div>
+	{/if}
+	{#if form?.passwordError}
+		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+			{#if form.passwordError === 'PASSWORDS_DO_NOT_MATCH'}
+				{m.profile_password_mismatch()}
+			{:else}
+				{form.passwordError}
+			{/if}
+		</div>
+	{/if}
+
+	<form method="POST" action="?/changePassword" use:enhance>
+		<div class="space-y-4">
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_current_password()}
+				</span>
+				<input
+					type="password"
+					name="currentPassword"
+					required
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_new_password()}
+				</span>
+				<input
+					type="password"
+					name="newPassword"
+					required
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_new_password_confirm()}
+				</span>
+				<input
+					type="password"
+					name="confirmPassword"
+					required
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+		</div>
+
+		<button
+			type="submit"
+			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+		>
+			{m.btn_save()}
+		</button>
+	</form>
+</div>
diff --git a/frontend/src/routes/profile/PersonalInfoForm.svelte b/frontend/src/routes/profile/PersonalInfoForm.svelte
new file mode 100644
index 00000000..8cd37f7a
--- /dev/null
+++ b/frontend/src/routes/profile/PersonalInfoForm.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { untrack } from 'svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	user,
+	form
+}: {
+	user:
+		| {
+				firstName?: string;
+				lastName?: string;
+				birthDate?: string;
+				email?: string;
+				contact?: string;
+		  }
+		| null
+		| undefined;
+	form?: { updateSuccess?: boolean; updateError?: string } | null;
+} = $props();
+
+let birthDateDisplay = $state(untrack(() => isoToGerman(user?.birthDate ?? '')));
+let birthDateIso = $state(untrack(() => user?.birthDate ?? ''));
+
+function handleBirthDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	birthDateDisplay = result.display;
+	birthDateIso = result.iso;
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.profile_section_personal()}
+	</h2>
+
+	{#if form?.updateSuccess}
+		<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+			{m.profile_saved()}
+		</div>
+	{/if}
+	{#if form?.updateError}
+		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+			{form.updateError}
+		</div>
+	{/if}
+
+	<form method="POST" action="?/updateProfile" use:enhance>
+		<div class="space-y-4">
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_first_name()}
+				</span>
+				<input
+					type="text"
+					name="firstName"
+					value={user?.firstName ?? ''}
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_last_name()}
+				</span>
+				<input
+					type="text"
+					name="lastName"
+					value={user?.lastName ?? ''}
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_birth_date()}
+				</span>
+				<input
+					type="text"
+					placeholder="TT.MM.JJJJ"
+					value={birthDateDisplay}
+					oninput={handleBirthDateInput}
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+				<input type="hidden" name="birthDate" value={birthDateIso} />
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_email()}
+				</span>
+				<input
+					type="email"
+					name="email"
+					value={user?.email ?? ''}
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_label_contact()}
+				</span>
+				<textarea
+					name="contact"
+					rows="3"
+					placeholder={m.profile_contact_placeholder()}
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					>{user?.contact ?? ''}</textarea
+				>
+			</label>
+		</div>
+
+		<button
+			type="submit"
+			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+		>
+			{m.btn_save()}
+		</button>
+	</form>
+</div>