diff --git a/components/autocomplete.vue b/components/autocomplete.vue
index 1445b76..0ec4ece 100644
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -33,6 +33,7 @@ const input = ref("");
 
 const filtered = computed(() => {
 	if (!query.value.data) return null;
+
 	return input.value === ""
 		? query.value.data
 		: query.value.data.filter((entity) => {
@@ -58,11 +59,11 @@ defineEmits(["change", "input"]);
 				class="w-96 truncate p-2"
 				:display-value="(entity) => (entity as HierarchyNode)?.label"
 				@change="
-					input = $event.target.value;
 					$emit('input', $event.target.value);
+					input = $event.target.value;
 				"
 			/>
-			<ComboboxButton class="inset-y-0 right-0 flex items-center pr-3 text-gray-500">
+			<ComboboxButton class="inset-y-0 right-0 flex items-center px-3 text-gray-500">
 				<Search class="h-5 w-5" />
 			</ComboboxButton>
 		</div>
diff --git a/components/facet-disclosures.vue b/components/facet-disclosures.vue
index b0a62c0..63c81f0 100644
--- a/components/facet-disclosures.vue
+++ b/components/facet-disclosures.vue
@@ -19,10 +19,10 @@ const route = useRoute();
 
 const facetObject: Record<string, Array<string>> = getFacetObjectFromURL(true);
 
-const facetChange = async (facets: Array<string>, field: string) => {
+const facetChange = (facets: Array<string>, field: string) => {
 	facetObject[field] = facets;
 
-	await router.push({
+	void router.push({
 		query: {
 			...route.query,
 			page: 1,
diff --git a/components/generic-listbox.vue b/components/generic-listbox.vue
index 23270d9..0908f71 100644
--- a/components/generic-listbox.vue
+++ b/components/generic-listbox.vue
@@ -7,10 +7,19 @@ const model: ModelRef<{ label: string; value: string } | null> = defineModel({
 	default: null,
 });
 
-defineProps<{
+const props = defineProps<{
 	items: Array<{ label: string; value: string }>;
 }>();
 defineEmits(["change"]);
+
+watch(
+	() => props.items,
+	(to) => {
+		console.log("items changed:", props.items, model.value);
+
+		model.value = to[0] ? to[0] : null;
+	},
+);
 </script>
 
 <template>
diff --git a/components/hierarchy-wrapper.vue b/components/hierarchy-wrapper.vue
index ef598c0..d9b5743 100644
--- a/components/hierarchy-wrapper.vue
+++ b/components/hierarchy-wrapper.vue
@@ -19,9 +19,9 @@ onMounted(() => {
 	updateTree(props.data, props.width);
 });
 watch(
-	() => props.data,
-	(to) => {
-		updateTree(to, props.width);
+	() => [props.data, props.width],
+	([to, newWidth]) => {
+		updateTree(to as TreeEntity, newWidth as number);
 	},
 	{ deep: true },
 );
@@ -52,6 +52,9 @@ function updateTree(data: TreeEntity, width: number) {
 		link: (d: Node) =>
 			`/${locale.value}/hierarchy?id=${d.data.meta.pk}&model=${d.data.meta.entity_type}&label=${d.data.meta.label}`,
 		width,
+		r: 7,
+		fontSize: "medium",
+		padding: 2,
 	};
 
 	hierarchyRef.value = Tree(hierarchy(data), options);
@@ -62,6 +65,7 @@ function updateTree(data: TreeEntity, width: number) {
 	<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 	<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 	<div
+		class="w-full"
 		@click.prevent="
 			(event) =>
 				event.target?.parentNode?.href ? router.push(event.target.parentNode.href.baseVal) : null
diff --git a/lib/tree.js b/lib/tree.js
index 88acad9..74a70fc 100644
--- a/lib/tree.js
+++ b/lib/tree.js
@@ -28,6 +28,7 @@ export function Tree(
 		halo = "#fff", // color of label halo
 		haloWidth = 3, // padding around the labels
 		curve = d3.curveBumpX, // curve for the link
+		fontSize = 10,
 	} = {},
 ) {
 	// If id and parentId options are specified, or the path option, use d3.stratify
@@ -49,8 +50,8 @@ export function Tree(
 	const L = label == null ? null : descendants.map((d) => label(d.data, d));
 
 	// Compute the layout.
-	const dx = 10;
-	const dy = width / (root.height + padding);
+	const dx = 10 + r;
+	const dy = (width + r) / (root.height + padding);
 	tree().nodeSize([dx, dy])(root);
 
 	// Center the tree.
@@ -74,7 +75,7 @@ export function Tree(
 		.attr("height", height)
 		.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
 		.attr("font-family", "sans-serif")
-		.attr("font-size", 10);
+		.attr("font-size", fontSize);
 
 	svg
 		.append("g")
@@ -105,7 +106,18 @@ export function Tree(
 
 	node
 		.append("circle")
-		.attr("fill", (d) => (d.children ? stroke : fill))
+		.attr("fill", (d) => {
+			switch (d.data.data.meta.entity_type) {
+				case "Institution":
+					return "tomato";
+				case "Funktion":
+					return "yellowgreen";
+				case "Person":
+					return "lightskyblue";
+				default:
+					return fill;
+			}
+		})
 		.attr("r", r);
 
 	if (title != null) node.append("title").text((d) => title(d.data, d));
@@ -114,12 +126,13 @@ export function Tree(
 		node
 			.append("text")
 			.attr("dy", "0.32em")
-			.attr("x", (d) => (d.children ? -6 : 6))
+			.attr("x", (d) => (d.children ? -6 - r : 6 + r))
 			.attr("text-anchor", (d) => (d.children ? "end" : "start"))
 			.attr("paint-order", "stroke")
 			.attr("stroke", halo)
 			.attr("stroke-width", haloWidth)
-			.text((d, i) => L[i]);
+			.text((d, i) => L[i])
+			.attr("font-size", (d) => (d.data.data.meta.label.length > 20 ? "0.7em" : fontSize));
 
 	return svg.node();
 }
diff --git a/locales/de.json b/locales/de.json
index d393865..5a99ae2 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -25,6 +25,10 @@
 				"add functions and persons": "Institutionen + Funktionen + Personen",
 				"show institution hierarchy": "Institutionshierarchie",
 				"show amt and persons": "Amt und Personen"
+			},
+			"legend": {
+				"legend": "Legende",
+				"function": "Funktion"
 			}
 		},
 		"documentation": {
diff --git a/locales/en.json b/locales/en.json
index b4dc14d..6f4ce81 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -25,6 +25,10 @@
 				"add functions and persons": "Institutions, functions and persons",
 				"show institution hierarchy": "Institutions hierarchy",
 				"show amt and persons": "Amt and persons"
+			},
+			"legend": {
+				"legend": "Legend",
+				"function": "Function"
 			}
 		},
 		"documentation": {
diff --git a/pages/hierarchy.vue b/pages/hierarchy.vue
index 0e42c9a..b34090e 100644
--- a/pages/hierarchy.vue
+++ b/pages/hierarchy.vue
@@ -4,43 +4,60 @@ import { Loader2 } from "lucide-vue-next";
 
 import HierarchyWrapper from "@/components/hierarchy-wrapper.vue";
 import { getTreeData } from "@/lib/get-tree-data";
-import type { HierarchyNode } from "@/lib/types";
 
 const router = useRouter();
 const route = useRoute();
 
 const t = useTranslations();
 
-const comQuery = computed(() => {
-	const { label, id, model } = route.query;
+const comQuery = computed({
+	get() {
+		const { label, id, model } = route.query;
 
-	if (!label || !id || !model) return null;
+		if (!label || !id || !model) return null;
 
-	return {
-		group: decodeURIComponent(String(model)),
-		pk: Number(id),
-		label: String(decodeURIComponent(String(label))),
-	};
+		return {
+			group: decodeURIComponent(String(model)),
+			pk: Number(id),
+			label: String(decodeURIComponent(String(label))),
+		};
+	},
+	set(to) {
+		if (to)
+			void router.push({
+				query: {
+					...route.query,
+					id: to.pk,
+					model: encodeURIComponent(to.group),
+					label: encodeURIComponent(to.label),
+				},
+			});
+	},
 });
 
-const comOptions = computed(() => {
-	const { direction, show } = route.query;
-	return {
-		direction: direction
-			? { value: String(direction), label: t(`pages.hierarchy.options.${String(direction)}`) }
-			: { label: t("pages.hierarchy.options.down"), value: "down" },
-		show: show
-			? { value: String(show), label: t(`pages.hierarchy.options.${String(show)}`) }
-			: { label: "Normal", value: "normal" },
-	};
+const comOptions = computed({
+	get() {
+		const { direction, show } = route.query;
+		return {
+			direction: direction
+				? { value: String(direction), label: t(`pages.hierarchy.options.${String(direction)}`) }
+				: { label: t("pages.hierarchy.options.down"), value: "down" },
+			show: show
+				? { value: String(show), label: t(`pages.hierarchy.options.${String(show)}`) }
+				: { label: showArgs.value[0]?.label, value: showArgs.value[0]?.label },
+		};
+	},
+	set(to) {
+		void router.push({
+			query: {
+				...route.query,
+				show: to.show.value,
+				direction: to.show.value,
+			},
+		});
+	},
 });
 
-const autocomplete = ref<HierarchyNode | null>(comQuery.value);
-const options = ref<{
-	show: { label: string; value: string };
-	direction: { label: string; value: string };
-}>(comOptions.value);
-
 const query = ref(
 	useQuery({
 		queryKey: ["hierarchy", comQuery, comOptions] as const,
@@ -62,7 +79,7 @@ const query = ref(
 );
 
 const showArgs = computed(() => {
-	switch (autocomplete.value?.group) {
+	switch (route.query.model) {
 		case "Institution": {
 			const instArgs = [
 				{
@@ -75,8 +92,6 @@ const showArgs = computed(() => {
 					label: t("pages.hierarchy.options.add functions and persons"),
 				},
 			];
-			if (!instArgs.map((arg) => arg.label).includes(options.value.show.value) && instArgs[0])
-				options.value.show = instArgs[0];
 			return instArgs;
 		}
 		case "Funktion": {
@@ -87,12 +102,9 @@ const showArgs = computed(() => {
 				},
 				{ value: "show amt and persons", label: t("pages.hierarchy.options.show amt and persons") },
 			];
-			if (!funcArgs.map((arg) => arg.value).includes(options.value.show.value) && funcArgs[0])
-				options.value.show = funcArgs[0];
 			return funcArgs;
 		}
 		default: {
-			options.value.show = { value: "normal", label: t("pages.hierarchy.options.normal") };
 			return [{ value: "normal", label: t("pages.hierarchy.options.normal") }];
 		}
 	}
@@ -104,26 +116,18 @@ definePageMeta({
 </script>
 
 <template>
-	<MainContent class="container mx-auto grid grid-flow-row grid-rows-[auto_1fr]">
-		<div class="flex">
-			<Autocomplete
-				v-model="autocomplete"
-				@change="
-					autocomplete
-						? router.push({
-								query: {
-									...route.query,
-									id: autocomplete.pk,
-									model: encodeURIComponent(autocomplete.group),
-									label: encodeURIComponent(autocomplete.label),
-								},
-							})
-						: null
-				"
-			/>
+	<MainContent class="relative mx-auto grid w-full grid-flow-row grid-rows-[auto_1fr]">
+		<div class="container mx-auto flex flex-wrap">
+			<Autocomplete v-model="comQuery" />
 			<ClientOnly>
 				<GenericListbox
-					v-model="options.direction"
+					v-model="comOptions.show"
+					class="m-2 min-w-56"
+					:items="showArgs"
+					@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
+				/>
+				<GenericListbox
+					v-model="comOptions.direction"
 					class="m-2 min-w-48"
 					:items="[
 						{ value: 'down', label: t('pages.hierarchy.options.down') },
@@ -135,15 +139,21 @@ definePageMeta({
 						}
 					"
 				/>
-				<GenericListbox
-					v-model="options.show"
-					class="m-2 min-w-56"
-					:items="showArgs"
-					@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
-				/>
 			</ClientOnly>
+
+			<div class="m-2 h-11 w-fit self-end rounded border bg-white p-2 shadow-lg">
+				<div class="flex items-center gap-x-2">
+					<h3>{{ t("pages.hierarchy.legend.legend") }}:</h3>
+					<div class="h-4 w-4 rounded-full border bg-[tomato] shadow" />
+					<div>Institution</div>
+					<div class="h-4 w-4 rounded-full border bg-[yellowgreen] shadow" />
+					<div>{{ t("pages.hierarchy.legend.function") }}</div>
+					<div class="h-4 w-4 rounded-full border bg-[lightskyblue] shadow" />
+					<div>Person</div>
+				</div>
+			</div>
 		</div>
-		<div>
+		<div class="w-full">
 			<ClientOnly v-if="!query.isFetching">
 				<VisContainer v-slot="{ width }" class="my-4 flex items-center">
 					<HierarchyWrapper v-if="query.data" :data="query.data" :width="width" />
diff --git a/pages/search.vue b/pages/search.vue
index 36ede33..104b944 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -55,15 +55,15 @@ const links = computed(() => {
 	} satisfies Record<string, NavLink>;
 });
 
-const updateFacets = async () => {
+const updateFacets = () => {
 	const { query } = route;
 
 	if (query.facets?.start_date_int) {
-		await addToFacets(typesenseQueryToFacetObject(String(query.facets)).start_date_int);
-	} else await addToFacets([1600, 1900]);
+		addToFacets(typesenseQueryToFacetObject(String(query.facets)).start_date_int);
+	} else addToFacets([1600, 1900]);
 };
 
-const addToFacets = async (range: [number, number]) => {
+const addToFacets = (range: [number, number]) => {
 	const { query } = route;
 	const router = useRouter();
 	const facetObject = typesenseQueryToFacetObject(String(query.facets));
@@ -74,11 +74,11 @@ const addToFacets = async (range: [number, number]) => {
 
 		if (isEmpty(facetObject)) {
 			delete query.facets;
-			await router.push({
+			void router.push({
 				query,
 			});
 		} else {
-			await router.push({
+			void router.push({
 				query: {
 					...query,
 					facets: facetObjectToTypesenseQuery(facetObject, false, includeDateless.value),
@@ -86,7 +86,7 @@ const addToFacets = async (range: [number, number]) => {
 			});
 		}
 	} else {
-		await router.push({
+		void router.push({
 			query: {
 				...query,
 				facets: facetObjectToTypesenseQuery(