diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 75197ba91..43fee111c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,7 +7,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="noodp" />
-
+    {{/*  View Transition  */}}
+    {{/*  https://developer.chrome.com/docs/web-platform/view-transitions/cross-document  */}}
+    <style>
+        @view-transition {
+            navigation: auto;
+        }
+    </style>
     {{- /* Paginate  */ -}}
     {{- /* Paginate in here, To solve the problem of the canonical URL being the same in the pagination */ -}}
     {{- /* see more https://github.com/gohugoio/hugo/issues/4507 */ -}}
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 617094b12..ccc83a3e5 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -6,19 +6,19 @@
     {{- with $image -}}
         <div class="featured-image-preview">
             <a href="{{ $.RelPermalink }}" aria-label={{ $.Title }}>
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true "ViewTransitionName" (printf "featured-image-%v" $.Title) | partial "plugin/image.html" -}}
             </a>
         </div>
     {{- end -}}
 
     {{- /* Title */ -}}
-    <h1 class="single-title">
+    <h1 class="single-title" style='view-transition-name: {{ (printf "single-title-%v" .Title) | partial "function/stringNormalise.html" | safeCSS }};'>
         <a href="{{ .RelPermalink }}">{{ .Title }}</a>
     </h1>
 
     {{- /* Meta */ -}}
     <div class="post-meta">
-        <span class="post-author">
+        <span class="post-author" style='view-transition-name: {{ (printf "post-author-%v" .Title) | partial "function/stringNormalise.html" | safeCSS }};'>
             {{- partial "meta/author" . }}
         </span>
 
diff --git a/layouts/partials/function/stringNormalise.html b/layouts/partials/function/stringNormalise.html
new file mode 100644
index 000000000..2d206a454
--- /dev/null
+++ b/layouts/partials/function/stringNormalise.html
@@ -0,0 +1 @@
+{{- return replaceRE "[^A-Za-z0-9]" "-" . -}}
\ No newline at end of file
diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html
index 6660db841..69056a535 100644
--- a/layouts/partials/plugin/image.html
+++ b/layouts/partials/plugin/image.html
@@ -34,6 +34,7 @@
 {{- end -}}
         <img
             {{ with .Class }}class="{{ . }}"{{ end }}
+            {{- with .ViewTransitionName -}}style='view-transition-name: {{ . | partial "function/stringNormalise.html" | safeCSS }};'{{ end }}
             loading="{{ $loading }}"
             src="{{ $default.RelPermalink | safeURL }}"
             srcset="
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index cc45c2813..864f1a7e4 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -34,7 +34,7 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
 
     <article class="page single print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
         {{- /* Title */ -}}
-        <h1 class="single-title">{{ .Title }}</h1>
+        <h1 class="single-title" style='view-transition-name: {{ (printf "single-title-%v" .Title) | partial "function/stringNormalise.html" | safeCSS }};'>{{ .Title }}</h1>
 
         {{- /* Subtitle */ -}}
         {{- with $params.subtitle -}}
@@ -44,7 +44,7 @@ <h2 class="single-subtitle">{{ . }}</h2>
         {{- /* Meta */ -}}
         <div class="post-meta">
             <div class="post-meta-line">
-                <span class="post-author">
+                <span class="post-author" style='view-transition-name: {{ (printf "post-author-%v" .Title) | partial "function/stringNormalise.html" | safeCSS }};'>
                     {{- partial "meta/author.html" . }}
                 </span>
                 {{- with .Params.categories | or .Params.series -}}
@@ -151,7 +151,7 @@ <h2 class="single-subtitle">{{ . }}</h2>
         {{- $image := $params.featuredimage -}}
         {{- with $image -}}
             <div class="featured-image">
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true "ViewTransitionName" (printf "featured-image-%v" $.Title) | partial "plugin/image.html" -}}
             </div>
         {{- end -}}      
         {{- /* Series list */ -}}