diff --git a/frontend/src/main.less b/frontend/src/main.less
index 92a20eeed72532f15c4229405138f37bb6e73fa1..cd1db51a493491ace0bd5fda9253dc8a42c604bf 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -269,11 +269,6 @@ main {
 			place-self: center;
 		}
 
-		img {
-			width: 10rem;
-			background-color: #fff;
-		}
-
 		.option-border {
 			border: @option_border solid var(--fg-dark);
 			border-radius: 3 * @option_border;
@@ -329,6 +324,34 @@ main {
 	}
 }
 
+.templateselect {
+	overflow: scroll;
+	// a row is roughly 15rem
+	max-height: 40rem;
+}
+
+.imageselect {
+	overflow: scroll;
+	// a row is roughly 10rem
+	max-height: 25rem;
+}
+
+.icon-container {
+	width: 10rem;
+	height: 10rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	img {
+		background-color: #fff;
+
+		max-width: 100%;
+		max-height: 100%;
+	}
+}
+
 .flash {
 	border: 1px solid transparent;
 	border-radius: 4px;
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index 1b256f4ee465e90c5ab2eede3da0bd9f0d7d4d2d..5b65aa54d78a86be4fc14c1b8aa0251940e7d6e1 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -57,7 +57,7 @@
 									checked
 								{%- endif -%}
 							/>
-							<label for="img:{{ img }}" class="option-border">
+							<label for="img:{{ img }}" class="option-border icon-container">
 								<img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" />
 							</label>
 						</div>