diff --git a/internal/shared/ui/anime_card.templ b/internal/shared/ui/anime_card.templ
new file mode 100644
index 0000000..258bb78
--- /dev/null
+++ b/internal/shared/ui/anime_card.templ
@@ -0,0 +1,22 @@
+package ui
+
+import "fmt"
+
+type AnimeCardProps struct {
+	ID       int
+	Title    string
+	ImageURL string
+}
+
+templ AnimeCard(props AnimeCardProps) {
+	<a href={ templ.URL(fmt.Sprintf("/anime/%d", props.ID)) }>
+		if props.ImageURL != "" {
+			<img src={ props.ImageURL } alt={ props.Title } class="catalog-thumb" loading="lazy"/>
+		} else {
+			<div class="no-image">No image</div>
+		}
+	</a>
+	<div class="catalog-title">
+		{ props.Title }
+	</div>
+}
diff --git a/internal/shared/ui/anime_list.templ b/internal/shared/ui/anime_list.templ
index fbdeb9c..76888c6 100644
--- a/internal/shared/ui/anime_list.templ
+++ b/internal/shared/ui/anime_list.templ
@@ -36,14 +36,9 @@ templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, cont
 }
 
 templ CatalogItem(anime jikan.Anime) {
-	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
-		if anime.ImageURL() != "" {
-			<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
-		} else {
-			<div class="no-image">No image</div>
-		}
-	</a>
-	<div class="catalog-title">
-		{ anime.DisplayTitle() }
-	</div>
+	@AnimeCard(AnimeCardProps{
+		ID:       anime.MalID,
+		Title:    anime.DisplayTitle(),
+		ImageURL: anime.ImageURL(),
+	})
 }
diff --git a/internal/templates/watchlist.templ b/internal/templates/watchlist.templ
index eb36fc3..9a788aa 100644
--- a/internal/templates/watchlist.templ
+++ b/internal/templates/watchlist.templ
@@ -47,14 +47,11 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
 				<div class="catalog-grid">
 					for _, entry := range entries {
 						<div class="catalog-item watchlist-item" id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }>
-							<a href={ templ.URL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
-								if entry.ImageUrl != "" {
-									<img src={ entry.ImageUrl } alt={ entry.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
-								} else {
-									<div class="no-image">No image</div>
-								}
-							</a>
-							<div class="catalog-title">{ entry.DisplayTitle() }</div>
+							@ui.AnimeCard(ui.AnimeCardProps{
+								ID:       int(entry.AnimeID),
+								Title:    entry.DisplayTitle(),
+								ImageURL: entry.ImageUrl,
+							})
 							<button
 								class="remove-btn"
 								hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=watchlist", entry.AnimeID))) }