diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 3477445f..9c7f7d48 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -10,42 +10,49 @@
 
 	// variables for communication upon hitting the page
 	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
-	export let lastpage = '/';
-	export let nextpage = '/';
-	export let infopage = '/';
+	export let lastpage = null;
+	export let nextpage = null;
+	export let infopage = null;
 </script>
 
 <!-- Top element: basic navigation-->
 
 <!--Page content goes here-->
-<div class="mx-auto max-w-6xl flex-1 overflow-x-auto overflow-y-auto p-4 pb-20">
+<div
+	class="container mx-auto max-w-6xl flex-1 items-center justify-center overflow-x-auto overflow-y-auto p-4 pb-20"
+>
 	<slot></slot>
 </div>
 
 {#if showBottomNavbar}
 	<BottomNav
-		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		class="fixed bottom-0 left-0 right-0 justify-center border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
-		<BottomNavElement
-			href={lastpage}
-			description={'Zurück'}
-			Icon={CaretLeftSolid}
-			tooltip={'Zur letzten Seite'}
-		/>
-
-		<BottomNavElement
-			href={infopage}
-			description={'Hilfe'}
-			Icon={LightbulbSolid}
-			tooltip={'Zusätzliche Informationen'}
-		/>
-
-		<BottomNavElement
-			href={nextpage}
-			description={'Weiter'}
-			Icon={CaretRightSolid}
-			tooltip={'Zur nächsten Seite'}
-		/>
+		{#if lastpage}
+			<BottomNavElement
+				href={lastpage}
+				description={'Zurück'}
+				Icon={CaretLeftSolid}
+				tooltip={'Zur letzten Seite'}
+			/>
+		{/if}
+
+		{#if infopage}
+			<BottomNavElement
+				href={infopage}
+				description={'Hilfe'}
+				Icon={LightbulbSolid}
+				tooltip={'Zusätzliche Informationen'}
+			/>
+		{/if}
+		{#if nextpage}
+			<BottomNavElement
+				href={nextpage}
+				description={'Weiter'}
+				Icon={CaretRightSolid}
+				tooltip={'Zur nächsten Seite'}
+			/>
+		{/if}
 	</BottomNav>
 {/if}
diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
new file mode 100644
index 00000000..8e9ff9ad
--- /dev/null
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -0,0 +1,117 @@
+<script>
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
+	import { Input, Textarea } from 'flowbite-svelte';
+	const data = [
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'text',
+				name: 'name',
+				label: 'Name',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'date',
+				name: 'dateofbirth',
+				label: 'Geburtsdatum',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Ja', 'Nein'],
+				label: 'Frühgeburt',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Männlich', 'Weiblich'],
+				label: 'Geschlecht',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['De', 'US', 'Fr', 'IT', 'Es'],
+				label: 'Nationalität',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+				label: 'Bitte geben sie die erste Sprache an die das Kind gelernt hat',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: [
+					'Kind',
+					'Enkelkind',
+					'Neffe/Nichte',
+					'Pflegekind',
+					'Adoptivkind',
+					'Betreuung extern',
+					'Betreuung zu Hause'
+				],
+				value: '',
+				label: 'Verhältnis des Kindes zu ihnen',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+				value: '',
+				label: 'Entwicklungsauffälligkeiten',
+				required: true
+			}
+		},
+		{
+			itemComponent: Textarea,
+			componentProps: {
+				name: 'Bitte eintragen',
+				label: 'Sonstige Anmerkungen',
+				rows: 5,
+				value: '',
+				required: true
+			}
+		}
+	];
+	const heading = 'Neues Kind registrieren';
+
+	const buttons = [
+		{
+			label: 'Weiter',
+			href: '/'
+		}
+	];
+</script>
+
+<div class="container m-1 mx-auto w-full max-w-md">
+	<AbstractRegistrationForm {heading} props={data} {buttons} />
+</div>
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
new file mode 100644
index 00000000..d3891579
--- /dev/null
+++ b/src/lib/components/Childrenpage.svelte
@@ -0,0 +1,112 @@
+<script context="module">
+	export function convertData(rawdata) {
+		let data = rawdata.map((item) => {
+			return {
+				header: item.name,
+				summary: item.info,
+				image: item.image,
+				href: item.href ? item.href : '/'
+			};
+		});
+
+		// put in new element at the front which adds new child
+		data.unshift({
+			header: 'Neu',
+			summary: 'Ein neues Kind anmelden',
+			href: '/childLand/childDataInput'
+		});
+		return data;
+	}
+
+	// dynamically create the styles for individual gallery tiles based on the data.
+	// The 'Neu' element needs to be styled differently in particular
+	export function createStyle(data) {
+		return data.map((item) => ({
+			card:
+				item.header === 'Neu'
+					? {
+							class:
+								'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 },
+			header:
+				item.header == 'Neu'
+					? {
+							class: 'mb-2 text-2xl font-bold tracking-tight text-white dark:text-white'
+						}
+					: null,
+			summary:
+				item.header == 'Neu'
+					? {
+							class: 'mb-3 flex font-normal leading-tight text-white dark:text-white'
+						}
+					: null,
+			button: null
+		}));
+	}
+</script>
+
+<script>
+	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+	import { Heading } from 'flowbite-svelte';
+	import AbstractContent from './AbstractContent.svelte';
+
+	const rawdata = [
+		{
+			name: 'Anna',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			image: 'child_avatar.png',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'Ben',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'C',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback',
+			image: 'child_avatar.png'
+		},
+		{
+			name: 'Dora',
+			image: '/children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'E',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'F',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		}
+	];
+
+	const data = convertData(rawdata);
+</script>
+
+<AbstractContent showNavIcons={false} iconProps={{ class: 'w-10 h-10' }}>
+	<Heading tag="h1" class="mb-2" color="text-gray-700 dark:text-gray-400">Übersicht</Heading>
+
+	<div class="cols-1 grid gap-y-8">
+		<p class="text-lg text-gray-700 dark:text-gray-400">
+			Wählen sie ein Kind zur Beobachtung aus oder legen melden sie ein neues Kind an.
+		</p>
+		<GalleryDisplay
+			{data}
+			itemComponent={CardDisplay}
+			searchableCol={'header'}
+			componentProps={createStyle(data)}
+		/>
+	</div>
+</AbstractContent>
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
index bedc9d1b..ab26be86 100644
--- a/src/lib/components/DataDisplay/CardDisplay.svelte
+++ b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -1,20 +1,50 @@
 <script>
 	import { Button, Card } from 'flowbite-svelte';
 	import { ArrowRightOutline } from 'flowbite-svelte-icons';
-	export let header = 'header';
-	export let summary = 'summary';
-	export let button = 'button';
-	export let link = '/';
+	export let data = {
+		header: undefined,
+		summary: undefined,
+		button: undefined,
+		href: undefined,
+		image: undefined
+	};
+
+	export let styleProps = {
+		card: {},
+		header: {},
+		summary: {},
+		button: {}
+	};
 </script>
 
-<Card class="m-4 w-full p-6">
-	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-		{header}
-	</h5>
-	<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-		{summary}
-	</p>
-	<Button href={link} class="w-fit"
-		>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-	>
+<Card
+	img={data.image}
+	imgClass="max-md:hidden object-scale-down"
+	href={data.button ? null : data.href}
+	class={data.button
+		? 'm-2 max-w-prose'
+		: 'hover:transition-color m-2 max-w-prose cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600'}
+	{...styleProps.card}
+>
+	{#if data.header}
+		<h5
+			class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white"
+			{...styleProps.header}
+		>
+			{data.header}
+		</h5>
+	{/if}
+	{#if data.summary}
+		<p
+			class="mb-3 flex font-normal leading-tight text-gray-700 dark:text-gray-400"
+			{...styleProps.summary}
+		>
+			{data.summary}
+		</p>
+	{/if}
+	{#if data.button}
+		<Button href={data.href} class="w-fit" {...styleProps.button}
+			>{data.button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
+	{/if}
 </Card>
diff --git a/src/lib/components/DataDisplay/GalleryDisplay.svelte b/src/lib/components/DataDisplay/GalleryDisplay.svelte
new file mode 100644
index 00000000..28a55035
--- /dev/null
+++ b/src/lib/components/DataDisplay/GalleryDisplay.svelte
@@ -0,0 +1,51 @@
+<script context="module">
+	export function filterDataByColumn(data, col, searchTerm) {
+		if (searchTerm === '') {
+			return data;
+		} else {
+			return data.filter((item) => item[col].toLowerCase().includes(searchTerm.toLowerCase()));
+		}
+	}
+</script>
+
+<script>
+	import { Button, Gallery, Heading, Search } from 'flowbite-svelte';
+	import { SearchOutline } from 'flowbite-svelte-icons';
+
+	export let data;
+	export let header = null;
+	export let itemComponent;
+	export let withSearch = true;
+	export let searchableCol = '';
+	export let componentProps;
+
+	// dynamic statements
+	let searchTerm = '';
+	$: filteredItems = filterDataByColumn(data, searchableCol, searchTerm);
+</script>
+
+{#if header !== null}
+	<Heading
+		tag="h1"
+		class="mb-2  tracking-tight "
+		customSize="text-2xl"
+		color="text-gray-900 dark:text-white"
+	>
+		{header}
+	</Heading>
+{/if}
+
+{#if withSearch}
+	<form class="flex gap-2">
+		<Search size="md" placeholder={'Search for child'} bind:value={searchTerm} />
+		<Button class="!p-2.5">
+			<SearchOutline class="h-6 w-6" />
+		</Button>
+	</form>
+{/if}
+
+<Gallery class="grid-cols-1 justify-center gap-8 md:grid-cols-2">
+	{#each filteredItems as item, index}
+		<svelte:component this={itemComponent} data={item} styleProps={componentProps[index]} />
+	{/each}
+</Gallery>
diff --git a/src/lib/components/DataInput/AbstractDataInput.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
index eb5bdd16..725e8bd0 100644
--- a/src/lib/components/DataInput/AbstractDataInput.svelte
+++ b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -1,25 +1,43 @@
 <script>
-	// @ts-nocheck
-	/**
-	 * @type {any[]}
-	 */
-	// @ts-ignore
-	export let data;
-	export let heading;
-	export let itemComponent; // = AbstractDropdownItem;
-	export let description;
+	import { Heading } from 'flowbite-svelte';
+	import NavigationButtons from '../Navigation/NavigationButtons.svelte';
+	export let props = [];
+	export let heading = null;
+	export let description = null;
+	export let buttons = null;
 </script>
 
-<div class="items-center space-x-4 rtl:space-x-reverse">
-	<h1 class="mb-6 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
-	<p class="mb-6 text-lg font-normal leading-tight text-gray-700 dark:text-gray-400">
-		{description}
-		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, iste nisi amet tempora laborum natus
-		dolorum quis consectetur non ab nemo sint deleniti officiis enim a explicabo possimus. Voluptatem
-		repellat autem dicta unde ducimus. Commodi fugiat, error magnam necessitatibus fugit blanditiis cum
-		itaque nostrum quaerat, pariatur aperiam ipsum sed quo!
-	</p>
-	{#each data as data_element}
-		<svelte:component this={itemComponent} data={data_element} />
-	{/each}
+<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
+	{#if heading}
+		<Heading
+			tag="h1"
+			class="mb-6 p-6 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400"
+		>
+			{heading}
+		</Heading>
+	{/if}
+
+	{#if description}
+		<p class="mb-6 text-lg font-normal leading-tight text-gray-700 dark:text-gray-400">
+			{description}
+		</p>
+	{/if}
+
+	<form class="flex flex-col space-y-6">
+		{#each props as prop}
+			{#if prop.componentProps.label}
+				<label
+					for={prop.componentProps.name}
+					class=" font-semibold text-gray-700 dark:text-gray-400"
+				>
+					{prop.componentProps.label}
+				</label>
+			{/if}
+			<svelte:component this={prop.itemComponent} {...prop.componentProps} />
+		{/each}
+	</form>
+
+	{#if buttons}
+		<NavigationButtons {buttons} />
+	{/if}
 </div>
diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
index dc910e5a..031e9f05 100644
--- a/src/lib/components/DataInput/AbstractDropdownItem.svelte
+++ b/src/lib/components/DataInput/AbstractDropdownItem.svelte
@@ -1,21 +1,20 @@
 <script>
-	import { Label, Select, Tooltip } from 'flowbite-svelte';
-	export let data;
-
+	import { Select, Tooltip } from 'flowbite-svelte';
 	// have the data processing here to coerce the input into the format that the component expects
-	// @ts-ignore
-	data.items = data.items.map((item) => ({ name: item, value: item }));
+
+	console.log($$props);
+	const items = $$props.items.map((item) => ({ name: item, value: item }));
 </script>
 
 <div>
-	<div class="flex items-center space-x-2">
-		<Label for="select-lg" class="mb-2 text-lg text-gray-700 dark:text-gray-400">{data.name}</Label>
-		<Tooltip>{data.about}</Tooltip>
-	</div>
 	<Select
 		size="lg"
 		class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400"
-		items={data.items}
-		bind:value={data.selected}
+		{items}
+		placeholder={$$props.name}
+		bind:value={$$props.value}
 	/>
+	{#if $$props.about}
+		<Tooltip>{$$props.about}</Tooltip>
+	{/if}
 </div>
diff --git a/src/lib/components/DataInput/AbstractRegistrationForm.svelte b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
new file mode 100644
index 00000000..58a70097
--- /dev/null
+++ b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { Card, Heading } from 'flowbite-svelte';
+	import AbstractDataInput from './AbstractDataInput.svelte';
+	export let props = [];
+	export let heading = null;
+	export let buttons = null;
+	export let description = null;
+	console.log('props: ', props);
+</script>
+
+<div class="m-1 items-center justify-center pb-6">
+	<Card>
+		{#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}
+		<AbstractDataInput {props} {buttons} {description} />
+	</Card>
+</div>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
index 758d2120..885c0ef1 100644
--- a/src/lib/components/Frontpage.svelte
+++ b/src/lib/components/Frontpage.svelte
@@ -1,6 +1,8 @@
 <script>
-	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
-	import { Gallery } from 'flowbite-svelte';
+	// @ts-nocheck
+
+	import CardDisplay from './DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from './DataDisplay/GalleryDisplay.svelte';
 	export let getStarted = '/firstdropdown';
 
 	export let items = [
@@ -8,68 +10,65 @@
 			header: 'Was ist Mondey?',
 			summary:
 				'Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wozu ist Mondey gut?',
 			summary:
 				'Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Was umfasst Mondey?',
 			summary:
 				'Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wie funktioniert Mondey?',
 			summary:
 				'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wo fange ich an?',
 			summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
-			link: getStarted,
-			buttonName: 'Los geht´s'
+			href: getStarted,
+			button: 'Los geht´s'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		}
 	];
+
+	const props = {};
 </script>
 
-<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
-<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
-	{#each items as item}
-		<CardDisplay
-			header={item.header}
-			summary={item.summary}
-			link={item.link}
-			button={item.buttonName}
-		/>
-	{/each}
-</Gallery>
+<GalleryDisplay
+	withSearch={false}
+	itemComponent={CardDisplay}
+	data={items}
+	componentProps={props}
+/>
diff --git a/src/lib/components/Navigation/BottomNavElement.svelte b/src/lib/components/Navigation/BottomNavElement.svelte
index 9806e1a5..7095d076 100644
--- a/src/lib/components/Navigation/BottomNavElement.svelte
+++ b/src/lib/components/Navigation/BottomNavElement.svelte
@@ -5,6 +5,7 @@
 	export let href;
 	export let Icon;
 	export let tooltip;
+	export let componentProps = {};
 </script>
 
 <BottomNavItem
@@ -12,6 +13,6 @@
 	btnName={description}
 	btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
 >
-	<svelte:component this={Icon} />
+	<svelte:component this={Icon} {...componentProps} />
 	<Tooltip arrow={false}>{tooltip}</Tooltip>
 </BottomNavItem>
diff --git a/src/lib/components/Navigation/FunctionalIcon.svelte b/src/lib/components/Navigation/FunctionalIcon.svelte
index bc30f5f0..6cdb0ab1 100644
--- a/src/lib/components/Navigation/FunctionalIcon.svelte
+++ b/src/lib/components/Navigation/FunctionalIcon.svelte
@@ -10,7 +10,7 @@
 
 <style>
 	:global(.functional-icon-container) {
-		@apply flex items-center space-x-4 rtl:space-x-reverse;
+		@apply flex cursor-pointer items-center space-x-4 rtl:space-x-reverse;
 	}
 
 	:global(.apply-icon-style) {
diff --git a/src/lib/components/Navigation/NavigationButtons.svelte b/src/lib/components/Navigation/NavigationButtons.svelte
new file mode 100644
index 00000000..9a4eff06
--- /dev/null
+++ b/src/lib/components/Navigation/NavigationButtons.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { Button, ButtonGroup } from 'flowbite-svelte';
+
+	export let buttons = [];
+</script>
+
+<ButtonGroup class="mt-6 flex justify-center">
+	{#each buttons as bprops}
+		<Button
+			href={bprops.href}
+			class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+			>{bprops.label}</Button
+		>
+	{/each}
+</ButtonGroup>
diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte
new file mode 100644
index 00000000..08c8a4c1
--- /dev/null
+++ b/src/lib/components/UserDataInput.svelte
@@ -0,0 +1,108 @@
+<script>
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
+	import { Input } 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, startAt = 0, step = 1) {
+		return [...Array(size).keys()].map(
+			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
+		);
+	}
+
+	function numericalRange(size, startAt = 0, step = 1) {
+		return [...Array(size).keys()].map((i) => i * step + startAt);
+	}
+
+	const heading = 'Benutzerdaten eingeben';
+	const description =
+		'Bitte vervollständigen sie ihre Daten um die Registrierung abzuschließen. Wählen sie dazu das jeweils zutreffende aus der jeweiligen Liste aus';
+	const user_props = [
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Geburtsjahr',
+				items: numericalRange(100, 1920),
+				about: 'Wählen sie ihr Geburtsjahr aus',
+				selected: 1988,
+				label: 'Geburtsjahr'
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Geschlecht',
+				items: ['männlich', 'weiblich', 'divers'],
+				about: 'Wählen sie ihr Geschlecht aus',
+				selected: 'weiblich',
+				label: 'Geschlecht'
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Höchster Bildungsabschluss',
+				items: [
+					'kein Schulabschluss',
+					'Hauptschulabschluss',
+					'Realschulabschluss',
+					'Abitur',
+					'Bachelor',
+					'Master',
+					'Promotion'
+				],
+				about: 'Wählen sie ihren höchsten Bildungsabschluss aus',
+				selected: 'Realschulabschluss',
+				label: 'Höchster Bildungsabschluss'
+			}
+		},
+
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Arbeitszeit/Woche',
+				items: intervalRange(13, 0, 5),
+				about:
+					'Wählen sie ihre Arbeitszeit pro Woche aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.',
+				selected: '35-40',
+				label: 'Arbeitszeit/Woche'
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Familieneinkommen/Jahr',
+				items: intervalRange(23, 0, 5000),
+				about:
+					'Wählen sie ihre Jahreseinkommen aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.',
+				selected: '50000-55000',
+				label: 'Familieneinkommen/Jahr'
+			}
+		},
+
+		{
+			itemComponent: Input,
+			componentProps: {
+				name: 'Beruf',
+				type: 'text',
+				about: 'Geben sie ihren Beruf an',
+				placeholder: 'Geben sie ihren Beruf an',
+				label: 'Beruf'
+			}
+		}
+	];
+
+	let props = user_props;
+
+	const buttons = [
+		{
+			label: 'Weiter',
+			href: '/'
+		}
+	];
+</script>
+
+<div class="container m-1 mx-auto w-full max-w-md">
+	<AbstractRegistrationForm {props} {heading} {description} {buttons} />
+</div>
diff --git a/src/lib/components/UserLogin.svelte b/src/lib/components/UserLogin.svelte
new file mode 100644
index 00000000..7ed24281
--- /dev/null
+++ b/src/lib/components/UserLogin.svelte
@@ -0,0 +1,68 @@
+<script>
+	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
+	import { Input } from 'flowbite-svelte';
+	import UserLoginUtil from './UserLoginUtil.svelte';
+
+	export let role = 'user';
+
+	let data = [
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'text',
+				name: 'Benutzerkennung',
+				placeholder: 'Benutzerkennung',
+				label: 'Benutzerkennung',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'password',
+				name: 'Passwort',
+				placeholder: 'Passwort',
+				label: 'Passwort',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: UserLoginUtil,
+			componentProps: {}
+		}
+	];
+
+	$: if (role === 'admin') {
+		data.push({
+			itemComponent: Input,
+			componentProps: {
+				type: 'text',
+				name: 'Projektcode',
+				placeholder: 'Projektcode',
+				label: 'Projektcode',
+				value: '',
+				required: true
+			}
+		});
+	}
+
+	const buttons = [
+		{
+			label: 'Login',
+			href: '/'
+		}
+	];
+</script>
+
+<div class="container m-1 mx-auto w-full max-w-md space-y-6">
+	<AbstractRegistrationForm heading={'Einloggen'} {buttons} props={data} />
+	<span class="text-gray-700 dark:text-gray-400">Not registered?</span>
+	<a
+		href="/userLand/userRegistration"
+		class="text-primary-700 hover:underline dark:text-primary-500"
+	>
+		Create account
+	</a>
+</div>
diff --git a/src/lib/components/UserLoginUtil.svelte b/src/lib/components/UserLoginUtil.svelte
new file mode 100644
index 00000000..54540a8f
--- /dev/null
+++ b/src/lib/components/UserLoginUtil.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<div class="container mx-auto flex w-full max-w-md items-start">
+	<Checkbox>Remember me</Checkbox>
+	<a href="/" class="ms-auto text-primary-700 hover:underline dark:text-primary-500">
+		Lost password?
+	</a>
+</div>
diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte
new file mode 100644
index 00000000..0f01740d
--- /dev/null
+++ b/src/lib/components/UserRegistration.svelte
@@ -0,0 +1,61 @@
+<script>
+	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
+	import { Input } from 'flowbite-svelte';
+
+	const props = [
+		{
+			componentProps: {
+				label: 'Benutzername',
+				type: 'text',
+				placeholder: 'Wählen sie einen beliebigen Benutzernamen',
+				required: true,
+				about: 'Wählen sie einen beliebigen Benutzernamen'
+			},
+			itemComponent: Input
+		},
+		{
+			componentProps: {
+				label: 'E-Mail (optional)',
+				type: 'email',
+				placeholder: 'E-Mail',
+				about:
+					'Geben sie ihre E-mail Adresse an falls sie über aktuelle Forschungsergebnisse informiert werden möchten.'
+			},
+			itemComponent: Input
+		},
+		{
+			componentProps: {
+				label: 'Passwort',
+				type: 'password',
+				placeholder: 'Passwort',
+				required: true,
+				about:
+					'Wählen sie ein Passwort aus. Ihr login key wird aus diesem Passwort und ihrem Benutzernamen generiert.'
+			},
+			itemComponent: Input
+		},
+		{
+			componentProps: {
+				label: 'Passwort wiederholen',
+				type: 'password',
+				placeholder: 'Passwort wiederholen',
+				required: true,
+				about: 'Bestätigen sie ihr Passwort'
+			},
+			itemComponent: Input
+		}
+	];
+
+	const buttons = [
+		{
+			label: 'Weiter',
+			href: '/userLand/userDataInput'
+		}
+	];
+
+	const heading = 'Als neuer Benutzer registrieren';
+</script>
+
+<div class="container m-1 mx-auto w-full max-w-md">
+	<AbstractRegistrationForm {heading} {props} {buttons} />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 169e0f3e..f3df328c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,11 +27,13 @@
 		</FunctionalIcon>
 
 		<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
-			<Avatar rounded class="apply-icon-style" />
+			<Avatar rounded class="apply-icon-style" href={'/userLand/userLogin'} />
 		</FunctionalIcon>
 	</NavUl>
 </Navbar>
 
-<div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
+<div
+	class="mx-[max(10vw,2rem)] my-[max(2vw,2rem)] flex-auto items-center justify-center overflow-y-auto pb-20"
+>
 	<slot></slot>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e4a0ad74..07f065bf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,5 @@
 <script>
-	import AbstractContent from '$lib/components/AbstractContent.svelte';
 	import Frontpage from '$lib/components/Frontpage.svelte';
 </script>
 
-<AbstractContent showBottomNavbar={false}>
-	<Frontpage getStarted={'/firstdropdown'} />
-</AbstractContent>
+<Frontpage getStarted={'/childrengallery'} />
diff --git a/src/routes/childLand/childDataInput/+page.svelte b/src/routes/childLand/childDataInput/+page.svelte
new file mode 100644
index 00000000..4ef2e1c7
--- /dev/null
+++ b/src/routes/childLand/childDataInput/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
+</script>
+
+<ChildrenRegistration />
diff --git a/src/routes/childrengallery/+page.svelte b/src/routes/childrengallery/+page.svelte
new file mode 100644
index 00000000..7d6df8f5
--- /dev/null
+++ b/src/routes/childrengallery/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Childrenpage from '$lib/components/Childrenpage.svelte';
+</script>
+
+<Childrenpage />
diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
index f52d9f91..199050d3 100644
--- a/src/routes/firstdropdown/+page.svelte
+++ b/src/routes/firstdropdown/+page.svelte
@@ -8,23 +8,35 @@
 	const description = 'This is a dummy dropdown page to test the dropdown component';
 	const data_to_display = [
 		{
-			name: 'standing up',
-			items: letteroptions,
-			about:
-				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'standing up',
+			componentProps: {
+				name: 'standing up',
+				items: letteroptions,
+				about:
+					'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+				selected: false
+			}
 		},
 		{
-			name: 'gripping a pen the right way',
-			items: defaultOptions,
-			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'gripping a pen the right way',
+			componentProps: {
+				name: 'gripping a pen the right way',
+				items: defaultOptions,
+				about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+				selected: false
+			}
 		},
 		{
-			name: 'talking in full sentences',
-			items: letteroptions,
-			about: 'How well articulated is the child in its speech and how well can it express itself',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'talking in full sentences',
+			componentProps: {
+				name: 'talking in full sentences',
+				items: letteroptions,
+				about: 'How well articulated is the child in its speech and how well can it express itself',
+				selected: false
+			}
 		}
 	];
 
@@ -32,10 +44,5 @@
 </script>
 
 <AbstractContent showBottomNavbar={true} lastpage={'/'} nextpage={'/nextdropdown'} infopage="/info">
-	<AbstractDataInput
-		data={data_to_display}
-		{heading}
-		itemComponent={AbstractDropdownItem}
-		{description}
-	/>
+	<AbstractDataInput {heading} {description} props={data_to_display} />
 </AbstractContent>
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
index c7087f57..75463669 100644
--- a/src/routes/nextdropdown/+page.svelte
+++ b/src/routes/nextdropdown/+page.svelte
@@ -7,30 +7,46 @@
 	const description = 'This is the second data selection page to test the dropdown component';
 	const dropdownData = [
 		{
-			name: 'standing up',
-			items: defaultOptions,
-			about:
-				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'standing up',
+			componentProps: {
+				name: 'standing up',
+				items: defaultOptions,
+				about:
+					'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+				selected: false
+			}
 		},
 		{
-			name: 'making a mess',
-			items: defaultOptions,
-			about:
-				'This describes how efficiently the child can distribute toys in every single corner of every single room in the house',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'making a mess',
+			componentProps: {
+				name: 'making a mess',
+				items: defaultOptions,
+				about:
+					'This describes how efficiently the child can distribute toys in every single corner of every single room in the house',
+				selected: false
+			}
 		},
 		{
-			name: 'gripping a pen the right way',
-			items: defaultOptions,
-			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'gripping a pen the right way',
+			componentProps: {
+				name: 'gripping a pen the right way',
+				items: defaultOptions,
+				about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+				selected: false
+			}
 		},
 		{
-			name: 'talking in full sentences',
-			items: defaultOptions,
-			about: 'How well articulated is the child in its speech and how well can it express itself',
-			selected: false
+			itemComponent: AbstractDropdownItem,
+			label: 'talking in full sentences',
+			componentProps: {
+				name: 'talking in full sentences',
+				items: defaultOptions,
+				about: 'How well articulated is the child in its speech and how well can it express itself',
+				selected: false
+			}
 		}
 	];
 
@@ -43,10 +59,5 @@
 	nextpage={'/surveyfeedback'}
 	infopage="/info"
 >
-	<AbstractDataInput
-		data={dropdownData}
-		{heading}
-		itemComponent={AbstractDropdownItem}
-		{description}
-	/>
+	<AbstractDataInput props={dropdownData} {heading} {description} />
 </AbstractContent>
diff --git a/src/routes/userLand/userDataInput/+page.svelte b/src/routes/userLand/userDataInput/+page.svelte
new file mode 100644
index 00000000..e13a3215
--- /dev/null
+++ b/src/routes/userLand/userDataInput/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import UserDataInput from '$lib/components/UserDataInput.svelte';
+</script>
+
+<UserDataInput />
diff --git a/src/routes/userLand/userLogin/+page.svelte b/src/routes/userLand/userLogin/+page.svelte
new file mode 100644
index 00000000..e14b2ca2
--- /dev/null
+++ b/src/routes/userLand/userLogin/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import UserLogin from '$lib/components/UserLogin.svelte';
+</script>
+
+<UserLogin />
diff --git a/src/routes/userLand/userRegistration/+page.svelte b/src/routes/userLand/userRegistration/+page.svelte
new file mode 100644
index 00000000..3aa2cd14
--- /dev/null
+++ b/src/routes/userLand/userRegistration/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import UserRegistration from '$lib/components/UserRegistration.svelte';
+</script>
+
+<UserRegistration />
diff --git a/static/child_avatar.png b/static/child_avatar.png
new file mode 100644
index 00000000..c4778eb1
Binary files /dev/null and b/static/child_avatar.png differ
diff --git a/static/children.png b/static/children.png
new file mode 100644
index 00000000..200735ad
Binary files /dev/null and b/static/children.png differ