diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
new file mode 100644
index 0000000000000000000000000000000000000000..1de399ab8bea5e76bb6a48622bff0a7f9954b1d1
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -0,0 +1,141 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import EncontrandoRecurso from '../../../img/ajuda/Encontrando_recursos.png';
+
+import  { Link } from 'react-router-dom';
+
+
+export default function CardEncontrando(props) {
+  return(
+    <CardAjuda>
+      <div className="card">
+        <img src={EncontrandoRecurso} alt="" />
+        <h3>Encontrando Recursos</h3>
+        <hr/>
+        <Link to={{
+          pathname : 'encontrando-recurso',
+          state : {value : '0'}
+        }}>Como fazer uma busca?</Link>
+        <br/>
+        <Link to={{
+          pathname : 'encontrando-recurso',
+          state : {value : '1'}
+        }}>Como filtrar os resultados?</Link>
+        <a></a>
+        <br/>
+        <Link to={{
+          pathname : 'encontrando-recurso',
+          state : {value : '2'}
+        }}>Como os recursos são ranqueados?</Link>
+        <br/>
+      </div>
+      <div className="card-rodape">
+      <Link to={{
+          pathname : 'encontrando-recurso',
+          state : {value : '0'}
+        }}>VER MAIS</Link>
+      </div>
+    </CardAjuda>
+  );
+}
+
+const CardAjuda = styled.div`
+
+  height: 360px;
+  margin-bottom: 20px
+
+
+  .card {
+    height: 280px;
+    padding: 40px 15px;
+    text-align: center;
+    font-size: 14px;
+    background-color:#fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    h3 {
+      font-size: 24px;
+      font-weight: 400;
+      color: #666;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      line-height: 1.1;
+    }
+
+    hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 0;
+      border-top: 1px solid #eee;
+      color: #a5a5a5;
+    }
+
+    a {
+      font-size: 15px;
+      color: #666;
+      text-decoration: none;
+      text-align: center;
+      :hover {
+        color: #000;
+      }
+
+    }
+
+    img {
+      height: 62px ;
+      width: 62px ;
+    }
+
+  }
+
+  .card-rodape {
+    box-sizing: border-box;
+
+    a {
+      border-radius: 0;
+      width: 100%;
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+      transition: .2s ease;
+      border: none;
+      height: 40px;
+      line-height: 40px;
+      background-color: #00bcd4;
+      touch-action: manipulation;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+      margin-bottom: 0;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      touch-action: manipulation;
+      cursor: pointer;
+      user-select: none;
+      box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    }
+  }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cf2a1882e2075073869b2dfa27b58ec380136d9
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -0,0 +1,150 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import GerenciandoConta from '../../../img/ajuda/Gerenciando_a_conta.png';
+
+import  { Link } from 'react-router-dom';
+
+
+export default function CardGerenciando(props) {
+  return(
+    <CardAjuda>
+      <div className="card">
+        <img src={GerenciandoConta} alt="" />
+        <h3>Gerenciando Conta</h3>
+        <hr/>
+        <Link to={{
+          pathname : 'gerenciando-conta',
+          state : {value : '0'}
+        }}>Por que me cadastrar?</Link>
+        <br/>
+        <Link to={{
+          pathname : 'gerenciando-conta',
+          state : {value : '1'}
+        }}>Como fazer meu cadastro?</Link>
+        <br/>
+        <Link to={{
+          pathname : 'gerenciando-conta',
+          state : {value : '2'}
+        }}>Como alterar minha senha?</Link>
+        <br/>
+        <Link to={{
+          pathname : 'gerenciando-conta',
+          state : {value : '3'}
+        }}>Como acessar a conta?</Link>
+        <br/>
+        <Link to={{
+          pathname : 'gerenciando-conta',
+          state : {value : '4'}
+        }}>Esqueci minha senha. O que fazer?</Link>
+        <br/>
+      </div>
+      <div className="card-rodape">
+        <Link to={{
+            pathname : 'gerenciando-conta',
+            state : {value : '0'}
+        }}>VER MAIS</Link>
+      </div>
+    </CardAjuda>
+  );
+}
+
+const CardAjuda = styled.div`
+
+  height: 360px;
+  margin-bottom: 20px
+
+
+  .card {
+    height: 280px;
+    padding: 40px 15px;
+    text-align: center;
+    font-size: 14px;
+    background-color:#fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    h3 {
+      font-size: 24px;
+      font-weight: 400;
+      color: #666;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      line-height: 1.1;
+    }
+
+    hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 0;
+      border-top: 1px solid #eee;
+      color: #a5a5a5;
+    }
+
+    a {
+      font-size: 15px;
+      color: #666;
+      text-decoration: none;
+      text-align: center;
+      :hover {
+        color: #000;
+      }
+
+    }
+
+    img {
+      height: 62px ;
+      width: 62px ;
+    }
+
+  }
+
+  .card-rodape {
+    box-sizing: border-box;
+
+    a {
+      border-radius: 0;
+      width: 100%;
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+      transition: .2s ease;
+      border: none;
+      height: 40px;
+      line-height: 40px;
+      background-color: #00bcd4;
+      touch-action: manipulation;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+      margin-bottom: 0;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      touch-action: manipulation;
+      cursor: pointer;
+      user-select: none;
+      box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    }
+  }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
new file mode 100644
index 0000000000000000000000000000000000000000..955fb287e9605ce736a831622dacfc1bd10da204
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -0,0 +1,135 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import ParticipandoRede from '../../../img/ajuda/Participando_da_rede.png';
+
+import  { Link } from 'react-router-dom';
+
+
+export default function CardParticipando(props) {
+  return(
+    <CardAjuda>
+      <div className="card">
+        <img src={ParticipandoRede} alt="" />
+        <h3>Participando da Rede</h3>
+        <hr/>
+        <Link to={{
+          pathname : 'participando-da-rede',
+          state : {value : '0'}
+        }}>Comentanto os recursos</Link>
+        <br/>
+        <Link to={{
+          pathname : 'participando-da-rede',
+          state : {value : '1'}
+        }}>Como relatar uma experiência ou avaliar um recurso?</Link>
+        <br/>
+      </div>
+      <div className="card-rodape">
+        <Link to={{
+            pathname : 'participando-da-rede',
+            state : {value : '0'}
+        }}>VER MAIS</Link>
+      </div>
+    </CardAjuda>
+  );
+}
+
+const CardAjuda = styled.div`
+
+  height: 360px;
+  margin-bottom: 20px
+
+
+  .card {
+    height: 280px;
+    padding: 40px 15px;
+    text-align: center;
+    font-size: 14px;
+    background-color:#fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    h3 {
+      font-size: 24px;
+      font-weight: 400;
+      color: #666;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      line-height: 1.1;
+    }
+
+    hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 0;
+      border-top: 1px solid #eee;
+      color: #a5a5a5;
+    }
+
+    a {
+      font-size: 15px;
+      color: #666;
+      text-decoration: none;
+      text-align: center;
+      :hover {
+        color: #000;
+      }
+
+    }
+
+    img {
+      height: 62px ;
+      width: 62px ;
+    }
+
+  }
+
+  .card-rodape {
+    box-sizing: border-box;
+
+    a {
+      border-radius: 0;
+      width: 100%;
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+      transition: .2s ease;
+      border: none;
+      height: 40px;
+      line-height: 40px;
+      background-color: #00bcd4;
+      touch-action: manipulation;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+      margin-bottom: 0;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      touch-action: manipulation;
+      cursor: pointer;
+      user-select: none;
+      box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+    }
+  }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
new file mode 100644
index 0000000000000000000000000000000000000000..81b4086ca87c9916ff54f87283ed8b11d8337ea6
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -0,0 +1,139 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import PublicandoRecursos from '../../../img/ajuda/Publicando_recursos.png';
+import  { Link } from 'react-router-dom';
+
+
+export default function CardPublicando(props) {
+return(
+  <CardAjuda>
+    <div className="card">
+      <img src={PublicandoRecursos} alt="" />
+      <h3>Publicando Recursos</h3>
+      <hr/>
+      <Link to={{
+        pathname : 'publicando-recurso',
+        state : {value : '0'}
+      }}>Por que enviar um recurso?</Link>
+      <br/>
+      <Link to={{
+        pathname : 'publicando-recurso',
+        state : {value : '1'}
+      }}>Como publicar um recurso?</Link>
+      <br/>
+      <Link to={{
+        pathname : 'publicando-recurso',
+        state : {value : '2'}
+      }}>Quais tipos de recurso e formatos a plataforma aceita?</Link>
+      <br/>
+    </div>
+    <div className="card-rodape">
+      <Link to={{
+          pathname : 'publicando-recurso',
+          state : {value : '0'}
+      }}>VER MAIS</Link>
+    </div>
+  </CardAjuda>
+);
+}
+
+const CardAjuda = styled.div`
+
+height: 360px;
+margin-bottom: 20px
+
+
+.card {
+  height: 280px;
+  padding: 40px 15px;
+  text-align: center;
+  font-size: 14px;
+  background-color:#fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+  h3 {
+    font-size: 24px;
+    font-weight: 400;
+    color: #666;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    line-height: 1.1;
+  }
+
+  hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #eee;
+    color: #a5a5a5;
+  }
+
+  a {
+    font-size: 15px;
+    color: #666;
+    text-decoration: none;
+    text-align: center;
+    :hover {
+      color: #000;
+    }
+
+  }
+
+  img {
+    height: 62px ;
+    width: 62px ;
+  }
+
+}
+
+.card-rodape {
+  box-sizing: border-box;
+
+  a {
+    border-radius: 0;
+    width: 100%;
+    font-size: 13px;
+    font-weight: 700;
+    color: #fff;
+    transition: .2s ease;
+    border: none;
+    height: 40px;
+    line-height: 40px;
+    background-color: #00bcd4;
+    touch-action: manipulation;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+  }
+}
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
new file mode 100644
index 0000000000000000000000000000000000000000..a96de5c6059f10c439737d49474bba54de34a043
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -0,0 +1,101 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import LoginImg from '../../../img/ajuda/login_img.jpg'
+import RecuperarSenhaImg from '../../../img/ajuda/recuperarsenha_img.jpg'
+
+
+
+
+export default function Forget(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
+      
+      <ol>
+        <li>
+          Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em 
+          “Entrar” no canto superior direito da página.
+        </li>
+        <li>Clique em “Esqueceu a senha? Clique Aqui!”.</li>
+        <img className="primeira" src={LoginImg} alt="primeira imagem"/>
+        <li>Preencha com o seu endereço de e-mail e clique em “Buscar”.</li>
+        <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
+        <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
+      </ol>
+            
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+    .primeira {
+      
+      height: 300px;
+      margin-right: 40px;
+      vertical-align: middle;
+    }
+    .segunda {
+      height: 150px;
+      margin-right: 40px;
+      vertical-align: middle;
+  
+    }
+  }
+  li {
+    font-size: 14px;
+  }
+
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
new file mode 100644
index 0000000000000000000000000000000000000000..f367cd4228e377798c981272934f44c90a36f470
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
@@ -0,0 +1,84 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowtoAccess(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>Para acessar a sua conta:</p>
+      <ol>
+        <li>Acesse a <a href="/" target="_blank">Página Inicial</a>.</li>
+        
+        <li>Clique em “Entrar” no canto superior direito.</li>
+        
+        <li>Preencha os campos solicitados.</li>
+        
+        <li>Clique em “Entrar”.</li>
+      </ol>
+      
+      
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToChange.js b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
new file mode 100644
index 0000000000000000000000000000000000000000..456d434ee41d3cfa05da84ce94c6473a91dff7ae
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
@@ -0,0 +1,85 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowToDo(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p> Para alterar sua senha você precisa estar conectado na Plataforma e então, seguir esses passos: </p>
+      <ol>
+        <li>Na <a href="/" target="_blank">Página Inicial</a>, clique no menu “Minha área” localizado no canto superior direito da página.</li>
+        
+        <li>Clique na opção “Configurações” que aparecerá no submenu.</li>
+        
+        <li>Clique no link “Gerenciar conta”, no menu lateral, localizado no canto superior esquerdo</li>
+        
+        <li>Na opção “Alterar senha”, preencha os campos com sua senha atual e depois com a nova senha que deseja.</li>
+        <li>Clique na opção "Alterar senha" logo abaixo.</li>
+      </ol>
+      
+      <p>Pronto! No próximo acesso, você já pode usar sua nova senha!</p>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToDo.js b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
new file mode 100644
index 0000000000000000000000000000000000000000..084e78f39c2813df5ad1ff970a268c18e868856f
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
@@ -0,0 +1,85 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowTodo(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p> Para fazer o cadastro é rapidinho: </p>
+      <ol>
+        <li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
+        
+        <li>Clique em “Cadastre-se” no canto superior direito da página.</li>
+        
+        <li> Preencha os campos solicitados.</li>
+        
+        <li>Clique em “Cadastrar”.</li>
+      </ol>
+      
+      <p>Pronto! Você será conectado automaticamente.</p>
+      <p>Nas próximas vezes que acessar a Plataforma, clique em “Entrar” e faça o login com seus dados de cadastro.</p>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/Why.js b/src/Components/HelpCenter/TabsManageAc/Why.js
new file mode 100644
index 0000000000000000000000000000000000000000..a18088dc0a76b4e072037c50abca8d249f182340
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/Why.js
@@ -0,0 +1,70 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function Why(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Quais vantagens eu terei após criar um perfil na Plataforma?
+      </p>
+      <p>
+        Ao se cadastrar, você terá mais opções de interação na plataforma, como 
+        criar suas próprias coleções de recursos, seguir usuários e coleções de 
+        outros usuários. Além disso, poderá contribuir com a rede de usuários 
+        fazendo relatos de experiências sobre o uso dos recursos, avaliando com 
+        estrelas, favoritando e reportando violações de recursos (quando necessário).
+      </p>
+    
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  
+ 
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsNetPart/How.js b/src/Components/HelpCenter/TabsNetPart/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..8317ce5f7997c4096b520ab8eafb4ca573077851
--- /dev/null
+++ b/src/Components/HelpCenter/TabsNetPart/How.js
@@ -0,0 +1,82 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function How(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Ao abrir um recurso, você pode avaliá-lo e descrever como foi sua experiência:
+      </p>
+      <ol>
+        <li>Abra o recurso desejado.</li>
+        <li>No fim da página haverá uma área de Relatos de Experiência.</li>
+        <li>Preencha as informações no quadro “Conte sua experiência”.</li>
+        <li>Clique em “Enviar”.</li>
+        
+      </ol>
+      <p>
+        Obs: as estrelinhas indicam se o recurso foi útil para você. Então quanto 
+        mais estrelinhas, melhor será a avaliação do recurso.
+      </p>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  
+ 
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsNetPart/What.js b/src/Components/HelpCenter/TabsNetPart/What.js
new file mode 100644
index 0000000000000000000000000000000000000000..5970321c16779868a1a1a2f37344b2826d941e72
--- /dev/null
+++ b/src/Components/HelpCenter/TabsNetPart/What.js
@@ -0,0 +1,83 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function What(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Aqui na Plataforma, incentivamos os usuários a comentarem os recursos 
+        contando como foi sua experiência de uso. Veja sugestões de pontos a serem abordados no seu comentário:
+      </p>
+      <ul>
+        <li>
+          Relatar como utilizou o recurso durante a aula, para que outros 
+          professores possam se basear e adaptar para o seu próprio objetivo pedagógico.
+        </li>
+        <li>Relatar a recepção dos alunos em relação ao recurso.</li>
+        <li>Apontar os pontos a serem melhorados no recurso para que o autor tenha a oportunidade de ajustar.</li>
+        <li>Apontar os pontos positivos do recurso para que o autor ganhe o devido reconhecimento e prestígio!</li>
+        
+      </ul>
+      
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  
+ 
+  ul {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Type.js b/src/Components/HelpCenter/TabsPlataformaMEC/Type.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c58236f5392e909353a48cfc08cc94e3e399c9f
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Type.js
@@ -0,0 +1,91 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+const tipos = [
+  {recursos:"- áudios;"},
+  {recursos:"- imagens;"},
+  {recursos:"- mapas;"},
+  {recursos:"- softwares educacionais"},
+  {recursos:"- textos;"},
+  {recursos:"- vídeos"}
+]
+
+export default function Type(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+      </p>
+      <ul>
+        {tipos.map((item)=>
+          <li>{item.recursos}</li>
+        
+        )}
+               
+      </ul>
+      <p>
+        E ainda, nesta plataforma são organizados pelos diferentes componentes curriculares (matemática, artes, etc.) e 
+        etapas de ensino (Ensino Médio, Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
+      </p>
+            
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  
+ 
+  ul {
+    padding-left: 0 !important;
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    list-style-type: none;
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
new file mode 100644
index 0000000000000000000000000000000000000000..644afb9807b8519ad91f35bab7397a923ce77392
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -0,0 +1,80 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Understand(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        <strong>Área de Recursos Educacionais Digitais</strong>
+        <br/>
+        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma licença 
+        que permite que o recurso possa ser utilizado, alterado e manipulado sem 
+        restrições. Adicionalmente, um recurso aberto pode utilizar um formato 
+        aberto, um formato de arquivo que permite a fácil edição por terceiros. 
+        Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+      </p>
+      <p>
+        <strong>Área de Materiais de Formação</strong>
+        <br/>
+        Nesta área, você acessa livremente materiais completos de formação, como 
+        cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados 
+        por equipes multidisciplinares e de autoria de pesquisadores e educadores 
+        renomados nas áreas.
+      </p>
+      <p>
+        <strong>Área de Coleções de Usuários</strong>
+        <br/>
+        Nesta área, você tem acesso às coleções criadas e organizadas pelos 
+        usuários da plataforma. É mais uma possibilidade de buscar recursos 
+        educacionais para sua aula!
+      </p>
+
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9d143c7b8ea0aea81d8d174025410213a88cf39
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -0,0 +1,111 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function What(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!</p>
+      <p>
+        A Plataforma MEC é parte do processo de implementação do Compromisso 6 
+        do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por 
+        objetivo “incorporar na política educacional o potencial da cultura digital, 
+        de modo a fomentar a autonomia para uso, reuso e adaptação de recursos 
+        educacionais digitais, valorizando a pluralidade e a diversidade da educação 
+        brasileira”. O documento completo pode ser consultado <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" >aqui</a>.
+        </p>
+      <p>
+        <strong>Abertos</strong>
+        <br/>
+        Recursos que, no mínimo, têm uma licença de uso mais flexível. Uma licença 
+        que permite que o recurso possa ser utilizado, alterado e manipulado sem 
+        restrições. Adicionalmente, um recurso aberto pode utilizar um formato 
+        aberto, um formato de arquivo que permite a fácil edição por terceiros. 
+        Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+      </p>
+      <p>
+        <strong>Grátis</strong>
+        <br/>
+        Recursos para os quais os usuários não têm que fazer qualquer desembolso 
+        monetário, mas que exibem certas restrições: usualmente não podem ser 
+        baixados ou alterados. E, muitas vezes, como os recursos fechados, é 
+        necessário cadastro ou troca de informações pessoais para seu uso.
+      </p>
+      <p>
+        <strong>Fechados</strong>
+        <br/>
+        Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo, 
+        podemos mencionar recursos que só são acessíveis mediante cadastro, que 
+        são pagos, ou que têm licenças restritivas (como “todos os direitos 
+        reservados”, o símbolo ©).
+      </p>
+
+      <p>
+      O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a 
+      importância dos recursos educacionais abertos para fomentar a qualidade da 
+      educação básica.
+      </p>
+      <p>
+      A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a importância 
+      dos recursos educacionais abertos para as instituições de educação superior 
+      e para as atividades de educação a distância, promovendo “a criação, 
+      disponibilização, uso e gestão de tecnologias e recursos educacionais abertos, 
+      por meio de licenças livres, que facilitem o uso, a revisão, a tradução, a 
+      adaptação, a recombinação, a distribuição e o compartilhamento gratuito pelo 
+      cidadão, resguardados os direitos autorais pertinentes.”
+      </p>
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c29e884bca59f0998009f46bf7db48020b82f5f
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -0,0 +1,85 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+const parcas = [
+  {parceiro: "- Portal do Profesor"},
+  {parceiro:"- Domínio Público;"},
+  {parceiro: "- Banco internacional de objetos educacionais;"},
+  {parceiro:"- TV Escola;"}
+]
+
+export default function Which(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+      </p>
+      <ul>
+        {parcas.map((item)=>
+          <li>{item.parceiro}</li>
+        
+        )}
+               
+      </ul>
+            
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  
+ 
+  ul {
+    padding-left: 0 !important;
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    list-style-type: none;
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
new file mode 100644
index 0000000000000000000000000000000000000000..087f162553f7f9a559d5c04dc2b9ec801e8cee40
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
@@ -0,0 +1,94 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import Busca from '../../../img/ajuda/busca_img.jpg'
+
+
+
+
+export default function HowToDo(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Siga os passos a seguir:
+      </p>
+      <ol>
+        <li>Acesse a <a href="/" target="_blank">Página Inicial</a>.</li>
+        
+        <li> 
+          Digite o que você procura na caixa de busca localizada no centro da 
+          página. Por exemplo: “vídeo aquecimento global” ou “aritmética”.
+        </li>
+        
+      </ol>
+      <img src={Busca} alt="Busca imagem"/>
+      <p>
+        No resultado serão apresentados os cartões de recursos relacionados à sua busca.
+      </p>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  img {
+    height: auto;
+    width: 100%;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
new file mode 100644
index 0000000000000000000000000000000000000000..78e362ff725494ad3209f4d6d2ffece03add983c
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
@@ -0,0 +1,73 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import Filtros from '../../../img/ajuda/filtros_img.jpg'
+
+
+
+
+export default function HowToFilter(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Após efetuar sua busca, você pode filtrar os resultados de acordo com o 
+        que procura, com a opção “Filtros” localizada no lado esquerdo da página.
+      </p>
+      
+      <img src={Filtros} alt="Busca imagem"/>
+      <p>
+        Você pode filtrar pelos componentes curriculares, tipos de recurso, etapas de ensino e palavra-chave.
+      </p>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  img {
+    height: 200px;
+    margin-right: 40px;
+    vertical-align: middle;
+  }
+
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
new file mode 100644
index 0000000000000000000000000000000000000000..0891ec5324efe7565f4460770b41bc7c9a0fc991
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
@@ -0,0 +1,65 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function HowToRank(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        O ranqueamento dos recursos está relacionado com as avaliações, estrelas, 
+        comentários, curtidas e até mesmo com as informações sobre o seu recurso. 
+        Ou seja, quanto mais interações positivas um recurso tiver, mais significativo 
+        ele será para a plataforma e seus usuários. Isso quer dizer que os recursos 
+        melhores ranqueados ganham mais destaque nos resultados de busca!
+      </p>
+      
+      
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/How.js b/src/Components/HelpCenter/TabsResoursePub/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbf097e1a37e4d83d797e789c2edf682b03abf70
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/How.js
@@ -0,0 +1,98 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function How(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Você possui um material pedagógico interessante e gostaria de compartilhar 
+        com outros professores? Aproveite o espaço da Plataforma MEC para publicar 
+        esse Recurso! Para isso, siga os passos a seguir:
+      </p>
+      <ol>
+        <li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
+        
+        <li>Clique no botão “Publicar Recurso” localizado no topo da página.</li>
+        
+        <li>
+          No quadro pontilhado em azul (enviar recurso), no canto esquerdo da 
+          página, você pode escolher o arquivo do seu computador, arrastá-lo ao 
+          quadro ou até mesmo enviar o link de um recurso no botão “enviar link” 
+          logo abaixo.
+        </li>
+        
+        <li>Em seguida, preencha as informações sobre o recurso no formulário ao lado.</li>
+      </ol>
+      
+      <p>
+        Dica: para que outros usuários encontre o seu recurso é muito importante 
+        que você preencha o formulário com a maior quantidade de detalhes possível!
+      </p>
+      <li>No final do formulário é só clicar no botão “Salvar e Avançar” para prosseguir ao próximo passo.</li>
+      <li>Ao concluir todas as etapas, você receberá uma mensagem de confirmação do envio do seu Recurso!</li>
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/Which.js b/src/Components/HelpCenter/TabsResoursePub/Which.js
new file mode 100644
index 0000000000000000000000000000000000000000..514e5211564eca79b8289a192c5c6098c470eabd
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/Which.js
@@ -0,0 +1,91 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Which(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Veja abaixo a lista dos Tipos de Recursos e alguns exemplos de Formatos de 
+        Arquivos que são aceitos para publicação na Plataforma MEC:
+      </p>
+      <ul>
+        <li>Imagem - JPG, GIF e PNG</li>
+        <li>Mapa - JPG, GIF e PNG</li>
+        <li>Animação/Simulador - SWF</li>
+        <li>Texto - PDF, TXT, DOC e DOCX (Word)</li>
+        <li>Áudio - MP3 e WAV</li>
+        <li>Vídeo - WMV</li>
+        <li>Apresentação - PPT e PPTX (PowerPoint)</li>
+        <li>Infográfico - JPG, GIF e PNG</li>
+        <li>Software Educacional - EXE</li>
+        <li>Outros - ZIP e RAR (Compactadores) XLS e XLSX (Excel)</li>
+        
+      </ul>
+      
+      
+      
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul {
+    margin-top: 0;
+    margin-bottom: 10px;
+    line-height: 1.42857143;
+  }
+
+  li {
+    font-size: 14px;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/Why.js b/src/Components/HelpCenter/TabsResoursePub/Why.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0e703c02e30124913f408254fd112162f90ff23
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/Why.js
@@ -0,0 +1,76 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Why(props) {
+  return(
+    <Card>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+      <div style={{marginBottom: "9px"}}>
+        <span>{props.title}</span>
+      </div>
+      <p>
+        Ao enviar um recurso você estará ajudando a fortalecer a distribuição 
+        de recursos educacionais digitais para o ensino básico brasileiro e 
+        contribuindo na valorização da pluralidade e da diversidade da educação 
+        brasileira.
+      </p>
+      
+      <p>
+        A Plataforma MEC é um meio seguro e um site de referência para a 
+        publicação e disseminação de Recursos Educacionais Digitais. Aproveite 
+        esse espaço para compartilhar com professores de todo o Brasil recursos 
+        criados por você ou aquele recurso de outro autor que você usou em aula 
+        e seus alunos gostaram!
+      </p>
+      <p>
+        A partir do momento que seu recurso estiver publicado na Plataforma, os 
+        usuários poderão interagir com seu recurso e você receberá as 
+        notificações dos comentários, avaliações e curtidas. Cada uma dessas 
+        interações contam para que seu recurso ganhe uma posição de destaque 
+        na Plataforma.
+      </p>
+      <p>Participe dessa rede de colaboração de fomento da qualidade da educação básica!</p>
+    </Card>
+  );
+}
+
+const Card = styled.div`
+  margin-bottom: 5px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  color: #666;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  p {
+    margin: 0 0 10px;
+    font-size: 15px;
+  }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8e749881d7e33c2b07668333a321bdc8de617d5
--- /dev/null
+++ b/src/Pages/TabsHelp/TabManageAc.js
@@ -0,0 +1,270 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import GerenciandoConta from '../../img/ajuda/Gerenciando_a_conta.png';
+import Why from '../../Components/HelpCenter/TabsManageAc/Why'
+import HowToDo from '../../Components/HelpCenter/TabsManageAc/HowToDo';
+import HowToChange from '../../Components/HelpCenter/TabsManageAc/HowToChange';
+import HowToAccess from '../../Components/HelpCenter/TabsManageAc/HowToAccess';
+import Forget from '../../Components/HelpCenter/TabsManageAc/Forget';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+
+
+
+
+
+
+
+export default function TabManageAc (props) {
+  const tabs= [
+    'Por que me cadastrar?',
+    'Como fazer meu cadastro?',
+    'Como alterar minha senha?',
+    'Como acessar a conta?',
+    'Esqueci minha senha. O que fazer?'
+  ]
+  
+  const [tabValue, setTabValue] = useState(
+    Number(props.location.state.value) || 0);
+
+  const handleChangeTab = (e, newValue) => {
+    setTabValue(newValue)
+}
+
+
+
+  return(
+    <div style={{backgroundColor:"#f4f4f4"}}>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      
+      <Secao>
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <Menu>
+              <h4>Gerenciando a conta</h4>
+              <TabsStyled orientation = "vertical"
+                          variant = "scrollable"
+                          value = {tabValue}
+                          onChange = {handleChangeTab}
+                          TabIndicatorProps = {{style:{display: "none"}}}
+              >
+              <TabStyled label={tabs[0]}></TabStyled>
+              <TabStyled label={tabs[1]}></TabStyled>
+              <TabStyled label={tabs[2]}></TabStyled>
+              <TabStyled label={tabs[3]}></TabStyled>
+              <TabStyled label={tabs[4]}></TabStyled>
+              </TabsStyled>
+              <br/>
+              <div className="voltarInicio">
+                <a href="ajuda">VOLTAR AO ÍNICIO</a>
+              </div>
+              <hr/>
+              <div className="procurava">
+                Não encontrou o que procurava? Entre em 
+                <a href="contato"> contato</a>
+              </div>
+            </Menu>
+          </Grid>
+
+          <Grid item xs={9}>
+            <Principal>
+              <div className="fixo">
+                <img src={GerenciandoConta} alt="Gerenciando a conta"/>
+                <span>Gerenciando a conta</span>
+              </div>
+              {tabValue === 0 && <Why title={tabs[0]}/>}
+              {tabValue === 1 && <HowToDo title={tabs[1]}/>}
+              {tabValue === 2 && <HowToChange title={tabs[2]}/>}
+              {tabValue === 3 && <HowToAccess title={tabs[3]}/>}
+              {tabValue === 4 && <Forget title={tabs[4]}/>}
+              <div className="resultadosProcura">
+                <span>Não era bem o que você procurava?</span>
+                <div className="subtitulo">
+                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+                </div>
+              </div>
+              <Grid style={{marginBottom:"50px"}} container spacing={2}>
+                <Grid item xs={4}>
+                  <CardPublicando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardEncontrando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardParticipando/>
+                </Grid>
+              </Grid>
+
+
+            </Principal>
+          </Grid>  
+        </Grid>        
+
+
+      </Secao>
+    </div>
+  );
+}
+
+const Principal = styled.div`
+  .fixo {
+    
+    height: 40px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    padding: 30px;
+    margin-bottom: 30px;
+    color: #666;
+
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin-right: 40px;
+      vertical-align: middle;
+
+    }
+
+    span {
+      font-size: 20px;
+      vertical-align: ;
+    }
+
+    
+
+  }
+  .resultadosProcura {
+    text-align: center;
+    margin-block: 30px;
+    padding-inline: 15px;
+    color: #666;
+    span {
+      font-size: 24px;
+    }
+    .subtitulo {
+      margin-top: 10px;
+
+      span {
+        font-size: 15px
+      }
+
+      a {
+        font-size: 15px;
+        padding: 0;
+        color:#00bcd4;
+        text-decoration: none;
+      }
+
+    }
+  }
+
+`
+
+const TabsStyled = styled(Tabs)`
+  
+  .Mui-selected {
+    background-color: #e7e4e4;
+  }
+
+  .MuiTab-root{
+    text-transform: none !important;
+  }
+
+`
+
+const TabStyled = styled(Tab)`
+    
+  padding: 4px 15px !important;
+  font-weight: 500;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+
+
+  
+
+
+  &:hover {
+    background-color: #e7e4e4;
+  }
+`
+
+
+const Menu = styled.div`
+  width: auto;
+  background-color: #fff;
+  color: #666;
+  padding-block: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+
+  h4 {
+    padding-inline: 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+
+  .voltarInicio {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .procurava {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+
+  }
+
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e8a6201aa2817d56d1a608428bf12f481380224
--- /dev/null
+++ b/src/Pages/TabsHelp/TabNetPart.js
@@ -0,0 +1,258 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import ParticipandoRede from '../../img/ajuda/Participando_da_rede.png';
+import How from '../../Components/HelpCenter/TabsNetPart/How'
+import What from '../../Components/HelpCenter/TabsNetPart/What'
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabNetPart (props) {
+  const tabs= [
+    'Como comentar ou avaliar um recurso?',
+    'Que tipo de comentário posso fazer sobre o recurso?',
+  ]
+  
+  const [tabValue, setTabValue] = useState(
+    Number(props.location.state.value) || 0);
+
+  const handleChangeTab = (e, newValue) => {
+    setTabValue(newValue)
+}
+
+
+
+  return(
+    <div style={{backgroundColor:"#f4f4f4"}}>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      
+      <Secao>
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <Menu>
+              <h4>Participando da rede</h4>
+              <TabsStyled orientation = "vertical"
+                          variant = "scrollable"
+                          value = {tabValue}
+                          onChange = {handleChangeTab}
+                          TabIndicatorProps = {{style:{display: "none"}}}
+              >
+              <TabStyled label={tabs[0]}></TabStyled>
+              <TabStyled label={tabs[1]}></TabStyled>
+              </TabsStyled>
+              <br/>
+              <div className="voltarInicio">
+                <a href="ajuda">VOLTAR AO ÍNICIO</a>
+              </div>
+              <hr/>
+              <div className="procurava">
+                Não encontrou o que procurava? Entre em 
+                <a href="contato"> contato</a>
+              </div>
+            </Menu>
+          </Grid>
+
+          <Grid item xs={9}>
+            <Principal>
+              <div className="fixo">
+                <img src={ParticipandoRede} alt="Participando da Rede"/>
+                <span>Participando da rede</span>
+              </div>
+              {tabValue === 0 && <How title={tabs[0]}/>}
+              {tabValue === 1 && <What title={tabs[1]}/>}
+              <div className="resultadosProcura">
+                <span>Não era bem o que você procurava?</span>
+                <div className="subtitulo">
+                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+                </div>
+              </div>
+              <Grid style={{marginBottom:"50px"}} container spacing={2}>
+                <Grid item xs={4}>
+                  <CardPublicando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardEncontrando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardGerenciando/>
+                </Grid>
+              </Grid>
+
+
+            </Principal>
+          </Grid>  
+        </Grid>        
+
+
+      </Secao>
+    </div>
+  );
+}
+
+const Principal = styled.div`
+  .fixo {
+    
+    height: 40px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    padding: 30px;
+    margin-bottom: 30px;
+    color: #666;
+
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin-right: 40px;
+      vertical-align: middle;
+
+    }
+
+    span {
+      font-size: 20px;
+      vertical-align: ;
+    }
+
+    
+
+  }
+  .resultadosProcura {
+    text-align: center;
+    margin-block: 30px;
+    padding-inline: 15px;
+    color: #666;
+    span {
+      font-size: 24px;
+    }
+    .subtitulo {
+      margin-top: 10px;
+
+      span {
+        font-size: 15px
+      }
+
+      a {
+        font-size: 15px;
+        padding: 0;
+        color:#00bcd4;
+        text-decoration: none;
+      }
+
+    }
+  }
+
+`
+
+const TabsStyled = styled(Tabs)`
+  
+  .Mui-selected {
+    background-color: #e7e4e4;
+  }
+
+  .MuiTab-root{
+    text-transform: none !important;
+  }
+
+`
+
+const TabStyled = styled(Tab)`
+    
+  padding: 4px 15px !important;
+  font-weight: 500;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+
+
+  
+
+
+  &:hover {
+    background-color: #e7e4e4;
+  }
+`
+
+
+const Menu = styled.div`
+  width: auto;
+  background-color: #fff;
+  color: #666;
+  padding-block: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+
+  h4 {
+    padding-inline: 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+
+  .voltarInicio {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .procurava {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+
+  }
+
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9e377e924e895ee4dd491631d8137b02c8c0bee
--- /dev/null
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -0,0 +1,240 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import Why from '../../Components/HelpCenter/TabsResoursePub/Why'
+import How from '../../Components/HelpCenter/TabsResoursePub/How'
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import What from '../../Components/HelpCenter/TabsPlataformaMEC/What';
+import Understand from '../../Components/HelpCenter/TabsPlataformaMEC/Understand';
+import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
+import Type from '../../Components/HelpCenter/TabsPlataformaMEC/Type';
+
+
+
+
+
+
+
+export default function TabPlataformaMEC (props) {
+  const tabs= [
+    'O que é a plataforma MEC?',
+    'Como foi construída a Plataforma MEC?',
+    'Entendendo as 3 áreas da Plataforma',
+    'Quais são os Portais Parceiros?',
+    'Tipos de recursos',
+    'Softwares específicos'
+  ]
+  
+  const [tabValue, setTabValue] = useState(
+    Number(props.location.state.value) || 0);
+
+  const handleChangeTab = (e, newValue) => {
+    setTabValue(newValue)
+}
+
+
+
+  return(
+    <div style={{backgroundColor:"#f4f4f4"}}>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      
+      <Secao>
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <Menu>
+              <h4>Plataforma MEC</h4>
+              <TabsStyled orientation = "vertical"
+                          variant = "scrollable"
+                          value = {tabValue}
+                          onChange = {handleChangeTab}
+                          TabIndicatorProps = {{style:{display: "none"}}}
+              >
+              <TabStyled label={tabs[0]}></TabStyled>
+              <TabStyled label={tabs[1]}></TabStyled>
+              <TabStyled label={tabs[2]}></TabStyled>
+              <TabStyled label={tabs[3]}></TabStyled>
+              <TabStyled label={tabs[4]}></TabStyled>
+              <TabStyled label={tabs[5]}></TabStyled>
+              </TabsStyled>
+              <br/>
+              <div className="voltarInicio">
+                <a href="ajuda">VOLTAR AO ÍNICIO</a>
+              </div>
+              <hr/>
+              <div className="procurava">
+                Não encontrou o que procurava? Entre em 
+                <a href="contato"> contato</a>
+              </div>
+            </Menu>
+          </Grid>
+
+          <Grid item xs={9}>
+            <Principal>
+              {tabValue === 0 && <What title={tabs[0]}/>}
+              {tabValue === 1 && <How title={tabs[1]}/>}
+              {tabValue === 2 && <Understand title={tabs[2]}/>}
+              {tabValue === 3 && <Which title={tabs[2]}/>}
+              {tabValue === 4 && <Type title={tabs[2]}/>}
+              {tabValue === 5 && <Which title={tabs[2]}/>}
+              
+              <Grid style={{marginBlock:"50px"}} container spacing={2}>
+                <Grid item xs={4}>
+                  <CardEncontrando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardParticipando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardGerenciando/>
+                </Grid>
+
+              </Grid>
+
+            </Principal>
+          </Grid>  
+        </Grid>        
+
+
+      </Secao>
+    </div>
+  );
+}
+
+const Principal = styled.div`
+  .fixo {
+    
+    height: 40px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    padding: 30px;
+    margin-bottom: 30px;
+    color: #666;
+
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin-right: 40px;
+      vertical-align: middle;
+
+    }
+
+    span {
+      font-size: 20px;
+      vertical-align: ;
+    }
+
+    
+
+  }
+ 
+`
+
+const TabsStyled = styled(Tabs)`
+  
+  .Mui-selected {
+    background-color: #e7e4e4;
+  }
+
+  .MuiTab-root{
+    text-transform: none !important;
+  }
+
+`
+
+const TabStyled = styled(Tab)`
+    
+  padding: 4px 15px !important;
+  font-weight: 500;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+
+
+  
+
+
+  &:hover {
+    background-color: #e7e4e4;
+  }
+`
+
+
+const Menu = styled.div`
+  width: auto;
+  background-color: #fff;
+  color: #666;
+  padding-block: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+
+  h4 {
+    padding-inline: 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+
+  .voltarInicio {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .procurava {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+
+  }
+
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9d407dde1d0498409a736e0bf4efd225da9e77b
--- /dev/null
+++ b/src/Pages/TabsHelp/TabResourseFind.js
@@ -0,0 +1,260 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import EncontrandoRecurso from '../../img/ajuda/Encontrando_recursos.png';
+import HowToDo from '../../Components/HelpCenter/TabsResourseFind/HowToDo'
+import HowToRank from '../../Components/HelpCenter/TabsResourseFind/HowToRank'
+import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilter';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabResourseFind (props) {
+  const tabs= [
+    'Como fazer uma busca?',
+    'Como filtrar os resultados?',
+    'Como os recursos são ranqueados?'
+  ]
+  
+  const [tabValue, setTabValue] = useState(
+    Number(props.location.state.value) || 0);
+
+  const handleChangeTab = (e, newValue) => {
+    setTabValue(newValue)
+}
+
+
+  return(
+    <div style={{backgroundColor:"#f4f4f4"}}>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      
+      <Secao>
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <Menu>
+              <h4>Encontrando Recursos</h4>
+              <TabsStyled orientation = "vertical"
+                          variant = "scrollable"
+                          value = {tabValue}
+                          onChange = {handleChangeTab}
+                          TabIndicatorProps = {{style:{display: "none"}}}
+              >
+              <TabStyled label={tabs[0]}></TabStyled>
+              <TabStyled label={tabs[1]}></TabStyled>
+              <TabStyled label={tabs[2]}></TabStyled>
+              </TabsStyled>
+              <br/>
+              <div className="voltarInicio">
+                <a href="ajuda">VOLTAR AO ÍNICIO</a>
+              </div>
+              <hr/>
+              <div className="procurava">
+                Não encontrou o que procurava? Entre em 
+                <a href="contato"> contato</a>
+              </div>
+            </Menu>
+          </Grid>
+
+          <Grid item xs={9}>
+            <Principal>
+              <div className="fixo">
+                <img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
+                <span>Encontrando recursos</span>
+              </div>
+              {tabValue === 0 && <HowToDo title={tabs[0]}/>}
+              {tabValue === 1 && <HowToFilter title={tabs[1]}/>}
+              {tabValue === 2 && <HowToRank title={tabs[2]}/>}
+              <div className="resultadosProcura">
+                <span>Não era bem o que você procurava?</span>
+                <div className="subtitulo">
+                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+                </div>
+              </div>
+              <Grid style={{marginBottom:"50px"}} container spacing={2}>
+                <Grid item xs={4}>
+                  <CardPublicando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardParticipando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardGerenciando/>
+                </Grid>
+              </Grid>
+
+            </Principal>
+          </Grid>  
+        </Grid>        
+
+
+      </Secao>
+    </div>
+  );
+}
+
+const Principal = styled.div`
+  .fixo {
+    
+    height: 40px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    padding: 30px;
+    margin-bottom: 30px;
+    color: #666;
+
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin-right: 40px;
+      vertical-align: middle;
+
+    }
+
+    span {
+      font-size: 20px;
+      vertical-align: ;
+    }
+
+    
+
+  }
+  .resultadosProcura {
+    text-align: center;
+    margin-block: 30px;
+    padding-inline: 15px;
+    color: #666;
+    span {
+      font-size: 24px;
+    }
+    .subtitulo {
+      margin-top: 10px;
+
+      span {
+        font-size: 15px
+      }
+
+      a {
+        font-size: 15px;
+        padding: 0;
+        color:#00bcd4;
+        text-decoration: none;
+      }
+
+    }
+  }
+
+`
+
+const TabsStyled = styled(Tabs)`
+  
+  .Mui-selected {
+    background-color: #e7e4e4;
+  }
+
+  .MuiTab-root{
+    text-transform: none !important;
+  }
+
+`
+
+const TabStyled = styled(Tab)`
+    
+  padding: 4px 15px !important;
+  font-weight: 500;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+
+
+  
+
+
+  &:hover {
+    background-color: #e7e4e4;
+  }
+`
+
+
+const Menu = styled.div`
+  width: auto;
+  background-color: #fff;
+  color: #666;
+  padding-block: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+
+  h4 {
+    padding-inline: 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+
+  .voltarInicio {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .procurava {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+
+  }
+
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
new file mode 100644
index 0000000000000000000000000000000000000000..edd5f90367b71453d74a87c2a3349827413465ad
--- /dev/null
+++ b/src/Pages/TabsHelp/TabResoursePub.js
@@ -0,0 +1,262 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import PublicandoRecursos from '../../img/ajuda/Publicando_recursos.png';
+import Why from '../../Components/HelpCenter/TabsResoursePub/Why'
+import How from '../../Components/HelpCenter/TabsResoursePub/How'
+import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabResoursePub (props) {
+  const tabs= [
+    'Por que enviar um recurso?',
+    'Como publicar um recurso?',
+    'Quais tipos de recursos e formatos de arquivo a plataforma aceita?'
+  ]
+  
+  const [tabValue, setTabValue] = useState(
+    Number(props.location.state.value) || 0);
+
+  const handleChangeTab = (e, newValue) => {
+    setTabValue(newValue)
+}
+
+
+
+  return(
+    <div style={{backgroundColor:"#f4f4f4"}}>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      
+      <Secao>
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <Menu>
+              <h4>Publicando Recursos</h4>
+              <TabsStyled orientation = "vertical"
+                          variant = "scrollable"
+                          value = {tabValue}
+                          onChange = {handleChangeTab}
+                          TabIndicatorProps = {{style:{display: "none"}}}
+              >
+              <TabStyled label={tabs[0]}></TabStyled>
+              <TabStyled label={tabs[1]}></TabStyled>
+              <TabStyled label={tabs[2]}></TabStyled>
+              </TabsStyled>
+              <br/>
+              <div className="voltarInicio">
+                <a href="ajuda">VOLTAR AO ÍNICIO</a>
+              </div>
+              <hr/>
+              <div className="procurava">
+                Não encontrou o que procurava? Entre em 
+                <a href="contato"> contato</a>
+              </div>
+            </Menu>
+          </Grid>
+
+          <Grid item xs={9}>
+            <Principal>
+              <div className="fixo">
+                <img src={PublicandoRecursos} alt="Publicando Recursos"/>
+                <span>Publicando Recursos</span>
+              </div>
+              {tabValue === 0 && <Why title={tabs[0]}/>}
+              {tabValue === 1 && <How title={tabs[1]}/>}
+              {tabValue === 2 && <Which title={tabs[2]}/>}
+              <div className="resultadosProcura">
+                <span>Não era bem o que você procurava?</span>
+                <div className="subtitulo">
+                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+                </div>
+              </div>
+              <Grid style={{marginBottom:"50px"}} container spacing={2}>
+                <Grid item xs={4}>
+                  <CardEncontrando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardParticipando/>
+                </Grid>
+                <Grid item xs={4}>
+                  <CardGerenciando/>
+                </Grid>
+
+              </Grid>
+
+            </Principal>
+          </Grid>  
+        </Grid>        
+
+
+      </Secao>
+    </div>
+  );
+}
+
+const Principal = styled.div`
+  .fixo {
+    
+    height: 40px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    padding: 30px;
+    margin-bottom: 30px;
+    color: #666;
+
+
+    img {
+      height: 50px;
+      width: 50px;
+      margin-right: 40px;
+      vertical-align: middle;
+
+    }
+
+    span {
+      font-size: 20px;
+      vertical-align: ;
+    }
+
+    
+
+  }
+  .resultadosProcura {
+    text-align: center;
+    margin-block: 30px;
+    padding-inline: 15px;
+    color: #666;
+    span {
+      font-size: 24px;
+    }
+    .subtitulo {
+      margin-top: 10px;
+
+      span {
+        font-size: 15px
+      }
+
+      a {
+        font-size: 15px;
+        padding: 0;
+        color:#00bcd4;
+        text-decoration: none;
+      }
+
+    }
+  }
+
+`
+
+const TabsStyled = styled(Tabs)`
+  
+  .Mui-selected {
+    background-color: #e7e4e4;
+  }
+
+  .MuiTab-root{
+    text-transform: none !important;
+  }
+
+`
+
+const TabStyled = styled(Tab)`
+    
+  padding: 4px 15px !important;
+  font-weight: 500;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+
+
+  
+
+
+  &:hover {
+    background-color: #e7e4e4;
+  }
+`
+
+
+const Menu = styled.div`
+  width: auto;
+  background-color: #fff;
+  color: #666;
+  padding-block: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+
+  h4 {
+    padding-inline: 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+
+  .voltarInicio {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .procurava {
+    padding: 4px 15px;
+    font-size: 15px;
+    text-align: center;
+
+    a {
+      font-size: 15px;
+      padding: 0;
+      color:#00bcd4;
+      text-decoration: none;
+    }
+
+  }
+
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`