diff --git a/src/components/SongList.tsx b/src/components/SongList.tsx
new file mode 100644
index 0000000..fbfb0b3
--- /dev/null
+++ b/src/components/SongList.tsx
@@ -0,0 +1,26 @@
+import type { Song } from '../data/songs'
+
+type SongListProps = {
+  songs: Song[]
+  onSelectSong: (song: Song) => void
+}
+
+export function SongList({songs, onSelectSong}: SongListProps) {
+  return (
+    <section aria-labelledby='song-list-heading'>
+      <h2 id="song-list-heading">
+        Velg sang
+      </h2>
+
+      <ul>
+        {songs.map((song) => (
+          <li key={song.id}>
+            <button type='button' onClick={() => onSelectSong(song)}>
+              {song.title} - {song.artist}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
\ No newline at end of file