diff --git a/frontend/src/features/agents/components/drilldown/EvaluationPanel.js b/frontend/src/features/agents/components/drilldown/EvaluationPanel.js
index 39b5e25..f81423f 100644
--- a/frontend/src/features/agents/components/drilldown/EvaluationPanel.js
+++ b/frontend/src/features/agents/components/drilldown/EvaluationPanel.js
@@ -1,23 +1,24 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 
-const EvaluationPanel = ({ 
-    chatHistory, 
-    selectedAuditId, 
-    setSelectedAuditId, 
-    feedbackContent, 
-    rubricContent, 
-    historyLog, 
-    coworkerContent, 
-    setCoworkerContent, 
-    handleSaveGroundTruth, 
-    savingGroundTruth, 
+const EvaluationPanel = ({
+    chatHistory,
+    selectedAuditId,
+    setSelectedAuditId,
+    feedbackContent,
+    rubricContent,
+    historyLog,
+    coworkerContent,
+    setCoworkerContent,
+    handleSaveGroundTruth,
+    savingGroundTruth,
     editConfig,
     fetchData,
     agent
 }) => {
     const messagesWithAudit = chatHistory.filter(m => m.message_metadata?.evaluation && !m.isUser);
     const selectedMessage = selectedAuditId ? chatHistory.find(m => m.id === selectedAuditId) : null;
-    
+
     const displayFeedback = selectedMessage ? selectedMessage.message_metadata.evaluation.feedback : feedbackContent;
     const displayRubric = selectedMessage ? selectedMessage.message_metadata.evaluation.rubric : rubricContent;
     const displayHistory = selectedMessage ? selectedMessage.message_metadata.evaluation.history : historyLog;
@@ -29,13 +30,13 @@
                 <div className="flex flex-col">
                     <span className="text-[10px] font-black uppercase tracking-widest text-indigo-500 mb-1">Audit Mode</span>
                     <div className="flex bg-gray-100 dark:bg-gray-900/50 p-1 rounded-xl border border-gray-200 dark:border-gray-800">
-                        <button 
+                        <button
                             onClick={() => setSelectedAuditId(null)}
                             className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${!selectedAuditId ? 'bg-white dark:bg-gray-800 text-indigo-500 shadow-md' : 'text-gray-500 hover:text-gray-400'}`}
                         >
                             Live (Latest)
                         </button>
-                        <button 
+                        <button
                             onClick={() => {
                                 if (messagesWithAudit.length > 0) setSelectedAuditId(messagesWithAudit[messagesWithAudit.length - 1].id);
                             }}
@@ -49,7 +50,7 @@
                 {selectedAuditId && (
                     <div className="flex flex-col flex-1 w-full max-w-md">
                         <span className="text-[10px] font-black uppercase tracking-widest text-indigo-500 mb-1">Select Historical Message</span>
-                        <select 
+                        <select
                             value={selectedAuditId}
                             onChange={(e) => setSelectedAuditId(parseInt(e.target.value))}
                             className="w-full bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 text-xs font-bold py-2.5 px-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all cursor-pointer"
@@ -83,22 +84,21 @@
                     </div>
                     <div className="flex items-center gap-4">
                         <span className="text-[10px] font-mono text-gray-400 dark:text-indigo-400/50 bg-gray-100 dark:bg-white/5 px-2 py-0.5 rounded">.coworker.md</span>
-                        <button 
+                        <button
                             onClick={handleSaveGroundTruth}
                             disabled={savingGroundTruth || editConfig?.is_locked}
-                            className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg ${
-                                savingGroundTruth 
-                                ? "bg-gray-100 dark:bg-white/5 text-gray-400" 
+                            className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg ${savingGroundTruth
+                                ? "bg-gray-100 dark:bg-white/5 text-gray-400"
                                 : "bg-gradient-to-r from-indigo-600 to-blue-600 text-white hover:scale-105 active:scale-95 shadow-indigo-500/20"
-                            }`}
+                                }`}
                         >
                             {savingGroundTruth ? "Guidelines Syncing..." : "Sync Guidelines"}
                         </button>
                     </div>
                 </div>
                 <div className="p-5">
-                    <textarea 
-                        value={coworkerContent} 
+                    <textarea
+                        value={coworkerContent}
                         onChange={(e) => setCoworkerContent(e.target.value)}
                         placeholder="# Auditor Guidelines... Define architectural constraints and judging rules here."
                         className="w-full h-52 bg-transparent text-gray-800 dark:text-emerald-400 font-mono text-sm leading-relaxed resize-none focus:outline-none scrollbar-hide border-none placeholder:text-gray-400 dark:placeholder:text-gray-800"
@@ -127,18 +127,22 @@
                 <div className="flex flex-col bg-white dark:bg-indigo-500/5 border border-indigo-200 dark:border-indigo-500/20 rounded-2xl overflow-hidden shadow-indigo-500/5 shadow-2xl transition-all hover:border-indigo-500/40">
                     <div className="px-5 py-3 border-b border-indigo-100 dark:border-indigo-500/20 bg-indigo-50/50 dark:bg-indigo-500/10 flex justify-between items-center shrink-0">
                         <span className="text-[10px] uppercase tracking-[0.2em] font-black text-indigo-600 dark:text-indigo-400 flex items-center gap-2">
-                           <div className="w-2 h-2 bg-indigo-500 rounded-full animate-pulse shadow-[0_0_10px_rgba(99,102,241,0.8)]"></div>
-                           {selectedAuditId ? "Audit Snapshot" : "Audit Stream"}
+                            <div className="w-2 h-2 bg-indigo-500 rounded-full animate-pulse shadow-[0_0_10px_rgba(99,102,241,0.8)]"></div>
+                            {selectedAuditId ? "Audit Snapshot" : "Audit Stream"}
                         </span>
                         <span className="text-[10px] font-mono text-indigo-400 bg-white/50 dark:bg-black/20 px-1.5 py-0.5 rounded">{selectedAuditId ? `MSID-${selectedAuditId}` : "feedback.md"}</span>
                     </div>
-                    <div className="flex-1 p-5 overflow-auto font-mono text-xs whitespace-pre-wrap leading-relaxed text-indigo-600/90 dark:text-indigo-300 markdown-content scrollbar-hide">
-                        {displayFeedback || (
+                    <div className="flex-1 p-5 overflow-auto font-sans text-xs leading-relaxed text-indigo-600/90 dark:text-indigo-300 markdown-content scrollbar-hide">
+                        {displayFeedback ? (
+                            <ReactMarkdown className="prose prose-sm dark:prose-invert max-w-none">
+                                {displayFeedback}
+                            </ReactMarkdown>
+                        ) : (
                             <div className="flex flex-col items-center justify-center h-full gap-3 opacity-50 grayscale">
                                 <div className="w-8 h-8 border-2 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
                                 <span className="italic text-center max-w-[200px]">
-                                    {agent?.status === 'active' || agent?.status === 'starting' 
-                                        ? "Consulting Co-Worker rubric and auditing results..." 
+                                    {agent?.status === 'active' || agent?.status === 'starting'
+                                        ? "Consulting Co-Worker rubric and auditing results..."
                                         : "Waiting for next evaluation cycle to populate feedback..."}
                                 </span>
                             </div>
@@ -155,7 +159,7 @@
                         History Timeline
                     </span>
                     <div className="flex items-center gap-4">
-                        <button 
+                        <button
                             onClick={fetchData}
                             className="text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-lg border border-indigo-500/30 text-indigo-500 hover:bg-indigo-500/10 transition-all active:scale-95"
                         >
@@ -193,7 +197,7 @@
                                         <p className="text-[12px] text-gray-600 dark:text-gray-400 font-mono leading-relaxed border-l-4 border-gray-100 dark:border-white/10 pl-5 py-1 italic bg-gray-50/50 dark:bg-black/20 rounded-r-lg">
                                             {entry.reason || entry.message}
                                         </p>
-                                        
+
                                         {entry.sub_events?.length > 0 && (
                                             <div className="flex flex-wrap gap-2.5 pl-6">
                                                 {entry.sub_events.map((sub, sidx) => (