diff --git a/frontend/src/components/ChatArea.js b/frontend/src/components/ChatArea.js
index a5f8e50..bbc8e0a 100644
--- a/frontend/src/components/ChatArea.js
+++ b/frontend/src/components/ChatArea.js
@@ -46,7 +46,7 @@
       </div>
 
       {/* Sticky Input */}
-      <div className="p-2 bg-transparent sticky bottom-0 left-0 z-10">
+      <div className="p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-t border-gray-100 dark:border-gray-700 sticky bottom-0 left-0 z-10">
         {featureName === "coding_assistant" && workspaceId && (
           <div className={`mx-2 mb-2 px-3 py-1.5 border rounded-lg flex flex-col gap-1 animate-in fade-in slide-in-from-bottom-2 duration-300 ${isSourceDisconnected
             ? 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800'
@@ -99,7 +99,7 @@
             onChange={(e) => setInputValue(e.target.value)}
             onKeyDown={handleKeyDown}
             disabled={isProcessing || isSourceDisconnected}
-            className={`flex-grow p-3 rounded-lg border bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 ${isSourceDisconnected ? 'border-red-300 dark:border-red-900 cursor-not-allowed grayscale' : 'border-gray-300 dark:border-gray-600'
+            className={`flex-grow p-4 rounded-xl border bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all ${isSourceDisconnected ? 'border-red-300 dark:border-red-900 cursor-not-allowed grayscale' : 'border-gray-200 dark:border-gray-700 group-hover:border-gray-300'
               }`}
             placeholder={
               isProcessing
diff --git a/frontend/src/components/ChatWindow.css b/frontend/src/components/ChatWindow.css
index cf04b0c..7046008 100644
--- a/frontend/src/components/ChatWindow.css
+++ b/frontend/src/components/ChatWindow.css
@@ -1,14 +1,17 @@
 /* Modern AI Tool Styles */
 :root {
     --user-bubble-bg: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
-    --assistant-bubble-bg: rgba(255, 255, 255, 0.05);
-    --reasoning-bg: rgba(99, 102, 241, 0.03);
-    --border-subtle: rgba(255, 255, 255, 0.1);
+    --assistant-bubble-bg: #ffffff;
+    --reasoning-bg: #f8fafc;
+    --border-subtle: #e2e8f0;
+    --chat-bg: #f1f5f9;
 }
 
 .dark {
-    --assistant-bubble-bg: rgba(31, 41, 55, 0.5);
-    --border-subtle: rgba(255, 255, 255, 0.08);
+    --assistant-bubble-bg: #1e293b;
+    --reasoning-bg: rgba(15, 23, 42, 0.3);
+    --border-subtle: rgba(255, 255, 255, 0.05);
+    --chat-bg: #111827;
 }
 
 .assistant-message {
@@ -21,6 +24,11 @@
     overflow-wrap: anywhere;
     word-break: break-word;
     white-space: pre-wrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+
+.dark .assistant-message {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .user-message-container {
@@ -142,4 +150,8 @@
 
 .dark .thought-panel blockquote strong {
     color: #a5b4fc;
+}
+
+.chat-history-container {
+    background-color: var(--chat-bg) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ChatWindow.js b/frontend/src/components/ChatWindow.js
index c52c704..d4d251c 100644
--- a/frontend/src/components/ChatWindow.js
+++ b/frontend/src/components/ChatWindow.js
@@ -289,7 +289,7 @@
     <div
       ref={containerRef}
       style={{ maxHeight: maxHeight, overflowY: 'auto' }}
-      className="px-2 py-4 space-y-4 bg-transparent"
+      className="px-4 md:px-6 py-6 space-y-6 bg-transparent chat-history-container"
     >
       {chatHistory.map((message, index) => {
         const isLastMessage = index === chatHistory.length - 1;
diff --git a/frontend/src/pages/SwarmControlPage.js b/frontend/src/pages/SwarmControlPage.js
index 3e76b4d..777cdb9 100644
--- a/frontend/src/pages/SwarmControlPage.js
+++ b/frontend/src/pages/SwarmControlPage.js
@@ -366,9 +366,9 @@
         <div className="px-6 md:px-16 lg:px-24 w-full h-full pt-12 flex flex-col min-h-0 min-w-0 mx-auto">
           {/* Chat Area & Header */}
           <div className="flex flex-col h-full min-h-0">
-            <div className="flex-grow p-4 bg-white dark:bg-gray-800 rounded-xl rounded-b-none shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col min-h-0 min-w-0 transition-all duration-300">
-              <h2 className="text-xl font-bold mb-4 flex justify-between items-center border-b border-gray-100 dark:border-gray-700 pb-4">
-                <div className="flex items-center gap-3">
+            <div className="flex-grow bg-white dark:bg-gray-800 rounded-xl rounded-b-none shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col min-h-0 min-w-0 transition-all duration-300">
+              <h2 className="p-4 text-xl font-bold flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-100 dark:border-gray-700 gap-4 md:gap-0">
+                <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
                   <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
                     <svg className="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
@@ -382,7 +382,7 @@
                   </div>
 
                   {/* Nodes Indicator Bar (M3/M6) */}
-                  <div className="flex items-center space-x-2 ml-4 border-l pl-4 dark:border-gray-700 h-10 overflow-visible">
+                  <div className="flex items-center space-x-2 ml-0 md:ml-4 border-l-0 md:border-l pl-0 md:pl-4 dark:border-gray-700 h-10 overflow-visible">
                     {attachedNodeIds.length === 0 ? (
                       <span
                         className="text-[10px] text-gray-400 italic cursor-pointer hover:text-indigo-500 transition-colors"
@@ -479,7 +479,7 @@
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                   </button>
                 </div>
-                <div className="flex items-center space-x-6">
+                <div className="flex flex-wrap items-center gap-4 md:gap-6 w-full md:w-auto justify-start md:justify-end">
                   <div className="flex items-center gap-6">
                     <div className="flex items-center gap-2 group/collapse relative">
                       <button
@@ -614,7 +614,7 @@
 
       {/* Node Selector Modal (M3) */}
       {showNodeSelector && (
-        <div className="fixed inset-0 bg-gray-900/40 backdrop-blur-sm flex justify-center items-center z-50">
+        <div className="fixed inset-0 bg-gray-900/40 backdrop-blur-sm flex justify-center items-center z-50 p-4">
           <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden animate-in zoom-in-95 duration-200">
             <div className="px-6 py-5 border-b dark:border-gray-700 flex justify-between items-center bg-gray-50 dark:bg-gray-800/50">
               <h3 className="font-bold text-gray-900 dark:text-white flex items-center gap-2">
@@ -632,7 +632,7 @@
 
               <div className="bg-indigo-50 dark:bg-indigo-900/10 p-4 rounded-xl mb-6 border border-indigo-100 dark:border-indigo-800">
                 <h4 className="text-[10px] font-black uppercase text-indigo-600 dark:text-indigo-400 mb-3 tracking-widest">Initialization Strategy</h4>
-                <div className="flex gap-6">
+                <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
                   <label className="flex items-center gap-2 cursor-pointer group">
                     <input
                       type="radio"
@@ -735,7 +735,7 @@
                   return (
                     <div
                       key={node.node_id}
-                      className={`flex items-center justify-between p-4 rounded-xl border-2 transition-all ${isAttached ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10' : 'border-gray-100 dark:border-gray-700 hover:border-gray-200'}`}
+                      className={`flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border-2 transition-all gap-4 ${isAttached ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10' : 'border-gray-100 dark:border-gray-700 hover:border-gray-200'}`}
                     >
                       <div className="flex items-center space-x-3">
                         <div className={`w-2.5 h-2.5 rounded-full ${isOnline ? 'bg-green-500' : 'bg-gray-300'}`}></div>
@@ -744,7 +744,7 @@
                           <p className="text-[10px] text-gray-500 font-mono italic">{node.node_id}</p>
                         </div>
                       </div>
-                      <div className="flex items-center gap-2">
+                      <div className="flex flex-wrap items-center gap-2">
                         {isAttached && (
                           <button
                             onClick={() => handleToggleReadOnly(node.node_id)}