diff --git a/karaokatalog/ui/static/components/pieces/Song.js b/karaokatalog/ui/static/components/pieces/Song.js
new file mode 100644
index 0000000..9ff4ba3
--- /dev/null
+++ b/karaokatalog/ui/static/components/pieces/Song.js
@@ -0,0 +1,25 @@
+export default {
+    view: function (vnode) {
+        const { song } = vnode.attrs
+
+        return m("article.song", [
+            m(".info", [
+                m(".title", song.title),
+                m(".artist", song.artist),
+            ]),
+            m(".actions", [
+                m(
+                    "span.material-symbols-outlined.heart-icon",
+                    {
+                        class: song.favorite ? "is-favorite" : "",
+                        onclick: () => song.toggleFavorite(),
+                        title: song.favorite
+                            ? "Als Favorit entfernen"
+                            : "Als Favorit markieren",
+                    },
+                    "favorite",
+                ),
+            ]),
+        ])
+    },
+}