diff --git a/apps/client/src/widgets/type_widgets/options/other.tsx b/apps/client/src/widgets/type_widgets/options/other.tsx
index 8de6866ea..0ad51f077 100644
--- a/apps/client/src/widgets/type_widgets/options/other.tsx
+++ b/apps/client/src/widgets/type_widgets/options/other.tsx
@@ -7,8 +7,11 @@ import FormText from "../../react/FormText";
 import OptionsSection from "./components/OptionsSection";
 import TimeSelector from "./components/TimeSelector";
 import { useMemo } from "preact/hooks";
-import { useTriliumOptionJson } from "../../react/hooks";
+import { useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import { SANITIZER_DEFAULT_ALLOWED_TAGS } from "@triliumnext/commons";
+import FormCheckbox from "../../react/FormCheckbox";
+import FormGroup from "../../react/FormGroup";
+import search from "../../../services/search";
 
 export default function OtherSettings() {
     return (
@@ -17,6 +20,7 @@ export default function OtherSettings() {
             <AttachmentErasureTimeout />
             <RevisionSnapshotInterval />
             <HtmlImportTags />
+            <ShareSettings />
         </>
     )
 }
@@ -123,4 +127,44 @@ function HtmlImportTags() {
             />
         </OptionsSection>
     )
+}
+
+function ShareSettings() {
+    const [ redirectBareDomain, setRedirectBareDomain ] = useTriliumOptionBool("redirectBareDomain");
+    const [ showLogInShareTheme, setShowLogInShareTheme ] = useTriliumOptionBool("showLoginInShareTheme");
+
+    return (
+        <OptionsSection title={t("share.title")}>
+            <FormGroup description={t("share.redirect_bare_domain_description")}>
+                <FormCheckbox
+                    name="redirectBareDomain"
+                    label={t(t("share.redirect_bare_domain"))}   
+                    currentValue={redirectBareDomain}
+                    onChange={async value => {
+                        if (value) {
+                            const shareRootNotes = await search.searchForNotes("#shareRoot");
+                            const sharedShareRootNote = shareRootNotes.find((note) => note.isShared());
+
+                            if (sharedShareRootNote) {
+                                toast.showMessage(t("share.share_root_found", { noteTitle: sharedShareRootNote.title }));
+                            } else if (shareRootNotes.length > 0) {
+                                toast.showError(t("share.share_root_not_shared", { noteTitle: shareRootNotes[0].title }));
+                            } else {
+                                toast.showError(t("share.share_root_not_found"));
+                            }
+                        }
+                        setRedirectBareDomain(value);
+                    }}
+                /> 
+            </FormGroup>
+
+            <FormGroup description={t("share.show_login_link_description")}>
+                <FormCheckbox
+                    name="showLoginInShareTheme"
+                    label={t("share.show_login_link")}
+                    currentValue={showLogInShareTheme} onChange={setShowLogInShareTheme}
+                />
+            </FormGroup>
+        </OptionsSection>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/other/share_settings.ts b/apps/client/src/widgets/type_widgets/options/other/share_settings.ts
deleted file mode 100644
index 7d51bb499..000000000
--- a/apps/client/src/widgets/type_widgets/options/other/share_settings.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import options from "../../../../services/options.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap, OptionNames } from "@triliumnext/commons";
-import searchService from "../../../../services/search.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("share.title")}</h4>
-
-    <label class="tn-checkbox">
-        <input class="form-check-input" type="checkbox" name="redirectBareDomain" value="true">
-        ${t("share.redirect_bare_domain")}
-    </label>
-    <p class="form-text">${t("share.redirect_bare_domain_description")}</p>
-
-    <label class="tn-checkbox">
-        <input class="form-check-input" type="checkbox" name="showLoginInShareTheme" value="true">
-        ${t("share.show_login_link")}
-    </label>
-    <p class="form-text">${t("share.show_login_link_description")}</p>
-</div>`;
-
-export default class ShareSettingsOptions extends OptionsWidget {
-    private $shareRootCheck!: JQuery<HTMLElement>;
-    private $shareRootStatus!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$shareRootCheck = this.$widget.find(".share-root-check");
-        this.$shareRootStatus = this.$widget.find(".share-root-status");
-
-        // Add change handlers for both checkboxes
-        this.$widget.find('input[type="checkbox"]').on("change", (e: JQuery.ChangeEvent) => {
-            this.save();
-
-            // Show/hide share root status section based on redirectBareDomain checkbox
-            const target = e.target as HTMLInputElement;
-            if (target.name === "redirectBareDomain") {
-                this.$shareRootCheck.toggle(target.checked);
-                if (target.checked) {
-                    this.checkShareRoot();
-                }
-            }
-        });
-
-        // Add click handler for check share root button
-        this.$widget.find(".check-share-root").on("click", () => this.checkShareRoot());
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        const redirectBareDomain = options.redirectBareDomain === "true";
-        this.$widget.find('input[name="redirectBareDomain"]').prop("checked", redirectBareDomain);
-        this.$shareRootCheck.toggle(redirectBareDomain);
-        if (redirectBareDomain) {
-            await this.checkShareRoot();
-        }
-
-        this.$widget.find('input[name="showLoginInShareTheme"]').prop("checked", options.showLoginInShareTheme === "true");
-    }
-
-    async checkShareRoot() {
-        const $button = this.$widget.find(".check-share-root");
-        $button.prop("disabled", true);
-
-        try {
-            const shareRootNotes = await searchService.searchForNotes("#shareRoot");
-            const sharedShareRootNote = shareRootNotes.find((note) => note.isShared());
-
-            if (sharedShareRootNote) {
-                this.$shareRootStatus
-                    .removeClass("text-danger")
-                    .addClass("text-success")
-                    .text(t("share.share_root_found", { noteTitle: sharedShareRootNote.title }));
-            } else {
-                this.$shareRootStatus
-                    .removeClass("text-success")
-                    .addClass("text-danger")
-                    .text(shareRootNotes.length > 0 ? t("share.share_root_not_shared", { noteTitle: shareRootNotes[0].title }) : t("share.share_root_not_found"));
-            }
-        } finally {
-            $button.prop("disabled", false);
-        }
-    }
-
-    async save() {
-        const redirectBareDomain = this.$widget.find('input[name="redirectBareDomain"]').prop("checked");
-        await this.updateOption<"redirectBareDomain">("redirectBareDomain", redirectBareDomain.toString());
-
-        const showLoginInShareTheme = this.$widget.find('input[name="showLoginInShareTheme"]').prop("checked");
-        await this.updateOption<"showLoginInShareTheme">("showLoginInShareTheme", showLoginInShareTheme.toString());
-    }
-}