diff --git a/lib/music_library_web/live/collection_live/show.ex b/lib/music_library_web/live/collection_live/show.ex
index e5e97a35..9ed8c962 100644
--- a/lib/music_library_web/live/collection_live/show.ex
+++ b/lib/music_library_web/live/collection_live/show.ex
@@ -262,10 +262,11 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
               <.dl_row label={gettext("Genres")}>
                 <.link
                   :for={genre <- @record.genres}
-                  class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
                   patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
                 >
-                  {genre}
+                  <.badge variant="soft">
+                    {genre}
+                  </.badge>
                 </.link>
               </.dl_row>
               <.dl_row label={gettext("Purchased on")}>
diff --git a/lib/music_library_web/live/wishlist_live/show.ex b/lib/music_library_web/live/wishlist_live/show.ex
index 165f9649..74aac03f 100644
--- a/lib/music_library_web/live/wishlist_live/show.ex
+++ b/lib/music_library_web/live/wishlist_live/show.ex
@@ -241,10 +241,11 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
               <.dl_row label={gettext("Genres")}>
                 <.link
                   :for={genre <- @record.genres}
-                  class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
                   patch={~p"/wishlist?#{%{query: ~s(genre:"#{genre}")}}"}
                 >
-                  {genre}
+                  <.badge variant="soft">
+                    {genre}
+                  </.badge>
                 </.link>
               </.dl_row>
               <.dl_row label={gettext("Published releases")}>