diff --git a/app/components/TabelaDocumentos.mjs b/app/components/TabelaDocumentos.mjs
new file mode 100644
index 0000000..3d7120b
--- /dev/null
+++ b/app/components/TabelaDocumentos.mjs
@@ -0,0 +1,207 @@
+// @ts-check
+
+import { useState, useEffect } from "react";
+import { createElement as h } from "react";
+
+export default function TabelaDocumentos() {
+  const [documentos, setDocumentos] = useState([]);
+
+  function loadDocuments() {
+    const docs = JSON.parse(localStorage.getItem('documentos') || '[]');
+    // Ordena por timestamp mais recente primeiro
+    const sortedDocs = docs.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+    setDocumentos(sortedDocs);
+  }
+
+  function clearAllDocuments() {
+    localStorage.removeItem('documentos');
+    setDocumentos([]);
+  }
+
+  function removeDocument(index) {
+    const updatedDocs = documentos.filter((_, i) => i !== index);
+    localStorage.setItem('documentos', JSON.stringify(updatedDocs));
+    setDocumentos(updatedDocs);
+  }
+
+  useEffect(() => {
+    // Carrega documentos ao montar o componente
+    loadDocuments();
+
+    // Escuta evento customizado para recarregar quando novo documento é criado
+    function handleDocumentCreated() {
+      loadDocuments();
+    }
+
+    window.addEventListener('documentoCreated', handleDocumentCreated);
+
+    return () => {
+      window.removeEventListener('documentoCreated', handleDocumentCreated);
+    };
+  }, []);
+
+  if (documentos.length === 0) {
+    return h('div', { style: { padding: '20px', textAlign: 'center', color: '#666' } },
+      'Nenhum documento encontrado'
+    );
+  }
+
+  return h('div', { style: { padding: '20px' } }, [
+    // Cabeçalho com botão limpar
+    h('div', {
+      key: 'header',
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '20px'
+      }
+    }, [
+      h('span', { key: 'count' }, `Total: ${documentos.length} documento(s)`),
+      h('button', {
+        key: 'clear-btn',
+        onClick: clearAllDocuments,
+        style: {
+          background: '#dc3545',
+          color: 'white',
+          border: 'none',
+          borderRadius: '3px',
+          padding: '5px 10px',
+          cursor: 'pointer'
+        }
+      }, 'Limpar Todos')
+    ]),
+
+    // Tabela
+    h('div', { key: 'table-container', style: { overflowX: 'auto' } },
+      h('table', {
+        style: {
+          width: '100%',
+          borderCollapse: 'collapse',
+          border: '1px solid #ddd'
+        }
+      }, [
+        // Cabeçalho da tabela
+        h('thead', { key: 'thead' },
+          h('tr', { style: { backgroundColor: '#f8f9fa' } }, [
+            h('th', {
+              key: 'th-id',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'left'
+              }
+            }, 'ID'),
+            h('th', {
+              key: 'th-situacao',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'left'
+              }
+            }, 'Situação'),
+            h('th', {
+              key: 'th-arquivo',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'left'
+              }
+            }, 'Arquivo Atual'),
+            h('th', {
+              key: 'th-chave',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'left'
+              }
+            }, 'Chave'),
+            h('th', {
+              key: 'th-data',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'left'
+              }
+            }, 'Data/Hora'),
+            h('th', {
+              key: 'th-acoes',
+              style: {
+                border: '1px solid #ddd',
+                padding: '12px',
+                textAlign: 'center'
+              }
+            }, 'Ações')
+          ])
+        ),
+
+        // Corpo da tabela
+        h('tbody', { key: 'tbody' },
+          documentos.map((doc, index) =>
+            h('tr', {
+              key: index,
+              style: { backgroundColor: index % 2 === 0 ? 'white' : '#f8f9fa' }
+            }, [
+              h('td', {
+                key: 'td-id',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px'
+                }
+              }, doc.id || 'N/A'),
+              h('td', {
+                key: 'td-situacao',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px'
+                }
+              }, doc.situacao || 'N/A'),
+              h('td', {
+                key: 'td-arquivo',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px'
+                }
+              }, doc.arquivoAtual || 'N/A'),
+              h('td', {
+                key: 'td-chave',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px'
+                }
+              }, doc.chave || 'N/A'),
+              h('td', {
+                key: 'td-data',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px'
+                }
+              }, new Date(doc.timestamp).toLocaleString('pt-BR')),
+              h('td', {
+                key: 'td-acoes',
+                style: {
+                  border: '1px solid #ddd',
+                  padding: '12px',
+                  textAlign: 'center'
+                }
+              },
+                h('button', {
+                  onClick: () => removeDocument(index),
+                  style: {
+                    background: '#dc3545',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '3px',
+                    padding: '4px 8px',
+                    cursor: 'pointer',
+                    fontSize: '12px'
+                  }
+                }, 'Remover')
+              )
+            ])
+          )
+        )
+      ])
+    )
+  ]);
+}