diff --git a/next/pages/api/team/getAllPeople.js b/next/pages/api/team/getAllPeople.js
new file mode 100644
index 00000000..037792ea
--- /dev/null
+++ b/next/pages/api/team/getAllPeople.js
@@ -0,0 +1,50 @@
+import axios from "axios";
+
+const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
+
+export default async function getAllPeople() {
+  try {
+    const res = await axios({
+      url: API_URL,
+      method: "POST",
+      data: {
+        query: `
+        query {
+          allAccount {
+            edges {
+              node {
+                firstName
+                lastName
+                description
+                website
+                email
+                twitter
+                linkedin
+                github
+                picture
+                isActiveStaff
+                careers {
+                  edges {
+                    node {
+                      _id
+                      team
+                      role
+                      startAt
+                      endAt
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        `
+      }
+    })
+    const result = res?.data?.data?.allAccount?.edges
+    const data = result.filter(item => item.node.isActiveStaff === 'true')
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}
diff --git a/next/pages/api/team/getAllTeams.js b/next/pages/api/team/getAllTeams.js
new file mode 100644
index 00000000..7c18d74a
--- /dev/null
+++ b/next/pages/api/team/getAllTeams.js
@@ -0,0 +1,39 @@
+import axios from "axios";
+
+const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
+
+export default async function getAllTeams() {
+  try {
+    const res = await axios({
+      url: API_URL,
+      method: "POST",
+      data: {
+        query: `
+          query {
+            allCareer {
+              edges {
+                node {
+                  team
+                }
+              }
+            }
+          }
+        `
+      }
+    })
+    const result = res?.data?.data?.allCareer?.edges
+    const teamsSet = new Set()
+
+    result.forEach(item => {
+      const team = item.node.team.trim()
+      if (team !== "") {
+        teamsSet.add(team)
+      }
+    })
+
+    const data = Array.from(teamsSet)
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}
diff --git a/next/pages/api/team/getCareerPeople.js b/next/pages/api/team/getCareerPeople.js
new file mode 100644
index 00000000..1301e309
--- /dev/null
+++ b/next/pages/api/team/getCareerPeople.js
@@ -0,0 +1,48 @@
+import axios from "axios";
+
+const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
+
+export default async function getCareerPeople(team) {
+  try {
+    const res = await axios({
+      url: API_URL,
+      method: "POST",
+      data: {
+        query: `
+        query {
+          allAccount (careers_Team: "${team}"){
+            edges {
+              node {
+                firstName
+                lastName
+                description
+                website
+                email
+                twitter
+                linkedin
+                github
+                picture
+                careers {
+                  edges {
+                    node {
+                      _id
+                      team
+                      role
+                      startAt
+                      endAt
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        `
+      }
+    })
+    const data = res?.data?.data?.allAccount?.edges
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}
diff --git a/next/pages/api/team/index.js b/next/pages/api/team/index.js
index ceb5ff38..3089fe07 100644
--- a/next/pages/api/team/index.js
+++ b/next/pages/api/team/index.js
@@ -1,7 +1,13 @@
-import getTeams from "./getTeams"
-import getPeople from "./getPeople"
+import getTeams from "./getTeams";
+import getPeople from "./getPeople";
+import getAllPeople from "./getAllPeople";
+import getCareerPeople from "./getCareerPeople";
+import getAllTeams from "./getAllTeams";
 
 export {
   getTeams,
-  getPeople
+  getPeople,
+  getAllPeople,
+  getCareerPeople,
+  getAllTeams
 }
\ No newline at end of file
diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js
index a491bd16..56d0b09c 100755
--- a/next/pages/quem-somos.js
+++ b/next/pages/quem-somos.js
@@ -16,8 +16,9 @@ import { MainPageTemplate } from "../components/templates/main";
 import { isMobileMod } from "../hooks/useCheckMobile.hook";
 
 import {
-  getTeams,
-  getPeople
+  getAllPeople,
+  getCareerPeople,
+  getAllTeams
 } from "./api/team";
 
 import Display from "../components/atoms/Display";
@@ -36,6 +37,18 @@ import DiscordIcon from "../public/img/icons/discordIcon";
 import RedirectIcon from "../public/img/icons/redirectIcon";
 import styles from "../styles/quemSomos.module.css";
 
+export async function getServerSideProps() {
+  const data = await getAllPeople()
+  const teams = await getAllTeams()
+
+  return {
+    props: {
+      data,
+      teams
+    },
+  }
+}
+
 const HistoryBox = ({ children, title, date, image }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
@@ -99,9 +112,27 @@ const HistoryBox = ({ children, title, date, image }) => {
   )
 }
 
-const TeamBox = ({ index, data }) => {
+const TeamBox = ({
+  index,
+  data,
+  name,
+  picture,
+  description,
+  website,
+  email,
+  twitter,
+  linkedin,
+  github,
+  career
+}) => {
   const hasLeftSpacing = (index % 2 == 0) ? false : true
 
+  const role = () => {
+    const roles = []
+    career.map((elm) => roles.push(elm.node.role))
+    return roles.filter((elm) => elm.length > 0).join(", ")
+  }
+
   const iconTeamBox = (ref) => {
     let href = ""
 
@@ -134,14 +165,14 @@ const TeamBox = ({ index, data }) => {
     }
   }
 
-  const iconLinks = () => {
+  const IconLinks = () => {
     return (
       <Box display="flex" flexDirection="row" gridGap="5px">
-        {data.website ? <WebIcon {...iconTeamBox({website: data.website})}/> : null}
-        {data.email ? <EmailIcon {...iconTeamBox({email: data.email})}/> : null}
-        {data.twitter ? <TwitterIcon {...iconTeamBox({twitter: data.twitter})}/> : null}
-        {data.linkedin ? <LinkedinIcon {...iconTeamBox({linkedin: data.linkedin})}/> : null}
-        {data.github ? <GithubIcon {...iconTeamBox({github: data.github})}/> : null}
+        {website ? <WebIcon {...iconTeamBox({website: website})}/> : null}
+        {email ? <EmailIcon {...iconTeamBox({email: email})}/> : null}
+        {twitter ? <TwitterIcon {...iconTeamBox({twitter: twitter})}/> : null}
+        {linkedin ? <LinkedinIcon {...iconTeamBox({linkedin: linkedin})}/> : null}
+        {github ? <GithubIcon {...iconTeamBox({github: github})}/> : null}
       </Box>
     )
   }
@@ -164,8 +195,8 @@ const TeamBox = ({ index, data }) => {
         overflow="hidden"
       >
         <Image
-          alt={data?.name || ""}
-          src={data.photo_url ? data.photo_url : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
+          alt={name}
+          src={picture ? picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
           width="100%"
           height="100%"
         />
@@ -176,10 +207,11 @@ const TeamBox = ({ index, data }) => {
             fontSize="18px"
             marginRight="16px"
           >
-            {data?.name}
+            {name}
           </BodyText>
-          {!isMobileMod() && iconLinks()}
+          {!isMobileMod() && <IconLinks/>}
         </Box>
+
         <BodyText
           fontSize="16px"
           fontWeight="400"
@@ -187,18 +219,26 @@ const TeamBox = ({ index, data }) => {
           letterSpacing="0.2px"
           color="#6F6F6F"
         >
-          {data?.role.join(", ")}
+          {role()}
+        </BodyText>
+
+        <BodyText
+          fontSize="16px"
+          letterSpacing="0.2px"
+          lineHeight="25px"
+          marginBottom={isMobileMod() ? "12px" : "0"}
+        >
+          {description}
         </BodyText>
-        <BodyText fontSize="16px" letterSpacing="0.2px" lineHeight="25px" marginBottom={isMobileMod() ? "12px" : "0"}>{data?.description}</BodyText>
         {isMobileMod() && iconLinks()}
       </Box>
     </Box>
   )
 }
 
-export default function QuemSomos() {
-  const [allPeople, setAllPeople] = useState([])
-  const [people, setPeople] = useState([])
+export default function QuemSomos({ data, teams }) {
+  const [allPeople] = useState(data)
+  const [people, setPeople] = useState(data)
   const [filterTeam, setFilterTeam] = useState("")
 
   const schemasTeam = [
@@ -213,104 +253,6 @@ export default function QuemSomos() {
     "Conselho Fiscal"
   ]
 
-  const sortingTeam = (array, team = schemasTeam) => {
-    let arraySorting = []
-
-    team.map((personTeam) => {
-      const newPeopleByTeam = array.filter((person) => {
-        const indexTeam = person.team.findIndex((res) => res === personTeam)
-        if(indexTeam > -1) return person.team[indexTeam]
-      })
-
-      const orderByName = newPeopleByTeam.sort((a, b) => {
-        const compareName = (firstPerson, secondPerson) => firstPerson.name.localeCompare(secondPerson.name)
-
-        if (compareName(a, b) < compareName(b, a)) return -1
-        if (compareName(a, b) > compareName(b, a)) return 1
-        return 0
-      })
-
-      const orderByLevel = orderByName.sort((a, b) => {
-        const valueLevel = (elm) => {{
-          const levelPerson = elm.level[0]
-          if(levelPerson === "Presidente") return -3
-          if(levelPerson === "Diretora Executiva") return -2
-          if(levelPerson === "Gerente") return -1
-          return 0
-        }}
-
-        return valueLevel(a) - valueLevel(b)
-      })
-
-      orderByLevel.map((res) => {
-        arraySorting.push(res)
-      })
-      
-    })
-    const newArraySorting = [...new Set(arraySorting)]
-    return newArraySorting
-  }
-
-  useEffect(() => {
-    setPeople(sortingTeam(allPeople))
-  },[allPeople])
-
-  useEffect(() => {
-    setAllPeople(groupingTeamAndRole(Object.values(getPeople)).filter(Boolean))
-  },[])
-
-  const groupingTeamAndRole = (array) => array.map((elm) => {
-    const person = elm
-    const team = []
-    const role = []
-    const level = []
-    const endDate = []
-
-    const getById = getTeams.filter((elm) => elm.person_id === person.id)
-
-    if(getById) getById.map((res) => {
-      team.push(res.team)
-      role.push(res.role)
-      level.push(res.level)
-      endDate.push(res.end_date)
-    })
-
-    const filterArray = (array) => Array.from(new Set(array.filter(Boolean)))
-
-    const departureDate = filterArray(endDate)
-
-    if(departureDate.length > 0) {
-      const endDate = new Date(departureDate[0])
-      const dateNow = new Date()
-      if(endDate < dateNow) return ""
-    }
-
-    return {
-      ...person,
-      team : filterArray(team),
-      role : filterArray(role),
-      level : filterArray(level),
-    }
-  })
-
-  useEffect(() => {
-    if(filterTeam) filterPeopleByTeam(filterTeam)
-  },[filterTeam])
-
-  const filterPeopleByTeam = (team) => {
-    const teamPeople = getTeams.filter((elm) => elm.team === team)
-
-    const mapId = () => teamPeople.map((elm) => elm.person_id)
-    
-    const personIdList = Array.from(new Set(mapId()))
-
-    const filterPeople = () => personIdList.map((personId) => getPeople[personId])
-      
-    const newGroupPerson = groupingTeamAndRole(filterPeople()).filter(Boolean)
-
-    setPeople(sortingTeam(newGroupPerson, [team]))
-  }
-
   const keyIcon = (url) => {
     return {
       cursor:"pointer",
@@ -325,13 +267,15 @@ export default function QuemSomos() {
     }
   }
 
-  const handleSelect = (elm) => {
+  const handleSelect = async (elm) => {
     window.open("#teams", "_self")
     if(filterTeam === elm) {
-      setFilterTeam()
-      return setPeople(sortingTeam(allPeople))
+      setFilterTeam("")
+      return setPeople(allPeople)
     } else {
-      return setFilterTeam(elm)
+      setFilterTeam(elm)
+      const result = await getCareerPeople(elm)
+      setPeople(result)
     }
   }
 
@@ -715,7 +659,7 @@ export default function QuemSomos() {
             top={isMobileMod()? "0" : "120px"}
             z-index="20"
           >
-            {schemasTeam?.map((elm) => (
+            {teams?.map((elm) => (
               <Text
                 fontSize="16px"
                 color={filterTeam === elm ? "#2B8C4D" :"#6F6F6F"}
@@ -737,8 +681,18 @@ export default function QuemSomos() {
           >
             {people?.map((elm, index) => (
               <TeamBox
+                key={index}
                 index={index}
                 data={elm}
+                name={`${elm.node.firstName} ${elm.node.lastName}`}
+                picture={elm.node.picture}
+                description={elm.node.description}
+                website={elm.node.website}
+                email={elm.node.email}
+                twitter={elm.node.twitter}
+                linkedin={elm.node.linkedin}
+                github={elm.node.github}
+                career={elm.node.careers.edges}
               />
             ))}
           </Stack>
@@ -774,9 +728,7 @@ export default function QuemSomos() {
             </RoundedButton>
           </Box>
         </Stack>
-
       </Stack>
-
     </MainPageTemplate>
   )
 }
\ No newline at end of file