diff --git a/frappe/templates/includes/login/login.js b/frappe/templates/includes/login/login.js
index 355e8151f9..4400578862 100644
--- a/frappe/templates/includes/login/login.js
+++ b/frappe/templates/includes/login/login.js
@@ -291,10 +291,18 @@ var verify_token = function (event) {
 }
 
 var request_otp = function (r) {
-	const otp_form_template = '{{ _("Verification") }}<input type="text" id="login_token" autocomplete="off" class="form-control" placeholder={{ _("Verification Code") }} required="" autofocus="">{{ _("Verify") }}';
 	$('.login-content').empty();
 	$('.login-content:visible').append(
-		$('<div>').attr({ 'id': 'twofactor_div' }).html(otp_form_template)
+		`<div id="twofactor_div">
+			<form class="form-verify">
+				<div class="page-card-head">
+					<span class="indicator blue" data-text="Verification">{{ _("Verification") }}</span>
+				</div>
+				<div id="otp_div"></div>
+				<input type="text" id="login_token" autocomplete="off" class="form-control" placeholder={{ _("Verification Code") }} required="" autofocus="">
+				<button class="btn btn-sm btn-primary btn-block mt-3" id="verify_token">{{ _("Verify") }}</button>
+			</form>
+		</div>`
 	);
 	// add event handler for submit button
 	verify_token();