diff --git a/apirest/frontend/index.html b/apirest/frontend/index.html
index 01e2e2e..29dcd51 100644
--- a/apirest/frontend/index.html
+++ b/apirest/frontend/index.html
@@ -7,15 +7,23 @@
     <title>Produtos</title>
 </head>
 <body>
-    <header>
-
-    </header>
+   <h1> Lista de produtos</h1>
     <main>
-        <h1> Lista de produtos</h1>
+        
         <table>
+            <thead>
+                <tr>
+                    <th>Nome</th>
+                    <th>Preço</th>
+                    <th>Estoque</th>
+                </tr>
+            </thead>
+            <tbody id="conteudo_tabela">
+
+            </tbody>
 
         </table>
     </main>
-
+    <script src=""script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/apirest/frontend/script.js b/apirest/frontend/script.js
new file mode 100644
index 0000000..92377bb
--- /dev/null
+++ b/apirest/frontend/script.js
@@ -0,0 +1,20 @@
+async function carregarProdutos(){
+    const resposta = await fetch("http://localhost:5000/produtos");
+    if (!resposta.ok){
+        throw new Error("Não foi possível carregar a lista")
+    }
+    const produtos = await resposta.join();
+
+    let tbody = document.querySelector("tbody");
+
+    produtos.forEach(produto =>{
+        let linha = document.createElement("tr")
+        linha.innerHTML = `
+                        <td>${produto.nome}</td>
+                        <td>${produto.preco}</td>
+                        <td>${produto.estoque}</td>
+                    `
+                    
+        tbody.appendChild
+    })
+}
\ No newline at end of file
diff --git a/apirest/frontend/style.css b/apirest/frontend/style.css
index e69de29..d267766 100644
--- a/apirest/frontend/style.css
+++ b/apirest/frontend/style.css
@@ -0,0 +1,13 @@
+* {
+    margin : o;
+    padding: 0;
+}
+
+h1{
+    width : 300px;
+    background-color: brown;
+    padding: 20px;
+    border: 10px solid black;
+    text-align: center;
+    margin: 0 auto;
+}
\ No newline at end of file
