diff --git a/pages/index.html.skooma.yue b/pages/index.html.skooma.yue
index 66f6c0c..6602667 100644
--- a/pages/index.html.skooma.yue
+++ b/pages/index.html.skooma.yue
@@ -5,7 +5,7 @@ posts = require 'posts'
 post = =>
 	a href: "/"..output..@head.uri,
 		* flexColumn
-			* b @head.title
+			* h2 @head.title, style: "view-transition-name: #{@head.slug}"
 			* time is: 'local-date', datetime: @head.date, @head.date
 			* @head.description
 
diff --git a/templates/main.html.skooma.yue b/templates/main.html.skooma.yue
index d2ea518..2019bc3 100644
--- a/templates/main.html.skooma.yue
+++ b/templates/main.html.skooma.yue
@@ -22,6 +22,7 @@ content, data = select 1, ...
 html
 	lang: "english"
 	* head
+		* meta name: "view-transition", content: "same-origin"
 		* meta charset: "UTF-8"
 		* meta name: "viewport", content: "width=device-width"
 		* css 'https://darkwiiplayer.github.io/css/all.css'
diff --git a/templates/post.html.skooma.yue b/templates/post.html.skooma.yue
index 28007ae..ab66e14 100644
--- a/templates/post.html.skooma.yue
+++ b/templates/post.html.skooma.yue
@@ -31,11 +31,11 @@ breadcrumb = (href) -> li a :href, href\match('[^/]+$')
 if src = post.head.cover_image
 	slots.top pageHero cover: 60
 		* img :src, style: 'opacity: .4'
-		* h1(post.head.title)
+		* h1(post.head.title, style: "view-transition-name: #{post.head.slug}")
 	slots.head
 		* meta property: "og:image", content: src
 else
-	slots.title h1(post.head.title)
+	slots.title h1(post.head.title, style: "view-transition-name: #{post.head.slug}")
 
 return (=>@)
 	* article