diff --git a/frontend/src/components/Document.tsx b/frontend/src/components/Document.tsx
index c2b194c3..e33468e8 100644
--- a/frontend/src/components/Document.tsx
+++ b/frontend/src/components/Document.tsx
@@ -18,6 +18,7 @@ function isValidHttpUrl(str: string) {
 
 function DocumentViewer(props: {
   document: MessageDocument;
+  markdown?: boolean;
   className?: string;
 }) {
   const [open, setOpen] = useState(false);
@@ -79,7 +80,10 @@ function DocumentViewer(props: {
       </button>
 
       <span className="flex flex-grow basis-0 flex-col gap-4">
-        <StringViewer value={props.document.page_content} />
+        <StringViewer
+          value={props.document.page_content}
+          markdown={props.markdown}
+        />
 
         <span className="flex flex-col flex-wrap items-start gap-2">
           {metadata.map(({ key, value }, idx) => {
@@ -105,12 +109,20 @@ function DocumentViewer(props: {
   );
 }
 
-export function DocumentList(props: { documents: MessageDocument[] }) {
+export function DocumentList(props: {
+  documents: MessageDocument[];
+  markdown?: boolean;
+}) {
   return (
     <div className="flex flex-col items-stretch gap-4 rounded-lg ring-1 ring-gray-300 overflow-hidden my-2">
       <div className="grid divide-y empty:hidden">
         {props.documents.map((document, idx) => (
-          <DocumentViewer document={document} key={idx} className="py-3" />
+          <DocumentViewer
+            document={document}
+            key={idx}
+            className="py-3"
+            markdown={props.markdown}
+          />
         ))}
       </div>
     </div>
diff --git a/frontend/src/components/Message.tsx b/frontend/src/components/Message.tsx
index 7e66fec2..6ed16cc7 100644
--- a/frontend/src/components/Message.tsx
+++ b/frontend/src/components/Message.tsx
@@ -102,7 +102,10 @@ function isDocumentContent(
 
 export function MessageContent(props: { content: MessageType["content"] }) {
   if (typeof props.content === "string") {
-    return <StringViewer value={props.content} />;
+    if (!props.content.trim()) {
+      return null;
+    }
+    return <StringViewer value={props.content} markdown />;
   } else if (isDocumentContent(props.content)) {
     return <DocumentList documents={props.content} />;
   } else if (
@@ -113,6 +116,7 @@ export function MessageContent(props: { content: MessageType["content"] }) {
   ) {
     return (
       <DocumentList
+        markdown
         documents={props.content.map((it) => ({
           page_content: it.content,
           metadata: omit(it, "content"),
diff --git a/frontend/src/components/String.tsx b/frontend/src/components/String.tsx
index b547e834..f4360496 100644
--- a/frontend/src/components/String.tsx
+++ b/frontend/src/components/String.tsx
@@ -7,13 +7,21 @@ const OPTIONS: MarkedOptions = {
   breaks: true,
 };
 
-export function StringViewer(props: { value: string; className?: string }) {
-  return (
+export function StringViewer(props: {
+  value: string;
+  className?: string;
+  markdown?: boolean;
+}) {
+  return props.markdown ? (
     <div
       className={cn("text-gray-900 prose", props.className)}
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(marked(props.value, OPTIONS)).trim(),
       }}
     />
+  ) : (
+    <div className={cn("text-gray-900 prose", props.className)}>
+      {props.value}
+    </div>
   );
 }