diff --git a/components/DeepResearch.vue b/components/DeepResearch.vue
index 526dae5..272d225 100644
--- a/components/DeepResearch.vue
+++ b/components/DeepResearch.vue
@@ -245,7 +245,7 @@
         <template v-else>
           <p
             v-if="selectedNode.researchGoal"
-            class="prose max-w-none"
+            class="prose max-w-none dark:prose-invert"
             v-html="marked(selectedNode.researchGoal, { gfm: true })"
           />
 
@@ -281,7 +281,7 @@
           />
           <p
             v-for="(learning, index) in selectedNode.learnings"
-            class="prose max-w-none"
+            class="prose max-w-none dark:prose-invert"
             :key="index"
             v-html="marked(`- ${learning}`, { gfm: true })"
           />
diff --git a/components/ReasoningAccordion.vue b/components/ReasoningAccordion.vue
index 679fc28..cdf3f81 100644
--- a/components/ReasoningAccordion.vue
+++ b/components/ReasoningAccordion.vue
@@ -44,7 +44,7 @@ until modelValue's length > 0 -->
       </div>
     </template>
     <template #content="{ item }">
-      <p class="text-sm text-gray-500 whitespace-pre-wrap mb-4">
+      <p class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-wrap mb-4">
         {{ item.content }}
       </p>
     </template>
diff --git a/components/ResearchReport.vue b/components/ResearchReport.vue
index 993fb09..3902813 100644
--- a/components/ResearchReport.vue
+++ b/components/ResearchReport.vue
@@ -182,7 +182,7 @@
     <div
       v-if="reportContent"
       id="report-content"
-      class="prose prose-sm max-w-none p-6 bg-gray-50 dark:bg-gray-800 dark:text-white rounded-lg shadow"
+      class="prose prose-sm max-w-none p-6 bg-gray-50 dark:bg-gray-800 dark:prose-invert dark:text-white rounded-lg shadow"
       v-html="reportHtml"
     />
     <div v-else>