diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index fbde8ee7cf..bb16581d66 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -285,7 +285,7 @@
   [data-component="markdown"] {
     margin-top: 24px;
     font-style: normal;
-    font-size: inherit;
+    font-size: var(--font-size-base);
     color: var(--text-weak);
 
     strong,
diff --git a/packages/ui/src/components/timeline-playground.stories.tsx b/packages/ui/src/components/timeline-playground.stories.tsx
index 00d458fa02..1e2d1bbc65 100644
--- a/packages/ui/src/components/timeline-playground.stories.tsx
+++ b/packages/ui/src/components/timeline-playground.stories.tsx
@@ -979,6 +979,20 @@ const CSS_CONTROLS: CSSControl[] = [
   },
 
   // --- Reasoning part ---
+  {
+    key: "reasoning-md-font-size",
+    label: "Reasoning font size",
+    group: "Reasoning Part",
+    type: "range",
+    initial: "14",
+    selector: '[data-component="reasoning-part"] [data-component="markdown"]',
+    property: "font-size",
+    min: "10",
+    max: "22",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="reasoning-part"]', prop: "font-size", format: px },
+  },
   {
     key: "reasoning-md-margin-top",
     label: "Reasoning markdown margin-top",