diff --git a/apps/client/src/widgets/bulk_actions/BulkAction.tsx b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
index df933a1df..1f9595971 100644
--- a/apps/client/src/widgets/bulk_actions/BulkAction.tsx
+++ b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
@@ -2,8 +2,8 @@ import { ComponentChildren } from "preact";
 import AbstractBulkAction from "./abstract_bulk_action";
 
 interface BulkActionProps {
-    label: string;   
-    children: ComponentChildren;
+    label: string | ComponentChildren;   
+    children?: ComponentChildren;
     helpText?: ComponentChildren;
     bulkAction: AbstractBulkAction;
 }
diff --git a/apps/client/src/widgets/bulk_actions/note/delete_note.ts b/apps/client/src/widgets/bulk_actions/note/delete_note.ts
deleted file mode 100644
index b524f03e7..000000000
--- a/apps/client/src/widgets/bulk_actions/note/delete_note.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { t } from "../../../services/i18n.js";
-import AbstractBulkAction from "../abstract_bulk_action.js";
-
-const TPL = /*html*/`
-<tr>
-    <td colspan="2">
-        <span class="bx bx-trash"></span>
-
-        ${t("delete_note.delete_matched_notes")}
-    </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">
-                <p>${t("delete_note.delete_matched_notes_description")}</p>
-
-                <p>${t("delete_note.undelete_notes_instruction")}</p>
-
-                ${t("delete_note.erase_notes_instruction")}
-            </div>
-        </div>
-
-        <span class="bx bx-x icon-action action-conf-del"></span>
-    </td>
-</tr>`;
-
-export default class DeleteNoteBulkAction extends AbstractBulkAction {
-    static get actionName() {
-        return "deleteNote";
-    }
-    static get actionTitle() {
-        return t("delete_note.delete_note");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}
diff --git a/apps/client/src/widgets/bulk_actions/note/delete_note.tsx b/apps/client/src/widgets/bulk_actions/note/delete_note.tsx
new file mode 100644
index 000000000..9369ffc2f
--- /dev/null
+++ b/apps/client/src/widgets/bulk_actions/note/delete_note.tsx
@@ -0,0 +1,33 @@
+import { t } from "../../../services/i18n.js";
+import AbstractBulkAction from "../abstract_bulk_action.js";
+import BulkAction from "../BulkAction.jsx";
+import Icon from "../../react/Icon.jsx";
+
+function DeleteNoteBulkActionComponent({ bulkAction }: { bulkAction: AbstractBulkAction }) {
+    return (
+        <BulkAction
+            bulkAction={bulkAction}
+            label={<><Icon icon="bx bx-trash" /> {t("delete_note.delete_matched_notes")}</>}
+            helpText={<>
+                <p>${t("delete_note.delete_matched_notes_description")}</p>
+
+                <p>${t("delete_note.undelete_notes_instruction")}</p>
+
+                ${t("delete_note.erase_notes_instruction")}
+            </>}
+        />
+    );
+}
+
+export default class DeleteNoteBulkAction extends AbstractBulkAction {
+    static get actionName() {
+        return "deleteNote";
+    }
+    static get actionTitle() {
+        return t("delete_note.delete_note");
+    }
+
+    doRender() {
+        return <DeleteNoteBulkActionComponent bulkAction={this} />
+    }
+}