diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json
index 175b4928c..e9ad8c868 100644
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -987,7 +987,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "显示受保护的笔记需要输入您的密码：",
-    "start_session_button": "开始受保护的会话 <kbd>Enter</kbd>",
+    "start_session_button": "开始受保护的会话",
     "started": "受保护的会话已启动。",
     "wrong_password": "密码错误。",
     "protecting-finished-successfully": "保护操作已成功完成。",
diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json
index 7babfe54d..3720d581c 100644
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -984,7 +984,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Um die geschützte Notiz anzuzeigen, musst du dein Passwort eingeben:",
-    "start_session_button": "Starte eine geschützte Sitzung <kbd>Eingabetaste</kbd>",
+    "start_session_button": "Starte eine geschützte Sitzung",
     "started": "Geschützte Sitzung gestartet.",
     "wrong_password": "Passwort flasch.",
     "protecting-finished-successfully": "Geschützt erfolgreich beendet.",
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index af9c47ee3..8b088abdd 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -987,7 +987,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
-    "start_session_button": "Start protected session <kbd>enter</kbd>",
+    "start_session_button": "Start protected session",
     "started": "Protected session has been started.",
     "wrong_password": "Wrong password.",
     "protecting-finished-successfully": "Protecting finished successfully.",
diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json
index d040703e2..c5ba0185f 100644
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -968,7 +968,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Para mostrar una nota protegida es necesario ingresar su contraseña:",
-    "start_session_button": "Iniciar sesión protegida <kbd>Enter</kbd>",
+    "start_session_button": "Iniciar sesión protegida",
     "started": "La sesión protegida ha iniciado.",
     "wrong_password": "Contraseña incorrecta.",
     "protecting-finished-successfully": "La protección finalizó exitosamente.",
diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json
index 377a23ff0..8bbcb34d7 100644
--- a/apps/client/src/translations/fr/translation.json
+++ b/apps/client/src/translations/fr/translation.json
@@ -967,7 +967,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "L'affichage de la note protégée nécessite la saisie de votre mot de passe :",
-    "start_session_button": "Démarrer une session protégée <kbd>Entrée</kbd>",
+    "start_session_button": "Démarrer une session protégée",
     "started": "La session protégée a démarré.",
     "wrong_password": "Mot de passe incorrect.",
     "protecting-finished-successfully": "La protection de la note s'est terminée avec succès.",
diff --git a/apps/client/src/translations/pt/translation.json b/apps/client/src/translations/pt/translation.json
index 0967ef424..74a3a8dca 100644
--- a/apps/client/src/translations/pt/translation.json
+++ b/apps/client/src/translations/pt/translation.json
@@ -1 +1,5 @@
-{}
+{
+  "protected_session": {
+    "start_session_button": "Iniciar sessão protegida"
+  }
+}
diff --git a/apps/client/src/translations/pt_br/translation.json b/apps/client/src/translations/pt_br/translation.json
index 4d6cc3c4f..675109158 100644
--- a/apps/client/src/translations/pt_br/translation.json
+++ b/apps/client/src/translations/pt_br/translation.json
@@ -1200,7 +1200,7 @@
     "unprotecting-in-progress-count": "Remoções de proteção em andamento: {{count}}",
     "protecting-title": "Estado da proteção",
     "unprotecting-title": "Estado da remoção de proteção",
-    "start_session_button": "Iniciar sessão protegida <kbd>enter</kbd>"
+    "start_session_button": "Iniciar sessão protegida"
   },
   "relation_map": {
     "open_in_new_tab": "Abrir em nova aba",
diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json
index 72c70f526..04486be81 100644
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -979,7 +979,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Afișarea notițelor protejate necesită introducerea parolei:",
-    "start_session_button": "Deschide sesiunea protejată <kbd>enter</kbd>",
+    "start_session_button": "Deschide sesiunea protejată",
     "started": "Sesiunea protejată este activă.",
     "wrong_password": "Parolă greșită.",
     "protecting-finished-successfully": "Protejarea a avut succes.",
diff --git a/apps/client/src/translations/ru/translation.json b/apps/client/src/translations/ru/translation.json
index cf16095a6..4645f04d5 100644
--- a/apps/client/src/translations/ru/translation.json
+++ b/apps/client/src/translations/ru/translation.json
@@ -1687,7 +1687,7 @@
     "unprotecting-title": "Статус снятия защиты",
     "protecting-finished-successfully": "Защита успешно завершена.",
     "unprotecting-finished-successfully": "Снятие защиты успешно завершено.",
-    "start_session_button": "Начать защищенный сеанс <kbd>enter</kbd>",
+    "start_session_button": "Начать защищенный сеанс",
     "protecting-in-progress": "Защита в процессе: {{count}}",
     "unprotecting-in-progress-count": "Снятие защиты в процессе: {{count}}",
     "started": "Защищенный сеанс запущен.",
diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json
index 432f561a2..ea4326465 100644
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -984,7 +984,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "顯示受保護的筆記需要輸入您的密碼：",
-    "start_session_button": "開始受保護的作業階段 <kbd>Enter</kbd>",
+    "start_session_button": "開始受保護的作業階段",
     "started": "已啟動受保護的作業階段。",
     "wrong_password": "密碼錯誤。",
     "protecting-finished-successfully": "已成功完成保護操作。",
diff --git a/apps/client/src/translations/uk/translation.json b/apps/client/src/translations/uk/translation.json
index cad50a27b..0c0d1a737 100644
--- a/apps/client/src/translations/uk/translation.json
+++ b/apps/client/src/translations/uk/translation.json
@@ -1090,7 +1090,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Для відображення захищеної нотатки потрібно ввести пароль:",
-    "start_session_button": "Розпочати захищений сеанс <kbd>enter</kbd>",
+    "start_session_button": "Розпочати захищений сеанс",
     "started": "Захищений сеанс розпочато.",
     "wrong_password": "Неправильний пароль.",
     "protecting-finished-successfully": "Захист успішно завершено.",
diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx
index dd7191f10..c1a15a675 100644
--- a/apps/client/src/widgets/NoteDetail.tsx
+++ b/apps/client/src/widgets/NoteDetail.tsx
@@ -8,6 +8,7 @@ import Empty from "./type_widgets/Empty";
 import { VNode } from "preact";
 import Doc from "./type_widgets/Doc";
 import { TypeWidgetProps } from "./type_widgets/type_widget";
+import ProtectedSession from "./type_widgets/ProtectedSession";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -55,14 +56,11 @@ function useNoteInfo() {
 
 function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: TypeWidgetProps) {
     switch (noteType) {
-        case "empty":
-            return <Empty />
-        case "doc":
-            return <Doc {...props} />
-        case "search":
-            return <div className="note-detail-none note-detail-printable" />
-        default:
-            break;
+        case "empty": return <Empty />
+        case "doc": return <Doc {...props} />
+        case "search": return <div className="note-detail-none note-detail-printable" />
+        case "protectedSession": return <ProtectedSession />
+        default: break;
     }
 }
 
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.css b/apps/client/src/widgets/type_widgets/ProtectedSession.css
new file mode 100644
index 000000000..0ade6a39a
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.css
@@ -0,0 +1,9 @@
+.protected-session-password-component {
+    width: 300px;
+    margin: 30px auto auto;
+}
+
+.protected-session-password-component input,
+.protected-session-password-component button {
+    margin-top: 12px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
new file mode 100644
index 000000000..55d5a48b6
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
@@ -0,0 +1,42 @@
+import { useCallback, useRef } from "preact/hooks";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import FormGroup from "../react/FormGroup";
+import FormTextBox from "../react/FormTextBox";
+import "./ProtectedSession.css";
+import protected_session from "../../services/protected_session";
+import type { TargetedSubmitEvent } from "preact";
+
+export default function ProtectedSession() {
+    const passwordRef = useRef<HTMLInputElement>(null);
+
+    const submitCallback = useCallback((e: TargetedSubmitEvent<HTMLFormElement>) => {
+        if (!passwordRef.current) return;
+        e.preventDefault();
+
+        const password = String(passwordRef.current.value);
+        passwordRef.current.value = "";
+        protected_session.setupProtectedSession(password);
+    }, [ passwordRef ]);
+
+    return (
+        <div className="protected-session-password-component note-detail-printable">
+            <form class="protected-session-password-form" onSubmit={submitCallback}>
+                <FormGroup name="protected-session-password-in-detail" label={t("protected_session.enter_password_instruction")}>
+                    <FormTextBox
+                        type="password"
+                        className="protected-session-password"
+                        autocomplete="current-password"
+                        inputRef={passwordRef}
+                    />
+                </FormGroup>
+
+                <Button
+                    text={t("protected_session.start_session_button")}
+                    primary
+                    keyboardShortcut="Enter"
+                />
+            </form>
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets_old/protected_session.ts b/apps/client/src/widgets/type_widgets_old/protected_session.ts
deleted file mode 100644
index e02e14250..000000000
--- a/apps/client/src/widgets/type_widgets_old/protected_session.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import protectedSessionService from "../../services/protected_session.js";
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="protected-session-password-component note-detail-printable">
-    <style>
-    .protected-session-password-component {
-        width: 300px;
-        margin: 30px auto auto;
-    }
-
-    .protected-session-password-component input,
-    .protected-session-password-component button {
-        margin-top: 12px;
-    }
-
-    </style>
-
-    <form class="protected-session-password-form">
-        <div class="form-group">
-            <label for="protected-session-password-in-detail">${t("protected_session.enter_password_instruction")}</label>
-            <input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password" autofocus autocomplete="current-password">
-        </div>
-
-        <button class="btn btn-primary">${t("protected_session.start_session_button")}</button>
-    </form>
-</div>`;
-
-export default class ProtectedSessionTypeWidget extends TypeWidget {
-
-    private $passwordForm!: JQuery<HTMLElement>;
-    private $passwordInput!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "protectedSession";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$passwordForm = this.$widget.find(".protected-session-password-form");
-        this.$passwordInput = this.$widget.find(".protected-session-password");
-
-        this.$passwordForm.on("submit", () => {
-            const password = String(this.$passwordInput.val());
-            this.$passwordInput.val("");
-
-            protectedSessionService.setupProtectedSession(password);
-
-            return false;
-        });
-
-        super.doRender();
-    }
-}