diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx
index aad1c7b..2b78ce2 100644
--- a/web-app/src/components/ui/chat/chat-window.jsx
+++ b/web-app/src/components/ui/chat/chat-window.jsx
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
+import { MARKDOWN_COMPONENTS } from "src/config/markdown";
 
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
@@ -11,7 +12,9 @@ function MessageBubble({ message }) {
         {isUser ? (
           <div className="text-sm">{message.content}</div>
         ) : (
-          <ReactMarkdown>{message.content}</ReactMarkdown>
+          <ReactMarkdown components={MARKDOWN_COMPONENTS}>
+            {message.content}
+          </ReactMarkdown>
         )}
       </div>
     </div>
diff --git a/web-app/src/config/markdown.jsx b/web-app/src/config/markdown.jsx
new file mode 100644
index 0000000..c0ea78f
--- /dev/null
+++ b/web-app/src/config/markdown.jsx
@@ -0,0 +1,60 @@
+export const MARKDOWN_COMPONENTS = {
+  h1: ({ node, ...props }) => (
+    <h1 className="text-xl font-semibold mt-2 mb-1" {...props} />
+  ),
+  h2: ({ node, ...props }) => (
+    <h2 className="text-lg font-semibold mt-2 mb-1" {...props} />
+  ),
+  h3: ({ node, ...props }) => (
+    <h3 className="text-md font-semibold mt-2 mb-1" {...props} />
+  ),
+  p: ({ node, ...props }) => (
+    <p className="text-sm leading-relaxed mb-2" {...props} />
+  ),
+  a: ({ node, href, ...props }) => (
+    <a
+      href={href}
+      className="text-indigo-300 hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    />
+  ),
+  code: ({ node, inline, className, children, ...props }) => {
+    if (inline) {
+      return (
+        <code
+          className={`bg-slate-800 px-1 py-0.5 rounded text-sm ${className || ""}`}
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+    return (
+      <pre
+        className="bg-slate-800 p-2 rounded overflow-auto text-sm"
+        {...props}
+      >
+        <code className={className || ""}>{children}</code>
+      </pre>
+    );
+  },
+  blockquote: ({ node, ...props }) => (
+    <blockquote
+      className="border-l-2 border-slate-600 pl-4 italic text-slate-200 my-2"
+      {...props}
+    />
+  ),
+  ul: ({ node, ...props }) => (
+    <ul className="list-disc list-inside ml-4 mb-2" {...props} />
+  ),
+  ol: ({ node, ...props }) => (
+    <ol className="list-decimal list-inside ml-4 mb-2" {...props} />
+  ),
+  li: ({ node, ...props }) => <li className="mb-1" {...props} />,
+  strong: ({ node, ...props }) => (
+    <strong className="font-semibold" {...props} />
+  ),
+  em: ({ node, ...props }) => <em className="italic" {...props} />,
+};