diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index e11653c..db45d0f 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -7,7 +7,8 @@
 	import StatusNotificationBig from './StatusNotificationBig.svelte';
 	import InfoButton from './InfoButton.svelte';
 	import { candidateData } from '$lib/stores/candidate';
-	import tippy from 'tippy.js';
+	import tippy, {sticky} from 'tippy.js';
+	import { goto } from '$app/navigation';
 
 	export let title: string;
 	export let status: Status;
@@ -58,6 +59,10 @@
 			console.log(e);
 		}
 	};
+
+	const editDetails = async () => {
+		goto('/register?edit=true')
+	}
 </script>
 
 <div class="card flex flex-col">
@@ -86,52 +91,65 @@
 			</div>
 		</div>
 		{#if showDetails}
-			<div class="overflow-scroll">
-				<div
+			<div class="overflow-scroll flex justify-between">
+				<div>
+					<div
+						use:tippy={{
+							content: '<span>Vámi vyplněné osobní údaje</span>',
+							allowHTML: true,
+							placement: 'top',
+							showOnCreate: false,
+							delay: 0
+						}}
+						class="mt-4 flex flex-col justify-between leading-10"
+					>
+						<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
+						<span
+							>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span
+							></span
+						>
+						<span
+							>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
+							></span
+						>
+						<span
+							>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
+							></span
+						>
+						<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
+					</div>
+					<div
+						use:tippy={{
+							content: '<span>Vámi vyplněné osobní údaje</span>',
+							allowHTML: true,
+							placement: 'top',
+							showOnCreate: false,
+							delay: 0
+						}}
+						class="mt-4 flex flex-col leading-10"
+					>
+						{#each $candidateData.parents as parent}
+							<div class="flex flex-col">
+								<span class="text-sspsBlue text-xl font-bold"
+									>{parent.name + ' ' + parent.surname}</span
+								>
+								<span>Email: <span class="font-bold">{parent.email}</span></span>
+								<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
+							</div>
+						{/each}
+					</div>
+				</div>
+				<span
 					use:tippy={{
-						content: '<span>Vámi vyplněné osobní údaje</span>',
-						allowHTML: true,
+						content: 'Upravit osobní údaje',
 						placement: 'top',
 						showOnCreate: false,
-						delay: 0
+						sticky: true,
+						plugins: [sticky]
 					}}
-					class="mt-4 flex flex-col justify-between leading-10"
-				>
-					<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
-					<span
-						>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span
-						></span
-					>
-					<span
-						>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
-						></span
-					>
-					<span
-						>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
-						></span
-					>
-					<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
-				</div>
-				<div
-					use:tippy={{
-						content: '<span>Vámi vyplněné osobní údaje</span>',
-						allowHTML: true,
-						placement: 'top',
-						showOnCreate: false,
-						delay: 0
-					}}
-					class="mt-4 flex flex-col leading-10"
-				>
-					{#each $candidateData.parents as parent}
-						<div class="flex flex-col">
-							<span class="text-sspsBlue text-xl font-bold"
-								>{parent.name + ' ' + parent.surname}</span
-							>
-							<span>Email: <span class="font-bold">{parent.email}</span></span>
-							<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
-						</div>
-					{/each}
-				</div>
+				 	on:click={(_) => editDetails()} on:keydown={(_) => editDetails()} class="mt-4 hover:cursor-pointer">
+					<svg class="w-10 h-10 stroke-sspsBlue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+				</span>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 31ad037..d7cb132 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -164,7 +164,7 @@
 				class="drag group"
 				on:mouseenter={dashAnimationStart}
 				on:mouseleave={dashAnimationStop}
-				style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
+				style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
 			>
 				{#if error}
 					<span class="font-semibold text-red-600">{error}</span>
diff --git a/frontend/src/lib/components/layout/SplitLayout.svelte b/frontend/src/lib/components/layout/SplitLayout.svelte
index 4a4d9aa..8251601 100644
--- a/frontend/src/lib/components/layout/SplitLayout.svelte
+++ b/frontend/src/lib/components/layout/SplitLayout.svelte
@@ -28,11 +28,11 @@
 <style lang="postcss">
 	.bgImage {
 		@apply -z-20;
-		@apply min-w-screen absolute min-h-screen md:min-w-[50vw];
+		@apply min-w-screen absolute min-h-full md:min-w-[50vw];
 		@apply bg-cover bg-no-repeat;
 	}
 	.bgOverlay {
-		@apply min-w-screen absolute -z-10 min-h-screen md:min-w-[50vw];
+		@apply min-w-screen absolute -z-10 min-h-full md:min-w-[50vw];
 		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
 		@apply bg-cover;
 	}
diff --git a/frontend/src/lib/stores/candidate.ts b/frontend/src/lib/stores/candidate.ts
index 498098e..810afd0 100644
--- a/frontend/src/lib/stores/candidate.ts
+++ b/frontend/src/lib/stores/candidate.ts
@@ -2,23 +2,23 @@ import { writable } from 'svelte/store';
 
 export interface CandidateData {
 	candidate: {
-		name?: string;
-		surname?: string;
-		birthplace?: string;
-		birthdate?: string;
-		address?: string;
-		telephone?: string;
-		citizenship?: string;
-		email?: string;
-		sex?: string;
-		study?: string;
-		personalIdNumber?: string;
+		name: string;
+		surname: string;
+		birthplace: string;
+		birthdate: string;
+		address: string;
+		telephone: string;
+		citizenship: string;
+		email: string;
+		sex: string;
+		study: string;
+		personalIdNumber: string;
 	};
 	parents: Array<{
-		name?: string;
-		surname?: string;
-		telephone?: string;
-		email?: string;
+		name: string;
+		surname: string;
+		telephone: string;
+		email: string;
 	}>;
 }
 
@@ -44,6 +44,18 @@ export interface CreateCandidateLogin extends CreateCandidate {
 }
 
 export const candidateData = writable<CandidateData>({
-	candidate: {},
+	candidate: {
+		name: '',
+		surname: '',
+		birthplace: '',
+		birthdate: '',
+		address: '',
+		telephone: '',
+		citizenship: '',
+		email: '',
+		sex: '',
+		study: '',
+		personalIdNumber: ''
+	},
 	parents: []
 });
diff --git a/frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts b/frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts
index b53c42f..020474b 100644
--- a/frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts
+++ b/frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts
@@ -7,7 +7,19 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 	const codeNumber = Number(code);
 
 	let candidateData: CandidateData = {
-		candidate: {},
+		candidate: {
+			name: '',
+			surname: '',
+			birthplace: '',
+			birthdate: '',
+			address: '',
+			telephone: '',
+			citizenship: '',
+			email: '',
+			sex: '',
+			study: '',
+			personalIdNumber: ''
+		},
 		parents: []
 	};
 	try {
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index e807867..4ea9083 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -81,7 +81,7 @@
 		{/each}
 	</div>
 	<div class="dashboard dashboardMobile">
-		<div class="name my-10 mx-auto w-[90%]">
+		<div class="name md:my-10 mx-auto w-[90%]">
 			<DashboardInfoCard
 				status={getUploadStatus($submissionProgress.status)}
 				title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts b/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts
new file mode 100644
index 0000000..6e591f8
--- /dev/null
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts
@@ -0,0 +1,14 @@
+import { apiFetchDetails, apiFetchSubmissionProgress } from '$lib/@api/candidate';
+import type { CandidateData } from '$lib/stores/candidate';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	const details: CandidateData | undefined = await apiFetchDetails(fetch).catch((e) => {
+		console.error(e);
+        return undefined;
+	});
+
+	return {
+		candidate: details,
+	};
+};
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
index d1c9570..aeb3401 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
@@ -13,15 +13,28 @@
 	import NameField from '$lib/components/textfield/NameField.svelte';
 	import TelephoneField from '$lib/components/textfield/TelephoneField.svelte';
 	import TextField from '$lib/components/textfield/TextField.svelte';
-	import type { CandidateData } from '$lib/stores/candidate';
+	import type { PageData } from './$types';
 
 	import { createForm } from 'svelte-forms-lib';
 	import type { Writable } from 'svelte/store';
 	import * as yup from 'yup';
+	import type { CandidateData } from '$lib/stores/candidate';
 
 	const pageCount = 5;
 	let pageIndex = 0;
 	let pagesFilled = [false, false, false, false, false];
+	let pageTexts = [
+		'Zpracování osobních údajů',
+		'Registrace',
+		'Něco o Vás',
+		'Kontakt na zákonného zástupce',
+		'Kontakt na druhého zákonného zástupce',
+		'Poslední krok'
+	];
+
+	export let data: PageData;
+	let details = data.candidate;
+
 
 	const formInitialValues = {
 		gdpr: false,
@@ -58,7 +71,7 @@
 		gdpr: yup.boolean().oneOf([true]),
 		candidate: yup.object().shape({
 			name: yup.string().required(),
-			surname: yup.string(),
+			surname: yup.string().required(),
 			email: yup.string().email().required(),
 			telephone: yup
 				.string()
@@ -68,7 +81,7 @@
 			birthdate: yup
 				.string()
 				.required()
-				.matches(/^([0-3]?[0-9])\.([1-9]|1[0-2])\.[0-9]{4}$/),
+				.matches(/^([0-3]?[0-9])\.(0?[1-9]|1[0-2])\.[0-9]{4}$/),
 			sex: yup.string(),
 			address: yup.string().required(),
 			citizenship: yup.string().required(),
@@ -93,13 +106,13 @@
 					.string()
 					.email()
 					.test((_val, context) => {
-						if (context.path.includes('parents[1]')) {
+						if (context.path.includes('parents[1]') && _val === '') {
 							return true;
 						}
 						return _val !== '';
 					}),
 				telephone: yup.string().test((_val, context) => {
-					if (context.path.includes('parents[1]')) {
+					if (context.path.includes('parents[1]') && _val === '') {
 						return true;
 					}
 					return _val?.match(/^\+\d{1,3} \d{3} \d{3} \d{3}$/) !== null;
@@ -108,45 +121,6 @@
 		)
 	});
 
-	const { form, errors, handleSubmit, handleChange } = createForm({
-		initialValues: formInitialValues,
-		validationSchema: formValidationSchema,
-
-		onSubmit: async (values: CandidateData) => {
-			console.log('page count: ' + pageIndex);
-			console.log(values.candidate);
-			console.log(values.parents);
-			console.log(values);
-			if (pageIndex === pageCount) {
-				// clone values to oldValues
-				let oldValues = JSON.parse(JSON.stringify(values));
-				try {
-					console.log('submit');
-					// @ts-ignore // love javascript
-					delete values.undefined;
-					// convert birthdate from dd.mm.yyyy to yyyy-mm-dd
-					let birthdate_formttted = values.candidate
-						.birthdate!.split('.')
-						.map((x) => x.padStart(2, '0'))
-						.reverse()
-						.join('-');
-
-					values.candidate.birthdate = birthdate_formttted;
-
-					values.parents.filter(
-						(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
-					);
-
-					await apiFillDetails(values);
-					goto('/dashboard');
-				} catch (e) {
-					values = oldValues;
-					console.error('error while submitting data: ' + e);
-				}
-			}
-		}
-	});
-
 	type FormErrorType = {
 		[K in keyof typeof formInitialValues]: typeof formInitialValues[K] extends Record<
 			string,
@@ -163,8 +137,100 @@
 	// TODO: https://github.com/tjinauyeung/svelte-forms-lib/issues/171!! (Zatím tenhle mega typ)
 	$: typedErrors = errors as unknown as Writable<FormErrorType>;
 
-	const isPageInvalid = (): boolean => {
-		switch (pageIndex) {
+	// TODO: validate on admin dashboard, move somewhere
+	// TODO: nefunguje pro lidi nar. pred 1.1.1954 :D
+	const isPersonalIdNumberValid = (personalIdNumber: string): boolean => {
+		const idFmt = personalIdNumber
+			.split('/')
+			.join('');
+
+		const lastDigitCheck = Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) || 
+			Number(idFmt.slice(0, 9)) % 11 === 10; // an edge case that could occur
+		const divisibleBy11 = Number(idFmt) % 11 === 0;
+
+		if (lastDigitCheck && divisibleBy11) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	const isPersonalIdNumberWithBirthdateValid = (personalIdNumber: string, birthdate: string): boolean => {
+		const dateFmt = birthdate
+			.split('.')
+			.map((x) => x.padStart(2, '0')) 
+			.reverse()
+			.join('')
+			.slice(2);
+		const idFmt = personalIdNumber
+			.split('/')
+			.join('');
+
+		const divisionValid = isPersonalIdNumberValid(personalIdNumber);
+
+		const idMonth = Number(idFmt.slice(2, 4));
+		const dateMonth = Number(dateFmt.slice(2, 4));
+		const monthValid = idMonth === dateMonth || idMonth === dateMonth + 50 || 
+			idMonth === dateMonth + 20 || idMonth === dateMonth + 70;
+		
+		if (
+			idFmt.slice(0, 2) === dateFmt.slice(0, 2) &&
+			monthValid &&
+			idFmt.slice(4, 6) === dateFmt.slice(4, 6) &&
+			divisionValid
+		) {
+			return true;
+		} else {
+			return false;
+		}
+	
+	};
+
+	const onSubmit = async (values: CandidateData) => {
+		if (pageIndex === pageCount) {
+			// clone values to oldValues
+			let oldValues = JSON.parse(JSON.stringify(values));
+			try {
+				if (values.candidate.citizenship === 'Česká republika') {
+					if (!isPersonalIdNumberWithBirthdateValid(values.candidate.personalIdNumber, values.candidate.birthdate)) {
+						alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
+						throw new Error('Rodné číslo neodpovídá datumu narození');
+					}
+				}
+				// @ts-ignore // love javascript
+				delete values.undefined;
+				// convert birthdate from dd.mm.yyyy to yyyy-mm-dd
+				let birthdate_formttted = values.candidate
+					.birthdate!.split('.')
+					.map((x) => x.padStart(2, '0'))
+					.reverse()
+					.join('-');
+
+				values.candidate.birthdate = birthdate_formttted;
+
+				values.parents = values.parents.filter(
+					(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
+				);
+
+
+				await apiFillDetails(values);
+				goto('/dashboard');
+			} catch (e) {
+				values = oldValues;
+				console.error('error while submitting data: ' + e);
+			}
+		}
+	}
+
+	const { form, errors, handleSubmit, handleChange } = createForm({
+		initialValues: formInitialValues,
+		validationSchema: formValidationSchema,
+
+		onSubmit: async (values: CandidateData) => onSubmit(values)
+	});
+
+	const isPageInvalid = (index: number): boolean => {
+		switch (index) {
 			case 0:
 				if ($typedErrors['gdpr']) {
 					return true;
@@ -182,9 +248,9 @@
 
 			case 2:
 				if (
-					/* $typedErrors.birthdurname || */ $typedErrors['candidate']['birthplace'] ||
+					$typedErrors['candidate']['birthplace'] ||
 					$typedErrors['candidate']['birthdate'] ||
-					$typedErrors['candidate']['address'] /* || $typedErrors.sex */
+					$typedErrors['candidate']['address']
 				) {
 					return true;
 				}
@@ -213,8 +279,7 @@
 				if (
 					$typedErrors['candidate']['citizenship'] ||
 					$typedErrors['candidate']['personalIdNumber'] ||
-					$typedErrors['candidate']['study'] //||
-					// $typedErrors.applicationId
+					$typedErrors['candidate']['study']
 				) {
 					return true;
 				}
@@ -224,21 +289,62 @@
 		}
 		return false;
 	};
+
+	const formatTelephone = (telephone: string) => {
+		return '+' + telephone
+			.match(/[0-9]{1,3}/g)!
+			.join(' ');
+	}
+	
+	if (details !== undefined) {
+		details.candidate.birthdate = details.candidate.birthdate
+			.split('-')
+			.reverse()
+			.join('.');
+			
+			details.candidate.telephone = formatTelephone(details.candidate.telephone);
+			details.parents.map((x) => x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '');
+			form.set({
+				gdpr: true,
+				candidate: {
+					...details.candidate
+				},
+				parents: [
+				{
+					...details.parents[0]
+				},
+				{
+					...details.parents[1] ?? {
+						name: '',
+						surname: '',
+						email: '',
+						telephone: ''
+					}
+				}
+			]
+		});
+		pageIndex = 1; // skip gdpr page	
+		pageTexts[1] = 'Úprava osobních údajů'
+	}
+
 </script>
 
 <SplitLayout>
-	<div class="form">
-		<div class="h-24 w-24 md:h-auto md:w-auto">
-			<SchoolBadge />
-		</div>
+	<div class="form relative">
+		<div class="overflow-scroll h-[65%] md:h-auto absolute bottom-3/12 flex flex-col w-full">
+			<div class="h-32 w-32 <md:hidden self-center mb-4">
+				<SchoolBadge />
+			</div>
+		<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
 		{#if pageIndex === 0}
 			<form on:submit={handleSubmit}>
-				<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Váš souhlas</h1>
-				<p class="text-sspsGray mt-8 block text-center font-light">
+				<h1 class="title mt-8">{pageTexts[0]}</h1>
+				<p class="description mt-8 block text-center">
 					V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš
-					souhlas s jejich zpracováním.
+					souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si můžete přečíst
+					<a href="/bezpecnost" class="text-sspsBlue underline"> zde</a>.
 				</p>
-				<div class="mt-8 w-full">
+				<div class="field">
 					<GdprCheckBox
 						on:change={handleChange}
 						bind:value={$form.gdpr}
@@ -248,13 +354,13 @@
 			</form>
 		{:else if pageIndex === 1}
 			<form on:submit={handleSubmit}>
-				<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Registrace</h1>
-				<p class="text-sspsGray mt-8 block text-center font-light">
-					V rámci usnadnění přijímacího řízení jsme připravili online formulář, který vám pomůže s
+				<h1 class="title mt-8">{pageTexts[1]}</h1>
+				<p class="description mt-8 block text-center">
+					V rámci usnadnění přijímacího řízení jsme připravili online formulář, který Vám pomůže s
 					vyplněním potřebných údajů.
 				</p>
-				<div class="flex w-full items-center justify-center md:flex-col">
-					<span class="mt-8 w-full">
+				<div class="flex flex-col">
+					<span class="field">
 						<NameField
 							error={$typedErrors['candidate']['name']}
 							on:change={handleChange}
@@ -263,7 +369,7 @@
 							placeholder="Jméno a příjmení"
 						/>
 					</span>
-					<span class="mt-8 ml-2 w-full md:ml-0">
+					<span class="field">
 						<EmailField
 							error={$typedErrors['candidate']['email']}
 							on:change={handleChange}
@@ -271,24 +377,24 @@
 							placeholder="E-mail"
 						/>
 					</span>
-				</div>
-				<div class="mt-8 w-full">
-					<TelephoneField
-						error={$typedErrors['candidate']['telephone']}
-						on:change={handleChange}
-						bind:value={$form.candidate.telephone}
-						placeholder="Telefon"
-					/>
+					<span class="field">
+						<TelephoneField
+							error={$typedErrors['candidate']['telephone']}
+							on:change={handleChange}
+							bind:value={$form.candidate.telephone}
+							placeholder="Telefon"
+						/>
+					</span>
 				</div>
 			</form>
 		{:else if pageIndex === 2}
-			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Něco o tobě</h1>
-			<p class="text-sspsGray mt-8 block text-center font-light">
-				Pro registraci je potřeba vyplnit několik údajů o tobě. Tyto údaje budou použity pro
+			<h1 class="title mt-8">{pageTexts[2]}</h1>
+			<p class="description mt-8 block text-center">
+				Pro registraci je potřeba vyplnit několik údajů o Vás. Tyto údaje budou použity pro
 				přijímací řízení. Všechny údaje jsou důležité a bez nich se registrace nezdaří.
 			</p>
-			<div class="flex w-full flex-row md:flex-col">
-				<span class="mt-8 w-full">
+			<div class="flex w-full flex-col">
+				<span class="field">
 					<TextField
 						error={$typedErrors['candidate']['address']}
 						on:change={handleChange}
@@ -298,7 +404,7 @@
 						helperText="Uveďte ulici, č.p., město, PSČ"
 					/>
 				</span>
-				<span class="mt-8 ml-2 w-full md:ml-0">
+				<span class="field">
 					<TextField
 						error={$typedErrors['candidate']['birthplace']}
 						on:change={handleChange}
@@ -315,7 +421,7 @@
 				</span>
 			</div>
 
-			<div class="mt-8 flex w-full items-center">
+			<div class="field flex items-center">
 				<TextField
 					error={$typedErrors['candidate']['birthdate']}
 					on:change={handleChange}
@@ -335,80 +441,76 @@
 				</div>
 			</div>
 		{:else if pageIndex === 3}
-			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Už jen kousek!</h1>
-			<p class="text-sspsGray mt-8 block text-center font-light">
+			<h1 class="title mt-8">{pageTexts[3]}</h1>
+			<p class="description mt-8 block text-center">
 				Sběr dat o zákonném zástupci je klíčový pro získání důležitých kontaktů a informací.
 			</p>
-			<div class="flex w-full flex-col">
-				<span class="mt-8 w-full">
-					<NameField
+		<div class="flex w-full flex-col">
+			<span class="field">
+				<NameField
 						error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
 						on:change={handleChange}
 						bind:valueName={$form.parents[0].name}
 						bind:valueSurname={$form.parents[0].surname}
 						placeholder="Jméno a příjmení zákonného zástupce"
-					/>
-				</span>
-				<div class="mt-8 flex flex-row items-center md:flex-col">
-					<span class="w-full">
-						<EmailField
-							error={$typedErrors['parents'][0]['email']}
-							on:change={handleChange}
-							bind:value={$form.parents[0].email}
-							placeholder="E-mail zákonného zástupce"
-						/>
-					</span>
-					<span class="ml-2 w-full md:ml-0 md:mt-8">
-						<TelephoneField
-							error={$typedErrors['parents'][0]['telephone']}
-							on:change={handleChange}
-							bind:value={$form.parents[0].telephone}
-							placeholder="Telefon zákonného zástupce"
-						/>
-					</span>
-				</div>
-			</div>
+				/>
+			</span>
+			<span class="field">
+				<EmailField
+						error={$typedErrors['parents'][0]['email']}
+					on:change={handleChange}
+						bind:value={$form.parents[0].email}
+						placeholder="E-mail zákonného zástupce"
+				/>
+			</span>
+			<span class="field">
+				<TelephoneField
+						error={$typedErrors['parents'][0]['telephone']}
+					on:change={handleChange}
+						bind:value={$form.parents[0].telephone}
+						placeholder="Telefon zákonného zástupce"
+				/>
+			</span>
+		</div>
 		{:else if pageIndex === 4}
-			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Dobrovolné!</h1>
-			<p class="text-sspsGray mt-8 block text-center font-light">
-				V případě, že máte druhého zákonného zástupce (např. otec a matka), můžete jej zde zadat.
+			<h1 class="title mt-8">{pageTexts[4]}</h1>
+			<p class="description mt-8 block text-center">
+				Zde můžete zadat údaje o druhém zákonném zástupci. Škole tím umožníte lépe komunikovat.
 			</p>
 			<div class="flex w-full flex-col">
-				<span class="mt-8 w-full">
+				<span class="field">
 					<NameField
 						error={$typedErrors['parents'][1]['name'] || $typedErrors['parents'][1]['surname']}
 						on:change={handleChange}
 						bind:valueName={$form.parents[1].name}
 						bind:valueSurname={$form.parents[1].surname}
-						placeholder="Jméno a příjmení zákonného zástupce"
+						placeholder="Jméno a příjmení zákonného zástupce (nepovinné)"
 					/>
 				</span>
-				<div class="mt-8 flex flex-row items-center md:flex-col">
-					<span class="w-full">
-						<EmailField
-							error={$typedErrors['parents'][1]['email']}
-							on:change={handleChange}
-							bind:value={$form.parents[1].email}
-							placeholder="E-mail zákonného zástupce"
-						/>
+				<span class="field">
+					<EmailField
+						error={$typedErrors['parents'][1]['email']}
+						on:change={handleChange}
+						bind:value={$form.parents[1].email}
+						placeholder="E-mail zákonného zástupce (nepovinné)"
+					/>
+				</span>
+				<span class="field">
+					<TelephoneField
+						error={$typedErrors['parents'][1]['telephone']}
+						on:change={handleChange}
+						bind:value={$form.parents[1].telephone}
+						placeholder="Telefon zákonného zástupce (nepovinné)"
+					/>
 					</span>
-					<span class="ml-2 w-full md:ml-0 md:mt-8">
-						<TelephoneField
-							error={$typedErrors['parents'][1]['telephone']}
-							on:change={handleChange}
-							bind:value={$form.parents[1].telephone}
-							placeholder="Telefon zákonného zástupce"
-						/>
-					</span>
-				</div>
 			</div>
 		{:else if pageIndex === 5}
-			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
-			<p class="text-sspsGray mt-8 block text-center font-light">
+			<h1 class="title mt-8">{pageTexts[5]}</h1>
+			<p class="description mt-8 block text-center">
 				Zadejte prosím své občanství, rodné číslo a obor na který se hlásíte.
 			</p>
 			<div class="flex w-full flex-row md:flex-col">
-				<span class="mt-8 w-full">
+				<span class="field">
 					<SelectField
 						error={$typedErrors['candidate']['citizenship']}
 						on:change={handleChange}
@@ -417,11 +519,11 @@
 						options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
 					/>
 				</span>
-				<span class="mt-8 ml-2 w-full md:ml-0">
+				<span class="field ml-2 md:ml-0">
 					<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
 				</span>
 			</div>
-			<div class="mt-8 flex w-full items-center justify-center">
+			<div class="field flex items-center justify-center">
 				{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
 					<IdField
 						error={$typedErrors['candidate']['personalIdNumber']}
@@ -448,53 +550,51 @@
 				</span>
 			</div>
 		{/if}
-
-		<div class="mt-8 w-full">
-			<Submit
-				on:click={async (e) => {
-					await handleSubmit(e);
-					console.log('clicked ' + isPageInvalid());
-					if (isPageInvalid()) return;
-					if (pageIndex === pageCount) {
-					} else {
-						pagesFilled[pageIndex] = true;
-						pageIndex++;
-					}
-					// @ts-ignore
-					errors.set(formInitialValues);
-				}}
-				value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
-			/>
 		</div>
-
-		<div class="mt-8 flex flex-row justify-center">
-			{#each Array(pageCount + 1) as _, i}
-				<button
-					class:dotActive={i === pageIndex}
+		<div class="controls w-full absolute bottom-1/12">
+			<div class="field">
+				<Submit
 					on:click={async (e) => {
-						const progress = pagesFilled.slice(0, i).every((item) => item === true);
-						if (progress) {
-							if (i > pageIndex) {
-								// if next page is clicked, validate current page
-								await handleSubmit(e);
-								if (isPageInvalid()) return;
-								pagesFilled[i] = true;
-								pageIndex++;
-							} else {
+						await handleSubmit(e);
+						if (isPageInvalid(pageIndex)) return;
+						if (pageIndex === pageCount) {
+						} else {
+							pagesFilled[pageIndex] = true;
+							pageIndex++;
+						}
+						// @ts-ignore
+						errors.set(formInitialValues);
+					}}
+					value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
+				/>
+			</div>
+	
+			<div class="mt-4 md:mt-8 flex flex-row justify-center">
+				{#each Array(pageCount + 1) as _, i}
+					<button
+						class:dotActive={i === pageIndex}
+						on:click={async (e) => {
+							pageIndex -= pageIndex === pageCount ? 1 : 0;
+							await handleSubmit(e);
+							pagesFilled = pagesFilled.map((_, i) => !isPageInvalid(i));
+	
+							const progress = pagesFilled.slice(0, i).every((item) => item === true);
+							if (progress) {
 								pageIndex = i;
 							}
-							// @ts-ignore
-							errors.set(formInitialValues);
-						}
-					}}
-					class="dot"
-				/>
-			{/each}
+						}}
+						class="dot"
+					/>
+				{/each}
+			</div>
 		</div>
 	</div>
 </SplitLayout>
 
 <style lang="postcss">
+	.field {
+		@apply mt-4 md:mt-8 w-full;
+	}
 	.form {
 		@apply flex flex-col;
 		@apply mx-auto h-full w-[90%];
@@ -513,4 +613,10 @@
 	.dotActive {
 		@apply bg-sspsBlue;
 	}
+	.description {
+		@apply text-gray-500;
+	}
+	.title {
+		@apply text-sspsBlue text-4xl font-semibold text-center;
+	}
 </style>
diff --git a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
index 9e4e728..c77aa78 100644
--- a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
+++ b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
@@ -130,7 +130,7 @@
 	input {
 		@apply text-sspsBlue text-center font-semibold;
 		@apply transition-colors duration-300;
-		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none;
+		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 md:caret-transparent shadow-lg outline-none;
 	}
 	.separater {
 		@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;