diff --git a/packages/starlight-plugin-show-latest-version/components/VersionBadge.astro b/packages/starlight-plugin-show-latest-version/components/VersionBadge.astro
new file mode 100644
index 0000000..53b737f
--- /dev/null
+++ b/packages/starlight-plugin-show-latest-version/components/VersionBadge.astro
@@ -0,0 +1,38 @@
+---
+---
+
+<div id="starlight-plugin-show-latest-version"></div>
+
+<script>
+  import fetchVersion from '../libs/utils';
+  import pluginConfig from 'virtual:starlight-plugin-show-latest-version-config';
+
+  (async () => {
+    let version = await fetchVersion(pluginConfig);
+    
+    const container = document.querySelector('#starlight-plugin-show-latest-version');
+
+    if (version.versionAvailable) {
+      console.log("got version");
+      if (container) {
+        container.innerHTML = `
+          <a href="https://github.com/${pluginConfig.repo}/releases" id="starlight-plugin-show-latest-version-link">
+            <Badge text="${version.version}" size="${pluginConfig.badge.size}" variant="${pluginConfig.badge.variant}" />
+          </a>
+        `;
+      }
+    }
+  })();
+</script>
+
+<style>
+  #starlight-plugin-show-latest-version-link {
+    display: none;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  .visible {
+    display: flex !important;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/starlight-plugin-show-latest-version/overrides/SiteTitle.astro b/packages/starlight-plugin-show-latest-version/overrides/SiteTitle.astro
index 30e1586..72d729d 100644
--- a/packages/starlight-plugin-show-latest-version/overrides/SiteTitle.astro
+++ b/packages/starlight-plugin-show-latest-version/overrides/SiteTitle.astro
@@ -1,15 +1,10 @@
 ---
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
-import pluginConfig from 'virtual:starlight-plugin-show-latest-version-config';
-// import context from 'virtual:starlight-plugin-show-latest-version-context';
 import type { Props } from '../props';
-import { Badge } from '@astrojs/starlight/components';
-import fetchVersion from '../libs/utils';
+import VersionBadge from '../components/VersionBadge.astro';
 
 const { siteTitle, siteTitleHref } = Astro.props;
-
-const context = await fetchVersion(pluginConfig);
 ---
 
 <a href={siteTitleHref} class="site-title sl-flex">
@@ -39,13 +34,7 @@ const context = await fetchVersion(pluginConfig);
 	<span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
 		{siteTitle}
 	</span>
-  {context.versionAvailable && (
-    <starlight-plugin-show-latest-version>
-      <a href="https://github.com/trueberryless-org/starlight-cooler-credit/releases/latest" class="starlight-plugin-show-latest-version-link">
-        <Badge text={context.version} variant={pluginConfig.badge.variant} size={pluginConfig.badge.size} class='starlight-plugin-show-latest-version-badge'/>
-      </a>
-    </starlight-plugin-show-latest-version>
-  )}
+  <VersionBadge />
 </a>
 
 
@@ -66,9 +55,4 @@ const context = await fetchVersion(pluginConfig);
 		object-fit: contain;
 		object-position: 0 50%;
 	}
-  .starlight-plugin-show-latest-version-link {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-  }
 </style>