diff --git a/templates/components/ui/html/chat/chat-item.tsx b/templates/components/ui/html/chat/chat-item.tsx
index 2244f729a8ba668121ab5ec0842963d22153ef92..790fbed693a716cb44773d855f0d43d5381f684b 100644
--- a/templates/components/ui/html/chat/chat-item.tsx
+++ b/templates/components/ui/html/chat/chat-item.tsx
@@ -7,7 +7,7 @@ export default function ChatItem(message: Message) {
   return (
     <div className="flex items-start gap-4 pt-5">
       <ChatAvatar {...message} />
-      <p className="break-words">{message.content}</p>
+      <p className="break-words whitespace-pre-wrap">{message.content}</p>
     </div>
   );
 }
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
index 3ca538051d69aac03135b367c8d8a7d01d7be592..fab4cc57cad6f86679c6fef10aaeaa522c40a178 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
@@ -15,7 +15,7 @@ const MemoizedReactMarkdown: FC<Options> = memo(
 export default function Markdown({ content }: { content: string }) {
   return (
     <MemoizedReactMarkdown
-      className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words"
+      className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words custom-markdown"
       remarkPlugins={[remarkGfm, remarkMath]}
       components={{
         p({ children }) {
diff --git a/templates/types/streaming/nextjs/app/layout.tsx b/templates/types/streaming/nextjs/app/layout.tsx
index fb097706274bdfe4690e4953bba24d7acea0a021..8f7cab961238fa4e232bded7a4e973bc079a828b 100644
--- a/templates/types/streaming/nextjs/app/layout.tsx
+++ b/templates/types/streaming/nextjs/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "./markdown.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
diff --git a/templates/types/streaming/nextjs/app/markdown.css b/templates/types/streaming/nextjs/app/markdown.css
new file mode 100644
index 0000000000000000000000000000000000000000..a843eeb7b8c13e8aa1acdaae493921686b28f668
--- /dev/null
+++ b/templates/types/streaming/nextjs/app/markdown.css
@@ -0,0 +1,23 @@
+/* Custom CSS for chat message markdown */
+.custom-markdown ul {
+  list-style-type: disc;
+  margin-left: 20px;
+}
+
+.custom-markdown ol {
+  list-style-type: decimal;
+  margin-left: 20px;
+}
+
+.custom-markdown li {
+  margin-bottom: 5px;
+}
+
+.custom-markdown ol ol {
+  list-style: lower-alpha;
+}
+
+.custom-markdown ul ul,
+.custom-markdown ol ol {
+  margin-left: 20px;
+}