diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index cb4c6824..1b87d617 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -3,6 +3,7 @@
 	import { base } from '$app/paths';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
+	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 
 	import {
 		children,
@@ -14,161 +15,10 @@
 
 	import { hash, users } from '$lib/stores/userStore';
 
-	import {
-		Button,
-		Card,
-		Fileupload,
-		Heading,
-		Input,
-		MultiSelect,
-		Select,
-		Textarea
-	} from 'flowbite-svelte';
+	import { Card, Heading } from 'flowbite-svelte';
 
 	import { onDestroy, onMount } from 'svelte';
 
-	// this can be supplied from the database
-	export let data = [
-		{
-			component: Input,
-			value: null,
-			props: {
-				type: 'text',
-
-				label: 'Name',
-				placeholder: 'Bitte eintragen',
-				key: 'name',
-				required: true
-			}
-		},
-		{
-			component: Input,
-			value: null,
-			props: {
-				type: 'date',
-
-				label: 'Geburtsdatum',
-				placeholder: 'Bitte eintragen',
-				key: 'dateOfBirth',
-				required: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Frühgeburt',
-				items: ['nein', '0-2 Monate', '2-4 Monate', '4-6 Monate'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'bornEarly',
-				required: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Geschlecht',
-				items: ['männlich', 'weiblich'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'gender',
-				required: true
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Nationalität',
-				items: ['Andere', 'Deutschland', 'Grossbritannien', 'USA', 'China'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'nationality',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Sprache',
-				items: ['Andere', 'Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
-					(v) => {
-						return { name: String(v), value: v };
-					}
-				),
-				placeholder: 'Bitte auswählen',
-				key: 'language',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Verhältnis zum Kind',
-				key: 'relationship',
-				items: [
-					'Anderes',
-					'Kind',
-					'Enkelkind',
-					'Neffe/Nichte',
-					'Pflegekind',
-					'Adoptivkind',
-					'Betreuung extern',
-					'Betreuung zu Hause'
-				].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				required: true,
-				textTrigger: 'Anderes'
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Entwicklungsauffälligkeiten',
-				items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler', 'Andere'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'developmentalIssues',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Textarea,
-			value: null,
-			props: {
-				label: 'Anmerkungen',
-				placeholder: 'Weitere Bemerkungen',
-				key: 'remarks',
-				required: false
-			}
-		},
-		{
-			component: Fileupload,
-			value: null,
-			props: {
-				label: 'Foto',
-				placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
-				key: 'image',
-				required: false,
-				accept: ['png', 'jpg', 'svg', 'webp']
-			}
-		}
-	];
-
 	// event handlers and verification function
 	export async function submitData() {
 		const verified = await verifyInput();
@@ -182,7 +32,6 @@
 				current: await createDummyCurrent()
 			});
 
-			console.log(childData);
 			await children.save();
 			await goto(nextpage as string);
 		} else {
@@ -195,6 +44,11 @@
 
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
+
+			if (curr.additionalValue !== null) {
+				dict[curr.props.key + '_additional'] = curr.additionalValue;
+			}
+
 			required[curr.props.key] = curr.props.required;
 			return dict;
 		}, {});
@@ -232,6 +86,8 @@
 	let unsubscribe: unknown = children.subscribe((childrenlist) => {
 		children.save();
 	});
+	// this can be supplied from the database
+	export let data: any[];
 
 	// rerender page if missing values or showAlert changes
 	$: missingValues = [];
@@ -256,6 +112,13 @@
 		await children.save();
 		await (unsubscribe as Function)();
 	});
+
+	const buttons = [
+		{
+			label: 'Abschließen',
+			onclick: submitData
+		}
+	];
 </script>
 
 <!-- Show big alert message when something is missing -->
@@ -287,55 +150,33 @@
 {/if}
 
 <!-- The actual content -->
-<Card class="container m-1 mx-auto w-full max-w-xl">
-	{#if heading}
-		<Heading
-			tag="h3"
-			class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
-			>{heading}</Heading
-		>
-	{/if}
-
-	<form class="m-1 mx-auto w-full flex-col space-y-6">
-		{#each data as element, i}
-			{#if element.props.key === 'image'}
+<div class="container m-1 mx-auto w-full max-w-xl">
+	<Card class="container m-1 mx-auto w-full max-w-xl">
+		{#if heading}
+			<Heading
+				tag="h3"
+				class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+				>{heading}</Heading
+			>
+		{/if}
+
+		<form class="m-1 mx-auto w-full flex-col space-y-6">
+			{#each data as element}
 				<DataInput
 					component={element.component}
-					bind:this={refs[i]}
-					properties={element.props}
+					bind:value={element.value}
+					bind:additionalInput={element.additionalValue}
 					label={element.props.label}
-					eventHandlers={{
-						...element?.eventHandlers,
-						...{
-							'on:change': (event) => {
-								if (!(event.target === null)) {
-									const image = event.target.files[0];
-									// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
-									let reader = new FileReader();
-									reader.readAsDataURL(image);
-									reader.onload = (e) => {
-										element.value = e.target.result;
-									};
-								}
-							}
-						}
-					}}
-				/>
-			{:else}
-				<DataInput
-					component={element.component}
 					properties={element.props}
-					label={element.props.label}
 					textTrigger={element.props.textTrigger}
-					bind:value={element.value}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
-			{/if}
-		{/each}
-
-		<Button
-			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
-			on:click={submitData}
-			>{'Kind hinzufügen'}
-		</Button>
-	</form>
-</Card>
+			{/each}
+		</form>
+		<NavigationButtons {buttons} />
+	</Card>
+</div>
diff --git a/frontend/src/lib/components/Childrenpage.svelte b/frontend/src/lib/components/Childrenpage.svelte
index f2e523e5..ca34b83b 100644
--- a/frontend/src/lib/components/Childrenpage.svelte
+++ b/frontend/src/lib/components/Childrenpage.svelte
@@ -31,7 +31,7 @@
 								'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
 							horizontal: false
 						}
-					: { horizontal: item.image ? true : false },
+					: { horizontal: false },
 			header:
 				item.header == 'Neu'
 					? {
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 9ff2a9c5..386825df 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -7,12 +7,12 @@
 
 	// variables
 	export let component: any;
-	export let value: any = null;
-	export let label: string | null = null;
+	export let value: any;
+	export let label: string = null;
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	let additionalInput: any = value;
+	export let additionalInput: any = null;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -26,51 +26,28 @@
 		return true;
 	};
 
-	// internal functionality for managing additional information given via textfield
-	function replaceValue(arrayvalue: any[], target: any, element: any): void {
-		for (let i = 0; i < arrayvalue.length; i++) {
-			if (arrayvalue[i] === target && element) {
-				arrayvalue[i] = element;
-			}
-		}
-	}
-
-	function updateValue(toupdate: any, additionalInput: string): any {
-		if (showTextField) {
-			if (toupdate instanceof Array) {
-				replaceValue(toupdate, textTrigger, additionalInput);
-				return toupdate;
-			} else {
-				return additionalInput as typeof value;
-			}
+	// functionality for showing the textfield when the trigger is selected
+	function checkShowTextfield(v: any): boolean {
+		if (v instanceof Array) {
+			return v.includes(textTrigger);
 		} else {
-			return toupdate;
+			return v === textTrigger;
 		}
 	}
 
-	// functionality for showing the textfield when the trigger is selected
-	function checkShowTextfield(v: any, trigger: string) {
-		if (v instanceof Array) {
-			return v.includes(trigger);
-		} else {
-			return v === trigger;
+	function evalValid(v: any): boolean {
+		let result = true;
+		if (Array.isArray(v)) {
+			result = v.length > 0;
 		}
+
+		return result && value !== undefined && value !== null && value !== '' && checkValid();
 	}
 
 	// reactive statement that makes sure 'valid' updates the page
-	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
+	$: valid = evalValid(value);
 	$: highlight = !valid && properties.required === true;
-	$: showTextField = showTextField || checkShowTextfield(value, textTrigger);
-	// Flag to track initialization
-	let initialized = false;
-
-	// Reactive statement to initialize additionalInput based on value
-	$: {
-		if (!initialized && value !== null) {
-			additionalInput = value;
-			initialized = true;
-		}
-	}
+	$: showTextField = checkShowTextfield(value);
 </script>
 
 {#if label}
@@ -81,7 +58,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-2 border-primary-600 dark:border-primary-600' + componentClass
+			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
@@ -91,11 +68,6 @@
 	/>
 
 	{#if showTextField === true}
-		<Textarea
-			bind:value={additionalInput}
-			on:blur={() => {
-				value = updateValue(value, additionalInput);
-			}}
-		/>
+		<Textarea bind:value={additionalInput} />
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/DataInput/Fileupload.svelte b/frontend/src/lib/components/DataInput/Fileupload.svelte
new file mode 100644
index 00000000..4d5a3fa6
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/Fileupload.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Fileupload } from 'flowbite-svelte';
+
+	export let value;
+</script>
+
+<Fileupload
+	class={$$props.class}
+	accept={$$props.accept}
+	on:change={(event) => {
+		if (!(event.target === null)) {
+			const image = event.target.files[0];
+			// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
+			let reader = new FileReader();
+			reader.readAsDataURL(image);
+			reader.onload = (e) => {
+				value = e.target.result;
+			};
+		}
+	}}
+/>
diff --git a/frontend/src/lib/components/DataInput/RadioList.svelte b/frontend/src/lib/components/DataInput/RadioList.svelte
new file mode 100644
index 00000000..615f5095
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/RadioList.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Radio, RadioButton } from 'flowbite-svelte';
+
+	export let value: any;
+	let windowWidth = 1920;
+	$: smallScreen = windowWidth < 800;
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+<div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+	{#if smallScreen}
+		{#each $$props.items as item, index}
+			<RadioButton class="mx-2" bind:group={value} value={item.value}>{item.label}</RadioButton>
+		{/each}
+	{:else}
+		{#each $$props.items as item, index}
+			<Radio class="mx-2" bind:group={value} value={item.value}>{item.label}</Radio>
+		{/each}
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index cec5aff4..f09f978a 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -5,36 +5,9 @@
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 	import { users, type UserData } from '$lib/stores/userStore';
-	import { Card, Heading, Input, Select } from 'flowbite-svelte';
-	import { onDestroy, onMount } from 'svelte';
-
-	// this stuff here will become backend calls in the end because that is where the data this page will be filled with
-	// will come from. Hence, they are not put into a separate library or anything
-	function intervalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
-		let values = [...Array(size).keys()].map(
-			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
-		);
-
-		if (asItems) {
-			return values.map((v) => {
-				return { name: String(v), value: v };
-			});
-		} else {
-			return values;
-		}
-	}
-
-	function numericalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
-		let values = [...Array(size).keys()].map((i) => i * step + startAt);
+	import { Card, Heading } from 'flowbite-svelte';
+	import { afterUpdate, onDestroy, onMount } from 'svelte';
 
-		if (asItems) {
-			return values.map((v) => {
-				return { name: String(v), value: v };
-			});
-		} else {
-			return values;
-		}
-	}
 	function validate(): boolean {
 		missingValues = data.map((element) => element.value === '' || element.value === null);
 		return missingValues.every((v) => v === false);
@@ -44,7 +17,9 @@
 		const valid = validate();
 		if (valid) {
 			for (let i = 0; i < data.length; ++i) {
-				(userData as UserData)[data[i].props.name] = data[i].value;
+				(userData as UserData)[data[i].props.name] = {};
+				(userData as UserData)[data[i].props.name]['value'] = data[i].value;
+				(userData as UserData)[data[i].props.name]['additionalValue'] = data[i].additionalValue;
 			}
 			if (userID) {
 				await users.update(userID, userData);
@@ -66,7 +41,6 @@
 
 		// initialize data values to stuff that is there already if
 		// data has been supplied already for that user.
-
 		const keys = [
 			'Geburtsjahr',
 			'Geschlecht',
@@ -78,7 +52,14 @@
 
 		for (let i = 0; i < data.length; ++i) {
 			if (userData[keys[i]]) {
-				data[i]['value'] = userData[keys[i]];
+				data[i]['value'] = userData[keys[i]].value;
+				data[i]['additionalValue'] = userData[keys[i]].additionalValue;
+
+				if (data[i].props['selected']) {
+					data[i].props['selected'] = data[i].props.items.map((e) => {
+						return e.value === userData[keys[i]].value;
+					});
+				}
 			}
 		}
 
@@ -86,97 +67,15 @@
 	});
 
 	onDestroy(async () => {
-		await users.save();
+		users.save();
 	});
 
-	// this can, but does not have to, come from a database later.
-	const data = [
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Geburtsjahr',
-				items: numericalRange(100, 1960, 1, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Geburtsjahr',
-				required: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Geschlecht',
-				items: ['männlich', 'weiblich', 'divers', 'Andere'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				label: 'Geschlecht',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Höchster Bildungsabschluss',
-				items: [
-					'kein Schulabschluss',
-					'Hauptschulabschluss',
-					'Realschulabschluss',
-					'Abitur',
-					'Bachelor',
-					'Master',
-					'Promotion',
-					'Anderer'
-				].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				required: true,
-				label: 'Höchster Bildungsabschluss',
-				textTrigger: 'Anderer'
-			}
-		},
-
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Arbeitszeit/Woche',
-				items: intervalRange(13, 0, 5, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Arbeitszeit/Woche',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Familieneinkommen/Jahr',
-				items: intervalRange(23, 0, 5000, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Familieneinkommen/Jahr',
-				required: true,
-				textTrigger: 'Anderes'
-			}
-		},
+	afterUpdate(async () => {
+		users.save();
+	});
 
-		{
-			component: Input,
-			value: null,
-			props: {
-				name: 'Beruf',
-				type: 'text',
-				placeholder: 'Geben sie ihren Beruf an',
-				label: 'Beruf',
-				required: true
-			}
-		}
-	];
+	// this can, but does not have to, come from a database later.
+	export let data: any[];
 
 	// validation / data acceptance
 
@@ -225,11 +124,15 @@
 				<DataInput
 					component={element.component}
 					bind:value={element.value}
+					bind:additionalInput={element.additionalValue}
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
-					showTextField={element.value !== null &&
-						element.props.items?.some((item) => item.value === element.value) === false}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
 			{/each}
 		</form>
diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index 5967c7b4..7c2f82e0 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -40,22 +40,7 @@
 	}
 
 	// data and variables
-	let data = [
-		{
-			type: 'text',
-			name: 'Benutzerkennung',
-			placeholder: 'Benutzerkennung',
-			label: 'Benutzerkennung',
-			required: true
-		},
-		{
-			type: 'password',
-			name: 'Passwort',
-			placeholder: 'Passwort',
-			label: 'Passwort',
-			required: true
-		}
-	];
+	export let data;
 
 	const buttons = [
 		{
@@ -138,6 +123,11 @@
 						bind:value={credentials[i]}
 						properties={element}
 						label={element.label}
+						eventHandlers={{
+							'on:change': element.onchange,
+							'on:blur': element.onblur,
+							'on:click': element.onclick
+						}}
 					/>
 				{/each}
 			</form>
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index f23f297c..fe05b5d8 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -22,7 +22,8 @@
 		const mailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 		missingValues[0] = inputValues[0] === null || inputValues[0] === ''; // username
 		missingValues[1] = inputValues[1] === null || mailRegex.test(inputValues[1]) === false; // email
-		missingValues[2] = inputValues[2] === null || inputValues[2] === ''; // password
+		missingValues[2] =
+			inputValues[2] === null || inputValues[2] === '' || inputValues[2] !== inputValues[3]; // password
 		missingValues[3] = inputValues[3] === null || missingValues[2];
 	}
 
@@ -35,15 +36,10 @@
 			})
 		) {
 			// README: userID is username+password just as a placeholder
-			const userID = inputValues[0] + passwd;
+			const h = await hash(inputValues[2]);
+			const userID = inputValues[0] + h;
 			let userAddSuccess: boolean = true;
 
-			if (passwd !== passwdTest) {
-				userAddSuccess = false;
-				alertMessage = 'Passwörter sind nicht identisch';
-				showAlert = true;
-			}
-
 			let userdata = {
 				name: inputValues[0],
 				id: userID, // README: without the backend, userID is emulated as username + password
@@ -106,54 +102,7 @@
 		}
 	}
 
-	const data = [
-		{
-			label: 'Benutzername',
-			name: 'Benutzername',
-			type: 'text',
-			placeholder: 'Wählen sie einen beliebigen Benutzernamen',
-			required: true,
-			checkValid: () => {
-				return true;
-			}
-		},
-		{
-			label: 'E-Mail',
-			name: 'E-Mail',
-			type: 'email',
-			placeholder: 'E-Mail',
-			required: true,
-			checkValid: () => {
-				return true;
-			}
-		},
-		{
-			label: 'Passwort',
-			name: 'Passwort',
-			type: 'password',
-			placeholder: 'Passwort',
-			required: true,
-			onBlur: async (event: Event) => {
-				passwd = await hash(event.srcElement.value);
-			},
-			checkValid: () => {
-				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
-			}
-		},
-		{
-			label: 'Passwort wiederholen',
-			name: 'Passwort wiederholen',
-			type: 'password',
-			placeholder: 'Passwort wiederholen',
-			required: true,
-			onBlur: async (event: Event) => {
-				passwdTest = await hash(event.srcElement.value);
-			},
-			checkValid: () => {
-				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
-			}
-		}
-	];
+	export let data;
 
 	const heading = 'Als neuer Benutzer registrieren';
 	let showAlert: boolean = false;
@@ -201,7 +150,11 @@
 					component={Input}
 					properties={element}
 					bind:value={inputValues[i]}
-					eventHandlers={{ 'on:blur': element.onBlur }}
+					eventHandlers={{
+						'on:change': element.onChange,
+						'on:blur': element.onBlur,
+						'on:click': element.onClick
+					}}
 					checkValid={element.checkValid}
 				/>
 			{/each}
diff --git a/frontend/src/lib/stores/userStore.ts b/frontend/src/lib/stores/userStore.ts
index dce88d80..827193e2 100644
--- a/frontend/src/lib/stores/userStore.ts
+++ b/frontend/src/lib/stores/userStore.ts
@@ -75,7 +75,6 @@ async function createDummyUser(name: string = 'dummyUser') {
 }
 
 async function hash(input: string): string {
-	console.log('hash input');
 	const encoder = new TextEncoder();
 	const data = encoder.encode(input);
 	const hashArray = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', data)));
diff --git a/frontend/src/routes/childLand/childDataInput/+page.svelte b/frontend/src/routes/childLand/childDataInput/+page.svelte
index 4ef2e1c7..bbf9fbf1 100644
--- a/frontend/src/routes/childLand/childDataInput/+page.svelte
+++ b/frontend/src/routes/childLand/childDataInput/+page.svelte
@@ -1,5 +1,161 @@
 <script>
 	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
+	import Fileupload from '$lib/components/DataInput/Fileupload.svelte';
+	import RadioList from '$lib/components/DataInput/RadioList.svelte';
+
+	import { Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
+
+	const data = [
+		{
+			component: Input,
+			value: null,
+			props: {
+				type: 'text',
+
+				label: 'Name',
+				placeholder: 'Bitte eintragen',
+				key: 'name',
+				required: true
+			}
+		},
+		{
+			component: Input,
+			value: null,
+			props: {
+				type: 'date',
+
+				label: 'Geburtsdatum',
+				placeholder: 'Bitte eintragen',
+				key: 'dateOfBirth',
+				required: true
+			}
+		},
+		{
+			component: RadioList,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Frühgeburt',
+				items: ['nein', '0-2 Monate', '2-4 Monate', '4-6 Monate', 'Anderes'].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'bornEarly',
+				required: true,
+				unique: true,
+				textTrigger: 'Anderes',
+				selected: [false, false, false, false]
+			}
+		},
+		{
+			component: RadioList,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Geschlecht',
+				items: ['männlich', 'weiblich'].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'gender',
+				required: true,
+				unique: true,
+				selected: [false, false]
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Nationalität',
+				items: ['Andere', 'Deutschland', 'Grossbritannien', 'USA', 'China'].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'nationality',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Sprache',
+				items: ['Andere', 'Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
+					(v) => {
+						return { name: String(v), value: v };
+					}
+				),
+				placeholder: 'Bitte auswählen',
+				key: 'language',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Verhältnis zum Kind',
+				key: 'relationship',
+				items: [
+					'Anderes',
+					'Kind',
+					'Enkelkind',
+					'Neffe/Nichte',
+					'Pflegekind',
+					'Adoptivkind',
+					'Betreuung extern',
+					'Betreuung zu Hause'
+				].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				required: true,
+				textTrigger: 'Anderes'
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Entwicklungsauffälligkeiten',
+				items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler', 'Andere'].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'developmentalIssues',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Textarea,
+			value: null,
+			props: {
+				label: 'Anmerkungen',
+				placeholder: 'Weitere Bemerkungen',
+				key: 'remarks',
+				required: false
+			}
+		},
+		{
+			component: Fileupload,
+			value: null,
+			props: {
+				label: 'Foto',
+				placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
+				key: 'image',
+				required: false,
+				accept: ['png', 'jpg', 'svg', 'webp']
+			}
+		}
+	];
 </script>
 
-<ChildrenRegistration />
+<ChildrenRegistration {data} />
diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index e13a3215..346bc75d 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -1,5 +1,127 @@
-<script>
+<script lang="ts">
+	import RadioList from '$lib/components/DataInput/RadioList.svelte';
+
 	import UserDataInput from '$lib/components/UserDataInput.svelte';
+	import { Input, Select } from 'flowbite-svelte';
+
+	// this stuff here will become backend calls in the end because that is where the data this page will be filled with
+	// will come from. Hence, they are not put into a separate library or anything
+	function intervalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
+		let values = [...Array(size).keys()].map(
+			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
+		);
+
+		if (asItems) {
+			return values.map((v) => {
+				return { name: String(v), value: v };
+			});
+		} else {
+			return values;
+		}
+	}
+
+	function numericalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
+		let values = [...Array(size).keys()].map((i) => i * step + startAt);
+
+		if (asItems) {
+			return values.map((v) => {
+				return { name: String(v), value: v };
+			});
+		} else {
+			return values;
+		}
+	}
+	const data = [
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Geburtsjahr',
+				items: numericalRange(60, 1960, 1, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Geburtsjahr',
+				required: true
+			}
+		},
+		{
+			component: RadioList,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Geschlecht',
+				items: ['männlich', 'weiblich', 'divers', 'Anderes'].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				label: 'Geschlecht',
+				required: true,
+				textTrigger: 'Anderes',
+				selected: false
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Höchster Bildungsabschluss',
+				items: [
+					'kein Schulabschluss',
+					'Hauptschulabschluss',
+					'Realschulabschluss',
+					'Abitur',
+					'Bachelor',
+					'Master',
+					'Promotion',
+					'Anderer'
+				].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				required: true,
+				label: 'Höchster Bildungsabschluss',
+				textTrigger: 'Anderer'
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Arbeitszeit/Woche',
+				items: intervalRange(13, 0, 5, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Arbeitszeit/Woche',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Familieneinkommen/Jahr',
+				items: intervalRange(23, 0, 5000, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Familieneinkommen/Jahr',
+				required: true,
+				textTrigger: 'Anderes'
+			}
+		},
+		{
+			component: Input,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Beruf',
+				type: 'text',
+				placeholder: 'Geben sie ihren Beruf an',
+				label: 'Beruf',
+				required: true
+			}
+		}
+	];
 </script>
 
-<UserDataInput />
+<UserDataInput {data} />
diff --git a/frontend/src/routes/userLand/userLogin/+page.svelte b/frontend/src/routes/userLand/userLogin/+page.svelte
index e14b2ca2..faa44cbc 100644
--- a/frontend/src/routes/userLand/userLogin/+page.svelte
+++ b/frontend/src/routes/userLand/userLogin/+page.svelte
@@ -1,5 +1,22 @@
 <script>
 	import UserLogin from '$lib/components/UserLogin.svelte';
+
+	const data = [
+		{
+			type: 'text',
+			name: 'Benutzerkennung',
+			placeholder: 'Benutzerkennung',
+			label: 'Benutzerkennung',
+			required: true
+		},
+		{
+			type: 'password',
+			name: 'Passwort',
+			placeholder: 'Passwort',
+			label: 'Passwort',
+			required: true
+		}
+	];
 </script>
 
-<UserLogin />
+<UserLogin {data} />
diff --git a/frontend/src/routes/userLand/userRegistration/+page.svelte b/frontend/src/routes/userLand/userRegistration/+page.svelte
index 3aa2cd14..d78aef9f 100644
--- a/frontend/src/routes/userLand/userRegistration/+page.svelte
+++ b/frontend/src/routes/userLand/userRegistration/+page.svelte
@@ -1,5 +1,57 @@
-<script>
+<script lang="ts">
 	import UserRegistration from '$lib/components/UserRegistration.svelte';
+	import { hash } from '$lib/stores/userStore';
+	let passwd: string;
+	let passwdTest: string;
+
+	const data = [
+		{
+			label: 'Benutzername',
+			name: 'Benutzername',
+			type: 'text',
+			placeholder: 'Wählen sie einen beliebigen Benutzernamen',
+			required: true,
+			checkValid: () => {
+				return true;
+			}
+		},
+		{
+			label: 'E-Mail',
+			name: 'E-Mail',
+			type: 'email',
+			placeholder: 'E-Mail',
+			required: true,
+			checkValid: () => {
+				return true;
+			}
+		},
+		{
+			label: 'Passwort',
+			name: 'Passwort',
+			type: 'password',
+			placeholder: 'Passwort',
+			required: true,
+			onBlur: async (event: Event) => {
+				passwd = await hash(event.srcElement.value);
+			},
+			checkValid: () => {
+				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
+			}
+		},
+		{
+			label: 'Passwort wiederholen',
+			name: 'Passwort wiederholen',
+			type: 'password',
+			placeholder: 'Passwort wiederholen',
+			required: true,
+			onBlur: async (event: Event) => {
+				passwdTest = await hash(event.srcElement.value);
+			},
+			checkValid: () => {
+				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
+			}
+		}
+	];
 </script>
 
-<UserRegistration />
+<UserRegistration {data} />