diff --git a/web/app/controllers/login.php b/web/app/controllers/login.php
index 34485fa..da3e244 100644
--- a/web/app/controllers/login.php
+++ b/web/app/controllers/login.php
@@ -5,7 +5,7 @@
 	if (Auth::check()) {
 		redirectTo('/');
 	}
-	
+
 	function handleLoginPost() {
 		if (!crsf_check()) {
 			return 'expired';
@@ -51,41 +51,61 @@
 	}
 	?>
 <?php
+	$REQUIRE_LIB['bootstrap5'] = '';
 	$REQUIRE_LIB['md5'] = '';
 	?>
 <?php echoUOJPageHeader(UOJLocale::get('login')) ?>
-<h2 class="page-header"><?= UOJLocale::get('login') ?></h2>
-<form id="form-login" class="form-horizontal" method="post">
-  <div id="div-username" class="form-group">
-    <label for="input-username" class="col-sm-2 control-label"><?= UOJLocale::get('username') ?></label>
-    <div class="col-sm-3">
-      <input type="text" class="form-control" id="input-username" name="username" placeholder="<?= UOJLocale::get('enter your username') ?>" maxlength="20" />
-      <span class="help-block" id="help-username"></span>
-    </div>
-  </div>
-  <div id="div-password" class="form-group">
-    <label for="input-password" class="col-sm-2 control-label"><?= UOJLocale::get('password') ?></label>
-    <div class="col-sm-3">
-      <input type="password" class="form-control" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" />
-      <span class="help-block" id="help-password"></span>
-    </div>
-  </div>
-  <div id="div-captcha" class="form-group">
-    <label for="input-captcha" class="col-sm-2 control-label"><?= UOJLocale::get('verification code') ?></label>
-    <div class="col-sm-3" style="max-width: 60%">
-      <input type="text" class="form-control" id="input-captcha" name="captcha" placeholder="<?= UOJLocale::get('enter verification code') ?>" maxlength="20" style="display: inline-block; width: 12em;" />
-	  <div style="display: inline-block; margin-left: 8px; position: relative; top: -2px; cursor: pointer;">
-	  	<img id="captcha" src="" />
-	  </div>
-      <span class="help-block" id="help-captcha" style="display: block"></span>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-3">
-      <button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
-    </div>
-  </div>
-</form>
+
+<style>
+	.login-container {
+		max-width: 400px;
+		padding: 15px;
+	}
+
+	.login-input-group-item {
+		margin-bottom: -1px;
+	}
+</style>
+
+<main class="login-container mx-auto w-100 text-center">
+	<form id="form-login" method="post">
+		<img class="mb-4" src="<?= HTML::url('/images/sjzez.png') ?>">
+
+		<div class="login-input-group mb-3">
+			<div id="div-username" class="input-group">
+				<div class="form-floating">
+					<input type="text" class="form-control rounded-0 rounded-top login-input-group-item" id="input-username" name="username" placeholder="<?= UOJLocale::get('enter your username') ?>" maxlength="20" />
+					<label for="input-username"><?= UOJLocale::get('username') ?></label>
+				</div>
+			</div>
+
+			<div id="div-password" class="input-group">
+				<div class="form-floating">
+					<input type="password" class="form-control rounded-0 login-input-group-item" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" />
+					<label for="input-password"><?= UOJLocale::get('password') ?></label>
+				</div>
+			</div>
+
+			<div id="div-captcha" class="input-group">
+				<div class="form-floating">
+					<input type="text" class="form-control rounded-0" style="border-bottom-left-radius: var(--bs-border-radius) !important" id="input-captcha" name="captcha" placeholder="<?= UOJLocale::get('enter verification code') ?>" maxlength="20" />
+					<label for="input-captcha"><?= UOJLocale::get('verification code') ?></label>
+				</div>
+				<span class="input-group-text p-0 overflow-hidden rounded-0" style="border-bottom-right-radius: var(--bs-border-radius) !important">
+					<img id="captcha" class="col w-100 h-100" src="/captcha">
+				</span>
+			</div>
+		</div>
+
+		<div class="text-danger">
+			<span id="help-username"></span>
+			<span id="help-password"></span>
+			<span id="help-captcha"></span>
+		</div>
+
+		<button type="submit" id="button-submit" class="mt-4 w-100 btn btn-lg btn-primary"><?= UOJLocale::get('login') ?></button>
+	</form>
+</main>
 
 <script type="text/javascript">
 function validateLoginPost() {
@@ -112,12 +132,9 @@ function submitLoginPost() {
 		password : md5($('#input-password').val(), "<?= getPasswordClientSalt() ?>"),
 		captcha: $('#input-captcha').val(),
 	}, function(msg) {
-		$('#div-captcha').removeClass('has-error');
-		$('#div-username').removeClass('has-error');
-		$('#div-password').removeClass('has-error');
-		$('#help-captcha').html('');
-		$('#help-username').html('');
-		$('#help-password').html('');
+		$('#div-username, #div-password, #div-captcha').removeClass('has-validation');
+		$('#input-username, #input-password, #input-captcha').removeClass('is-invalid');
+		$('#help-username, #help-passwor, #help-captcha').html('');
 
 		if (msg == 'ok') {
 			var prevUrl = document.referrer;
@@ -126,21 +143,25 @@ function submitLoginPost() {
 			};
 			window.location.href = prevUrl;
 		} else if (msg == 'bad_captcha') {
-			$('#div-captcha').addClass('has-error');
+			$('#div-captcha').addClass('has-validation');
+			$('#div-captcha > .form-floating, #input-captcha').addClass('is-invalid');
 			$('#help-captcha').html('验证码错误。');
 			refreshCaptcha();
 		} else if (msg == 'banned') {
-			$('#div-username').addClass('has-error');
+			$('#div-username').addClass('has-validation');
+			$('#div-username > .form-floating, #input-username').addClass('is-invalid');
 			$('#help-username').html('该用户已被封停，请联系管理员。');
 			refreshCaptcha();
 		} else if (msg == 'expired') {
-			$('#div-username').addClass('has-error');
+			$('#div-username').addClass('has-validation');
+			$('#div-username > .form-floating, #input-username').addClass('is-invalid');
 			$('#help-username').html('页面会话已过期。');
 			refreshCaptcha();
 		} else {
-			$('#div-username').addClass('has-error');
-			$('#help-username').html('用户名或密码错误。');
-			$('#div-password').addClass('has-error');
+			$('#div-username').addClass('has-validation');
+			$('#div-username > .form-floating, #input-username').addClass('is-invalid');
+			$('#div-password').addClass('has-validation');
+			$('#div-password > .form-floating, #input-password').addClass('is-invalid');
 			$('#help-password').html('用户名或密码错误。<a href="/forgot-password">忘记密码？</a>');
 			refreshCaptcha();
 		}
@@ -161,4 +182,5 @@ $(document).ready(function() {
 });
 
 </script>
+
 <?php echoUOJPageFooter() ?>
diff --git a/web/images/sjzez.png b/web/images/sjzez.png
new file mode 100644
index 0000000..284e243
Binary files /dev/null and b/web/images/sjzez.png differ
diff --git a/web/js/uoj.js b/web/js/uoj.js
index fe3774e..fd15d54 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -168,11 +168,13 @@ $.fn.uoj_honor = function() {
 
 function showErrorHelp(name, err) {
 	if (err) {
-		$('#div-' + name).addClass('has-error');
+		$('#div-' + name).addClass(isBootstrap5Page ? 'has-validation' : 'has-error');
+		if (isBootstrap5Page) $('#div-' + name + ' .form-floating, #input-' + name).addClass('is-invalid');
 		$('#help-' + name).text(err);
 		return false;
 	} else {
-		$('#div-' + name).removeClass('has-error');
+		$('#div-' + name).removeClass(isBootstrap5Page ? 'has-validation' : 'has-error');
+		if (isBootstrap5Page) $('#div-' + name+ ' .form-floating, #input-' + name).removeClass('is-invalid');
 		$('#help-' + name).text('');
 		return true;
 	}