diff --git a/frontend/src/main.less b/frontend/src/main.less
index 829244d33e731379b39772a5e7be202bf13613f9..331d6ede0dbbc3e23f931292c08cc9bb6292236e 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -50,7 +50,7 @@ nav {
 		& > * {
 			margin: 0;
 			padding: 0.5rem 1rem;
-	
+
 			font-weight: bold;
 			font-size: 1.5rem;
 		}
@@ -96,7 +96,7 @@ nav {
 		#burger_checkbox:not(:checked) ~ #nav-links {
 			display: none;
 		}
-		
+
 		#burger_checkbox:checked ~ #nav-links {
 			position: absolute;
 			right: 0;
@@ -120,6 +120,11 @@ main {
 	.sign img {
 		width: 100%;
 	}
+
+	& div {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
 .preview {
@@ -130,3 +135,11 @@ main {
 	background-color: #fff;
 	color: #000;
 }
+
+.preview-small {
+	width: 15rem;
+}
+
+.preview-label {
+	place-self: center;
+}
diff --git a/schilder2000/templates/index.html.j2 b/schilder2000/templates/index.html.j2
index 84ccd29aae11d59f4b500f35afc179a6eb5974a0..898c925bff35e3cb6a6ea7ea7cc79fae9c9d3591 100644
--- a/schilder2000/templates/index.html.j2
+++ b/schilder2000/templates/index.html.j2
@@ -8,7 +8,18 @@
 	<h2>Existierende Schilder:</h2>
 	<div class="sign-grid">
 		{%- for schild in schilder %}
-			<a class="sign" href="{{ url_for('.schild', ident=schild.ident) }}">{{ schild.title }}</a>
+			<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>
 		{%- endfor %}
 	</div>
 {% endblock %}