diff --git a/apps/web/src/app/(app)/agents/page.tsx b/apps/web/src/app/(app)/agents/page.tsx
index f75383638..d9a67ed10 100644
--- a/apps/web/src/app/(app)/agents/page.tsx
+++ b/apps/web/src/app/(app)/agents/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import { Header } from "@/components/ui/header";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
@@ -19,18 +20,16 @@ export default function AgentsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Agents</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Agents</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <AgentsInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/inbox/page.tsx b/apps/web/src/app/(app)/inbox/page.tsx
index e85a97c49..6b39200f0 100644
--- a/apps/web/src/app/(app)/inbox/page.tsx
+++ b/apps/web/src/app/(app)/inbox/page.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import { ThreadsProvider } from "@/components/agent-inbox/contexts/ThreadContext";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
+import { Header } from "@/components/ui/header";
 import { InboxSidebar, InboxSidebarTrigger } from "@/components/inbox-sidebar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import {
@@ -22,19 +23,16 @@ export default function InboxPage(): React.ReactNode {
         <div className="flex min-h-full w-full flex-row">
           {/* Header */}
           <div className="w-full">
-            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-              <div className="flex items-center gap-2 px-4">
-                <SidebarTrigger className="-ml-1" />
-
-                <Breadcrumb>
-                  <BreadcrumbList>
-                    <BreadcrumbItem>
-                      <BreadcrumbPage>Inbox</BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-              </div>
-            </header>
+            <Header>
+              <SidebarTrigger className="-ml-1" />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Inbox</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </Header>
 
             {/* Main content */}
             <div className="flex h-full w-full flex-col">
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index d7d1bb30b..58c4908b8 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -5,7 +5,6 @@ import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { SidebarLayout } from "@/components/sidebar";
 import { AuthProvider } from "@/providers/Auth";
-import { DOCS_LINK } from "@/constants";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -23,7 +22,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const isDemoApp = process.env.NEXT_PUBLIC_DEMO_APP === "true";
   return (
     <html lang="en">
       <head>
@@ -35,20 +33,6 @@ export default function RootLayout({
         )}
       </head>
       <body className={inter.className}>
-        {isDemoApp && (
-          <div className="fixed top-0 right-0 left-0 z-10 bg-[#CFC8FE] py-2 text-center text-black shadow-md">
-            You're currently using the demo application. To use your own agents,
-            and run in production, check out the{" "}
-            <a
-              className="underline underline-offset-2"
-              href={DOCS_LINK}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation
-            </a>
-          </div>
-        )}
         <NuqsAdapter>
           <AuthProvider>
             <SidebarLayout>{children}</SidebarLayout>
diff --git a/apps/web/src/app/(app)/page.tsx b/apps/web/src/app/(app)/page.tsx
index 2f87a4522..2089e034f 100644
--- a/apps/web/src/app/(app)/page.tsx
+++ b/apps/web/src/app/(app)/page.tsx
@@ -2,6 +2,7 @@
 
 import ChatInterface from "@/features/chat";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Header } from "@/components/ui/header";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
 import { ChatBreadcrumb } from "@/features/chat/components/chat-breadcrumb";
@@ -14,12 +15,10 @@ export default function ChatPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <ChatBreadcrumb />
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <ChatBreadcrumb />
+      </Header>
       <ChatInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/rag/page.tsx b/apps/web/src/app/(app)/rag/page.tsx
index 4c05538b0..bfea0faac 100644
--- a/apps/web/src/app/(app)/rag/page.tsx
+++ b/apps/web/src/app/(app)/rag/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import { Header } from "@/components/ui/header";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
 import React from "react";
@@ -19,18 +20,16 @@ export default function RAGPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>RAG</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>RAG</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <RAGInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/tools/page.tsx b/apps/web/src/app/(app)/tools/page.tsx
index b67f0cfc4..6d46bf01b 100644
--- a/apps/web/src/app/(app)/tools/page.tsx
+++ b/apps/web/src/app/(app)/tools/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import ToolsInterface from "@/features/tools";
 import {
   Breadcrumb,
@@ -9,7 +11,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import React from "react";
+import { Header } from "@/components/ui/header";
 
 /**
  * The /tools page.
@@ -19,18 +21,16 @@ export default function ToolsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Tools</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Tools</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <ToolsInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/app/(app)/tools/playground/page.tsx b/apps/web/src/app/(app)/tools/playground/page.tsx
index 3607fd519..fdf49529e 100644
--- a/apps/web/src/app/(app)/tools/playground/page.tsx
+++ b/apps/web/src/app/(app)/tools/playground/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import ToolsPlaygroundInterface from "@/features/tools/playground";
 import {
   Breadcrumb,
@@ -11,7 +13,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import React from "react";
+import { Header } from "@/components/ui/header";
 
 /**
  * The /tools page.
@@ -21,22 +23,20 @@ export default function ToolsPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading (layout)...</div>}>
       <Toaster />
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/tools">Tools</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Playground</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
+      <Header>
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/tools">Tools</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Playground</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Header>
       <ToolsPlaygroundInterface />
     </React.Suspense>
   );
diff --git a/apps/web/src/components/ui/demo.tsx b/apps/web/src/components/ui/demo.tsx
new file mode 100644
index 000000000..991ffd3b5
--- /dev/null
+++ b/apps/web/src/components/ui/demo.tsx
@@ -0,0 +1,29 @@
+import { DOCS_LINK } from "@/constants";
+
+const isDemoApp = process.env.NEXT_PUBLIC_DEMO_APP === "true";
+
+/**
+ * A banner that appears at the top of the page if the app is a demo app.
+ */
+function DemoBanner() {
+    if (!isDemoApp) {
+        return
+    }
+
+    return (
+        <div className="fixed top-0 right-0 left-0 z-10 bg-[#CFC8FE] py-2 text-center text-black shadow-md">
+            You're currently using the demo application. To use your own agents,
+            and run in production, check out the{" "}
+            <a
+                className="underline underline-offset-2"
+                href={DOCS_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                documentation
+            </a>
+        </div>
+    )
+}
+
+export { DemoBanner };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/header.tsx b/apps/web/src/components/ui/header.tsx
new file mode 100644
index 000000000..111011792
--- /dev/null
+++ b/apps/web/src/components/ui/header.tsx
@@ -0,0 +1,17 @@
+import { DemoBanner } from "./demo";
+
+/**
+ * A header component that can be used to display a header with a sidebar trigger and a breadcrumb.
+ */
+function Header({ children }: React.PropsWithChildren) {
+    return (
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+            <DemoBanner />
+            <div className="flex items-center gap-2 px-4">
+                {children}
+            </div>
+        </header>
+    )
+}
+
+export { Header };
\ No newline at end of file