diff --git a/packages/astro/src/default/components/OpenInStackblitzLink.astro b/packages/astro/src/default/components/OpenInStackblitzLink.astro
deleted file mode 100644
index 1dd06becd..000000000
--- a/packages/astro/src/default/components/OpenInStackblitzLink.astro
+++ /dev/null
@@ -1,41 +0,0 @@
-<button
-  transition:persist
-  title="Open in StackBlitz"
-  data-id="open-in-stackblitz"
-  class="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
->
-  <svg viewBox="0 0 28 28" aria-hidden="true" height="24" width="24">
-    <path fill="currentColor" d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"></path>
-  </svg>
-</button>
-
-<script>
-  import StackBlitzSDK from '@stackblitz/sdk';
-  import { tutorialStore } from '../components/webcontainer.js';
-
-  // initialize handlers on each page load as it's possible some pages disable openInStackBlitz
-  document.addEventListener('astro:page-load', onInit);
-
-  function onInit() {
-    const buttons = document.querySelectorAll('[data-id="open-in-stackblitz"]');
-    buttons.forEach((button) => button.addEventListener('click', onClick));
-  }
-
-  function onClick() {
-    const lesson = tutorialStore.lesson;
-
-    if (!lesson) {
-      throw new Error('Missing lesson');
-    }
-
-    const snapshot = tutorialStore.takeSnapshot();
-    const options = typeof lesson.data.openInStackBlitz === 'object' ? lesson.data.openInStackBlitz : {};
-
-    StackBlitzSDK.openProject({
-      title: options.projectTitle || 'Project generated by TutorialKit',
-      description: options.projectDescription,
-      template: options.projectTemplate || 'node',
-      files: snapshot.files,
-    });
-  }
-</script>
diff --git a/packages/astro/src/default/components/OpenInStackblitzLink.tsx b/packages/astro/src/default/components/OpenInStackblitzLink.tsx
new file mode 100644
index 000000000..dfbee937d
--- /dev/null
+++ b/packages/astro/src/default/components/OpenInStackblitzLink.tsx
@@ -0,0 +1,37 @@
+import StackBlitzSDK from '@stackblitz/sdk';
+import { tutorialStore } from './webcontainer.js';
+
+export function OpenInStackblitzLink() {
+  return (
+    <button
+      title="Open in StackBlitz"
+      className="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
+      onClick={onClick}
+    >
+      <svg viewBox="0 0 28 28" aria-hidden="true" height="24" width="24">
+        <path
+          fill="currentColor"
+          d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
+        ></path>
+      </svg>
+    </button>
+  );
+}
+
+function onClick() {
+  const lesson = tutorialStore.lesson;
+
+  if (!lesson) {
+    throw new Error('Missing lesson');
+  }
+
+  const snapshot = tutorialStore.takeSnapshot();
+  const options = typeof lesson.data.openInStackBlitz === 'object' ? lesson.data.openInStackBlitz : {};
+
+  StackBlitzSDK.openProject({
+    title: options.projectTitle || 'Project generated by TutorialKit',
+    description: options.projectDescription,
+    template: options.projectTemplate || 'node',
+    files: snapshot.files,
+  });
+}
diff --git a/packages/astro/src/default/components/TopBarWrapper.astro b/packages/astro/src/default/components/TopBarWrapper.astro
index 6ea8b0cc7..1d3b89101 100644
--- a/packages/astro/src/default/components/TopBarWrapper.astro
+++ b/packages/astro/src/default/components/TopBarWrapper.astro
@@ -3,7 +3,7 @@ import { TopBar } from 'tutorialkit:override-components';
 import type { Lesson } from '@tutorialkit/types';
 import { ThemeSwitch } from './ThemeSwitch';
 import { LoginButton } from './LoginButton';
-import OpenInStackblitzLink from './OpenInStackblitzLink.astro';
+import { OpenInStackblitzLink } from './OpenInStackblitzLink';
 import Logo from './Logo.astro';
 import { useAuth } from './setup';
 
@@ -18,7 +18,7 @@ const { logoLink, openInStackBlitz } = Astro.props;
 <TopBar>
   <Logo slot="logo" logoLink={logoLink ?? '/'} />
 
-  {openInStackBlitz && <OpenInStackblitzLink slot="open-in-stackblitz-link" />}
+  {openInStackBlitz && <OpenInStackblitzLink client:load transition:persist slot="open-in-stackblitz-link" />}
 
   <ThemeSwitch client:load transition:persist slot="theme-switch" />
 
diff --git a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
index 381191655..67e94228b 100644
--- a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
+++ b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
@@ -209,7 +209,7 @@ exports[`create and eject a project 1`] = `
   "src/components/MobileContentToggle.astro",
   "src/components/NavCard.astro",
   "src/components/NavWrapper.tsx",
-  "src/components/OpenInStackblitzLink.astro",
+  "src/components/OpenInStackblitzLink.tsx",
   "src/components/PageLoadingIndicator.astro",
   "src/components/ResizablePanel.astro",
   "src/components/ThemeSwitch.tsx",