diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index b5ad216fd..d3ec7e912 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -6,14 +6,13 @@ import { useEffect } from "preact/hooks";
 
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
-import { useActiveNoteContext } from "../react/hooks";
 import HighlightsList from "./HighlightsList";
 import TableOfContents from "./TableOfContents";
 
 const MIN_WIDTH_PERCENT = 5;
 
 export default function RightPanelContainer() {
-    const { note } = useActiveNoteContext();
+    // Split between right pane and the content pane.
     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);
@@ -27,12 +26,25 @@ export default function RightPanelContainer() {
         return () => splitInstance.destroy();
     }, []);
 
+    const items = [
+        <TableOfContents />,
+        <HighlightsList />
+    ];
+
+    // Split between items.
+    useEffect(() => {
+        const rightPaneContainer = document.getElementById("right-pane");
+        const elements = Array.from(rightPaneContainer?.children ?? []) as HTMLElement[];
+        console.log("Got ", elements);
+        const splitInstance = Split(elements, {
+            direction: "vertical"
+        });
+        return () => splitInstance.destroy();
+    }, [ items ]);
+
     return (
         <div id="right-pane">
-            {note && <>
-                <TableOfContents />
-                <HighlightsList />
-            </>}
+            {items}
         </div>
     );
 }