diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx
index 72b77a9..2e5b961 100644
--- a/web-app/src/components/layouts/chat-layout.jsx
+++ b/web-app/src/components/layouts/chat-layout.jsx
@@ -24,11 +24,16 @@ export default function ChatLayout() {
     }, 600);
   }
 
+  function handleDeleteAll() {
+    if (!window.confirm("Delete all messages?")) return;
+    setMessages([]);
+  }
+
   return (
     <div className="flex flex-col">
       <ChatHeader />
       <ChatWindow messages={messages} />
-      <MessageInput onSend={handleSend} />
+      <MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />
     </div>
   );
 }
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 16dbe1c..482985a 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-button";
 import DownButton from "../button/down-button";
 
-export default function MessageInput({ onSend }) {
+export default function MessageInput({ onSend, onDeleteAll }) {
   const [text, setText] = useState("");
 
   function handleSubmit(e) {
@@ -15,7 +15,7 @@ export default function MessageInput({ onSend }) {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
-        <DeleteButton></DeleteButton>
+        <DeleteButton onClick={onDeleteAll}></DeleteButton>
         <DownButton></DownButton>
       </div>
       <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">