diff --git a/internal/templates/studio.templ b/internal/templates/studio.templ
new file mode 100644
index 0000000..4f87ccc
--- /dev/null
+++ b/internal/templates/studio.templ
@@ -0,0 +1,116 @@
+package templates
+
+import "mal/internal/jikan"
+import "mal/internal/shared/ui"
+import "fmt"
+
+templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNext bool, nextPage int) {
+	@Layout("mal - "+getProducerName(producer), true) {
+		<div class="grid gap-5">
+			<div class="grid gap-4 bg-(--panel) p-4">
+				<div class="flex items-start gap-4">
+					if producer.Data.Images.Jpg.ImageURL != "" {
+						<img
+							src={ producer.Data.Images.Jpg.ImageURL }
+							alt={ getProducerName(producer) }
+							class="h-24 w-24 object-contain"
+						/>
+					}
+					<div class="flex-1">
+						<h1 class="text-xl font-semibold">{ getProducerName(producer) }</h1>
+						if producer.Data.Established != "" {
+							<p class="mt-1 text-sm text-(--text-muted)">
+								Established: { formatEstablishedDate(producer.Data.Established) }
+							</p>
+						}
+						if producer.Data.Count > 0 {
+							<p class="text-sm text-(--text-faint)">
+								{ fmt.Sprintf("%d anime", producer.Data.Count) }
+							</p>
+						}
+					</div>
+				</div>
+				if producer.Data.About != "" {
+					<p class="text-sm text-(--text-muted) line-clamp-3">{ producer.Data.About }</p>
+				}
+			</div>
+			<div>
+				<h2 class="mb-3 text-lg font-semibold">Anime</h2>
+				<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="studio-anime-content">
+					for _, anime := range animes {
+						<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
+							@ui.AnimeCard(ui.AnimeCardProps{
+								ID:       anime.MalID,
+								Title:    anime.DisplayTitle(),
+								ImageURL: anime.ImageURL(),
+							})
+						</div>
+					}
+					if hasNext {
+						@StudioLoadMore(producer.Data.MalID, nextPage)
+					}
+				</div>
+			</div>
+		</div>
+	}
+}
+
+templ StudioLoadMore(studioID int, nextPage int) {
+	<div
+		class="col-span-full h-px w-full"
+		hx-get={ string(templ.URL(fmt.Sprintf("/api/studios/%d/anime?page=%d", studioID, nextPage))) }
+		hx-trigger="revealed"
+		hx-swap="outerHTML"
+	></div>
+}
+
+templ StudioAnimeItems(animes []jikan.Anime, hasNext bool, studioID int, nextPage int) {
+	for _, anime := range animes {
+		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
+			@ui.AnimeCard(ui.AnimeCardProps{
+				ID:       anime.MalID,
+				Title:    anime.DisplayTitle(),
+				ImageURL: anime.ImageURL(),
+			})
+		</div>
+	}
+	if hasNext {
+		@StudioLoadMore(studioID, nextPage)
+	}
+	<script data-container="studio-anime-content">
+		(function() {
+			const scripts = document.querySelectorAll('script[data-container]');
+			const currentScript = scripts[scripts.length - 1];
+			const actualID = currentScript.getAttribute('data-container');
+			const container = document.getElementById(actualID) || document;
+			const items = container.querySelectorAll('[data-id]');
+			const seen = new Set();
+			items.forEach(item => {
+				const id = item.getAttribute('data-id');
+				if (id) {
+					if (seen.has(id)) {
+						item.remove();
+					} else {
+						seen.add(id);
+					}
+				}
+			});
+		})();
+	</script>
+}
+
+func getProducerName(producer jikan.ProducerResponse) string {
+	for _, title := range producer.Data.Titles {
+		if title.Type == "Default" {
+			return title.Title
+		}
+	}
+	return "Studio"
+}
+
+func formatEstablishedDate(date string) string {
+	if len(date) >= 10 {
+		return date[:10]
+	}
+	return date
+}