diff --git a/package.json b/package.json
index 8d2913d..70107ae 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@sentry/nextjs": "^10.66.0",
     "clsx": "^2.1.1",
     "jose": "^6.2.3",
+    "marked": "^18.0.6",
     "next": "^16.0.0",
     "paymongo": "^1.3.2",
     "pg": "^8.22.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9909fd2..90cefc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       jose:
         specifier: ^6.2.3
         version: 6.2.3
+      marked:
+        specifier: ^18.0.6
+        version: 18.0.6
       next:
         specifier: ^16.0.0
         version: 16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -3106,6 +3109,11 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  marked@18.0.6:
+    resolution: {integrity: sha512-MrV5puXBfuiy6wl6DLaq3BtIJQAJToAd5zt/ZKhRfGRAuFPALE7/4Y7jnxRQoEgK/pBgurGqLyAuRgZ2xOjr6w==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -7277,6 +7285,8 @@ snapshots:
     dependencies:
       semver: 7.8.5
 
+  marked@18.0.6: {}
+
   math-intrinsics@1.1.0: {}
 
   media-engine@1.0.3: {}
diff --git a/src/app/(dashboard)/courses/[courseSlug]/lessons/[lessonSlug]/lesson.module.css b/src/app/(dashboard)/courses/[courseSlug]/lessons/[lessonSlug]/lesson.module.css
index 50f1666..5678453 100644
--- a/src/app/(dashboard)/courses/[courseSlug]/lessons/[lessonSlug]/lesson.module.css
+++ b/src/app/(dashboard)/courses/[courseSlug]/lessons/[lessonSlug]/lesson.module.css
@@ -77,6 +77,42 @@
   padding: 0;
 }
 
+.lessonBody a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.lessonBody a:hover {
+  color: var(--accent-strong, var(--accent));
+}
+
+.lessonBody img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+  margin: var(--space-4) 0;
+}
+
+.lessonBody table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-4) 0;
+  font-size: var(--text-sm);
+}
+
+.lessonBody th,
+.lessonBody td {
+  border: 1px solid var(--border);
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+}
+
+.lessonBody th {
+  background: var(--surface-2);
+  font-weight: 600;
+  color: var(--ink-900);
+}
+
 .actions {
   margin: var(--space-8) 0;
   display: flex;
diff --git a/src/lib/__tests__/mdx.test.ts b/src/lib/__tests__/mdx.test.ts
index ea43a51..eaabd90 100644
--- a/src/lib/__tests__/mdx.test.ts
+++ b/src/lib/__tests__/mdx.test.ts
@@ -3,33 +3,34 @@ import { renderLesson } from '@/lib/mdx';
 
 describe('mdx.ts — renderLesson', () => {
   it('renders plain text as a paragraph', () => {
-    expect(renderLesson('Hello world')).toBe('<p>Hello world</p>');
+    expect(renderLesson('Hello world').trim()).toBe('<p>Hello world</p>');
   });
 
   it('renders multiple paragraphs separated by blank lines', () => {
-    const input = 'First paragraph.\n\nSecond paragraph.';
-    const result = renderLesson(input);
+    const result = renderLesson('First paragraph.\n\nSecond paragraph.');
     expect(result).toContain('<p>First paragraph.</p>');
     expect(result).toContain('<p>Second paragraph.</p>');
   });
 
   it('renders headings h1 through h4', () => {
-    expect(renderLesson('# Title')).toBe('<h1>Title</h1>');
-    expect(renderLesson('## Section')).toBe('<h2>Section</h2>');
-    expect(renderLesson('### Subsection')).toBe('<h3>Subsection</h3>');
-    expect(renderLesson('#### Detail')).toBe('<h4>Detail</h4>');
+    expect(renderLesson('# Title').trim()).toBe('<h1>Title</h1>');
+    expect(renderLesson('## Section').trim()).toBe('<h2>Section</h2>');
+    expect(renderLesson('### Subsection').trim()).toBe('<h3>Subsection</h3>');
+    expect(renderLesson('#### Detail').trim()).toBe('<h4>Detail</h4>');
   });
 
   it('renders bold text', () => {
-    expect(renderLesson('This is **bold** text')).toBe('<p>This is <strong>bold</strong> text</p>');
+    expect(renderLesson('This is **bold** text')).toContain('This is <strong>bold</strong> text');
   });
 
   it('renders italic text', () => {
-    expect(renderLesson('This is *italic* text')).toBe('<p>This is <em>italic</em> text</p>');
+    expect(renderLesson('This is *italic* text')).toContain('This is <em>italic</em> text');
   });
 
   it('renders inline code', () => {
-    expect(renderLesson('Use the `renderLesson` function')).toBe('<p>Use the <code>renderLesson</code> function</p>');
+    expect(renderLesson('Use the `renderLesson` function')).toContain(
+      'Use the <code>renderLesson</code> function'
+    );
   });
 
   it('renders code blocks', () => {
@@ -51,25 +52,117 @@ describe('mdx.ts — renderLesson', () => {
     expect(result).toContain('</ul>');
   });
 
-  it('renders blockquotes', () => {
-    expect(renderLesson('> A wise quote')).toBe('<blockquote>A wise quote</blockquote>');
+  it('renders ordered lists', () => {
+    const input = '1. First\n2. Second\n3. Third';
+    const result = renderLesson(input);
+    expect(result).toContain('<ol>');
+    expect(result).toContain('<li>First</li>');
+    expect(result).toContain('<li>Second</li>');
+    expect(result).toContain('<li>Third</li>');
+    expect(result).toContain('</ol>');
+  });
+
+  it('renders nested lists (ordered list with nested unordered sub-items)', () => {
+    // Matches the decision-flowchart pattern used in the search-term-triage lessons.
+    const input =
+      '1. **Is it relevant?**\n   - No -> Add Negative\n   - Yes -> Continue\n' +
+      '     - Nested -> Deep item';
+    const result = renderLesson(input);
+    expect(result).toContain('<ol>');
+    expect(result).toContain('<strong>Is it relevant?</strong>');
+    expect(result).toContain('No -&gt; Add Negative');
+    // Two levels of nested <ul> for the sub-item and sub-sub-item.
+    expect(result.match(/<ul>/g)?.length).toBe(2);
+  });
+
+  it('renders tables', () => {
+    const input = '| Metric | Target |\n|---|---|\n| ACoS | 25% |\n| ROAS | 4.0 |';
+    const result = renderLesson(input);
+    expect(result).toContain('<table>');
+    expect(result).toContain('<th>Metric</th>');
+    expect(result).toContain('<th>Target</th>');
+    expect(result).toContain('<td>ACoS</td>');
+    expect(result).toContain('<td>25%</td>');
+    expect(result).toContain('</table>');
+  });
+
+  it('renders links with safe schemes', () => {
+    const result = renderLesson('[Amazon Ads help](https://advertising.amazon.com/help/foo)');
+    expect(result).toContain('<a href="https://advertising.amazon.com/help/foo"');
+    expect(result).toContain('rel="noopener noreferrer"');
+    expect(result).toContain('>Amazon Ads help</a>');
+  });
+
+  it('renders relative and anchor links', () => {
+    expect(renderLesson('[next lesson](/courses/foo/lessons/bar)')).toContain(
+      'href="/courses/foo/lessons/bar"'
+    );
+    expect(renderLesson('[jump](#section)')).toContain('href="#section"');
+  });
+
+  it('strips unsafe link schemes down to plain text', () => {
+    const result = renderLesson('[click me](javascript:alert(1))');
+    expect(result).not.toContain('<a ');
+    expect(result).not.toContain('javascript:');
+    expect(result).toContain('click me');
+  });
+
+  it('renders images with safe schemes', () => {
+    const result = renderLesson('![Campaign structure diagram](https://example.com/diagram.png)');
+    expect(result).toContain('<img src="https://example.com/diagram.png"');
+    expect(result).toContain('alt="Campaign structure diagram"');
+  });
+
+  it('drops images with unsafe schemes down to alt text', () => {
+    const result = renderLesson('![bad](javascript:alert(1))');
+    expect(result).not.toContain('<img');
+    expect(result).toContain('bad');
+  });
+
+  it('renders single-line blockquotes', () => {
+    expect(renderLesson('> A wise quote')).toContain('<blockquote>');
+    expect(renderLesson('> A wise quote')).toContain('A wise quote');
+  });
+
+  it('renders multi-line blockquote callouts with a nested list as one block', () => {
+    // Matches the "🎯 Analogy" / "📌 Key Takeaway" callout pattern used throughout lessons.
+    const input =
+      '> 🎯 **Analogy**: Three ways to pay for a taxi:\n' +
+      '> - **Fixed Bids** = flat-rate ride share\n' +
+      '> - **Dynamic** = surge pricing';
+    const result = renderLesson(input);
+    expect(result.match(/<blockquote>/g)?.length).toBe(1);
+    expect(result).toContain('<strong>Analogy</strong>');
+    expect(result).toContain('<li><strong>Fixed Bids</strong> = flat-rate ride share</li>');
   });
 
   it('renders horizontal rules', () => {
-    expect(renderLesson('---')).toBe('<hr />');
-    expect(renderLesson('***')).toBe('<hr />');
+    expect(renderLesson('---')).toContain('<hr>');
+    expect(renderLesson('***')).toContain('<hr>');
   });
 
-  it('HTML-escapes dangerous characters', () => {
+  it('escapes raw HTML blocks instead of passing them through', () => {
     const result = renderLesson('<script>alert("xss")</script>');
     expect(result).not.toContain('<script>');
     expect(result).toContain('&lt;script&gt;');
   });
 
+  it('escapes raw inline HTML tags instead of passing them through', () => {
+    const result = renderLesson('Some text with <b>raw html</b> inline.');
+    expect(result).not.toContain('<b>raw html</b>');
+    expect(result).toContain('&lt;b&gt;');
+  });
+
+  it('HTML-escapes dangerous characters in plain text', () => {
+    const result = renderLesson('Compare A < B and C > D');
+    expect(result).toContain('&lt;');
+    expect(result).toContain('&gt;');
+  });
+
   it('handles combined formatting', () => {
     const result = renderLesson('# Welcome\n\nThis is **bold** and *italic* with `code`.');
     expect(result).toContain('<h1>Welcome</h1>');
-    expect(result).toContain('<p>This is <strong>bold</strong> and <em>italic</em> with <code>code</code>.</p>');
+    expect(result).toContain('This is <strong>bold</strong> and <em>italic</em> with <code>code</code>.');
   });
 
   it('handles unclosed code block by closing at end', () => {
@@ -82,11 +175,7 @@ describe('mdx.ts — renderLesson', () => {
   });
 
   it('returns empty string for empty input', () => {
-    expect(renderLesson('')).toBe('');
-  });
-
-  it('trims leading/trailing whitespace per line', () => {
-    expect(renderLesson('  Hello   world  ')).toBe('<p>Hello   world</p>');
+    expect(renderLesson('').trim()).toBe('');
   });
 
   it('handles mixed list items with asterisk', () => {
diff --git a/src/lib/mdx.ts b/src/lib/mdx.ts
index 80ca499..bea5e93 100644
--- a/src/lib/mdx.ts
+++ b/src/lib/mdx.ts
@@ -1,22 +1,20 @@
 /**
- * Lightweight MDX → HTML renderer.
+ * MDX (markdown subset) -> HTML renderer for lesson content.
  *
- * Handles the markdown subset we use in lessons:
- *   - Headings (# ## ### ####)
- *   - Paragraphs
- *   - Bold/italic (**text**, *text*)
- *   - Inline code (`code`) and code blocks (```)
- *   - Bullet lists (- item)
- *   - Blockquotes (> text)
- *   - Horizontal rules (---)
+ * Backed by `marked` (CommonMark + GFM) so lessons can use tables, ordered
+ * and nested lists, links, and images, none of which the hand-rolled
+ * predecessor of this module supported.
  *
- * No JSX components — pure markdown. For interactive components
- * (e.g., drag-drop simulations) we'll need a real MDX setup, but the
- * current AMPH content is markdown-only.
+ * No JSX/component support — pure markdown. Interactive components would
+ * need a real MDX compile step; current AMPH content is markdown-only.
  *
- * Security: all output is HTML-escaped. No raw HTML passes through.
+ * Security: raw HTML (block or inline) is escaped rather than passed
+ * through, and link/image URLs are restricted to http(s), mailto, and
+ * relative/anchor paths — everything else is dropped to its text content.
  */
 
+import { Marked, type Tokens } from 'marked';
+
 function escapeHtml(text: string): string {
   return text
     .replace(/&/g, '&amp;')
@@ -26,122 +24,40 @@ function escapeHtml(text: string): string {
     .replace(/'/g, '&#39;');
 }
 
-function renderInline(text: string): string {
-  let out = escapeHtml(text);
-  // Bold
-  out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-  // Italic
-  out = out.replace(/(?<!\w)\*([^*]+)\*(?!\w)/g, '<em>$1</em>');
-  // Inline code
-  out = out.replace(/`([^`]+)`/g, '<code>$1</code>');
-  return out;
-}
-
-export function renderLesson(markdown: string): string {
-  const lines = markdown.split('\n');
-  const html: string[] = [];
-  let inCodeBlock = false;
-  let codeBuffer: string[] = [];
-  let inList = false;
-  let inParagraph = false;
-  let paragraphBuffer: string[] = [];
-
-  function flushParagraph() {
-    if (paragraphBuffer.length > 0) {
-      const text = paragraphBuffer.join(' ').trim();
-      if (text) {
-        html.push(`<p>${renderInline(text)}</p>`);
-      }
-      paragraphBuffer = [];
-    }
-    inParagraph = false;
-  }
-
-  function flushList() {
-    if (inList) {
-      html.push('</ul>');
-      inList = false;
-    }
-  }
-
-  for (const line of lines) {
-    // Code blocks
-    if (line.trim().startsWith('```')) {
-      flushParagraph();
-      flushList();
-      if (inCodeBlock) {
-        html.push(`<pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre>`);
-        inCodeBlock = false;
-        codeBuffer = [];
-      } else {
-        inCodeBlock = true;
-        codeBuffer = [];
-      }
-      continue;
-    }
-    if (inCodeBlock) {
-      codeBuffer.push(line);
-      continue;
-    }
-
-    // Headings
-    const headingMatch = line.match(/^(#{1,4})\s+(.+)$/);
-    if (headingMatch && headingMatch[1] && headingMatch[2]) {
-      flushParagraph();
-      flushList();
-      const level = headingMatch[1].length;
-      const text = renderInline(headingMatch[2].trim());
-      html.push(`<h${level}>${text}</h${level}>`);
-      continue;
-    }
-
-    // Horizontal rule
-    if (line.trim() === '---' || line.trim() === '***') {
-      flushParagraph();
-      flushList();
-      html.push('<hr />');
-      continue;
-    }
-
-    // Blockquote
-    const blockquoteMatch = line.match(/^>\s*(.*)$/);
-    if (blockquoteMatch && blockquoteMatch[1]) {
-      flushParagraph();
-      flushList();
-      html.push(`<blockquote>${renderInline(blockquoteMatch[1])}</blockquote>`);
-      continue;
-    }
-
-    // Bullet list
-    const listMatch = line.match(/^[-*]\s+(.+)$/);
-    if (listMatch && listMatch[1]) {
-      flushParagraph();
-      if (!inList) {
-        html.push('<ul>');
-        inList = true;
-      }
-      html.push(`<li>${renderInline(listMatch[1])}</li>`);
-      continue;
-    }
-
-    // Empty line: end current block
-    if (line.trim() === '') {
-      flushParagraph();
-      flushList();
-      continue;
-    }
-
-    // Plain text: accumulate paragraph
-    inParagraph = true;
-    paragraphBuffer.push(line.trim());
+function isSafeUrl(href: string): boolean {
+  const trimmed = href.trim();
+  if (
+    trimmed.startsWith('#') ||
+    trimmed.startsWith('/') ||
+    trimmed.startsWith('./') ||
+    trimmed.startsWith('../')
+  ) {
+    return true;
   }
+  return /^(https?|mailto):/i.test(trimmed);
+}
 
-  // Final flush
-  flushParagraph();
-  flushList();
-  if (inCodeBlock) {
-    html.push(`<pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre>`);
-  }
+const renderer = new Marked({ gfm: true, breaks: false });
+
+renderer.use({
+  renderer: {
+    html(token: Tokens.HTML | Tokens.Tag) {
+      return escapeHtml(token.text);
+    },
+    link({ href, title, tokens }: Tokens.Link) {
+      const body = this.parser.parseInline(tokens);
+      if (!isSafeUrl(href)) return body;
+      const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+      return `<a href="${escapeHtml(href)}"${titleAttr} rel="noopener noreferrer">${body}</a>`;
+    },
+    image({ href, title, text }: Tokens.Image) {
+      if (!isSafeUrl(href)) return escapeHtml(text);
+      const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+      return `<img src="${escapeHtml(href)}" alt="${escapeHtml(text)}"${titleAttr}>`;
+    },
+  },
+});
 
-  return html.join('\n');
-}
\ No newline at end of file
+export function renderLesson(markdown: string): string {
+  return renderer.parse(markdown, { async: false });
+}