diff --git a/client/src/Chat.tsx b/client/src/Chat.tsx
index b32cc0b83e..76a629f6a1 100644
--- a/client/src/Chat.tsx
+++ b/client/src/Chat.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
-import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import "./App.css";
 
 type TextResponse = {
@@ -58,7 +58,7 @@ export default function Chat() {
                         messages.map((message, index) => (
                             <div
                                 key={index}
-                                className={`flex ${
+                                className={`text-left flex ${
                                     message.user === "user"
                                         ? "justify-end"
                                         : "justify-start"
@@ -71,7 +71,9 @@ export default function Chat() {
                                             : "bg-muted"
                                     }`}
                                 >
-                                    {message.text}
+                                    <pre className="whitespace-pre-wrap break-words font-sans m-0">
+                                        {message.text}
+                                    </pre>
                                 </div>
                             </div>
                         ))