diff --git a/astro.config.ts b/astro.config.ts
index 37abf82..d1764ff 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -16,7 +16,7 @@ import type { Badge } from 'node_modules/@astrojs/starlight/schemas/badge';
 // https://astro.build/config
 export default defineConfig({
   image: { remotePatterns: [{ protocol: "https" }] },
-  devToolbar: { enabled: true },
+  devToolbar: { enabled: false },
   site: 'https://vtbag.dev',
   compressHTML: false,
   redirects: {
diff --git a/public/image-viewer-og.png b/public/image-viewer-og.png
new file mode 100644
index 0000000..0334824
Binary files /dev/null and b/public/image-viewer-og.png differ
diff --git a/src/content/docs/tools/turn-signal.mdx b/src/content/docs/tools/turn-signal.mdx
index 814bda2..ce1567b 100644
--- a/src/content/docs/tools/turn-signal.mdx
+++ b/src/content/docs/tools/turn-signal.mdx
@@ -13,6 +13,21 @@ import Logo from "../../../components/Logo.astro";
 import CTA from "../../../components/CTA.astro";
 import signal from "../../../assets/signal.png";
 
+<style>{`
+:active-view-transition-type(old) #signal {
+  view-transition-name: signal;
+}
+:active-view-transition-type(old) #viewer {
+  view-transition-name: viewer;
+}
+:active-view-transition-type(old) #fishpond {
+  view-transition-name: panel;
+}
+:active-view-transition-type(old) #forced {
+  view-transition-name: forced;
+}
+`}</style>
+
 <Logo alt="The Turn-Signal" image={signal}>
 Backward/forward view transitions for intuitive history navigation.
 
@@ -39,15 +54,17 @@ import { CardGrid } from "@astrojs/starlight/components";
 
 <CardGrid>
 <Card title="Turn-Signal Demo">
-<span class="light:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-dark.png)</span>
-<span class="dark:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-light.png)</span>
+<div id="signal">[<span class="light:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-dark.png)</span><span class="dark:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-light.png)</span>](/signal-demo/bag/)</div>
 Try the [Turn-Signal Demo](/signal-demo/bag/) to see the _directions script_ in action. Click on the icons to navigate the pages. Then use your browser's back button to return.
 
 Notice how the slide animation changes direction based on the order of the pages.
 
 </Card>
+
 <Card title="Image Viewer Demo">
-<span>![Image Viewer Demo](@/assets/viewer-demo.png)</span>
+
+<div id="viewer">[![Image Viewer Demo](@/assets/viewer-demo.png)](/viewer-demo/)</div>
+
 The [Image Viewer Demo](/viewer-demo/) showcases various animations for the same page: sliding  from  right or left, resizing, and changing its aspect ratio.
 
 Thanks to the _link-types_ script, you can control which animation to use by adding annotations to the links that navigate to the page.
@@ -55,7 +72,7 @@ Thanks to the _link-types_ script, you can control which animation to use by add
 </Card>
 
 <Card title="Fish Pond Demo">
-<span>![Fishpond Demo](@/assets/pond.png)</span>
+<div id="fishpond">[![Fishpond Demo](@/assets/pond.png)](/link-demo/)</div>
 
 Looking for a more dramatic example of how to control view transition types with your links?
 
@@ -66,11 +83,12 @@ Explore the pond to learn more about how the demo was implemented.
 </Card>
 
 <Card title="Forced Traversal">
-<span>![forced navigatiom](@/assets/ft.png)</span>
+
+<div id="forced">[![forced navigatiom](@/assets/ft.png)](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)</div>
 
 To see the _forced traversal_ script in action alongside the _directions script_, head over to the [Vtbot Demo](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)! No matter how many times you click the tabs in the header, your browser history will always have just three or less entries.
 
-You can skip the Astro-specific details on the demo page. Script details are explained [below](#forced-transition)
+You can skip the Astro-specific details on the demo page. Script details are explained [below](#forced-traversal)
 
 </Card>
 
@@ -163,6 +181,10 @@ Like the _directions script_, the _link types_ script also applies the `old` typ
 
 The `forced-traversal` script replaces forward navigation with history traversals if the target pages has been visited before.
 
+:::note
+This script only works on browser that [support the Navigation API](https://caniuse.com/mdn-api_navigation ).
+:::
+
 Users may be annoyed when a website messes up their history entries, but there are situations where replacing navigation with traversals has its appeal. Use at your own discretion.
 
 There are no configuration options and the `forced-traversal` script does not take any parameters.
diff --git a/src/pages/link-demo/_Layout.astro b/src/pages/link-demo/_Layout.astro
index 40d237e..46b3e28 100644
--- a/src/pages/link-demo/_Layout.astro
+++ b/src/pages/link-demo/_Layout.astro
@@ -11,22 +11,41 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<BaseLayout {title} description="Tech demo on how to control your view transition types with data-attributes on your links when doing browser-native cross-document view transitions!" image="/fishpond-og.png">
-    <script slot="head" is:inline set:html={linkTypes}></script>
-    <script slot="head" is:inline src={vtn}
-      data-spec=".nav-btn: nav-btn-; .transition-link: transition-link-; .transition-link .content: transition-link-content-"></script>
-      <script slot="head" is:inline type="speculationrules">
+<BaseLayout
+  {title}
+  description="Tech demo on how to control your view transition types with data-attributes on your links when doing browser-native cross-document view transitions!"
+  image="/fishpond-og.png"
+>
+  <script slot="head" is:inline set:html={linkTypes} />
+  <script
+    slot="head"
+    is:inline
+    src={vtn}
+    data-spec=".nav-btn: nav-btn-; .transition-link: transition-link-; .transition-link .content: transition-link-content-"
+  ></script>
+  <script slot="head" is:inline type="speculationrules">
+    {
+      "prerender": [
         {
-          "prerender": [
-            {
-              "urls": ["/link-demo/", "/link-demo/0/", "/link-demo/1/", "/link-demo/2/","/link-demo/3/", "/link-demo/4/", "/link-demo/5/","/link-demo/6/", "/link-demo/7/", "/link-demo/8/"]
-            }
+          "urls": [
+            "/link-demo/",
+            "/link-demo/0/",
+            "/link-demo/1/",
+            "/link-demo/2/",
+            "/link-demo/3/",
+            "/link-demo/4/",
+            "/link-demo/5/",
+            "/link-demo/6/",
+            "/link-demo/7/",
+            "/link-demo/8/"
           ]
         }
-      </script>
+      ]
+    }
+  </script>
 
-    <slot />
-  </BaseLayout>
+  <slot />
+</BaseLayout>
 
 <style is:global>
   * {
diff --git a/src/pages/link-demo/_vt.css b/src/pages/link-demo/_vt.css
index d8c6208..e8c6f2a 100644
--- a/src/pages/link-demo/_vt.css
+++ b/src/pages/link-demo/_vt.css
@@ -5,9 +5,6 @@
 .panel > div > p {
   text-wrap: pretty
 }
-:root {
-  view-transition-name: none;
-}
 ::view-transition-group(*) {
   animation-duration: 1s;
 }
diff --git a/src/pages/signal-demo/_Layout.astro b/src/pages/signal-demo/_Layout.astro
index 36b02ba..83275a3 100644
--- a/src/pages/signal-demo/_Layout.astro
+++ b/src/pages/signal-demo/_Layout.astro
@@ -46,7 +46,7 @@ const images = [bag, chamber, crossing, signal, shaft];
     <header style="display:flex">
       <div style="width: 30vw"><h2>Turn-Signal Demo</h2></div>
       <div
-        style="width: calc(100% - 100px); display:flex; overflow: auto; align-items:center"
+        style="view-transition-name: signal; width: calc(100% - 100px); display:flex; overflow: auto; align-items:center"
       >
         {
           pages.map((page, idx) => (
@@ -81,120 +81,121 @@ const images = [bag, chamber, crossing, signal, shaft];
       </p><Bsky /><hr />
       <slot />
     </main>
-  </body><style is:global>
-    @view-transition {
-      navigation: auto;
-    }
-    @keyframes slideFromRight {
-      from {
-        transform: translateX(100vw);
-      }
-    }
-    @keyframes slideFromLeft {
-      from {
-        transform: translateX(-100vw);
-      }
-    }
-    @keyframes slideToRight {
-      to {
-        transform: translateX(100vw);
-      }
-    }
-    @keyframes slideToLeft {
-      to {
-        transform: translateX(-100vw);
-      }
-    }
-    @keyframes stepBackUp {
-      50% {
-        transform: scale(0.8);
-      }
-    }
-
-    ::view-transition-old(img) {
-      animation: slideToLeft both 0.5s;
-    }
-    ::view-transition-new(img) {
-      animation: slideFromRight both 0.5s;
-    }
+    <style is:global>
+      @view-transition {
+        navigation: auto;
+      }
+      @keyframes slideFromRight {
+        from {
+          transform: translateX(100vw);
+        }
+      }
+      @keyframes slideFromLeft {
+        from {
+          transform: translateX(-100vw);
+        }
+      }
+      @keyframes slideToRight {
+        to {
+          transform: translateX(100vw);
+        }
+      }
+      @keyframes slideToLeft {
+        to {
+          transform: translateX(-100vw);
+        }
+      }
+      @keyframes stepBackUp {
+        50% {
+          transform: scale(0.8);
+        }
+      }
 
-    :active-view-transition-type(backward) {
-      &::view-transition-old(img) {
-        animation: slideToRight both 0.5s;
+      ::view-transition-old(img) {
+        animation: slideToLeft both 0.5s;
+      }
+      ::view-transition-new(img) {
+        animation: slideFromRight both 0.5s;
       }
-      &::view-transition-new(img) {
-        animation: slideFromLeft both 0.5s;
+
+      :active-view-transition-type(backward) {
+        &::view-transition-old(img) {
+          animation: slideToRight both 0.5s;
+        }
+        &::view-transition-new(img) {
+          animation: slideFromLeft both 0.5s;
+        }
       }
-    }
 
-    :active-view-transition-type(same) {
-      &::view-transition-old(img),
-      &::view-transition-new(img) {
-        animation: stepBackUp both 0.5s;
+      :active-view-transition-type(same) {
+        &::view-transition-old(img),
+        &::view-transition-new(img) {
+          animation: stepBackUp both 0.5s;
+        }
       }
-    }
 
-    ::view-transition-group(img) {
-      overflow: clip;
-    }
+      ::view-transition-group(img) {
+        overflow: clip;
+      }
 
-    body {
-      font-family: sans-serif;
-    }
-    header img {
-      mask-image: radial-gradient(
-        ellipse at center,
-        white 35%,
-        transparent 71%
-      );
-    }
+      body {
+        font-family: sans-serif;
+      }
+      header img {
+        mask-image: radial-gradient(
+          ellipse at center,
+          white 35%,
+          transparent 71%
+        );
+      }
 
-    a.selected {
-      background: radial-gradient(
-        circle at center,
-        #0008 50%,
-        #fff8 55%,
-        #0008 60%,
-        #0000 66%
-      );
-    }
-    [data-theme="dark"] a.selected {
-      background: radial-gradient(
-        circle at center,
-        #fff8 50%,
-        #0008 55%,
-        #fff8 60%,
-        #0000 66%
-      );
-    }
+      a.selected {
+        background: radial-gradient(
+          circle at center,
+          #0008 50%,
+          #fff8 55%,
+          #0008 60%,
+          #0000 66%
+        );
+      }
+      [data-theme="dark"] a.selected {
+        background: radial-gradient(
+          circle at center,
+          #fff8 50%,
+          #0008 55%,
+          #fff8 60%,
+          #0000 66%
+        );
+      }
 
-    main {
-      width: fit-content;
-      margin: 0 auto;
-    }
-    main img {
-      height: 66vh;
-      width: auto;
-      view-transition-name: img;
-    }
-    @media (orientation: portrait) {
+      main {
+        width: fit-content;
+        margin: 0 auto;
+      }
       main img {
-        width: 100%;
-        height: auto;
-        margin-top: 10vh;
-      }
-    }
-    #back {
-      display: inline-block;
-      color: black;
-      border-radius: 8px;
-      padding: 1rem;
-      margin: 1rem;
-      background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
-      box-shadow: 0 4px 6px #8888;
-    }
-    hr {
-      border-color: #8888;
-    }
-  </style>
+        height: 66vh;
+        width: auto;
+        view-transition-name: img;
+      }
+      @media (orientation: portrait) {
+        main img {
+          width: 100%;
+          height: auto;
+          margin-top: 10vh;
+        }
+      }
+      #back {
+        display: inline-block;
+        color: black;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem;
+        background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
+        box-shadow: 0 4px 6px #8888;
+      }
+      hr {
+        border-color: #8888;
+      }
+    </style>
+  </body>
 </html>
diff --git a/src/pages/viewer-demo/_Layout.astro b/src/pages/viewer-demo/_Layout.astro
index 2db27d9..b7a3474 100644
--- a/src/pages/viewer-demo/_Layout.astro
+++ b/src/pages/viewer-demo/_Layout.astro
@@ -11,7 +11,7 @@ const { title } = Astro.props;
 <BasicLayout
   {title}
   description="Make each link have a different view transition animation"
-  image=""
+  image="image-viewer-og.png"
 >
   <script slot="head" is:inline src={linkTypes}></script>
   <script slot="head" is:inline type="speculationrules">
diff --git a/src/pages/viewer-demo/index.astro b/src/pages/viewer-demo/index.astro
index c512661..ceba8e1 100644
--- a/src/pages/viewer-demo/index.astro
+++ b/src/pages/viewer-demo/index.astro
@@ -14,13 +14,14 @@ import i3 from "./_200_3.webp";
       fine grained control over <b>browser-native cross-document</b> view
       transitions. Click the left image!
     </p>
-    <a href="/viewer-demo/1/"
-      ><Image src={i1} alt="Image 1" width="300" height="200" /></a
-    ><a href="/viewer-demo/2/">
-      <Image src={i2} alt="Image 2" width="300" height="200" /></a
-    ><a href="/viewer-demo/3/">
-      <Image src={i3} alt="Image 3" width="300" height="200" /></a
-    ><p>
+    <div style="view-transition-name: viewer;">
+      <a href="/viewer-demo/1/"
+        ><Image src={i1} alt="Image 1" width="300" height="200" /></a
+      ><a href="/viewer-demo/2/">
+        <Image src={i2} alt="Image 2" width="300" height="200" /></a
+      ><a href="/viewer-demo/3/">
+        <Image src={i3} alt="Image 3" width="300" height="200" /></a>
+    </div><p>
       [Return to the <a href="/tools/turn-signal/#link-types"
         >turn-signal page</a
       >]
@@ -54,5 +55,4 @@ import i3 from "./_200_3.webp";
   a:nth-of-type(3) img {
     view-transition-name: img3;
   }
-
 </style>