diff --git a/files/templates/settings_security.html b/files/templates/settings_security.html
index b86287c6b9..b0a4b487cc 100644
--- a/files/templates/settings_security.html
+++ b/files/templates/settings_security.html
@@ -13,6 +13,8 @@ window.addEventListener('DOMContentLoaded', function() {
 	});
 
 });
+
+const twoStepModal = new bootstrap.Modal(document.getElementById('2faModal'))
 </script>
 
 		<div class="row">
@@ -161,7 +163,7 @@ window.addEventListener('DOMContentLoaded', function() {
 				<div class="body w-lg-100">
 
 					<div class="custom-control custom-switch">
-					<input type="checkbox" class="custom-control-input" id="2faToggle" name="2faToggle" onchange="document.getElementById('2faModal').modal('toggle')" {% if not mfa_secret %}checked=""{% endif %}>
+					<input type="checkbox" class="custom-control-input" id="2faToggle" name="2faToggle" onchange="twoStepModal.show()" {% if not mfa_secret %}checked=""{% endif %}>
 					<label class="custom-control-label" for="2faToggle"></label>
 					</div>