diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index c43b15c7c..9dc4b76ee 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -126,7 +126,7 @@ export default class DesktopLayout {
                                                                 .child(<MovePaneButton direction="left" />)
                                                                 .child(<MovePaneButton direction="right" />)
                                                                 .child(<ClosePaneButton />)
-                                                                .child(new CreatePaneButton())
+                                                                .child(<CreatePaneButton />)
                                                         )
                                                         .child(<Ribbon />)
                                                         .child(<SharedInfo />)
diff --git a/apps/client/src/widgets/buttons/create_pane_button.ts b/apps/client/src/widgets/buttons/create_pane_button.ts
deleted file mode 100644
index 8a636df05..000000000
--- a/apps/client/src/widgets/buttons/create_pane_button.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { t } from "../../services/i18n.js";
-import OnClickButtonWidget from "./onclick_button.js";
-
-export default class CreatePaneButton extends OnClickButtonWidget {
-    constructor() {
-        super();
-
-        this.icon("bx-dock-right")
-            .title(t("create_pane_button.create_new_split"))
-            .titlePlacement("bottom")
-            .onClick((widget, e) => {
-                widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() });
-                e.stopPropagation();
-            })
-            .class("icon-action");
-    }
-}
diff --git a/apps/client/src/widgets/buttons/create_pane_button.tsx b/apps/client/src/widgets/buttons/create_pane_button.tsx
new file mode 100644
index 000000000..bcff3b371
--- /dev/null
+++ b/apps/client/src/widgets/buttons/create_pane_button.tsx
@@ -0,0 +1,21 @@
+import { useContext } from "preact/hooks";
+import { t } from "../../services/i18n.js";
+import ActionButton from "../react/ActionButton.jsx";
+import { ParentComponent } from "../react/react_utils.jsx";
+import BasicWidget from "../basic_widget.js";
+
+export default function CreatePaneButton() {
+    const widget = useContext(ParentComponent) as BasicWidget | undefined;
+
+    return (
+        <ActionButton
+            icon="bx bx-dock-right"
+            text={t("create_pane_button.create_new_split")}
+            onClick={(e) => {
+                widget?.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() });
+                e.stopPropagation();
+            }}
+        />
+    )
+}
+