diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
index e3c6b494b5..e5da6e4368 100644
--- a/web/oss/src/styles/editor-theme.css
+++ b/web/oss/src/styles/editor-theme.css
@@ -776,3 +776,150 @@ pre::-webkit-scrollbar-thumb {
 .dark .editor-tokenAttr {
     color: #79c0ff;
 }
+
+/* ------------------------------------------------------------------------- *
+ * Document prose ("Option B — comfortable")
+ *
+ * Scoped to the Markdown document editors (Instructions / Skill) via the
+ * `md-prose` wrapper, so the shared editor theme used by the prompt and chat
+ * editors stays as-is. Uses antd semantic tokens (`--ant-color-*`) so it adapts
+ * to dark mode automatically; placed last so equal-specificity rules win over
+ * the `.dark` overrides above. Covers both the edit and read-only preview panes
+ * (both render through this Lexical editor).
+ * ------------------------------------------------------------------------- */
+.md-prose .editor-paragraph {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+.md-prose .editor-heading-h1,
+.md-prose .editor-heading-h2,
+.md-prose .editor-heading-h3,
+.md-prose .editor-heading-h4,
+.md-prose .editor-heading-h5,
+.md-prose .editor-heading-h6 {
+    color: var(--ant-color-text);
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 18px;
+    margin-bottom: 6px;
+}
+.md-prose .editor-heading-h1 {
+    font-size: 20px;
+}
+.md-prose .editor-heading-h2 {
+    font-size: 16px;
+}
+.md-prose .editor-heading-h3 {
+    font-size: 14px;
+}
+.md-prose .editor-heading-h4,
+.md-prose .editor-heading-h5,
+.md-prose .editor-heading-h6 {
+    font-size: 13px;
+    color: var(--ant-color-text-secondary);
+}
+
+/* Lists — the shared theme gives ol/ul different left margins and 8px-tall items, so the
+   two list kinds indent inconsistently. Normalize both to one padding and tight items. */
+.md-prose .editor-list-ol,
+.md-prose .editor-list-ul {
+    margin: 8px 0;
+    padding-left: 22px;
+}
+.md-prose .editor-list-item {
+    margin: 3px 0;
+}
+.md-prose .editor-nested-list-item {
+    margin: 0;
+    list-style-type: none;
+}
+/* Per-depth markers for nested lists, matching the Lexical playground: ordered cycles
+   1 → A → a → I → i, unordered • → ◦ → ▪. Lexical DOM-nests indented items (the wrapper li
+   carries `editor-nested-list-item`, which is marker-less above), so descendant `ol ol` /
+   `ul ul` selectors pick the right style per level. Scoped to the rendered document view. */
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol {
+    list-style-type: decimal;
+}
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol ol.editor-list-ol {
+    list-style-type: upper-alpha;
+}
+.md-prose .editor-input:not(.markdown-view) ol.editor-list-ol ol.editor-list-ol ol.editor-list-ol {
+    list-style-type: lower-alpha;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol {
+    list-style-type: upper-roman;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol
+    ol.editor-list-ol {
+    list-style-type: lower-roman;
+}
+.md-prose .editor-input:not(.markdown-view) ul.editor-list-ul {
+    list-style-type: disc;
+}
+.md-prose .editor-input:not(.markdown-view) ul.editor-list-ul ul.editor-list-ul {
+    list-style-type: circle;
+}
+.md-prose
+    .editor-input:not(.markdown-view)
+    ul.editor-list-ul
+    ul.editor-list-ul
+    ul.editor-list-ul {
+    list-style-type: square;
+}
+.md-prose .editor-quote {
+    font-size: 13px;
+    font-style: italic;
+    color: var(--ant-color-text-secondary);
+    border-left: 3px solid var(--ant-color-border);
+    margin-left: 2px;
+    padding-left: 14px;
+}
+.md-prose .editor-text-code {
+    background-color: var(--ant-color-fill-tertiary);
+    border: 0.5px solid var(--ant-color-border-secondary);
+    border-radius: 4px;
+    padding: 1px 5px;
+    font-size: 86%;
+}
+/* The shared `.editor-inner:not(.code-editor) .editor-code` rule (specificity 0-3-0) sets an 8px
+   padding + light fill and would beat a plain `.md-prose .editor-code` (0-2-0). Scope this to the
+   rendered input (`:not(.markdown-view)`, so source view is untouched) to reach 0-4-0 and win. */
+/* Hide the editor's built-in uppercase language label (globals.css renders it via
+   `::after content: attr(data-highlight-language)`, specificity 0-5-1) on document code blocks —
+   the CodeBlockLanguageMenu supplies an interactive picker in its place. Needs 0-6-1 to win. */
+.md-prose
+    .editor-inner:not(.code-editor)
+    .editor-input:not(.markdown-view)
+    .editor-code::after {
+    content: none;
+}
+.md-prose .editor-input:not(.markdown-view) .editor-code {
+    display: block;
+    position: relative;
+    background-color: var(--ant-color-fill-quaternary);
+    border: 0.5px solid var(--ant-color-border-secondary);
+    border-radius: 8px;
+    /* Extra top padding leaves room for the floating language picker pinned to the block's top. */
+    padding: 40px 14px 12px;
+    margin: 10px 0;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    tab-size: 2;
+    overflow-x: auto;
+}
+.md-prose .editor-link {
+    color: var(--ant-color-primary);
+    text-decoration: underline;
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx
new file mode 100644
index 0000000000..fb3dc2284c
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AddTextLink.tsx
@@ -0,0 +1,22 @@
+import {type ButtonHTMLAttributes, forwardRef} from "react"
+
+/**
+ * The inline "add a …" accent text-link used by every config-section empty state ("No tools yet —
+ * add a tool"). forwardRef + prop spread so it can be the trigger of a Popover/Dropdown (which
+ * inject `onClick` and a positioning ref).
+ */
+export const AddTextLink = forwardRef<
+    HTMLButtonElement,
+    {label: string} & ButtonHTMLAttributes<HTMLButtonElement>
+>(function AddTextLink({label, type = "button", ...rest}, ref) {
+    return (
+        <button
+            ref={ref}
+            type={type}
+            {...rest}
+            className="cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[var(--ag-c-1677FF,#1677ff)] hover:underline"
+        >
+            {label}
+        </button>
+    )
+})
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
index fb7982ce5d..4fe789f956 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
@@ -21,15 +21,7 @@
  * Sections are schema-driven: each renders only when its field exists in the resolved
  * schema, so the panel tracks the backend contract instead of hard-coding fields.
  */
-import {
-    type ButtonHTMLAttributes,
-    forwardRef,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import {useCallback, useEffect, useMemo, useRef, useState} from "react"
 
 import {vaultSecretsQueryAtom} from "@agenta/entities/secret"
 import type {SchemaProperty} from "@agenta/entities/shared"
@@ -63,6 +55,7 @@ import {useAtomValue} from "jotai"
 
 import {useOptionalDrillIn} from "../components/MoleculeDrillInContext"
 
+import {AddTextLink} from "./AddTextLink"
 import {agentTemplateLayoutAtom} from "./agentTemplateLayout"
 import {ClaudePermissionsControl} from "./ClaudePermissionsControl"
 import {CodeEditor} from "./CodeEditor"
@@ -492,30 +485,6 @@ function ItemRow({
     )
 }
 
-/**
- * A text-only "add" link for a section's empty state — no border/background/padding, just inline
- * link text inside a muted sentence (the section header keeps the compact `+` for quick-add).
- *
- * forwardRef + props spread so it can be a popover trigger (ToolSelectorPopover): the popover
- * clones the trigger to attach its positioning ref + onClick. Without the ref it can't anchor and
- * the popover renders at the top-left and immediately closes.
- */
-const AddTextLink = forwardRef<
-    HTMLButtonElement,
-    {label: string} & ButtonHTMLAttributes<HTMLButtonElement>
->(function AddTextLink({label, type = "button", ...rest}, ref) {
-    return (
-        <button
-            ref={ref}
-            type={type}
-            {...rest}
-            className="cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[var(--ag-c-1677FF,#1677ff)] hover:underline"
-        >
-            {label}
-        </button>
-    )
-})
-
 /**
  * An instructions markdown file row. Avatar + filename + a 2-line preview of the (markdown-stripped)
  * content, clamped with an ellipsis. The whole row opens the editor drawer for the full content —
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
new file mode 100644
index 0000000000..d2019226bc
--- /dev/null
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsx
@@ -0,0 +1,142 @@
+/**
+ * CodeBlockLanguageMenu
+ *
+ * Renders a language picker pinned to the top-right of EVERY code block in the editor (not only the
+ * focused one), so each block's reserved top strip always carries its language instead of leaving a
+ * dead gap. It mounts inside the editor's `EditorProvider`. The picker drives `CodeNode.setLanguage`,
+ * which the Prism highlighter (registered in MarkdownEditor) reads.
+ *
+ * Positioning: fixed-position portals anchored to each block's viewport rect, recomputed on every
+ * editor update plus scroll/resize. Pickers whose block has scrolled out of the editor's scroll
+ * viewport are dropped so they don't float over the toolbar or neighbouring UI.
+ */
+import {useCallback, useEffect, useMemo, useState} from "react"
+
+import {useLexicalComposerContext} from "@agenta/ui"
+import {$isCodeNode, getCodeLanguageOptions, getLanguageFriendlyName} from "@lexical/code"
+import {Select} from "antd"
+import {$getNodeByKey, $getRoot} from "lexical"
+import {createPortal} from "react-dom"
+
+interface BlockMenu {
+    key: string
+    lang: string
+    top: number
+    right: number
+}
+
+export function CodeBlockLanguageMenu({editable = true}: {editable?: boolean}) {
+    const [editor] = useLexicalComposerContext()
+    const options = useMemo(
+        () => getCodeLanguageOptions().map(([value, label]) => ({value, label})),
+        [],
+    )
+    const [menus, setMenus] = useState<BlockMenu[]>([])
+
+    const recompute = useCallback(() => {
+        const rootEl = editor.getRootElement()
+        // `.md-prose` is the editor's scrolling viewport (see MarkdownEditor) — clip pickers to it.
+        const viewport = rootEl?.closest<HTMLElement>(".md-prose")?.getBoundingClientRect()
+        editor.getEditorState().read(() => {
+            const next: BlockMenu[] = []
+            for (const child of $getRoot().getChildren()) {
+                if (!$isCodeNode(child)) continue
+                const el = editor.getElementByKey(child.getKey())
+                if (!el) continue
+                const rect = el.getBoundingClientRect()
+                // Skip blocks whose top edge isn't within the visible viewport.
+                if (viewport && (rect.top < viewport.top - 4 || rect.top > viewport.bottom - 10)) {
+                    continue
+                }
+                next.push({
+                    key: child.getKey(),
+                    lang: child.getLanguage() ?? "",
+                    top: rect.top,
+                    right: window.innerWidth - rect.right,
+                })
+            }
+            setMenus(next)
+        })
+    }, [editor])
+
+    useEffect(() => editor.registerUpdateListener(() => recompute()), [editor, recompute])
+
+    useEffect(() => {
+        // Recompute after mount so existing blocks get pickers without an edit. On a cold open the
+        // drawer is still sliding in and the markdown is still hydrating, so the first rects are
+        // stale (the picker would otherwise only appear once some later event nudged a recompute —
+        // e.g. a hover). Re-run across the next frames + a few timeouts to settle on the real rects.
+        recompute()
+        const raf = requestAnimationFrame(recompute)
+        const timers = [60, 180, 360].map((t) => window.setTimeout(recompute, t))
+        const onMove = () => recompute()
+        // capture: the editor scrolls in an inner container, not the window
+        window.addEventListener("scroll", onMove, true)
+        window.addEventListener("resize", onMove)
+        return () => {
+            cancelAnimationFrame(raf)
+            timers.forEach(clearTimeout)
+            window.removeEventListener("scroll", onMove, true)
+            window.removeEventListener("resize", onMove)
+        }
+    }, [recompute])
+
+    const setLanguage = useCallback(
+        (key: string, lang: string) => {
+            editor.update(() => {
+                const node = $getNodeByKey(key)
+                if ($isCodeNode(node)) node.setLanguage(lang)
+            })
+        },
+        [editor],
+    )
+
+    if (!menus.length) return null
+
+    return createPortal(
+        <>
+            {menus.map((m) => (
+                <div
+                    key={m.key}
+                    className={[
+                        "fixed z-[1100] rounded-md bg-[var(--ant-color-bg-elevated)]",
+                        "[&_.ant-select-selector]:!h-6 [&_.ant-select-selector]:!px-2",
+                        "[&_.ant-select-selection-item]:!text-[11px] [&_.ant-select-selection-item]:!leading-6",
+                        "[&_.ant-select-selection-placeholder]:!text-[11px] [&_.ant-select-selection-placeholder]:!leading-6",
+                        "[&_.ant-select-selection-search-input]:!h-6",
+                        // Portaled to <body>, antd sets a serif fallback font on the inner item; make
+                        // it inherit the app font set on the wrapper below.
+                        "[&_.ant-select-selection-item]:!font-[inherit]",
+                        "[&_.ant-select-selection-placeholder]:!font-[inherit]",
+                        "[&_.ant-select-selection-search-input]:!font-[inherit]",
+                    ].join(" ")}
+                    style={{
+                        top: m.top + 7,
+                        right: m.right + 8,
+                        fontFamily: "var(--ant-font-family)",
+                    }}
+                    // Don't let interactions here reach the editor.
+                    onMouseDown={(e) => e.stopPropagation()}
+                >
+                    <Select
+                        showSearch
+                        disabled={!editable}
+                        value={m.lang || undefined}
+                        placeholder="Plain text"
+                        options={options}
+                        onChange={(lang) => setLanguage(m.key, lang)}
+                        optionFilterProp="label"
+                        popupMatchSelectWidth={false}
+                        variant="borderless"
+                        className="min-w-[96px]"
+                        // Show the friendly name ("JavaScript") for the selected value, not the raw id.
+                        labelRender={({value}) =>
+                            value ? getLanguageFriendlyName(String(value)) : "Plain text"
+                        }
+                    />
+                </div>
+            ))}
+        </>,
+        document.body,
+    )
+}
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
index d0b78e3262..6e2d8ce9f4 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsx
@@ -18,7 +18,16 @@
  * Controlled value: seeds from `value` and re-syncs when `value` changes from outside (e.g. a skill
  * upload populating the body), while leaving the cursor alone during local typing.
  */
-import {type CSSProperties, useEffect, useId, useLayoutEffect, useRef, useState} from "react"
+import {
+    type CSSProperties,
+    type DragEvent,
+    useCallback,
+    useEffect,
+    useId,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
 
 import {
     EditorProvider,
@@ -28,8 +37,20 @@ import {
 } from "@agenta/ui"
 import {SharedEditor} from "@agenta/ui/shared-editor"
 import {cn} from "@agenta/ui/styles"
+import {registerCodeHighlighting} from "@lexical/code"
 import {Tag} from "antd"
 
+import {CodeBlockLanguageMenu} from "./CodeBlockLanguageMenu"
+
+// Pure drop predicates — no component state, so they live at module scope (stable identity, no
+// need to thread them through the drag/drop callback deps).
+const isFileDrag = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files")
+const isMarkdownFile = (file: File) =>
+    /\.(md|markdown|mdx|txt)$/i.test(file.name) ||
+    file.type.startsWith("text/") ||
+    file.type === "application/json" ||
+    file.type === ""
+
 type MarkdownView = "source" | "rendered"
 
 export interface MarkdownEditorProps {
@@ -83,6 +104,17 @@ function MarkdownViewSync({enabled}: {enabled: boolean}) {
     return null
 }
 
+/**
+ * Enables Prism syntax highlighting for code blocks in the rich view. The shared editor registers
+ * the CodeNode/CodeHighlightNode types but never turns on the highlighter, so fenced blocks render
+ * as plain monospace until this runs. The token colors come from the `editor-token*` theme classes.
+ */
+function CodeHighlightSync() {
+    const [editor] = useLexicalComposerContext()
+    useEffect(() => registerCodeHighlighting(editor), [editor])
+    return null
+}
+
 export function MarkdownEditor({
     value,
     onChange,
@@ -129,11 +161,52 @@ export function MarkdownEditor({
         }
     }, [value])
 
-    const handleChange = (next: string) => {
-        setText(next)
-        lastExternal.current = next
-        onChange(next)
-    }
+    // Stable so the memoized drop handler below never captures a stale `onChange` — some consumers
+    // (e.g. SkillFormView) pass a fresh inline `onChange` every render.
+    const handleChange = useCallback(
+        (next: string) => {
+            setText(next)
+            lastExternal.current = next
+            onChange(next)
+        },
+        [onChange],
+    )
+
+    // Markdown-file drop: dropping a .md/.markdown/.txt (or any text/* file) onto the editor
+    // replaces its content with the file's text. We intercept in the capture phase and only for
+    // file drags, so Lexical's own internal text drag/drop keeps working.
+    const [dragOver, setDragOver] = useState(false)
+    const dropEnabled = editable && !disabled
+
+    const handleDragOver = useCallback(
+        (e: DragEvent) => {
+            if (!dropEnabled || !isFileDrag(e)) return
+            e.preventDefault()
+            e.stopPropagation()
+            e.dataTransfer.dropEffect = "copy"
+            setDragOver(true)
+        },
+        [dropEnabled],
+    )
+
+    const handleDragLeave = useCallback((e: DragEvent) => {
+        // Ignore leaves into child nodes; only clear when the pointer exits the wrapper.
+        if (e.currentTarget.contains(e.relatedTarget as Node | null)) return
+        setDragOver(false)
+    }, [])
+
+    const handleDrop = useCallback(
+        (e: DragEvent) => {
+            if (!dropEnabled || !isFileDrag(e)) return
+            e.preventDefault()
+            e.stopPropagation()
+            setDragOver(false)
+            const file = Array.from(e.dataTransfer.files).find(isMarkdownFile)
+            if (!file) return
+            void file.text().then((content) => handleChange(content))
+        },
+        [dropEnabled, handleChange],
+    )
 
     const viewToggle = canToggleView ? (
         <button
@@ -202,6 +275,27 @@ export function MarkdownEditor({
         />
     )
 
+    // `md-prose` scopes the document prose styles (Option B) defined in editor-theme.css to these
+    // Markdown editors only, so the shared prompt/chat editor theme is untouched.
+    const body = showToolbar ? (
+        <div
+            className={cn(
+                "flex flex-col overflow-hidden",
+                bordered && "rounded-md border border-solid border-[var(--ag-c-BDC7D1,#bdc7d1)]",
+            )}
+            style={boundStyle}
+        >
+            {toolbar}
+            <div className="md-prose min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
+        </div>
+    ) : boundStyle ? (
+        <div className="md-prose overflow-y-auto" style={boundStyle}>
+            {editorEl}
+        </div>
+    ) : (
+        <div className="md-prose">{editorEl}</div>
+    )
+
     return (
         <EditorProvider
             id={editorId}
@@ -210,26 +304,28 @@ export function MarkdownEditor({
             showToolbar={false}
             disabled={editorDisabled}
         >
-            {showToolbar ? (
+            {dropEnabled ? (
                 <div
-                    className={cn(
-                        "flex flex-col overflow-hidden",
-                        bordered &&
-                            "rounded-md border border-solid border-[var(--ag-c-BDC7D1,#bdc7d1)]",
-                    )}
-                    style={boundStyle}
+                    className="relative"
+                    onDragOverCapture={handleDragOver}
+                    onDragLeaveCapture={handleDragLeave}
+                    onDropCapture={handleDrop}
                 >
-                    {toolbar}
-                    <div className="min-h-0 flex-1 overflow-y-auto">{editorEl}</div>
-                </div>
-            ) : boundStyle ? (
-                <div className="overflow-y-auto" style={boundStyle}>
-                    {editorEl}
+                    {body}
+                    {dragOver ? (
+                        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-[var(--ant-color-primary)] bg-[var(--ant-color-primary-bg,rgba(22,119,255,0.08))]">
+                            <span className="rounded-md bg-[var(--ant-color-bg-elevated,#fff)] px-3 py-1.5 text-xs font-medium text-[var(--ag-c-586673,#586673)] shadow-sm">
+                                Drop a Markdown file to replace the content
+                            </span>
+                        </div>
+                    ) : null}
                 </div>
             ) : (
-                editorEl
+                body
             )}
             <MarkdownViewSync enabled={markdownView} />
+            <CodeHighlightSync />
+            <CodeBlockLanguageMenu editable={!editorDisabled} />
         </EditorProvider>
     )
 }
diff --git a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
index 1d4e0e1867..c515dc2487 100644
--- a/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
+++ b/web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/TriggerManagementSection.tsx
@@ -15,7 +15,7 @@
  *  2. Default-bind — opening a create drawer from this section pre-binds the new trigger
  *     to the current agent via `defaultReferences` (see the trigger drawer atoms).
  */
-import {useCallback, useMemo} from "react"
+import {type ReactNode, useCallback, useMemo} from "react"
 
 import {
     describeCron,
@@ -61,6 +61,8 @@ import TriggerDeliveriesDrawer from "../../gatewayTrigger/drawers/TriggerDeliver
 import TriggerScheduleDrawer from "../../gatewayTrigger/drawers/TriggerScheduleDrawer"
 import TriggerSubscriptionDrawer from "../../gatewayTrigger/drawers/TriggerSubscriptionDrawer"
 
+import {AddTextLink} from "./AddTextLink"
+
 export interface TriggerManagementSectionProps {
     /** The open agent's revision id (the drill-in entityId). */
     entityId: string | null
@@ -492,10 +494,15 @@ export function TriggerManagementSection({entityId, disabled}: TriggerManagement
     return (
         <div className="flex flex-col gap-2">
             {count === 0 ? (
-                <Typography.Text type="secondary" className="text-xs">
-                    No triggers yet. Add an app trigger or a schedule to run this agent
-                    automatically.
-                </Typography.Text>
+                !disabled ? (
+                    <span className="text-xs text-[var(--ag-c-97A4B0,#97a4b0)]">
+                        No triggers yet —{" "}
+                        <AddTriggerDropdown
+                            entityId={entityId}
+                            trigger={<AddTextLink label="add a trigger" />}
+                        />
+                    </span>
+                ) : null
             ) : (
                 <div className="flex flex-col gap-2">
                     {scopedSchedules.map((record) => {
@@ -574,7 +581,14 @@ export function TriggerManagementSection({entityId, disabled}: TriggerManagement
  * the current agent). Kept separate from the section body because the accordion renders
  * `extra` outside the section content.
  */
-export function AddTriggerDropdown({entityId}: {entityId: string | null}) {
+export function AddTriggerDropdown({
+    entityId,
+    trigger,
+}: {
+    entityId: string | null
+    /** Custom trigger element (e.g. an inline text-link for an empty state). Defaults to a `+`. */
+    trigger?: ReactNode
+}) {
     const {defaultReferences, defaultBoundLabel} = useAgentTriggers(entityId)
     const openCatalog = useSetAtom(triggerCatalogDrawerOpenAtom)
     const openScheduleDrawer = useSetAtom(triggerScheduleDrawerAtom)
@@ -614,14 +628,16 @@ export function AddTriggerDropdown({entityId}: {entityId: string | null}) {
 
     return (
         <Dropdown trigger={["click"]} menu={{items}} styles={{root: {width: 200}}}>
-            <Tooltip title="Add trigger">
-                <Button
-                    type="text"
-                    icon={<Plus size={16} />}
-                    aria-label="Add trigger"
-                    onClick={(e) => e.stopPropagation()}
-                />
-            </Tooltip>
+            {trigger ?? (
+                <Tooltip title="Add trigger">
+                    <Button
+                        type="text"
+                        icon={<Plus size={16} />}
+                        aria-label="Add trigger"
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </Tooltip>
+            )}
         </Dropdown>
     )
 }
diff --git a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
index 22a227de43..6dbc0d3498 100644
--- a/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
+++ b/web/packages/agenta-ui/src/Editor/MarkdownToolbar.tsx
@@ -2,12 +2,18 @@
  * MarkdownToolbar
  *
  * A formatting toolbar for the rich-text Lexical editor: heading, bold, italic, lists, link, inline
- * code, and quote. It reads the editor from composer context, so it must render inside an
+ * code, quote, and tables. It reads the editor from composer context, so it must render inside an
  * `EditorProvider` (e.g. mounted by `MarkdownEditor` above the editor). Formatting applies to the
  * rich-text (rendered) view; pass `disabled` while the editor shows raw Markdown source.
+ *
+ * The link button opens a small popover that asks for the URL (and removes the link when one is
+ * already under the caret) instead of blindly applying a placeholder. The table button opens a
+ * size picker to insert a table; when the caret is inside a table, a second menu exposes row/column
+ * insert + delete operations (mirroring the Lexical playground's table controls).
  */
 import {type ReactNode, useCallback, useEffect, useState} from "react"
 
+import {$createCodeNode, $isCodeNode} from "@lexical/code"
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from "@lexical/link"
 import {INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode} from "@lexical/list"
 import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"
@@ -18,8 +24,19 @@ import {
     $isQuoteNode,
 } from "@lexical/rich-text"
 import {$setBlocksType} from "@lexical/selection"
+import {
+    $deleteTableColumnAtSelection,
+    $deleteTableRowAtSelection,
+    $getTableCellNodeFromLexicalNode,
+    $getTableNodeFromLexicalNodeOrThrow,
+    $insertTableColumnAtSelection,
+    $insertTableRowAtSelection,
+    INSERT_TABLE_COMMAND,
+} from "@lexical/table"
 import {$getNearestNodeOfType} from "@lexical/utils"
+import {Button, Dropdown, Input, type MenuProps, Popover} from "antd"
 import {
+    $createParagraphNode,
     $getSelection,
     $isRangeSelection,
     type ElementNode,
@@ -28,32 +45,97 @@ import {
 } from "lexical"
 import {
     Bold,
-    Code,
-    Heading2,
+    ChevronDown,
     Italic,
     Link as LinkIcon,
     List,
     ListOrdered,
-    Quote,
+    Table as TableIcon,
+    Unlink,
 } from "lucide-react"
 
+const BLOCK_TYPES = [
+    {key: "paragraph", label: "Normal text"},
+    {key: "h1", label: "Heading 1"},
+    {key: "h2", label: "Heading 2"},
+    {key: "h3", label: "Heading 3"},
+    {key: "quote", label: "Quote"},
+    {key: "code", label: "Code block"},
+] as const
+
 export interface MarkdownToolbarProps {
     /** Disable the buttons (e.g. while the editor shows raw Markdown source or is read-only). */
     disabled?: boolean
 }
 
+const BTN_BASE =
+    "flex h-7 w-7 items-center justify-center rounded border-0 bg-transparent transition-colors"
+const btnClass = (disabled: boolean, isActive: boolean) =>
+    [
+        BTN_BASE,
+        disabled
+            ? "cursor-not-allowed text-[var(--ag-c-97A4B0,#97a4b0)] opacity-50"
+            : "cursor-pointer text-[var(--ag-c-586673,#586673)] hover:bg-[var(--ag-c-EAEFF5,#eaeff5)]",
+        isActive ? "bg-[var(--ag-c-EAEFF5,#eaeff5)] !text-[var(--ag-c-1677FF,#1677ff)]" : "",
+    ].join(" ")
+
+/** A compact rows×cols grid the user hovers to pick a table size, like Notion / the Lexical demo. */
+function TableSizePicker({onPick}: {onPick: (rows: number, cols: number) => void}) {
+    const MAX = 6
+    const [hover, setHover] = useState({rows: 0, cols: 0})
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div
+                className="grid w-fit gap-0.5"
+                style={{gridTemplateColumns: `repeat(${MAX}, 1fr)`}}
+                onMouseLeave={() => setHover({rows: 0, cols: 0})}
+            >
+                {Array.from({length: MAX * MAX}, (_, i) => {
+                    const r = Math.floor(i / MAX) + 1
+                    const c = (i % MAX) + 1
+                    const on = r <= hover.rows && c <= hover.cols
+                    return (
+                        <button
+                            key={i}
+                            type="button"
+                            aria-label={`${r} by ${c}`}
+                            onMouseEnter={() => setHover({rows: r, cols: c})}
+                            onMouseDown={(e) => e.preventDefault()}
+                            onClick={() => onPick(r, c)}
+                            className={[
+                                "h-4 w-4 rounded-[2px] border border-solid transition-colors",
+                                on
+                                    ? "border-[var(--ant-color-primary)] bg-[var(--ant-color-primary)]"
+                                    : "border-[var(--ant-color-border)] bg-[var(--ant-color-fill-quaternary)]",
+                            ].join(" ")}
+                        />
+                    )
+                })}
+            </div>
+            <span className="text-center text-[11px] text-[var(--ag-c-97A4B0,#97a4b0)]">
+                {hover.rows > 0 ? `${hover.rows} × ${hover.cols}` : "Insert table"}
+            </span>
+        </div>
+    )
+}
+
 export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
     const [editor] = useLexicalComposerContext()
     const [active, setActive] = useState({
         bold: false,
         italic: false,
-        code: false,
-        heading: false,
-        quote: false,
         bullet: false,
         ordered: false,
         link: false,
+        insideTable: false,
     })
+    // The current block type (paragraph / h1-h3 / quote / code), shown in the block-type menu.
+    const [blockType, setBlockType] = useState<string>("paragraph")
+    // The URL under the caret (empty when not on a link), seeded into the link popover.
+    const [linkUrl, setLinkUrl] = useState("")
+    const [linkOpen, setLinkOpen] = useState(false)
+    const [linkDraft, setLinkDraft] = useState("")
+    const [tableOpen, setTableOpen] = useState(false)
 
     useEffect(() => {
         return editor.registerUpdateListener(({editorState}) => {
@@ -65,15 +147,28 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 const listNode = $getNearestNodeOfType(anchorNode, ListNode)
                 const listType = listNode ? listNode.getListType() : null
                 const parent = anchorNode.getParent()
+                const linkNode = $isLinkNode(anchorNode)
+                    ? anchorNode
+                    : $isLinkNode(parent)
+                      ? parent
+                      : null
+                setLinkUrl(linkNode ? linkNode.getURL() : "")
+                setBlockType(
+                    block && $isHeadingNode(block)
+                        ? block.getTag()
+                        : block && $isQuoteNode(block)
+                          ? "quote"
+                          : block && $isCodeNode(block)
+                            ? "code"
+                            : "paragraph",
+                )
                 setActive({
                     bold: selection.hasFormat("bold"),
                     italic: selection.hasFormat("italic"),
-                    code: selection.hasFormat("code"),
-                    heading: $isHeadingNode(block),
-                    quote: $isQuoteNode(block),
                     bullet: listType === "bullet",
                     ordered: listType === "number",
-                    link: $isLinkNode(anchorNode) || $isLinkNode(parent),
+                    link: Boolean(linkNode),
+                    insideTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null,
                 })
             })
         })
@@ -94,6 +189,103 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
         [editor],
     )
 
+    // Convert the current block to the chosen type. Headings/quote/paragraph go through
+    // `$setBlocksType`; the markdown serializer maps them back to `#`, `>` and fenced blocks.
+    // Code is special: with a multi-line selection, `$setBlocksType` makes one code node per line
+    // (the stacked-chips bug), so mirror the Lexical playground — insert one code node and write
+    // the text back with its line breaks preserved as code lines.
+    const formatBlock = useCallback(
+        (key: string) => {
+            if (key === "code") {
+                editor.update(() => {
+                    const selection = $getSelection()
+                    if (!$isRangeSelection(selection)) return
+                    if (selection.isCollapsed()) {
+                        $setBlocksType(selection, () => $createCodeNode())
+                    } else {
+                        const text = selection.getTextContent()
+                        selection.insertNodes([$createCodeNode()])
+                        const next = $getSelection()
+                        if ($isRangeSelection(next)) next.insertRawText(text)
+                    }
+                })
+                return
+            }
+            if (key === "quote") setBlock(() => $createQuoteNode())
+            else if (key === "h1" || key === "h2" || key === "h3")
+                setBlock(() => $createHeadingNode(key))
+            else setBlock(() => $createParagraphNode())
+        },
+        [editor, setBlock],
+    )
+
+    // Apply / clear the link on the current selection. The editor keeps its last RangeSelection
+    // while focus sits in the popover input, so the command still targets the selected text.
+    const applyLink = useCallback(() => {
+        const url = linkDraft.trim()
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, url || null)
+        setLinkOpen(false)
+    }, [editor, linkDraft])
+
+    const removeLink = useCallback(() => {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+        setLinkOpen(false)
+    }, [editor])
+
+    const insertTable = useCallback(
+        (rows: number, cols: number) => {
+            editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+                rows: String(rows),
+                columns: String(cols),
+                includeHeaders: true,
+            })
+            setTableOpen(false)
+        },
+        [editor],
+    )
+
+    const runTableOp = useCallback((op: () => void) => editor.update(op), [editor])
+
+    const tableMenu: MenuProps = {
+        onClick: ({key, domEvent}) => {
+            domEvent.preventDefault()
+            switch (key) {
+                case "row-above":
+                    return runTableOp(() => $insertTableRowAtSelection(false))
+                case "row-below":
+                    return runTableOp(() => $insertTableRowAtSelection(true))
+                case "col-left":
+                    return runTableOp(() => $insertTableColumnAtSelection(false))
+                case "col-right":
+                    return runTableOp(() => $insertTableColumnAtSelection(true))
+                case "del-row":
+                    return runTableOp(() => $deleteTableRowAtSelection())
+                case "del-col":
+                    return runTableOp(() => $deleteTableColumnAtSelection())
+                case "del-table":
+                    return runTableOp(() => {
+                        const sel = $getSelection()
+                        if (!$isRangeSelection(sel)) return
+                        const cell = $getTableCellNodeFromLexicalNode(sel.anchor.getNode())
+                        if (!cell) return
+                        $getTableNodeFromLexicalNodeOrThrow(cell).remove()
+                    })
+                default:
+                    return undefined
+            }
+        },
+        items: [
+            {key: "row-above", label: "Insert row above"},
+            {key: "row-below", label: "Insert row below"},
+            {key: "col-left", label: "Insert column left"},
+            {key: "col-right", label: "Insert column right"},
+            {type: "divider"},
+            {key: "del-row", label: "Delete row"},
+            {key: "del-col", label: "Delete column"},
+            {key: "del-table", label: "Delete table", danger: true},
+        ],
+    }
+
     const button = (
         key: string,
         label: string,
@@ -112,31 +304,52 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
             // text instead of being lost when the button steals focus.
             onMouseDown={(e) => e.preventDefault()}
             onClick={onClick}
-            className={[
-                "flex h-7 w-7 items-center justify-center rounded border-0 bg-transparent transition-colors",
-                disabled
-                    ? "cursor-not-allowed text-[var(--ag-c-97A4B0,#97a4b0)] opacity-50"
-                    : "cursor-pointer text-[var(--ag-c-586673,#586673)] hover:bg-[var(--ag-c-EAEFF5,#eaeff5)]",
-                isActive
-                    ? "bg-[var(--ag-c-EAEFF5,#eaeff5)] !text-[var(--ag-c-1677FF,#1677ff)]"
-                    : "",
-            ].join(" ")}
+            className={btnClass(disabled, isActive)}
         >
             {icon}
         </button>
     )
 
+    const divider = (
+        <span className="mx-0.5 h-4 w-px shrink-0 bg-[var(--ag-c-EAEFF5,#eaeff5)]" aria-hidden />
+    )
+
+    const blockLabel = BLOCK_TYPES.find((b) => b.key === blockType)?.label ?? "Normal text"
+
     return (
         <div className="flex items-center gap-0.5">
-            {button(
-                "h",
-                "Heading",
-                <Heading2 size={15} />,
-                () => setBlock(() => $createHeadingNode("h2")),
-                active.heading,
-            )}
+            {/* Block type — paragraph / headings / quote / code block. */}
+            <Dropdown
+                disabled={disabled}
+                trigger={["click"]}
+                placement="bottomLeft"
+                menu={{
+                    selectable: true,
+                    selectedKeys: [blockType],
+                    items: BLOCK_TYPES.map((b) => ({key: b.key, label: b.label})),
+                    onClick: ({key, domEvent}) => {
+                        domEvent.preventDefault()
+                        formatBlock(key)
+                    },
+                }}
+            >
+                <button
+                    type="button"
+                    title="Text style"
+                    aria-label="Text style"
+                    disabled={disabled}
+                    onMouseDown={(e) => e.preventDefault()}
+                    className={`${btnClass(disabled, false)} !w-auto min-w-[88px] justify-between gap-1 px-2 text-xs`}
+                >
+                    <span className="truncate">{blockLabel}</span>
+                    <ChevronDown size={13} className="shrink-0" />
+                </button>
+            </Dropdown>
+
+            {divider}
             {button("b", "Bold", <Bold size={15} />, () => formatText("bold"), active.bold)}
             {button("i", "Italic", <Italic size={15} />, () => formatText("italic"), active.italic)}
+            {divider}
             {button(
                 "ul",
                 "Bulleted list",
@@ -151,21 +364,96 @@ export function MarkdownToolbar({disabled = false}: MarkdownToolbarProps) {
                 () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
                 active.ordered,
             )}
-            {button(
-                "link",
-                "Link",
-                <LinkIcon size={15} />,
-                // Toggle: on an existing link, dispatch null to remove it; otherwise seed a new link.
-                () => editor.dispatchCommand(TOGGLE_LINK_COMMAND, active.link ? null : "https://"),
-                active.link,
-            )}
-            {button("code", "Code", <Code size={15} />, () => formatText("code"), active.code)}
-            {button(
-                "quote",
-                "Quote",
-                <Quote size={15} />,
-                () => setBlock(() => $createQuoteNode()),
-                active.quote,
+            {divider}
+
+            {/* Link — popover asks for the URL (and removes an existing link). */}
+            <Popover
+                open={disabled ? false : linkOpen}
+                onOpenChange={(next) => {
+                    setLinkOpen(next)
+                    if (next) setLinkDraft(linkUrl)
+                }}
+                trigger="click"
+                placement="bottom"
+                destroyTooltipOnHide
+                content={
+                    <div className="flex w-60 flex-col gap-2">
+                        <Input
+                            autoFocus
+                            value={linkDraft}
+                            placeholder="https://example.com"
+                            onChange={(e) => setLinkDraft(e.target.value)}
+                            onPressEnter={applyLink}
+                        />
+                        <div className="flex items-center justify-between gap-2">
+                            {active.link ? (
+                                <Button
+                                    type="text"
+                                    size="small"
+                                    danger
+                                    icon={<Unlink size={13} />}
+                                    onClick={removeLink}
+                                >
+                                    Remove
+                                </Button>
+                            ) : (
+                                <span />
+                            )}
+                            <Button type="primary" size="small" onClick={applyLink}>
+                                {active.link ? "Update" : "Add link"}
+                            </Button>
+                        </div>
+                    </div>
+                }
+            >
+                <button
+                    type="button"
+                    title="Link"
+                    aria-label="Link"
+                    aria-pressed={active.link}
+                    disabled={disabled}
+                    onMouseDown={(e) => e.preventDefault()}
+                    className={btnClass(disabled, active.link)}
+                >
+                    <LinkIcon size={15} />
+                </button>
+            </Popover>
+
+            {/* Table — one control: inside a table it opens the row/column ops menu; otherwise a
+                size picker to insert one. The chevron signals the menu when the caret is in a table. */}
+            {active.insideTable && !disabled ? (
+                <Dropdown menu={tableMenu} trigger={["click"]} placement="bottomLeft">
+                    <button
+                        type="button"
+                        title="Table options"
+                        aria-label="Table options"
+                        onMouseDown={(e) => e.preventDefault()}
+                        className={`${btnClass(false, false)} !w-auto gap-0.5 px-1`}
+                    >
+                        <TableIcon size={15} />
+                        <ChevronDown size={12} />
+                    </button>
+                </Dropdown>
+            ) : (
+                <Popover
+                    open={disabled ? false : tableOpen}
+                    onOpenChange={setTableOpen}
+                    trigger="click"
+                    placement="bottom"
+                    destroyTooltipOnHide
+                    content={<TableSizePicker onPick={insertTable} />}
+                >
+                    <button
+                        type="button"
+                        title="Insert table"
+                        aria-label="Insert table"
+                        disabled={disabled}
+                        onMouseDown={(e) => e.preventDefault()}
+                        className={btnClass(disabled, false)}
+                    >
+                        <TableIcon size={15} />
+                    </button>
+                </Popover>
             )}
         </div>
     )
diff --git a/web/packages/agenta-ui/src/MarkdownPreview.tsx b/web/packages/agenta-ui/src/MarkdownPreview.tsx
index 698fee4d66..a4db2e2e52 100644
--- a/web/packages/agenta-ui/src/MarkdownPreview.tsx
+++ b/web/packages/agenta-ui/src/MarkdownPreview.tsx
@@ -15,17 +15,29 @@ export interface MarkdownPreviewProps {
     className?: string
 }
 
-// Compact prose styling for rendered Markdown elements.
+// "Option B — comfortable" prose styling for rendered Markdown, kept in sync with the document
+// editor's `.md-prose` rules in editor-theme.css. Uses antd semantic tokens so it adapts to dark
+// mode. (This renderer is for inline summaries/previews; the drawer's edit + preview panes render
+// through the Lexical editor and pick up the `.md-prose` CSS instead.)
 const MD_CLASS = [
-    "text-xs leading-relaxed",
+    "text-[13px] leading-[1.6] text-[var(--ant-color-text)]",
     "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-    "[&_h1]:text-sm [&_h1]:font-medium [&_h2]:text-xs [&_h2]:font-medium [&_h3]:text-xs [&_h3]:font-medium",
-    "[&_p]:my-1",
-    "[&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5",
-    "[&_a]:text-[var(--ag-c-1677FF)] [&_a]:underline",
-    "[&_code]:font-mono [&_code]:text-[0.9em]",
-    "[&_blockquote]:border-l-2 [&_blockquote]:border-solid [&_blockquote]:border-[var(--ag-c-EAEFF5)] [&_blockquote]:pl-2 [&_blockquote]:text-[var(--ag-c-97A4B0)]",
-    "[&_pre]:overflow-x-auto",
+    "[&_h1]:text-[20px] [&_h1]:font-semibold [&_h1]:mt-[18px] [&_h1]:mb-1.5 [&_h1]:leading-tight",
+    "[&_h2]:text-[16px] [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-1.5",
+    "[&_h3]:text-[14px] [&_h3]:font-semibold [&_h3]:mt-3.5 [&_h3]:mb-1",
+    "[&_h4]:text-[13px] [&_h4]:font-semibold [&_h4]:text-[var(--ant-color-text-secondary)]",
+    "[&_p]:my-2",
+    "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
+    // Per-depth list markers, matching the editor + the Lexical playground (1 → A → a, • → ◦ → ▪).
+    "[&_ol_ol]:list-[upper-alpha] [&_ol_ol_ol]:list-[lower-alpha] [&_ol_ol_ol_ol]:list-[upper-roman] [&_ol_ol_ol_ol_ol]:list-[lower-roman] [&_ul_ul]:list-[circle] [&_ul_ul_ul]:list-[square]",
+    "[&_a]:text-[var(--ant-color-primary)] [&_a]:underline",
+    "[&_code]:font-mono [&_code]:text-[0.86em] [&_code]:bg-[var(--ant-color-fill-tertiary)] [&_code]:border [&_code]:border-solid [&_code]:border-[var(--ant-color-border-secondary)] [&_code]:rounded [&_code]:px-1.5 [&_code]:py-px",
+    "[&_pre]:my-2.5 [&_pre]:bg-[var(--ant-color-fill-quaternary)] [&_pre]:border [&_pre]:border-solid [&_pre]:border-[var(--ant-color-border-secondary)] [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto",
+    "[&_pre_code]:border-0 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[12px]",
+    "[&_blockquote]:my-2.5 [&_blockquote]:border-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-solid [&_blockquote]:border-[var(--ant-color-border)] [&_blockquote]:pl-3.5 [&_blockquote]:italic [&_blockquote]:text-[var(--ant-color-text-secondary)]",
+    "[&_table]:my-2.5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-xs",
+    "[&_th]:border-0 [&_th]:border-b [&_th]:border-solid [&_th]:border-[var(--ant-color-border)] [&_th]:bg-[var(--ant-color-fill-tertiary)] [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-medium",
+    "[&_td]:border-0 [&_td]:border-b [&_td]:border-solid [&_td]:border-[var(--ant-color-border-secondary)] [&_td]:px-2.5 [&_td]:py-1.5",
 ].join(" ")
 
 export function MarkdownPreview({content, className}: MarkdownPreviewProps) {