diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 0e9a39caa..e2481fc55 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -123,8 +123,8 @@ export default class DesktopLayout {
                                                                 .child(<NoteIconWidget />)
                                                                 .child(<NoteTitleWidget />)
                                                                 .child(new SpacerWidget(0, 1))
-                                                                .child(new MovePaneButton(true))
-                                                                .child(new MovePaneButton(false))
+                                                                .child(<MovePaneButton direction="left" />)
+                                                                .child(<MovePaneButton direction="right" />)
                                                                 .child(new ClosePaneButton())
                                                                 .child(new CreatePaneButton())
                                                         )
diff --git a/apps/client/src/widgets/buttons/move_pane_button.ts b/apps/client/src/widgets/buttons/move_pane_button.ts
deleted file mode 100644
index b1df66991..000000000
--- a/apps/client/src/widgets/buttons/move_pane_button.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import OnClickButtonWidget from "./onclick_button.js";
-import appContext from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-
-export default class MovePaneButton extends OnClickButtonWidget {
-
-    private isMovingLeft: boolean;
-
-    constructor(isMovingLeft: boolean) {
-        super();
-
-        this.isMovingLeft = isMovingLeft;
-
-        this.icon(isMovingLeft ? "bx-chevron-left" : "bx-chevron-right")
-            .title(isMovingLeft ? t("move_pane_button.move_left") : t("move_pane_button.move_right"))
-            .titlePlacement("bottom")
-            .onClick(async (widget, e) => {
-                e.stopPropagation();
-                widget.triggerCommand("moveThisNoteSplit", { ntxId: widget.getClosestNtxId(), isMovingLeft: this.isMovingLeft });
-            })
-            .class("icon-action");
-    }
-
-    isEnabled() {
-        if (!super.isEnabled()) {
-            return false;
-        }
-
-        if (this.isMovingLeft) {
-            // movable if the current context is not a main context, i.e. non-null mainNtxId
-            return !!this.noteContext?.mainNtxId;
-        } else {
-            const currentIndex = appContext.tabManager.noteContexts.findIndex((c) => c.ntxId === this.ntxId);
-            const nextContext = appContext.tabManager.noteContexts[currentIndex + 1];
-            // movable if the next context is not null and not a main context, i.e. non-null mainNtxId
-            return !!nextContext?.mainNtxId;
-        }
-    }
-
-    async noteContextRemovedEvent() {
-        this.refresh();
-    }
-
-    async newNoteContextCreatedEvent() {
-        this.refresh();
-    }
-
-    async noteContextReorderEvent() {
-        this.refresh();
-    }
-
-    async contextsReopenedEvent() {
-        this.refresh();
-    }
-}
diff --git a/apps/client/src/widgets/buttons/move_pane_button.tsx b/apps/client/src/widgets/buttons/move_pane_button.tsx
new file mode 100644
index 000000000..c6aecba5b
--- /dev/null
+++ b/apps/client/src/widgets/buttons/move_pane_button.tsx
@@ -0,0 +1,44 @@
+import { useContext, useState } from "preact/hooks";
+import { t } from "../../services/i18n";
+import ActionButton from "../react/ActionButton";
+import { ParentComponent } from "../react/react_utils";
+import BasicWidget from "../basic_widget";
+import { useNoteContext, useTriliumEvents } from "../react/hooks";
+import appContext from "../../components/app_context";
+
+interface MovePaneButtonProps {
+    direction: "left" | "right";
+}
+
+export default function MovePaneButton({ direction }: MovePaneButtonProps) {
+    const parentWidget = useContext(ParentComponent) as BasicWidget | undefined;
+    const { noteContext, ntxId } = useNoteContext();
+    const [ refreshCounter, setRefreshCounter ] = useState(0);
+
+    function isEnabled() {
+        if (direction === "left") {
+            // movable if the current context is not a main context, i.e. non-null mainNtxId
+            return !!noteContext?.mainNtxId;
+        } else {
+            const currentIndex = appContext.tabManager.noteContexts.findIndex((c) => c.ntxId === ntxId);
+            const nextContext = appContext.tabManager.noteContexts[currentIndex + 1];
+            // movable if the next context is not null and not a main context, i.e. non-null mainNtxId
+            return !!nextContext?.mainNtxId;
+        }
+    }
+
+    useTriliumEvents([ "noteContextRemoved", "newNoteContextCreated", "noteContextReorder", "contextsReopened" ], () => {
+        setRefreshCounter(refreshCounter + 1);
+    });
+
+    console.log("Refresh with ", isEnabled());
+
+    return (
+        <ActionButton
+            icon={direction === "left" ? "bx bx-chevron-left" : "bx bx-chevron-right"}
+            text={direction === "left" ? t("move_pane_button.move_left") : t("move_pane_button.move_right")}
+            onClick={(() => parentWidget?.triggerCommand("moveThisNoteSplit", { ntxId: parentWidget.getClosestNtxId(), isMovingLeft: direction === "left" }))}
+            className={!isEnabled() ? "hidden-ext" : ""}
+        />
+    );
+}