diff --git a/chatbot.js b/chatbot.js
index fb26ec9..88b9ac3 100644
--- a/chatbot.js
+++ b/chatbot.js
@@ -125,18 +125,26 @@ class PhoenixChatbot {
     setTimeout(() => {
       this.removeTypingIndicator();
 
-      const messageHTML = `
-        <div class="chatbot-message bot">
-          <div class="message-avatar">
-            <svg viewBox="0 0 24 24">
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
-            </svg>
-          </div>
-          <div class="message-content">${text}</div>
-        </div>
+      // Create bot message element safely without interpreting text as HTML
+      const messageEl = document.createElement('div');
+      messageEl.className = 'chatbot-message bot';
+
+      const avatarEl = document.createElement('div');
+      avatarEl.className = 'message-avatar';
+      avatarEl.innerHTML = `
+        <svg viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+        </svg>
       `;
 
-      messagesDiv.insertAdjacentHTML('beforeend', messageHTML);
+      const contentEl = document.createElement('div');
+      contentEl.className = 'message-content';
+      contentEl.textContent = text;
+
+      messageEl.appendChild(avatarEl);
+      messageEl.appendChild(contentEl);
+
+      messagesDiv.appendChild(messageEl);
       this.scrollToBottom();
       this.messages.push({ type: 'bot', text });
     }, 1000);
@@ -145,18 +153,26 @@ class PhoenixChatbot {
   addUserMessage(text) {
     const messagesDiv = document.getElementById('chatbotMessages');
 
-    const messageHTML = `
-      <div class="chatbot-message user">
-        <div class="message-content">${text}</div>
-        <div class="message-avatar">
-          <svg viewBox="0 0 24 24">
-            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-          </svg>
-        </div>
-      </div>
+    // Create user message element safely without interpreting text as HTML
+    const messageEl = document.createElement('div');
+    messageEl.className = 'chatbot-message user';
+
+    const contentEl = document.createElement('div');
+    contentEl.className = 'message-content';
+    contentEl.textContent = text;
+
+    const avatarEl = document.createElement('div');
+    avatarEl.className = 'message-avatar';
+    avatarEl.innerHTML = `
+      <svg viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
     `;
 
-    messagesDiv.insertAdjacentHTML('beforeend', messageHTML);
+    messageEl.appendChild(contentEl);
+    messageEl.appendChild(avatarEl);
+
+    messagesDiv.appendChild(messageEl);
     this.scrollToBottom();
     this.messages.push({ type: 'user', text });
   }