diff --git a/docs/demo/astro.config.ts b/docs/demo/astro.config.ts
index 9468b8f53..f55b08026 100644
--- a/docs/demo/astro.config.ts
+++ b/docs/demo/astro.config.ts
@@ -5,5 +5,11 @@ export default defineConfig({
   devToolbar: {
     enabled: false,
   },
-  integrations: [tutorialkit()],
+  integrations: [
+    tutorialkit({
+      components: {
+        TopBar: './src/components/TopBar.astro',
+      },
+    }),
+  ],
 });
diff --git a/docs/demo/package.json b/docs/demo/package.json
index 671e15bb9..ceddb4eb4 100644
--- a/docs/demo/package.json
+++ b/docs/demo/package.json
@@ -21,6 +21,7 @@
     "@tutorialkit/astro": "workspace:*",
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",
+    "@types/react": "^18.3.3",
     "astro": "^4.15.0",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.4.5"
diff --git a/docs/demo/src/components/Github.tsx b/docs/demo/src/components/Github.tsx
new file mode 100644
index 000000000..0a2c08299
--- /dev/null
+++ b/docs/demo/src/components/Github.tsx
@@ -0,0 +1,20 @@
+export function Github() {
+  return (
+    <a
+      href="https://github.com/stackblitz/tutorialkit/tree/main/docs/demo"
+      className="flex items-center text-2xl text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 mr-2 transition-theme rounded-md"
+      title="Github"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        style={{ height: '1.3rem', width: '1.3rem', fill: 'var(--tk-elements-topBar-iconButton-iconColor)' }}
+      >
+        <g>
+          <rect width="24" height="24" opacity="0"></rect>
+          <path d="M16.24 22a1 1 0 0 1-1-1v-2.6a2.15 2.15 0 0 0-.54-1.66 1 1 0 0 1 .61-1.67C17.75 14.78 20 14 20 9.77a4 4 0 0 0-.67-2.22 2.75 2.75 0 0 1-.41-2.06 3.71 3.71 0 0 0 0-1.41 7.65 7.65 0 0 0-2.09 1.09 1 1 0 0 1-.84.15 10.15 10.15 0 0 0-5.52 0 1 1 0 0 1-.84-.15 7.4 7.4 0 0 0-2.11-1.09 3.52 3.52 0 0 0 0 1.41 2.84 2.84 0 0 1-.43 2.08 4.07 4.07 0 0 0-.67 2.23c0 3.89 1.88 4.93 4.7 5.29a1 1 0 0 1 .82.66 1 1 0 0 1-.21 1 2.06 2.06 0 0 0-.55 1.56V21a1 1 0 0 1-2 0v-.57a6 6 0 0 1-5.27-2.09 3.9 3.9 0 0 0-1.16-.88 1 1 0 1 1 .5-1.94 4.93 4.93 0 0 1 2 1.36c1 1 2 1.88 3.9 1.52a3.89 3.89 0 0 1 .23-1.58c-2.06-.52-5-2-5-7a6 6 0 0 1 1-3.33.85.85 0 0 0 .13-.62 5.69 5.69 0 0 1 .33-3.21 1 1 0 0 1 .63-.57c.34-.1 1.56-.3 3.87 1.2a12.16 12.16 0 0 1 5.69 0c2.31-1.5 3.53-1.31 3.86-1.2a1 1 0 0 1 .63.57 5.71 5.71 0 0 1 .33 3.22.75.75 0 0 0 .11.57 6 6 0 0 1 1 3.34c0 5.07-2.92 6.54-5 7a4.28 4.28 0 0 1 .22 1.67V21a1 1 0 0 1-.94 1z"></path>
+        </g>
+      </svg>
+    </a>
+  );
+}
diff --git a/docs/demo/src/components/TopBar.astro b/docs/demo/src/components/TopBar.astro
new file mode 100644
index 000000000..8b570c105
--- /dev/null
+++ b/docs/demo/src/components/TopBar.astro
@@ -0,0 +1,23 @@
+---
+import { Github } from './Github';
+---
+
+<nav
+  class="bg-tk-elements-topBar-backgroundColor transition-theme border-b border-tk-elements-app-borderColor flex max-w-full items-center p-3 px-4 min-h-[56px]"
+>
+  <div class="flex flex-1">
+    <slot name="logo" />
+  </div>
+  <div class="mr-2">
+    <slot name="open-in-stackblitz-link" />
+  </div>
+
+  <Github />
+
+  <div>
+    <slot name="theme-switch" />
+  </div>
+  <div>
+    <slot name="login-button" />
+  </div>
+</nav>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6eb84128d..0ef15b05c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ importers:
       '@tutorialkit/types':
         specifier: workspace:*
         version: link:../../packages/types
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
       astro:
         specifier: ^4.15.0
         version: 4.15.0(@types/node@22.4.2)(typescript@5.5.3)
@@ -4000,7 +4003,7 @@ packages:
       '@unocss/core': 0.59.4
       '@unocss/reset': 0.59.4
       '@unocss/vite': 0.59.4(vite@5.4.2)
-      vite: 5.4.2(@types/node@22.4.2)
+      vite: 5.4.2(@types/node@22.4.2)(sass@1.77.6)
     transitivePeerDependencies:
       - rollup
 
@@ -4199,7 +4202,7 @@ packages:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.11
-      vite: 5.4.2(@types/node@22.4.2)
+      vite: 5.4.2(@types/node@22.4.2)(sass@1.77.6)
     transitivePeerDependencies:
       - rollup
 
@@ -6730,7 +6733,6 @@ packages:
 
   /immutable@4.3.6:
     resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
-    dev: true
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -8823,7 +8825,6 @@ packages:
       chokidar: 3.6.0
       immutable: 4.3.6
       source-map-js: 1.2.0
-    dev: true
 
   /sax@1.4.1:
     resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
@@ -9632,7 +9633,7 @@ packages:
       '@unocss/transformer-directives': 0.59.4
       '@unocss/transformer-variant-group': 0.59.4
       '@unocss/vite': 0.59.4(vite@5.4.2)
-      vite: 5.4.2(@types/node@22.4.2)
+      vite: 5.4.2(@types/node@22.4.2)(sass@1.77.6)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -9978,7 +9979,6 @@ packages:
       sass: 1.77.6
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vitefu@0.2.5(vite@5.4.2):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}