diff --git a/changelog/v0.4.0.md b/changelog/v0.4.0.md
index 2649559..6ef7f39 100644
--- a/changelog/v0.4.0.md
+++ b/changelog/v0.4.0.md
@@ -1,5 +1,10 @@
 # v0.4.0
 
+## New Features
+- XBRL data viewer: click any XBRL document to see formatted financial reports with tabbed navigation
+- XBRL reports display human-readable names parsed from FilingSummary.xml
+- XBRL badge on XBRL documents in the sidebar
+
 ## Improvements
 - Refactored filing search into sub-components: result row, status bar, query item, query editor
 - Filing result row redesigned with CSS grid layout: ticker, title, description, tags, and date
diff --git a/src/app/components/welcome-modal/changelog.ts b/src/app/components/welcome-modal/changelog.ts
index ddb43eb..bdf09e0 100644
--- a/src/app/components/welcome-modal/changelog.ts
+++ b/src/app/components/welcome-modal/changelog.ts
@@ -9,6 +9,14 @@ export const CHANGELOG: ChangelogEntry[] = [
   {
     version: '0.4.0',
     sections: [
+      {
+        title: 'New Features',
+        items: [
+          'XBRL data viewer: click any XBRL document to see formatted financial reports with tabbed navigation',
+          'XBRL reports display human-readable names parsed from FilingSummary.xml',
+          'XBRL badge on XBRL documents in the sidebar',
+        ],
+      },
       {
         title: 'Improvements',
         items: [
diff --git a/src/app/core/models/document.model.ts b/src/app/core/models/document.model.ts
index 45a5592..899395a 100644
--- a/src/app/core/models/document.model.ts
+++ b/src/app/core/models/document.model.ts
@@ -101,3 +101,16 @@ export interface DocumentImageOptions {
   page?: number;
 }
 
+/**
+ * A report entry parsed from FilingSummary.xml in XBRL filings.
+ */
+export interface XbrlReport {
+  shortName: string;
+  longName: string;
+  htmlFileName: string;
+  menuCategory: string;
+  position: number;
+  reportType: string;
+  role?: string;
+}
+
diff --git a/src/app/core/services/document.service.ts b/src/app/core/services/document.service.ts
index 8939c6f..33d3af4 100644
--- a/src/app/core/services/document.service.ts
+++ b/src/app/core/services/document.service.ts
@@ -138,6 +138,18 @@ export class DocumentService {
     return this.http.get<DocumentMeta>(`${this.baseUrl}/${accessionNumber}/meta`);
   }
 
+  /**
+   * Get a document's content as text.
+   * Useful for fetching XML or HTML content for client-side parsing.
+   * @param accessionNumber - The document's accession number
+   * @param seq - The sequence number of the file
+   */
+  getDocumentText(accessionNumber: string, seq: number | string): Observable<string> {
+    return this.http.get(`${this.baseUrl}/${accessionNumber}/${seq}`, {
+      responseType: 'text',
+    });
+  }
+
   /**
    * Get context information for a document fragment.
    * @param accessionNumber - The document's accession number
diff --git a/src/app/core/services/xbrl-parser.service.ts b/src/app/core/services/xbrl-parser.service.ts
new file mode 100644
index 0000000..5755161
--- /dev/null
+++ b/src/app/core/services/xbrl-parser.service.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { XbrlReport } from '../models/document.model';
+
+/**
+ * Parses FilingSummary.xml from SEC XBRL filings
+ * into structured report metadata.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class XbrlParserService {
+  /**
+   * Parse FilingSummary.xml content into an array of XBRL reports.
+   * Filters out the "All Reports" book entry and sorts by position.
+   */
+  parseFilingSummary(xml: string): XbrlReport[] {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, 'text/xml');
+
+    const parseError = doc.querySelector('parsererror');
+    if (parseError) {
+      console.error('Failed to parse FilingSummary.xml:', parseError.textContent);
+      return [];
+    }
+
+    const reportElements = doc.querySelectorAll('MyReports > Report');
+    const reports: XbrlReport[] = [];
+
+    reportElements.forEach((el) => {
+      const reportType = this.getTextContent(el, 'ReportType');
+      const htmlFileName = this.getTextContent(el, 'HtmlFileName');
+
+      // Skip the "All Reports" book entry and reports without HTML files
+      if (reportType === 'Book' || !htmlFileName) {
+        return;
+      }
+
+      reports.push({
+        shortName: this.getTextContent(el, 'ShortName') || htmlFileName,
+        longName: this.getTextContent(el, 'LongName') || '',
+        htmlFileName,
+        menuCategory: this.getTextContent(el, 'MenuCategory') || '',
+        position: parseInt(this.getTextContent(el, 'Position') || '0', 10),
+        reportType,
+        role: this.getTextContent(el, 'Role') || undefined,
+      });
+    });
+
+    return reports.sort((a, b) => a.position - b.position);
+  }
+
+  private getTextContent(parent: Element, tagName: string): string {
+    return parent.querySelector(tagName)?.textContent?.trim() || '';
+  }
+}
diff --git a/src/app/features/document/document-viewer.component.css b/src/app/features/document/document-viewer.component.css
index b886116..5f028e6 100644
--- a/src/app/features/document/document-viewer.component.css
+++ b/src/app/features/document/document-viewer.component.css
@@ -17,3 +17,140 @@ iframe {
 main {
   position: relative;
 }
+
+/* ============================================
+   XBRL Report Viewer Styles
+   ============================================
+   These target injected HTML from SEC R*.htm files.
+   Using ::ng-deep because [innerHTML] content is
+   outside Angular's view encapsulation.
+   ============================================ */
+
+:host ::ng-deep .xbrl-content {
+  color: #cccccc;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+:host ::ng-deep .xbrl-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 16px;
+  background: #1e1e1e;
+  border: 1px solid #3c3c3c;
+}
+
+:host ::ng-deep .xbrl-content th {
+  background: #252526;
+  color: #cccccc;
+  font-weight: 600;
+  text-align: left;
+  padding: 8px 12px;
+  border: 1px solid #3c3c3c;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+:host ::ng-deep .xbrl-content td {
+  padding: 6px 12px;
+  border: 1px solid #2d2d2d;
+  font-size: 12px;
+  vertical-align: top;
+}
+
+:host ::ng-deep .xbrl-content tr:nth-child(even) {
+  background: #252526;
+}
+
+:host ::ng-deep .xbrl-content tr:nth-child(odd) {
+  background: #1e1e1e;
+}
+
+:host ::ng-deep .xbrl-content tr:hover {
+  background: #2a2d2e;
+}
+
+/* Numeric values — right-align */
+:host ::ng-deep .xbrl-content td.nump,
+:host ::ng-deep .xbrl-content td.num {
+  text-align: right;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  color: #4ec9b0;
+}
+
+/* Negative values */
+:host ::ng-deep .xbrl-content td.numn {
+  text-align: right;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  color: #f14c4c;
+}
+
+/* Row labels */
+:host ::ng-deep .xbrl-content td.pl,
+:host ::ng-deep .xbrl-content td.text {
+  color: #cccccc;
+}
+
+/* Bold/header rows within tables */
+:host ::ng-deep .xbrl-content tr.rh td,
+:host ::ng-deep .xbrl-content td strong,
+:host ::ng-deep .xbrl-content td b {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+/* Links in XBRL content */
+:host ::ng-deep .xbrl-content a {
+  color: #3794ff;
+  text-decoration: none;
+}
+
+:host ::ng-deep .xbrl-content a:hover {
+  text-decoration: underline;
+}
+
+/* Override any inline styles from SEC HTML */
+:host ::ng-deep .xbrl-content * {
+  background-color: transparent !important;
+  color: inherit;
+}
+
+:host ::ng-deep .xbrl-content table,
+:host ::ng-deep .xbrl-content th,
+:host ::ng-deep .xbrl-content td {
+  background-color: revert !important;
+}
+
+/* Report title styling */
+:host ::ng-deep .xbrl-content h1,
+:host ::ng-deep .xbrl-content h2,
+:host ::ng-deep .xbrl-content h3 {
+  color: #ffffff;
+  margin-bottom: 12px;
+}
+
+/* Hide any embedded scripts or style tags */
+:host ::ng-deep .xbrl-content style,
+:host ::ng-deep .xbrl-content script {
+  display: none;
+}
+
+/* Scrollable table wrapper for wide tables */
+:host ::ng-deep .xbrl-content {
+  overflow-x: auto;
+}
+
+/* Report tab scrollbar styling */
+.xbrl-content::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+.xbrl-content::-webkit-scrollbar-thumb {
+  background: #424242;
+  border-radius: 3px;
+}
+
+.xbrl-content::-webkit-scrollbar-track {
+  background: transparent;
+}
diff --git a/src/app/features/document/document-viewer.component.html b/src/app/features/document/document-viewer.component.html
index ddbb670..2bd39a2 100644
--- a/src/app/features/document/document-viewer.component.html
+++ b/src/app/features/document/document-viewer.component.html
@@ -89,15 +89,20 @@
                       <ng-icon [name]="getDocIcon(doc)" class="text-[14px] text-[#858585] flex-none" />
                       <div class="flex-1 min-w-0">
                         <div class="text-[12px] truncate" [class.text-white]="selectedDocument()?.sequence === doc.sequence">
-                          {{ doc.filename }}
+                          {{ getXbrlReportName(doc) || doc.filename }}
                         </div>
-                        @if (doc.description) {
+                        @if (getXbrlReportName(doc)) {
+                          <div class="text-[10px] text-[#6e6e6e] truncate">{{ doc.filename }}</div>
+                        } @else if (doc.description) {
                           <div class="text-[10px] text-[#6e6e6e] truncate">{{ doc.description }}</div>
                         }
                       </div>
                       @if (doc.sequence === 1) {
                         <span class="text-[9px] px-1 bg-[#0e639c] text-white flex-none">PRIMARY</span>
                       }
+                      @if (isXbrlDocument(doc)) {
+                        <span class="text-[9px] px-1 bg-[#4d3d0a] text-[#d4a843] flex-none">XBRL</span>
+                      }
                     </button>
                   }
                 </div>
@@ -137,6 +142,40 @@
           <p class="text-[15px]">Failed to load filing</p>
           <p class="text-[13px] mt-1 text-[#6e6e6e]">{{ error() }}</p>
         </div>
+      } @else if (xbrlMode()) {
+        <!-- XBRL Report Viewer -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+          <!-- Report tabs bar -->
+          <div class="flex-none flex items-center gap-1 px-2 py-1.5 bg-[#252526] border-b border-[#3c3c3c] overflow-x-auto">
+            @for (report of xbrlReports(); track report.position) {
+              <button
+                (click)="selectXbrlReport(report)"
+                class="px-3 py-1 text-[12px] whitespace-nowrap rounded-sm transition-colors"
+                [class]="selectedXbrlReport()?.htmlFileName === report.htmlFileName
+                  ? 'bg-[#094771] text-white'
+                  : 'text-[#858585] hover:text-[#cccccc] hover:bg-[#3c3c3c]'"
+              >
+                {{ report.shortName }}
+              </button>
+            }
+          </div>
+
+          <!-- Report content -->
+          <div class="flex-1 overflow-auto">
+            @if (xbrlLoading()) {
+              <div class="flex items-center justify-center h-full">
+                <ng-icon name="lucideLoader2" class="text-[32px] text-[#858585] animate-spin" />
+              </div>
+            } @else if (xbrlReportHtml()) {
+              <div class="xbrl-content p-4" [innerHTML]="xbrlReportHtml()"></div>
+            } @else {
+              <div class="flex-1 flex flex-col items-center justify-center h-full text-[#6e6e6e]">
+                <ng-icon name="lucideTable" class="text-[48px] mb-3 opacity-30" />
+                <p class="text-[13px]">No XBRL reports found</p>
+              </div>
+            }
+          </div>
+        </div>
       } @else if (iframeSrc()) {
         <!-- Document Frame Container -->
         <div class="flex-1 relative overflow-auto bg-white">
@@ -146,7 +185,7 @@
               <ng-icon name="lucideLoader2" class="text-[32px] text-[#858585] animate-spin" />
             </div>
           }
-          
+
           <!-- Iframe -->
           <iframe
             [src]="iframeSrc()"
@@ -173,7 +212,12 @@
   <!-- Status Bar -->
   <footer class="flex-none h-6 flex items-center justify-between px-3 bg-[#007acc] text-white text-[12px]">
     <div class="flex items-center gap-3">
-      @if (selectedDocument()) {
+      @if (xbrlMode() && selectedXbrlReport()) {
+        <span>{{ selectedXbrlReport()!.shortName }}</span>
+        @if (xbrlLoading()) {
+          <span class="text-blue-200">· Loading...</span>
+        }
+      } @else if (selectedDocument()) {
         <span>{{ selectedDocument()!.filename }}</span>
         @if (iframeLoading()) {
           <span class="text-blue-200">· Loading...</span>
diff --git a/src/app/features/document/document-viewer.component.ts b/src/app/features/document/document-viewer.component.ts
index 4bf6e72..0295a5c 100644
--- a/src/app/features/document/document-viewer.component.ts
+++ b/src/app/features/document/document-viewer.component.ts
@@ -8,7 +8,7 @@ import {
   HostListener,
 } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
@@ -32,8 +32,9 @@ import {
 import { AppChromeService } from '../../core/services/app-chrome.service';
 import { FilingService } from '../../core/services/filing.service';
 import { DocumentService } from '../../core/services/document.service';
+import { XbrlParserService } from '../../core/services/xbrl-parser.service';
 import { Filing } from '../../core/models/filing.model';
-import { DocumentFile, DocumentMeta } from '../../core/models/document.model';
+import { DocumentFile, DocumentMeta, XbrlReport } from '../../core/models/document.model';
 
 /**
  * Selection data received from iframe postMessage
@@ -91,6 +92,7 @@ export class DocumentViewerComponent {
   private readonly sanitizer = inject(DomSanitizer);
   private readonly filingService = inject(FilingService);
   private readonly documentService = inject(DocumentService);
+  private readonly xbrlParser = inject(XbrlParserService);
   private readonly destroyRef = inject(DestroyRef);
 
   // Convert route params to signal
@@ -115,6 +117,14 @@ export class DocumentViewerComponent {
   // Selection context (for future AI/context features)
   selectionContext = signal<SelectionData | null>(null);
 
+  // XBRL viewer state
+  xbrlMode = signal(false);
+  xbrlReports = signal<XbrlReport[]>([]);
+  xbrlReportNames = signal<Map<string, string>>(new Map());
+  selectedXbrlReport = signal<XbrlReport | null>(null);
+  xbrlReportHtml = signal<SafeHtml | null>(null);
+  xbrlLoading = signal(false);
+
   sections = signal({
     info: true,
     documents: true,
@@ -230,7 +240,119 @@ export class DocumentViewerComponent {
 
   selectDocument(doc: DocumentFile) {
     this.selectedDocument.set(doc);
-    this.loadDocumentInIframe(doc);
+
+    if (this.isXbrlDocument(doc)) {
+      this.enterXbrlMode();
+    } else {
+      if (this.xbrlMode()) {
+        this.exitXbrlMode();
+      }
+      this.loadDocumentInIframe(doc);
+    }
+  }
+
+  isXbrlDocument(doc: DocumentFile): boolean {
+    const desc = (doc.description || '').toUpperCase();
+    const filename = (doc.filename || '').toLowerCase();
+    return desc.includes('XBRL') || filename === 'filingsummary.xml';
+  }
+
+  enterXbrlMode() {
+    const accessionNumber = this.accessionNumber();
+    if (!accessionNumber) return;
+
+    // Find FilingSummary.xml in the document list
+    const summaryDoc = this.documents().find(
+      (d) => (d.filename || '').toLowerCase() === 'filingsummary.xml'
+    );
+
+    if (!summaryDoc?.sequence) {
+      // No FilingSummary.xml found — fall back to iframe for this XBRL doc
+      const doc = this.selectedDocument();
+      if (doc) {
+        this.loadDocumentInIframe(doc);
+      }
+      return;
+    }
+
+    this.xbrlMode.set(true);
+    this.xbrlLoading.set(true);
+    this.iframeSrc.set(null);
+
+    // Fetch and parse FilingSummary.xml
+    this.documentService
+      .getDocumentText(accessionNumber, summaryDoc.sequence)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (xml) => {
+          const reports = this.xbrlParser.parseFilingSummary(xml);
+          this.xbrlReports.set(reports);
+
+          // Build filename→shortName map for sidebar labels
+          const nameMap = new Map<string, string>();
+          for (const report of reports) {
+            nameMap.set(report.htmlFileName.toLowerCase(), report.shortName);
+          }
+          this.xbrlReportNames.set(nameMap);
+
+          // Auto-select first report
+          if (reports.length > 0) {
+            this.selectXbrlReport(reports[0]);
+          } else {
+            this.xbrlLoading.set(false);
+          }
+        },
+        error: (err) => {
+          console.error('Failed to load FilingSummary.xml:', err);
+          this.xbrlLoading.set(false);
+        },
+      });
+  }
+
+  selectXbrlReport(report: XbrlReport) {
+    const accessionNumber = this.accessionNumber();
+    if (!accessionNumber) return;
+
+    this.selectedXbrlReport.set(report);
+    this.xbrlLoading.set(true);
+    this.xbrlReportHtml.set(null);
+
+    // Find the R*.htm file in documents list by matching filename
+    const reportDoc = this.documents().find(
+      (d) => (d.filename || '').toLowerCase() === report.htmlFileName.toLowerCase()
+    );
+
+    if (!reportDoc?.sequence) {
+      this.xbrlLoading.set(false);
+      return;
+    }
+
+    this.documentService
+      .getDocumentText(accessionNumber, reportDoc.sequence)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (html) => {
+          this.xbrlReportHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
+          this.xbrlLoading.set(false);
+        },
+        error: (err) => {
+          console.error('Failed to load XBRL report:', err);
+          this.xbrlLoading.set(false);
+        },
+      });
+  }
+
+  exitXbrlMode() {
+    this.xbrlMode.set(false);
+    this.xbrlReports.set([]);
+    this.selectedXbrlReport.set(null);
+    this.xbrlReportHtml.set(null);
+    this.xbrlLoading.set(false);
+  }
+
+  getXbrlReportName(doc: DocumentFile): string | null {
+    const filename = (doc.filename || '').toLowerCase();
+    return this.xbrlReportNames().get(filename) || null;
   }
 
   /**