diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index d0de55aaa..fc74daf8e 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -738,6 +738,18 @@ function isLaunchBarConfig(noteId: string) {
     return ["_lbRoot", "_lbAvailableLaunchers", "_lbVisibleLaunchers", "_lbMobileRoot", "_lbMobileAvailableLaunchers", "_lbMobileVisibleLaunchers"].includes(noteId);
 }
 
+export function toggleBodyClass(prefix: string, value: string) {
+    const $body = $("body");
+    for (const clazz of Array.from($body[0].classList)) {
+        // create copy to safely iterate over while removing classes
+        if (clazz.startsWith(prefix)) {
+            $body.removeClass(clazz);
+        }
+    }
+
+    $body.addClass(prefix + value);
+}
+
 export default {
     reloadFrontendApp,
     restartDesktopApp,
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
index c08f7289b..d1d362128 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -1,14 +1,17 @@
+import { useEffect } from "preact/hooks";
 import { t } from "../../../services/i18n";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormRadioGroup from "../../react/FormRadioGroup";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
+import { toggleBodyClass } from "../../../services/utils";
 
 export default function TextNoteSettings() {
     return (
         <>
             <FormattingToolbar />
             <EditorFeatures />
+            <HeadingStyle />
         </>
     )
 }
@@ -65,4 +68,26 @@ function EditorFeatures() {
             />
         </OptionsSection>
     );
+}
+
+function HeadingStyle() {
+    const [ headingStyle, setHeadingStyle ] = useTriliumOption("headingStyle");
+
+    useEffect(() => {
+        toggleBodyClass("heading-style-", headingStyle);
+    }, [ headingStyle ]);
+
+    return (
+        <OptionsSection title={t("heading_style.title")}>
+            <FormRadioGroup
+                name="heading-style"
+                currentValue={headingStyle} onChange={setHeadingStyle}
+                values={[
+                    { value: "plain", label: t("heading_style.plain") },
+                    { value: "underline", label: t("heading_style.underline") },
+                    { value: "markdown", label: t("heading_style.markdown") }
+                ]}
+            />
+        </OptionsSection>
+    );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/heading_style.ts b/apps/client/src/widgets/type_widgets/options/text_notes/heading_style.ts
deleted file mode 100644
index a82a57c50..000000000
--- a/apps/client/src/widgets/type_widgets/options/text_notes/heading_style.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("heading_style.title")}</h4>
-
-    <div role="group">
-        <label class="tn-radio">
-            <input name="heading-style" type="radio" value="plain" />
-            ${t("heading_style.plain")}
-        </label>
-
-        <label class="tn-radio">
-            <input name="heading-style" type="radio" value="underline" />
-            ${t("heading_style.underline")}
-        </label>
-
-        <label class="tn-radio">
-            <input name="heading-style" type="radio" value="markdown" />
-            ${t("heading_style.markdown")}
-        </label>
-    </div>
-</div>`;
-
-export default class HeadingStyleOptions extends OptionsWidget {
-
-    private $body!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$body = $("body");
-        this.$widget.find(`input[name="heading-style"]`).on("change", () => {
-            const newHeadingStyle = String(this.$widget.find(`input[name="heading-style"]:checked`).val());
-
-            this.toggleBodyClass("heading-style-", newHeadingStyle);
-
-            this.updateOption("headingStyle", newHeadingStyle);
-        });
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$widget.find(`input[name="heading-style"][value="${options.headingStyle}"]`)
-                    .prop("checked", "true");
-    }
-
-    toggleBodyClass(prefix: string, value: string) {
-        for (const clazz of Array.from(this.$body[0].classList)) {
-            // create copy to safely iterate over while removing classes
-            if (clazz.startsWith(prefix)) {
-                this.$body.removeClass(clazz);
-            }
-        }
-
-        this.$body.addClass(prefix + value);
-    }
-}