diff --git a/templates/components/anime_themes.gohtml b/templates/components/anime_themes.gohtml
new file mode 100644
index 00000000..0c87a3ff
--- /dev/null
+++ b/templates/components/anime_themes.gohtml
@@ -0,0 +1,38 @@
+{{define "anime_themes"}}
+{{if or .Items.Openings .Items.Endings}}
+<div class="grid grid-cols-2 gap-6 p-6">
+  <div>
+    <h3 class="mb-4 text-sm font-medium text-foreground">Openings</h3>
+    <div class="flex flex-col gap-3">
+      {{range .Items.Openings}}
+        <div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
+      {{end}}
+    </div>
+  </div>
+  <div>
+    <h3 class="mb-4 text-sm font-medium text-foreground">Endings</h3>
+    <div class="flex flex-col gap-3">
+      {{range .Items.Endings}}
+        <div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{else}}
+<div class="p-6 text-sm text-foreground-muted">No theme songs available.</div>
+{{end}}
+{{end}}
+
+{{define "anime_themes_dialog"}}
+<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
+  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card)" role="dialog" aria-modal="true" aria-label="Theme Songs">
+    <div class="flex items-center justify-between px-6 py-4">
+      <h2 class="text-base font-normal text-foreground">Theme Songs</h2>
+      <button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Close</button>
+    </div>
+    <div data-themes-content class="max-h-[60vh] overflow-y-auto"></div>
+  </div>
+</div>
+
+<div data-themes-loader hx-get="/anime/{{.AnimeID}}?section=themes" hx-trigger="theme-songs:load from:body" hx-target="[data-themes-content]" hx-swap="innerHTML"></div>
+{{end}}