diff --git a/dbs/bdfarmacia.mv.db b/dbs/bdfarmacia.mv.db
index 20bcbef..05136f4 100644
Binary files a/dbs/bdfarmacia.mv.db and b/dbs/bdfarmacia.mv.db differ
diff --git a/server/services/categorias/get.js b/server/services/categorias/get.js
index 0d4a1f9..234689c 100644
--- a/server/services/categorias/get.js
+++ b/server/services/categorias/get.js
@@ -1,6 +1,6 @@
 const dbCategorias = _db.query(
     `select categoria.tipo
-     from categoria
+     from categoria 
     `)
 
 _out.json(dbCategorias)
\ No newline at end of file
diff --git a/server/services/produtos/options.js b/server/services/produtos/options.js
new file mode 100644
index 0000000..f731105
--- /dev/null
+++ b/server/services/produtos/options.js
@@ -0,0 +1 @@
+_out.json(_val.map().set("result", true))
\ No newline at end of file
diff --git a/server/services/stock/grafico.js b/server/services/stock/grafico.js
index b365b05..3de3d87 100644
--- a/server/services/stock/grafico.js
+++ b/server/services/stock/grafico.js
@@ -1,7 +1,6 @@
  const dbStock = _db.query(`
      SELECT
-         produto.nome AS "Nome", produto.stock AS "Stock"
-         
+         produto.nome AS "Nome", produto.stock AS "Stock" 
      FROM
          produto
  `)
diff --git a/website/src/App.js b/website/src/App.js
index d2f7402..408790b 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -3,38 +3,14 @@ import logo from './logo.svg';
 import './App.css';
 
 import _service from '@netuno/service-client';
+import BarraNavegacao from "./components/BarraNavegacao";
 
 function App() {
-  const [data, setData] = useState([]);
-  useEffect(() => {
-    _service({
-      url: "farmacias",
-      success: (response) => {
-      setData(response.json)
-      },
-      fail: (e) => {
-          console.log("Service Error", e);
-      }
-  });
-
-  }, []);
+  
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        {JSON.stringify(data)}
-      </header>
+      <h1>Gestor de Farmácias</h1>
+      <BarraNavegacao />
     </div>
   );
 }
diff --git a/website/src/components/BarraNavegacao/index.jsx b/website/src/components/BarraNavegacao/index.jsx
new file mode 100644
index 0000000..0038ce9
--- /dev/null
+++ b/website/src/components/BarraNavegacao/index.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Layout, Menu, Breadcrumb } from 'antd';
+
+
+import ProdsTabela from '../ProdsTabela/index.jsx';
+
+
+const { Header, Content, Footer } = Layout;
+
+const BarraNavegacao = () => {
+  return (
+    <Layout>
+    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
+      <div className="logo" />
+      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
+        <Menu.Item key="1">Produtos</Menu.Item>
+        <Menu.Item key="2">nav 2</Menu.Item>
+        <Menu.Item key="3">nav 3</Menu.Item>
+      </Menu>
+    </Header>
+    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
+      <Breadcrumb style={{ margin: '16px 0' }}>--
+        <Breadcrumb.Item>Gestor de Farmácias</Breadcrumb.Item>
+        <Breadcrumb.Item>Produtos</Breadcrumb.Item>
+        
+      </Breadcrumb>
+      <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }} key="1">
+        <ProdsTabela />
+      </div>
+    
+    </Content>
+    <Footer style={{ textAlign: 'center' }}>Gestor de Farmácias ©2021</Footer>
+  </Layout>
+  );
+}
+
+export default BarraNavegacao;
\ No newline at end of file
diff --git a/website/src/components/ProdsTabela/index.jsx b/website/src/components/ProdsTabela/index.jsx
new file mode 100644
index 0000000..ac9ac96
--- /dev/null
+++ b/website/src/components/ProdsTabela/index.jsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import { Table, Tag, Space } from 'antd';
+
+import _service from '@netuno/service-client';
+
+
+
+
+const ProdsTabela = () => {
+
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        _service({
+            url: "produtos",
+            success: (response) => {
+                setData(response.json)
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+            }
+        });
+
+    }, []);
+
+    const columns = [
+        {
+            title: 'Nome',
+            dataIndex: 'nome',
+            key: 'name',
+            render: text => <a>{text}</a>,
+        },
+        {
+            title: 'Categoria',
+            dataIndex: 'categoria',
+            key: 'categoria',
+        },
+        {
+            title: 'Stock',
+            dataIndex: 'stock',
+            key: 'stock',
+        },
+        {
+            title: 'Preço',
+            dataIndex: 'preco',
+            key: 'preco',
+        }];
+
+    return (
+        <div >
+            <h2>Tabela de Produtos-</h2>
+            <Table columns={columns} dataSource={data} />
+        </div>
+    );
+}
+
+export default ProdsTabela;
\ No newline at end of file