diff --git a/karaokatalog/ui/static/components/pieces/SongList.js b/karaokatalog/ui/static/components/pieces/SongList.js
new file mode 100644
index 0000000..5cab73d
--- /dev/null
+++ b/karaokatalog/ui/static/components/pieces/SongList.js
@@ -0,0 +1,11 @@
+import Artist from "./Artist.js"
+import Pagination from "./Pagination.js"
+
+export default {
+    view: function (vnode) {
+        const sortedSongs = vnode.attrs.songs.toSorted((a, b) => a.artist.localeCompare(b.artist) || a.title.localeCompare(b.title))
+        const songsByArtist = Map.groupBy(sortedSongs, song => song.artist)
+
+        return m(Pagination, { elements: songsByArtist.entries().map(([artist, songs]) => m(Artist, { artist, songs })) })
+    },
+}