diff --git a/internal/httpd/webadmin.go b/internal/httpd/webadmin.go
index a1b33592..f3837054 100644
--- a/internal/httpd/webadmin.go
+++ b/internal/httpd/webadmin.go
@@ -494,7 +494,7 @@ func loadAdminTemplates(templatesPath string) {
 		filepath.Join(templatesPath, templateAdminDir, templateIPList),
 	}
 	mfaPaths := []string{
-		filepath.Join(templatesPath, templateCommonDir, templateCommonCSS),
+		filepath.Join(templatesPath, templateCommonDir, templateCommonBase),
 		filepath.Join(templatesPath, templateAdminDir, templateBase),
 		filepath.Join(templatesPath, templateAdminDir, templateMFA),
 	}
diff --git a/templates/common/message.html b/templates/common/message.html
index f6a8c271..da749a9e 100644
--- a/templates/common/message.html
+++ b/templates/common/message.html
@@ -71,7 +71,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
                         <div class="fs-4 text-gray-800">
                             <span data-i18n="{{.Success}}"></span>
                             {{- if .Text}}
-                            {{.Text}}
+                            <span> {{.Text}}</span>
                             {{- end}}
                         </div>
                     </div>
diff --git a/templates/webadmin/mfa.html b/templates/webadmin/mfa.html
index 77a38c78..89a38e59 100644
--- a/templates/webadmin/mfa.html
+++ b/templates/webadmin/mfa.html
@@ -1,60 +1,78 @@
 <!--
-Copyright (C) 2019 Nicola Murino
+Copyright (C) 2024 Nicola Murino
 
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published
-by the Free Software Foundation, version 3.
+This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
+https://keenthemes.com/products/templates-mega-bundle
 
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
+KeenThemes HTML/CSS/JS components are allowed for use only within the
+SFTPGo product and restricted to be used in a resealable HTML template
+that can compete with KeenThemes products anyhow.
+
+This WebUI is allowed for use only within the SFTPGo product and
+therefore cannot be used in derivative works/products without an
+explicit grant from the SFTPGo Team (support@sftpgo.com).
 -->
 {{template "base" .}}
 
-{{define "title"}}{{.Title}}{{end}}
-
-{{define "extra_css"}}
-<link href="{{.StaticURL}}/vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
-{{end}}
-
-{{define "page_body"}}
-
-<div class="card shadow mb-4">
-    <div class="card-header py-3">
-        <h6 class="m-0 font-weight-bold text-primary">TOTP (Authenticator app)</h6>
-    </div>
-    <div class="card-body">
-        <div id="successTOTPMsg" class="card mb-4 border-left-success" style="display: none;">
-            <div id="successTOTPTxt" class="card-body"></div>
-        </div>
-        <div id="errorTOTPMsg" class="alert alert-warning fade show" style="display: none;" role="alert">
-            <span id="errorTOTPTxt"></span>
-            <button type="button" class="close" aria-label="Close" onclick="dismissErrorTOTPMsg();">
-              <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <script type="text/javascript">
-            function dismissErrorTOTPMsg(){
-                $('#errorTOTPMsg').hide();
-            }
-        </script>
-        <div>
-            <p>Status: {{if .TOTPConfig.Enabled }}"Enabled". Current configuration: "{{.TOTPConfig.ConfigName}}"{{else}}"Disabled"{{end}}</p>
-        </div>
-        <div class="form-group row totpDisable">
-            <div class="col-sm-12">
-                <a id="idTOTPDisable" class="btn btn-warning" href="#" onclick="totpDisableAsk()" role="button">Disable</a>
+{{- define "page_body"}}
+{{- if .TOTPConfig.Enabled}}
+<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6 mb-5">
+    <i class="ki-duotone ki-shield-tick fs-2tx text-primary me-4">
+        <span class="path1"></span>
+        <span class="path2"></span>
+    </i>
+    <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
+        <div class="mb-3 mb-md-0 fw-semibold">
+            <h4 class="text-gray-900 fw-bold">
+                <span data-i18n="2fa.msg_enabled"></span> {{- if gt (len .TOTPConfigs) 1 }}
+                ({{$.TOTPConfig.ConfigName}}) {{- end}}
+            </h4>
+            <div class="fs-6 text-gray-800 pe-7">
+                <span data-i18n="2fa.msg_info"></span>
             </div>
         </div>
-        <div class="form-group row">
-            <label for="idConfig" class="col-sm-2 col-form-label">Configuration</label>
-            <div class="col-sm-10">
-                <select class="form-control selectpicker" id="idConfig" name="config_name">
-                    <option value="">None</option>
+        <button type="button" id="disable_btn" class="btn btn-danger ms-4 px-6 align-self-center text-nowrap">
+            <span data-i18n="general.disable" class="indicator-label">
+                Disable
+            </span>
+            <span data-i18n="general.wait" class="indicator-progress">
+                Please wait...
+                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+            </span>
+        </button>
+    </div>
+</div>
+{{- end}}
+
+<div class="card shadow-sm">
+    <div class="card-header bg-light">
+        <h3 data-i18n="2fa.title" class="card-title section-title">Two-factor authentication using Authenticator apps</h3>
+    </div>
+    <div class="card-body">
+        {{- if not .TOTPConfig.Enabled}}
+        <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6 mb-5">
+            <i class="ki-duotone ki-shield-tick fs-2tx text-primary me-4">
+                <span class="path1"></span>
+                <span class="path2"></span>
+            </i>
+            <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
+                <div class="mb-3 mb-md-0 fw-semibold">
+                    <h4 class="text-gray-900 fw-bold">
+                        <span data-i18n="2fa.msg_disabled">Secure Your Account</span>
+                    </h4>
+                    <div class="fs-6 text-gray-800 pe-7">
+                        <span data-i18n="2fa.msg_info"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {{- end}}
+        <div class="form-group row mt-10">
+            <label for="id_config" data-i18n="general.configuration" class="col-md-3 col-form-label">Configuration</label>
+            <div class="col-md-9">
+                <select id="id_config" name="config_name" class="form-select" data-control="i18n-select2" data-hide-search="true">
+                    <option value="">---</option>
                     {{range .TOTPConfigs}}
                     <option value="{{.}}" {{if eq . $.TOTPConfig.ConfigName}}selected{{end}}>{{.}}</option>
                     {{end}}
@@ -62,369 +80,550 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
             </div>
         </div>
 
-        <div class="form-group row totpGenerate">
-            <div class="col-sm-12">
-                <a id="idTOTPGenerate" class="btn btn-primary" href="#" onclick="totpGenerate()" role="button">Generate new secret</a>
-            </div>
-        </div>
-
-        <div id="idTOTPDetails" class="totpDetails">
-            <div>
-                <p>Your new TOTP secret is: <span id="idSecret"></span></p>
-                <p>For quick setup, scan this QR code with your TOTP app:</p>
-                <img id="idQRCode" src="data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="QR code" />
-            </div>
-            <br>
-            <div>
-                <p>After you configured your app, enter a test code below to ensure everything works correctly. Recovery codes are automatically generated if missing or most of them have already been used</p>
-            </div>
-
-            <div class="input-group">
-                <input type="text" class="form-control" id="idPasscode" name="passcode" value="" placeholder="Authentication code" spellcheck="false">
-                <span class="input-group-append">
-                    <a id="idTOTPSave" class="btn btn-primary" href="#" onclick="totpValidate()" role="button">Verify and save</a>
+        <div class="d-flex justify-content-end mt-15">
+            {{- if .TOTPConfig.Enabled }}
+            <button type="button" id="generate_secret_btn" class="btn btn-light-primary px-10 me-10 d-none">
+                <span data-i18n="2fa.generate" class="indicator-label">
+                    Generate new secret
+                </span>
+                <span data-i18n="general.wait" class="indicator-progress">
+                    Please wait...
+                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                </span>
+            </button>
+            {{- end}}
+            <button type="button" id="save_btn" class="btn btn-primary px-10 d-none">
+                <span id="save_label" class="indicator-label"></span>
+                <span data-i18n="general.wait" class="indicator-progress">
+                    Please wait...
+                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                 </span>
-            </div>
-        </div>
-    </div>
-</div>
-
-{{if .TOTPConfig.Enabled }}
-<div class="card shadow mb-4">
-    <div class="card-header py-3">
-        <h6 class="m-0 font-weight-bold text-primary">Recovery codes</h6>
-    </div>
-    <div id="idRecoveryCodesCard" class="card-body">
-        <div id="successRecCodesMsg" class="card mb-4 border-left-success" style="display: none;">
-            <div id="successRecCodesTxt" class="card-body"></div>
-        </div>
-        <div id="errorRecCodesMsg" class="alert alert-warning fade show" style="display: none;" role="alert">
-            <span id="errorRecCodesTxt"></span>
-            <button type="button" class="close" aria-label="Close" onclick="dismissErrorRecCodesMsg();">
-              <span aria-hidden="true">&times;</span>
             </button>
         </div>
-        <script type="text/javascript">
-            function dismissErrorRecCodesMsg(){
-                $('#errorRecCodesMsg').hide();
-            }
-        </script>
-        <div>
-            <p>Recovery codes are a set of one time use codes that can be used in place of the TOTP to login to the web UI. You can use them if you lose access to your phone to login to your account and disable or regenerate TOTP configuration.</p>
-            <p>To keep your account secure, don't share or distribute your recovery codes. We recommend saving them with a secure password manager.</p>
-        </div>
-        <div class="form-group row viewRecoveryCodes">
-            <div class="col-sm-12">
-                <a class="btn btn-primary" href="#" onclick="getRecoveryCodes()" role="button">View</a>
-            </div>
-        </div>
-        <div id="idRecoveryCodes" style="display: none;">
-            <ul id="idRecoveryCodesList" class="list-group">
-            </ul>
-            <br>
-        </div>
-        <div>
-            <p>If you generate new recovery codes, you automatically invalidate old ones.</p>
-        </div>
-        <div class="form-group row">
-            <div class="col-sm-12">
-                <a class="btn btn-primary" href="#" onclick="generateRecoveryCodes()" role="button">Generate</a>
+
+    </div>
+</div>
+
+{{- if .TOTPConfig.Enabled}}
+<div class="accordion shadow-sm my-10" id="id_accordion">
+    <div class="accordion-item">
+        <h2 class="accordion-header" id="accordion_rec_codes">
+            <button class="accordion-button section-title text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_rec_codes_body" aria-expanded="false" aria-controls="accordion_rec_codes_body">
+                <span data-i18n="2fa.recovery_codes">
+                    Recovery codes
+                </span>
+            </button>
+        </h2>
+        <div id="accordion_rec_codes_body" class="accordion-collapse collapse" aria-labelledby="accordion_rec_codes" data-bs-parent="#id_accordion">
+            <div class="accordion-body">
+                <div class="fs-5 text-gray-800">
+                    <p data-i18n="2fa.recovery_codes_msg1">Recovery codes are a set of one time use codes that can be used in place of the authentication code to login to the web UI. You can use them if you lose access to your phone to login to your account and disable or regenerate two-factor configuration.</p>
+                    <p data-i18n="2fa.recovery_codes_msg2">To keep your account secure, don't share or distribute your recovery codes. We recommend saving them with a secure password manager.</p>
+                    <p data-i18n="2fa.recovery_codes_msg3" class="fs-4 fw-bold">If you generate new recovery codes, you automatically invalidate old ones.</p>
+                </div>
+                <div class="d-flex justify-content-end mt-10">
+                    <button type="button" id="generate_recovery_code_btn" class="btn btn-light-primary px-10 me-10">
+                        <span data-i18n="2fa.recovery_codes_generate" class="indicator-label">
+                            Generate
+                        </span>
+                        <span data-i18n="general.wait" class="indicator-progress">
+                            Please wait...
+                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                        </span>
+                    </button>
+                    <button type="button" id="view_recovery_code_btn" class="btn btn-primary px-10">
+                        <span data-i18n="2fa.recovery_codes_view" id="save_label" class="indicator-label">View</span>
+                        <span data-i18n="general.wait" class="indicator-progress">
+                            Please wait...
+                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                        </span>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 </div>
-{{end}}
-{{end}}
+{{- end}}
 
-{{define "dialog"}}
-<div class="modal fade" id="disableTOTPModal" tabindex="-1" role="dialog" aria-labelledby="disableTOTPModalLabel"
-    aria-hidden="true">
-    <div class="modal-dialog" role="document">
+{{- end}}
+
+{{- define "modals"}}
+<div class="modal fade" id="recovery_codes_modal" tabindex="-1">
+    <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="disableTOTPModalLabel">
-                    Confirmation required
-                </h5>
-                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
+                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                    <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
+                </div>
+            </div>
+            <div class="modal-body">
+                <div id="idRecoveryCodesList" class="d-flex flex-column">
+                </div>
             </div>
-            <div class="modal-body">Do you want to disable the TOTP configuration?</div>
             <div class="modal-footer">
-                <button class="btn btn-secondary" type="button" data-dismiss="modal">
-                    Cancel
-                </button>
-                <a class="btn btn-warning" href="#" onclick="totpDisable()">
-                    Disable
-                </a>
+                <button data-i18n="general.ok" class="btn btn-primary" type="button" data-bs-dismiss="modal">OK</button>
             </div>
         </div>
     </div>
 </div>
-{{end}}
 
-{{define "extra_js"}}
-<script src="{{.StaticURL}}/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
-<script type="text/javascript">
+<div class="modal fade" id="qrcode_modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 data-i18n="2fa.setup_title" class="modal-title">Set up two-factor authentication</h3>
+                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                    <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
+                </div>
+            </div>
+            <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
+                <div class="text-gray-700 fw-semibold fs-6 mb-10">
+                    <span data-i18n="2fa.setup_msg">
+                        Use your preferred Authenticator App (e.g. Microsoft Authenticator, Google Authenticator, Authy, 1Password etc. ) to scan the QR code. It will generate an authentication code for you to enter below.
+                    </span>
+                </div>
+                <div id="id_qr_code_container" class="pt-5 text-center">
+                </div>
+                <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed my-10 p-6">
+                    <i class="ki-duotone ki-information-5 fs-2tx text-warning me-4">
+                        <span class="path1"></span>
+                        <span class="path2"></span>
+                        <span class="path3"></span>
+                    </i>
+                    <div class="d-flex flex-stack flex-grow-1">
+                        <div class="fw-semibold">
+                            <div class="fs-6 text-gray-800">
+                                <span data-i18n="2fa.setup_help">If you have trouble using the QR code, select manual entry on your app, and enter the code:</span>
+                                <span id="id_secret" class="fw-bold text-gray-900 pt-2"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-    function totpGenerate() {
-        $('#errorTOTPMsg').hide();
-        let path = "{{.GenerateTOTPURL}}";
-        $.ajax({
-            url: path,
-            type: 'POST',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            data: JSON.stringify({"config_name": $('#idConfig option:selected').val()}),
-            dataType: 'json',
-            contentType: 'application/json',
-            timeout: 15000,
-            success: function (result) {
-                $('.totpDisable').hide();
-                $('.totpGenerate').hide();
-                $('#idSecret').text(result.secret);
-                $('#idQRCode').attr('src','data:image/png;base64, '+result.qr_code);
-                $('.totpDetails').show();
-                window.scrollTo(0, $("#idTOTPDetails").offset().top);
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                let txt = "Failed to generate a new TOTP secret";
-                if ($xhr) {
-                    let json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
-                }
-                $('#errorTOTPTxt').text(txt);
-                $('#errorTOTPMsg').show();
+                <div id="errorModalMsg" class="d-none rounded border-warning border border-dashed bg-light-warning d-flex align-items-center p-5 mb-10">
+                    <i class="ki-duotone ki-information-5 fs-3x text-warning me-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
+                    <div class="text-gray-700 fw-bold fs-5 d-flex flex-column pe-0 pe-sm-10">
+                        <span id="errorModalTxt"></span>
+                    </div>
+                    <button id="id_dismiss_error_modal_msg" type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto">
+                        <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
+                    </button>
+                </div>
+
+                <div class="fv-row">
+                    <input data-i18n="[placeholder]login.auth_code" type="text" id="id_passcode" name="passcode" class="form-control form-control-lg form-control-solid" placeholder="Enter authentication code" spellcheck="false" />
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button data-i18n="general.cancel" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary ms-6" id="passcode_btn">
+                    <span data-i18n="general.submit" class="indicator-label">
+                        Submit
+                    </span>
+                    <span data-i18n="general.wait" class="indicator-progress">
+                        Please wait...
+                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+{{- end}}
+
+{{- define "extra_js"}}
+<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
+    const qrModal = new bootstrap.Modal('#qrcode_modal');
+    const recCodesModal = new bootstrap.Modal('#recovery_codes_modal');
+
+    function onConfigChanged() {
+        let selectedConfig = $('#id_config option:selected').val();
+        if (selectedConfig == ""){
+            $('#save_btn').addClass("d-none");
+            $('#generate_secret_btn').addClass("d-none");
+        } else {
+            //{{- if .TOTPConfig.Enabled }}
+            if (selectedConfig == "{{.TOTPConfig.ConfigName}}"){
+                $('#save_label').text($.t('general.submit'));
+            } else {
+                $('#save_label').text($.t('general.enable'));
             }
-        });
-    }
-
-    function totpValidate() {
-        $('#errorTOTPMsg').hide();
-        let passcode = $('#idPasscode').val();
-        if (passcode == "") {
-            $('#errorTOTPTxt').text("The verification code is required");
-            $('#errorTOTPMsg').show();
-            return;
+            $('#save_btn').removeClass("d-none");
+            $('#generate_secret_btn').removeClass("d-none");
+            //{{- else}}
+            $('#save_btn').removeClass("d-none");
+            $('#save_label').text($.t('general.enable'));
+            $('#generate_secret_btn').addClass("d-none");
+            //{{- end}}
         }
-        var path = "{{.ValidateTOTPURL}}";
-        $.ajax({
-            url: path,
-            type: 'POST',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            data: JSON.stringify({"passcode": passcode, "config_name": $('#idConfig option:selected').val(), "secret": $('#idSecret').text()}),
-            dataType: 'json',
-            contentType: 'application/json',
-            timeout: 15000,
-            success: function (result) {
-                totpSave();
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                var txt = "Failed to validate the provided passcode";
-                if ($xhr) {
-                    var json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
-                }
-                $('#errorTOTPTxt').text(txt);
-                $('#errorTOTPMsg').show();
-            }
-        });
-    }
-
-    function totpSave() {
-        let path = "{{.SaveTOTPURL}}";
-        $('#errorTOTPMsg').hide();
-
-        $.ajax({
-            url: path,
-            type: 'POST',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            data: JSON.stringify({"enabled": true, "config_name": $('#idConfig option:selected').val(), "secret": {"status": "Plain", "payload": $('#idSecret').text()}}),
-            dataType: 'json',
-            contentType: 'application/json',
-            timeout: 15000,
-            success: function (result) {
-                $('#successTOTPTxt').text("Configuration saved");
-                $('#successTOTPMsg').show();
-                    setTimeout(function () {
-                        location.reload();
-                    }, 3000);
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                let txt = "Failed to save the new configuration";
-                if ($xhr) {
-                    let json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
-                }
-                $('#errorTOTPTxt').text(txt);
-                $('#errorTOTPMsg').show();
-            }
-        });
-    }
-
-    function totpDisableAsk() {
-        $('#disableTOTPModal').modal('show');
-    }
-
-    function totpDisable() {
-        $('#disableTOTPModal').modal('hide');
-        $('#errorTOTPMsg').hide();
-        let path = "{{.SaveTOTPURL}}";
-
-        $.ajax({
-            url: path,
-            type: 'POST',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            data: JSON.stringify({"enabled": false}),
-            dataType: 'json',
-            contentType: 'application/json',
-            timeout: 15000,
-            success: function (result) {
-                location.reload();
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                var txt = "Failed to disable the current configuration";
-                if ($xhr) {
-                    var json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
-                }
-                $('#errorTOTPTxt').text(txt);
-                $('#errorTOTPMsg').show();
-            }
-        });
-    }
-
-    function getRecoveryCodes() {
-        $('#errorRecCodesMsg').hide();
-        let path = "{{.RecCodesURL}}";
-
-        $.ajax({
-            url: path,
-            type: 'GET',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            timeout: 15000,
-            success: function (result) {
-                $('.viewRecoveryCodes').hide();
-                $('#idRecoveryCodesList').empty();
-                $.each(result, function(key, item) {
-                    if (item.used) {
-                        $('#idRecoveryCodesList').append(`<li class="list-group-item" style="text-decoration: line-through;">${item.code}</li>`);
-                    } else {
-                        $('#idRecoveryCodesList').append(`<li class="list-group-item">${item.code}</li>`);
-                    }
-                });
-                $('#idRecoveryCodes').show();
-                window.scrollTo(0, $("#idRecoveryCodesCard").offset().top);
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                let txt = "Failed to get your recovery codes";
-                if ($xhr) {
-                    let json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
-                }
-                $('#errorRecCodesTxt').text(txt);
-                $('#errorRecCodesMsg').show();
-                window.scrollTo(0, $("#idRecoveryCodesCard").offset().top);
-            }
-        });
     }
 
     function generateRecoveryCodes() {
-        $('#errorRecCodesMsg').hide();
-        let path = "{{.RecCodesURL}}";
+        el = document.querySelector('#generate_recovery_code_btn');
+        el.setAttribute('data-kt-indicator', 'on');
+		el.disabled = true;
 
-        $.ajax({
-            url: path,
-            type: 'POST',
-            headers: {'X-CSRF-TOKEN' : '{{.CSRFToken}}'},
-            dataType: 'json',
-            contentType: 'application/json',
-            timeout: 15000,
-            success: function (result) {
-                $('.viewRecoveryCodes').hide();
-                $('#idRecoveryCodesList').empty();
-                $.each(result, function(key, item) {
-                    $('#idRecoveryCodesList').append(`<li class="list-group-item">${item}</li>`);
-                });
-                $('#idRecoveryCodes').show();
-                $('#successRecCodesTxt').text('Recovery codes generated successfully');
-                $('#successRecCodesMsg').show();
-                window.scrollTo(0, $("#idRecoveryCodesCard").offset().top);
-                setTimeout(function () {
-                    $('#successRecCodesMsg').hide();
-                }, 5000);
-            },
-            error: function ($xhr, textStatus, errorThrown) {
-                let txt = "Failed to generate new recovery codes";
-                if ($xhr) {
-                    let json = $xhr.responseJSON;
-                    if (json) {
-                        if (json.message){
-                            txt += ": " + json.message;
-                        } else {
-                            txt += ": " + json.error;
-                        }
-                    }
+        axios.post('{{.RecCodesURL}}', null, {
+            	timeout: 15000,
+                headers: {
+                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
+                },
+                validateStatus: function (status) {
+                    return status == 200;
                 }
-                $('#errorRecCodesTxt').text(txt);
-                $('#errorRecCodesMsg').show();
-                window.scrollTo(0, $("#idRecoveryCodesCard").offset().top);
+       	    }).then(function (response){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                $('#idRecoveryCodesTitle').text($.t('2fa.new_recovery_codes'));
+                let recList = $('#idRecoveryCodesList');
+                recList.empty();
+                $.each(response.data, function(key, item) {
+                    itemCode = escapeHTML(item);
+                    recList.append(`<li class="d-flex align-items-center py-2 fw-semibold fs-5 text-gray-800"><span class="bullet bullet-dot me-5"></span>${itemCode}</li>`);
+                });
+                recCodesModal.show();
+            }).catch(function (error){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                ModalAlert.fire({
+                    text: $.t('2fa.recovery_codes_gen_err'),
+                    icon: "warning",
+                    confirmButtonText: $.t('general.ok'),
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                });
+            });
+    }
+
+    function viewRecoveryCodes() {
+        el = document.querySelector('#view_recovery_code_btn');
+        el.setAttribute('data-kt-indicator', 'on');
+		el.disabled = true;
+
+        axios.get('{{.RecCodesURL}}',{
+            	timeout: 15000,
+                headers: {
+                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
+                },
+                validateStatus: function (status) {
+                    return status == 200;
+                }
+       	    }).then(function (response){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                $('#idRecoveryCodesTitle').text($.t('2fa.recovery_codes'));
+                let recList = $('#idRecoveryCodesList');
+                recList.empty();
+                $.each(response.data, function(key, item) {
+                    itemCode = escapeHTML(item.code);
+                    let txtStyleClass = "";
+                    if (item.used) {
+                        txtStyleClass = "line-through";
+                    }
+                    recList.append(`<li class="d-flex align-items-center py-2 fw-semibold fs-5 text-gray-800 ${txtStyleClass}"><span class="bullet bullet-dot me-5"></span>${itemCode}</li>`);
+                });
+                recCodesModal.show();
+            }).catch(function (error){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                ModalAlert.fire({
+                    text: $.t('2fa.recovery_codes_get_err'),
+                    icon: "warning",
+                    confirmButtonText: $.t('general.ok'),
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                });
+            });
+    }
+
+    function disableConfig() {
+        ModalAlert.fire({
+            text: $.t('2fa.disable_question'),
+            icon: "warning",
+            confirmButtonText: $.t('general.confirm'),
+            cancelButtonText: $.t('general.cancel'),
+            customClass: {
+                confirmButton: "btn btn-danger",
+                cancelButton: 'btn btn-secondary'
+            }
+        }).then((result) => {
+            if (result.isConfirmed){
+                doSaveConfig(document.querySelector('#disable_btn'), null, false, true);
             }
         });
     }
 
-    function handleConfigSelection() {
-        var selectedConfig = $('#idConfig option:selected').val();
-        if (selectedConfig == ""){
-            $('.totpGenerate').hide();
-        } else {
-            $('.totpGenerate').show();
+    function validatePasscode() {
+        el = document.querySelector('#passcode_btn');
+        let errDivEl = $('#errorModalMsg');
+        let errTxtEl = $('#errorModalTxt');
+        let errorMessage = '2fa.auth_code_invalid';
+        let passcode = $('#id_passcode').val();
+
+        errDivEl.addClass("d-none");
+        if (passcode == "") {
+            setI18NData(errTxtEl, '2fa.auth_code_required');
+            errDivEl.removeClass("d-none");
+            return;
         }
-        $('.totpDetails').hide();
-        {{if .TOTPConfig.Enabled }}
-        $('.totpDisable').show();
-        {{end}}
+        el.setAttribute('data-kt-indicator', 'on');
+		el.disabled = true;
+
+        axios.post("{{.ValidateTOTPURL}}", {
+                passcode: passcode,
+                config_name: $('#id_config option:selected').val(),
+                secret: $('#id_secret').text()
+            }, {
+                headers: {
+                    timeout: 15000,
+                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
+                },
+                validateStatus: function (status) {
+                    return status == 200;
+                }
+            }).then(function (response){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                if (!response.data.message) {
+                    setI18NData(errTxtEl, errorMessage);
+                    errDivEl.removeClass("d-none");
+                    return;
+                }
+                qrModal.hide();
+                doSaveConfig(null, null, true, false);
+            }).catch(function (error){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                setI18NData(errTxtEl, errorMessage);
+                errDivEl.removeClass("d-none");
+            });
     }
 
-    $(document).ready(function () {
-        handleConfigSelection();
-        $('.totpDetails').hide();
-        {{if not .TOTPConfig.Enabled }}
-        $('.totpDisable').hide();
-        {{end}}
-
-        $('#idConfig').change(function() {
-            handleConfigSelection();
+    function confirmGenerateSecret() {
+        ModalAlert.fire({
+            text: $.t('2fa.generate_question'),
+            icon: "warning",
+            confirmButtonText: $.t('general.confirm'),
+            cancelButtonText: $.t('general.cancel'),
+            customClass: {
+                confirmButton: "btn btn-danger",
+                cancelButton: 'btn btn-secondary'
+            }
+        }).then((result) => {
+            if (result.isConfirmed){
+                el = document.querySelector('#generate_secret_btn');
+                configName = $('#id_config option:selected').val();
+                generateSecret(el,configName);
+            }
         });
+    }
+
+    function generateSecret(el, configName) {
+        if (!el || !configName){
+            confirmGenerateSecret();
+            return;
+        }
+
+        let errorMessage =  '2fa.auth_secret_gen_err';
+        $('#id_secret').text("");
+        el.setAttribute('data-kt-indicator', 'on');
+		el.disabled = true;
+
+        axios.post("{{.GenerateTOTPURL}}", {
+                config_name: configName
+            }, {
+                headers: {
+                    timeout: 15000,
+                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
+                },
+                validateStatus: function (status) {
+                    return status == 200;
+                }
+            }).then(function (response){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                if (!response.data.secret) {
+                    ModalAlert.fire({
+                        text: $.t(errorMessage),
+                        icon: "warning",
+                        confirmButtonText: $.t('general.ok'),
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    });
+                    return;
+                }
+                $('#id_secret').text(response.data.secret);
+                $('#errorModalMsg').addClass("d-none");
+                $('#id_passcode').val("");
+                let qrCodeContainer = document.getElementById("id_qr_code_container");
+                clearChilds(qrCodeContainer);
+                let qrCodeImg = document.createElement("img");
+                qrCodeImg.classList.add("mw-150px");
+                qrCodeImg.src = "{{.MFAURL}}/qrcode?url="+encodeURIComponent(response.data.url);
+                qrCodeImg.alt = $.t('general.qr_code');
+                qrCodeContainer.appendChild(qrCodeImg);
+                qrModal.show();
+            }).catch(function (error){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                ModalAlert.fire({
+                    text: $.t(errorMessage),
+                    icon: "warning",
+                    confirmButtonText: $.t('general.ok'),
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                });
+            });
+    }
+
+    function doSaveConfig(el, configName, full, disabled) {
+        if (!el){
+            el = document.querySelector('#save_btn');
+        }
+        if (!configName) {
+            configName = $('#id_config option:selected').val();
+        }
+        let errorMessage = '2fa.save_err';
+        let postData = {};
+        if (full){
+            postData.config_name = configName;
+            postData.secret = {
+                status: "Plain",
+                payload: $('#id_secret').text()
+            }
+        }
+        if (disabled){
+            postData.enabled = false;
+        } else {
+            postData.enabled = true;
+        }
+        el.setAttribute('data-kt-indicator', 'on');
+		el.disabled = true;
+
+        axios.post("{{.SaveTOTPURL}}", postData, {
+                headers: {
+                    timeout: 15000,
+                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
+                },
+                validateStatus: function (status) {
+                    return status == 200;
+                }
+            }).then(function (response){
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                if (!response.data.message) {
+                    ModalAlert.fire({
+                        text: $.t(errorMessage),
+                        icon: "warning",
+                        confirmButtonText: $.t('general.ok'),
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    });
+                    return;
+                }
+                ModalAlert.fire({
+                    text: $.t('general.config_saved'),
+                    icon: "success",
+                    confirmButtonText: $.t('general.ok'),
+                    customClass: {
+                        confirmButton: 'btn btn-primary'
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed){
+                        location.reload();
+                    }
+                });
+            }).catch(function (error) {
+                el.removeAttribute('data-kt-indicator');
+                el.disabled = false;
+                ModalAlert.fire({
+                    text: $.t(errorMessage),
+                    icon: "warning",
+                    confirmButtonText: $.t('general.ok'),
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                });
+            });
+
+    }
+
+    function saveConfig() {
+        let selectedConfig = $('#id_config option:selected').val();
+        let saveBtn = document.querySelector('#save_btn');
+        if (selectedConfig == "{{.TOTPConfig.ConfigName}}"){
+            doSaveConfig(saveBtn, selectedConfig, false, false);
+            return;
+        }
+        generateSecret(saveBtn, selectedConfig);
+    }
+
+    $(document).on("i18nshow", function(){
+        onConfigChanged();
+
+        var dismissErrorModalBtn = $('#id_dismiss_error_modal_msg');
+        if (dismissErrorModalBtn){
+            dismissErrorModalBtn.on("click",function(){
+                $('#errorModalMsg').addClass("d-none");
+            });
+        }
+
+        var disableBtn = $('#disable_btn');
+        if (disableBtn){
+            disableBtn.on("click", function(){
+                disableConfig();
+            });
+        }
+
+        var generateSecretBtn = $('#generate_secret_btn');
+        if (generateSecretBtn){
+            generateSecretBtn.on("click", function(){
+                generateSecret();
+            });
+        }
+
+        var saveBtn = $('#save_btn');
+        if (saveBtn){
+            saveBtn.on("click", function(){
+                saveConfig();
+            });
+        }
+
+        var generateRecoveryCodeBtn = $('#generate_recovery_code_btn');
+        if (generateRecoveryCodeBtn){
+            generateRecoveryCodeBtn.on("click", function(){
+                generateRecoveryCodes();
+            });
+        }
+
+        var viewRecoveryCodesBtn = $('#view_recovery_code_btn');
+        if (viewRecoveryCodesBtn){
+            viewRecoveryCodesBtn.on("click", function(){
+                viewRecoveryCodes();
+            });
+        }
+
+        var passcodeBtn = $('#passcode_btn');
+        if (passcodeBtn){
+            passcodeBtn.on("click", function() {
+                validatePasscode();
+            });
+        }
+
+        var configSelect = $('#id_config');
+        if (configSelect){
+            configSelect.on("change", function(){
+                onConfigChanged();
+            });
+        }
+
     });
+
 </script>
-{{end}}
\ No newline at end of file
+{{- end}}
\ No newline at end of file
diff --git a/templates/webclient/mfa.html b/templates/webclient/mfa.html
index 9c25adff..452f8c66 100644
--- a/templates/webclient/mfa.html
+++ b/templates/webclient/mfa.html
@@ -600,7 +600,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
         }
         let postData = {
             protocols: protocolsArray
-        }
+        };
         if (full){
             postData.config_name = configName;
             postData.secret = {