diff --git a/apps/client/src/widgets/bulk_actions/relation/add_relation.ts b/apps/client/src/widgets/bulk_actions/relation/add_relation.ts
deleted file mode 100644
index 165162d85..000000000
--- a/apps/client/src/widgets/bulk_actions/relation/add_relation.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import SpacedUpdate from "../../../services/spaced_update.js";
-import AbstractBulkAction from "../abstract_bulk_action.js";
-import noteAutocompleteService from "../../../services/note_autocomplete.js";
-import { t } from "../../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr>
-    <td colspan="2">
-        <div style="display: flex; align-items: center">
-            <div style="margin-right: 10px;" class="text-nowrap">${t("add_relation.add_relation")}</div>
-
-            <input type="text"
-                class="form-control relation-name"
-                placeholder="${t("add_relation.relation_name")}"
-                pattern="[\\p{L}\\p{N}_:]+"
-                style="flex-shrink: 3"
-                title="${t("add_relation.allowed_characters")}"/>
-
-            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("add_relation.to")}</div>
-
-            <div class="input-group" style="flex-shrink: 2">
-                <input type="text" class="form-control target-note" placeholder="${t("add_relation.target_note")}"/>
-            </div>
-        </div>
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                ${t("add_relation.create_relation_on_all_matched_notes")}
-            </div>
-        </div>
-
-        <span class="bx bx-x icon-action action-conf-del"></span>
-    </td>
-</tr>`;
-
-export default class AddRelationBulkAction extends AbstractBulkAction {
-    static get actionName() {
-        return "addRelation";
-    }
-    static get actionTitle() {
-        return t("add_relation.add_relation");
-    }
-
-    doRender() {
-        const $action = $(TPL);
-
-        const $relationName = $action.find(".relation-name");
-        $relationName.val(this.actionDef.relationName || "");
-
-        const $targetNote = $action.find(".target-note");
-        noteAutocompleteService.initNoteAutocomplete($targetNote);
-        $targetNote.setNote(this.actionDef.targetNoteId);
-
-        $targetNote.on("autocomplete:closed", () => spacedUpdate.scheduleUpdate());
-
-        const spacedUpdate = new SpacedUpdate(async () => {
-            await this.saveAction({
-                relationName: $relationName.val(),
-                targetNoteId: $targetNote.getSelectedNoteId()
-            });
-        }, 1000);
-
-        $relationName.on("input", () => spacedUpdate.scheduleUpdate());
-        $targetNote.on("input", () => spacedUpdate.scheduleUpdate());
-
-        return $action;
-    }
-}
diff --git a/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx b/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
new file mode 100644
index 000000000..927c10ace
--- /dev/null
+++ b/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
@@ -0,0 +1,52 @@
+import SpacedUpdate from "../../../services/spaced_update.js";
+import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
+import noteAutocompleteService from "../../../services/note_autocomplete.js";
+import { t } from "../../../services/i18n.js";
+import BulkAction, { BulkActionText } from "../BulkAction.jsx";
+import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
+import FormTextBox from "../../react/FormTextBox.jsx";
+import { useEffect, useState } from "preact/hooks";
+import { useSpacedUpdate } from "../../react/hooks.jsx";
+
+function AddRelationBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
+    const [ relationName, setRelationName ] = useState<string>(actionDef.relationName);
+    const [ targetNoteId, setTargetNoteId ] = useState<string>(actionDef.targetNoteId);
+    const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ relationName, targetNoteId }));
+    useEffect(() => spacedUpdate.scheduleUpdate(), [ relationName, targetNoteId ]);
+
+    return (
+        <BulkAction
+            bulkAction={bulkAction}
+            label={t("add_relation.add_relation")}
+            helpText={t("add_relation.create_relation_on_all_matched_notes")}
+        >
+            <FormTextBox 
+                placeholder={t("add_relation.relation_name")}
+                pattern="[\\p{L}\\p{N}_:]+"
+                style={{ flexShrink: 3 }}
+                title={t("add_relation.allowed_characters")}
+                currentValue={relationName} onChange={setRelationName}
+            />
+
+            <BulkActionText text={t("add_relation.to")} />
+
+            <NoteAutocomplete
+                placeholder={t("add_relation.target_note")}
+            />
+        </BulkAction>
+    )  
+}
+
+export default class AddRelationBulkAction extends AbstractBulkAction {
+
+    static get actionName() {
+        return "addRelation";
+    }
+    static get actionTitle() {
+        return t("add_relation.add_relation");
+    }
+
+    doRender() {
+        return <AddRelationBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
+    }
+}
diff --git a/apps/client/src/widgets/react/FormTextBox.tsx b/apps/client/src/widgets/react/FormTextBox.tsx
index e06004fb5..476825d96 100644
--- a/apps/client/src/widgets/react/FormTextBox.tsx
+++ b/apps/client/src/widgets/react/FormTextBox.tsx
@@ -1,13 +1,13 @@
 import { InputHTMLAttributes, RefObject } from "preact/compat";
 
-interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title"> {
+interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title" | "style"> {
     id?: string;
     currentValue?: string;
     onChange?(newValue: string): void;
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern }: FormTextBoxProps) {
+export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern, style }: FormTextBoxProps) {
     return (
         <input
             ref={inputRef}
@@ -20,6 +20,8 @@ export default function FormTextBox({ id, type, name, className, currentValue, o
             placeholder={placeholder}
             title={title}
             pattern={pattern}
-            onInput={e => onChange?.(e.currentTarget.value)} />
+            onInput={e => onChange?.(e.currentTarget.value)}
+            style={style}
+        />
     );
 }
\ No newline at end of file