diff --git a/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js b/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js
index a64c5be77..65a4baca6 100644
--- a/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/NavigationObs.js
@@ -7,6 +7,8 @@ import {
 import {
   XMarkIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
 } from '@heroicons/react/24/solid';
 
 import styles from '../Navigation/reference/SelectReference.module.css';
@@ -65,7 +67,19 @@ export default function NavigationObs({ onChangeNumber, number }) {
     <>
       <div className="flex">
         <div className="bg-primary text-white py-2 uppercase tracking-wider text-xs font-semibold">
-          <span className="px-3">{number}</span>
+          <span
+            className="focus:outline-none bg-white py-4 bg-opacity-10"
+            onClick={selectBook}
+            role="button"
+            tabIndex="-1"
+            aria-label="obs-navigation"
+          >
+            <ChevronLeftIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
+          <span className="px-3">
+            Story
+            {number}
+          </span>
           <span
             className="focus:outline-none bg-white py-4 bg-opacity-10"
             onClick={selectBook}
@@ -75,6 +89,15 @@ export default function NavigationObs({ onChangeNumber, number }) {
           >
             <ChevronDownIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
           </span>
+          <span
+            className="focus:outline-none bg-white py-4 bg-opacity-10"
+            onClick={selectBook}
+            role="button"
+            tabIndex="-1"
+            aria-label="obs-navigation"
+          >
+            <ChevronRightIcon className="focus:outline-none inline h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
         </div>
       </div>