diff --git a/project/templates/chat.html b/project/templates/chat.html
index 488c573..3efdfe9 100644
--- a/project/templates/chat.html
+++ b/project/templates/chat.html
@@ -48,20 +48,20 @@
               msgs.forEach(msg => {
                 var msg_list = document.getElementById("msg-list")
                 var li = document.createElement('li');
-                var span = document.createElement('span');
-                li.appendChild(span)
+                var pre = document.createElement('pre');
+                li.appendChild(pre)
                 li.style.marginBottom = "20px"
                 if (msg.response == "" && msg.request != "") {
                   li.style.textAlign = "right"
-                  span.innerHTML = msg.request
-                  span.style.backgroundColor = "lightblue"
+                  pre.innerHTML = msg.request
+                  pre.style.backgroundColor = "lightblue"
                 } else if (msg.request != "") {
                     li.style.textAlign = "left"
-                    span.innerHTML = msg.response
-                    span.style.backgroundColor = "lightgreen"
+                    pre.innerHTML = msg.response
+                    pre.style.backgroundColor = "lightgreen"
                 }
-                span.style.borderRadius = "10px"
-                span.style.padding = "5px"
+                pre.style.borderRadius = "10px"
+                pre.style.padding = "5px"
                 msg_list.appendChild(li)
               })
             window.scrollTo(0,document.documentElement.scrollHeight)
@@ -80,14 +80,14 @@
           if (data.msg) {
             var msg_list = document.getElementById("msg-list")
             var li = document.createElement('li');
-            var span = document.createElement('span');
-            li.appendChild(span)
+            var pre = document.createElement('pre');
+            li.appendChild(pre)
             li.style.textAlign="right"
             li.style.marginBottom="20px"
-            span.innerHTML=data.msg
-            span.style.backgroundColor="lightblue"
-            span.style.borderRadius="10px"
-            span.style.padding="5px"
+            pre.innerHTML=data.msg
+            pre.style.backgroundColor="lightblue"
+            pre.style.borderRadius="10px"
+            pre.style.padding="5px"
             msg_list.appendChild(li)
           }
           msgbox.value=""
@@ -103,14 +103,14 @@
               if (response?.status == "success") {
                 var msg_list = document.getElementById("msg-list")
                 var li = document.createElement('li');
-                var span = document.createElement('span');
-                li.appendChild(span)
-                span.innerText=response.message
+                var pre = document.createElement('pre');
+                li.appendChild(pre)
+                pre.innerText=response.message
                 li.style.textAlign="left"
                 li.style.marginBottom="20px"
-                span.style.backgroundColor="lightgreen"
-                span.style.borderRadius="10px"
-                span.style.padding="5px"
+                pre.style.backgroundColor="lightgreen"
+                pre.style.borderRadius="10px"
+                pre.style.padding="5px"
                 msg_list.appendChild(li)
                 msg_list.appendChild(document.createElement('br'))
               }