diff --git a/astro.config.mjs b/astro.config.mjs
index 8bbd446..59514b7 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,6 +6,7 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			title: 'grlx.dev',
+            components: { Head: './src/components/Transitions.astro'},
             logo: { src: './src/assets/grlx.webp' },
 			social: {
                 github: 'https://gihthub.com/gogrlx/grlx',
diff --git a/src/components/Transitions.astro b/src/components/Transitions.astro
new file mode 100644
index 0000000..acbe181
--- /dev/null
+++ b/src/components/Transitions.astro
@@ -0,0 +1,7 @@
+---
+import type { Props } from '@astro/starlight/props';
+import Default from '@astrojs/starlight/components/Head.astro'
+import { ViewTransitions } from 'astro:transitions';
+---
+<ViewTransitions />
+<Default {...Astro.props}><slot /><</Default>