diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index b00386a10..8b57147ce 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -1,7 +1,28 @@
 //! This is currently only used for the new layout.
 import "./RightPanelContainer.css";
 
+import Split from "@triliumnext/split.js";
+import { useEffect } from "preact/hooks";
+
+import options from "../../services/options";
+import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
+
+const MIN_WIDTH_PERCENT = 5;
+
 export default function RightPanelContainer() {
+    useEffect(() => {
+        // We are intentionally omitting useTriliumOption to avoid re-render due to size change.
+        const rightPaneWidth = Math.max(MIN_WIDTH_PERCENT, options.getInt("rightPaneWidth") ?? MIN_WIDTH_PERCENT);
+        const splitInstance = Split(["#center-pane", "#right-pane"], {
+            sizes: [100 - rightPaneWidth, rightPaneWidth],
+            gutterSize: DEFAULT_GUTTER_SIZE,
+            minSize: [300, 180],
+            rtl: glob.isRtl,
+            onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1]))
+        });
+        return () => splitInstance.destroy();
+    }, []);
+
     return (
         <div id="right-pane">
             Hi there.