diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json
index 753ffbc19..4f38b4fff 100644
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -239,8 +239,7 @@
   "password_not_set": {
     "title": "密码未设置",
     "close": "关闭",
-    "body1": "受保护的笔记使用用户密码加密，但密码尚未设置。",
-    "body2": "点击<a class=\"open-password-options-button\" href=\"javascript:\">这里</a>打开选项对话框并设置您的密码。"
+    "body1": "受保护的笔记使用用户密码加密，但密码尚未设置。"
   },
   "prompt": {
     "title": "提示",
diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json
index 1eed6494d..c013b3eec 100644
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -239,8 +239,7 @@
   "password_not_set": {
     "title": "Das Passwort ist nicht festgelegt",
     "close": "Schließen",
-    "body1": "Geschützte Notizen werden mit einem Benutzerpasswort verschlüsselt, es wurde jedoch noch kein Passwort festgelegt.",
-    "body2": "Um Notizen verschlüsseln zu können, klicke <a class=\"open-password-options-button\" href=\"javascript:\">hier</a> um das Optionsmenu zu öffnen und ein Passwort zu setzen."
+    "body1": "Geschützte Notizen werden mit einem Benutzerpasswort verschlüsselt, es wurde jedoch noch kein Passwort festgelegt."
   },
   "prompt": {
     "title": "Prompt",
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 43a0a7dc8..d6a745932 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -244,7 +244,8 @@
     "title": "Password is not set",
     "close": "Close",
     "body1": "Protected notes are encrypted using a user password, but password has not been set yet.",
-    "body2": "To be able to protect notes, click <a class=\"open-password-options-button\" href=\"javascript:\">here</a> to open the Options dialog and set your password."
+    "body2": "To be able to protect notes, click the button below to open the Options dialog and set your password.",
+    "go_to_password_options": "Go to Password options"
   },
   "prompt": {
     "title": "Prompt",
diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json
index 2147f06c0..21b9eed84 100644
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -242,8 +242,7 @@
   "password_not_set": {
     "title": "La contraseña no está establecida",
     "close": "Cerrar",
-    "body1": "Las notas protegidas se cifran mediante una contraseña de usuario, pero la contraseña aún no se ha establecido.",
-    "body2": "Para poder proteger notas, dé clic <a class=\"open-password-options-button\" href=\"javascript:\">aquí</a> para abrir el diálogo de Opciones y establecer tu contraseña."
+    "body1": "Las notas protegidas se cifran mediante una contraseña de usuario, pero la contraseña aún no se ha establecido."
   },
   "prompt": {
     "title": "Aviso",
diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json
index 168f8fb2a..306f98763 100644
--- a/apps/client/src/translations/fr/translation.json
+++ b/apps/client/src/translations/fr/translation.json
@@ -239,8 +239,7 @@
   "password_not_set": {
     "title": "Le mot de passe n'est pas défini",
     "close": "Fermer",
-    "body1": "Les notes protégées sont cryptées à l'aide d'un mot de passe utilisateur, mais le mot de passe n'a pas encore été défini.",
-    "body2": "Pour pouvoir protéger les notes, cliquez <a class=\"open-password-options-button\" href=\"javascript:\">ici</a> pour ouvrir les Options et définir votre mot de passe."
+    "body1": "Les notes protégées sont cryptées à l'aide d'un mot de passe utilisateur, mais le mot de passe n'a pas encore été défini."
   },
   "prompt": {
     "title": "Prompt",
diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json
index 86c16d433..4752ed63c 100644
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -954,7 +954,6 @@
   },
   "password_not_set": {
     "body1": "Notițele protejate sunt criptate utilizând parola de utilizator, dar nu a fost setată nicio parolă.",
-    "body2": "Pentru a putea să protejați notițe, clic <a class=\"open-password-options-button\" href=\"javascript:\">aici</a> pentru a deschide ecranul de opțiuni și pentru a seta parola.",
     "title": "Parola nu este setată",
     "close": "Închide"
   },
diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json
index 2f1d71b6d..9d2b79540 100644
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -218,8 +218,7 @@
   },
   "password_not_set": {
     "title": "密碼未設定",
-    "body1": "受保護的筆記使用用戶密碼加密，但密碼尚未設定。",
-    "body2": "點擊<a class=\"open-password-options-button\" href=\"javascript:\">這裡</a>打開選項對話框並設定您的密碼。"
+    "body1": "受保護的筆記使用用戶密碼加密，但密碼尚未設定。"
   },
   "prompt": {
     "title": "提示",
diff --git a/apps/client/src/widgets/dialogs/password_not_set.ts b/apps/client/src/widgets/dialogs/password_not_set.ts
deleted file mode 100644
index bc667f14f..000000000
--- a/apps/client/src/widgets/dialogs/password_not_set.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { openDialog } from "../../services/dialog.js";
-import { t } from "../../services/i18n.js";
-import BasicWidget from "../basic_widget.js";
-import { Modal } from "bootstrap";
-
-const TPL = /*html*/`
-<div class="password-not-set-dialog modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-md" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">${t("password_not_set.title")}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("password_not_set.close")}"></button>
-            </div>
-            <div class="modal-body">
-                ${t("password_not_set.body1")}
-
-                ${t("password_not_set.body2")}
-            </div>
-        </div>
-    </div>
-</div>
-`;
-
-export default class PasswordNoteSetDialog extends BasicWidget {
-
-    private modal!: Modal;
-    private $openPasswordOptionsButton!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-        this.$openPasswordOptionsButton = this.$widget.find(".open-password-options-button");
-        this.$openPasswordOptionsButton.on("click", () => {
-            this.modal.hide();
-            this.triggerCommand("showOptions", { section: "_optionsPassword" });
-        });
-    }
-
-    showPasswordNotSetEvent() {
-        openDialog(this.$widget);
-    }
-}
diff --git a/apps/client/src/widgets/dialogs/password_not_set.tsx b/apps/client/src/widgets/dialogs/password_not_set.tsx
new file mode 100644
index 000000000..398579ebd
--- /dev/null
+++ b/apps/client/src/widgets/dialogs/password_not_set.tsx
@@ -0,0 +1,34 @@
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import Modal from "../react/Modal";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import appContext from "../../components/app_context";
+
+function PasswordNotSetDialogComponent() {
+    return (
+        <Modal
+            size="md" className="password-not-set-dialog"
+            title={t("password_not_set.title")}
+            footer={<Button icon="bx bx-lock" text={t("password_not_set.go_to_password_options")} onClick={() => {
+                closeActiveDialog();
+                appContext.triggerCommand("showOptions", { section: "_optionsPassword" });
+            }} />}
+        >
+            <p>{t("password_not_set.body1")}</p>
+            <p>{t("password_not_set.body2")}</p>
+        </Modal>
+    );
+}
+
+export default class PasswordNotSetDialog extends ReactBasicWidget {
+
+    get component() {
+        return <PasswordNotSetDialogComponent />;
+    }
+
+    showPasswordNotSetEvent() {
+        openDialog(this.$widget);
+    }
+
+}