diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index 089ac799bc..10e6cae398 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -4,16 +4,27 @@
 
 ```ts
 
+import * as _angular_core from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i0 from '@angular/core';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 // @public
-export const getMarkdownRenderer: (sanitizer: DomSanitizer) => ((text: string) => Node);
+export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions, doc?: Document, isBrowser?: boolean) => ((text: string) => Node);
+
+// @public (undocumented)
+export interface MarkdownRendererOptions {
+    downloadTableButton?: TranslatableString;
+    translateSync?: SiTranslateService['translateSync'];
+}
 
 // @public
 export class SiMarkdownRendererComponent {
     constructor();
-    readonly text: i0.InputSignal<string | undefined>;
+    readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
+    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly text: _angular_core.InputSignal<string | undefined>;
 }
 
 // (No @packageDocumentation comment for this package)
diff --git a/api-goldens/element-ng/translate/index.api.md b/api-goldens/element-ng/translate/index.api.md
index 1f95e64013..0bc10399a8 100644
--- a/api-goldens/element-ng/translate/index.api.md
+++ b/api-goldens/element-ng/translate/index.api.md
@@ -350,6 +350,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
     // (undocumented)
+    'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
+    // (undocumented)
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     // (undocumented)
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
index 2ee076d320..e5494a03a0 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:87bca818ae96eb1f8e85f138e862646fc787a1cace67579b589a282f9dabb866
-size 13930
+oid sha256:b17f626eba110891730376dbd2bedaf259f274d3fbad96cb66c4142bd0845cb6
+size 13834
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
index 80c9bb0810..532dd51083 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
@@ -4,16 +4,16 @@
   - button "dataset.csv"
 - paragraph: Can you help me analyze these files?
 - paragraph: I'm having trouble understanding the data structure and need assistance with the implementation.
-- button "Copy message"
+- button "Export message"
 - paragraph: I'd be happy to help you analyze your files! I can see you've shared a Python script and a CSV dataset.
 - paragraph: Let me examine the structure and provide guidance.
-- button "Good response"
-- button "Copy response"
+- button "Add to list"
+- button "Export response"
 - button "Retry response"
 - button "More actions"
 - paragraph: Perfect! What should I focus on first
 - paragraph: I also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?
-- button "Copy message"
+- button "Export message"
 - paragraph: Great question! When analyzing large datasets, it's crucial to focus on...
 - alert: Info AI responses are for demonstration purposes.
 - group:
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
index b7a085448a..330c34c0eb 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e16910032892fcb3cb90409e190b1eee22f61c90fff8b7c85516a5698b303361
-size 14583
+oid sha256:eb7e8f0f280cb6abedbd22e4ebf33f6e0b7a011cc3d6ef536f46ea8887a0ff2e
+size 14584
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
index 5d975069b3..3f3aaffc9e 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:58dfa48dee58689efefba1c9629fd127a31186d16b693826b1e1f9b42026ca7c
-size 14224
+oid sha256:152047c64d8437edea14f76be0dad86f6aa677ead9e816d8d03ee36486399404
+size 14242
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
index a4ba54ee17..08a98b5682 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
@@ -4,8 +4,7 @@
   - text: Can you help me with this
   - strong: code snippet
   - text: "?"
-- paragraph:
-  - code: console.log('Hello World')
+- code: console.log('Hello World')
 - paragraph: I'm getting an error when I run it.
 - button "Edit message"
 - button "Copy message"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
index 51092e1d98..83cc3675b8 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:812619a4f94ad30609fb21818985dd7c84413357890804d08673e6215cbdd499
-size 142176
+oid sha256:1ea39b354fa4656cb3c8cfcc2aa15afad01d8ad5b59af5b0b040876e4ac8ae60
+size 151131
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
index b0d249bfeb..b0ca585e7d 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dc434913688b2e13eb056baa60429fe2745bc002d5d1d5c77c6c39888c71f7a6
-size 137998
+oid sha256:fa26ec9e2dbe7b6b3d1d700ad9029cbeaeb9a78dd776130b7c1e5cbad8e60b8c
+size 147975
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
index caf1199cb2..264a38aacc 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
@@ -1,5 +1,5 @@
-- heading "AI Assistant Response" [level=2]:
-  - strong: AI Assistant Response
+- heading "Sample Markdown Content" [level=2]:
+  - strong: Sample Markdown Content
 - paragraph:
   - text: Here's a
   - strong: comprehensive example
@@ -10,9 +10,9 @@
   - text: You can use inline code like
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
-- paragraph
+- text: javascript
 - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
-- paragraph
+- separator
 - heading "Formatting Options" [level=2]
 - paragraph: Here's a paragraph explaining the formatting options available.
 - paragraph: "Another paragraph with different formatting elements:"
@@ -39,6 +39,7 @@
   - text: "Links are also automatically detected:"
   - link "https://angular.io":
     - /url: https://angular.io
+- separator
 - heading "Lists and Bullets" [level=2]
 - paragraph: "Here are the key features:"
 - list:
@@ -47,6 +48,8 @@
   - listitem: Inline code highlighting
   - listitem: Bullet point lists
   - listitem: Blockquote support
+  - listitem: Or in the alternate format
+  - listitem: Another bullet point
 - paragraph: This paragraph appears after the list to show proper spacing.
 - heading "Ordered Lists" [level=2]
 - paragraph: "Step-by-step instructions:"
@@ -54,7 +57,9 @@
   - listitem: First, analyze the requirements
   - listitem: Then, implement the solution
   - listitem: Finally, test the implementation
-- blockquote: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
+- separator
+- blockquote:
+  - paragraph: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
 - paragraph: This paragraph follows the blockquotes to demonstrate proper paragraph separation.
 - paragraph: This is a separate paragraph created by double line breaks.
 - list:
@@ -65,20 +70,24 @@
   - listitem: First ordered item
   - listitem: Second ordered item
 - paragraph: Final paragraph to show proper spacing.
+- separator
+- heading "Images" [level=2]
+- paragraph: "Images can be included as follows:"
+- separator
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
-- paragraph
 - table:
   - rowgroup:
     - row "Feature Examples Status Notes":
-      - cell "Feature":
+      - columnheader "Feature":
         - paragraph: Feature
-      - cell "Examples":
+      - columnheader "Examples":
         - paragraph: Examples
-      - cell "Status":
+      - columnheader "Status":
         - paragraph: Status
-      - cell "Notes":
+      - columnheader "Notes":
         - paragraph: Notes
+  - rowgroup:
     - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
       - cell "Basic content":
         - paragraph:
@@ -139,5 +148,4 @@
           - text: Uses
           - code: <br>
           - text: tags
-- text: This paragraph appears after the tables to demonstrate proper spacing.
-- paragraph
\ No newline at end of file
+- paragraph: This paragraph appears after the tables to demonstrate proper spacing.
\ No newline at end of file
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
index 82868ac14d..c0bee3cac6 100644
--- a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement, inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -42,7 +43,8 @@ describe('SiAiMessageComponent', () => {
     });
     debugElement = fixture.debugElement;
     const sanitizer = TestBed.inject(DomSanitizer);
-    markdownRenderer = getMarkdownRenderer(sanitizer);
+    const doc = TestBed.inject(DOCUMENT);
+    markdownRenderer = getMarkdownRenderer(sanitizer, undefined, doc, true);
   });
 
   it('should render markdown content', async () => {
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.ts b/projects/element-ng/chat-messages/si-attachment-list.component.ts
index 75f84ea1ad..6be67e7c3a 100644
--- a/projects/element-ng/chat-messages/si-attachment-list.component.ts
+++ b/projects/element-ng/chat-messages/si-attachment-list.component.ts
@@ -105,7 +105,8 @@ export class SiAttachmentListComponent {
     if (template) {
       event.preventDefault();
       this.modalService.show(template, {
-        inputValues: { 'attachment': attachment }
+        inputValues: { 'attachment': attachment },
+        ignoreBackdropClick: false
       });
     }
   }
diff --git a/projects/element-ng/chat-messages/si-chat-message.component.scss b/projects/element-ng/chat-messages/si-chat-message.component.scss
index b2484bba0d..4f34bb8708 100644
--- a/projects/element-ng/chat-messages/si-chat-message.component.scss
+++ b/projects/element-ng/chat-messages/si-chat-message.component.scss
@@ -35,6 +35,7 @@
   margin-block-end: auto;
   background-color: var(--chat-message-bubble-bg);
   min-inline-size: 0;
+  max-inline-size: 100%;
   overflow-wrap: break-word;
   word-break: break-word;
 
@@ -50,6 +51,7 @@
 
 .message-wrapper {
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .attachment-slot {
diff --git a/projects/element-ng/chat-messages/si-user-message.component.spec.ts b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
index ca1e94ffe8..597170bc00 100644
--- a/projects/element-ng/chat-messages/si-user-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement, inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -43,7 +44,8 @@ describe('SiUserMessageComponent', () => {
     });
     debugElement = fixture.debugElement;
     const sanitizer = TestBed.inject(DomSanitizer);
-    markdownRenderer = getMarkdownRenderer(sanitizer);
+    const doc = TestBed.inject(DOCUMENT);
+    markdownRenderer = getMarkdownRenderer(sanitizer, undefined, doc, true);
   });
 
   it('should render markdown content', async () => {
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
new file mode 100644
index 0000000000..da40565b63
--- /dev/null
+++ b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Gets a cached HTML element or creates a new one if not in cache.
+ * Implements LRU caching strategy.
+ */
+export const getCachedOrCreateElement = (
+  cache: Map<string, HTMLElement>,
+  cacheOrder: string[],
+  cacheSize: number,
+  key: string,
+  createHtml: () => string,
+  doc: Document
+): HTMLElement => {
+  const cached = cache.get(key);
+  if (cached) {
+    const orderIndex = cacheOrder.indexOf(key);
+    if (orderIndex > -1) {
+      cacheOrder.splice(orderIndex, 1);
+    }
+    cacheOrder.push(key);
+    return cached;
+  }
+
+  const tempDiv = doc.createElement('div');
+  tempDiv.innerHTML = createHtml();
+  const element = tempDiv.firstElementChild as HTMLElement;
+
+  cache.set(key, element);
+  cacheOrder.push(key);
+
+  if (cacheOrder.length > cacheSize) {
+    const oldestKey = cacheOrder.shift();
+    if (oldestKey) {
+      cache.delete(oldestKey);
+    }
+  }
+
+  return element;
+};
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index d7f1022c2d..5566540580 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -4,260 +4,726 @@
  */
 import { SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { type SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { type TranslatableString } from '@siemens/element-translate-ng/translate-types';
+
+import { getCachedOrCreateElement } from './markdown-renderer-helpers';
+
+const CACHE_SIZE = 100;
+
+export interface MarkdownRendererOptions {
+  /**
+   * Provide this to enable the download table button functionality.
+   * Label for the download table button (will be translated internally if translateSync is provided).
+   */
+  downloadTableButton?: TranslatableString;
+
+  /**
+   * Synchronous translation function for button labels.
+   */
+  translateSync?: SiTranslateService['translateSync'];
+}
+
+interface ProcessOptions {
+  allowCodeBlocks?: boolean;
+  allowBlockquotes?: boolean;
+  allowTables?: boolean;
+  allowInlineCode?: boolean;
+  allowLinks?: boolean;
+}
 
 /**
- * Returns a markdown renderer function which_
- * - Transforms markdown text into formatted HTML.
- * - Returns a DOM node containing the formatted content.
+ * Returns a function that transforms markdown text into a formatted HTML node.
  *
- * **Warning:** The returned Node is inserted without additional sanitization.
- * Input content is sanitized before processing.
+ * **Important for SSR**: When using this function in an SSR context, you must provide the `doc` and `isBrowser` parameters.
+ * Call this within an Angular injection context and pass `inject(DOCUMENT)` and `isPlatformBrowser(inject(PLATFORM_ID))`.
  *
  * @experimental
  * @param sanitizer - Angular DomSanitizer instance
+ * @param options - Optional configuration for the markdown renderer
+ * @param doc - Document instance (optional for browser-only apps, required for SSR - pass inject(DOCUMENT))
+ * @param isBrowser - Whether running in browser (optional for browser-only apps, required for SSR - pass isPlatformBrowser(inject(PLATFORM_ID)))
  * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML
  */
-export const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) => Node) => {
-  return (text: string): Node => {
-    const div = document.createElement('div');
-    div.className = 'markdown-content text-break';
+export const getMarkdownRenderer = (
+  sanitizer: DomSanitizer,
+  options?: MarkdownRendererOptions,
+  doc?: Document,
+  isBrowser?: boolean
+): ((text: string) => Node) => {
+  // Use provided document or fall back to global document for backwards compatibility
+  const docRef = doc ?? document;
+  const isInBrowser = isBrowser ?? true;
+
+  // Persistent caches within this renderer instance
+  const codeBlockCache = new Map<string, HTMLElement>();
+  const tableCache = new Map<string, HTMLElement>();
+  const codeBlockCacheOrder: string[] = [];
+  const tableCacheOrder: string[] = [];
+
+  // Placeholder maps for cached elements
+  const codeBlockPlaceholderMap = new Map<string, string>();
+  const tablePlaceholderMap = new Map<string, string>();
+
+  // Store table data for CSV export
+  const tableCellData = new Map<number, Map<number, Map<number, string>>>();
+  let tableCounter = 0;
+
+  // Placeholder maps for inline elements
+  const linkPlaceholderMap = new Map<string, { text: string; url: string }>();
+
+  /**
+   * Main recursive processing function
+   */
+  const processMarkdown = (
+    text: string,
+    processOpts: ProcessOptions = {
+      allowCodeBlocks: true,
+      allowBlockquotes: true,
+      allowTables: true,
+      allowInlineCode: true,
+      allowLinks: true
+    }
+  ): string => {
+    let result = text;
+
+    // Step 1: Extract and process code blocks (4+ backticks for nested markdown)
+    if (processOpts.allowCodeBlocks) {
+      const codeBlockMap = new Map<string, string>();
+
+      // Match code blocks with 4 or more backticks (for displaying nested code blocks)
+      result = result.replace(
+        /(^|\n)([\s]*)(````+)([^\n]*)\n?([\s\S]*?)\n?\s*\3/gm,
+        (match, prefix, indent, backticks, language, content) => {
+          const placeholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+          const cacheKey = createCodeBlockCacheKey(language.trim(), content);
+          codeBlockPlaceholderMap.set(placeholder, cacheKey);
+          codeBlockMap.set(placeholder, `<!--CODE-BLOCK-PLACEHOLDER-${placeholder}-->`);
+          return prefix + indent + placeholder;
+        }
+      );
+
+      // Match standard code blocks (3 backticks)
+      result = result.replace(
+        /(^|\n)([\s]*)(```)([^\n]*)\n?([\s\S]*?)(?:\n\s*```|```$)/gm,
+        (match, prefix, indent, backticks, language, content) => {
+          const placeholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+          const cacheKey = createCodeBlockCacheKey(language.trim(), content);
+          codeBlockPlaceholderMap.set(placeholder, cacheKey);
+          codeBlockMap.set(placeholder, `<!--CODE-BLOCK-PLACEHOLDER-${placeholder}-->`);
+          return prefix + indent + placeholder;
+        }
+      );
+
+      // Restore code block placeholders
+      codeBlockMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
+    }
 
-    if (!text) {
-      return div;
+    // Step 2: Extract and process blockquotes (can contain code blocks and inline elements)
+    if (processOpts.allowBlockquotes) {
+      const blockquoteMap = new Map<string, string>();
+      const lines = result.split('\n');
+      let i = 0;
+
+      while (i < lines.length) {
+        if (lines[i].match(/^\s*>/)) {
+          const blockquoteLines: string[] = [];
+          while (i < lines.length && lines[i].match(/^\s*>/)) {
+            blockquoteLines.push(lines[i].replace(/^\s*>\s?/, ''));
+            i++;
+          }
+
+          const blockquoteContent = blockquoteLines.join('\n');
+          const processedContent = processMarkdown(blockquoteContent, {
+            ...processOpts,
+            allowBlockquotes: false,
+            allowTables: false
+          });
+
+          const placeholder = `--BLOCKQUOTE-${Math.random().toString(36).substring(2, 15)}--`;
+          blockquoteMap.set(placeholder, `<blockquote>${processedContent}</blockquote>`);
+          lines.splice(i - blockquoteLines.length, blockquoteLines.length, placeholder);
+          i = i - blockquoteLines.length + 1;
+        } else {
+          i++;
+        }
+      }
+
+      result = lines.join('\n');
+
+      blockquoteMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
     }
 
-    // Generate a random placeholder for newlines to preserve them during HTML sanitization
-    const newlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;
-
-    // Replace newlines with placeholder before sanitization
-    const valueWithPlaceholders = text.replace(/\n/g, newlinePlaceholder);
-
-    // Sanitize the input using Angular's HTML sanitizer
-    const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, valueWithPlaceholders) ?? '';
-
-    // Restore newlines from placeholder for markdown processing.
-    let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\n');
-
-    // Process tables first
-    html = html
-      // Remove table separator lines first
-      .replace(/^\|\s*[-:]+.*\|\s*$/gm, '')
-      // Process table rows
-      .replace(/^\|(.+)\|\s*$/gm, (_match, htmlContent) => {
-        // Handle escaped pipes by temporarily replacing them
-        const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;
-        const contentWithPlaceholders = htmlContent.replace(/\\\|/g, escapedPipePlaceholder);
-        const cells = contentWithPlaceholders.split('|').map((cell: string) => {
-          const trimmedCell = cell.trim();
-          // Restore escaped pipes
-          const cellWithPipes = trimmedCell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|');
-
-          return cellWithPipes;
-        });
-        // Make cell ready for markdown processing by replacing code blocks with inline code and <br> with newlines
-        const cellsWithNewlines = cells.map((cell: string) => {
-          // Replace multiline code blocks with single line code blocks
-          const cellWithoutMultilineCode = cell.replace(
-            /```([\s\S]*?)```/g,
-            (_innerMatch, inlineCodeContent) => {
-              return '`' + inlineCodeContent.replace(/`/g, '') + '`';
-            }
-          );
-          // Temporarily replace single line code blocks to avoid replacing <br> inside them
-          const tableInlineCodeBrPlaceholder = `--INLINE-CODE-BR--${Math.random().toString(36).substring(2, 15)}--`;
-          const cellWithPlaceholders = cellWithoutMultilineCode.replace(
-            /(`[^`]*`)/g,
-            inlineCodeMatch => {
-              return inlineCodeMatch.replace(/<br>/g, tableInlineCodeBrPlaceholder);
-            }
+    // Step 3: Extract and process tables
+    if (processOpts.allowTables) {
+      result = processTables(result);
+    }
+
+    // Step 4: Extract and process inline code (must be before inline formatting)
+    if (processOpts.allowInlineCode) {
+      const inlineCodeMap = new Map<string, string>();
+
+      result = result.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+        const placeholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;
+        const escaped = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        inlineCodeMap.set(placeholder, `<code>${escaped}</code>`);
+        return placeholder;
+      });
+
+      inlineCodeMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
+    }
+
+    // Step 5: Process links (both formats, can contain inline code)
+    if (processOpts.allowLinks) {
+      result = result.replace(/<(https?:\/\/[^\s>]+)>/g, (match, url) => {
+        const sanitizedUrl = sanitizeUrl(url, sanitizer);
+        return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
+      });
+
+      // Images: ![alt](url)
+      result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
+        const sanitizedUrl = sanitizeUrl(url, sanitizer);
+        const escapedAlt = escapeHtml(alt);
+        return `<img src="${sanitizedUrl}" alt="${escapedAlt}">`;
+      });
+
+      // Links: [text](url) - keep as placeholder to protect from line breaks
+      result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
+        const placeholder = `--LINK-${Math.random().toString(36).substring(2, 15)}--`;
+        linkPlaceholderMap.set(placeholder, { text: linkText, url });
+        return placeholder;
+      });
+
+      // Auto-detect URLs
+      result = result.replace(/(?<!["'=(])\b(https?:\/\/[^\s<]+[^\s<.,;!?"')\]])/g, match => {
+        const sanitizedUrl = sanitizeUrl(match, sanitizer);
+        return `<a class="link-text" href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(match)}</a>`;
+      });
+    }
+
+    // Step 6: Process inline formatting only on text segments, not on block elements
+    result = processTextSegments(result, sanitizer);
+
+    return result;
+  };
+
+  /**
+   * Create cache key for code block
+   */
+  const createCodeBlockCacheKey = (language: string, content: string): string => {
+    return `${language}|||${content}`;
+  };
+
+  /**
+   * Create a code block element (cached)
+   */
+  const createCodeBlockElement = (language: string, content: string): HTMLElement => {
+    const cacheKey = createCodeBlockCacheKey(language, content);
+
+    return getCachedOrCreateElement(
+      codeBlockCache,
+      codeBlockCacheOrder,
+      CACHE_SIZE,
+      cacheKey,
+      () => {
+        // Escape HTML for code blocks
+        const displayContent = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+        // Sanitize the display content
+        const sanitized = sanitizer.sanitize(SecurityContext.HTML, displayContent) ?? '';
+
+        const languageLabel = language
+          ? `<span class="code-language">${escapeHtml(language)}</span>`
+          : '';
+        const headerContent = languageLabel
+          ? `<div class="code-header">${languageLabel}</div>`
+          : '';
+        const wrapperClass = headerContent ? 'code-wrapper has-header' : 'code-wrapper';
+        return `<div class="${wrapperClass}">${headerContent}<pre><code>${sanitized}</code></pre></div>`;
+      },
+      docRef
+    );
+  };
+
+  /**
+   * Process tables
+   */
+  const processTables = (input: string): string => {
+    const lines = input.split('\n');
+    const tableMap = new Map<string, string>();
+    let i = 0;
+
+    while (i < lines.length) {
+      if (lines[i].match(/^\|.+/)) {
+        const tableLines: string[] = [];
+        let hasSeparator = false;
+
+        while (i < lines.length && lines[i].match(/^\|.+/)) {
+          const line = lines[i];
+          if (line.match(/^\|\s*[-:]+/)) {
+            hasSeparator = true;
+          } else {
+            tableLines.push(line);
+          }
+          i++;
+        }
+
+        if (tableLines.length > 0) {
+          const currentTableIndex = tableCounter++;
+          const placeholder = `--TABLE-${Math.random().toString(36).substring(2, 15)}--`;
+          tablePlaceholderMap.set(
+            placeholder,
+            JSON.stringify({ tableIndex: currentTableIndex, hasSeparator, tableLines })
           );
-          // Replace <br> with newlines
-          const cellWithNewlines = cellWithPlaceholders.replace(/<br\s*\/?>/gi, '\n');
-          // Restore <br> in inline code placeholders
-          const preProcessedCell = cellWithNewlines.replace(
-            new RegExp(tableInlineCodeBrPlaceholder, 'g'),
-            '<br>'
+          tableMap.set(placeholder, `<!--TABLE-PLACEHOLDER-${placeholder}-->`);
+
+          // Initialize table data map for CSV export
+          tableCellData.set(currentTableIndex, new Map());
+
+          lines.splice(
+            i - tableLines.length - (hasSeparator ? 1 : 0),
+            tableLines.length + (hasSeparator ? 1 : 0),
+            placeholder
           );
-          return preProcessedCell;
+          i = i - tableLines.length - (hasSeparator ? 1 : 0) + 1;
+        }
+      } else {
+        i++;
+      }
+    }
+
+    let result = lines.join('\n');
+
+    tableMap.forEach((html, placeholder) => {
+      result = result.replace(placeholder, html);
+    });
+
+    return result;
+  };
+
+  /**
+   * Create cache key for table
+   */
+  const createTableCacheKey = (
+    tableLines: string[],
+    hasSeparator: boolean,
+    tableIndex: number
+  ): string => {
+    return `${tableLines.join('|||')}|||${hasSeparator}|||${tableIndex}|||${options?.downloadTableButton ?? ''}`;
+  };
+
+  /**
+   * Create table HTML element (cached)
+   */
+  const createTableElement = (
+    tableLines: string[],
+    hasSeparator: boolean,
+    tableIndex: number
+  ): HTMLElement => {
+    const cacheKey = createTableCacheKey(tableLines, hasSeparator, tableIndex);
+
+    return getCachedOrCreateElement(
+      tableCache,
+      tableCacheOrder,
+      CACHE_SIZE,
+      cacheKey,
+      () => {
+        const rows: string[] = [];
+        const cellData = tableCellData.get(tableIndex);
+
+        tableLines.forEach((line, rowIndex) => {
+          if (!line.trim()) {
+            return;
+          }
+
+          const escapedPipePlaceholder = `___ESCAPED_PIPE___${Math.random().toString(36).substring(2, 15)}___`;
+          const contentWithPlaceholders = line.replace(/\\\|/g, escapedPipePlaceholder);
+          const parts = contentWithPlaceholders.split('|');
+          const cells = parts.slice(1, -1);
+
+          const processedCells = cells.map((cell, cellIndex) => {
+            let originalCell = cell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|').trim();
+
+            // Extract inline code to protect <br> tags within code
+            const inlineCodeMap = new Map<string, string>();
+            originalCell = originalCell.replace(
+              /(?<!\\)(?:\\\\)*`([^`]+)`/g,
+              (match, codeContent) => {
+                const inlinePlaceholder = `___INLINE_CODE_${Math.random().toString(36).substring(2, 15)}___`;
+                inlineCodeMap.set(inlinePlaceholder, match);
+                return inlinePlaceholder;
+              }
+            );
+
+            // Convert <br> tags to newlines for table cells (outside of code)
+            originalCell = originalCell.replace(/<br\s*\/?>/gi, '\n');
+
+            // Restore inline code
+            inlineCodeMap.forEach((code, inlinePlaceholder) => {
+              originalCell = originalCell.replace(inlinePlaceholder, code);
+            });
+
+            // Store in cellData for CSV export
+            if (cellData) {
+              const rowData = cellData.get(rowIndex) ?? new Map<number, string>();
+              rowData.set(cellIndex, originalCell);
+              cellData.set(rowIndex, rowData);
+            }
+
+            // Process cell content for inline elements
+            return processMarkdown(originalCell, {
+              allowCodeBlocks: false,
+              allowBlockquotes: false,
+              allowTables: false,
+              allowInlineCode: true,
+              allowLinks: true
+            });
+          });
+
+          const isHeader = hasSeparator && rowIndex === 0;
+          const tag = isHeader ? 'th' : 'td';
+          const rowHtml = `<tr>${processedCells.map(cell => `<${tag}>${cell}</${tag}>`).join('')}</tr>`;
+          rows.push(rowHtml);
         });
 
-        // Recursively process cell content for markdown formatting
-        const processedCells = cellsWithNewlines.map((cell: string) => {
-          return transformMarkdownText(cell, false, sanitizer);
+        // Filter out empty rows
+        const filteredRows = rows.filter(row => {
+          const tempTable = docRef.createElement('table');
+          tempTable.innerHTML = `<tbody>${row}</tbody>`;
+          const tableCells = tempTable.querySelectorAll('td, th');
+          return Array.from(tableCells).some(cell => {
+            const hasText = !!cell.textContent?.trim();
+            const hasHtml = !!cell.innerHTML?.trim();
+            return hasText || hasHtml;
+          });
         });
 
-        return `<tr>${processedCells.map((cell: string) => `<td>${cell}</td>`).join('')}</tr>`;
+        if (filteredRows.length === 0) {
+          return '<div></div>';
+        }
+
+        let tableHtml =
+          '<table class="table table-hover" id="' +
+          `table-${Math.random().toString(36).substring(2, 15)}` +
+          '">';
+
+        if (hasSeparator && filteredRows.length > 0) {
+          tableHtml += '<thead>' + filteredRows[0] + '</thead>';
+          if (filteredRows.length > 1) {
+            tableHtml += '<tbody>' + filteredRows.slice(1).join('') + '</tbody>';
+          }
+        } else {
+          tableHtml += '<tbody>' + filteredRows.join('') + '</tbody>';
+        }
+
+        tableHtml += '</table>';
+
+        // Add download button if enabled
+        let downloadButton = '';
+        if (options?.downloadTableButton) {
+          const tableId = tableHtml.match(/id="([^"]+)"/)?.[1] ?? '';
+          const translatedLabel = options.translateSync
+            ? options.translateSync(options.downloadTableButton)
+            : options.downloadTableButton;
+          const buttonLabel = escapeHtml(translatedLabel);
+          downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"><i class="icon element-download" aria-hidden="true"></i></button>`;
+        }
+
+        return `<div class="table-wrapper"><div class="table-scroll-container">${tableHtml}</div>${downloadButton}</div>`;
+      },
+      docRef
+    );
+  };
+
+  /**
+   * Process text segments separately from block elements
+   */
+  const processTextSegments = (input: string, domSanitizer: DomSanitizer): string => {
+    const blockElementRegex =
+      /(<(pre|blockquote|ul|ol|hr|h[1-6]|table)[^>]*>[\s\S]*?<\/\2>)|(<!--(?:CODE-BLOCK|TABLE|BLOCKQUOTE)-PLACEHOLDER-[^>]+-->)/g;
+
+    const parts: string[] = [];
+    let lastIndex = 0;
+    let blockMatch;
+
+    while ((blockMatch = blockElementRegex.exec(input)) !== null) {
+      if (blockMatch.index > lastIndex) {
+        parts.push(input.slice(lastIndex, blockMatch.index));
+      }
+      parts.push(blockMatch[0]);
+      lastIndex = blockMatch.index + blockMatch[0].length;
+    }
+    if (lastIndex < input.length) {
+      parts.push(input.slice(lastIndex));
+    }
+
+    const processedParts = parts.map(part => {
+      if (part.match(/^<(pre|blockquote|ul|ol|hr|h[1-6]|table)|^<!--/)) {
+        return part;
+      }
+      return processInlineFormatting(part, domSanitizer);
+    });
+
+    let result = processedParts.join('');
+
+    // Restore links
+    linkPlaceholderMap.forEach((linkData, placeholder) => {
+      const sanitizedUrl = sanitizeUrl(linkData.url, sanitizer);
+      let linkText = linkData.text;
+
+      // Process inline code in link text
+      linkText = linkText.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+        const escaped = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return `<code>${escaped}</code>`;
+      });
+
+      const sanitizedText = domSanitizer.sanitize(SecurityContext.HTML, linkText) ?? '';
+      const linkHtml = `<a class="link-text" href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${sanitizedText}</a>`;
+      result = result.replace(placeholder, linkHtml);
+    });
+
+    return result;
+  };
+
+  /**
+   * Process inline formatting (headings, bold, italic, lists, etc.) on plain text
+   */
+  const processInlineFormatting = (input: string, domSanitizer: DomSanitizer): string => {
+    let result = input;
+
+    // Preserve escaped characters
+    result = result.replace(/\\\*/g, '___ESCAPED_ASTERISK___');
+    result = result.replace(/\\_/g, '___ESCAPED_UNDERSCORE___');
+
+    // Headings
+    result = result.replace(/^###### (.+)$/gm, '<strong>$1</strong>');
+    result = result.replace(/^##### (.+)$/gm, '<h5>$1</h5>');
+    result = result.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+    result = result.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    result = result.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    result = result.replace(/^# (.+)$/gm, '<h2><strong>$1</strong></h2>');
+
+    // Horizontal rule
+    result = result.replace(/^---+$/gm, '<hr>');
+
+    // Bold and italic
+    result = result.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    result = result.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    result = result.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    result = result.replace(/_(.+?)_/g, '<em>$1</em>');
+
+    // Lists
+    result = result.replace(/^[•\-*] (.+)$/gm, '<li class="unordered">$1</li>');
+    result = result.replace(/^&#8226; (.+)$/gm, '<li class="unordered">$1</li>');
+    result = result.replace(/^\d+\. (.+)$/gm, '<li class="ordered">$1</li>');
+
+    // Wrap lists (remove whitespace between items)
+    result = result.replace(
+      /(<li class="ordered">.*?<\/li>)\s*\n\s*(?=<li class="ordered">)/gs,
+      '$1'
+    );
+    result = result.replace(
+      /(<li class="unordered">.*?<\/li>)\s*\n\s*(?=<li class="unordered">)/gs,
+      '$1'
+    );
+
+    result = result.replace(
+      /(<li class="ordered">.*?<\/li>(?:<li class="ordered">.*?<\/li>)*)/gs,
+      '<ol>$1</ol>'
+    );
+    result = result.replace(
+      /(<li class="unordered">.*?<\/li>(?:<li class="unordered">.*?<\/li>)*)/gs,
+      '<ul>$1</ul>'
+    );
+
+    result = result.replace(/ class="ordered"/g, '');
+    result = result.replace(/ class="unordered"/g, '');
+
+    // Paragraphs
+    const paragraphPlaceholder = '___PARAGRAPH_BREAK___';
+    const segments = result.split(/\n{2,}/g);
+
+    result = segments
+      .map(segment => {
+        const trimmed = segment.trim();
+        if (!trimmed) {
+          return '';
+        }
+        if (/^\s*<(h[1-6]|pre|blockquote|ul|ol|hr|div|code|li|p)/.test(trimmed)) {
+          return segment.replace(/\n/g, paragraphPlaceholder);
+        }
+
+        const withoutTags = trimmed.replace(/<[^>]*>/g, '').trim();
+        if (!withoutTags) {
+          return '';
+        }
+
+        return '<p>' + segment + '</p>';
       })
-      // Wrap table rows in table elements
-      .replace(/(<tr>.*?<\/tr>)/gs, '<table class="table table-hover">$1</table>')
-      // Remove duplicate table tags
-      .replace(/<\/table>\s*<table class="table table-hover">/g, '');
+      .filter(segment => segment !== '')
+      .join(paragraphPlaceholder)
+      .replace(/\n/g, '<br>')
+      .replace(new RegExp(paragraphPlaceholder, 'g'), ' ');
 
-    html = transformMarkdownText(html, true, sanitizer);
+    // Restore escaped characters
+    result = result.replace(/___ESCAPED_ASTERISK___/g, '*');
+    result = result.replace(/___ESCAPED_UNDERSCORE___/g, '_');
 
-    div.innerHTML = html;
-    return div;
+    const sanitized = domSanitizer.sanitize(SecurityContext.HTML, result);
+    return sanitized ?? '';
   };
-};
 
-const transformMarkdownText = (
-  html: string,
-  keepAdditionalNewlines = true,
-  sanitizer: DomSanitizer
-): string => {
-  // Generate a random placeholder for inner code blocks to prevent markdown processing inside them
-  const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;
-  const codeSectionPlaceholderMap = new Map<string, string>();
-
-  const escapedAsteriskPlaceholder = `--ASTERISK-${Math.random().toString(36).substring(2, 15)}--`;
-  const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;
-
-  // Apply markdown transformations to the sanitized content
-  html = html
-    // Multiline code blocks ```code``` with placeholder
-    .replace(/```[^\n]*\n?([\s\S]*?)\n?```/g, (match, content) => {
-      // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
-      const code = `<pre><code>${content.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/`/g, innerCodeQuotePlaceholder)}</code></pre>`;
-      const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
-      codeSectionPlaceholderMap.set(codePlaceholder, code);
-      return codePlaceholder;
-    })
-
-    // Inline code `text`
-    .replace(/`(.*?)`/g, (match, content) => {
-      // Escape HTML special characters in inline code (not for security, but for correct display)
-      const code = `<code>${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>`;
-      const codePlaceholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;
-      codeSectionPlaceholderMap.set(codePlaceholder, code);
-      return codePlaceholder;
-    })
-
-    // Images ![alt](url)
-    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => {
-      const sanitizedUrl = sanitizeUrl(url, sanitizer);
-      const escapedAlt = alt
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      return `<img src="${sanitizedUrl}" alt="${escapedAlt}">`;
-    })
-
-    // Links [text](url)
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
-      const sanitizedUrl = sanitizeUrl(url, sanitizer);
-      return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${text}</a>`;
-    })
-
-    // Auto-detect URLs and convert to links
-    .replace(/(?<!["'=(])\b(https?:\/\/[^\s<]+[^\s<.,;!?"')\]])/g, match => {
-      const sanitizedUrl = sanitizeUrl(match, sanitizer);
-      return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${match}</a>`;
-    })
-
-    .replace(/(?<!\\)\\\*/g, escapedAsteriskPlaceholder)
-    .replace(/(?<!\\)\\_/g, escapedUnderscorePlaceholder)
-
-    // Bold **text** or __text__
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/__(.*?)__/g, '<strong>$1</strong>')
-
-    // Italic *text* or _text_
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-    .replace(/_(.*?)_/g, '<em>$1</em>')
-
-    .replace(new RegExp(escapedAsteriskPlaceholder, 'g'), '*')
-    .replace(new RegExp(escapedUnderscorePlaceholder, 'g'), '_')
-
-    // Headings #, ##, ###, etc.
-    .replace(/^###### (.*$)/gm, '<strong>$1</strong>')
-    .replace(/^##### (.*$)/gm, '<h5>$1</h5>')
-    .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
-    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gm, '<h2><strong>$1</strong></h2>');
-
-  html = html
-    // Bullet points - handle each type separately (• gets converted to &#8226; by sanitizer)
-    .replace(/^&#8226; (.*$)/gm, '<li class="unordered">$1</li>')
-    .replace(/^- (.*$)/gm, '<li class="unordered">$1</li>')
-    .replace(/^\* (.*$)/gm, '<li class="unordered">$1</li>')
-
-    // Ordered list items (1., 2., 3., etc.)
-    .replace(/^\d+\. (.*$)/gm, '<li class="ordered">$1</li>');
-
-  html = html.replace(/^\s*(?:>|&gt;)\s*(.*)$/gm, '<blockquote>$1</blockquote>');
-
-  // Generate a random placeholder for newlines to differentiate them from those used for paragraphs
-  const finalNewlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;
-
-  html = html
-    // Wrap ordered lists
-    .replace(/(<li class="ordered">.*?<\/li>)/gs, '<ol>$1</ol>')
-
-    // Wrap unordered lists
-    .replace(/(<li class="unordered">.*?<\/li>)/gs, '<ul>$1</ul>')
-
-    // Remove duplicate ol/ul tags
-    .replace(/<\/ol>\s*<ol>/g, '')
-    .replace(/<\/ul>\s*<ul>/g, '')
-
-    // Clean up class attributes
-    .replace(/ class="ordered"/g, '')
-    .replace(/ class="unordered"/g, '');
-
-  html = html
-    // Convert double newlines to paragraphs (before single line breaks)
-    .split(/\n{2}/g)
-    // Wrap non-block elements in <p> tags
-    .map(segment => {
-      // If the segment starts with a block element, return as is
-      if (!segment.trim() || /^\s*<(h[1-6]|pre|blockquote|ul|ol)/.test(segment.trim())) {
-        // Replace newlines inside blocks with the placeholder
-        return segment.replace(/\n/g, finalNewlinePlaceholder);
+  /**
+   * Main render function
+   */
+  return (text: string): HTMLElement => {
+    const div = docRef.createElement('div');
+    div.className = 'markdown-content text-break';
+
+    if (text === null || text === undefined) {
+      return div;
+    }
+
+    const processedHtml = processMarkdown(text);
+    div.innerHTML = processedHtml;
+
+    // Replace comment placeholders with cached elements
+    const commentsToReplace: { comment: Comment; element: HTMLElement }[] = [];
+
+    if (isInBrowser) {
+      const walker = docRef.createTreeWalker(div, NodeFilter.SHOW_COMMENT);
+
+      let currentNode = walker.nextNode();
+      while (currentNode) {
+        const comment = currentNode as Comment;
+
+        // Handle code block placeholders
+        const codeMatch = comment.textContent?.match(/CODE-BLOCK-PLACEHOLDER-(.*)/);
+        if (codeMatch) {
+          const placeholderId = codeMatch[1];
+          const cacheKey = codeBlockPlaceholderMap.get(placeholderId);
+          if (cacheKey) {
+            const keyParts = cacheKey.split('|||');
+            const language = keyParts[0];
+            const content = keyParts[1];
+            const cachedElement = createCodeBlockElement(language, content);
+            if (cachedElement) {
+              commentsToReplace.push({ comment, element: cachedElement });
+            }
+          }
+        }
+
+        // Handle table placeholders
+        const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
+        if (tableMatch) {
+          const placeholderId = tableMatch[1];
+          const tableDataJson = tablePlaceholderMap.get(placeholderId);
+          if (tableDataJson) {
+            try {
+              const { tableIndex, hasSeparator, tableLines } = JSON.parse(tableDataJson);
+              const cachedElement = createTableElement(tableLines, hasSeparator, tableIndex);
+              if (cachedElement) {
+                commentsToReplace.push({ comment, element: cachedElement });
+              }
+            } catch (e) {
+              console.warn('Failed to parse table placeholder data', e);
+            }
+          }
+        }
+
+        currentNode = walker.nextNode();
       }
-      // Otherwise, wrap in <p> tags
-      return `<p>${segment}</p>`;
-    })
-    // Use newline placeholder again so as not to replace newlines between blocks
-    .join(finalNewlinePlaceholder)
-    // Convert remaining newlines to line breaks (do this LAST)
-    .replace(/\n/g, '<br>')
-    // Restore newline placeholders
-    .replace(new RegExp(finalNewlinePlaceholder, 'g'), keepAdditionalNewlines ? '\n' : ' ');
-
-  // Restore code placeholders
-  codeSectionPlaceholderMap.forEach((code, placeholder) => {
-    html = html.replace(new RegExp(placeholder, 'g'), code);
-  });
-
-  // Restore inner code block placeholders
-  html = html.replace(new RegExp(innerCodeQuotePlaceholder, 'g'), '`');
-
-  return html;
+    }
+
+    commentsToReplace.forEach(({ comment, element }) => {
+      if (comment.parentNode && element) {
+        comment.parentNode.replaceChild(element.cloneNode(true), comment);
+      }
+    });
+
+    // Add event listeners for table download buttons (browser-only)
+    if (isInBrowser) {
+      div.querySelectorAll('.download-table-btn').forEach(btn => {
+        btn.addEventListener('click', e => {
+          const button = e.target as HTMLButtonElement;
+          const tableId = button.getAttribute('data-table-id');
+          const tableIndexStr = button.getAttribute('data-table-index');
+          if (!tableId || tableIndexStr === null) return;
+
+          const tableElement = div.querySelector(`#${tableId}`) as HTMLTableElement;
+          if (!tableElement) return;
+
+          const tblIndex = parseInt(tableIndexStr, 10);
+          const tableData = tableCellData.get(tblIndex);
+
+          const tableRows = Array.from(tableElement.querySelectorAll('tr'));
+          const csv = tableRows
+            .filter(row => {
+              const rowCells = Array.from(row.querySelectorAll('td, th'));
+              return rowCells.some(cell => (cell.textContent ?? '').trim().length > 0);
+            })
+            .map((row, rowIndex) => {
+              const rowCells = Array.from(row.querySelectorAll('td, th'));
+              return rowCells
+                .map((cell, columnIndex) => {
+                  const cellText =
+                    tableData?.get(rowIndex)?.get(columnIndex) ?? cell.textContent ?? '';
+                  if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
+                    return `"${cellText.replace(/"/g, '""')}"`;
+                  }
+                  return cellText;
+                })
+                .join(',');
+            })
+            .join('\n');
+
+          const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+          const link = docRef.createElement('a');
+          const url = URL.createObjectURL(blob);
+          link.setAttribute('href', url);
+          link.setAttribute('download', 'table.csv');
+          link.style.visibility = 'hidden';
+          docRef.body.appendChild(link);
+          link.click();
+          docRef.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        });
+      });
+    }
+
+    return div;
+  };
 };
 
 /**
- * Sanitizes a URL to prevent XSS attacks
- * @param url - The URL to sanitize
- * @param sanitizer - Angular DomSanitizer instance
- * @returns The sanitized URL or '#' if invalid
+ * Sanitize URL to prevent XSS attacks
  */
 const sanitizeUrl = (url: string, sanitizer: DomSanitizer): string => {
-  // Remove any whitespace
   url = url.trim();
-
-  // Allow only http, https, and mailto protocols
   const allowed = /^(https?:\/\/|mailto:|\/(?!\/)|\.{1,2}\/|#)/i;
 
-  // Sanitize the URL using Angular's sanitizer
   if (!allowed.test(url)) {
     return '#';
   }
 
-  // Sanitize the URL using Angular's sanitizer
   const sanitized = sanitizer.sanitize(SecurityContext.URL, url);
+  return sanitized ?? '#';
+};
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  return sanitized || '#';
+/**
+ * Escape HTML special characters
+ */
+const escapeHtml = (text: string): string => {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 };
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
index 67e1580f0b..dc8d534207 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
@@ -74,8 +74,8 @@ describe('SiMarkdownRendererComponent', () => {
     expect(codeElement).toHaveTextContent('const x = 1;');
   });
 
-  it('should transform bullet points to lists (• character)', async () => {
-    text.set('• First item\n• Second item');
+  it('should transform bullet points to lists (\u2022 character)', async () => {
+    text.set('\u2022 First item\n\u2022 Second item');
     await fixture.whenStable();
 
     const markdownDiv = hostElement.firstElementChild!;
@@ -110,8 +110,8 @@ describe('SiMarkdownRendererComponent', () => {
   it('should handle complex markdown with multiple elements', async () => {
     const complexMarkdown = `This is **bold** text with _italic_, escaped \\_ and \\* and \`code\`.
 
-• First item
-• Second item
+\u2022 First item
+\u2022 Second item
 
 \`\`\`
 const example = "code block";
@@ -123,11 +123,14 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const innerHTML = markdownDiv.innerHTML;
 
-    // Check for transformed markdown in the HTML string
     expect(innerHTML).toContain('<strong>bold</strong>');
     expect(innerHTML).toContain('<em>italic</em>');
     expect(innerHTML).toContain('<code>code</code>');
-    expect(innerHTML).toContain('<pre><code>');
+    const codeWrapper = markdownDiv.querySelector('.code-wrapper')!;
+    expect(codeWrapper).toBeTruthy();
+    const preElement = codeWrapper.querySelector('pre')!;
+    expect(preElement).toBeTruthy();
+    expect(preElement.querySelector('code')).toBeTruthy();
     expect(innerHTML).toContain('<li>First item</li>');
   });
 
@@ -138,7 +141,6 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const innerHTML = markdownDiv.innerHTML;
 
-    // Script tags should be completely removed by Angular's sanitizer
     expect(innerHTML).not.toContain('<script>');
     expect(innerHTML).not.toContain('alert("xss")');
     expect(markdownDiv).toHaveTextContent('Safe text');
@@ -153,7 +155,6 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const innerHTML = markdownDiv.innerHTML;
 
-    // Event handlers and javascript: URLs should be removed
     expect(innerHTML).not.toContain('onerror=');
     expect(innerHTML).not.toContain('javascript:');
     expect(innerHTML).not.toContain('<iframe');
@@ -167,7 +168,6 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const innerHTML = markdownDiv.innerHTML;
 
-    // onclick should be removed but div element should remain
     expect(innerHTML).not.toContain('onclick=');
     expect(innerHTML).toContain('Safe div');
   });
@@ -184,17 +184,21 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tableElement = markdownDiv.querySelector('table')!;
     const trElements = markdownDiv.querySelectorAll('tr');
+    const thElements = markdownDiv.querySelectorAll('th');
     const tdElements = markdownDiv.querySelectorAll('td');
 
     expect(tableElement).toBeTruthy();
     expect(tableElement).toHaveClass('table');
     expect(tableElement).toHaveClass('table-hover');
-    expect(trElements.length).toBe(3); // Header + 2 data rows
-    expect(tdElements.length).toBe(6); // 2 columns × 3 rows
-    expect(tdElements[0]).toHaveTextContent('Name');
-    expect(tdElements[1]).toHaveTextContent('Role');
-    expect(tdElements[2]).toHaveTextContent('Alice');
-    expect(tdElements[3]).toHaveTextContent('Developer');
+    expect(trElements.length).toBe(3);
+    expect(thElements.length).toBe(2);
+    expect(tdElements.length).toBe(4);
+    expect(thElements[0]).toHaveTextContent('Name');
+    expect(thElements[1]).toHaveTextContent('Role');
+    expect(tdElements[0]).toHaveTextContent('Alice');
+    expect(tdElements[1]).toHaveTextContent('Developer');
+    expect(tdElements[2]).toHaveTextContent('Bob');
+    expect(tdElements[3]).toHaveTextContent('Designer');
   });
 
   it('should escape HTML in table cells', async () => {
@@ -208,9 +212,9 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tdElements = markdownDiv.querySelectorAll('td');
 
-    expect(tdElements[2].innerHTML).not.toContain('<script>');
-    expect(tdElements[2].textContent).toBe('');
-    expect(tdElements[3].innerHTML).toContain('<b>Bold</b>');
+    expect(tdElements[0].innerHTML).not.toContain('<script>');
+    expect(tdElements[0].textContent).toBe('');
+    expect(tdElements[1].innerHTML).toContain('<b>Bold</b>');
   });
 
   it('should handle tables with markdown formatting inside cells', async () => {
@@ -242,10 +246,10 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tdElements = markdownDiv.querySelectorAll('td');
 
-    expect(tdElements[2]).toHaveTextContent('grep "text|pattern"');
-    expect(tdElements[3]).toHaveTextContent('Search for text OR pattern');
-    expect(tdElements[4]).toHaveTextContent("awk '{print $1|$2}'");
-    expect(tdElements[5]).toHaveTextContent('Print fields separated by pipe');
+    expect(tdElements[0]).toHaveTextContent('grep "text|pattern"');
+    expect(tdElements[1]).toHaveTextContent('Search for text OR pattern');
+    expect(tdElements[2]).toHaveTextContent("awk '{print $1|$2}'");
+    expect(tdElements[3]).toHaveTextContent('Print fields separated by pipe');
   });
 
   it('should handle lists and line breaks inside table cells', async () => {
@@ -261,19 +265,16 @@ const example = "code block";
     const innerHTML = markdownDiv.innerHTML;
     const tdElements = markdownDiv.querySelectorAll('td');
 
-    // Check that formatting is preserved
     expect(innerHTML).toContain('<strong>Lists</strong>');
     expect(innerHTML).toContain('<em>Line breaks</em>');
 
-    // Check that lists are properly formatted
-    expect(tdElements[3].innerHTML).toContain('<ul>');
-    expect(tdElements[3].innerHTML).toContain('<li>First item</li>');
-    expect(tdElements[3].innerHTML).toContain('<li>Second item</li>');
-    expect(tdElements[3].innerHTML).toContain('<li>Third item</li>');
+    expect(tdElements[1].innerHTML).toContain('<ul>');
+    expect(tdElements[1].innerHTML).toContain('<li>First item</li>');
+    expect(tdElements[1].innerHTML).toContain('<li>Second item</li>');
+    expect(tdElements[1].innerHTML).toContain('<li>Third item</li>');
 
-    // Check that line breaks work in cells - <br> tags remain as <br> in innerHTML, don't convert to \n in textContent
-    expect(tdElements[5].innerHTML).toContain('<br>');
-    expect(tdElements[5]).toHaveTextContent('Line 1Line 2Line 3');
+    expect(tdElements[3].innerHTML).toContain('<br>');
+    expect(tdElements[3]).toHaveTextContent('Line 1Line 2Line 3');
   });
 
   it('should update content when input changes', async () => {
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index eb03e3bc59..fe3d848a79 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -2,10 +2,12 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, effect, inject, input, ElementRef } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Component, computed, effect, inject, input, ElementRef, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
 
-import { getMarkdownRenderer } from './markdown-renderer';
+import { getMarkdownRenderer, type MarkdownRendererOptions } from './markdown-renderer';
 
 /**
  * Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on `markdown-content` theme class.
@@ -18,7 +20,10 @@ import { getMarkdownRenderer } from './markdown-renderer';
 export class SiMarkdownRendererComponent {
   private sanitizer = inject(DomSanitizer);
   private hostElement = inject(ElementRef<HTMLElement>);
-  private markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  private translateService = injectSiTranslateService();
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+  private doc = inject(DOCUMENT);
 
   /**
    * The markdown text to transform and display
@@ -26,13 +31,40 @@ export class SiMarkdownRendererComponent {
    */
   readonly text = input<string | undefined>();
 
+  /**
+   * Do not display the download CSV button for tables.
+   * @defaultValue false
+   */
+  readonly disableDownloadButton = input<boolean>(false);
+
+  /**
+   * Label for the download CSV button.
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+   * ```
+   */
+  readonly downloadButtonLabel = input(
+    t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+  );
+
+  private readonly markdownRenderer = computed(() => {
+    const options: MarkdownRendererOptions = {
+      downloadTableButton: !this.disableDownloadButton() ? this.downloadButtonLabel() : undefined,
+      translateSync: this.translateService.translateSync.bind(this.translateService)
+    };
+
+    return getMarkdownRenderer(this.sanitizer, options, this.doc, this.isBrowser);
+  });
+
   constructor() {
     effect(() => {
       const contentValue = this.text();
       const containerEl = this.hostElement.nativeElement;
+      const renderer = this.markdownRenderer();
 
       if (containerEl) {
-        const formattedNode = this.markdownRenderer(contentValue ?? '');
+        const formattedNode = renderer(contentValue ?? '');
         containerEl.innerHTML = '';
         containerEl.appendChild(formattedNode);
       }
diff --git a/projects/element-ng/translate/si-translatable-keys.interface.ts b/projects/element-ng/translate/si-translatable-keys.interface.ts
index d26ed474bd..3c02215679 100644
--- a/projects/element-ng/translate/si-translatable-keys.interface.ts
+++ b/projects/element-ng/translate/si-translatable-keys.interface.ts
@@ -173,6 +173,7 @@ export interface SiTranslatableKeys {
   'SI_LOGIN_BASIC.USERNAME'?: string;
   'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;
   'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
+  'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
   'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
   'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
   'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index 6cf0f47554..0364759ae1 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -1,7 +1,7 @@
-@use '../variables';
-
 @use 'sass:map';
 
+@use '../variables';
+
 .markdown-content {
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -15,7 +15,7 @@
 
   code {
     color: variables.$element-text-primary;
-    background-color: variables.$element-ui-4;
+    background-color: variables.$element-base-1-hover;
     padding-block: map.get(variables.$spacers, 1);
     padding-inline: map.get(variables.$spacers, 2);
     border-radius: variables.$element-radius-1;
@@ -43,18 +43,46 @@
     overflow-wrap: break-word;
   }
 
+  .code-wrapper {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    margin-block: map.get(variables.$spacers, 4);
+    background-color: transparent;
+    border: 1px solid variables.$element-ui-4;
+    border-radius: variables.$element-radius-2;
+    overflow: hidden;
+  }
+
+  .code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: map.get(variables.$spacers, 4);
+    padding-block: map.get(variables.$spacers, 5);
+    padding-inline: map.get(variables.$spacers, 6);
+    padding-block-end: 0;
+  }
+
+  .code-language {
+    font-weight: variables.$si-font-weight-semibold;
+  }
+
   pre {
-    background-color: variables.$element-ui-4;
-    padding-block: map.get(variables.$spacers, 4);
-    padding-inline: map.get(variables.$spacers, 4);
-    border-radius: variables.$element-radius-1;
+    background-color: transparent;
+    padding-block: map.get(variables.$spacers, 5);
+    padding-inline: map.get(variables.$spacers, 6);
+    border-radius: 0;
+    vertical-align: middle;
     overflow-x: auto;
     margin-inline: 0;
-    inline-size: max-content;
-    max-inline-size: 100%;
+    margin-block: 0;
+    inline-size: 100%;
+    font-size: variables.$si-font-size-caption;
     box-sizing: border-box;
 
     code {
+      vertical-align: middle;
       background-color: transparent;
       padding-block: 0;
       padding-inline: 0;
@@ -87,17 +115,50 @@
   > *:last-child {
     // stylelint-disable-next-line declaration-no-important
     margin-block-end: 0 !important;
+
+    &.code-wrapper > pre {
+      // stylelint-disable-next-line declaration-no-important
+      margin-block-end: 0 !important;
+    }
+  }
+
+  .table-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: map.get(variables.$spacers, 1);
+    inline-size: 100%;
+    margin-block-start: map.get(variables.$spacers, 6);
+    margin-block-end: map.get(variables.$spacers, 1);
+  }
+
+  .table-scroll-container {
+    inline-size: 100%;
+    overflow-x: auto;
+  }
+
+  .download-table-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: variables.$element-radius-1;
+  }
+
+  .download-table-btn .icon {
+    margin-block: 0;
   }
 
   table {
-    inline-size: max-content;
-    max-inline-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    align-self: stretch;
     // stylelint-disable-next-line declaration-no-important
-    margin-block-start: map.get(variables.$spacers, 6) !important;
+    margin-block-start: 0 !important;
     // stylelint-disable-next-line declaration-no-important
     margin-block-end: 0 !important;
-    overflow: auto;
-    display: block;
+    display: table;
+    table-layout: auto;
     white-space: nowrap;
 
     ul,
@@ -105,11 +166,15 @@
       // stylelint-disable-next-line declaration-no-important
       padding-inline-start: map.get(variables.$spacers, 6) !important;
     }
+
+    td:last-child,
+    th:last-child {
+      inline-size: 100%;
+    }
   }
 
   table td,
   table th {
-    max-inline-size: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
 
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index 8bfbdf4640..d3768f625d 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageAction, SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
@@ -18,8 +19,15 @@ import { LOG_EVENT } from '@siemens/live-preview';
 export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    undefined,
+    this.doc,
+    this.isBrowser
+  );
 
   content = `Here's a **simple response** with basic formatting.
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.html b/src/app/examples/si-chat-messages/si-chat-container.html
index 97bc153641..addeea605d 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.html
+++ b/src/app/examples/si-chat-messages/si-chat-container.html
@@ -1,6 +1,6 @@
 <div class="si-layout-fixed-height w-100 h-100">
-  <si-chat-container colorVariant="base-0">
-    @for (message of messages(); track message) {
+  <si-chat-container #chatContainer colorVariant="base-0">
+    @for (message of messages(); track $index) {
       @if (message.type === 'user') {
         <si-user-message
           [content]="message.content"
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index faf62f67d9..93e2b15a81 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -9,7 +10,8 @@ import {
   inject,
   signal,
   TemplateRef,
-  viewChild
+  viewChild,
+  PLATFORM_ID
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
@@ -69,8 +71,15 @@ export class SampleComponent {
   private sanitizer = inject(DomSanitizer);
   private readonly toastService = inject(SiToastNotificationService);
   private readonly chatContainer = viewChild<SiChatContainerComponent>(SiChatContainerComponent);
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    undefined,
+    this.doc,
+    this.isBrowser
+  );
 
   readonly preAttachedFiles: ChatInputAttachment[] = [
     {
@@ -106,7 +115,7 @@ export class SampleComponent {
       ],
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (message: ChatMessage) =>
             this.logEvent(`Copy user message ${message.content.slice(0, 20)}...`)
@@ -120,14 +129,14 @@ export class SampleComponent {
   Let me examine the structure and provide guidance.`,
       actions: [
         {
-          label: 'Good response',
+          label: 'Add to list',
           icon: 'element-plus',
-          action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+          action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
         },
         {
-          label: 'Copy response',
+          label: 'Export response',
           icon: 'element-export',
-          action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+          action: (_message: ChatMessage) => this.logEvent('Export AI message')
         },
         {
           label: 'Retry response',
@@ -147,7 +156,7 @@ export class SampleComponent {
         'Perfect! What should I focus on first\n\nI also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?',
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (_message: ChatMessage) =>
             this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
@@ -178,7 +187,7 @@ export class SampleComponent {
 
   userActions: MessageAction[] = [
     {
-      label: 'Copy message',
+      label: 'Export message',
       icon: 'element-export',
       action: (_message: ChatMessage) =>
         this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
@@ -193,14 +202,14 @@ export class SampleComponent {
 
   aiActions: MessageAction[] = [
     {
-      label: 'Good response',
+      label: 'Add to list',
       icon: 'element-plus',
-      action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+      action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
     },
     {
-      label: 'Copy response',
+      label: 'Export response',
       icon: 'element-export',
-      action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+      action: (_message: ChatMessage) => this.logEvent('Export AI message')
     }
   ];
 
@@ -272,9 +281,9 @@ export class SampleComponent {
         content: event.content,
         actions: [
           {
-            label: 'Copy message',
+            label: 'Export message',
             icon: 'element-export',
-            action: () => this.logEvent('Copy user message')
+            action: () => this.logEvent('Export user message')
           }
         ],
         attachments: event.attachments.map(att => ({
@@ -284,6 +293,10 @@ export class SampleComponent {
       }
     ]);
     this.simulateAiResponse(event.content);
+
+    setTimeout(() => {
+      this.chatContainer()?.scrollToBottom();
+    }, 0);
   }
 
   onInterrupt(): void {
@@ -314,14 +327,14 @@ export class SampleComponent {
             content: response,
             actions: [
               {
-                label: 'Good response',
+                label: 'Add to list',
                 icon: 'element-plus',
-                action: () => this.logEvent('Thumbs up for AI message')
+                action: () => this.logEvent('Add AI message to list')
               },
               {
-                label: 'Copy response',
+                label: 'Export response',
                 icon: 'element-export',
-                action: () => this.logEvent('Copy AI message')
+                action: () => this.logEvent('Export AI message')
               }
             ]
           }
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index 8b21d80953..d9267ef0f9 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
   SiUserMessageComponent,
@@ -21,8 +22,15 @@ import { LOG_EVENT } from '@siemens/live-preview';
 export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    undefined,
+    this.doc,
+    this.isBrowser
+  );
 
   content = `Can you help me with this **code snippet**?
 
diff --git a/src/assets/sample-markdown.md b/src/assets/sample-markdown.md
index a0fd07cd4b..c72640dc3a 100644
--- a/src/assets/sample-markdown.md
+++ b/src/assets/sample-markdown.md
@@ -1,4 +1,4 @@
-# AI Assistant Response
+# Sample Markdown Content
 
 Here's a **comprehensive example** of markdown content with various formatting options.
 
@@ -17,6 +17,8 @@ const result = calculateSum(5, 3);
 console.log(`Result: ${result}`);
 ```
 
+---
+
 ## Formatting Options
 
 Here's a paragraph explaining the formatting options available.
@@ -33,6 +35,8 @@ You can include links such as [Element](https://element.siemens.io) for more inf
 
 Links are also automatically detected: https://angular.io
 
+---
+
 ## Lists and Bullets
 
 Here are the key features:
@@ -44,6 +48,9 @@ Here are the key features:
 - Bullet point lists
 - Blockquote support
 
+* Or in the alternate format
+* Another bullet point
+
 This paragraph appears after the list to show proper spacing.
 
 ## Ordered Lists
@@ -54,6 +61,8 @@ Step-by-step instructions:
 2. Then, implement the solution
 3. Finally, test the implementation
 
+---
+
 > This is a blockquote that demonstrates how quoted text appears in the markdown content component.
 
 This paragraph follows the blockquotes to demonstrate proper paragraph separation.
@@ -70,6 +79,16 @@ Another paragraph between the lists.
 
 Final paragraph to show proper spacing.
 
+---
+
+## Images
+
+Images can be included as follows:
+
+![Building Image](./assets/images/building-1.webp)
+
+---
+
 ## Tables
 
 Tables are also supported: