diff --git a/src/lib/components/AbstractDropdown.svelte b/src/lib/components/AbstractDropdown.svelte
new file mode 100644
index 00000000..32b9b496
--- /dev/null
+++ b/src/lib/components/AbstractDropdown.svelte
@@ -0,0 +1,19 @@
+<script>
+	export class DropdownData {
+		constructor(items, name) {
+			this.items = items;
+			this.name = name;
+			this.selected = false;
+		}
+	}
+
+	export let dropdownData = [
+		new DropdownData([1, 2, 3], 'numbers'),
+		new DropdownData(['a', 'b', 'c'], 'letters'),
+		new DropdownData(['lamb', 'fox', 'lion'], 'animals')
+	];
+</script>
+
+<div>
+	{#each dropdownData as dropdown}{/each}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22bb44db..8ba3f5bb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,17 @@
 <script>
+	import logo_dark from '$lib/assets/mondey_dark.svg';
+	import logo_light from '$lib/assets/mondey_light.svg';
+	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
 	import {
-		P,
 		Banner,
+		DarkMode,
 		Navbar,
 		NavBrand,
+		NavHamburger,
 		NavLi,
 		NavUl,
-		NavHamburger,
-		DarkMode
+		P
 	} from 'flowbite-svelte';
-	import logo_light from '$lib/assets/mondey_light.svg';
-	import logo_dark from '$lib/assets/mondey_dark.svg';
 </script>
 
 <Banner><P>This is a work-in-progress prototype frontend for the MONDEY website</P></Banner>
@@ -29,3 +30,7 @@
 	<DarkMode />
 </Navbar>
 <div class="flex flex-col items-center justify-center"></div>
+
+<div>
+	<AbstractDropdown></AbstractDropdown>
+</div>