diff --git a/src/App.js b/src/App.js
index c20200c..9ef25cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,98 +1,251 @@
 import React, { Component } from 'react';
-import styled from 'styled-components'
-import Carrinho from './Components/Carrinho/Carrinho';
+import styled from 'styled-components';
+import ContainerProdutoCarrinho from './Components/Carrinho/ContainerProduto';
+import ProdutoCarrinho from './Components/Carrinho/ProdutoCarrinho';
 import Filtro from './Components/Filtro/Filtro';
-import Home from './Components/Home/Home'
-import QuantidadeProdutos from './Components/Home/QuantidadeProdutos';
+import Home from './Components/Home/Home';
+import Header from './Components/Home/Header';
 
 const Loja = styled.div`
-display: flex;
-flex-direction: column;
-border: 1px solid black; 
-margin: 1vw;
-height: 99vh;
+display: grid;
+grid-template-columns: 1fr 1fr 1fr;
+background-color: #1C1C1C;
 width: 100vw;
 `
-const ContainerProdutos = styled.div `
+const ContainerProdutos = styled.div`
 display: grid;
+grid-template-columns: 1fr 1fr 1fr 1fr;
+grid-template-rows: 1fr 1fr;
+text-align: center;
+color: white;
+`
+const Button = styled.button`
+padding: 2vh 2.6vw;
+background-color: black;
+color: white;
+`
+
+const BotaoRemover = styled.button`
+&:hover {
+  background-color: green;
+}
+width: 16vw;
+height: 8vh;
+background-color: black;
+color: white;
+font-size: 18px;
+margin-left: auto;
+margin-right: auto
 `
 
+let valorTotal = 0
+
 export default class App extends Component {
-  produtos = [{
-    id: 1,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 2,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 3,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 4,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 5,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 6,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 7,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  {
-    id: 8,
-    name: "Foguete da Missão Apollo 11",
-    value: 10000.0,
-    imageUrl: "https://picsum.photos/200/200",
-  },
-  ]
+  state = {
+    produtos: [{
+      id: 1,
+      name: "Esqui em Urano",
+      value: 5100,
+      imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/10/56/uranus-11625_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 2,
+      name: "Campos Brilhantes Lunares",
+      value: 3600,
+      imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/16/24/moon-11026_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 3,
+      name: "Núpcias em Vênus",
+      value: 2500,
+      imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 4,
+      name: "Monte Olímpo de Marte",
+      value: 2000,
+      imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/30/mars-11012_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 5,
+      name: "Manchas de Júpiter",
+      value: 3200,
+      imageUrl: "https://cdn.pixabay.com/photo/2012/10/26/02/44/moon-63136_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 6,
+      name: "Anéis de Saturno",
+      value: 4300,
+      imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/10/54/saturn-67671_960_720.jpg",
+      quantidade: 0
+    },
+    {
+      id: 7,
+      name: "Bate-Volta em Mercúrio",
+      value: 5700,
+      imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/09/33/mercury-11591_960_720.png",
+      quantidade: 0
+    },
+    {
+      id: 8,
+      name: "Kitesurf em Netuno",
+      value: 7400,
+      imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/09/17/neptune-67537_960_720.jpg",
+      quantidade: 0
+    },
+    ],
+
+    textoInput: '',
+
+    produtosCarrinho: [
+    ],
 
+    inputCrescente: "Crescente"
+  }
+
+  selecionarProduto = (id) => {
+    const produtoSelecionado = this.state.produtos.forEach((produto) => {
+      if (id === produto.id && produto.quantidade === 0) {
+        valorTotal += produto.value
+        produto.quantidade = 1
+        const novoProduto = {
+          imagem: produto.imageUrl,
+          id: produto.id,
+          quantidade: produto.quantidade,
+          nome: produto.name,
+          valor: produto.value
+        }
+        const novaListaDeProdutos = [...this.state.produtosCarrinho, novoProduto]
+        this.setState({ produtosCarrinho: novaListaDeProdutos })
+        this.setState({ total: valorTotal })
+        return novoProduto
+      } else if (id === produto.id) {
+        valorTotal += produto.value
+        produto.quantidade += 1
+        const novaLista = this.state.produtosCarrinho.filter((produto) => {
+          if (produto.id !== id) {
+            return produto.id
+          }
+        })
+        const novoProdutoQuantidade = {
+          ...produto,
+          imagem: produto.imageUrl,
+          quantidade: produto.quantidade,
+          nome: produto.name,
+          valor: produto.value * produto.quantidade
+        }
+        const novaListaDeProdutos = [...novaLista, novoProdutoQuantidade]
+        this.setState({ produtosCarrinho: novaListaDeProdutos })
+        this.setState({ total: valorTotal })
+        return produto
+      } else {
+        return produto
+      }
+    })
+  }
+
+  removerProduto = (id) => {
+    const novaLista = this.state.produtosCarrinho.filter((produto) => {
+      if (produto.id === id) {
+        valorTotal -= produto.valor
+        return !produto.id
+      } if (produto.id !== id) {
+        return produto.id
+      }
+    });
+    this.setState({ produtosCarrinho: novaLista });
+  }
+
+  onChangeCrescente = (e) => {
+    this.setState({ inputCrescente: e.target.value });
+    switch (this.state.inputCrescente) {
+      case "Crescente":
+        return this.setState({
+          ListaProdutos: this.state.produtos.sort(function (a, b) {
+            return b.value - a.value;
+          }),
+        });
+      case "Decrescente":
+        return this.setState({
+          ListaProdutos: this.state.produtos.sort(function (a, b) {
+            return a.value - b.value;
+          }),
+        });
+      default:
+        return true;
+    }
+  }
+
+  onChangeTextoInput = (e) => {
+    this.setState({ textoInput: e.target.value })
+  }
+
+  filtraProdutosBusca = () => {
+    return this.state.produtos.filter(produto => produto.name.includes(this.state.textoInput))
+  }
 
   render() {
-    const componentProduto = this.produtos.map((produto) => {
+
+    const componentCarrinho = this.state.produtosCarrinho.map((produto) => {
       return (
         <div>
-          <Home
-          imageUrl = {produto.imageUrl}
-          name = {produto.name}
-          value = {produto.value}
-          />
+          <ProdutoCarrinho
+            imagem={produto.imagem}
+            quantidade={produto.quantidade}
+            name={produto.nome}
+            value={produto.valor} />
+          <BotaoRemover onClick={() => this.removerProduto(produto.id)}>Remover Produto</BotaoRemover>
         </div>
       )
-    }) 
-    return(
-      <Loja>
-        <Filtro />
+    })
 
+    const listaFiltrada = this.filtraProdutosBusca()
+
+    const componentProduto = listaFiltrada.map((produto) => {
+      return (
         <div>
-          <QuantidadeProdutos />
-        {componentProduto}
+          <Home
+            imageUrl={produto.imageUrl}
+            name={produto.name}
+            value={produto.value}
+          />
+          <Button onClick={() => this.selecionarProduto(produto.id)}>Adicionar ao Carrinho</Button>
         </div>
 
-        <Carrinho />
-      </Loja>
+      )
+    })
+    
+    return (
+      <div>
+        <Header
+          lista={this.state.produtos}
+          inputCrescente={this.state.inputCrescente}
+          filtroCrescente={this.onChangeCrescente}
+          quantidade={componentProduto.length}
+        />
+        <Loja >
+          <Filtro
+            filtraProdutosBusca={this.onChangeTextoInput}
+            textoInput={this.state.textoInput}
+          />
+          <ContainerProdutos>
+            {componentProduto}
+          </ContainerProdutos>
+          <div>
+            <ContainerProdutoCarrinho
+              precoTotal={valorTotal}
+              produtoCarrinho={componentCarrinho}
+            >
+            </ContainerProdutoCarrinho>
+            <span>Total: RS<span>{valorTotal}</span>,00</span>
+          </div>
+        </Loja>
+      </div>
     )
   }
 }
-
diff --git a/src/Components/Carrinho/Carrinho.js b/src/Components/Carrinho/Carrinho.js
index 2378586..ac18bca 100644
--- a/src/Components/Carrinho/Carrinho.js
+++ b/src/Components/Carrinho/Carrinho.js
@@ -2,24 +2,24 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 const Cart = styled.div`
-border: 1px solid black;
 margin-top: 1vw;
+margin-left: 1.5vw;
 padding-left: 1vw;
 padding-right: 1vw;
+border: 1px solid white;
 height: 95vh;
-width: 13vw;
-position: relative;
+width: 15vw;
+color: white;
 `
-
 export default class Carrinho extends Component {
     render() {
         return (
             <Cart>
-                <h3>Carrinho</h3>
+                <h2>Carrinho</h2>
                 <p>1x Produto <button>X</button></p>
                 <p>1x Produto<button>X</button></p>
                 <p>Total: R$ 396.00</p>
             </Cart>
         )
     }
-}
+}
\ No newline at end of file
diff --git a/src/Components/Carrinho/ContainerProduto.js b/src/Components/Carrinho/ContainerProduto.js
new file mode 100644
index 0000000..f07f072
--- /dev/null
+++ b/src/Components/Carrinho/ContainerProduto.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const ContainerProduto = styled.div`
+border: 1px solid black;
+margin-top: 1vw;
+margin-left: 2vw;
+padding-left: 1vw;
+padding-right: 1vw;
+height: 80vh;
+width: 15vw;
+background-color: gray;
+display: flex;
+justify-content: center;
+`
+const ContainerProdutos = styled.div`
+height: 90vh;
+`
+export default class ContainerProdutoCarrinho extends Component {
+    render() {
+        return (
+            <ContainerProdutos>
+                <h3>Carrinho:</h3>
+                <ContainerProduto>
+                    <div>{this.props.produtoCarrinho}</div>
+                </ContainerProduto>
+            </ContainerProdutos>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Carrinho/ProdutoCarrinho.js b/src/Components/Carrinho/ProdutoCarrinho.js
new file mode 100644
index 0000000..e7839c2
--- /dev/null
+++ b/src/Components/Carrinho/ProdutoCarrinho.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const Produto = styled.div`
+margin: 0;
+padding: 0;
+height: 25vh;
+display: flex;
+flex-direction: column;
+`
+const Imagem = styled.img`
+width: 5vw;
+`
+const Teste = styled.div`
+display: flex;
+flex-direction: column;
+height: 10.6vh;
+`
+const DivImagem = styled.div`
+width: 15vw;
+heigth: 13vh;
+`
+const Teste2 = styled.div`
+display: flex;
+height: 15vh;
+width: 15vw;
+padding-top: 0.5vh;
+margin-left: auto;
+margin-right: auto;
+`
+const Valor = styled.div`
+font-size: 30px;
+text-align: center;
+`
+const Nome = styled.p`
+width: 11vw;
+`
+export default class ProdutoCarrinho extends Component {
+    render() {
+        return (
+            <Produto>
+                <Teste2>
+                <DivImagem><Imagem src={this.props.imagem} alt="" /></DivImagem>
+                <Teste>
+                 <p>{this.props.quantidade}x</p>
+                <Nome>{this.props.name}</Nome>
+                </Teste>
+                </Teste2>
+                <Valor>R${this.props.value},00</Valor>
+            </Produto>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Filtro/Filtro.js b/src/Components/Filtro/Filtro.js
index 1307fa7..db2cfe4 100644
--- a/src/Components/Filtro/Filtro.js
+++ b/src/Components/Filtro/Filtro.js
@@ -5,25 +5,24 @@ const BoxFiltro = styled.div`
 margin-top: 1vw;
 padding-left: 1vw;
 padding-right: 1vw;
-border: 1px solid black;
+border: 1px solid white;
 height: 95vh;
-width: 22vw;
+width: 15vw;
+color: white;
 `
-
 export default class Filtro extends Component {
     render() {
         return (
             <BoxFiltro>
                 <h2>Filtros</h2>
+                <br></br>
                 <label for="VMin" > Valor Mínimo: </label>
-                <input id="VMin" type="number" onChange="" />
+                <input id="VMin" type="number" value= {this.props.valueMin} onChange={(e)=>this.props.ValorMinimo(e)} />
                 <label for="VMax"> Valor Máximo: </label>
                 <input id="VMax" type="number" onChange="" />
                 <label for="BuscaProd"> Buscar Produto: </label>
-                <input id="BuscaProd" type="text" onChange="" />
+                <input id="BuscaProd" type="text" value= {this.props.textoInput} onChange={(e)=>this.props.filtraProdutosBusca(e)} /> 
             </BoxFiltro>
         )
     }
-}
-
-
+}
\ No newline at end of file
diff --git a/src/Components/Home/FiltroPreco.js b/src/Components/Home/FiltroPreco.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/Home/Header.js b/src/Components/Home/Header.js
new file mode 100644
index 0000000..0d7e6b3
--- /dev/null
+++ b/src/Components/Home/Header.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const Cabecalho = styled.div`
+width: 100vw;
+display: grid;
+grid-template-columns: auto auto auto;
+align-items: center; 
+background-color: #363636;
+`
+
+const HeaderLeft = styled.p`
+text-align: left;
+padding-left: 30px;
+color: white;
+
+`
+
+const Titulo = styled.a`
+text-align: center;
+`
+
+const HeaderRight = styled.p`
+text-align: right;
+padding-right: 30px;
+color: white;
+
+`
+
+
+export default class Header extends Component {
+
+
+    render() {
+        return (
+            <Cabecalho>
+                <HeaderLeft>Quantidade de produtos: {this.props.quantidade}</HeaderLeft>
+
+                <Titulo><h1>LABECOMMERCE 5</h1></Titulo>
+
+                <HeaderRight>
+                    <label> Orientação: </label>
+                    <select
+                        value={this.props.inputCrescente}
+                        onChange={(e) => this.props.filtroCrescente(e)}
+                    >
+                        <option value="Crescente">Preco: Crescente</option>
+                        <option value="Decrescente">Preco: Decrescente</option>
+                    </select>
+                </HeaderRight>
+            </Cabecalho>
+        )
+    }
+}
diff --git a/src/Components/Home/Home.js b/src/Components/Home/Home.js
index 4074d5e..82f802f 100644
--- a/src/Components/Home/Home.js
+++ b/src/Components/Home/Home.js
@@ -1,18 +1,28 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
+const Produto = styled.div`
+border: 1px dotted white; 
+background-color: green;
+margin-left: 0.2vw;
+margin-right: 0.2vw;
+margin-bottom: 0.3vw;
+margin-top: 0.3vw;
+`
 
-export default class Home extends Component {
+const Imagem = styled.img`
+width: 200px;
+height: 200px;
+`
 
+export default class Home extends Component {
     render() {
         return (
-
-                <div>
-                    <img src={this.props.imageUrl} alt="" />
+                <Produto>
+                    <Imagem src={this.props.imageUrl} alt="" />
                     <p>{this.props.name}</p>
-                    <p>{this.props.value}</p>
-                    <button>Adicionar ao Carrinho</button>
-                </div>
+                    <p>R${this.props.value},00</p>
+                </Produto>
         )
     }
-}
+}
\ No newline at end of file
diff --git a/src/Components/Home/QuantidadeProdutos.js b/src/Components/Home/QuantidadeProdutos.js
deleted file mode 100644
index a2168d8..0000000
--- a/src/Components/Home/QuantidadeProdutos.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react'
-import styled from 'styled-components'
-
-const Quantidade = styled.div`
-margin-top: 1vw;
-padding-left: 1vw;
-padding-right: 1vw;
-border: 1px solid black;
-height: 15vh;
-width: 56vw;
-`
-
-export default class QuantidadeProdutos extends Component {
-    render() {
-        return (
-            <Quantidade>
-                <p> Quantidade de Produto:</p>
-                <label> Orientação: </label>
-                <select>
-                    <option>Preço: Crescente</option>
-                    <option>Preço: Decrescente</option>
-                </select>
-            </Quantidade>
-        )
-    }
-}