diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index e83bfbb520..3e2cf1589f 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "@fluentui/react-icons": "^2.0.221",
         "@react-spring/web": "^9.7.3",
         "dompurify": "^3.0.6",
+        "marked": "^9.1.6",
         "ndjson-readablestream": "^1.0.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -3081,6 +3082,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/marked": {
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.6.tgz",
+      "integrity": "sha512-jcByLnIFkd5gSXZmjNvS1TlmRhCXZjIzHYlaGkPlLIekG55JDR2Z4va9tZwCiP+/RDERiNhMOFu01xd6O5ct1Q==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "dev": true,
@@ -5554,6 +5566,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "marked": {
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.6.tgz",
+      "integrity": "sha512-jcByLnIFkd5gSXZmjNvS1TlmRhCXZjIzHYlaGkPlLIekG55JDR2Z4va9tZwCiP+/RDERiNhMOFu01xd6O5ct1Q=="
+    },
     "ms": {
       "version": "2.1.2",
       "dev": true
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 645c6bda60..632d80a0bb 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -18,6 +18,7 @@
     "@fluentui/react-components": "^9.37.3",
     "@fluentui/react-icons": "^2.0.221",
     "@react-spring/web": "^9.7.3",
+    "marked": "^9.1.6",
     "dompurify": "^3.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx b/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
index 89a9ba56b1..4e1360f966 100644
--- a/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
+++ b/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
@@ -6,6 +6,7 @@ import { SupportingContent } from "../SupportingContent";
 import { ChatAppResponse } from "../../api";
 import { AnalysisPanelTabs } from "./AnalysisPanelTabs";
 import { ThoughtProcess } from "./ThoughtProcess";
+import { MarkdownViewer } from "../MarkdownViewer";
 import { useMsal } from "@azure/msal-react";
 import { getHeaders } from "../../api";
 import { useLogin, getToken } from "../../authConfig";
@@ -53,6 +54,22 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
         fetchCitation();
     }, []);
 
+    const renderFileViewer = () => {
+        if (!activeCitation) {
+            return null;
+        }
+
+        const fileExtension = activeCitation.split(".").pop()?.toLowerCase();
+        switch (fileExtension) {
+            case "png":
+                return <img src={citation} className={styles.citationImg} alt="Citation Image" />;
+            case "md":
+                return <MarkdownViewer src={activeCitation} />;
+            default:
+                return <iframe title="Citation" src={citation} width="100%" height={citationHeight} />;
+        }
+    };
+
     return (
         <Pivot
             className={className}
@@ -78,11 +95,7 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
                 headerText="Citation"
                 headerButtonProps={isDisabledCitationTab ? pivotItemDisabledStyle : undefined}
             >
-                {activeCitation?.endsWith(".png") ? (
-                    <img src={citation} className={styles.citationImg} />
-                ) : (
-                    <iframe title="Citation" src={citation} width="100%" height={citationHeight} />
-                )}
+                {renderFileViewer()}
             </PivotItem>
         </Pivot>
     );
diff --git a/app/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css b/app/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css
new file mode 100644
index 0000000000..483d32e112
--- /dev/null
+++ b/app/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css
@@ -0,0 +1,49 @@
+.downloadButton {
+    position: relative;
+    float: right;
+}
+
+.markdownViewer {
+    border-radius: 8px;
+    box-shadow:
+        #0000000d 0 0 0 1px,
+        #0000001a 0 2px 3px;
+    background-color: white;
+    margin: 20px 0;
+}
+
+.loading {
+    padding: 100px;
+    height: 100vh;
+    background-color: white;
+}
+
+.error {
+    height: 100vh;
+    background-color: white;
+}
+
+.markdown {
+    padding: 30px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+th,
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+tr:nth-child(even) {
+    background-color: #f6f8fa;
+}
+
+code {
+    display: block;
+    font-family: monospace;
+    padding: 10px;
+    background-color: #f6f8fa;
+}
diff --git a/app/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx b/app/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx
new file mode 100644
index 0000000000..0374d769cd
--- /dev/null
+++ b/app/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { marked } from "marked";
+import styles from "./MarkdownViewer.module.css";
+import { Spinner, SpinnerSize, MessageBar, MessageBarType, Link, IconButton } from "@fluentui/react";
+
+interface MarkdownViewerProps {
+    src: string;
+}
+
+export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ src }) => {
+    const [content, setContent] = useState<string>("");
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    /**
+     * Anchor links are not handled well by 'marked' and result in HTTP 404 errors as the URL they point to does not exist.
+     * This function removes them from the resulted HTML.
+     */
+    const removeAnchorLinks = (html: string) => {
+        const ancorLinksRegex = /<a\s+(?:[^>]*?\s+)?href=['"](#[^"']*?)['"][^>]*?>/g;
+        return html.replace(ancorLinksRegex, "");
+    };
+
+    useEffect(() => {
+        const fetchMarkdown = async () => {
+            try {
+                const response = await fetch(src);
+
+                if (!response.ok) {
+                    throw new Error("Failed loading markdown file.");
+                }
+
+                const markdownText = await response.text();
+                const parsedHtml = await marked.parse(markdownText);
+                const cleanedHtml = removeAnchorLinks(parsedHtml);
+                setContent(cleanedHtml);
+            } catch (error: any) {
+                setError(error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchMarkdown();
+    }, [src]);
+
+    return (
+        <div>
+            {isLoading ? (
+                <div className={`${styles.loading} ${styles.markdownViewer}`}>
+                    <Spinner size={SpinnerSize.large} label="Loading file" />
+                </div>
+            ) : error ? (
+                <div className={`${styles.error} ${styles.markdownViewer}`}>
+                    <MessageBar messageBarType={MessageBarType.error} isMultiline={false}>
+                        {error.message}
+                        <Link href={src} download>
+                            Download the file
+                        </Link>
+                    </MessageBar>
+                </div>
+            ) : (
+                <div>
+                    <IconButton
+                        className={styles.downloadButton}
+                        style={{ color: "black" }}
+                        iconProps={{ iconName: "Save" }}
+                        title="Save"
+                        ariaLabel="Save"
+                        href={src}
+                        download
+                    />
+                    <div className={`${styles.markdown} ${styles.markdownViewer}`} dangerouslySetInnerHTML={{ __html: content }} />
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/app/frontend/src/components/MarkdownViewer/index.tsx b/app/frontend/src/components/MarkdownViewer/index.tsx
new file mode 100644
index 0000000000..1dd1eac95b
--- /dev/null
+++ b/app/frontend/src/components/MarkdownViewer/index.tsx
@@ -0,0 +1 @@
+export * from "./MarkdownViewer";