diff --git a/apps/client/src/widgets/buttons/right_pane_toggle.tsx b/apps/client/src/widgets/buttons/right_pane_toggle.tsx
index e9253dc37a..0b5e59f340 100644
--- a/apps/client/src/widgets/buttons/right_pane_toggle.tsx
+++ b/apps/client/src/widgets/buttons/right_pane_toggle.tsx
@@ -5,10 +5,15 @@ import ActionButton from "../react/ActionButton";
 import { useTriliumOptionBool } from "../react/hooks";
 import { useState } from "preact/hooks";
 import appContext from "../../components/app_context";
+import { useTriliumEvent } from "../react/hooks";
+import options from "../../services/options";
 
 export default function RightPaneToggle() {
-    const [rightPaneVisibleOption, setRightPaneVisibleOption] = useTriliumOptionBool("rightPaneVisible");
-    const [rightPaneVisible, setRightPaneVisible] = useState(rightPaneVisibleOption);
+    const [rightPaneVisible, setRightPaneVisible] = useState(options.is("rightPaneVisible"));
+
+    useTriliumEvent("toggleRightPane", () => {
+        setRightPaneVisible(!rightPaneVisible);
+    });
 
     return (
         <ActionButton
@@ -18,11 +23,7 @@ export default function RightPaneToggle() {
             )}
             text={t("right_pane.toggle")}
             icon="bx bx-sidebar"
-            onClick={() => {
-                setRightPaneVisible(!rightPaneVisible);
-                setRightPaneVisibleOption(!rightPaneVisible);
-                appContext.triggerEvent("toggleRightPane", {});
-            }}
+            triggerCommand="toggleRightPane"
         />
     );
 }
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index 27c13fb121..2ecb43f27e 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -27,12 +27,11 @@ interface RightPanelWidgetDefinition {
 }
 
 export default function RightPanelContainer({ widgetsByParent }: { widgetsByParent: WidgetsByParent }) {
-    const [rightPaneVisibleOption, setRightPaneVisibleOption] = useTriliumOptionBool("rightPaneVisible");
-    const [rightPaneVisible, setRightPaneVisible] = useState(rightPaneVisibleOption);
+    const [rightPaneVisible, setRightPaneVisible] = useState(options.is("rightPaneVisible"));
     const items = useItems(rightPaneVisible, widgetsByParent);
     useSplit(rightPaneVisible);
     useTriliumEvent("toggleRightPane", () => {
-        setRightPaneVisibleOption(!rightPaneVisible);
+        options.save("rightPaneVisible",(!rightPaneVisible).toString());
         setRightPaneVisible(!rightPaneVisible);
     });
 
@@ -47,10 +46,7 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
                         {t("right_pane.empty_message")}
                         <Button
                             text={t("right_pane.empty_button")}
-                                onClick={() => {
-                                    setRightPaneVisibleOption(!rightPaneVisible);
-                                    setRightPaneVisible(!rightPaneVisible);
-                                }}
+                            triggerCommand="toggleRightPane"
                         />
                     </div>
                 )