diff --git a/src/App.tsx b/src/App.tsx
index c68e3e9..84122e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,10 +5,17 @@ import { SongList } from './components/SongList'
 import { FilterSortBar } from './components/FilterSortBar'
 import { songs } from './data/songs'
 import './App.css'
+import { useState } from "react";
 
 function App() {
+  const [currentSongIndex, setCurrentSongIndex] = useState(0)
+  const currentSong = songs[currentSongIndex]
+  
   const handleSelectSong = (song: (typeof songs)[number]) => {
-    console.log('Valgt sang:', song)
+    const songIndex = songs.findIndex((item) => item.id === song.id)
+    if (songIndex !== -1) {
+      setCurrentSongIndex(songIndex)
+    }
   }
 
   return (
@@ -26,9 +33,14 @@ function App() {
         <section className='song-section' aria-label='Valgt sang'>
           <FavoriteButton isFavorite={false} />
           
-          <SongCard song={songs[0]} />
-
-          <Navigation isFirst={true} isLast={false} />
+          <SongCard song={currentSong} />
+
+          <Navigation 
+            isFirst={currentSongIndex == 0} 
+            isLast={currentSongIndex == songs.length - 1}
+            onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
+            onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
+          />
 
         </section>
 
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index e5d001b..dd70e01 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,15 +1,18 @@
 type NavigationProps = {
   isFirst: boolean
   isLast: boolean
+  onPrevious: () => void
+  onNext: () => void
 }
 
-export function Navigation({isFirst, isLast}: NavigationProps) {
+export function Navigation({isFirst, isLast, onPrevious, onNext}: NavigationProps) {
   return (
     <nav aria-label="Navigering mellom sanger">
       <button
         type="button"
         aria-label="Forrige sang"
         disabled={isFirst}  
+        onClick={onPrevious}
       >
         ← Forrige
       </button>
@@ -18,6 +21,7 @@ export function Navigation({isFirst, isLast}: NavigationProps) {
         type="button"
         aria-label="Neste sang"
         disabled={isLast}
+        onClick={onNext}
       >
         Neste →
       </button>