diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 183c16aa12..39e312bd66 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -12,18 +12,17 @@
 				{{.i18n.Tr "auth.oauth_signin_tab"}}
 			</a>
 		</div>
-
-		<div class="ui middle very relaxed page grid">
-			<div class="column">
-				<div class="ui tab {{if not .user_exists}}active{{end}}"
-					data-tab="auth-link-signup-tab">
-					{{template "user/auth/signup_inner" .}}
-				</div>
-				<div class="ui tab {{if .user_exists}}active{{end}}"
-					data-tab="auth-link-signin-tab">
-					<div class="ui user signin container icon">
-						{{template "user/auth/signin_inner" .}}
-					</div>
+	</div>
+	<div class="ui middle very relaxed page grid">
+		<div class="column">
+			<div class="ui tab {{if not .user_exists}}active{{end}}"
+				data-tab="auth-link-signup-tab">
+				{{template "user/auth/signup_inner" .}}
+			</div>
+			<div class="ui tab {{if .user_exists}}active{{end}}"
+				data-tab="auth-link-signin-tab">
+				<div class="ui user signin container icon">
+					{{template "user/auth/signin_inner" .}}
 				</div>
 			</div>
 		</div>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index f5e3c705e8..7bfe12e3ca 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2397,6 +2397,33 @@ function initIssueReferenceRepositorySearch() {
     });
 }
 
+function initLinkAccountView() {
+  const $lnkUserPage = $('.page-content.user.link-account');
+  if ($lnkUserPage.length === 0) {
+    return false;
+  }
+
+  const $signinTab = $lnkUserPage.find('.item[data-tab="auth-link-signin-tab"]');
+  const $signUpTab = $lnkUserPage.find('.item[data-tab="auth-link-signup-tab"]');
+  const $signInView = $lnkUserPage.find('.tab[data-tab="auth-link-signin-tab"]');
+  const $signUpView = $lnkUserPage.find('.tab[data-tab="auth-link-signup-tab"]');
+
+  $signUpTab.on('click', () => {
+    $signinTab.removeClass('active');
+    $signInView.removeClass('active');
+    $signUpTab.addClass('active');
+    $signUpView.addClass('active');
+    return false;
+  });
+
+  $signinTab.on('click', () => {
+    $signUpTab.removeClass('active');
+    $signUpView.removeClass('active');
+    $signinTab.addClass('active');
+    $signInView.addClass('active');
+  });
+}
+
 $(document).ready(async () => {
   // Show exact time
   $('.time-since').each(function () {
@@ -2456,6 +2483,9 @@ $(document).ready(async () => {
     window.location = $(this).data('href');
   });
 
+  // link-account tab handle
+  initLinkAccountView();
+
   // Dropzone
   const $dropzone = $('#dropzone');
   if ($dropzone.length > 0) {