--- a/web/js/components/preact/timeline/TimelineControls.jsx
+++ b/web/js/components/preact/timeline/TimelineControls.jsx
@@ -22,7 +22,11 @@ import { nowMilliseconds } from '../../../utils/date-utils.js';
  * TimelineControls component
  * @returns {JSX.Element} TimelineControls component
  */
-export function TimelineControls() {
+export function TimelineControls({
+  keySeqNavScale,
+  keySeqNavValue,
+  setKeySeqNavValue,
+}) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [canZoomIn, setCanZoomIn] = useState(true);
   const [canZoomOut, setCanZoomOut] = useState(true);
@@ -464,6 +468,29 @@ export function TimelineControls() {
   const canJumpBackward = activeSegmentIndex > 0;
   const canJumpForward = activeSegmentIndex !== -1 && activeSegmentIndex < segmentCount - 1;
 
+  useEffect(() => {
+    if (keySeqNavScale === 'broad') {
+      if (keySeqNavValue === -1) {
+        console.log('broad - received backward motion');
+        if (canJumpBackward) {
+          console.log('broad - performing backward jump');
+          jumpToAdjacentSegment(-1);
+        }
+        console.log('broad - resetting');
+        setKeySeqNavValue(0);
+      }
+      if (keySeqNavValue === 1) {
+        console.log('broad - received forward motion');
+        if (canJumpForward) {
+          console.log('broad - performing forward jump');
+          jumpToAdjacentSegment(1);
+        }
+        console.log('broad - resetting');
+        setKeySeqNavValue(0);
+      }
+    }
+  }, [canJumpBackward, canJumpForward, jumpToAdjacentSegment, keySeqNavScale, keySeqNavValue, setKeySeqNavValue]);
+
   return (
     <div className="timeline-controls flex justify-between items-center mb-1">
       <div className="flex items-center gap-1.5">

--- a/web/js/components/preact/timeline/TimelinePage.jsx
+++ b/web/js/components/preact/timeline/TimelinePage.jsx
@@ -217,6 +217,8 @@ export function TimelinePage() {
   const [idsSegmentInfo, setIdsSegmentInfo] = useState(null);  // metadata from IDs endpoint
   const [idsTimelineSegments, setIdsTimelineSegments] = useState([]);
   const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+  const [keySeqNavScale, setKeySeqNavScale] = useState('broad');
+  const [keySeqNavValue, setKeySeqNavValue] = useState(0);
 
   // Refs
   const timelineContainerRef = useRef(null);
@@ -227,6 +229,31 @@ export function TimelinePage() {
   const selectedDateRef = useRef(urlParams.date);
   const videoElementRef = useRef(null);
 
+  useEffect(() => {
+    document.body.addEventListener('click', (e) => {
+      // broad to move +/- 30 seconds via timeline
+      // fine to move +/- 1 seconds via video
+      const value = e.target.tagName === 'VIDEO' ? 'fine' : 'broad';
+      console.log('main - switching scale to ' + value);
+      setKeySeqNavScale(value);
+    });
+    document.body.addEventListener('keydown', (e) => {
+      // -1 for backwards
+      // 0 for no change
+      // 1 for forwards
+      switch (e.keyCode) {
+        case 37: // Left arrow key
+          console.log('main - moving backward, for ' + keySeqNavScale);
+          setKeySeqNavValue(-1);
+          break;
+        case 39: // Right arrow key
+          console.log('main - moving forward, for ' + keySeqNavScale);
+          setKeySeqNavValue(1);
+          break;
+      }
+    });
+  }, [setKeySeqNavScale, setKeySeqNavValue]);
+
   useEffect(() => {
     selectedDateRef.current = selectedDate;
   }, [selectedDate]);
@@ -802,10 +829,19 @@ export function TimelinePage() {
     return (
       <>
         {/* Video player */}
-        <TimelinePlayer videoElementRef={videoElementRef} />
+        <TimelinePlayer
+          videoElementRef={videoElementRef}
+          keySeqNavScale={keySeqNavScale}
+          keySeqNavValue={keySeqNavValue}
+          setKeySeqNavValue={setKeySeqNavValue}
+        />
 
         {/* Playback controls (includes time display) */}
-        <TimelineControls />
+        <TimelineControls
+          keySeqNavScale={keySeqNavScale}
+          keySeqNavValue={keySeqNavValue}
+          setKeySeqNavValue={setKeySeqNavValue}
+        />
 
         {/* Timeline */}
         <div

--- a/web/js/components/preact/timeline/TimelinePlayer.jsx
+++ b/web/js/components/preact/timeline/TimelinePlayer.jsx
@@ -21,7 +21,12 @@ const DETECTION_SCALE_BASE = 400; // Baseline display dimension (px) for detecti
  * TimelinePlayer component
  * @returns {JSX.Element} TimelinePlayer component
  */
-export function TimelinePlayer({ videoElementRef = null }) {
+export function TimelinePlayer({
+  videoElementRef = null,
+  keySeqNavScale,
+  keySeqNavValue,
+  setKeySeqNavValue,
+}) {
   // Local state
   const [currentSegmentIndex, setCurrentSegmentIndex] = useState(-1);
   const [segments, setSegments] = useState([]);
@@ -924,6 +929,29 @@ export function TimelinePlayer({ videoElementRef = null }) {
     }, 'image/jpeg', 0.95);
   }, [segmentRecordingData]);
 
+  useEffect(() => {
+    if (keySeqNavScale === 'fine') {
+      if (keySeqNavValue === -1) {
+        console.log('fine - received backward motion');
+        if (setVideoRefs.current) {
+          console.log('fine - performing backward jump');
+          setVideoRefs.current.currentTime--;
+        }
+        console.log('fine - resetting');
+        setKeySeqNavValue(0);
+      }
+      if (keySeqNavValue === 1) {
+        console.log('fine - processing forward motion');
+        if (setVideoRefs.current) {
+          console.log('fine - performing forward jump');
+          setVideoRefs.current.currentTime++;
+        }
+        console.log('fine - resetting');
+        setKeySeqNavValue(0);
+      }
+    }
+  }, [keySeqNavScale, keySeqNavValue, setKeySeqNavValue]);
+
   return (
     <>
       <div className="timeline-player-container mb-1" id="video-player">