diff --git a/astro.config.mjs b/astro.config.mjs
index e57339e..cb6313a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,6 +19,7 @@ export default defineConfig({
       css: false,
       components: {
         Head: './docs/src/site/StyleHead.astro',
+        SidebarHeader: './docs/src/site/SidebarHeader.astro',
         ContentHeader: './docs/src/site/ContentHeader.astro',
       },
       site: {
diff --git a/docs/src/site/SidebarHeader.astro b/docs/src/site/SidebarHeader.astro
new file mode 100644
index 0000000..28f9a19
--- /dev/null
+++ b/docs/src/site/SidebarHeader.astro
@@ -0,0 +1,28 @@
+---
+const { site } = Astro.props;
+const escapeHtml = (value) =>
+  String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+const logo = site.logo?.svg
+  ? site.logo.svg
+  : site.logo?.url
+    ? `<img src="${escapeHtml(site.logo.url)}" alt="${escapeHtml(site.title)} logo" class="size-6" />`
+    : "";
+---
+
+<a href="/" class="btn h-12 w-full justify-start p-2" data-variant="ghost" data-size="lg" hx-boost="false">
+  {
+    logo && (
+      <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+        <Fragment set:html={logo} />
+      </div>
+    )
+  }
+  <div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-semibold">{site.title}</span>
+    {site.subtitle && <span class="truncate text-xs text-muted-foreground">{site.subtitle}</span>}
+  </div>
+</a>