diff --git a/frontend/src/main.less b/frontend/src/main.less
index dd1d5f89a94ee66e61bb32aaa4b50424decec4fa..93fc28326ece14b1d1cf6029c50c874891be2aba 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -340,3 +340,20 @@ main {
 		opacity: 1;
 	}
 }
+
+.login-providers {
+	max-width: 50rem;
+	margin: 1rem auto;
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	.provider + .provider {
+		margin-top: 0.5rem;
+	}
+
+	button {
+		width: 100%;
+	}
+}
diff --git a/schilder2000/templates/login.html.j2 b/schilder2000/templates/login.html.j2
index 452343c3589f52e256470125706d91e5738b9f60..cdedd1c1ce439d0b8798b3555294752f637277dd 100644
--- a/schilder2000/templates/login.html.j2
+++ b/schilder2000/templates/login.html.j2
@@ -10,6 +10,8 @@
 			{{ render_field(field) }}
 		{%- endfor -%}
 
-		<input type="submit" value="Anmelden" />
+		<div class="buttons">
+			<input type="submit" value="Anmelden" />
+		</div>
 	</form>
 {%- endblock main %}
diff --git a/schilder2000/templates/login_select.html.j2 b/schilder2000/templates/login_select.html.j2
index a3cc5367fcf8b067f1c34844e110d34bc4aa21f4..19ca70a93600b2858f5374da0a0eb10a1b9685e3 100644
--- a/schilder2000/templates/login_select.html.j2
+++ b/schilder2000/templates/login_select.html.j2
@@ -5,10 +5,11 @@
 {%- endblock title %}
 
 {% block main -%}
-    Available login providers:
-    <ul>
+    <div class="login-providers">
         {% for provider in providers|sort(attribute='title') %}
-            <li><a href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">{{ provider.title }}</a></li>
+            <a class="provider" href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">
+                <button>Log In with {{ provider.title }}</button>
+            </a>
         {% endfor %}
-    </ul>
+    </div>
 {%- endblock %}