diff --git a/less/login.less b/less/login.less
index b756a6a..fefeb12 100644
--- a/less/login.less
+++ b/less/login.less
@@ -9,17 +9,63 @@
  */
 
 .row.signinbtns {
-	justify-content: space-evenly;
+	justify-content: center;
 	font-size: 1em;
 	margin-top: 2em;
 	margin-bottom: 1em;
+	flex-wrap: wrap;
 
 	.loginbtn {
 		height: 40px;
+		margin: 0.5em;
 
-		&.btn.cta {
+		&.btn {
 			box-sizing: border-box;
 			font-size: 17px;
+			white-space: nowrap;
+
+			img {
+				height: 1.5em;
+				vertical-align: middle;
+			}
+		}
+
+		&#writeas-login, &#slack-login {
+			img {
+				margin-top: -0.2em;
+			}
+		}
+
+		&#gitlab-login {
+			background-color: #fc6d26;
+			border-color: #fc6d26;
+			&:hover {
+				background-color: darken(#fc6d26, 5%);
+				border-color: darken(#fc6d26, 5%);
+			}
+		}
+
+		&#gitea-login {
+			background-color: #2ecc71;
+			border-color: #2ecc71;
+			&:hover {
+				background-color: #2cc26b;
+				border-color: #2cc26b;
+			}
+		}
+
+		&#slack-login, &#gitlab-login, &#gitea-login, &#generic-oauth-login {
+			font-size: 0.86em;
+			font-family: @sansFont;
+		}
+
+		&#slack-login, &#generic-oauth-login {
+			color: @lightTextColor;
+			background-color: @lightNavBG;
+			border-color: @lightNavBorder;
+			&:hover {
+				background-color: @lightNavHoverBG;
+			}
 		}
 	}
 }
diff --git a/static/img/mark/writeas-white.png b/static/img/mark/writeas-white.png
new file mode 100644
index 0000000..6c9b2cd
Binary files /dev/null and b/static/img/mark/writeas-white.png differ
diff --git a/templates/include/oauth.tmpl b/templates/include/oauth.tmpl
index 6617fd0..9a8d05e 100644
--- a/templates/include/oauth.tmpl
+++ b/templates/include/oauth.tmpl
@@ -5,13 +5,22 @@
                 <a class="loginbtn" href="/oauth/slack"><img alt="Sign in with Slack" height="40" width="172" src="/img/sign_in_with_slack.png" srcset="/img/sign_in_with_slack.png 1x, /img/sign_in_with_slack@2x.png 2x" /></a>
             {{ end }}
             {{ if .WriteAsEnabled }}
-                <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">Sign in with <strong>Write.as</strong></a>
+                <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">
+                    <img src="/img/mark/writeas-white.png" />
+                    Sign in with <strong>Write.as</strong>
+                </a>
             {{ end }}
             {{ if .GitLabEnabled }}
-                <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">Sign in with <strong>{{.GitLabDisplayName}}</strong></a>
+                <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">
+                    <img src="/img/mark/gitlab.png" />
+                    Sign in with <strong>{{.GitLabDisplayName}}</strong>
+                </a>
             {{ end }}
             {{ if .GiteaEnabled }}
-                <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">Sign in with <strong>{{.GiteaDisplayName}}</strong></a>
+                <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">
+                    <img src="/img/mark/gitea.png" />
+                    Sign in with <strong>{{.GiteaDisplayName}}</strong>
+                </a>
             {{ end }}
             {{ if .GenericEnabled }}
                 <a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic">Sign in with <strong>{{.GenericDisplayName}}</strong></a>
diff --git a/templates/user/settings.tmpl b/templates/user/settings.tmpl
index 95c57c4..22de3d8 100644
--- a/templates/user/settings.tmpl
+++ b/templates/user/settings.tmpl
@@ -107,47 +107,47 @@ h3 { font-weight: normal; }
 		<div class="option">
 			<h2>Link External Accounts</h2>
 			<p>Connect additional accounts to enable logging in with those providers, instead of using your username and password.</p>
-			<div class="row">
+			<div class="row signinbtns">
 			{{ if .OauthWriteAs }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/writeas.png" alt="Write.as" />
 					<a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as?attach=t">
+						<img src="/img/mark/writeas-white.png" alt="Write.as" />
 						Link <strong>Write.as</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthSlack }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/slack.png" alt="Slack" />
-					<a class="btn cta loginbtn" href="/oauth/slack?attach=t">
+					<a class="btn cta loginbtn" id="slack-login" href="/oauth/slack?attach=t">
+						<img src="/img/mark/slack.png" alt="Slack" />
 						Link <strong>Slack</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthGitLab }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/gitlab.png" alt="GitLab" />
 					<a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab?attach=t">
+						<img src="/img/mark/gitlab.png" alt="GitLab" />
 						Link <strong>{{.GitLabDisplayName}}</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthGitea }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/gitea.png" alt="Gitea" />
 					<a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea?attach=t">
+						<img src="/img/mark/gitea.png" alt="Gitea" />
 						Link <strong>{{.GiteaDisplayName}}</strong>
 					</a>
 				</div>
 			{{ end }}
-			</div>
 			{{ if .OauthGeneric }}
-				<div class="row">
-					<div class="section oauth-provider">
-						<p><a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">Link <strong>{{ .OauthGenericDisplayName }}</strong></a></p>
-					</div>
+				<div class="section oauth-provider">
+					<a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">
+						Link <strong>{{ .OauthGenericDisplayName }}</strong>
+					</a>
 				</div>
 			{{ end }}
+			</div>
 		</div>
 		{{ end }}
 	{{ end }}