diff --git a/templates/components/anime_synopsis.gohtml b/templates/components/anime_synopsis.gohtml
new file mode 100644
index 0000000..e85df2e
--- /dev/null
+++ b/templates/components/anime_synopsis.gohtml
@@ -0,0 +1,12 @@
+{{define "anime_synopsis"}}
+{{$anime := .Anime}}
+<section>
+  <h2 class="mb-4 mt-2 text-base font-normal text-foreground">Synopsis</h2>
+  <p id="synopsis-container" data-synopsis-container class="text-foreground-muted text-base leading-relaxed line-clamp-6 md:line-clamp-none whitespace-pre-line">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
+  {{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
+    <button id="synopsis-toggle" data-synopsis-toggle class="mt-2 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground md:hidden">
+      Read more
+    </button>
+  {{end}}
+</section>
+{{end}}