diff --git a/frontend/src/main.less b/frontend/src/main.less
index dd1d5f89a94ee66e61bb32aaa4b50424decec4fa..2782dd98b8bb8bdc40c26a79a31c6cf3091ee485 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -292,7 +292,7 @@ main {
 			}
 		}
 
-		label {
+		.preview-label {
 			flex-grow: 1;
 			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
 			// inline ist
@@ -300,6 +300,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..1f475b2c9a2ccef4d53b4ae672e6b07fa084a57a 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -14,26 +14,26 @@ window.addEventListener("load", () => {
 			console.log(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;
-			}
-			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");
-				(input as HTMLInputElement).checked = true;
-			};
-			op.addEventListener('click', handler);
-			(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
+	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;
 		}
+		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");
+			(input as HTMLInputElement).checked = true;
+		};
+		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>