diff --git a/puma/.eslintrc.json b/puma/.eslintrc.json
index 3f188d56..aa5f7338 100644
--- a/puma/.eslintrc.json
+++ b/puma/.eslintrc.json
@@ -14,5 +14,6 @@
     "plugins": [
         "vue"
     ],
-    "rules": {}
+    "rules": {
+    }
 }
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.css b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.css
new file mode 100644
index 00000000..b8a6821e
--- /dev/null
+++ b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.css
@@ -0,0 +1,115 @@
+header {
+    height: auto;
+    padding: 20px 0px;
+    background-color: #15355e;
+    font-size: 16px;
+}
+
+nav {
+    flex: 1;
+    margin: 0px 10px;
+}
+
+ul {
+    width: min-content;
+    margin: 0 auto;
+    display: flex;
+    list-style: none;
+    padding: 0px;
+    align-items: center;
+}
+
+li {
+    margin: 0px 10px 0px 0px;
+    width: max-content;
+}
+
+.ultimoLi {
+    margin-right: 0px !important;
+}
+
+li > a {
+    text-decoration: none;
+}
+
+li > a > div {
+    height: 100%;
+    color: #ffffff;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: 0.5s;
+    border-radius: 5px;
+}
+
+li > a > div:hover {
+    background-color: #09172a;
+    color: #ffffff;
+}
+
+li > a > div > span{
+    display: block;
+}
+
+.currentPage {
+    background-color: #09172a;
+}
+
+.divLogo {
+    height: 50px;
+    width: 125px;
+}
+
+.divLogo > img {
+    height: 100%;
+    cursor: pointer;
+}
+
+.authentication {
+    width: min-content;
+    display: flex;
+    flex-wrap: nowrap;
+    height: min-content;
+}
+
+button {
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.register {
+    background-color: #15355e;
+    color: #ffffff;
+    padding: 10px 30px;
+    margin-right: 20px;
+}
+
+.register:hover {
+    background-color: #09172a;
+    color: #ffffff;
+}
+
+.login {
+    background-color: #f7db36;
+    color: #15355e;
+    width: 130px;
+    height: 45px;
+}
+
+.headerCorpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 0px 10%;
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1000px) {
+    nav {
+        display: none;
+    }
+
+    .authentication {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.html b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.html
new file mode 100644
index 00000000..f0c6cbd9
--- /dev/null
+++ b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.html
@@ -0,0 +1,30 @@
+<header>
+    <div class="headerCorpo">
+        <div class="divLogo">
+            <img src="../../../assets/logo-unb.png" onclick="window.location='/'">
+        </div>
+        <nav>
+            <ul>
+                <li><a href="/home/sobre"><div v-bind:class="{ currentPage: '/home/sobre' === pagina}">
+                    <span>Sobre</span>
+                    <span>a Puma</span>
+                </div></a></li>
+                <li><a href="/home/disciplinas"><div v-bind:class="{ currentPage: '/home/disciplinas' === pagina}">
+                    <span>Disciplinas</span>
+                    <span>de Projeto</span>
+                </div></a></li>
+                <li><a href="/home/parceiros"><div v-bind:class="{ currentPage: '/home/parceiros' === pagina}">
+                    <span>Parceiros</span>
+                    <span>e Projetos</span>
+                </div></a></li>
+                <li class="ultimoLi"><a href="/Contato"><div v-bind:class="{ currentPage: '/Contato' === pagina}">
+                    <span>Contato</span>
+                </div></a></li>
+            </ul>
+        </nav>
+
+        <div class="authentication">
+            <button class="login" onclick="window.location='/usuario/login'">Entrar</button>
+        </div>
+    </div>
+</header>
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.js b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.js
new file mode 100644
index 00000000..fa1b5559
--- /dev/null
+++ b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.js
@@ -0,0 +1,5 @@
+export default {
+  props: {
+    pagina: String,
+  },
+};
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.vue b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.vue
new file mode 100644
index 00000000..5cf9243e
--- /dev/null
+++ b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.vue
@@ -0,0 +1,5 @@
+<template src="./AreaExternaHeader.html"></template>
+
+<style src="./AreaExternaHeader.css"></style>
+
+<script src="./AreaExternaHeader.js"></script>
diff --git a/puma/src/components/AreaExterna/Contato/Contato.css b/puma/src/components/AreaExterna/Contato/Contato.css
new file mode 100644
index 00000000..2c61981c
--- /dev/null
+++ b/puma/src/components/AreaExterna/Contato/Contato.css
@@ -0,0 +1,43 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.contato-titulo {
+    font-weight: 700;
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    margin-bottom: 15px;
+}
+
+.div-contato {
+    margin-top: 40px;
+}
+
+.contato-email {
+    margin-bottom: 10px;
+}
+
+.contato-topico {
+    font-weight: bold;
+}
+
+.email-puma{
+    color: #15355E;
+    opacity: .7;
+}
+
+.email-puma:hover{
+    opacity: 1;
+    text-decoration: underline;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Contato/Contato.html b/puma/src/components/AreaExterna/Contato/Contato.html
new file mode 100644
index 00000000..e6c18b45
--- /dev/null
+++ b/puma/src/components/AreaExterna/Contato/Contato.html
@@ -0,0 +1,19 @@
+<section>
+    <AreaExternaHeader :pagina="Contato"/>
+    <div class="corpo">
+        <h1>Contatos</h1>
+
+        <div v-for="contato in contatos" :key="contato.nome" class="contato">
+            <div class="div-contato">
+                <h3 class="contato-titulo">{{contato.nome}}</h3>
+                
+                <div v-if="contato.endereco" class="contato-email">
+                    <span class="contato-topico">Endereço: </span><span>{{contato.endereco}}</span>
+                </div>
+                <div v-if="contato.email">
+                    <span class="contato-topico">Email: </span><span class="email-puma">{{contato.email}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Contato/Contato.js b/puma/src/components/AreaExterna/Contato/Contato.js
new file mode 100644
index 00000000..a3458ce5
--- /dev/null
+++ b/puma/src/components/AreaExterna/Contato/Contato.js
@@ -0,0 +1,30 @@
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+  },
+
+  data() {
+    return {
+      pagina: '/Contato',
+      contatos: [
+        {
+          nome: 'Departamento de Engenharia de Produção',
+          endereco: 'Sala DT-77/15, prédio da FT, bloco D UnB - Campus Universitário Darcy Ribeiro, Brasília - DF',
+          email: 'emaildopuma@unb.br',
+        },
+        {
+          nome: 'Administrador da plataforma 1',
+          endereco: '',
+          email: '121234567@unb.br',
+        },
+        {
+          nome: 'Professor responsavel 1',
+          endereco: '',
+          email: '981234567@unb.br',
+        },
+      ],
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/Contato/Contato.vue b/puma/src/components/AreaExterna/Contato/Contato.vue
new file mode 100644
index 00000000..780fc54e
--- /dev/null
+++ b/puma/src/components/AreaExterna/Contato/Contato.vue
@@ -0,0 +1,5 @@
+<template src="./Contato.html"></template>
+
+<script src="./Contato.js"></script>
+
+<style src="./Contato.css" ></style>
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.css b/puma/src/components/AreaExterna/Disciplinas/Disciplina.css
new file mode 100644
index 00000000..5b1c5c6c
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/Disciplina.css
@@ -0,0 +1,21 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.paragrafo-sobre {
+    text-align: justify;
+    letter-spacing: 0.08em;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 40px 0px 80px 0px;
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.html b/puma/src/components/AreaExterna/Disciplinas/Disciplina.html
new file mode 100644
index 00000000..58a0d8a2
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/Disciplina.html
@@ -0,0 +1,12 @@
+<section>
+    <AreaExternaHeader :pagina="pagina"/>
+    <div class="corpo">
+        <h1>Disciplinas de Projetos</h1>
+        
+        <p class="paragrafo-sobre">
+            A PUMA conecta empresas e empresarios com os alunos e professores da Engenharia de Produção da Universidade de Brasília, de forma que problemas reais vivenciados pelas empresas possam ser trabalhados dentro de sala de aula.
+        </p>
+
+        <ListaDisciplina/>
+    </div>
+</section>
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.js b/puma/src/components/AreaExterna/Disciplinas/Disciplina.js
new file mode 100644
index 00000000..a6becff5
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/Disciplina.js
@@ -0,0 +1,15 @@
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+import ListaDisciplina from './ListaDisciplina/ListaDisciplina.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+    ListaDisciplina,
+  },
+
+  data() {
+    return {
+      paginaAtual: '/home/disciplinas',
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.vue b/puma/src/components/AreaExterna/Disciplinas/Disciplina.vue
new file mode 100644
index 00000000..140fc63d
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/Disciplina.vue
@@ -0,0 +1,5 @@
+<template src="./Disciplina.html"></template>
+
+<script src="./Disciplina.js"></script>
+
+<style src="./Disciplina.css" scoped></style>
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.css b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.css
new file mode 100644
index 00000000..a12dd0ab
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.css
@@ -0,0 +1,52 @@
+.tabela {
+    width: 100%;
+    display: flex;
+    max-width: 1000px;
+    margin-bottom: 40px;
+    align-items: unset;
+}
+
+.loading {
+    animation: is-rotating 0.5s infinite;
+    border: 6px solid #e5e5e5;
+    border-radius: 50%;
+    border-top-color: #15355e;
+    height: 50px;
+    width: 50px;
+    margin: auto;
+}
+
+.item-tabela {
+    flex: 1;
+    margin: 0;
+    text-align: center;
+    cursor: pointer;
+    padding: 10px;
+    border: 1px solid #15355e;
+}
+
+.item-tabela:first-child { 
+    background-color: #15355e;
+    color: #ffffff;
+}
+
+.erro-lista-disciplina {
+    color: red;
+    font-size: 20px;
+}
+
+@media (max-width: 700px) {
+    .tabela {
+        flex-direction: column;
+    }
+
+    .item-tabela {
+        width: 100%;
+    }
+}
+  
+@keyframes is-rotating {
+    to {
+        transform: rotate(1turn);
+    }
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.html b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.html
new file mode 100644
index 00000000..a19b5fa8
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.html
@@ -0,0 +1,13 @@
+<section>
+    <ul id="tabela-listagem-disciplina" class="tabela">
+        <div v-if="loading" class="loading"></div>
+
+        <li class="item-tabela" @click="alterarShowSelectDisciplina($event, disciplina)" v-for="disciplina in listaDisciplinas" :key="disciplina.subjectid">
+            {{ disciplina.name }}
+        </li>
+    </ul>
+
+    <div class="erro-lista-disciplina" v-if="error">Erro na busca das disciplinas da PUMA, Tente novamente mais tarde.</div>
+
+    <ObjetoDisciplina v-if="!loading && !error" :idDisciplina="disciplinaAtual.subjectid"/>
+</section>
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.js b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.js
new file mode 100644
index 00000000..60677aa8
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.js
@@ -0,0 +1,54 @@
+import ObjetoDisciplina from '../ObjetoDisciplina/ObjetoDisciplina.vue';
+
+import SubjectService from '../../../../services/SubjectService';
+
+export default {
+  components: {
+    ObjetoDisciplina,
+  },
+
+  data() {
+    return {
+      disciplinaAtual: {},
+      listaDisciplinas: [],
+      loading: false,
+      error: null,
+      subjectService: new SubjectService(),
+    };
+  },
+
+  beforeMount() {
+    this.getSubjects();
+  },
+
+  methods: {
+    async getSubjects() {
+      this.loading = true;
+      this.subjectService.getSubjects().then((response) => {
+        this.listaDisciplinas = response.data;
+
+        const disciplina = this.listaDisciplinas[0];
+        this.disciplinaAtual = disciplina;
+
+        this.loading = false;
+      }).catch((error) => {
+        this.error = error;
+        this.loading = false;
+      });
+    },
+    alterarShowSelectDisciplina(event, disciplina) {
+      const li = event.target;
+      const filhos = document.querySelectorAll('#tabela-listagem-disciplina > *');
+
+      this.disciplinaAtual = disciplina;
+
+      for (let i = 0; i < filhos.length; i += 1) {
+        filhos[i].style.backgroundColor = '#ffffff';
+        filhos[i].style.color = '#000000';
+      }
+
+      li.style.backgroundColor = '#15355e';
+      li.style.color = '#ffffff';
+    },
+  },
+};
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.vue b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.vue
new file mode 100644
index 00000000..aeb36175
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.vue
@@ -0,0 +1,5 @@
+<template src="./ListaDisciplina.html"></template>
+
+<script src="./ListaDisciplina.js"></script>
+
+<style src="./ListaDisciplina.css" scoped></style>
diff --git a/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.css b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.css
new file mode 100644
index 00000000..33ab4c5e
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.css
@@ -0,0 +1,67 @@
+.div-img-descricao {
+    display: flex;
+    margin-bottom: 80px;
+}
+
+.div-img-sobre {
+    width: 40%;
+    max-width: 430px;
+    margin-right: 50px;
+}
+
+.img-sobre {
+    background-color: #D9D9D9;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 10px 10px 0px rgba(21, 53, 94, 1);
+    border-radius: 8px;
+    width: 100%;
+    height: 280px;
+}
+
+.div-descricao {
+    flex:1;
+}
+
+.descricao-titulo {
+    font-weight: 700;
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    margin-bottom: 25px;
+}
+
+.descricao-conteudo {
+    text-align: justify;
+    font-size: 18px;
+    line-height: 36px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    word-break: break-all;
+}
+
+.loading {
+    animation: is-rotating 0.5s infinite;
+    border: 6px solid #e5e5e5;
+    border-radius: 50%;
+    border-top-color: #15355e;
+    height: 50px;
+    width: 50px;
+    margin: 20px auto;
+}
+
+@media (max-width: 1000px) {
+    .div-img-sobre {
+        width: 100%;
+        max-width: none;
+        margin: 0px 0px 40px 0px;
+    }
+
+    .div-img-descricao {
+        flex-direction: column;
+    }
+}
+
+@keyframes is-rotating {
+    to {
+        transform: rotate(1turn);
+    }
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.html b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.html
new file mode 100644
index 00000000..68ea6f83
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.html
@@ -0,0 +1,29 @@
+<section>
+    <div v-if="loading" class="loading"></div>
+    <div v-else>
+        <div class="div-img-descricao">
+            <div class="div-img-sobre">
+                <img class="img-sobre">
+            </div>
+            <div class="div-descricao">
+                <h3 class="descricao-titulo">{{disciplina.subject.name}}</h3>
+                <p class="descricao-conteudo">
+                    {{disciplina.subject.coursesyllabus}}
+                </p>
+            </div>
+        </div>
+
+        <div class="div-img-descricao">
+            <div class="div-descricao">
+                <h3 class="descricao-titulo">Temas</h3>
+                <p class="descricao-conteudo">
+                    <span v-for="keyword in disciplina.keywords" :key="keyword.keywordid">
+                        {{keyword.keyword}},
+                    </span>
+
+                    <span v-if="disciplina.keywords.length == 0">Sem Temas Cadastados</span>
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.js b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.js
new file mode 100644
index 00000000..82584df9
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.js
@@ -0,0 +1,41 @@
+import SubjectService from '../../../../services/SubjectService';
+
+export default {
+  props: {
+    idDisciplina: Number,
+  },
+
+  beforeMount() {
+    this.getSubject();
+  },
+
+  data() {
+    return {
+      subjectService: new SubjectService(),
+      loading: false,
+      error: null,
+      disciplina: {},
+    };
+  },
+
+  watch: {
+    idDisciplina() {
+      this.getSubject();
+    },
+  },
+
+  methods: {
+    async getSubject() {
+      this.loading = true;
+
+      this.subjectService.getSubjectById(this.idDisciplina).then((response) => {
+        this.disciplina = response.data;
+
+        this.loading = false;
+      }).catch((error) => {
+        this.error = error;
+        this.loading = false;
+      });
+    },
+  },
+};
diff --git a/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.vue b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.vue
new file mode 100644
index 00000000..72edaeeb
--- /dev/null
+++ b/puma/src/components/AreaExterna/Disciplinas/ObjetoDisciplina/ObjetoDisciplina.vue
@@ -0,0 +1,5 @@
+<template src="./ObjetoDisciplina.html"></template>
+
+<script src="./ObjetoDisciplina.js"></script>
+
+<style src="./ObjetoDisciplina.css" scoped></style>
diff --git a/puma/src/components/AreaExterna/HomePage.css b/puma/src/components/AreaExterna/HomePage.css
new file mode 100644
index 00000000..a457f28a
--- /dev/null
+++ b/puma/src/components/AreaExterna/HomePage.css
@@ -0,0 +1,17 @@
+section {
+    background-color: blue;
+    width: 100%;
+    height: auto;
+}
+
+.area-externa-section {
+    height: 100%;
+    width: 100%;
+    padding: 0 150px;
+}
+
+@media (max-width: 700px) {
+  .area-externa-section {
+    margin: 0 40px;
+  }
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/HomePage.html b/puma/src/components/AreaExterna/HomePage.html
new file mode 100644
index 00000000..6d3baea7
--- /dev/null
+++ b/puma/src/components/AreaExterna/HomePage.html
@@ -0,0 +1,3 @@
+<section>
+    <AreaExternaHeader :pagina="pagina"/>
+</section>
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/HomePage.js b/puma/src/components/AreaExterna/HomePage.js
new file mode 100644
index 00000000..a2a896b1
--- /dev/null
+++ b/puma/src/components/AreaExterna/HomePage.js
@@ -0,0 +1,13 @@
+import AreaExternaHeader from './AreaExternaHeader/AreaExternaHeader.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+  },
+
+  data() {
+    return {
+      pagina: '/home',
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/HomePage.vue b/puma/src/components/AreaExterna/HomePage.vue
new file mode 100644
index 00000000..4f84a7ad
--- /dev/null
+++ b/puma/src/components/AreaExterna/HomePage.vue
@@ -0,0 +1,5 @@
+<template src="./HomePage.html"></template>
+
+<style src="./HomePage.css"></style>
+
+<script src="./HomePage.js"></script>
diff --git a/puma/src/components/AreaExterna/InfoParceiro/InfoParceiro.vue b/puma/src/components/AreaExterna/InfoParceiro/InfoParceiro.vue
new file mode 100644
index 00000000..0b4740e6
--- /dev/null
+++ b/puma/src/components/AreaExterna/InfoParceiro/InfoParceiro.vue
@@ -0,0 +1,5 @@
+<template src="./info-parceiro.html"></template>
+
+<style src="./info-parceiro.css" scoped></style>
+
+<script src="./info-parceiro.js"></script>
diff --git a/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.css b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.css
new file mode 100644
index 00000000..80719417
--- /dev/null
+++ b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.css
@@ -0,0 +1,61 @@
+a{
+  color: #2A768ECC;
+}
+
+img{
+  width: 100%;
+  height: auto;
+  border-radius: 1em;
+}
+
+.div-img-descricao {
+  display: flex;
+  margin-top: 80px;
+}
+
+.div-descricao {
+  flex:1;
+}
+
+.descricao-titulo {
+  font-weight: 700;
+  font-size: 32px;
+  letter-spacing: -0.02em;
+  margin-bottom: 25px;
+}
+
+.descricao-conteudo {
+  text-align: justify;
+  font-size: 18px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+}
+
+.div-img-sobre-oposta {
+  width: 40%;
+  max-width: 430px;
+  margin-left: 50px;
+
+  height: auto;
+}
+
+@media (max-width: 1000px) {
+  .paragrafo-sobre {
+      font-size: 18px;
+      text-align: left;
+  }
+
+  .descricao-conteudo {
+      text-align: left;
+  }
+
+  .div-img-sobre-oposta {
+    width: 100%;
+    margin: 0px auto;
+  }
+
+  .div-img-descricao {
+      flex-direction: column;
+  }
+}
diff --git a/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.html b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.html
new file mode 100644
index 00000000..827b2792
--- /dev/null
+++ b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.html
@@ -0,0 +1,31 @@
+<div>
+  <div class="div-img-descricao">
+    <div class="div-descricao">
+        <h3 class="descricao-titulo">{{info.name}}</h3>
+        <p class="descricao-conteudo" v-for="description in info.description">
+          {{description}}  
+        </p>
+    </div>            
+    <div class="div-img-sobre-oposta">
+        <img :src="info.logo" alt="Logo do Projeto" class="img-sobre-oposta">
+    </div>
+  </div>
+
+  <div class="div-img-descricao">
+    <div class="div-descricao">
+        <h3 class="descricao-titulo">Escopo do Projeto</h3>
+        <p class="descricao-conteudo" v-for="scope in info.projectScope">
+          {{scope}}
+        </p>
+    </div>
+  </div>
+
+  <div class="div-img-descricao">
+    <div class="div-descricao">
+        <h3 class="descricao-titulo">Principais Resultados do Projeto</h3>
+        <p class="descricao-conteudo" v-for="projectKeyResult in info.projectKeyResults">
+          {{projectKeyResult}}
+        </p>
+    </div>
+  </div>
+</div>
diff --git a/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.js b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.js
new file mode 100644
index 00000000..ae908df1
--- /dev/null
+++ b/puma/src/components/AreaExterna/InfoParceiro/info-parceiro.js
@@ -0,0 +1,14 @@
+/* eslint-disable*/
+export default {
+  name: 'InfoParceiro',
+  props: {
+    info:{
+      name: { type: String },
+      description: { type: String },
+      website: { type: String },
+      projectScope: { type: String },
+      projectKeyResults: { type: String },
+      logo: { type: String },
+    }
+  },
+};
diff --git a/puma/src/components/AreaExterna/ParceirosEProjetos/ParceirosProjetos.vue b/puma/src/components/AreaExterna/ParceirosEProjetos/ParceirosProjetos.vue
new file mode 100644
index 00000000..0d5312e7
--- /dev/null
+++ b/puma/src/components/AreaExterna/ParceirosEProjetos/ParceirosProjetos.vue
@@ -0,0 +1,5 @@
+<template src="./parceiros-projetos.html"></template>
+
+<style src="./parceiros-projetos.css" scoped></style>
+
+<script src="./parceiros-projetos.js"></script>
diff --git a/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.css b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.css
new file mode 100644
index 00000000..2a266edf
--- /dev/null
+++ b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.css
@@ -0,0 +1,52 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+  
+.paragrafo-sobre {
+    text-align: justify;
+    letter-spacing: 0.08em;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 40px 0px 80px 0px;
+}
+
+.icons-parceiros{
+    display: flex;
+    flex-wrap: wrap;
+    justify-items: center;
+    justify-content: center;
+}
+
+.icon-parceiro{
+    display: inline-block;
+}
+
+input[type=radio]{
+    display:none;
+}
+
+input[type=radio] + label>img{
+    display: inline;
+    width: 15em;
+    height: 6em;
+    border-radius: 1em;
+    margin: 1em 1em;
+}
+
+input[type=radio] + label>img:hover {
+    cursor: pointer;
+}
+
+input[type=radio]:checked + label>img{
+    box-shadow: 0em 0.2em #153763;
+}
diff --git a/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.html b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.html
new file mode 100644
index 00000000..ca2804cc
--- /dev/null
+++ b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.html
@@ -0,0 +1,21 @@
+<section>
+    <AreaExternaHeader :pagina="paginaAtual"/>
+
+    <div class="corpo">
+        <h1>Parceiros e Projetos</h1>
+        <p class="paragrafo-sobre">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at eleifend ex, in dapibus augue. Nulla dignissim sollicitudin turpis at congue. Clique em um projeto para saber mais informações
+        </p>
+        
+        <div class="icons-parceiros">
+            <div class="icon-parceiro" v-for="(parceiroInfo, index) in infoParceiros">
+                <input type="radio" v-model="parceiro" :value="index" :id="index"/>
+                <label :for="index">
+                    <img :src="parceiroInfo.logo" :alt="parceiroInfo.name">
+                </label>
+            </div>
+        </div>
+        
+        <InfoParceiro v-for="(parceiroInfo, index) in infoParceiros" :key="parceiroInfo.name" v-bind:info="parceiroInfo" v-show="parceiro === index"/>
+    </div>
+</section>
diff --git a/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.js b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.js
new file mode 100644
index 00000000..f22f7792
--- /dev/null
+++ b/puma/src/components/AreaExterna/ParceirosEProjetos/parceiros-projetos.js
@@ -0,0 +1,73 @@
+/* eslint-disable*/
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+import InfoParceiro from '../InfoParceiro/InfoParceiro.vue';
+export default {
+  components: {
+    AreaExternaHeader,
+    InfoParceiro,
+  },
+
+  data() {
+    return {
+      infoParceiros: [
+      {
+        name: 'Exército Brasileiro',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 2',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 3',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 4',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 5',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 6',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },
+      {
+        name: 'Exército Brasileiro 7',
+        description: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        website: 'https://www.google.com',
+        projectScope: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        projectKeyResults: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores obcaecati perspiciatis ut omnis sunt vel inventore corporis! Id ad, aliquam voluptatem ipsam nobis corporis accusamus perferendis dolor magnam nihil.', 'Nobis corporis, quae totam nam pariatur eaque voluptatibus veritatis exercitationem assumenda, nesciunt illo? Magnam labore sapiente pariatur quisquam praesentium ea eveniet distinctio nihil modi. Deleniti perferendis esse voluptatem quam molestiae.'],
+        logo: 'https://blog.iprocess.com.br/wp-content/uploads/2021/11/placeholder.png'
+      },],
+      paginaAtual: '/home/parceiros',
+      parceiro: 0
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/Sobre/Sobre.css b/puma/src/components/AreaExterna/Sobre/Sobre.css
new file mode 100644
index 00000000..d0575d08
--- /dev/null
+++ b/puma/src/components/AreaExterna/Sobre/Sobre.css
@@ -0,0 +1,151 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.descricao-titulo {
+    font-weight: 700;
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    margin-bottom: 25px;
+}
+
+.descricao-conteudo {
+    text-align: justify;
+    font-size: 18px;
+    line-height: 36px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+}
+
+.p-sobre-ul {
+    width: 100%;
+    margin: 0;
+    list-style: inside;
+    display: block;
+    align-items: flex-start;
+}
+
+.p-sobre-li {
+    margin: 0px 0px 10px 0px;
+    width: 100%;
+}
+
+.p-sobre-lista {
+    padding: 10px 0px;
+    text-align: start;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 28px;
+    border-bottom: 2px solid #15355E;
+    cursor: pointer;
+    margin: 40px 0px 15px;
+}
+
+.p-sobre-lista:hover {
+    background-color: #D9D9D9;
+    transition: 0.5s;
+}
+
+.div-mais-informacoes {
+    margin-bottom: 100px;
+}
+
+.informacao-item {
+    display: none;
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.paragrafo-sobre {
+    text-align: justify;
+    letter-spacing: 0.08em;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 40px 0px 80px 0px;
+}
+
+.div-img-descricao {
+    display: flex;
+    margin-bottom: 80px;
+}
+
+.div-descricao {
+    flex:1;
+}
+
+.img-sobre {
+    background-color: #D9D9D9;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 10px 10px 0px rgba(21, 53, 94, 1);
+    border-radius: 8px;
+    width: 100%;
+    height: 280px;
+}
+
+.img-sobre-oposta {
+    background-color: #D9D9D9;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: -10px 10px 0px rgba(21, 53, 94, 1);
+    border-radius: 8px;
+    width: 100%;
+    height: 280px;
+}
+
+.div-img-sobre {
+    width: 40%;
+    max-width: 430px;
+    margin-right: 50px;
+}
+
+.div-img-sobre-oposta {
+    width: 40%;
+    max-width: 430px;
+    margin-left: 50px;
+}
+
+.arrow {
+    border: solid black;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+  }
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    float: right;
+    margin-right: 10px;
+  }
+
+@media (max-width: 1000px) {
+    .paragrafo-sobre {
+        font-size: 18px;
+        text-align: left;
+    }
+
+    .descricao-conteudo {
+        text-align: left;
+    }
+
+    .div-img-sobre {
+        width: 100%;
+        max-width: none;
+        margin: 0px 0px 40px 0px;
+    }
+
+    .div-img-descricao {
+        flex-direction: column;
+    }
+    
+    .img-secundaria {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/puma/src/components/AreaExterna/Sobre/Sobre.html b/puma/src/components/AreaExterna/Sobre/Sobre.html
new file mode 100644
index 00000000..585f7da0
--- /dev/null
+++ b/puma/src/components/AreaExterna/Sobre/Sobre.html
@@ -0,0 +1,150 @@
+<section>
+    <AreaExternaHeader :pagina="paginaAtual"/>
+    <div class="corpo">
+        <h1>Sobre a PUMA</h1>
+        <p class="paragrafo-sobre">
+            A PUMA conecta empresas e empresarios com os alunos e professores da Engenharia de Produção da Universidade de Brasília, de forma que problemas reais vivenciados pelas empresas possam ser trabalhados dentro de sala de aula.
+        </p>
+
+        <div class="div-img-descricao">
+            <div class="div-img-sobre">
+                <img class="img-sobre">
+            </div>
+            <div class="div-descricao">
+                <h3 class="descricao-titulo">Objetivos</h3>
+                <ul class="descricao-conteudo p-sobre-ul">
+                    <li class="p-sobre-li">Divulgar os resultados dos melhores projetos;</li>
+                    <li class="p-sobre-li">Manter uma base de stakeholders;</li>
+                    <li class="p-sobre-li">Avaliar a satisfação das partes interessadas com os projetos entregues;</li>
+                    <li class="p-sobre-li">Aumentar o número de partes interessadas através da facilitação da submissão de projetos;</li>
+                    <li class="p-sobre-li">Automatizar parte do processo de avaliação dos alunos;</li>
+                    <li class="p-sobre-li">Avaliar a evolução do desempenho dos alunos em relaçãoas técnicas e competências transversais durante as disciplinas de PSPs;</li>
+                    <li class="p-sobre-li">Medir a eficiência da metodologia PBL.</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="div-img-descricao">
+            <div class="div-descricao">
+                <h3 class="descricao-titulo">Metodologia PBL</h3>
+                <p class="descricao-conteudo">
+                    Recentemente o PBL foi introduzido em diversos campos de ensino e vem crescendo bastante seu uso no ensino de engenharia. A abordagem PBL incentiva os alunos a “aprender fazendo na prática”.
+                </p>
+            </div>            
+            <div class="div-img-sobre-oposta img-secundaria">
+                <img class="img-sobre-oposta">
+            </div>
+        </div>
+
+        <div class="div-img-descricao">
+            <div class="div-img-sobre img-secundaria">
+                <img class="img-sobre">
+            </div>
+            <div class="div-descricao">
+                <h3 class="descricao-titulo">Colaboração Internacional</h3>
+                <p class="descricao-conteudo">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at eleifend ex, in dapibus augue. Nulla dignissim sollicitudin turpis at congue. Etiam a tempor arcu. Cras nulla massa, hendrerit in semper id, lobortis sed nulla. Aliquam consectetur,                 </p>
+            </div>
+        </div>
+
+        <div class="div-mais-informacoes">
+            <h3 class="descricao-titulo">Mais informações</h3>
+
+            <div class="p-sobre-lista" @click="showInformacao('informacao-1')">
+                <span>
+                    Problem Based Learning (PBL)
+                    <i class="arrow down"></i>
+                </span>
+            </div>
+            <div id="informacao-1" class="descricao-conteudo informacao-item">
+                <p>A PUMA integra os insumos e resultados dos projetos desenvolvidos
+                     pelos alunos durante a graduação, sendo a porta de entrada das 
+                     demandas dos stakeholders a serem trabalhadas pelos alunos na 
+                     resolução de problemas reais.
+                </p>
+                <p>
+                    Dessa forma, a PUMA está fortemente voltado ao incentivo e a 
+                    cultura acadêmica para o uso da Tecnologia da Informação e 
+                    Comunicação (TIC) como instrumento útil para o desenvolvimento 
+                    do ensino e da aprendizagem, visando permitir a medição da 
+                    eficácia do PBL e a coleta de feedbacks e informações substanciais 
+                    e seguras para o redirecionamento das disciplinas de projetos ao 
+                    longo dos anos. 
+                </p>
+                <p>
+                    Com isso, a PUMA auxilia os cursos de graduação no acompanhamento 
+                    das exigências do mercado para alinhamento das expectativas de 
+                    todos os stakeholders.
+                </p>
+                <p>
+                    A plataforma PUMA está sendo desenvolvida por uma equipe multidisciplinar 
+                    composta por três áreas de Engenharia: Software, Produção e Computação.
+                </p>
+            </div>
+
+            <div class="p-sobre-lista" @click="showInformacao('informacao-2')">
+                <span>
+                    Problem Based Learning (PBL)
+                    <i class="arrow down"></i>
+                </span>
+            </div>
+            <div id="informacao-2" class="descricao-conteudo informacao-item">
+                <p>A PUMA integra os insumos e resultados dos projetos desenvolvidos
+                    pelos alunos durante a graduação, sendo a porta de entrada das 
+                    demandas dos stakeholders a serem trabalhadas pelos alunos na 
+                    resolução de problemas reais.
+               </p>
+               <p>
+                   Dessa forma, a PUMA está fortemente voltado ao incentivo e a 
+                   cultura acadêmica para o uso da Tecnologia da Informação e 
+                   Comunicação (TIC) como instrumento útil para o desenvolvimento 
+                   do ensino e da aprendizagem, visando permitir a medição da 
+                   eficácia do PBL e a coleta de feedbacks e informações substanciais 
+                   e seguras para o redirecionamento das disciplinas de projetos ao 
+                   longo dos anos. 
+               </p>
+               <p>
+                   Com isso, a PUMA auxilia os cursos de graduação no acompanhamento 
+                   das exigências do mercado para alinhamento das expectativas de 
+                   todos os stakeholders.
+               </p>
+               <p>
+                   A plataforma PUMA está sendo desenvolvida por uma equipe multidisciplinar 
+                   composta por três áreas de Engenharia: Software, Produção e Computação.
+               </p>
+            </div>
+
+            <div class="p-sobre-lista" @click="showInformacao('informacao-3')">
+                <span>
+                    Problem Based Learning (PBL)
+                    <i class="arrow down"></i>
+                </span>
+            </div>
+            <div id="informacao-3" class="descricao-conteudo informacao-item">
+                <p>A PUMA integra os insumos e resultados dos projetos desenvolvidos
+                    pelos alunos durante a graduação, sendo a porta de entrada das 
+                    demandas dos stakeholders a serem trabalhadas pelos alunos na 
+                    resolução de problemas reais.
+               </p>
+               <p>
+                   Dessa forma, a PUMA está fortemente voltado ao incentivo e a 
+                   cultura acadêmica para o uso da Tecnologia da Informação e 
+                   Comunicação (TIC) como instrumento útil para o desenvolvimento 
+                   do ensino e da aprendizagem, visando permitir a medição da 
+                   eficácia do PBL e a coleta de feedbacks e informações substanciais 
+                   e seguras para o redirecionamento das disciplinas de projetos ao 
+                   longo dos anos. 
+               </p>
+               <p>
+                   Com isso, a PUMA auxilia os cursos de graduação no acompanhamento 
+                   das exigências do mercado para alinhamento das expectativas de 
+                   todos os stakeholders.
+               </p>
+               <p>
+                   A plataforma PUMA está sendo desenvolvida por uma equipe multidisciplinar 
+                   composta por três áreas de Engenharia: Software, Produção e Computação.
+               </p>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/puma/src/components/AreaExterna/Sobre/Sobre.js b/puma/src/components/AreaExterna/Sobre/Sobre.js
new file mode 100644
index 00000000..2e6ee5fe
--- /dev/null
+++ b/puma/src/components/AreaExterna/Sobre/Sobre.js
@@ -0,0 +1,27 @@
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+  },
+
+  data() {
+    return {
+      paginaAtual: '/home/sobre',
+    };
+  },
+
+  methods: {
+    showInformacao(element) {
+      const content = document.getElementById(element);
+
+      if (!content.style.display) {
+        content.style.display = 'block';
+      } else if (content.style.display === 'block') {
+        content.style.display = 'none';
+      } else {
+        content.style.display = 'block';
+      }
+    },
+  },
+};
diff --git a/puma/src/components/AreaExterna/Sobre/Sobre.vue b/puma/src/components/AreaExterna/Sobre/Sobre.vue
new file mode 100644
index 00000000..6cfc8402
--- /dev/null
+++ b/puma/src/components/AreaExterna/Sobre/Sobre.vue
@@ -0,0 +1,5 @@
+<template src="./Sobre.html"></template>
+
+<style src="./Sobre.css"></style>
+
+<script src="./Sobre.js"></script>
diff --git a/puma/src/components/disciplina/consulta-disciplina/consulta-disciplina.html b/puma/src/components/disciplina/consulta-disciplina/consulta-disciplina.html
index 0e13b91a..5db266b0 100644
--- a/puma/src/components/disciplina/consulta-disciplina/consulta-disciplina.html
+++ b/puma/src/components/disciplina/consulta-disciplina/consulta-disciplina.html
@@ -1,6 +1,5 @@
 <div class="main-content hidden-scroll-bar">
   <div class="tittle ml-4">
-    Disciplinas
   </div>
   <div v-if="subjects.length" class="tittle sub-tittle ml-4">
     Disciplinas cadastradas na plataforma
diff --git a/puma/src/router/index.js b/puma/src/router/index.js
index 78e14518..71c78d02 100644
--- a/puma/src/router/index.js
+++ b/puma/src/router/index.js
@@ -6,10 +6,35 @@ import store from '../store';
 Vue.use(VueRouter);
 
 const routes = [
+
   {
     path: '/',
-    name: 'Home',
-    component: () => import('../components/usuario/login-usuario/LoginUsuario.vue'),
+    name: 'Home Page',
+    component: () => import('../components/AreaExterna/HomePage.vue'),
+    meta: {
+      guest: true,
+    },
+  },
+  {
+    path: '/home/disciplinas',
+    name: 'Home Disciplinas',
+    component: () => import('../components/AreaExterna/Disciplinas/Disciplina.vue'),
+    meta: {
+      guest: true,
+    },
+  },
+  {
+    path: '/home/sobre',
+    name: 'Home Sobre',
+    component: () => import('../components/AreaExterna/Sobre/Sobre.vue'),
+    meta: {
+      guest: true,
+    },
+  },
+  {
+    path: '/home/parceiros',
+    name: 'Home ParceirosProjetos',
+    component: () => import('../components/AreaExterna/ParceirosEProjetos/ParceirosProjetos.vue'),
     meta: {
       guest: true,
     },
@@ -142,6 +167,11 @@ const routes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/Contato',
+    name: 'Contato',
+    component: () => import('../components/AreaExterna/Contato/Contato.vue'),
+  },
 ];
 
 const router = new VueRouter({