diff --git a/css/site.css b/css/site.css
index 6da0c7c..ebcf126 100644
--- a/css/site.css
+++ b/css/site.css
@@ -2,6 +2,18 @@ blog-post[hidden] {
 	display: none;
 }
 
+.summary {
+	font-size: .8em;
+	font-style: italic;
+	opacity: .6;
+	transition: opacity .3s;
+	tab-stop: 0;
+}
+
+.summary:is(:hover, :focus) {
+	opacity: 1;
+}
+
 blog-post {
 	display: block;
 }
diff --git a/templates/post.html.skooma.yue b/templates/post.html.skooma.yue
index b620f7e..f275164 100644
--- a/templates/post.html.skooma.yue
+++ b/templates/post.html.skooma.yue
@@ -38,6 +38,9 @@ if src = post.head.cover_image
 else
 	slots.title h1(post.head.title, style: "view-transition-name: #{post.head.slug}")
 
+slots.summary div post.head.description, class: "summary"
+slots.summary verticalSpacer
+
 slots.banner aside class: { 'box' }
 	* b "Hey there!"
 	* p raw [[
@@ -55,6 +58,7 @@ slots.footer aside id: "contact"
 return (=>@)
 	* article
 		* slots.title
+		* slots.summary
 		* tags(post.head.tags)
 		* nav { class: "breadcrumbs" }
 			* ul