diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 1373db20..072567ba 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -1,12 +1,5 @@
 "use client";
 
-import { ProtectedRoute } from "@/components/protected-route";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { useAuth } from "@/contexts/auth-context";
-import { type EndpointType, useChat } from "@/contexts/chat-context";
-import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useTask } from "@/contexts/task-context";
 import {
   AtSign,
   Bot,
@@ -22,8 +15,16 @@ import {
   Zap,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
+import { MarkdownRenderer } from "@/components/markdown-renderer";
+import { ProtectedRoute } from "@/components/protected-route";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth-context";
+import { type EndpointType, useChat } from "@/contexts/chat-context";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useTask } from "@/contexts/task-context";
 import { useLoadingStore } from "@/stores/loadingStore";
+import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
 import Nudges from "./nudges";
 
 interface Message {
@@ -193,7 +194,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText
+          errorText,
         );
         throw new Error("Failed to process document");
       }
@@ -447,7 +448,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages"
+        "messages",
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -575,7 +576,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments
+                            toolCall.function?.arguments || toolCall.arguments,
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -594,7 +595,7 @@ function ChatPage() {
           }
 
           return message;
-        }
+        },
       );
 
       setMessages(convertedMessages);
@@ -683,7 +684,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error
+        error,
       );
 
       // Replace the last message with error message
@@ -697,37 +698,37 @@ function ChatPage() {
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener
+      handleFileUploadStart as EventListener,
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener
+      handleFileUploaded as EventListener,
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener
+      handleFileUploadComplete as EventListener,
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener
+      handleFileUploadError as EventListener,
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener
+        handleFileUploadStart as EventListener,
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener
+        handleFileUploaded as EventListener,
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener
+        handleFileUploadComplete as EventListener,
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener
+        handleFileUploadError as EventListener,
       );
     };
   }, [endpoint, setPreviousResponseIds]);
@@ -754,7 +755,7 @@ function ChatPage() {
   }, [isFilterDropdownOpen]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint]
+    previousResponseIds[endpoint],
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -859,7 +860,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk
+                  chunk,
                 );
 
                 // Extract response ID if present
@@ -875,14 +876,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call
+                      chunk.delta.function_call,
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name
+                        chunk.delta.function_call.name,
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -898,7 +899,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments
+                        chunk.delta.function_call.arguments,
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -910,14 +911,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString
+                          lastFunctionCall.argumentsString,
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString
+                              lastFunctionCall.argumentsString,
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -925,7 +926,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e
+                              e,
                             );
                           }
                         }
@@ -958,7 +959,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments
+                            toolCall.function.arguments,
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -972,7 +973,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString
+                              lastFunctionCall.argumentsString,
                             );
 
                             // Try to parse arguments if they look complete
@@ -981,7 +982,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString
+                                  lastFunctionCall.argumentsString,
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -989,7 +990,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e
+                                  e,
                                 );
                               }
                             }
@@ -1021,7 +1022,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e
+                            e,
                           );
                         }
                       }
@@ -1037,12 +1038,12 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name
+                    chunk.item.tool_name || chunk.item.name,
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id
+                    (fc) => fc.id === chunk.item.id,
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1051,7 +1052,7 @@ function ChatPage() {
                         (fc) =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name)
+                          fc.name === (chunk.item.tool_name || chunk.item.name),
                       );
                   }
 
@@ -1064,7 +1065,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id
+                      existing.id,
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1082,7 +1083,7 @@ function ChatPage() {
                       currentFunctionCalls.map((fc) => ({
                         id: fc.id,
                         name: fc.name,
-                      }))
+                      })),
                     );
                   }
                 }
@@ -1093,7 +1094,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta
+                    chunk.delta,
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1104,7 +1105,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString
+                      lastFunctionCall.argumentsString,
                     );
                   }
                 }
@@ -1115,26 +1116,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments
+                    chunk.arguments,
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}"
+                        chunk.arguments || "{}",
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments
+                        lastFunctionCall.arguments,
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e
+                        e,
                       );
                     }
                   }
@@ -1148,14 +1149,14 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name
+                    chunk.item.tool_name || chunk.item.name,
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
                     currentFunctionCalls.map((fc) => ({
                       id: fc.id,
                       name: fc.name,
-                    }))
+                    })),
                   );
 
                   // Find existing function call by ID or name
@@ -1163,14 +1164,14 @@ function ChatPage() {
                     (fc) =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name
+                      fc.name === chunk.item.name,
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name
+                      functionCall.name,
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1193,7 +1194,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name
+                      chunk.item.name,
                     );
                   }
                 }
@@ -1214,7 +1215,7 @@ function ChatPage() {
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name)
+                      chunk.item.type.includes(fc.name),
                   );
 
                   if (functionCall) {
@@ -1258,12 +1259,12 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type
+                    chunk.item.type,
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id
+                    (fc) => fc.id === chunk.item.id,
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1275,7 +1276,7 @@ function ChatPage() {
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type)
+                              chunk.item.type),
                       );
                   }
 
@@ -1291,7 +1292,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id
+                      existing.id,
                     );
                   } else {
                     const functionCall = {
@@ -1312,7 +1313,7 @@ function ChatPage() {
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      }))
+                      })),
                     );
                   }
                 }
@@ -1590,7 +1591,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent
+    event?: React.MouseEvent,
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1655,7 +1656,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number
+    messageIndex?: number,
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -2023,11 +2024,9 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index
+                            index,
                           )}
-                          <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
-                            {message.content}
-                          </p>
+                          <MarkdownRenderer chatMessage={message.content} />
                         </div>
                         {endpoint === "chat" && (
                           <div className="flex-shrink-0 ml-2">
@@ -2054,12 +2053,12 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length
+                        messages.length,
                       )}
-                      <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
-                        {streamingMessage.content}
-                        <span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
-                      </p>
+                      <MarkdownRenderer
+                        chatMessage={streamingMessage.content}
+                      />
+                      <span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
                     </div>
                   </div>
                 )}
@@ -2197,7 +2196,7 @@ function ChatPage() {
                     const filteredFilters = availableFilters.filter((filter) =>
                       filter.name
                         .toLowerCase()
-                        .includes(filterSearchTerm.toLowerCase())
+                        .includes(filterSearchTerm.toLowerCase()),
                     );
 
                     if (e.key === "Escape") {
@@ -2215,7 +2214,7 @@ function ChatPage() {
                     if (e.key === "ArrowDown") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev < filteredFilters.length - 1 ? prev + 1 : 0
+                        prev < filteredFilters.length - 1 ? prev + 1 : 0,
                       );
                       return;
                     }
@@ -2223,7 +2222,7 @@ function ChatPage() {
                     if (e.key === "ArrowUp") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev > 0 ? prev - 1 : filteredFilters.length - 1
+                        prev > 0 ? prev - 1 : filteredFilters.length - 1,
                       );
                       return;
                     }
@@ -2241,7 +2240,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex]
+                          filteredFilters[selectedFilterIndex],
                         );
                         return;
                       }
@@ -2260,7 +2259,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex]
+                          filteredFilters[selectedFilterIndex],
                         );
                         return;
                       }
@@ -2340,7 +2339,7 @@ function ChatPage() {
                         .filter((filter) =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase())
+                            .includes(filterSearchTerm.toLowerCase()),
                         )
                         .map((filter, index) => (
                           <button
@@ -2366,7 +2365,7 @@ function ChatPage() {
                       {availableFilters.filter((filter) =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase())
+                          .includes(filterSearchTerm.toLowerCase()),
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">