diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 1617c172..9c7f7d48 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -10,50 +10,48 @@
 
 	// 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 showNavIcons = true;
-	export let iconProps = {};
+	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"
 	>
-		{#if showNavIcons}
+		{#if lastpage}
 			<BottomNavElement
 				href={lastpage}
 				description={'Zurück'}
 				Icon={CaretLeftSolid}
 				tooltip={'Zur letzten Seite'}
-				componentProps={iconProps}
 			/>
 		{/if}
 
-		<BottomNavElement
-			href={infopage}
-			description={'Hilfe'}
-			Icon={LightbulbSolid}
-			tooltip={'Zusätzliche Informationen'}
-			componentProps={iconProps}
-		/>
-
-		{#if showNavIcons}
+		{#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'}
-				componentProps={iconProps}
 			/>
 		{/if}
 	</BottomNav>
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
index d923578c..d3891579 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -13,7 +13,7 @@
 		data.unshift({
 			header: 'Neu',
 			summary: 'Ein neues Kind anmelden',
-			href: '/'
+			href: '/childLand/childDataInput'
 		});
 		return data;
 	}
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/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 859daede..f3df328c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,7 +27,7 @@
 		</FunctionalIcon>
 
 		<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
-			<Avatar rounded class="apply-icon-style" />
+			<Avatar rounded class="apply-icon-style" href={'/userLand/userLogin'} />
 		</FunctionalIcon>
 	</NavUl>
 </Navbar>
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/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 />