diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index aff478ef..bbb7812b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -144,6 +144,7 @@ jobs:
         working-directory: docs
         env:
           TUIKIT_VERSION: ${{ steps.version.outputs.version }}
+          NEXT_PUBLIC_GITHUB_TOKEN: ${{ secrets.DASHBOARD_GITHUB_TOKEN }}
         run: |
           npm ci
           npm run build
diff --git a/docs/app/components/FeatureCard.tsx b/docs/app/components/FeatureCard.tsx
index a635e9bc..fdd4019f 100644
--- a/docs/app/components/FeatureCard.tsx
+++ b/docs/app/components/FeatureCard.tsx
@@ -1,7 +1,10 @@
-import type { ReactNode } from "react";
+"use client";
+
+import type { IconName } from "./Icon";
+import IconBadge from "./IconBadge";
 
 interface FeatureCardProps {
-  icon: ReactNode;
+  icon: IconName;
   title: string;
   description: string;
 }
@@ -17,9 +20,7 @@ export default function FeatureCard({
       className="group rounded-xl border border-border bg-frosted-glass p-6 backdrop-blur-xl transition-all duration-300 hover:border-accent/30"
     >
       <div className="mb-3 flex items-center gap-3">
-        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent transition-colors group-hover:bg-accent/15">
-          {icon}
-        </div>
+        <IconBadge name={icon} size={28} variant="lg" />
         <h3 className="text-2xl font-semibold text-foreground">{title}</h3>
       </div>
       <p className="text-xl leading-relaxed text-muted">{description}</p>
diff --git a/docs/app/components/IconBadge.tsx b/docs/app/components/IconBadge.tsx
new file mode 100644
index 00000000..2da08fc0
--- /dev/null
+++ b/docs/app/components/IconBadge.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import type { IconName } from "./Icon";
+import Icon from "./Icon";
+
+interface IconBadgeProps {
+  /** Icon name to display. */
+  name: IconName;
+  /** Icon size in pixels (default: 24). */
+  size?: number;
+  /** Optional CSS class for the wrapper. */
+  className?: string;
+  /** Size variant for the badge (default: 'md'). */
+  variant?: "sm" | "md" | "lg";
+}
+
+const variantClasses = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12",
+} as const;
+
+/** Icon badge with background — unified display for SF Symbols across the dashboard and pages. */
+export default function IconBadge({
+  name,
+  size = 24,
+  className = "",
+  variant = "md",
+}: IconBadgeProps) {
+  return (
+    <div
+      className={`flex shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent transition-colors group-hover:bg-accent/15 ${variantClasses[variant]} ${className}`}
+    >
+      <Icon name={name} size={size} />
+    </div>
+  );
+}
diff --git a/docs/app/components/RepoInfo.tsx b/docs/app/components/RepoInfo.tsx
index 1a8380b7..ef985bd6 100644
--- a/docs/app/components/RepoInfo.tsx
+++ b/docs/app/components/RepoInfo.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Icon from "./Icon";
+import IconBadge from "./IconBadge";
 
 interface RepoInfoProps {
   createdAt: string;
@@ -82,7 +82,7 @@ export default function RepoInfo({
     return (
       <div className="rounded-xl border border-border bg-frosted-glass p-6 backdrop-blur-xl">
         <h3 className="mb-4 flex items-center gap-2 text-xl font-semibold text-foreground">
-          <Icon name="serverRack" size={22} className="text-muted" />
+          <IconBadge name="serverRack" size={22} variant="md" className="!bg-transparent" />
           Repository
         </h3>
         <div className="flex flex-col gap-2">
@@ -97,7 +97,7 @@ export default function RepoInfo({
   return (
     <div className="rounded-xl border border-border bg-frosted-glass p-6 backdrop-blur-xl">
       <h3 className="mb-4 flex items-center gap-2 text-xl font-semibold text-foreground">
-        <Icon name="serverRack" size={22} className="text-muted" />
+        <IconBadge name="serverRack" size={22} variant="md" className="!bg-transparent" />
         Repository
       </h3>
       <div className="flex flex-col">
diff --git a/docs/app/components/SiteFooter.tsx b/docs/app/components/SiteFooter.tsx
index 603ce280..42ce957a 100644
--- a/docs/app/components/SiteFooter.tsx
+++ b/docs/app/components/SiteFooter.tsx
@@ -4,9 +4,9 @@
  * Displays location info and license link. Accepts optional children
  * for page-specific additions (e.g. API rate limit display).
  */
-export default function SiteFooter({ children }: { children?: React.ReactNode }) {
+export default function SiteFooter({ children, className }: { children?: React.ReactNode; className?: string }) {
   return (
-    <footer className="border-t border-border bg-container-body/30 backdrop-blur-sm">
+    <footer className={`border-t border-border bg-container-body/30 backdrop-blur-sm ${className ?? ""}`}>
       <div className="mx-auto flex max-w-6xl flex-col items-center gap-0.5 px-6 py-8 text-center">
         <span className="text-base text-muted">
           Made with ❤️ in Bregenz
diff --git a/docs/app/dashboard/page.tsx b/docs/app/dashboard/page.tsx
index 1af1c0f9..e13322e1 100644
--- a/docs/app/dashboard/page.tsx
+++ b/docs/app/dashboard/page.tsx
@@ -39,10 +39,10 @@ export default function DashboardPage() {
         Skip to main content
       </a>
 
-      <div className="relative z-10">
+      <div className="relative z-10 flex min-h-screen flex-col">
         <SiteNav activePage="dashboard" />
 
-        <main id="main-content" tabIndex={-1} className="mx-auto max-w-6xl px-6 pt-28 pb-20">
+        <main id="main-content" tabIndex={-1} className="mx-auto w-full max-w-6xl flex-1 px-6 pt-28 pb-20">
           {/* Header with refresh */}
           <div className="mb-10 flex items-center justify-between">
             <div>
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index 21c4635a..57d1dff9 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { IconName } from "./components/Icon";
+import IconBadge from "./components/IconBadge";
 import CloudBackground from "./components/CloudBackground";
 import RainOverlay from "./components/RainOverlay";
 import SpinnerLights from "./components/SpinnerLights";
@@ -24,9 +25,7 @@ const TEST_COUNT = process.env.TUIKIT_TEST_COUNT ?? "0";
 function ArchHighlight({ icon, title, children }: { icon: IconName; title: string; children: ReactNode }) {
   return (
     <div className="flex gap-4">
-      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent">
-        <Icon name={icon} size={24} />
-      </div>
+      <IconBadge name={icon} size={24} variant="sm" className="!bg-accent/10" />
       <div>
         <h3 className="mb-1 text-xl font-semibold text-foreground">{title}</h3>
         <p className="text-xl leading-relaxed text-muted">{children}</p>
@@ -122,32 +121,32 @@ export default function Home() {
 
             <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
               <FeatureCard
-                icon={<Icon name="terminal" size={28} />}
+                icon="terminal"
                 title="Declarative Syntax"
                 description="Build UIs with VStack, HStack, Text, Button, and more — the same patterns you know from SwiftUI."
               />
               <FeatureCard
-                icon={<Icon name="paintbrush" size={28} />}
+                icon="paintbrush"
                 title="Theming System"
                 description="Multiple built-in phosphor themes with full RGB color support. Cycle at runtime or create custom palettes."
               />
               <FeatureCard
-                icon={<Icon name="keyboard" size={28} />}
+                icon="keyboard"
                 title="Keyboard-Driven"
                 description="Focus management, key event handlers, customizable status bar with shortcut display."
               />
               <FeatureCard
-                icon={<Icon name="stack" size={28} />}
+                icon="stack"
                 title="Rich Components"
                 description="Panel, Card, Dialog, Alert, Menu, Button, ForEach — container and interactive views out of the box."
               />
               <FeatureCard
-                icon={<Icon name="bolt" size={28} />}
+                icon="bolt"
                 title="Zero Dependencies"
                 description="Pure Swift. No ncurses, no C libraries. Just add the Swift package and go."
               />
               <FeatureCard
-                icon={<Icon name="arrows" size={28} />}
+                icon="arrows"
                 title="Cross-Platform"
                 description="Runs on macOS and Linux. Same code, same API, same results."
               />