diff --git a/astro.config.mjs b/astro.config.mjs
index 61dc4ed..33dd862 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -79,15 +79,16 @@ export default defineConfig({
       favicon: "/favicon.ico",
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
+        Head: "./src/components/ui/starlight/Head.astro",
       },
       head: [
         {
           tag: "meta",
-          attrs: { property: "og:image", content: "https://screwfast.uk" + "/social.png" },
+          attrs: { property: "og:image", content: "https://screwfast.uk" + "/social.webp" },
         },
         {
           tag: "meta",
-          attrs: { property: "twitter:image", content: "https://screwfast.uk" + "/social.png" },
+          attrs: { property: "twitter:image", content: "https://screwfast.uk" + "/social.webp" },
         },
       ],
     }),
diff --git a/package-lock.json b/package-lock.json
index 8f46db6..594e836 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
+        "astro-vtbot": "^1.7.1",
         "prettier": "^3.2.5",
         "prettier-plugin-astro": "^0.13.0",
         "prettier-plugin-tailwindcss": "^0.5.13",
@@ -3149,6 +3150,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/astro-vtbot": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.7.1.tgz",
+      "integrity": "sha512-LTOs5d5Y1A7I/19RDeZKfur/oRsAD9Rlf9fp5pvidlp8kHbagWcI96EiDewNyK+j9gdROu9mw46WExOj1BQ4dg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/martrapp"
+      }
+    },
     "node_modules/astro/node_modules/@astrojs/markdown-remark": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-4.3.2.tgz",
diff --git a/package.json b/package.json
index 008a86c..e26d3d5 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
+    "astro-vtbot": "^1.7.1",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.13",
diff --git a/src/components/ui/starlight/Head.astro b/src/components/ui/starlight/Head.astro
new file mode 100644
index 0000000..5ce9c40
--- /dev/null
+++ b/src/components/ui/starlight/Head.astro
@@ -0,0 +1,26 @@
+---
+import StarlightHead from "@astrojs/starlight/components/Head.astro";
+import {
+  default as VtbotStarlight,
+  type Props,
+} from "astro-vtbot/components/starlight/Base.astro";
+
+// https://docs.astro.build/en/guides/view-transitions/#fallback-control
+Astro.props.viewTransitionsFallback = "animate";
+---
+
+<VtbotStarlight {...Astro.props}>
+  <StarlightHead {...Astro.props} />
+</VtbotStarlight>
+
+<style is:global>
+  /* Slow down Chrome's default animation */
+  ::view-transition-group(root) {
+    animation-duration: 250ms;
+  }
+
+  /* Do not slide over the sidebars */
+  ::view-transition-group(*) {
+    overflow: hidden;
+  }
+</style>