diff --git a/dbs/dbmercearia.mv.db b/dbs/dbmercearia.mv.db
index a890ed9..4fb1b56 100644
Binary files a/dbs/dbmercearia.mv.db and b/dbs/dbmercearia.mv.db differ
diff --git a/website/src/App.css b/website/src/App.css
index d8fd400..efcc06e 100644
--- a/website/src/App.css
+++ b/website/src/App.css
@@ -60,4 +60,9 @@
 
 .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
   background-color: rgb(116, 0, 0);
-} 
\ No newline at end of file
+} 
+
+main {
+  padding: 50px;
+  min-height: calc(100vh - 150px) !important;
+}
\ No newline at end of file
diff --git a/website/src/App.js b/website/src/App.js
index 3f6cf09..f023a0d 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -1,30 +1,63 @@
-import React, { useState, useEffect } from "react";
-import './App.css';
+import React from "react";
 import _service from '@netuno/service-client';
-import TabelaProdutos from './Components/TabelaProdutos/index.jsx';
+import { Layout, Menu } from 'antd';
 
-import Cards from "./Components/Cards/index.jsx";
-import { Layout, Menu, Breadcrumb } from 'antd';
-import NavBar from "./Components/NavBar";
-const { Header, Content, Footer } = Layout;
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
+import './App.css';
+import Cards from './pages/Cards'
+import TabelaLojas from "./pages/TabelaLojas";
+import TabelaCategorias from "./pages/TabelaCategorias";
+import TabelaProdutos from "./pages/TabelaProdutos";
+import CriarProduto from "./pages/CriarProduto";
 
-function App() {
+const { Header, Content, Footer } = Layout;
 
+export default () => {
 
   return (
-    <div className="App">
-
-      <Layout className="layout">
-        <Content style={{ padding: '0 50px' }}>
-          <div className="site-layout-content">
-            <NavBar/>
-          </div>
+    <Router>
+      <Layout>
+        <Header>
+          <Menu mode="horizontal" >
+            <Menu.Item><Link to="/">Home</Link></Menu.Item>
+            <Menu.Item><Link to="/lojas">Lojas</Link></Menu.Item>
+            <Menu.Item><Link to="/categorias">Categorias</Link></Menu.Item>
+            <Menu.Item><Link to="/produtos">Produtos</Link></Menu.Item>
+            <Menu.Item><Link to="/criarProduto">Criar Produto</Link></Menu.Item>
+          </Menu>
+        </Header>
+        <Content>
+          <Switch>
+            <Route path="/lojas">
+              <TabelaLojas />
+            </Route>
+            <Route path="/categorias">
+              <TabelaCategorias />
+            </Route>
+            <Route path="/produtos">
+              <TabelaProdutos />
+            </Route>
+            <Route path="/criarProduto">
+              <CriarProduto />
+            </Route>
+            <Route path="/">
+              <Cards />
+            </Route>
+          </Switch>
         </Content>
-        <Footer style={{ textAlign: 'center' }}>Gestor de Mercearia ©2021</Footer>
+        <Footer>
+          <h2>Gestão de Mercearias</h2>
+          Desenvolvimento de demonstração.
+        </Footer>
       </Layout>
-    </div>
+    </Router>
   );
-}
+};
+
 
-export default App;
diff --git a/website/src/Components/NavBar/index.css b/website/src/Components/NavBar/index.css
deleted file mode 100644
index afaf81a..0000000
--- a/website/src/Components/NavBar/index.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.site-layout-content {
-    min-height: 280px;
-    padding: 24px;
-    background: #fff;
-  }
-  #components-layout-demo-top .logo {
-    float: left;
-    width: 120px;
-    height: 31px;
-    margin: 16px 24px 16px 0;
-    background: rgba(255, 255, 255, 0.3);
-  }
-  .ant-row-rtl #components-layout-demo-top .logo {
-    float: right;
-    margin: 16px 0 16px 24px;
-  }
-
-  .ant-layout-header {
-    height: 64px;
-    padding: 0 50px;
-    color: rgba(255, 255, 255, 0.85);
-    line-height: 64px;
-    background: #f0f0f0;
-}
-
-.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
-    top: 0;
-    margin-top: 0;
-    padding: 0 20px;
-    border-color: #383838;
-        border-bottom-color: rgb(56, 56, 56);
-    border-bottom: 0;
-  } 
-
diff --git a/website/src/Components/NavBar/index.jsx b/website/src/Components/NavBar/index.jsx
deleted file mode 100644
index ff4b9f7..0000000
--- a/website/src/Components/NavBar/index.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import './index.css';
-
-import { Tabs } from 'antd';
-import TabelaProdutos from '../TabelaProdutos/index.jsx';
-import TabelaLojas from '../TabelaLojas/index.jsx';
-import TabelaCategorias from '../TabelaCategorias/index.jsx';
-import Cards from '../Cards/index.jsx';
-
-const { TabPane } = Tabs;
-
-function callback(key) {
-  console.log(key);
-}
-const NavBar = () => {
-  return (
-    <Tabs defaultActiveKey="1" onChange={callback}>
-      <TabPane tab="Home" key="1">
-        <Cards/>
-    </TabPane>
-      <TabPane tab="Mercearias" key="2">
-       <TabelaLojas/>
-    </TabPane>
-      <TabPane tab="Categorias" key="3">
-        <TabelaCategorias/>
-    </TabPane>
-    <TabPane tab="Produtos" key="4">
-        <TabelaProdutos/>
-    </TabPane>
-    </Tabs>
-
-  );
-}
-
-export default NavBar;
\ No newline at end of file
diff --git a/website/src/Components/Cards/index.jsx b/website/src/pages/Cards/index.js
similarity index 65%
rename from website/src/Components/Cards/index.jsx
rename to website/src/pages/Cards/index.js
index 8538d54..90f295f 100644
--- a/website/src/Components/Cards/index.jsx
+++ b/website/src/pages/Cards/index.js
@@ -1,41 +1,50 @@
 import React from 'react';
 
 import { Card, Col, Row } from 'antd';
+import { Link } from 'react-router-dom';
 const { Meta } = Card;
 
-const Cards = () => {
+export default () => {
     return (
-        <div className="site-card-wrapper" style={{marginLeft: '130px',padding : ' 70px 0', textAlign: 'center'}}>
+        <div className="site-card-wrapper" style={{ marginLeft: '130px', padding: ' 70px 0', textAlign: 'center' }}>
             <Row gutter={6}>
                 <Col span={8}>
+                <Link to="/lojas">
                     <Card
                         hoverable
-                        style={{ width:400 }}
-                        cover={<img alt="mercearia" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
+                        style={{ width: 400 }}
+                        cover={<img alt="mercearia" src="https://media.timeout.com/images/104094102/750/422/image.jpg" 
+                        />}
                     >
-                        <Meta title="Mercearias" description="Lorem Ipsum" />
+                        <Link to="/lojas"/>
+                        <Meta title="Mercearias" description="Lorem Ipsum"/>
                     </Card>
+                    </Link>
                 </Col>
                 <Col span={8}>
-                <Card
+                <Link to="/categorias">
+                    <Card
                         hoverable
                         style={{ width: 400 }}
                         cover={<img alt="categorias" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
                     >
                         <Meta title="Categorias" description="Lorem Ipsum" />
                     </Card>
+                    </Link>
                 </Col>
                 <Col span={8}>
-                <Card
+                <Link to="/produtos">
+                    <Card
                         hoverable
                         style={{ width: 400 }}
                         cover={<img alt="mercearia" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
                     >
                         <Meta title="Produtos" description="Lorem Ipsum" />
                     </Card>
+                    </Link>
                 </Col>
             </Row>
-        </div>);
-}
+        </div>
+    );
+};
 
-export default Cards;
\ No newline at end of file
diff --git a/website/src/pages/CriarProduto/index.js b/website/src/pages/CriarProduto/index.js
new file mode 100644
index 0000000..cbce94f
--- /dev/null
+++ b/website/src/pages/CriarProduto/index.js
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+
+import _service from '@netuno/service-client';
+import { Form, Input, Button, Select } from 'antd';
+import './index.less';
+
+const layout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+const tailLayout = {
+    wrapperCol: {
+        offset: 8,
+        span: 16,
+    },
+};
+
+export default () => {
+
+
+    const onFinish = (values) => {
+        console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+    };
+
+    return (
+        <div >
+           
+            <div className="criarProd"> 
+            <h1 style={{textAlign: 'center'}}>Criar Produto</h1>
+            <Form
+                {...layout}
+                name="basic"
+                initialValues={{ remember: true }}
+                onFinish={onFinish}
+                onFinishFailed={onFinishFailed}
+            >
+                <Form.Item
+                    label="Nome do Produto"
+                    name="nome"
+                    rules={[{ required: true, message: 'Insira o nome do Produto.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item
+                    label="Categoria"
+                    name="categoria"
+                    rules={[{ required: true }]}
+                >
+                    <Select
+                        placeholder="Escolha a categoria"    
+                    >   
+                    </Select>
+                </Form.Item>
+
+                <Form.Item
+                    label="Quantidade"
+                    name="quantidade"
+                    rules={[{ required: true, message: 'Defina o stock inicial.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item
+                    label="Preço"
+                    name="preco"
+                    rules={[{ required: true, message: 'Defina o preço do produto.' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item {...tailLayout}>
+                    <Button type="primary" htmlType="submit">
+                        Submit
+        </Button>
+                </Form.Item>
+            </Form>
+            </div>
+        </div>
+    );
+};
diff --git a/website/src/pages/CriarProduto/index.less b/website/src/pages/CriarProduto/index.less
new file mode 100644
index 0000000..a4f00fc
--- /dev/null
+++ b/website/src/pages/CriarProduto/index.less
@@ -0,0 +1,5 @@
+.criarProd {
+    max-width: 600px;
+    margin-left: 100px;
+    width: 30%;
+}
\ No newline at end of file
diff --git a/website/src/Components/TabelaCategorias/index.jsx b/website/src/pages/TabelaCategorias/index.js
similarity index 86%
rename from website/src/Components/TabelaCategorias/index.jsx
rename to website/src/pages/TabelaCategorias/index.js
index 6a51042..b953a41 100644
--- a/website/src/Components/TabelaCategorias/index.jsx
+++ b/website/src/pages/TabelaCategorias/index.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Table, Tag, Space } from 'antd';
+import { Table } from 'antd';
 import _service from '@netuno/service-client';
 
 
-const TabelaCategorias = () => {
+export default () => {
 
     const [data, setData] = useState([]);
     
@@ -33,6 +33,4 @@ const TabelaCategorias = () => {
             <Table columns={columns} dataSource={data} />
         </div>
     );
-}
-
-export default TabelaCategorias;
\ No newline at end of file
+};
diff --git a/website/src/Components/TabelaLojas/index.jsx b/website/src/pages/TabelaLojas/index.js
similarity index 87%
rename from website/src/Components/TabelaLojas/index.jsx
rename to website/src/pages/TabelaLojas/index.js
index cff4379..015e1fc 100644
--- a/website/src/Components/TabelaLojas/index.jsx
+++ b/website/src/pages/TabelaLojas/index.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Table, Tag, Space } from 'antd';
+import { Table } from 'antd';
 import _service from '@netuno/service-client';
 
 
-const TabelaLojas = () => {
+export default () => {
 
     const [data, setData] = useState([]);
     
@@ -33,6 +33,4 @@ const TabelaLojas = () => {
             <Table columns={columns} dataSource={data} />
         </div>
     );
-}
-
-export default TabelaLojas;
\ No newline at end of file
+};
diff --git a/website/src/Components/TabelaProdutos/index.jsx b/website/src/pages/TabelaProdutos/index.js
similarity index 90%
rename from website/src/Components/TabelaProdutos/index.jsx
rename to website/src/pages/TabelaProdutos/index.js
index fbf4f9f..535695f 100644
--- a/website/src/Components/TabelaProdutos/index.jsx
+++ b/website/src/pages/TabelaProdutos/index.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Table, Tag, Space } from 'antd';
+import { Table } from 'antd';
 import _service from '@netuno/service-client';
 
 
-const TabelaProdutos = () => {
+export default () => {
 
     const [data, setData] = useState([]);
     
@@ -48,6 +48,4 @@ const TabelaProdutos = () => {
             <Table columns={columns} dataSource={data} />
         </div>
     );
-}
-
-export default TabelaProdutos;
\ No newline at end of file
+};