diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx
index 5439009..538ee05 100644
--- a/web-app/src/components/layouts/chat-layout.jsx
+++ b/web-app/src/components/layouts/chat-layout.jsx
@@ -31,9 +31,9 @@ export default function ChatLayout() {
 
   return (
     <div className="flex flex-col flex-start w-full max-w-3xl gap-4 p-4">
-      <ChatHeader  />
+      <ChatHeader onDeleteAll={handleDeleteAll} />
       <ChatWindow messages={messages} />
-      <MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll}/>
+      <MessageInput onSend={handleSend} />
     </div>
   );
 }
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index fbda3f2..350d2f7 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -4,7 +4,7 @@ import { Rocket } from "lucide-react";
 import DeleteButton from "src/components/ui/button/delete-button";
 import SchematicButton from "../button/schematic-button";
 
-export default function ChatHeader({ title = "Title of Chat" }) {
+export default function ChatHeader({ title = "Title of Chat", onDeleteAll }) {
   const isDebug = useMemo(() => {
     const p = new URLSearchParams(window.location.search);
     return p.get("debug") === "1";
@@ -36,7 +36,7 @@ export default function ChatHeader({ title = "Title of Chat" }) {
             <h1 className="text-lg font-semibold shadow-md shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
               {title}
             </h1>
-            <DeleteButton />
+            <DeleteButton onClick={onDeleteAll} />
             {isDebug && (
               <motion.button
                 onClick={triggerDemoIngest}