diff --git a/frontend/src/main.less b/frontend/src/main.less
index f28a6c795e62d576d8ada945ab2e1e31bf2c7e00..110527e118e6b5468226491e74e7b34bb615472c 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -87,7 +87,9 @@ a {
 	}
 	&:hover {
 		text-decoration: underline;
-		cursor: pointer;
+		&, label {
+			cursor: pointer;
+		}
 	}
 }
 
@@ -289,15 +291,19 @@ main {
 			}
 		}
 
+		&:hover .option-border {
+			border-color: var(--accent2);
+		}
+
 		input[type = "radio"] {
 			display: none;
 
 			&:checked + .option-border {
-				border-color: var(--accent2);
+				border-color: var(--accent);
 			}
 		}
 
-		label {
+		.preview-label {
 			flex-grow: 1;
 			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
 			// inline ist
@@ -305,6 +311,14 @@ main {
 		}
 	}
 
+	a.option:hover {
+		text-decoration: none;
+
+		.option-border {
+			border-color: var(--accent2);
+		}
+	}
+
 	input[type = "radio"] {
 		display: none;
 	}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 6a987728de755d1826356c93bb8e57640c1028c7..ee703333a6b3de27d556331ed98823b026b4e3e8 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -11,29 +11,32 @@ function onInputHandler(event: Event) {
 window.addEventListener("load", () => {
 	if (document.getElementById('preview')) {
 		for (const el of document.getElementsByClassName('input-dispatch')) {
-			console.log(el);
+			console.debug(el);
 			el.addEventListener('input', onInputHandler);
 		}
+	}
 
-		for (const op of document.querySelectorAll('.option .preview')) {
-			console.log(op);
-			const input_id = (op as HTMLElement).dataset.for;
-			if (!input_id) {
-				console.error("Missing data-for attribute for", op);
-				continue;
-			}
+	for (const op of document.querySelectorAll('.option .preview')) {
+		console.debug(op);
+		const input_id = (op as HTMLElement).dataset.for;
+		let handler: (_: Event) => void;
+		if (input_id) {
 			const input = document.getElementById(input_id);
 			if (!input || input === null) {
 				console.error("Unable to find input for", op);
 				continue;
 			}
 
-			const handler = (_: Event) => {
-				console.log("clicked");
+			handler = (_: Event) => {
 				(input as HTMLInputElement).checked = true;
-			};
-			op.addEventListener('click', handler);
-			(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
+			}
+		} else {
+			const p = (op as HTMLElement).parentNode;
+			handler = (_: Event) => {
+				window.location.href = (p as HTMLAnchorElement).href;
+			}
 		}
+		op.addEventListener('click', handler);
+		(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
 	}
 });
diff --git a/schilder2000/templates/index.html.j2 b/schilder2000/templates/index.html.j2
index 898c925bff35e3cb6a6ea7ea7cc79fae9c9d3591..977f9f7a893c43a1596f1959ca7ba07753d55822 100644
--- a/schilder2000/templates/index.html.j2
+++ b/schilder2000/templates/index.html.j2
@@ -6,19 +6,18 @@
 
 {% block main %}
 	<h2>Existierende Schilder:</h2>
-	<div class="sign-grid">
+	{#- wir klauen uns hier an der Stelle einfach mal das Layout vom schild templateselect #}
+	<div class="select templateselect">
 		{%- for schild in schilder %}
-			<a class="sign" href="{{ url_for('.schild', ident=schild.ident) }}">
-				<div>
-					<iframe
-						class="preview preview-small"
-						src="{{ url_for('instance.schild_html', ident=schild.ident) }}"
-						id="preview:{{ schild.ident }}">
-					</iframe>
-					<label for="preview:{{ schild.ident }}" class="preview-label">
-						{{ schild.title }}
-					</label>
-				</div>
+			<a class="sign option" href="{{ url_for('.schild', ident=schild.ident) }}">
+				<iframe
+					class="preview option-border"
+					src="{{ url_for('instance.schild_html', ident=schild.ident) }}"
+					id="preview:{{ schild.ident }}">
+				</iframe>
+				<label for="preview:{{ schild.ident }}" class="preview-label">
+					{{ schild.title }}
+				</label>
 			</a>
 		{%- endfor %}
 	</div>