diff --git a/templates/user/auth/signup_inner.tmpl b/templates/user/auth/signup_inner.tmpl
index c6ecb78bdd779..184b8b88fe0b6 100644
--- a/templates/user/auth/signup_inner.tmpl
+++ b/templates/user/auth/signup_inner.tmpl
@@ -57,23 +57,19 @@
 			{{end}}
 
 			{{if and .OrderedOAuth2Names .OAuth2Providers}}
-			<div class="ui attached segment">
-				<div class="oauth2 center">
-					<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
-					<div>
-						<div id="oauth2-login-navigator">
-							<p>{{.i18n.Tr "sign_in_with"}}</p>
-							{{range $key := .OrderedOAuth2Names}}
-								{{$provider := index $.OAuth2Providers $key}}
-								<a href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-									<img
-										alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										class="{{$provider.Name}} oauth-login-image"
-										src="{{AppSubUrl}}{{$provider.Image}}"
-									></a>
-							{{end}}
-						</div>
+			<div class="divider divider-text">
+				{{.locale.Tr "sign_in_or"}}
+			</div>
+			<div id="oauth2-login-navigator" class="gt-py-2">
+				<div class="gt-df gt-fc gt-jc">
+					<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
+						{{range $key := .OrderedOAuth2Names}}
+							{{$provider := index $.OAuth2Providers $key}}
+							<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
+								{{$provider.IconHTML}}
+								{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
+							</a>
+						{{end}}
 					</div>
 				</div>
 			</div>