diff --git a/src/App.svelte b/src/App.svelte
index 81a143d..8697ed4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,7 @@
 <script>
+  import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
+  import { slideTo } from '@router'
 
   import Header from '@components/layout/Header.svelte'
   import Cursor from '@components/layout/Cursor.svelte'
@@ -30,6 +32,20 @@
 
   const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
   const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
+
+  onMount(() => {
+    const handleKeydown = (e) => {
+      if (e.key === 'ArrowRight') {
+        const next = slides.all[slides.activeIndex + 1]
+        if (next) slideTo(next.path)
+      } else if (e.key === 'ArrowLeft') {
+        const prev = slides.all[slides.activeIndex - 1]
+        if (prev) slideTo(prev.path)
+      }
+    }
+    window.addEventListener('keydown', handleKeydown)
+    return () => window.removeEventListener('keydown', handleKeydown)
+  })
 </script>
 
 <div class="app">