diff --git a/desktop/main.js b/desktop/main.js
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -29,11 +29,19 @@
     trafficLightPosition: { x: 20, y: 24 },
     backgroundColor: '#0a0a0a',
     webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
       sandbox: true,
       devTools: isDev,
     },
   });
 
+  win.webContents.on('did-navigate-in-page', () => {
+    win.webContents.send('on-navigate', {
+      canGoBack: win.webContents.canGoBack(),
+      canGoForward: win.webContents.canGoForward(),
+    });
+  });
+
   win.webContents.setWindowOpenHandler(({ url }) => {
     shell.openExternal(url);
     return { action: 'deny' };
diff --git a/desktop/preload.js b/desktop/preload.js
new file mode 100644
--- /dev/null
+++ b/desktop/preload.js
@@ -0,0 +1,7 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+const bridge = {
+  onNavigate: callback => ipcRenderer.on('on-navigate', callback),
+};
+
+contextBridge.exposeInMainWorld('electronContextBridge', bridge);
diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -32,6 +32,7 @@
 import Chat from './chat/chat.react';
 import { TooltipProvider } from './chat/tooltip-provider';
 import NavigationArrows from './components/navigation-arrows.react';
+import electron from './electron';
 import InputStateContainer from './input/input-state-container.react';
 import LoadingIndicator from './loading-indicator.react';
 import { MenuProvider } from './menu-provider.react';
@@ -175,9 +176,8 @@
       }
     }
 
-    const shouldShowNavigationArrows = false;
     let navigationArrows = null;
-    if (shouldShowNavigationArrows) {
+    if (electron) {
       navigationArrows = <NavigationArrows />;
     }
 
diff --git a/web/components/navigation-arrows.css b/web/components/navigation-arrows.css
--- a/web/components/navigation-arrows.css
+++ b/web/components/navigation-arrows.css
@@ -8,3 +8,8 @@
   display: flex;
   align-items: center;
 }
+
+.disabled {
+  pointer-events: none;
+  color: var(--color-disabled);
+}
diff --git a/web/components/navigation-arrows.react.js b/web/components/navigation-arrows.react.js
--- a/web/components/navigation-arrows.react.js
+++ b/web/components/navigation-arrows.react.js
@@ -1,7 +1,9 @@
 // @flow
 
+import classnames from 'classnames';
 import * as React from 'react';
 
+import electron from '../electron.js';
 import history from '../router-history.js';
 import SWMansionIcon from '../SWMansionIcon.react.js';
 import css from './navigation-arrows.css';
@@ -16,12 +18,29 @@
     [],
   );
 
+  const [disableBack, setDisableBack] = React.useState(false);
+  const [disableFoward, setDisableForward] = React.useState(false);
+
+  electron?.onNavigate((event, { canGoBack, canGoForward }) => {
+    setDisableBack(!canGoBack);
+    setDisableForward(!canGoForward);
+  });
+
+  const goBackClasses = React.useMemo(
+    () => classnames([css.button, disableBack ? css.disabled : null]),
+    [disableBack],
+  );
+  const goForwardClasses = React.useMemo(
+    () => classnames([css.button, disableFoward ? css.disabled : null]),
+    [disableFoward],
+  );
+
   return (
     <div className={css.container}>
-      <a className={css.button} onClick={goBack}>
+      <a className={goBackClasses} onClick={goBack}>
         <SWMansionIcon icon="arrow-left" size={24} />
       </a>
-      <a className={css.button} onClick={goForward}>
+      <a className={goForwardClasses} onClick={goForward}>
         <SWMansionIcon icon="arrow-right" size={24} />
       </a>
     </div>
diff --git a/web/electron.js b/web/electron.js
new file mode 100644
--- /dev/null
+++ b/web/electron.js
@@ -0,0 +1,11 @@
+// @flow
+
+declare var electronContextBridge;
+
+const electron: null | {
+  onNavigate: (
+    (event: any, { canGoBack: boolean, canGoForward: boolean }) => void,
+  ) => void,
+} = typeof electronContextBridge === 'undefined' ? null : electronContextBridge;
+
+export default electron;