diff --git a/src/lib/components/AbstractDropdown.svelte b/src/lib/components/AbstractDropdown.svelte
index 32b9b496..aa7f7799 100644
--- a/src/lib/components/AbstractDropdown.svelte
+++ b/src/lib/components/AbstractDropdown.svelte
@@ -1,4 +1,7 @@
 <script>
+	import { Button, Dropdown, DropdownDivider, DropdownItem } from 'flowbite-svelte';
+	import { ChevronDownOutline } from 'flowbite-svelte-icons';
+
 	export class DropdownData {
 		constructor(items, name) {
 			this.items = items;
@@ -7,13 +10,37 @@
 		}
 	}
 
+	export let header = 'dummy dropdown data';
+	export const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
+
 	export let dropdownData = [
-		new DropdownData([1, 2, 3], 'numbers'),
-		new DropdownData(['a', 'b', 'c'], 'letters'),
-		new DropdownData(['lamb', 'fox', 'lion'], 'animals')
+		new DropdownData(defaultOptions, 'standing up'),
+		new DropdownData(defaultOptions, 'making a mess'),
+		new DropdownData(defaultOptions, 'gripping a pen the right way')
 	];
+
+	const style = {
+        basic: {}, 
+		buttonstyle: {
+			button: ,
+			icon: ''
+		},
+		dropdownstyle: {
+			item: '',
+			dropdown: ''
+		}
+	};
 </script>
 
 <div>
-	{#each dropdownData as dropdown}{/each}
+	<h1>{header}</h1>
+	{#each dropdownData as dropdown}
+		<Button class={style.buttonstyle.button}>{dropdown.name} <ChevronDownOutline /></Button>
+		<Dropdown>
+			{#each dropdown.items as item}
+				<DropdownItem>{item}</DropdownItem>
+				<DropdownDivider />
+			{/each}
+		</Dropdown>
+	{/each}
 </div>