diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx
index 0f36c8a49..9528ede08 100644
--- a/apps/client/src/widgets/FloatingButtons.tsx
+++ b/apps/client/src/widgets/FloatingButtons.tsx
@@ -77,6 +77,10 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
     {
         component: SaveToNoteButton,
         isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
+    },
+    {
+        component: RelationMapButtons,
+        isEnabled: ({ note }) => note.type === "relationMap"
     }
 ];
 
@@ -262,6 +266,38 @@ function SaveToNoteButton({ note }: FloatingButtonContext) {
     />
 }
 
+function RelationMapButtons({ parentComponent, noteContext }: FloatingButtonContext) {
+    return (
+        <>
+            <ActionButton
+                icon="bx bx-folder-plus"
+                text={t("relation_map_buttons.create_child_note_title")}
+                onClick={() => parentComponent.triggerEvent("relationMapCreateChildNote", { ntxId: noteContext.ntxId })}
+            />
+
+            <ActionButton
+                icon="bx bx-crop"
+                text={t("relation_map_buttons.reset_pan_zoom_title")}
+                onClick={() => parentComponent.triggerEvent("relationMapResetPanZoom", { ntxId: noteContext.ntxId })}
+            />
+
+            <div className="btn-group">
+                <ActionButton
+                    icon="bx bx-zoom-in"
+                    text={t("relation_map_buttons.zoom_in_title")}
+                    onClick={() => parentComponent.triggerEvent("relationMapResetZoomIn", { ntxId: noteContext.ntxId })}
+                />
+
+                <ActionButton
+                    icon="bx bx-zoom-out"
+                    text={t("relation_map_buttons.zoom_out_title")}
+                    onClick={() => parentComponent.triggerEvent("relationMapResetZoomOut", { ntxId: noteContext.ntxId })}
+                />
+            </div>
+        </>
+    )
+}
+
 /**
  * Show button that displays floating button after click on close button
  */
@@ -275,4 +311,4 @@ function ShowFloatingButton() {
             />
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/floating_buttons/relation_map_buttons.ts b/apps/client/src/widgets/floating_buttons/relation_map_buttons.ts
deleted file mode 100644
index 141c42e16..000000000
--- a/apps/client/src/widgets/floating_buttons/relation_map_buttons.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<div class="relation-map-buttons">
-    <style>
-        .relation-map-buttons {
-            display: flex;
-            gap: 10px;
-        }
-    </style>
-
-    <button type="button"
-            class="relation-map-create-child-note floating-button btn bx bx-folder-plus"
-            title="${t("relation_map_buttons.create_child_note_title")}"></button>
-
-    <button type="button"
-            class="relation-map-reset-pan-zoom floating-button btn bx bx-crop"
-            title="${t("relation_map_buttons.reset_pan_zoom_title")}"></button>
-
-    <div class="btn-group">
-        <button type="button"
-                class="relation-map-zoom-in floating-button btn bx bx-zoom-in"
-                title="${t("relation_map_buttons.zoom_in_title")}"></button>
-
-        <button type="button"
-                class="relation-map-zoom-out floating-button btn bx bx-zoom-out"
-                title="${t("relation_map_buttons.zoom_out_title")}"></button>
-    </div>
-</div>`;
-
-export default class RelationMapButtons extends NoteContextAwareWidget {
-
-    private $createChildNote!: JQuery<HTMLElement>;
-    private $zoomInButton!: JQuery<HTMLElement>;
-    private $zoomOutButton!: JQuery<HTMLElement>;
-    private $resetPanZoomButton!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return super.isEnabled() && this.note?.type === "relationMap";
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.$widget = $(TPL);
-        this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
-        this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
-        this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
-        this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
-
-        // TODO: Deduplicate object creation here.
-        this.$createChildNote.on("click", () => this.triggerEvent("relationMapCreateChildNote", { ntxId: this.ntxId }));
-        this.$resetPanZoomButton.on("click", () => this.triggerEvent("relationMapResetPanZoom", { ntxId: this.ntxId }));
-
-        this.$zoomInButton.on("click", () => this.triggerEvent("relationMapResetZoomIn", { ntxId: this.ntxId }));
-        this.$zoomOutButton.on("click", () => this.triggerEvent("relationMapResetZoomOut", { ntxId: this.ntxId }));
-        this.contentSized();
-    }
-}