diff --git a/gatsby-node.js b/gatsby-node.js
new file mode 100644
index 0000000..4220290
--- /dev/null
+++ b/gatsby-node.js
@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+  const projetoTemplate = path.resolve('./src/templates/projeto.js')
+  const res = await graphql(`
+    query {
+      allContentfulProjetos (
+        sort: { order: ASC, fields: createdAt }
+      ){
+        edges {
+          node {
+            slug
+          }
+        }
+      }
+    }
+  `)
+
+  const projetos = res.data.allContentfulProjetos.edges
+
+  projetos.forEach(({ node }, index) => {
+    const indexUltimoProjeto = projetos.length - 1;
+    const projetoAnterior = index === 0 ? projetos[indexUltimoProjeto].node : projetos[index - 1].node
+    const proximoProjeto = index === indexUltimoProjeto ? projetos[0].node : projetos[index + 1].node;
+
+    createPage({
+      component: projetoTemplate,
+      path: `/portfolio/${node.slug}`,
+      context: {
+        slug: node.slug,
+        prev: projetoAnterior,
+        next: proximoProjeto
+      }
+    })
+  })
+}
diff --git a/src/components/Categorias.js b/src/components/Categorias.js
index f590763..d945627 100644
--- a/src/components/Categorias.js
+++ b/src/components/Categorias.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button } from 'antd';
 import styles from '../styles/components/categorias.module.scss';
+import { Link } from 'gatsby';
 
 const Categorias= ({ categorias, comHashtag }) => {
 const prepend = comHashtag ? '#' : '';
@@ -8,13 +8,13 @@ const prepend = comHashtag ? '#' : '';
   return (
     <div className={styles.categorias}>
       {categorias.map(categoria => (
-        <Button
-          type='link'
-          href={categoria.href}
-          key={categoria.nome}
+        <Link
+          key={categoria}
+          to='/portfolio'
+          state={{ categoriaAtual: categoria }}
         >
-          {`${prepend}${categoria.nome}`}
-        </Button>
+          {`${prepend}${categoria}`}
+        </Link>
       ))}
     </div>
   );
diff --git a/src/components/PortfolioGrid.js b/src/components/PortfolioGrid.js
index bf39567..1536a47 100644
--- a/src/components/PortfolioGrid.js
+++ b/src/components/PortfolioGrid.js
@@ -1,108 +1,30 @@
 import React from 'react';
-import { chunk } from 'lodash';
+import { Link } from 'gatsby';
+import { chunk, uniqueId } from 'lodash';
 import styles from '../styles/components/portfolioGrid.module.scss';
 
-const PortfolioGrid = () => {
-  //TODO: Imagens de testes, substituir por dados do Contentful
-  const imagens = [
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/d991a7101643141.Y3JvcCwzNDM2LDI2ODcsMCw4.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion, motion, motion, editorial, testetaggrande'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/0911cd97182545.Y3JvcCw4MjksNjQ5LDI4NSww.gif',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/02543279225595.Y3JvcCw5MTEsNzEzLDQ3NCwyMDU.jpg',
-      titulo: 'FESTIVAL DE ARTES CÊNICAS DE BAURU',
-      tags: 'IDENTIDADE VISUAL, EDITORIAL, MOTION'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/6c135a80758357.Y3JvcCw5OTQsNzc4LDIwMSww.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/02543279225595.Y3JvcCw5MTEsNzEzLDQ3NCwyMDU.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/projects/404/11104597.5480eb86ae132.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-    {
-      src: 'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/e1b52279225595.5cbd3fd774ab0.jpg',
-      titulo: 'BODEGA',
-      tags: 'identidade visual, editorial, motion'
-    },
-  ];
-
-  const gruposDeImagens = chunk(imagens, 15);
+const PortfolioGrid = ({ projetos }) => {
+  const gruposDeProjetos = chunk(projetos, 15);
 
   return (
     <div className={styles.container}>
       {
-        gruposDeImagens.map((grupoDeImagens, index) => (
-          <div className={styles.portfolio}>
-            {grupoDeImagens.map((imagem, index) => {
+        gruposDeProjetos.map((grupoDeProjeto, index) => (
+          <div key={uniqueId('grupo_de_projeto_')} className={styles.portfolio}>
+            {grupoDeProjeto.map((projeto, index) => {
               const portfolioItemBaseClassName = styles.portfolioItem;
               const portfolioItemNumberClassName = styles[`portfolioItem${index + 1}`];
               const containerClassName = `${portfolioItemBaseClassName} ${portfolioItemNumberClassName}`;
 
               return (
-                <div className={containerClassName}>
-                  <img src={imagem.src} alt="Imagem do Portfólio" className={styles.portfolioImg} />
+                <Link to={`/portfolio/${projeto.slug}`} key={uniqueId('projeto_')} className={containerClassName}>
+                  <img src={projeto.cover} alt="Imagem do Portfólio" className={styles.portfolioImg} />
 
                   <div className={styles.descricao}>
-                    <p className={styles.titulo}>{imagem.titulo}</p>
-                    <p className={styles.tags}>{imagem.tags}</p>
+                    <p className={styles.nome}>{projeto.name}</p>
+                    <p className={styles.categorias}>{projeto.tags.join(', ')}</p>
                   </div>
-                </div>
+                </Link>
               );
             })}
           </div>
diff --git a/src/pages/portfolio.js b/src/pages/portfolio.js
index 0fbbe21..785cbf4 100644
--- a/src/pages/portfolio.js
+++ b/src/pages/portfolio.js
@@ -5,8 +5,10 @@ import { Button, Row, Col } from 'antd';
 import PortfolioGrid from '../components/PortfolioGrid';
 import Icone from '../components/Icone';
 import Categorias from '../components/Categorias';
+import { graphql } from 'gatsby';
+import { uniq } from 'lodash';
 
-const Portfolio = () => {
+const Portfolio = ({ data, location }) => {
   const categoriasRef = useRef();
   const [temScroll, setTemScroll] = useState(false);
 
@@ -35,37 +37,25 @@ const Portfolio = () => {
     return () => window.removeEventListener('resize', atualizaTemScroll);
   }, [])
 
-  //TODO: Substituir pelos dados do Contentful
-  const categorias = [
-    {
-      nome: 'todos',
-      href: '/projeto/'
-    },
-    {
-      nome: 'identidade visual',
-      href: ''
-    },
-    {
-      nome: 'editorial',
-      href: ''
-    },
-    {
-      nome: 'ilustração',
-      href: ''
-    },
-    {
-      nome: 'posters',
-      href: ''
-    },
-    {
-      nome: 'motion',
-      href: ''
-    },
-    {
-      nome: 'webdesing',
-      href: ''
-    },
-  ]
+  let categoriaAtual = 'TODOS';
+  if (location.action === 'PUSH' && location.state.categoriaAtual) {
+    categoriaAtual = location.state.categoriaAtual
+  }
+
+  const projetos = data.allContentfulProjetos.edges.map((data) => data.node);
+  const categorias = uniq(['TODOS'].concat(...projetos.map(projeto => projeto.tags)).map(tag => tag.toUpperCase()))
+
+  const [projetosFiltrados, setProjetosFiltrados] = useState([]);
+
+  useEffect(() => {
+    if (categoriaAtual === 'TODOS') {
+      setProjetosFiltrados(projetos);
+      return;
+    }
+
+    const newProjetosFiltrados = projetos.filter(projeto => projeto.tags.map(tag => tag.toUpperCase()).includes(categoriaAtual));
+    setProjetosFiltrados(newProjetosFiltrados);
+  }, [categoriaAtual]);
 
   return (
     <Layout>
@@ -121,7 +111,7 @@ const Portfolio = () => {
 
         <Row>
           <Col>
-            <PortfolioGrid />
+            <PortfolioGrid projetos={projetosFiltrados} />
           </Col>
         </Row>
        </div>
@@ -130,3 +120,20 @@ const Portfolio = () => {
 };
 
 export default Portfolio;
+
+export const pageQuery = graphql`
+  query allProjects {
+    allContentfulProjetos (
+      sort: { order: ASC, fields: createdAt }
+    ){
+      edges {
+        node {
+          name
+          tags
+          cover
+          slug
+        }
+      }
+    }
+  }
+`
diff --git a/src/styles/components/categorias.module.scss b/src/styles/components/categorias.module.scss
index c7f4073..2ecaf0b 100644
--- a/src/styles/components/categorias.module.scss
+++ b/src/styles/components/categorias.module.scss
@@ -5,8 +5,7 @@
   width: 100%;
 
   a {
-    margin-bottom: 10px;
-    padding: 4px 10px;
+    padding: 4px 8px;
     display: inline-block;
     color: $default;
     font-weight: 800;
@@ -39,7 +38,7 @@
   .categorias {
     a {
       font-size: 1rem;
-      padding: 4px 15px;
+      padding: 4px 12px;
     }
   }
 }
diff --git a/src/styles/components/portfolioGrid.module.scss b/src/styles/components/portfolioGrid.module.scss
index 5c1fe89..bab4179 100644
--- a/src/styles/components/portfolioGrid.module.scss
+++ b/src/styles/components/portfolioGrid.module.scss
@@ -55,7 +55,7 @@
   text-align: left;
   text-transform: uppercase;
 
-  .titulo {
+  .nome {
     margin-bottom: 0;
     line-height: 1.2;
   }
@@ -65,11 +65,11 @@
    .descricao  {
     max-width: 300px;
 
-    .titulo {
+    .nome {
       font-size: 2.1rem;
     }
 
-    .tags {
+    .categorias {
       font-size: .9rem;
     }
   }
@@ -86,11 +86,11 @@
    .descricao  {
     max-width: 150px;
 
-    .titulo {
+    .nome {
       font-size: .9rem;
     }
 
-    .tags {
+    .categorias {
       font-size: .6rem;
     }
   }
@@ -215,11 +215,11 @@
     .descricao  {
       max-width: 500px;
 
-      .titulo {
+      .nome {
         font-size: 2.5rem;
       }
 
-      .tags {
+      .categorias {
         font-size: .9rem;
       }
     }
@@ -240,11 +240,11 @@
     .descricao  {
       max-width: 200px;
 
-      .titulo {
+      .nome {
         font-size: 1.2rem;
       }
 
-      .tags {
+      .categorias {
         font-size: .7rem;
       }
     }
diff --git a/src/styles/pages/portfolio.module.scss b/src/styles/pages/portfolio.module.scss
index 1a51303..acd5262 100644
--- a/src/styles/pages/portfolio.module.scss
+++ b/src/styles/pages/portfolio.module.scss
@@ -62,7 +62,7 @@
 
   .container-categorias {
     button {
-      height: 40px;
+      height: 30px;
       align-self: center;
     }
 
@@ -157,5 +157,11 @@
         margin-top: -15px;
       }
     }
+
+    .container-categorias {
+      button {
+        height: 34px;
+      }
+    }
   }
 }
diff --git a/src/styles/pages/projeto.module.scss b/src/styles/templates/projeto.module.scss
similarity index 94%
rename from src/styles/pages/projeto.module.scss
rename to src/styles/templates/projeto.module.scss
index cf4bc50..0c4300d 100644
--- a/src/styles/pages/projeto.module.scss
+++ b/src/styles/templates/projeto.module.scss
@@ -7,9 +7,8 @@
   padding-bottom: 2rem;
   color: $default;
 
-  .botao-fechar {
+  .fechar {
     margin-left: 1.5rem;
-    margin-bottom: 1.5rem;
     font-size: .8rem;
     font-weight: 800;
     text-transform: uppercase;
@@ -22,6 +21,7 @@
   }
 
   .header {
+    margin-top: 1.5rem;
     width: 95%;
   }
 
@@ -39,6 +39,7 @@
       font-size: 1.3rem;
       font-weight: 800;
       line-height: 1.2;
+      text-transform: uppercase;
     }
 
     button {
@@ -101,6 +102,8 @@
   }
 
   .categorias {
+    margin-bottom: 1rem;
+    margin-right: 1rem;
     text-align: right;
   }
 
@@ -114,7 +117,7 @@
 
 @media (min-width: 990px) {
   .container {
-    .botao-fechar {
+    .fechar {
       margin-bottom: 2.5rem;
       font-size: 1rem;
     }
diff --git a/src/pages/projeto.js b/src/templates/projeto.js
similarity index 55%
rename from src/pages/projeto.js
rename to src/templates/projeto.js
index 19df62f..de603a0 100644
--- a/src/pages/projeto.js
+++ b/src/templates/projeto.js
@@ -1,16 +1,21 @@
 import React, { useState } from 'react';
 import Layout from '../components/Layout';
-import styles from '../styles/pages/projeto.module.scss';
+import styles from '../styles/templates/projeto.module.scss';
 import { Button, Row, Col } from 'antd';
 import Icone from '../components/Icone';
 import Categorias from '../components/Categorias';
 import BotaoScrollTopo from '../components/BotaoScrollTopo'
+import { uniqueId } from 'lodash';
+import { Link } from 'gatsby';
+import { graphql } from 'gatsby';
+
+const Projeto = ({ data, pageContext }) => {
+  const projeto = data.contentfulProjetos;
+  const { next, prev } = pageContext;
 
-const Projeto = () => {
-  //TODO: Substituir descricao por dados do contentful
   const descricao = {
-    ptBr: 'Na Lata é um projeto nosso feito em parceira com @cafejoaodopo com muito carinho onde escolhemos 3 frases para ilustrar e se transformarem em lindas latas metálica decorativas. São latas para colocar café ou para qualquer outra coisa que você queira fazer com elas. São alegres, de bem com a vida (depois das 9h), não falam mal de ninguém... Ah é, elas vão bem em qualquer ambiente, juntas ou separadas',
-    en: 'Description in english'
+    ptBr: projeto.description.description,
+    en: projeto.descriptionEnUs?.descriptionEnUs
   }
 
   const [linguagemDescricao, setLinguagemDescricao] = useState('ptBr');
@@ -23,26 +28,6 @@ const Projeto = () => {
     setLinguagemDescricao('en')
   }
 
-  //TODO: Substituir titulo, categorias e imagens por dados do contentful
-  const titulo = 'COLEÇÃO DE LATAS ILUSTRADAS - NA LATA';
-  const categorias = [
-    {
-      nome: 'identidade visual',
-      href: ''
-    },
-    {
-      nome: 'ilustração',
-      href: ''
-    },
-  ]
-
-  const imagens = [
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/dd1a05101643141.5f23381da7fe8.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/60f570101643141.5f23381da7a45.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/baeb13101643141.5f23381da9284.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/disp/2362f8101643141.5f23381da9896.jpg'
-  ]
-
   return (
     <Layout>
       <div className={styles.container}>
@@ -50,24 +35,24 @@ const Projeto = () => {
 
         <Row>
           <Col lg={24}>
-            <Button
-              type='link'
-              href='/portfolio'
-              className={styles.botaoFechar}
+            <Link
+              to='/portfolio'
+              state={{ categoriaAtual: 'TODOS' }}
+              className={styles.fechar}
             >
               X Fechar
-            </Button>
+            </Link>
           </Col>
         </Row>
 
         <Row className={styles.header}>
           <Col xs={24} lg={24}>
             <div className={styles.containerTitulo}>
-              <Button icon={<Icone nome='setaEsquerda' />} className={styles.setaEsquerda} />
+              <Button icon={<Icone nome='setaEsquerda' />} className={styles.setaEsquerda} type='link' href={prev?.slug}/>
 
-              <h1 className={styles.titulo}>{titulo}</h1>
+              <h1>{projeto.name}</h1>
 
-              <Button icon={<Icone nome='setaDireita' />} className={styles.setaDireita} />
+              <Button icon={<Icone nome='setaDireita' />} className={styles.setaDireita} type='link' href={next?.slug} />
             </div>
           </Col>
         </Row>
@@ -99,7 +84,7 @@ const Projeto = () => {
 
           <Col xs={24} lg={12}>
             <div className={styles.categorias}>
-              <Categorias categorias={categorias} comHashtag/>
+              <Categorias categorias={projeto.tags.map(tag => tag.toUpperCase())} comHashtag/>
             </div>
           </Col>
         </Row>
@@ -107,8 +92,8 @@ const Projeto = () => {
         <Row>
           <Col xs={24} lg={24}>
             <div className={styles.containerImagem}>
-              {imagens.map((imagem, index) => (
-                <img src={imagem} alt={`imagem ${index + 1}`} />
+              {projeto.images.map((imagem, index) => (
+                <img src={imagem} alt={`imagem ${index + 1}`} key={uniqueId('imagem_')} />
               ))}
             </div>
           </Col>
@@ -119,3 +104,26 @@ const Projeto = () => {
 };
 
 export default Projeto;
+
+export const pageQuery = graphql`
+  query (
+    $slug: String
+  ) {
+    contentfulProjetos (
+      slug: {
+        eq: $slug
+      }
+    ) {
+      name
+      description {
+        description
+      }
+      descriptionEnUs {
+        descriptionEnUs
+      }
+      tags
+      cover
+      images
+    }
+  }
+`