diff --git a/frontend/src/pages/SwarmControlPage.js b/frontend/src/pages/SwarmControlPage.js
index fef05b2..757465a 100644
--- a/frontend/src/pages/SwarmControlPage.js
+++ b/frontend/src/pages/SwarmControlPage.js
@@ -69,11 +69,11 @@
   } = useSwarmControl({ pageContainerRef, onNewSessionCreated });
 
   const [showConfigModal, setShowConfigModal] = useState(false);
+  const [showClearChatModal, setShowClearChatModal] = useState(false);
   const [isClearingHistory, setIsClearingHistory] = useState(false);
 
-  const handleClearHistory = async () => {
+  const confirmClearHistory = async () => {
     if (!sessionId) return;
-    if (!window.confirm("Clear all chat messages? Your nodes, workspace, and file sync will be preserved.")) return;
     setIsClearingHistory(true);
     try {
       await clearSessionHistory(sessionId);
@@ -83,8 +83,15 @@
       alert(`Failed to clear history: ${e.message}`);
     } finally {
       setIsClearingHistory(false);
+      setShowClearChatModal(false);
     }
   };
+
+  const handleClearHistory = () => {
+    if (!sessionId) return;
+    setShowClearChatModal(true);
+  };
+
   const [showNodeSelector, setShowNodeSelector] = useState(false);
   const isEditingMeshRef = useRef(false);
   useEffect(() => {
@@ -837,6 +844,41 @@
           </div>
         </div>
       )}
+
+      {/* Clear Chat Confirmation Modal */}
+      {showClearChatModal && (
+        <div className="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex justify-center items-center z-50 animate-in fade-in duration-300">
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-2xl max-w-sm w-full text-center border border-amber-100 dark:border-amber-900/30">
+            <div className="w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg className="w-8 h-8 text-amber-600 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+            </div>
+            <h2 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">Clear Chat History?</h2>
+            <p className="text-gray-500 dark:text-gray-400 mb-6 text-sm">
+              This will permanently delete all messages in this session. Your attached nodes, workspace files, and mesh configurations will be <strong>preserved</strong>.
+            </p>
+            <div className="flex gap-3 mt-4">
+              <button
+                onClick={() => setShowClearChatModal(false)}
+                className="flex-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-bold py-3 rounded-xl transition-all active:scale-95"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmClearHistory}
+                disabled={isClearingHistory}
+                className="flex-1 bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-amber-600/20 active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {isClearingHistory ? (
+                  <>
+                    <svg className="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    Clearing...
+                  </>
+                ) : 'Clear Chat'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };