diff --git a/api/src/main/resources/static/js/chat.js b/api/src/main/resources/static/js/chat.js
index ba4450c1..64ca585c 100644
--- a/api/src/main/resources/static/js/chat.js
+++ b/api/src/main/resources/static/js/chat.js
@@ -271,8 +271,12 @@ export function switchToAgent(agentName,agentId, sessionId, agentHost) {
         appendToChatWindow(msg.sender, msg.message);
     });
 
-    container.classList.remove("hidden");
-    container.style.display = "block";
+    // Show container with animation
+    container.style.display = "flex";
+    setTimeout(() => {
+        container.classList.remove("hidden");
+    }, 10);
+    
     console.log("Chat container displayed");
 }
 
@@ -307,14 +311,49 @@ export function appendToChatWindow(sender, message) {
     const chatBox = document.getElementById("chat-messages");
     const div = document.createElement("div");
     div.classList.add("chat-message");
-    div.innerHTML = `<strong>${sender}:</strong> ${message}`;
+    
+    // Determine if message is from user or agent
+    const isUser = sender === "You" || sender === "user";
+    div.classList.add(isUser ? "user" : "agent");
+    
+    // Create message content with modern styling
+    const messageContent = document.createElement("div");
+    messageContent.classList.add("chat-message-content");
+    messageContent.textContent = message;
+    
+    // Add sender name (smaller, less prominent)
+    const senderElement = document.createElement("strong");
+    senderElement.textContent = sender;
+    
+    div.appendChild(senderElement);
+    div.appendChild(messageContent);
+    
     chatBox.appendChild(div);
     chatBox.scrollTop = chatBox.scrollHeight;
 }
 
 export function toggleChat() {
     const container = document.getElementById("chat-container");
-    container.classList.toggle("hidden");
+    
+    if (container.classList.contains("hidden")) {
+        container.style.display = "flex";
+        // Small delay to ensure display change is processed
+        setTimeout(() => {
+            container.classList.remove("hidden");
+        }, 10);
+        
+        // Focus input when opening
+        setTimeout(() => {
+            const input = document.getElementById("chat-input");
+            if (input) input.focus();
+        }, 300);
+    } else {
+        container.classList.add("hidden");
+        // Hide after animation completes
+        setTimeout(() => {
+            container.style.display = "none";
+        }, 300);
+    }
 }
 
 // =========================
@@ -344,4 +383,5 @@ export async function fetchAvailableAgents() {
     }
 }
 
-window.sendMessage = sendMessage;
\ No newline at end of file
+window.sendMessage = sendMessage;
+window.toggleChat = toggleChat;
\ No newline at end of file
diff --git a/api/src/main/resources/templates/fragments/chat.html b/api/src/main/resources/templates/fragments/chat.html
index a4204ad1..df88cdeb 100644
--- a/api/src/main/resources/templates/fragments/chat.html
+++ b/api/src/main/resources/templates/fragments/chat.html
@@ -6,83 +6,164 @@
         let chatFocus = false;
         let chatConnection = null;
 
-        function toggleChat() {
-            let chatContainer = document.getElementById("chat-container");
-            if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
-                chatContainer.style.display = "flex";
-                document.getElementById("chat-input").focus();
-                termFocus = false;
-                chatFocus = true;
-                enableSessionChat();
-            } else {
-                chatContainer.style.display = (chatContainer.style.display === "none" || chatContainer.style.display === "") ? "flex" : "none";
-            }
-            //
+        function toggleChat() {
+            let chatContainer = document.getElementById("chat-container");
+            
+            if (chatContainer.style.display === "none" || chatContainer.style.display === "") {
+                chatContainer.style.display = "flex";
+                // Small delay to ensure display change is processed
+                setTimeout(() => {
+                    chatContainer.classList.remove("hidden");
+                }, 10);
+                
+                // Focus input when opening
+                setTimeout(() => {
+                    const input = document.getElementById("chat-input");
+                    if (input) input.focus();
+                }, 300);
+                
+                termFocus = false;
+                chatFocus = true;
+                enableSessionChat();
+            } else {
+                chatContainer.classList.add("hidden");
+                // Hide after animation completes
+                setTimeout(() => {
+                    chatContainer.style.display = "none";
+                }, 300);
+            }
         }
     </script>
-    <style>
-        /* Chat Button */
-        #chat-button {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: #007bff;
-            color: white;
-            padding: 10px 15px;
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 14px;
-            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-        }
-
-        /* Chat Container */
-        #chat-container {
-            position: fixed;
-            bottom: 10px;
-            right: 20px;
-            width: 300px;
-            height: 350px;
-            background: #222;
-            color: white;
-            border-radius: 10px;
-            display: none;
-            flex-direction: column;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Chat Header */
-        #chat-header {
-            background: #444;
-            padding: 10px;
-            cursor: pointer;
-            text-align: center;
-            font-weight: bold;
-            position: relative;
-        }
-
-        #close-chat {
-            position: absolute;
-            right: 10px;
-            cursor: pointer;
-        }
-
-        /* Chat Messages */
-        #chat-messages {
-            flex: 1;
-            padding: 10px;
-            overflow-y: auto;
-            max-height: 250px;
-            font-size: 14px;
-        }
-
-        /* Chat Input */
-        #chat-input {
-            width: 100%;
-            padding: 8px;
-            border: none;
-            background: #333;
-            color: white;
-            font-size: 14px;
-            border-top: 1px solid #666;
-        }
+    <style>
+        /* Modern Chat Button */
+        #chat-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+            color: white;
+            padding: 12px 18px;
+            border-radius: 24px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: none;
+            outline: none;
+            user-select: none;
+        }
+
+        #chat-button:hover {
+            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+
+        #chat-button:active {
+            transform: translateY(0);
+        }
+
+        /* Modern Chat Container */
+        #chat-container {
+            position: fixed;
+            bottom: 10px;
+            right: 20px;
+            width: 360px;
+            height: 500px;
+            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+            color: white;
+            border-radius: 16px;
+            display: none;
+            flex-direction: column;
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid #404040;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* Modern Chat Header */
+        #chat-header {
+            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+            padding: 16px 20px;
+            cursor: pointer;
+            text-align: center;
+            font-weight: 600;
+            position: relative;
+            border-bottom: 1px solid #404040;
+            font-size: 15px;
+            letter-spacing: 0.5px;
+        }
+
+        #chat-header:hover {
+            background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
+        }
+
+        #close-chat {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: #888;
+            font-size: 18px;
+            transition: color 0.2s ease;
+            padding: 4px;
+        }
+
+        #close-chat:hover {
+            color: #ff4757;
+        }
+
+        /* Modern Chat Messages */
+        #chat-messages {
+            flex: 1;
+            padding: 16px;
+            overflow-y: auto;
+            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        #chat-messages::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #chat-messages::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+
+        #chat-messages::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+        }
+
+        #chat-messages::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        /* Modern Chat Input */
+        #chat-input {
+            width: 100%;
+            padding: 16px 20px;
+            border: none;
+            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+            color: white;
+            font-size: 14px;
+            border-top: 1px solid #404040;
+            outline: none;
+            font-family: inherit;
+            transition: all 0.2s ease;
+        }
+
+        #chat-input::placeholder {
+            color: #888;
+        }
+
+        #chat-input:focus {
+            background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
+            box-shadow: inset 0 0 0 1px #007bff;
+        }
     </style>
diff --git a/api/src/main/resources/templates/sso/dashboard.html b/api/src/main/resources/templates/sso/dashboard.html
index 999b4b9c..60006ff0 100755
--- a/api/src/main/resources/templates/sso/dashboard.html
+++ b/api/src/main/resources/templates/sso/dashboard.html
@@ -351,35 +351,168 @@
         });
 
     </script>
-    <style>
-        #chat-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 320px;
-            height: 400px;
-            z-index: 1000;
-            background: #1e1e1e;
-            border: 1px solid #444;
-            border-radius: 10px;
-            padding: 0;
-            display: none;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-            overflow: hidden;
-            font-family: system-ui, sans-serif;
-        }
-
-        #chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 12px;
-            background-color: #1e1e1e;
-            border-top: 1px solid #333;
-            border-bottom: 1px solid #333;
-            font-size: 14px;
-            line-height: 1.4;
+    <style>
+        #chat-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 360px;
+            height: 500px;
+            z-index: 1000;
+            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+            border: 1px solid #404040;
+            border-radius: 16px;
+            padding: 0;
+            display: none;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+        }
+
+        #chat-container.hidden {
+            transform: translateY(20px);
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        #chat-container:not(.hidden) {
+            transform: translateY(0);
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        #chat-header {
+            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+            padding: 16px 20px;
+            cursor: pointer;
+            text-align: center;
+            font-weight: 600;
+            position: relative;
+            border-bottom: 1px solid #404040;
+            color: #ffffff;
+            font-size: 15px;
+            letter-spacing: 0.5px;
+        }
+
+        #chat-header:hover {
+            background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
+        }
+
+        #close-chat {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: #888;
+            font-size: 18px;
+            transition: color 0.2s ease;
+            padding: 4px;
+        }
+
+        #close-chat:hover {
+            color: #ff4757;
+        }
+
+        #chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
+            font-size: 14px;
+            line-height: 1.5;
+            min-height: 0;
+        }
+
+        #chat-messages::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #chat-messages::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+
+        #chat-messages::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+        }
+
+        #chat-messages::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        .chat-message {
+            margin-bottom: 12px;
+            padding: 12px 16px;
+            border-radius: 12px;
+            max-width: 85%;
+            word-wrap: break-word;
+            animation: fadeInUp 0.3s ease;
+        }
+
+        .chat-message.user {
+            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+            color: white;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+        }
+
+        .chat-message.agent {
+            background: linear-gradient(135deg, #404040 0%, #505050 100%);
+            color: #ffffff;
+            margin-right: auto;
+            border-bottom-left-radius: 4px;
+        }
+
+        .chat-message strong {
+            display: block;
+            font-size: 12px;
+            opacity: 0.8;
+            margin-bottom: 4px;
+            font-weight: 500;
+        }
+
+        .chat-message-content {
+            font-size: 14px;
+            line-height: 1.4;
+        }
+
+        #chat-input {
+            width: 100%;
+            padding: 16px 20px;
+            border: none;
+            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+            color: #ffffff;
+            font-size: 14px;
+            border-top: 1px solid #404040;
+            outline: none;
+            font-family: inherit;
+            transition: all 0.2s ease;
+        }
+
+        #chat-input::placeholder {
+            color: #888;
+        }
+
+        #chat-input:focus {
+            background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
+            box-shadow: inset 0 0 0 1px #007bff;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
         small-card {