diff --git a/karaokatalog/ui/static/components/pages/Favorites.js b/karaokatalog/ui/static/components/pages/Favorites.js
new file mode 100644
index 0000000..cc6b383
--- /dev/null
+++ b/karaokatalog/ui/static/components/pages/Favorites.js
@@ -0,0 +1,41 @@
+import Base from "./Base.js"
+import SongList from "../pieces/SongList.js"
+import Song from "../../model/Song.js"
+import search from "../../model/search.js"
+import ClearSearchLink from "../pieces/ClearSearchLink.js"
+
+export default {
+    oncreate() {
+        document.title = "Favoriten · Karaokatalog"
+    },
+    oninit() {
+        Song.load()
+    },
+    view() {
+        const allFavorites = Song.all?.filter(song => song.favorite)
+        const favoritesToShow = search.apply(allFavorites)
+        
+        let message = null
+        if(!allFavorites) {
+            message = "Lade Songs..."
+        } else if(allFavorites.length === 0) {
+            message = "Du hast noch keine Favoriten markiert."
+        } else if(favoritesToShow.length === 0) {
+            message = [
+                `Deine Suche ergab keine Treffer unter deinen ${allFavorites.length} Favoriten. `,
+                m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
+            ]
+        } else if(allFavorites.length > favoritesToShow.length) {
+            message = [
+                `Deine Suche zeigt ${favoritesToShow.length} von deinen insgesamt ${allFavorites.length} Favoriten. `,
+                m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
+            ]
+        }
+
+        return m(
+            Base,
+            message && m("p", message),
+            favoritesToShow && m(SongList, { songs: favoritesToShow }),
+        )
+    },
+}