diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts
index 833c96d1c..3e3828301 100644
--- a/src/public/app/components/app_context.ts
+++ b/src/public/app/components/app_context.ts
@@ -104,6 +104,8 @@ export type CommandMappings = {
     openNoteInNewWindow: CommandData;
     hideLeftPane: CommandData;
     showLeftPane: CommandData;
+    toggleLeftPane: CommandData;
+    toggleRightPane: CommandData;
 
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;
diff --git a/src/public/app/components/root_command_executor.ts b/src/public/app/components/root_command_executor.ts
index 899bfebd2..dcfa1082d 100644
--- a/src/public/app/components/root_command_executor.ts
+++ b/src/public/app/components/root_command_executor.ts
@@ -86,6 +86,10 @@ export default class RootCommandExecutor extends Component {
         options.toggle("leftPaneVisible");
     }
 
+    toggleRightPaneCommand() {
+        options.toggle("rightPaneVisible");
+    }
+
     async showBackendLogCommand() {
         await appContext.tabManager.openTabWithNoteWithHoisting("_backendLog", { activate: true });
     }
diff --git a/src/public/app/widgets/buttons/right_pane_toggle.ts b/src/public/app/widgets/buttons/right_pane_toggle.ts
index 11e4b1ef9..212635a2c 100644
--- a/src/public/app/widgets/buttons/right_pane_toggle.ts
+++ b/src/public/app/widgets/buttons/right_pane_toggle.ts
@@ -8,6 +8,7 @@ export default class RightPaneToggleWidget extends CommandButtonWidget {
         this.class("toggle-button");
         this.css("transform", "scaleX(-1)");
         this.settings.icon = "bx-sidebar";
+        this.settings.command = "toggleRightPane";
     }
 
 }
diff --git a/src/public/app/widgets/containers/right_pane_container.ts b/src/public/app/widgets/containers/right_pane_container.ts
index d6af3c29f..8761f7cfd 100644
--- a/src/public/app/widgets/containers/right_pane_container.ts
+++ b/src/public/app/widgets/containers/right_pane_container.ts
@@ -2,9 +2,9 @@ import FlexContainer from "./flex_container.js";
 import splitService from "../../services/resizer.js";
 import type RightPanelWidget from "../right_panel_widget.js";
 import type { EventData, EventNames } from "../../components/app_context.js";
+import options from "../../services/options.js";
 
 export default class RightPaneContainer extends FlexContainer<RightPanelWidget> {
-    private rightPaneHidden: boolean;
 
     constructor() {
         super("column");
@@ -12,12 +12,10 @@ export default class RightPaneContainer extends FlexContainer<RightPanelWidget>
         this.id("right-pane");
         this.css("height", "100%");
         this.collapsible();
-
-        this.rightPaneHidden = false;
     }
 
     isEnabled() {
-        return super.isEnabled() && !this.rightPaneHidden;
+        return super.isEnabled() && options.is("rightPaneVisible");
     }
 
     handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
@@ -50,9 +48,11 @@ export default class RightPaneContainer extends FlexContainer<RightPanelWidget>
         }
     }
 
-    toggleRightPaneEvent() {
-        this.rightPaneHidden = !this.rightPaneHidden;
-
-        this.reEvaluateRightPaneVisibilityCommand();
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
+        if (loadResults.isOptionReloaded("rightPaneVisible")) {
+            const visible = this.isEnabled();
+            this.toggleInt(visible);
+        }
     }
+
 }