diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 2477c80..0ca5126 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.socqrnbv35"
+    "revision": "0.hn8ddlcqff8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/assets/grafo.png b/src/assets/grafo.png
new file mode 100644
index 0000000..91603cc
Binary files /dev/null and b/src/assets/grafo.png differ
diff --git a/src/assets/logo-fabrica-de-software.png b/src/assets/logo-fabrica-de-software.png
new file mode 100644
index 0000000..db8c00c
Binary files /dev/null and b/src/assets/logo-fabrica-de-software.png differ
diff --git a/src/assets/logo-github.png b/src/assets/logo-github.png
new file mode 100644
index 0000000..45b8e27
Binary files /dev/null and b/src/assets/logo-github.png differ
diff --git a/src/assets/logo-instagram.png b/src/assets/logo-instagram.png
new file mode 100644
index 0000000..b1b30e6
Binary files /dev/null and b/src/assets/logo-instagram.png differ
diff --git a/src/assets/logo-linked-in.png b/src/assets/logo-linked-in.png
new file mode 100644
index 0000000..d42ae39
Binary files /dev/null and b/src/assets/logo-linked-in.png differ
diff --git a/src/assets/logo-twiter.png b/src/assets/logo-twiter.png
new file mode 100644
index 0000000..9e1d2e2
Binary files /dev/null and b/src/assets/logo-twiter.png differ
diff --git a/src/components/footer/DeafaultFooter.vue b/src/components/footer/DeafaultFooter.vue
new file mode 100644
index 0000000..430b3ff
--- /dev/null
+++ b/src/components/footer/DeafaultFooter.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { FabricaContact, LinksFabrica, LinksHeader, LogoFabrica } from "@/components";
+</script>
+<template>
+  <footer>
+    <div class="container">
+      <LogoFabrica />
+      <LinksHeader />
+      <FabricaContact />
+    </div>
+    <hr class="footer-hr" />
+    <LinksFabrica />
+  </footer>
+</template>
+<style scoped>
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #22262f;
+  height: 450px;
+}
+.container {
+  display: flex;
+  align-items: center;
+  width: 80vw;
+  justify-content: space-between;
+  margin: 100px;
+}
+.footer-hr {
+  height: 1px;
+  width: 80vw;
+  background-color: rgb(255, 255, 255);
+}
+</style>
diff --git a/src/components/footer/contact/FabricaContact.vue b/src/components/footer/contact/FabricaContact.vue
new file mode 100644
index 0000000..0d8d868
--- /dev/null
+++ b/src/components/footer/contact/FabricaContact.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { FooterTitles } from '@/components'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+
+defineProps({
+  text: String
+})
+</script>
+<template>
+  <div class="contact">
+    <div>
+      <FooterTitles
+        v-for="(text, index) in templateStore.footerTitles"
+        :key="index"
+        :title="text.contactTitle"
+      />
+      <ul>
+        <li class="footer-li" v-for="(text, index) in templateStore.footerContact" :key="index">
+          {{ text.text }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<style scoped>
+.contact {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.footer-li {
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+
+@media (max-width: 900px) {
+  .contato {
+    min-height: 100px;
+  }
+}
+</style>
diff --git a/src/components/footer/links/FastLinks.vue b/src/components/footer/links/FastLinks.vue
new file mode 100644
index 0000000..c6e486f
--- /dev/null
+++ b/src/components/footer/links/FastLinks.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+defineProps({
+  title: String,
+  link: String,
+});
+</script>
+<template>
+  <RouterLink class="router-link" :to="link">
+    <li class="footer-li">{{ title }}</li>
+  </RouterLink>
+</template>
+<style scoped>
+.footer-li {
+  color: white;
+  font-family: "Montserrat", sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+.router-link {
+  text-decoration: none;
+}
+</style>
diff --git a/src/components/footer/links/LinksFabrica.vue b/src/components/footer/links/LinksFabrica.vue
new file mode 100644
index 0000000..f7d1cd2
--- /dev/null
+++ b/src/components/footer/links/LinksFabrica.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import GithubImg from '@/assets/logo-github.png'
+import InstagramImg from '@/assets/logo-instagram.png'
+import LinkedIn from '@/assets/logo-linked-in.png'
+import ImgTwiter from '@/assets/logo-twiter.png'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+
+defineProps({
+  img: String,
+  link: String
+})
+</script>
+<template>
+  <div class="container-midia">
+    <a v-for="(text, index) in templateStore.footerMidia" :href="text.link" :key="index"
+      ><img
+        :src="
+          text.img == 'github'
+            ? GithubImg
+            : text.img == 'instagram'
+              ? InstagramImg
+              : text.img == 'linked-in'
+                ? LinkedIn
+                : text.img == 'twiter'
+                  ? ImgTwiter
+                  : ''
+        "
+    /></a>
+  </div>
+</template>
+<style scoped>
+.container-midia img {
+  margin: 20px 10px;
+  width: 55px;
+}
+</style>
diff --git a/src/components/footer/links/LinksHeader.vue b/src/components/footer/links/LinksHeader.vue
new file mode 100644
index 0000000..3efed0e
--- /dev/null
+++ b/src/components/footer/links/LinksHeader.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { FastLinks, FooterTitles } from '@/components'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+</script>
+<template>
+  <div class="links">
+    <div>
+      <FooterTitles
+        v-for="(text, index) in templateStore.footerTitles"
+        :key="index"
+        :title="text.linksTitle"
+      />
+      <ul>
+        <FastLinks
+          v-for="(text, index) in templateStore.titles"
+          :key="index"
+          :title="text.text"
+          :link="text.link"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+<style scoped>
+.links {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.footer-li {
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+
+@media (max-width: 900px) {
+  .links {
+    min-height: 100px;
+  }
+}
+</style>
diff --git a/src/components/footer/links/imagesLinks.vue b/src/components/footer/links/imagesLinks.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/footer/logo/LogoFabrica.vue b/src/components/footer/logo/LogoFabrica.vue
new file mode 100644
index 0000000..2796187
--- /dev/null
+++ b/src/components/footer/logo/LogoFabrica.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup></script>
+<template>
+  <div class="img-logo-fabrica">
+    <img src="@/assets/logo-fabrica-de-software.png" />
+  </div>
+</template>
+<style scoped>
+.img-logo-fabrica,
+.links,
+.contato {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.img-logo-fabrica img {
+  width: 200px;
+}
+
+@media (max-width: 900px) {
+  .img-logo-fabrica img {
+    width: 150px;
+  }
+  .img-logo-fabrica {
+    min-height: 100px;
+  }
+}
+</style>
diff --git a/src/components/footer/titles/FooterTitles.vue b/src/components/footer/titles/FooterTitles.vue
new file mode 100644
index 0000000..5eb6722
--- /dev/null
+++ b/src/components/footer/titles/FooterTitles.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps({
+  title: String,
+});
+</script>
+<template>
+  <h1 class="footer-titles">{{ title }}</h1>
+</template>
+<style scoped>
+.footer-titles {
+  font-family: "Montserrat", sans-serif;
+  color: #ea6e18;
+  font-size: 20px;
+  font-weight: 550;
+}
+</style>
diff --git a/src/components/header/DesktopHeader.vue b/src/components/header/DesktopHeader.vue
index 2d1a570..f0ca78f 100644
--- a/src/components/header/DesktopHeader.vue
+++ b/src/components/header/DesktopHeader.vue
@@ -22,7 +22,8 @@ const templateStore = useTemplateStore()
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 15px 35px;
+    height: 11vh;
+    padding: 15px 170px;
     background-color: white;
     border-bottom: 1px solid rgb(83, 83, 83);
 }
@@ -31,23 +32,26 @@ const templateStore = useTemplateStore()
     display: flex;
     align-items: center;
     justify-content: space-around;
-    width: 100vh;
+    width: 100%;
     margin: 0px 150px;
 }
 
-@media (max-width:1200px) {
+@media (max-width:1450px) {
     .routers-desktop {
-        margin: 0px 100px;
+        margin: 0px 70px;
+    }
+    .header-desktop {
+        padding: 15px 130px;
     }
 }
 
-@media (max-width:1050px) {
+@media (max-width:1370px) {
     .routers-desktop {
         margin: 0px 50px;
     }
 
     .header-desktop {
-        padding: 15px 35px;
+        padding: 15px 110px;
     }
 }
 </style>
diff --git a/src/components/header/logo/TextLogo.vue b/src/components/header/logo/TextLogo.vue
index a560dcd..c7f7c22 100644
--- a/src/components/header/logo/TextLogo.vue
+++ b/src/components/header/logo/TextLogo.vue
@@ -16,12 +16,12 @@ h1 {
 }
 
 .logo-fabrica {
-    font-size: 25px;
+    font-size: 30px;
     font-weight: 500;
 }
 
 .logo-node {
-    font-size: 25px;
+    font-size: 30px;
     font-weight: 800;
     color: #267A7A;
 }
diff --git a/src/components/header/titles/ListTitles.vue b/src/components/header/titles/ListTitles.vue
index f0151ae..8168224 100644
--- a/src/components/header/titles/ListTitles.vue
+++ b/src/components/header/titles/ListTitles.vue
@@ -1,50 +1,77 @@
 <script lang="ts" setup>
 defineProps({
-    title: String,
-    link: String
-});
+  title: String,
+  link: String
+})
 </script>
 
 <template>
-    <RouterLink class="router-link" :to="link">
-        <li>{{ title }}</li>
-    </RouterLink>
+  <RouterLink class="router-link" :to="link">
+    <li>{{ title }}</li>
+  </RouterLink>
 </template>
 
 <style scoped>
 .routers-desktop li {
-    font-family: "Montserrat", sans-serif;
-    list-style: none;
-    font-size: 18px;
-    color: black;
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-size: 18px;
+  color: black;
+  position: relative;
 }
 
 .routers-mobile li {
-    font-family: "Montserrat", sans-serif;
-    list-style: none;
-    font-size: 18px;
-    color: black;
-    display: block;
-    text-align: center;
-    width: 90vh;
-    border-bottom: 1px solid rgb(83, 83, 83);
-    padding: 5vh;
-    color: black
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-size: 18px;
+  color: black;
+  display: block;
+  text-align: center;
+  width: 90vh;
+  border-bottom: 1px solid rgb(83, 83, 83);
+  padding: 5vh;
+  color: black;
 }
 
 .router-link {
-    text-decoration: none;
+  text-decoration: none;
+}
+li::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 4px;
+  position: absolute;
+  transition: width 0.5s ease;
 }
 
-@media (max-width:1000px) {
-    .routers-desktop li {
-        font-size: 16px;
-    }
+li:hover::after {
+  width: 100%;
+}
 
+.router-link:nth-child(1) li::after {
+  background-color: #ea6e18;
+}
+
+.router-link:nth-child(2) li::after {
+  background-color: #267a7a;
+}
+
+.router-link:nth-child(3) li::after {
+  background-color: #da4e50;
+}
+
+.router-link:nth-child(4) li::after {
+  background-color: #4a4beb;
+}
+@media (max-width: 1000px) {
+  .routers-desktop li {
+    font-size: 16px;
+  }
 }
-@media (max-width:820px) {
-    .routers-desktop li {
-        font-size: 14px;
-    }
+@media (max-width: 820px) {
+  .routers-desktop li {
+    font-size: 14px;
+  }
 }
 </style>
diff --git a/src/components/home/DefaultHome.vue b/src/components/home/DefaultHome.vue
new file mode 100644
index 0000000..e3cf3ba
--- /dev/null
+++ b/src/components/home/DefaultHome.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import {
+  TitlesHome,
+  DescriptionTitle,
+  ButtonGraph,
+  GraphImage,
+  DefaultFooter,
+} from "@/components";
+import { useTemplateStore } from "@/stores";
+
+const templateStore = useTemplateStore();
+</script>
+<template>
+  <div>
+    <div class="initial-page">
+      <div class="title">
+        <TitlesHome
+          v-for="(text, index) in templateStore.homeTitles"
+          :key="index"
+          :FirstTitle="text.firstTitle"
+          :SecondTitle="text.secondTitle"
+          :ThirdTitle="text.thirdTitle"
+          :Subtitle="text.subtitle"
+        />
+        <DescriptionTitle
+          v-for="(text, index) in templateStore.homeTitles"
+          :key="index"
+          :Subtitle="text.subtitle"
+        />
+        <ButtonGraph />
+      </div>
+      <GraphImage />
+    </div>
+  </div>
+  <DefaultFooter />
+</template>
+
+<style scoped>
+.title {
+  width: 50vw;
+  padding-left: 170px;
+}
+.initial-page {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 89vh;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(-22deg, #fff 50%, #22262f 50%);
+}
+@media (max-width:1450px) {
+    .title{
+        padding-left:130px;
+    }
+}
+@media (max-width:1370px) {
+    .title{
+        padding-left:110px;
+    }
+}
+</style>
diff --git a/src/components/home/button/ButtonGraph.vue b/src/components/home/button/ButtonGraph.vue
new file mode 100644
index 0000000..62d82ed
--- /dev/null
+++ b/src/components/home/button/ButtonGraph.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+<template>
+  <button class="button-see-graph" @click="router.push({ name: 'graph' })">Ver Grafo</button>
+</template>
+
+<style scoped>
+.button-see-graph {
+  width: max-content;
+  border-radius: 50px;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 22px;
+  background-color: #267a7a;
+  padding: 15px 60px;
+  color: white;
+  margin: 30px 0px;
+}
+.button-see-graph:hover {
+  background-color: #ea6e18;
+  transition: 0.5s;
+}
+</style>
diff --git a/src/components/home/image/GraphImage.vue b/src/components/home/image/GraphImage.vue
new file mode 100644
index 0000000..0bd53dd
--- /dev/null
+++ b/src/components/home/image/GraphImage.vue
@@ -0,0 +1,17 @@
+<template>
+            <div class="grafo-img">
+                <img src="@/assets/grafo.png">
+            </div>
+</template>
+
+<style scoped>
+.grafo-img{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50vw;
+}
+.grafo-img > img{
+    width: 40vw;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/titles/description/DescriptionTitle.vue b/src/components/home/titles/description/DescriptionTitle.vue
new file mode 100644
index 0000000..8cfe1bc
--- /dev/null
+++ b/src/components/home/titles/description/DescriptionTitle.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineProps({
+  Subtitle: String,
+});
+</script>
+<template>
+  <h2 class="title-description">{{ Subtitle }}</h2>
+</template>
+
+<style scoped>
+.title-description {
+  font-family: "Montserrat", sans-serif;
+  font-size: 25px;
+  font-weight: 400;
+  width: 460px;
+  color: #ea6e18;
+  margin: 20px 0px;
+}
+</style>
diff --git a/src/components/home/titles/title/TitlesHome.vue b/src/components/home/titles/title/TitlesHome.vue
new file mode 100644
index 0000000..697373d
--- /dev/null
+++ b/src/components/home/titles/title/TitlesHome.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+defineProps({
+  FirstTitle: String,
+  SecondTitle: String,
+  ThirdTitle: String,
+});
+</script>
+<template>
+  <div class="titles-container">
+    <h1 class="title-conecting">{{ FirstTitle }}</h1>
+    <h1 class="title-knowledge">{{ SecondTitle }}</h1>
+    <div class="hover-knowledge"></div>
+    <h1 class="title-academic">{{ ThirdTitle }}</h1>
+  </div>
+</template>
+
+<style scoped>
+.titles-container {
+  display: grid;
+  width: min-content;
+}
+
+.title-conecting {
+  z-index: 2;
+  font-family: "Montserrat", sans-serif;
+  font-size: 38px;
+  font-weight: 400;
+  position: relative;
+}
+
+.hover-knowledge {
+  z-index: 1;
+  display: block;
+  background-color: #4a4aeb38;
+  width: 100%;
+  height: 18px;
+  margin-top: -26px;
+}
+
+.title-knowledge {
+  font-family: "Montserrat", sans-serif;
+  font-size: 48px;
+  font-weight: 400;
+}
+
+.title-academic {
+  display: block;
+  justify-self: end;
+  font-family: "Montserrat", sans-serif;
+  font-size: 28px;
+  font-weight: 400;
+  width: max-content;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 657138e..ad68d47 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,7 +6,19 @@ import MobileHeader from './header/MobileHeader.vue';
 import ListTitles from './header/titles/ListTitles.vue';
 import TextLogo from './header/logo/TextLogo.vue';
 import LoginButton from './header/buttons/LoginButton.vue';
-import DefaultHeader from './header/DefaultHeader.vue'
+import DefaultHeader from './header/DefaultHeader.vue';
+import DefaultFooter from './footer/DeafaultFooter.vue';
+import FabricaContact from './footer/contact/FabricaContact.vue';
+import LinksFabrica from './footer/links/LinksFabrica.vue';
+import LinksHeader from './footer/links/LinksHeader.vue';
+import LogoFabrica from './footer/logo/LogoFabrica.vue';
+import FastLinks from './footer/links/FastLinks.vue';
+import FooterTitles from './footer/titles/FooterTitles.vue';
+import TitlesHome from './home/titles/title/TitlesHome.vue';
+import DescriptionTitle from './home/titles/description/DescriptionTitle.vue';
+import ButtonGraph from './home/button/ButtonGraph.vue';
+import GraphImage from './home/image/GraphImage.vue';
+import DefaultHome from './home/DefaultHome.vue';
 
 export {
     GraphContainer,
@@ -17,5 +29,17 @@ export {
     TextLogo,
     LoginButton,
     DefaultHeader,
-    NodeLabel
+    NodeLabel,
+    DefaultFooter,
+    TitlesHome,
+    DescriptionTitle,
+    ButtonGraph,
+    GraphImage,
+    DefaultHome,
+    FabricaContact,
+    LinksFabrica,
+    LinksHeader,
+    LogoFabrica,
+    FastLinks,
+    FooterTitles
 };
\ No newline at end of file
diff --git a/src/pages/FavoriteView.vue b/src/pages/FavoriteView.vue
index 9f73cc3..b256cdd 100644
--- a/src/pages/FavoriteView.vue
+++ b/src/pages/FavoriteView.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { DefaultHeader } from '@/components';
+import { DefaultHeader, DefaultFooter } from '@/components';
 </script>
 
 <template>
   <DefaultHeader/>
   <h1>favorite</h1>
+  <DefaultFooter/>
 </template>
\ No newline at end of file
diff --git a/src/pages/GraphView.vue b/src/pages/GraphView.vue
new file mode 100644
index 0000000..9c5f3d2
--- /dev/null
+++ b/src/pages/GraphView.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { GraphContainer, PainelControl, DefaultHeader } from '@/components';
+
+import { useAuth, useSetGraph } from '@/composables';
+import { useGraphStore } from '@/stores';
+
+const { configs } = useGraphStore();
+
+const { currentConnections } = useSetGraph();
+useAuth();
+</script>
+
+<template>
+  <div>
+    <DefaultHeader/>
+      <div class="container">
+        <GraphContainer :nodes="currentConnections.nodes" :edges="currentConnections.edges" :configs="configs"/>
+      </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+  overflow: hidden;
+}
+</style>
diff --git a/src/pages/HomeView.vue b/src/pages/HomeView.vue
index 9c5f3d2..8be5e4f 100644
--- a/src/pages/HomeView.vue
+++ b/src/pages/HomeView.vue
@@ -1,31 +1,9 @@
-<script setup lang="ts">
-import { GraphContainer, PainelControl, DefaultHeader } from '@/components';
-
-import { useAuth, useSetGraph } from '@/composables';
-import { useGraphStore } from '@/stores';
-
-const { configs } = useGraphStore();
-
-const { currentConnections } = useSetGraph();
-useAuth();
+<script lang="ts" setup>
+import { DefaultHeader, DefaultHome } from "@/components";
 </script>
-
 <template>
-  <div>
-    <DefaultHeader/>
-      <div class="container">
-        <GraphContainer :nodes="currentConnections.nodes" :edges="currentConnections.edges" :configs="configs"/>
-      </div>
-  </div>
+  <DefaultHeader />
+  <DefaultHome />
 </template>
 
-<style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 90vh;
-  overflow: hidden;
-}
-</style>
+<style scoped></style>
diff --git a/src/pages/LoginView.vue b/src/pages/LoginView.vue
index 5127bfd..07162df 100644
--- a/src/pages/LoginView.vue
+++ b/src/pages/LoginView.vue
@@ -1,20 +1,13 @@
 <script setup lang="ts">
-import '@passageidentity/passage-elements/passage-auth';
+import '@passageidentity/passage-elements/passage-auth'
 </script>
 
 <template>
   <div>
     <div class="authContainer">
-      <passage-auth
-        app-id="8hvbdcIOsej2p0nx6WXNa3F7"
-      ></passage-auth>
+      <passage-auth app-id="8hvbdcIOsej2p0nx6WXNa3F7"></passage-auth>
     </div>
   </div>
-
-
 </template>
 
-
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 571bd42..b58d7ee 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,11 @@ const router = createRouter({
       name: 'home',
       component: () => import('../pages/HomeView.vue')
     },
+    {
+      path: '/graph',
+      name: 'graph',
+      component: () => import('../pages/GraphView.vue')
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/src/stores/template/template.ts b/src/stores/template/template.ts
index df57e05..4174c4d 100644
--- a/src/stores/template/template.ts
+++ b/src/stores/template/template.ts
@@ -1,27 +1,84 @@
-import { ref } from 'vue';
-import { defineStore } from 'pinia';
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
 
 export const useTemplateStore = defineStore('template', () => {
+  const tooltipOpacity = ref(0)
+  const menuActive = ref(false)
 
-    const tooltipOpacity = ref(0);
-    const menuActive = ref(false);
+  const titles = [
+    {
+      text: 'HOME',
+      link: '/'
+    },
+    {
+      text: 'PUBLICAÇÕES',
+      link: '/article'
+    },
+    {
+      text: 'AUTORES',
+      link: '/author'
+    },
+    {
+      text: 'SOBRE',
+      link: '/about'
+    }
+  ]
+
+  const homeTitles = [
+    {
+      firstTitle: 'conectando',
+      secondTitle: 'CONHECIMENTO',
+      thirdTitle: 'acadêmico',
+      subtitle:
+        'publicações acadêmicas conectadas de forma intuitiva, ultilizando redes especializadas, facilitando o acesso ao conhecimento.'
+    }
+  ]
 
-    const titles = [{
-        text: "HOME",
-        link: "/"
+  const footerTitles = [
+    {
+      linksTitle: 'LINKS RÁPIDOS',
+      contactTitle: 'CONTATO'
+    }
+  ]
+
+  const footerContact = [
+    {
+      text: 'BR-280 - Colégio Agrícola, Araquari - SC, 89245-000'
+    },
+    {
+      text: 'fabrica@ifc.edu.br'
+    },
+    {
+      text: '(47) 3803-7200'
+    }
+  ]
+
+  const footerMidia = [
+    {
+      img: 'github',
+      link: 'https://github.com/fabricadesoftware-ifc'
     },
     {
-        text: "PUBLICAÇÕES",
-        link: "/article"
+      img: 'instagram',
+      link: 'https://www.instagram.com/fabricadesoftware.ifc/'
     },
     {
-        text: "AUTORES",
-        link: "/author"
+      img: 'linked-in',
+      link: 'https://br.linkedin.com/company/fabricadesoftware-if'
     },
     {
-        text: "SOBRE",
-        link: "/about"
-    }]
+      img: 'twiter',
+      link: 'https://x.com/FabSoftwareIFC'
+    }
+  ]
 
-    return { tooltipOpacity, titles, menuActive };
-});
+  return {
+    tooltipOpacity,
+    titles,
+    menuActive,
+    homeTitles,
+    footerTitles,
+    footerContact,
+    footerMidia
+  }
+})