diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js
index cb3819e5..3a3eff03 100644
--- a/next/components/atoms/GreenTab.js
+++ b/next/components/atoms/GreenTab.js
@@ -4,6 +4,7 @@ import { Tab } from "@chakra-ui/tabs";
 export default function GreenTab({ children, ...style }) {
   return (
     <Tab
+      fontFamily="ubuntu"
       fontSize="18px"
       fontWeight="400"
       letterSpacing="0.1px"
diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js
index 18fdc355..b134d480 100644
--- a/next/components/molecules/Footer.js
+++ b/next/components/molecules/Footer.js
@@ -62,7 +62,7 @@ function FooterLink(props) {
   )
 }
 
-export default function Footer({ pages }) {
+export default function Footer({ pages, ocult = false }) {
   const mobileCheck = useCheckMobile()
   const [isMobileMod, setIsMobileMod] = useState(false)
   
@@ -70,8 +70,10 @@ export default function Footer({ pages }) {
     setIsMobileMod(mobileCheck)
   },[])
 
+  if(ocult === true) return null
+
   return (
-    <VStack 
+    <VStack
       position="relative"
       zIndex="10"
       width="100%"
diff --git a/next/components/molecules/FormTable.js b/next/components/molecules/FormTable.js
index 1ac6b92d..c33bf77a 100644
--- a/next/components/molecules/FormTable.js
+++ b/next/components/molecules/FormTable.js
@@ -404,8 +404,8 @@ export default function FormTable({
       </Stack>
 
       <Modal isCentered isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
+        <ModalOverlay/>
+        <ModalContent margin="24px">
           <ModalHeader>Deletar table</ModalHeader>
           <ModalBody>
             Você tem certeza em deletar esse table? Uma vez deletada, todas as informações dele e de Columns serão excluídas em consequência.
diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js
index 0b35f60e..7a06e059 100644
--- a/next/components/molecules/Menu.js
+++ b/next/components/molecules/Menu.js
@@ -1,12 +1,12 @@
 import {
   Box,
+  Stack,
   HStack,
   VStack,
   Drawer,
   DrawerOverlay,
   DrawerContent,
   useDisclosure,
-  Avatar,
   Text,
   Accordion,
   AccordionItem,
@@ -15,16 +15,20 @@ import {
   AccordionIcon,
   useBoolean,
   Divider,
+  Image,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem
 } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router"
-import { MenuDropdown } from "./MenuDropdown";
 import cookies from "js-cookie";
-import { useCheckMobile } from "../../hooks/useCheckMobile.hook"
+import { MenuDropdown } from "./MenuDropdown";
+import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook"
 import ControlledInput from "../atoms/ControlledInput";
 import Link from "../atoms/Link";
 import RoundedButton from "../atoms/RoundedButton";
-import SectionText from "../atoms/SectionText";
 
 import BDLogoProImage from "../../public/img/logos/bd_logo_pro";
 import BDLogoEduImage from "../../public/img/logos/bd_logo_edu";
@@ -33,8 +37,12 @@ import FarBarsIcon from "../../public/img/icons/farBarsIcon";
 import SearchIcon from "../../public/img/icons/searchIcon";
 import CrossIcon from "../../public/img/icons/crossIcon";
 import RedirectIcon from "../../public/img/icons/redirectIcon";
+import SettingsIcon from "../../public/img/icons/settingsIcon";
+import SignOutIcon from "../../public/img/icons/signOutIcon";
 
 function MenuDrawer({ isOpen, onClose, links }) {
+  let userData = cookies.get("user") || null
+
   return (
     <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
       <DrawerOverlay backdropFilter="blur(2px)"/>
@@ -55,6 +63,7 @@ function MenuDrawer({ isOpen, onClose, links }) {
                   minWidth="100px"
                   height="38px"
                   fontSize="20px"
+                  borderRadius="30px"
                   onClick={() => window.open(b.href, "_blank")}
                 >
                   {b.name}
@@ -118,11 +127,351 @@ function MenuDrawer({ isOpen, onClose, links }) {
             }
           })}
         </VStack>
+
+        {userData ?
+          <></>
+          :
+          <Stack display={isMobileMod() ? "flex" : "none"} marginTop="auto" gap="16px">
+            <RoundedButton
+              backgroundColor="#FFF"
+              border="2px solid #42B0FF"
+              color="#42B0FF"
+              height="38px"
+              borderRadius="30px"
+              fontSize="20px"
+              onClick={() => window.open("/user/login", "_self")}
+            >
+              Entrar
+            </RoundedButton>
+            <RoundedButton
+              backgroundColor="#42B0FF"
+              height="38px"
+              borderRadius="30px"
+              fontSize="20px"
+              onClick={() => window.open("/user/register", "_self")}
+            >
+              Cadastrar
+            </RoundedButton>
+          </Stack>
+        }
       </DrawerContent>
     </Drawer>
   );
 }
 
+function MenuDrawerUser({ isOpen, onClose}) {
+  const router = useRouter()
+  let userData = cookies.get("user") || null
+  if(userData !== null) userData = JSON.parse(cookies.get("user"))
+
+  const links = [
+    {name: "Perfil público", value: "profile"},
+    {name: "Conta", value: "account"},
+    {name: "Senha", value: "new_password"},
+    {name: "Planos e pagamento", value: "plans_and_payment"},
+    {name: "Acessos", value: "accesses"},
+  ]
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose}>
+      <DrawerOverlay backdropFilter="blur(2px)"/>
+      <DrawerContent padding="16px">
+        <BDLogoImage
+          widthImage="65px"
+          heightImage="30px"
+          marginBottom="24px"
+          onClick={() => window.open("/", "_self")}
+        />
+
+        <Stack spacing={0} justifyContent="center" alignItems="center" padding="16px 0" marginBottom="24px">
+          <Box
+            width="48px"
+            height="48px"
+            borderRadius="50%"
+            overflow="hidden"
+            marginBottom="10px"
+          >
+            <Image
+              display={{ base: "flex", lg: "none" }}
+              alt=""
+              width="100%"
+              height="100%"
+              src={userData?.picture ? userData?.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
+            />
+          </Box>
+          <Text
+            color="#252A32"
+            fontFamily="Ubuntu"
+            fontSize="14px"
+            fontWeight="400"
+            lineHeight="27px"
+            letterSpacing="0.3px"
+          >{userData?.username ? userData?.username : "Dadinho"}</Text>
+          <Text
+            color="#6F6F6F"
+            fontFamily="Ubuntu"
+            fontSize="14px"
+            fontWeight="400"
+            lineHeight="27px"
+            letterSpacing="0.3px"
+          >{userData?.email ? userData?.email : "dadinho@basedosdados.org"}</Text>
+        </Stack>
+
+        <Accordion allowToggle width="100%" defaultIndex={0}>
+          <AccordionItem borderWidth="0 !important">
+            <AccordionButton
+              padding="16px 0"
+              _hover={{background: "none"}}
+              justifyContent="space-between"
+            >
+              <Stack spacing={0} flexDirection="row" gap="8px">
+                <SettingsIcon fill="#D0D0D0" width="16px" height="16px"/>
+                <Text
+                  fontSize="16px"
+                  fontFamily="Ubuntu"
+                  fontWeight="400"
+                  lineHeight="16px"
+                  letterSpacing="0.2px"
+                  color="#252A32"
+                >
+                  Configurações
+                </Text>
+              </Stack>
+              <AccordionIcon />
+            </AccordionButton>
+          <AccordionPanel
+            display="flex"
+            flexDirection="column"
+            gridGap="10px"
+            padding="8px 0 0 24px"
+          >
+            {links.map((elm, index) => {
+              return (
+                <Link
+                  key={index}
+                  color="#575757"
+                  fontSize="14px"
+                  fontFamily="Ubuntu"
+                  fontWeight="400"
+                  lineHeight="27px"
+                  letterSpacing="0.3px"
+                  onClick={() => {
+                    onClose()
+                    router.push({pathname: "/user/dev", query: elm.value})}
+                  }
+                >{elm.name}</Link>
+              )
+            })}
+          </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+
+        <Divider margin="24px 0" borderColor="#DEDFE0"/>
+
+        <Stack
+          spacing={0}
+          flexDirection="row"
+          padding="16px 0"
+          alignItems="center"
+          onClick={() => {
+            cookies.remove('user', { path: '/' })
+            cookies.remove('token', { path: '/' })
+            window.open("/", "_self")
+          }}
+        >
+          <SignOutIcon width="20px" height="20px" fill="#D0D0D0"/>
+          <Text
+            color="#252A32"
+            fontFamily="Ubuntu"
+            fontSize="16px"
+            fontWeight="400"
+            lineHeight="16px"
+            letterSpacing="0.2px"
+            marginLeft="8px !important"
+          >
+            Sair
+          </Text>
+        </Stack>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function MenuUser ({ userData, onOpen, onClose }) {
+  const timerRef = useRef()
+  const [isOpenMenu, setIsOpenMenu] = useState(false)
+
+  const btnMouseEnterEvent = () => {
+    setIsOpenMenu(true)
+  }
+  const btnMouseLeaveEvent = () => {
+    timerRef.current = setTimeout(() => {
+      setIsOpenMenu(false)
+    }, 100)
+  }
+  const menuListMouseEnterEvent = () => {
+    clearTimeout(timerRef.current)
+    timerRef.current = undefined
+    setIsOpenMenu(true)
+  }
+  const menuListMouseLeaveEvent = () => {
+    setIsOpenMenu(false)
+  }
+
+  if(useCheckMobile()) {
+    return (
+      <Box
+        cursor="pointer"
+        position="fixed"
+        right="24px"
+        height="40px"
+        width="40px"
+        borderRadius="50%"
+        overflow="hidden"
+        onClick={() => onOpen()}
+      >
+        <Image
+          alt=""
+          width="100%"
+          height="100%"
+          src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
+        />
+      </Box>
+    )
+  } else {
+    return (
+      <Menu
+        isOpen={isOpenMenu}
+        autoSelect={false}
+        placement="bottom"
+      >
+        <MenuButton
+          onClick={btnMouseEnterEvent}
+          onMouseLeave={btnMouseLeaveEvent}
+        >
+          <Box
+            height="40px"
+            width="40px"
+            borderRadius="50%"
+            overflow="hidden"
+          >
+            <Image
+              alt=""
+              width="100%"
+              height="100%"
+              src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
+            />
+          </Box>
+        </MenuButton>
+        <MenuList
+          width="260px"
+          borderWidth={0}
+          padding={0}
+          boxShadow="0 1.6px 16px 0 rgba(100, 96, 103, 0.16)"
+          onMouseEnter={menuListMouseEnterEvent}
+          onMouseLeave={menuListMouseLeaveEvent}
+        >
+          <MenuItem
+            display="flex"
+            flexDirection="column"
+            cursor="default"
+            width="100%"
+            textAlign="center"
+            alignItems="center"
+            padding="16px"
+            _hover={{ backgroundColor: "transparent"}}
+          >
+            <Box
+              height="48px"
+              width="48px"
+              borderRadius="50%"
+              overflow="hidden"
+              marginBottom="10px"
+            >
+              <Image
+                alt=""
+                width="100%"
+                height="100%"
+                display={{ base: "none", lg: "flex" }}
+                src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
+              />
+            </Box>
+            <Text
+              color="#252A32"
+              fontFamily="Ubuntu"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="16px"
+              letterSpacing="0.3px"
+            >
+              {userData?.username ? userData?.username : "dadinho"}
+            </Text>
+            <Text
+              color="#6F6F6F"
+              fontFamily="Ubuntu"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="16px"
+              letterSpacing="0.3px"
+            >
+              {userData?.email ? userData?.email : "dadinho@basedosdados.org"}
+            </Text>
+          </MenuItem>
+
+          <MenuItem
+            display="flex"
+            flexDirection="row"
+            alignItems="start"
+            gap="8px"
+            padding="16px"
+            _hover={{ backgroundColor: "transparent", opacity: "0.6" }}
+            onClick={() => window.open("/user/dev", "_self")}
+          >
+            <SettingsIcon fill="#D0D0D0" width="16px" height="16px"/>
+            <Text
+              color="#252A32"
+              fontFamily="Ubuntu"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="16px"
+              letterSpacing="0.3px"
+            >
+              Configurações
+            </Text>
+          </MenuItem>
+          <Divider borderColor="#DEDFE0"/>
+          <MenuItem
+            display="flex"
+            flexDirection="row"
+            alignItems="start"
+            gap="8px"
+            padding="16px"
+            _hover={{ backgroundColor: "transparent", opacity: "0.6" }}
+            onClick={() => {
+              cookies.remove('user', { path: '/' })
+              cookies.remove('token', { path: '/' })
+              window.open("/", "_self")}
+            }
+          >
+            <SignOutIcon width="20px" height="20px" fill="#D0D0D0"/>
+            <Text
+              color="#252A32"
+              fontFamily="Ubuntu"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="16px"
+              letterSpacing="0.3px"
+            >
+              Sair
+            </Text>
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    )
+  }
+
+}
+
 function SearchInput ({ status }) {
   const router = useRouter()
   const { query } = router
@@ -198,7 +547,99 @@ function SearchInput ({ status }) {
   )
 }
 
-function DesktopLinks({ links, position = false, path }) {
+function SearchInputUser () {
+  const [search, setSearch] = useState("")
+  const [showSearch, setShowSearch] = useState(false)
+
+  function openSearchLink() {
+    window.open(`/dataset?q=${search}`, "_self")
+  }
+
+  // if(isMobileMod()) return (
+  //   <Stack spacing={0} marginLeft="auto !important" paddingRight="60px">
+  //     <SearchIcon
+  //       display={showSearch ? "none" : "flex"}
+  //       right="100px"
+  //       alt="pesquisar"
+  //       fill="#D0D0D0"
+  //       width="18px"
+  //       height="18px"
+  //       cursor="pointer"
+  //       _hover={{opacity:"0.8"}}
+  //       onClick={() => setShowSearch(true)}
+  //     />
+  //     <Box transition="1s" overflow="hidden" width={showSearch ? "100%" : "0"} maxWidth="160px">
+  //       <ControlledInput
+  //         maxWidth="480px"
+  //         width="480px"
+  //         value={search}
+  //         onChange={setSearch}
+  //         onEnterPress={openSearchLink}
+  //         placeholder="Pesquise dados"
+  //         alignSelf="center"
+  //         justifyContent="center"
+  //         inputStyle={{
+  //           height: "40px",
+  //           fontSize: "16px",
+  //           width: "100%",
+  //           fontFamily: "Lato",
+  //           borderRadius: "14px",
+  //           _placeholder:{color: "#6F6F6F"}
+  //         }}
+  //         rightIcon={
+  //           <SearchIcon
+  //             alt="pesquisar"
+  //             fill="#D0D0D0"
+  //             width="18px"
+  //             height="18px"
+  //             cursor="pointer"
+  //             _hover={{opacity:"0.8"}}
+  //             onClick={() => openSearchLink()}
+  //           />
+  //         }
+  //       />
+  //     </Box>
+  //   </Stack>
+  // )
+
+  if(isMobileMod()) return null
+
+  return (
+    <Stack spacing={0}>
+      <ControlledInput
+        maxWidth="480px"
+        width="480px"
+        value={search}
+        onChange={setSearch}
+        onEnterPress={openSearchLink}
+        placeholder="Pesquise dados"
+        alignSelf="center"
+        justifyContent="center"
+        inputStyle={{
+          height: "40px",
+          fontSize: "16px",
+          width: "100%",
+          fontFamily: "Lato",
+          borderRadius: "14px",
+          _placeholder:{color: "#6F6F6F"}
+        }}
+        rightIcon={
+          <SearchIcon
+            alt="pesquisar"
+            fill="#D0D0D0"
+            width="18px"
+            height="18px"
+            cursor="pointer"
+            _hover={{opacity:"0.8"}}
+            onClick={() => openSearchLink()}
+          />
+        }
+      />
+    </Stack>
+  )
+}
+
+function DesktopLinks({ links, position = false, path, userTemplate = false }) {
   const [statusSearch, setStatusSearch] = useState(false)
 
   let userData = cookies.get("user") || null
@@ -240,9 +681,9 @@ function DesktopLinks({ links, position = false, path }) {
 
   return (
     <HStack
+      display={{ base: "none", lg: "flex" }}
       justifyContent="space-between"
       width="100%"
-      display={{ base: "none", lg: "flex" }}
       position={{ base: "relative", lg: "initial" }}
       gap="24px"
       transition="1s"
@@ -252,7 +693,7 @@ function DesktopLinks({ links, position = false, path }) {
         : "32px !important"
       }
     >
-      <HStack width="100%" flex="3" spacing={7}>
+      <HStack display={userTemplate ? "none" : "flex"} width="100%" flex="3" spacing={7}>
         {Object.entries(links).map(([k, v]) => {
           if (k === "Button")
             return v.map(b => (
@@ -263,6 +704,7 @@ function DesktopLinks({ links, position = false, path }) {
                   minWidth="80px"
                   height="35px"
                   fontSize="15px"
+                  borderRadius="30px"
                 >
                   {b.name}
                 </RoundedButton>
@@ -317,34 +759,37 @@ function DesktopLinks({ links, position = false, path }) {
       </HStack>
 
       <SearchInput status={searchStatus}/>
+      {userTemplate && !isMobileMod() && <SearchInputUser />}
 
       {!statusSearch &&
         <HStack spacing={8} display={{ base: "none", lg: "flex" }}>
           {userData ? (
-            <HStack spacing={5}>
-              <Avatar
-                bg="#2B8C4D"
-                name={userData?.firstName}
-                src={userData.picture}
-              />
-              <Link
-                fontSize="14px"
-                textTransform="capitalize"
-                href={`/user/${userData.username}`}
+            <HStack spacing="20px">
+              <RoundedButton
+                display={isMobileMod() ? "none" : "flex"}
+                backgroundColor="#FFF"
+                border="2px solid #42B0FF"
+                color="#42B0FF"
+                height="40px"
+                fontWeight="700"
+                borderRadius="30px"
+                fontSize="15px"
+                onClick={() => window.open("/precos", "_self")}
               >
-                {userData.username}
-              </Link>
+                BD Pro
+              </RoundedButton>
+              <MenuUser userData={userData}/>
             </HStack>
           ) : (
             <>
-              {/* <Link fontSize="15px" fontFamily="Ubuntu" fontWeight="400" letterSpacing="0.3px" href="/user/login">
+              <Link fontSize="15px" fontFamily="Ubuntu" fontWeight="400" letterSpacing="0.3px" href="/user/login">
                 Entrar
               </Link>
               <Link _hover={{ opacity:"none" }} href="/user/register">
-                <RoundedButton height="35px" fontSize="15px" minWidth="110px">
+                <RoundedButton height="35px" fontSize="15px" minWidth="110px" borderRadius="30px">
                   Cadastrar
                 </RoundedButton>
-              </Link> */}
+              </Link>
             </>
           )}
         </HStack>
@@ -353,10 +798,11 @@ function DesktopLinks({ links, position = false, path }) {
   );
 }
 
-export default function Menu({}) {
+export default function MenuNav({ simpleTemplate = false, userTemplate = false }) {
   const router = useRouter()
   const { route } = router
-  const menuDisclosure = useDisclosure();
+  const menuDisclosure = useDisclosure()
+  const menuUserMobile = useDisclosure()
   const divRef = useRef()
   const bannerRef = useRef()
   const [isScrollDown, setIsScrollDown] = useState(false)
@@ -372,7 +818,7 @@ export default function Menu({}) {
       {icon: <BDLogoProImage widthImage="54px"/>, name: "Dados exclusivos", href: "https://info.basedosdados.org/bd-pro"},
       {icon: <BDLogoEduImage widthImage="54px"/>, name: "Curso de dados", href: "https://info.basedosdados.org/bd-edu"},
       {},
-      {name: "Serviços", href: "/servicos"},
+      {name: "Serviço", href: "/servicos"},
       {},
       {name: "Estudos de caso", href: "/estudos-de-caso"}
     ],
@@ -415,6 +861,7 @@ export default function Menu({}) {
   return (
     <>
       <Box
+        display={simpleTemplate || userTemplate ? "none" : "block"}
         ref={bannerRef}
         position="fixed"
         backgroundColor="#252A32"
@@ -457,20 +904,20 @@ export default function Menu({}) {
         left="0px"
         backgroundColor="#FFFFFF"
         padding="16px 28px"
-        marginTop={isScrollDown ? "0" : { base: `${menuMobileMargin}px` , lg: "40px" }}
+        marginTop={simpleTemplate || userTemplate ? "0" : isScrollDown ? "0" : { base: `${menuMobileMargin}px` , lg: "40px" }}
         zIndex="99"
         transition="0.5s"
         as="nav"
       >
         <HStack
-          justifyContent={{ base: "center", lg: "flex-start" }}
+          justifyContent={simpleTemplate || userTemplate ? "flex-start" : { base: "center", lg: "flex-start" }}
           width="100%"
           height="40px"
           maxWidth="1264px"
           margin="0 auto"
           spacing={6}
         >
-          <Box display={{ base: "flex", lg: "none" }}>
+          <Box display={simpleTemplate || userTemplate ? "none" : { base: "flex", lg: "none" }}>
             <FarBarsIcon
               alt="menu de navegação"
               position="absolute"
@@ -503,20 +950,20 @@ export default function Menu({}) {
             />
           </Link>
 
-          <Avatar
-            bg="#2B8C4D"
-            color="#FFF"
-            position="fixed"
-            right="24px"
-            height="40px"
-            width="40px"
-            display={{ base: "flex", lg: "none" }}
-            src={userData?.picture}
-            name={userData?.username}
-          />
-          <DesktopLinks links={links} position={isScrollDown} path={route}/>
+          {simpleTemplate ?
+            <></>  
+            :
+            <DesktopLinks links={links} position={isScrollDown} path={route} userTemplate={userTemplate}/>
+          }
+
+          {userTemplate && isMobileMod() && <SearchInputUser />}
+
+          {useCheckMobile() && userData &&
+            <MenuUser userData={userData} onOpen={menuUserMobile.onOpen} onClose={menuUserMobile.onClose}/>
+          }
+          <MenuDrawerUser isOpen={menuUserMobile.isOpen} onClose={menuUserMobile.onClose}/>
         </HStack>
       </Box>
     </>
-  );
+  )
 }
diff --git a/next/components/organisms/PostDatasetForm.js b/next/components/organisms/PostDatasetForm.js
index 35d8d4fb..8aa842f8 100644
--- a/next/components/organisms/PostDatasetForm.js
+++ b/next/components/organisms/PostDatasetForm.js
@@ -282,7 +282,7 @@ export default function PostDatasetForm({
 
       <Modal isCentered isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent margin="24px">
           <ModalHeader>Deletar dataset</ModalHeader>
           <ModalBody>
             Você tem certeza em deletar esse dataset? Uma vez deletado, todas as informações dele e de Table e Columns serão excluídas em consequência.
diff --git a/next/components/templates/main.js b/next/components/templates/main.js
index 430a56ca..d43099dd 100644
--- a/next/components/templates/main.js
+++ b/next/components/templates/main.js
@@ -10,6 +10,8 @@ export function MainPageTemplate({
   pages,
   children,
   backgroundColor = "#FFFFFF",
+  cleanTemplate = false,
+  userTemplate = false,
   ...style
 }) {
 
@@ -18,11 +20,11 @@ export function MainPageTemplate({
     <UserContext.Provider>
       <Box backgroundColor={backgroundColor}>
         <SiteHead />
-        <Menu pages={pages} />
+        <Menu pages={pages} simpleTemplate={cleanTemplate} userTemplate={userTemplate}/>
         <Box paddingTop={{ base: "30px", lg: "120px" }} paddingBottom="50px" {...style}>
           {children}
         </Box>
-        <Footer pages={pages} />
+        <Footer pages={pages} ocult={cleanTemplate || userTemplate}/>
       </Box>
     </UserContext.Provider>
   );
diff --git a/next/content/FAQ.js b/next/content/FAQ.js
index 9af14ea5..25eeb031 100644
--- a/next/content/FAQ.js
+++ b/next/content/FAQ.js
@@ -347,7 +347,7 @@ export const QuestionFAQ = [
           </p>
           
           <ol>
-            <li>Acesse o <a href="https://console.cloud.google.com/projectselector2/home/dashboard" target="_blank">Google Cloud</a>. Caso for a sua primeira vez, aceite os Termos de Serviços.</li>
+            <li>Acesse o <a href="https://console.cloud.google.com/projectselector2/home/dashboard" target="_blank">Google Cloud</a>. Caso for a sua primeira vez, aceite os Termos de Serviço.</li>
             <li>Clique em <i>Create Project/Criar Projeto</i>. Escolha um nome bacana para o projeto.</li>
             <li>Clique em <i>Create/Criar</i>.</li>
           </ol>
diff --git a/next/middlewares/authUser.js b/next/middlewares/authUser.js
index 2c15a5e9..25082aeb 100644
--- a/next/middlewares/authUser.js
+++ b/next/middlewares/authUser.js
@@ -22,8 +22,8 @@ async function isJWTInvalid(token) {
 export default async function authUser(context, destiny) {
   const { req, res } = context
 
-  // const invalidToken = await isJWTInvalid(req.cookies.token)
-  const invalidToken = true
+  const invalidToken = await isJWTInvalid(req.cookies.token)
+  // const invalidToken = true
 
   if (invalidToken) {
     cookies.remove('user', { path: '/' })
diff --git a/next/pages/404.js b/next/pages/404.js
index 7ab14cee..15765a65 100644
--- a/next/pages/404.js
+++ b/next/pages/404.js
@@ -1,10 +1,11 @@
 import FourOrFourTemplate from "../components/templates/404";
+import { isMobileMod } from "../hooks/useCheckMobile.hook"
 import { MainPageTemplate } from "../components/templates/main";
 
 export default function FourOFour() {
   return (
     <MainPageTemplate>
-      <FourOrFourTemplate/>
+      <FourOrFourTemplate alignItems={isMobileMod() ? "flex-end" : "center"} marginTop={isMobileMod() && "120px"}/>
     </MainPageTemplate>
   )
 }
\ No newline at end of file
diff --git a/next/pages/500.js b/next/pages/500.js
index a88a8def..58a025c6 100644
--- a/next/pages/500.js
+++ b/next/pages/500.js
@@ -1,10 +1,11 @@
 import FiveHundredTemplate from "../components/templates/500";
+import { isMobileMod } from "../hooks/useCheckMobile.hook"
 import { MainPageTemplate } from "../components/templates/main";
 
 export default function InternalServerError() {
   return (
     <MainPageTemplate>
-      <FiveHundredTemplate/>
+      <FiveHundredTemplate alignItems={isMobileMod() ? "flex-end" : "center"} marginTop={isMobileMod() && "120px"}/>
     </MainPageTemplate>
   )
 }
\ No newline at end of file
diff --git a/next/pages/api/user/registerAccount.js b/next/pages/api/user/registerAccount.js
index 7ad2cc5e..0e78d73b 100644
--- a/next/pages/api/user/registerAccount.js
+++ b/next/pages/api/user/registerAccount.js
@@ -5,6 +5,7 @@ const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
 export default async function registerAccount({
   firstName,
   lastName = "",
+  username,
   email,
   password,
 }) {
@@ -20,7 +21,7 @@ export default async function registerAccount({
         mutation {
           CreateUpdateAccount (input:
             {
-              username : "${email}"
+              username : "${username}"
               email: "${email}"
               firstName: "${firstName}"
               lastName: "${lastName}"
diff --git a/next/pages/precos.js b/next/pages/precos.js
index 56fe7d22..9857319c 100644
--- a/next/pages/precos.js
+++ b/next/pages/precos.js
@@ -27,348 +27,352 @@ import CheckIcon from "../public/img/icons/checkIcon";
 import CrossIcon from "../public/img/icons/crossIcon";
 import InfoIcon from '../public/img/icons/infoIcon';
 
-export default function Price() {
-  const CardPrice = ({
-    colorBanner,
-    title,
-    badge,
-    subTitle,
-    personConfig,
-    textResource,
-    resources = [],
-    button,
-    hasServiceTerms= false
-  }) => {
-    const { isOpen, onOpen, onClose } = useDisclosure()
-    const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person)
-    const [priceValue, setPriceValue] = useState(personConfig.price)
-    const [linkStripe, setLinkStripe] = useState("")
+export const CardPrice = ({
+  colorBanner,
+  title,
+  badge,
+  subTitle,
+  personConfig,
+  textResource,
+  resources = [],
+  button,
+  hasServiceTerms= false
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person)
+  const [priceValue, setPriceValue] = useState(personConfig.price)
+  const [linkStripe, setLinkStripe] = useState("")
 
-    const addRemovePersonPrice = (action) => {
-      if(action === "add") {
-        const personAdd = nubmerOfPerson + 1
-        setNubmerOfPerson(personAdd)
-        setPriceValue(150 + 50 * personAdd)
-      }
-      if(action === "remove") {
-        const personRemove = nubmerOfPerson - 1
-        setNubmerOfPerson(personRemove)
-        setPriceValue(150 + 50 * personRemove)
-      }
+  const addRemovePersonPrice = (action) => {
+    if(action === "add") {
+      const personAdd = nubmerOfPerson + 1
+      setNubmerOfPerson(personAdd)
+      setPriceValue(150 + 50 * personAdd)
+    }
+    if(action === "remove") {
+      const personRemove = nubmerOfPerson - 1
+      setNubmerOfPerson(personRemove)
+      setPriceValue(150 + 50 * personRemove)
     }
+  }
 
-    return (
-      <Box
-        display="flex"
-        flexDirection="column"
-        position="relative"
-        width={isMobileMod() ? "100%" : "440px"}
-        borderRadius="16px"
-        boxShadow="0 2px 16px 0 rgba(100, 96, 103, 0.16)"
-        padding="40px 24px"
-        textAlign="center"
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      position="relative"
+      width={isMobileMod() ? "100%" : "272px"}
+      boxSizing={isMobileMod() ? "inherit" : "content-box"}
+      borderRadius="16px"
+      boxShadow="0 2px 16px 0 rgba(100, 96, 103, 0.16)"
+      padding="40px 24px"
+      textAlign="center"
+    >
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior="inside"
       >
-        <Modal
-          isOpen={isOpen}
-          onClose={onClose}
-          scrollBehavior="inside"
-        >
-          <ModalOverlay />
-          <ModalContent maxWidth="800px !important">
-            <ModalHeader>Termos de serviço</ModalHeader>
-            <ModalBody>
-              <ServiceTermsBDPro/>
-            </ModalBody>
+        <ModalOverlay />
+        <ModalContent maxWidth="800px !important" margin="24px">
+          <ModalHeader>Termos de serviço</ModalHeader>
+          <ModalBody>
+            <ServiceTermsBDPro/>
+          </ModalBody>
 
-            <ModalFooter gap="16px">
-                <RoundedButton
-                  onClick={onClose}
-                  backgroundColor={linkStripe !== "" ? "#FFF" : "#42B0FF"}
-                  color={linkStripe !== "" ? "#42B0FF" : "#FFF"}
-                  border={linkStripe !== "" && "1px solid #42B0FF"}
+          <ModalFooter gap="16px">
+              <RoundedButton
+                onClick={onClose}
+                backgroundColor={linkStripe !== "" ? "#FFF" : "#42B0FF"}
+                color={linkStripe !== "" ? "#42B0FF" : "#FFF"}
+                border={linkStripe !== "" && "1px solid #42B0FF"}
+              >
+                Fechar
+              </RoundedButton>
+              {linkStripe !== "" &&
+                <RoundedButton onClick={() => {
+                    onClose()
+                    window.open(linkStripe, "_blank")
+                    setLinkStripe("")
+                  }}
                 >
-                  Fechar
+                  Concordar
                 </RoundedButton>
-                {linkStripe !== "" &&
-                  <RoundedButton onClick={() => {
-                      onClose()
-                      window.open(linkStripe, "_blank")
-                      setLinkStripe("")
-                    }}
-                  >
-                    Concordar
-                  </RoundedButton>
-                }
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
+              }
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
 
+      <Box
+        height="fit-content"
+      >
         <Box
-          height="fit-content"
+          position="absolute"
+          borderRadius="16px 16px 0 0"
+          height="8px"
+          width="100%"
+          top="0"
+          left="0"
+          backgroundColor={colorBanner}
+        />
+        <Box
+          display="flex"
+          flexDirection="row"
+          gap="8px"
+          justifyContent="center"
+          alignItems="center"
+          marginBottom="8px"
         >
-          <Box
-            position="absolute"
-            borderRadius="16px 16px 0 0"
-            height="8px"
-            width="100%"
-            top="0"
-            left="0"
-            backgroundColor={colorBanner}
-          />
-          <Box
-            display="flex"
-            flexDirection="row"
-            gap="8px"
-            justifyContent="center"
-            alignItems="center"
-            marginBottom="8px"
-          >
-            <BigTitle>{title}</BigTitle>
-            {badge &&
-              <Badge
-                padding="4px 5px"
-                textTransform="none"
-                borderRadius="6px"
-                backgroundColor="#DEDFE0"
-                color="#252A32"
-                fontSize="10px"
-                fontFamily="ubuntu"
-                fontWeight="300"
-                letterSpacing="0.2px"
-              >{badge}</Badge>}
-          </Box>
+          <BigTitle>{title}</BigTitle>
+          {badge &&
+            <Badge
+              padding="4px 5px"
+              textTransform="none"
+              borderRadius="6px"
+              backgroundColor="#DEDFE0"
+              color="#252A32"
+              fontSize="10px"
+              fontFamily="ubuntu"
+              fontWeight="300"
+              letterSpacing="0.2px"
+            >{badge}</Badge>}
+        </Box>
 
-          <Box marginBottom="24px">{subTitle}</Box>
+        <Box marginBottom="24px">{subTitle}</Box>
 
-          <Box
-            justifyContent="center"
-            display="flex"
-            flexDirection="row"
-            height="50px"
-            alignItems="center"
-            // marginBottom="24px"
-            marginBottom="40px"
-          >
-            <Text
-              color="#252A32"
-              fontSize="50px"
-              fontWeight="500"
-              fontHeight="54px"
-              letterSpacing="-0.8px"
-              fontFamily="Ubuntu"
-            >R$ {priceValue}</Text>
+        <Box
+          justifyContent="center"
+          display="flex"
+          flexDirection="row"
+          height="50px"
+          alignItems="center"
+          // marginBottom="24px"
+          marginBottom="40px"
+        >
+          <Text
+            color="#252A32"
+            fontSize="50px"
+            fontWeight="500"
+            fontHeight="54px"
+            letterSpacing="-0.8px"
+            fontFamily="Ubuntu"
+          >R$ {priceValue}</Text>
+          <Text
+            position="relative"
+            top="16px"
+            right="-4px"
+            color="#252A32"
+            fontSize="18px"
+            fontWeight="700"
+            fontHeight="22px"
+            letterSpacing="0.3px"
+            fontFamily="Ubuntu"
+          >/mês</Text>
+        </Box>
+        {/* <BodyText
+          fontSize="16px"
+          lineHeight="16px"
+          letterSpacing="0.2px"
+          fontWeight="400"
+          marginBottom="24px"
+        >inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"}</BodyText> */}
+
+        <Box
+          display={isMobileMod() && !personConfig.text ? "none" :"flex"}
+          flexDirection="row"
+          justifyContent="space-between"
+          // height="40px"
+          // marginBottom="40px"
+        >
+          {personConfig.text &&
+          <>
             <Text
-              position="relative"
-              top="16px"
-              right="-4px"
               color="#252A32"
-              fontSize="18px"
-              fontWeight="700"
-              fontHeight="22px"
+              fontFamily="ubuntu"
+              fontSize="14px"
+              fontStyle="normal"
+              fontWeight="400"
+              lineHeight="20px"
               letterSpacing="0.3px"
-              fontFamily="Ubuntu"
-            >/mês</Text>
-          </Box>
-          {/* <BodyText
-            fontSize="16px"
-            lineHeight="16px"
-            letterSpacing="0.2px"
-            fontWeight="400"
-            marginBottom="24px"
-          >inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"}</BodyText> */}
+              textAlign="initial"
+            >
+              {personConfig.text}
+            </Text>
 
-          <Box
-            display={isMobileMod() && !personConfig.text ? "none" :"flex"}
-            flexDirection="row"
-            justifyContent="space-between"
-            // height="40px"
-            // marginBottom="40px"
-          >
-            {personConfig.text &&
-            <>
+            <Box
+              display="flex"
+              flexDirection="row"
+              border="1px solid #DEDFE0"
+              overflow="hidden"
+              borderRadius="12px"
+              height="40px"
+            >
+              <Button
+                width="40px"
+                height="100%"
+                backgroundColor="#FFF"
+                borderRadius="0"
+                borderRight="1px solid #DEDFE0"
+                _hover={{backgroundColor: "#FFF", opacity: "0.6", color: "#42B0FF"}}
+                fontFamily="Ubuntu"
+                onClick={() => addRemovePersonPrice("remove")}
+                isDisabled={nubmerOfPerson === 2}
+                >–</Button>
               <Text
+                width="50px"
+                height="100%"
                 color="#252A32"
-                fontFamily="ubuntu"
-                fontSize="14px"
+                fontFamily="Lato"
+                fontSize="16px"
                 fontStyle="normal"
                 fontWeight="400"
-                lineHeight="20px"
-                letterSpacing="0.3px"
-                textAlign="initial"
-              >
-                {personConfig.text}
-              </Text>
+                lineHeight="24px"
+                letterSpacing="0.5px"
+                padding="7px 20px 9px"
+              >{nubmerOfPerson - personConfig.person}</Text>
+              <Button
+                width="40px"
+                height="100%"
+                backgroundColor="#FFF"
+                borderRadius="0"
+                borderLeft="1px solid #DEDFE0"
+                _hover={{backgroundColor: "#FFF", opacity: "0.6", fill:"#42B0FF"}}
+                fontFamily="Ubuntu"
+                onClick={() => addRemovePersonPrice("add")}
+                isDisabled={nubmerOfPerson === 5}
+                ><CrossIcon height="14px" width="14px" transform="rotate(45deg)"/></Button>
+            </Box>
+          </>
+          }
+        </Box>
+      </Box>
+
+      <Box
+        flex={1}
+        textAlign="start"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+      >
+        <Box>
+          <Text
+            color="#6F6F6F"
+            fontSize="14px"
+            fontWeight="400"
+            fontHeight="27px"
+            letterSpacing="0.3px"
+            fontFamily="Ubuntu"
+            marginBottom="16px"
+          >
+            {textResource}
+          </Text>
 
+          {resources.map((elm, i) => {
+            return (
               <Box
+                key={i}
                 display="flex"
+                marginBottom="8px"
                 flexDirection="row"
-                border="1px solid #DEDFE0"
-                overflow="hidden"
-                borderRadius="12px"
-                height="40px"
+                alignItems="center"
+                gap="8px"
+                _last={{marginBottom:"24px"}}
               >
-                <Button
-                  width="40px"
-                  height="100%"
-                  backgroundColor="#FFF"
-                  borderRadius="0"
-                  borderRight="1px solid #DEDFE0"
-                  _hover={{backgroundColor: "#FFF", opacity: "0.6", color: "#42B0FF"}}
-                  fontFamily="Ubuntu"
-                  onClick={() => addRemovePersonPrice("remove")}
-                  isDisabled={nubmerOfPerson === 2}
-                  >–</Button>
-                <Text
-                  width="50px"
-                  height="100%"
-                  color="#252A32"
-                  fontFamily="Lato"
+                <CheckIcon 
+                  width="24px"
+                  height="24px"
+                  fill="#42B0FF"
+                />
+                <BodyText
                   fontSize="16px"
-                  fontStyle="normal"
+                  lineHeight="22px"
+                  letterSpacing="0.2px"
                   fontWeight="400"
-                  lineHeight="24px"
-                  letterSpacing="0.5px"
-                  padding="7px 20px 9px"
-                >{nubmerOfPerson - personConfig.person}</Text>
-                <Button
-                  width="40px"
-                  height="100%"
-                  backgroundColor="#FFF"
-                  borderRadius="0"
-                  borderLeft="1px solid #DEDFE0"
-                  _hover={{backgroundColor: "#FFF", opacity: "0.6", fill:"#42B0FF"}}
-                  fontFamily="Ubuntu"
-                  onClick={() => addRemovePersonPrice("add")}
-                  isDisabled={nubmerOfPerson === 5}
-                  ><CrossIcon height="14px" width="14px" transform="rotate(45deg)"/></Button>
+                >
+                  {elm.name}
+                </BodyText>
+                {elm.tooltip &&
+                  <Tooltip
+                    hasArrow
+                    placement="top"
+                    bg="#2A2F38"
+                    label={elm.tooltip}
+                    fontSize="14px"
+                    fontWeight="400"
+                    padding="5px 16px 6px"
+                    letterSpacing="0.5px"
+                    lineHeight="24px"
+                    color="#FFF"
+                    borderRadius="6px"
+                  >
+                    <InfoIcon width="14px" height="14px" alt="tip" cursor="pointer" fill="#A3A3A3"/>
+                  </Tooltip>
+                }
               </Box>
-            </>
-            }
-          </Box>
+            )
+          })}
         </Box>
 
         <Box
-          flex={1}
-          textAlign="start"
           display="flex"
           flexDirection="column"
-          justifyContent="space-between"
+          gap="16px"
         >
-          <Box>
-            <Text
-              color="#6F6F6F"
-              fontSize="14px"
-              fontWeight="400"
-              fontHeight="27px"
-              letterSpacing="0.3px"
-              fontFamily="Ubuntu"
-              marginBottom="16px"
-            >
-              {textResource}
-            </Text>
-
-            {resources.map((elm, i) => {
-              return (
-                <Box
-                  key={i}
-                  display="flex"
-                  marginBottom="8px"
-                  flexDirection="row"
-                  alignItems="center"
-                  gap="8px"
-                  _last={{marginBottom:"24px"}}
-                >
-                  <CheckIcon 
-                    width="24px"
-                    height="24px"
-                    fill="#42B0FF"
-                  />
-                  <BodyText
-                    fontSize="16px"
-                    lineHeight="16px"
-                    letterSpacing="0.2px"
-                    fontWeight="400"
-                  >
-                    {elm.name}
-                  </BodyText>
-                  {elm.tooltip &&
-                    <Tooltip
-                      hasArrow
-                      placement="top"
-                      bg="#2A2F38"
-                      label={elm.tooltip}
-                      fontSize="14px"
-                      fontWeight="400"
-                      padding="5px 16px 6px"
-                      letterSpacing="0.5px"
-                      lineHeight="24px"
-                      color="#FFF"
-                      borderRadius="6px"
-                    >
-                      <InfoIcon width="14px" height="14px" alt="tip" cursor="pointer" fill="#A3A3A3"/>
-                    </Tooltip>
-                  }
-                </Box>
-              )
-            })}
-          </Box>
+          <RoundedButton
+            width="100%"
+            color={button.colorText || "#FFF"}
+            backgroundColor={button.color || "#42B0FF"}
+            onClick={() => {
+              if(button?.noHasModal) return window.open(button.href, "_self")
+              onOpen()
+              setLinkStripe(button.href)
+            }}
+            border={button.color && `1px solid ${button.colorText}`}
+          >
+            {button.text}
+          </RoundedButton>
 
-          <Box
+          <Text
             display="flex"
-            flexDirection="column"
-            gap="16px"
+            flexDirection="row"
+            justifyContent="center"
+            color="#252A32"
+            fontSize="14px"
+            fontWeight="400"
+            fontHeight="27px"
+            letterSpacing="0.3px"
+            fontFamily="Ubuntu"
+            height="20px"
+            textAlign="center"
           >
-            <RoundedButton
-              width="100%"
-              color={button.colorText || "#FFF"}
-              backgroundColor={button.color || "#42B0FF"}
-              onClick={() => {
-                onOpen()
-                setLinkStripe(button.href)
-              }}
-              border={button.color && `1px solid ${button.colorText}`}
-            >
-              {button.text}
-            </RoundedButton>
-
-            <Text
-              display="flex"
-              flexDirection="row"
-              justifyContent="center"
-              color="#252A32"
-              fontSize="14px"
-              fontWeight="400"
-              fontHeight="27px"
-              letterSpacing="0.3px"
-              fontFamily="Ubuntu"
-              height="20px"
-              textAlign="center"
-            >
-              {hasServiceTerms &&
-                <Text 
-                  display="flex"
-                  flexDirection="row"
-                >Leia os
-                  <Text
-                    color="#42B0FF"
-                    cursor="pointer"
-                    _hover={{opacity: 0.7}}
-                    marginLeft="6px"
-                    onClick={() => {
-                      onOpen()
-                      setLinkStripe("")
-                    }}
-                  >termos de serviço</Text>
-                  .
-                </Text>
-              }
-            </Text>
-          </Box>
+            {hasServiceTerms &&
+              <Text 
+                display="flex"
+                flexDirection="row"
+              >Leia os
+                <Text
+                  color="#42B0FF"
+                  cursor="pointer"
+                  _hover={{opacity: 0.7}}
+                  marginLeft="6px"
+                  fontWeight="700"
+                  letterSpacing="0.5px"
+                  onClick={() => {
+                    onOpen()
+                    setLinkStripe("")
+                  }}
+                >Termos de Serviço</Text>
+                .
+              </Text>
+            }
+          </Text>
         </Box>
       </Box>
-    )
-  }
-  
+    </Box>
+  )
+}
+
+export default function Price() {
   return (
     <MainPageTemplate paddingX="24px">
       <Head>
@@ -406,18 +410,18 @@ export default function Price() {
 
         <Stack
           display={isMobileMod() ? "flex" : "grid"}
-          gridTemplateColumns="repeat(3, 440px)"
+          gridTemplateColumns="repeat(3, 320px)"
           gridTemplateRows="1fr"
           justifyContent="center"
           justifyItems="center"
           marginBottom="80px !important"
-          gap="80px"
+          gap="20px"
           spacing={0}
         >
           <CardPrice
             colorBanner="#2B8C4D"
             title="BD Grátis"
-            subTitle={<BodyText>Para você descobrir o potencial da <br/>plataforma de dados</BodyText>}
+            subTitle={<BodyText>Para você descobrir o potencial da plataforma de dados</BodyText>}
             personConfig={{
               price: "0"
             }}
@@ -435,6 +439,7 @@ export default function Price() {
               text: "Explorar recursos",
               href: "/dataset",
               target: "_self",
+              noHasModal: true,
               color: "#FFF",
               colorText: "#42B0FF"
             }}
@@ -461,7 +466,7 @@ export default function Price() {
 
           <CardPrice
             colorBanner="#252A32"
-            title="BD Pro Empresas"
+            title="BD Empresas"
             badge="Beta"
             subTitle={<BodyText>Para sua empresa ganhar tempo<br/> e qualidade em decisões</BodyText>}
             personConfig={{
@@ -472,7 +477,7 @@ export default function Price() {
               {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"}
             ]}
             button={{
-              text: "Assine já",
+              text: "Iniciar teste grátis",
               href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt"
             }}
             hasServiceTerms
diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js
index d64841fe..d7e13544 100755
--- a/next/pages/quem-somos.js
+++ b/next/pages/quem-somos.js
@@ -94,6 +94,7 @@ const HistoryBox = ({ children, title, date, image }) => {
           marginBottom={isMobileMod() && "0"}
           background="transparent"
           maxWidth="1000px"
+          margin="24px"
         >
           <Image
             alt={title}
diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js
new file mode 100644
index 00000000..643de836
--- /dev/null
+++ b/next/pages/user/[username].js
@@ -0,0 +1,1527 @@
+import {
+  Stack,
+  Box,
+  Text,
+  Divider,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  Input,
+  Image,
+  Tooltip,
+  HStack,
+  Checkbox,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  UnorderedList,
+  ListItem,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Badge,
+  Grid,
+  GridItem
+} from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { MainPageTemplate } from "../../components/templates/main";
+import { isMobileMod } from "../../hooks/useCheckMobile.hook";
+import BigTitle from "../../components/atoms/BigTitle";
+import SectionTitle from "../../components/atoms/SectionTitle";
+import RoundedButton from "../../components/atoms/RoundedButton";
+import ButtonSimple from "../../components/atoms/SimpleButton";
+import InputForm from "../../components/atoms/SimpleInput"
+import Link from "../../components/atoms/Link";
+import BodyText from "../../components/atoms/BodyText";
+import { CardPrice } from "../precos"
+
+import Exclamation from "../../public/img/icons/exclamationIcon";
+import PenIcon from "../../public/img/icons/penIcon";
+import GithubIcon from "../../public/img/icons/githubIcon";
+import TwitterIcon from "../../public/img/icons/twitterIcon";
+import LinkedinIcon from "../../public/img/icons/linkedinIcon";
+import { EmailConfirmImage, EmailRecoveryImage } from "../../public/img/emailImage";
+import ChevronIcon from "../../public/img/icons/chevronIcon";
+import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon";
+import CheckIcon from "../../public/img/icons/checkIcon";
+import CrossIcon from "../../public/img/icons/crossIcon";
+import InfoIcon from "../../public/img/icons/infoIcon";
+
+const LabelTextForm = ({ text, ...props }) => {
+  return (
+    <FormLabel
+      color="#252A32"
+      fontFamily="ubuntu"
+      letterSpacing="0.2px"
+      fontSize="16px"
+      fontWeight="400"
+      lineHeight="16px"
+      {...props}
+    >{text}</FormLabel>
+  )
+}
+
+const TitleTextForm = ({ children, ...props }) => {
+  return (
+    <Text
+      color="#252A32"
+      fontFamily="ubuntu"
+      letterSpacing="0.2px"
+      fontSize="16px"
+      fontWeight="400"
+      lineHeight="16px"
+      marginBottom="8px"
+      {...props}
+    >{children}</Text>
+  )
+}
+
+const ExtraInfoTextForm = ({children, ...props}) => {
+  return (
+    <Text
+      color="#7D7D7D"
+      fontFamily="ubuntu"
+      letterSpacing="0.3px"
+      fontSize="12px"
+      fontWeight="400"
+      lineHeight="16px"
+      {...props}
+    >{children}</Text>
+  )
+}
+
+const ModalGeneral = ({
+  children,
+  isOpen,
+  onClose,
+  isCentered = true,
+  propsModalContent
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered={isCentered} margin="24px !important">
+      <ModalOverlay/>
+      <ModalContent
+        margin="24px"
+        minWidth={isMobileMod() ? "" : "536px"}
+        boxSizing="content-box"
+        padding="32px"
+        borderRadius="20px"
+        {...propsModalContent}
+      >
+        <ModalHeader padding="0">
+          {children[0]}
+        </ModalHeader>
+
+        <ModalBody padding="0">
+          {children[1]}
+        </ModalBody>
+
+        <ModalFooter padding="0" width={isMobileMod() ? "100%" : "auto"}>
+          {children[2]}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const ProfileConfiguration = () => {
+  const [formData, setFormData] = useState({ firstName: "" , lastName: "", picture: "" })
+  const [errors, setErrors] = useState({ firstName: "" , lastName: "" })
+
+  const handleInputChange = (e) => {
+    setFormData((prevState) => ({
+      ...prevState,
+      [e.target.name]: e.target.value,
+    }))
+  }
+
+  return (
+    <Stack
+      flexDirection={isMobileMod() ? "column-reverse" : "row"}
+      justifyContent="space-between"
+      spacing={0}
+      gap={isMobileMod() ? "40px" : "80px"}
+    >
+      <Stack spacing="24px" flex={1}>
+        <FormControl isInvalid={!!errors.firstName}>
+          <LabelTextForm text="Nome"/>
+          <Input
+            id="firstName"
+            name="firstName"
+            value={formData.firstName}
+            onChange={handleInputChange}
+            placeholder="Insira seu nome"
+            fontFamily="ubuntu"
+            height="40px"
+            fontSize="14px"
+            borderRadius="16px"
+            _placeholder={{color: "#A3A3A3"}}
+            _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          />
+          <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+            <Exclamation marginTop="3px" fill="#D93B3B"/>{errors.firstName}
+          </FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.email}>
+          <LabelTextForm text="Sobrenome"/>
+          <Input
+            id="lastName"
+            name="lastName"
+            value={formData.lastName}
+            onChange={handleInputChange}
+            placeholder="Insira seu sobrenome"
+            fontFamily="ubuntu"
+            height="40px"
+            fontSize="14px"
+            borderRadius="16px"
+            _placeholder={{color: "#A3A3A3"}}
+            _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          />
+          <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+            <Exclamation marginTop="3px" fill="#D93B3B"/>{errors.lastName}
+          </FormErrorMessage>
+        </FormControl>
+
+        <FormControl>
+          <LabelTextForm text="E-mail"/>
+          <Checkbox
+            color="#7D7D7D"
+            fontFamily="Ubuntu"
+            fontSize="14px"
+            fontWeight="400"
+            lineHeight="20px"
+            letterSpacing="0.3px"
+          >
+            Tornar o e-mail de acesso à sua conta visível para o público.
+          </Checkbox>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.website}>
+          <LabelTextForm text="URL"/>
+          <Input
+            id="website"
+            name="website"
+            value={formData.website}
+            onChange={handleInputChange}
+            placeholder="Insira seu endereço URL"
+            fontFamily="ubuntu"
+            height="40px"
+            fontSize="14px"
+            borderRadius="16px"
+            _placeholder={{color: "#A3A3A3"}}
+            _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          />
+          <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+            <Exclamation marginTop="3px" fill="#D93B3B"/>{errors.website}
+          </FormErrorMessage>
+        </FormControl>
+        
+        <Stack>
+          <LabelTextForm text="Redes sociais"/>
+
+          <HStack spacing="8px" margin="0 0 8px 0 !important">
+            <GithubIcon width="24px" height="24px" fill="#D0D0D0"/>
+            <Input
+              id="github"
+              name="github"
+              value={formData.github}
+              onChange={handleInputChange}
+              placeholder="Link para o perfil no GitHub"
+              fontFamily="ubuntu"
+              height="40px"
+              fontSize="14px"
+              borderRadius="16px"
+              _placeholder={{color: "#A3A3A3"}}
+            />
+          </HStack>
+
+          <HStack spacing="8px" margin="0 0 8px 0 !important">
+            <TwitterIcon width="24px" height="24px" fill="#D0D0D0"/>
+            <Input
+              id="twitter"
+              name="twitter"
+              value={formData.twitter}
+              onChange={handleInputChange}
+              placeholder="Link para o perfil no Twitter"
+              fontFamily="ubuntu"
+              height="40px"
+              fontSize="14px"
+              borderRadius="16px"
+              _placeholder={{color: "#A3A3A3"}}
+            />
+          </HStack>
+
+          <HStack spacing="8px"  margin="0 !important">
+            <LinkedinIcon width="24px" height="24px" fill="#D0D0D0"/>
+            <Input
+              id="linkedin"
+              name="linkedin"
+              value={formData.linkedin}
+              onChange={handleInputChange}
+              placeholder="Link para o perfil no LinkedIn"
+              fontFamily="ubuntu"
+              height="40px"
+              fontSize="14px"
+              borderRadius="16px"
+              _placeholder={{color: "#A3A3A3"}}
+            />
+          </HStack>
+        </Stack>
+
+        <Text
+          fontFamily="ubuntu"
+          fontSize="12px"
+          fontWeight="400"
+          lineHeight="16px"
+          letterSpacing="0.3px"
+          color="#7D7D7D"
+        >
+          Ao preencher os campos desta página, você nos dá consentimento para compartilhar essas informações onde quer que o seu perfil de usuário apareça.
+        </Text>
+
+        <RoundedButton
+          borderRadius="30px"
+          width={isMobileMod() ? "100%" : "fit-content"}
+          // _hover={{transform: "none", opacity: 0.8}}
+          _hover={{transform: "none"}}
+          backgroundColor="#C4C4C4"
+          cursor="default"
+        >
+          Atualizar perfil
+        </RoundedButton>
+      </Stack>
+
+      <Stack
+        width={isMobileMod() ? "100%" : "fit-content"}
+        alignItems="center"
+      >
+        <SectionTitle
+          textAlign={isMobileMod() ? "start" :"center"}
+          width="100%"
+          fontSize="18px"
+          letterSpacing="0.1px"
+        >Foto de perfil</SectionTitle>
+
+        <Box
+          position="relative"
+          width="200px"
+          height="200px"
+        > 
+          <Box
+            borderRadius="50%"
+            overflow="hidden"
+          >
+            <Image width="100%" height="100%" src={formData?.picture ? formData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}/>
+          </Box>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            position="absolute"
+            // cursor="pointer"
+            cursor="default"
+            bottom="10px"
+            left="10px"
+            width="32px"
+            height="32px"
+            borderRadius="50%"
+            backgroundColor="#C4C4C4"
+            // backgroundColor="#2B8C4D"
+          >
+            <Tooltip
+              hasArrow
+              bg="#2A2F38"
+              label="Editar"
+              fontSize="14px"
+              fontWeight="400"
+              letterSpacing="0.5px"
+              lineHeight="24px"
+              padding="5px 16px 6px"
+              marginTop="10px"
+              color="#FFF"
+              borderRadius="6px"
+              minWidth="96px"
+              textAlign="center"
+            >
+              <PenIcon
+                width="22px"
+                height="22px"
+                fill="#FFF"
+              />
+            </Tooltip>
+          </Box>
+        </Box>
+      </Stack>
+    </Stack>
+  )
+}
+
+const Account = () => {
+  const emailModal = useDisclosure()
+  const eraseModalAccount = useDisclosure()
+  const [emailSent, setEmailSent] = useState(false)
+  const [showPassword, setShowPassword] = useState(true)
+  const [formData, setFormData] = useState({ email: "", password: "" })
+  const [errors, setErrors] = useState({ email: "", password: ""})
+
+  const handleInputChange = (e) => {
+    setFormData((prevState) => ({
+      ...prevState,
+      [e.target.name]: e.target.value,
+    }))
+  }
+
+  return (
+    <Stack spacing="24px">
+      <ModalGeneral
+        isOpen={emailModal.isOpen}
+        onClose={emailModal.onClose}
+      >
+        {emailSent ?
+          <Stack spacing={0} marginBottom="16px">
+            <Stack spacing={0} flexDirection="row" onClick={() => setEmailSent(false)}>
+              <ChevronIcon
+                position="relative"
+                fill="#42B0FF"
+                width="14px"
+                height="14px"
+                transform="rotate(180deg)"
+                top="2px"
+              />
+              <Text
+                cursor="pointer"
+                color="#42B0FF"
+                fontFamily="Ubuntu"
+                fontSize="16px"
+                fontWeight="400"
+                lineHeight="16px"
+                letterSpacing="0.2px"
+                marginLeft="8px !important"
+              >Voltar</Text>
+            </Stack>
+              
+            <ModalCloseButton
+              fontSize="14px"
+              top="24px"
+              right="26px"
+              _hover={{backgroundColor: "transparent", color:"#42B0FF"}}
+              onClick={() => {
+                setEmailSent(false)
+                emailModal.onClose()
+              }}
+            />
+          </Stack>
+          :
+          <Stack spacing={0} marginBottom="16px">
+            <SectionTitle
+              lineHeight="40px"
+            >Alterar e-mail</SectionTitle>
+            <ModalCloseButton
+              fontSize="14px"
+              top="34px"
+              right="26px"
+              _hover={{backgroundColor: "transparent", color:"#42B0FF"}}
+            />
+          </Stack>
+        }
+
+        {emailSent ?
+          <Stack spacing="24px" textAlign="center">
+            <EmailConfirmImage justifyContent="center"/>
+
+            <SectionTitle
+              lineHeight="40px"
+            >Confirme seu endereço de e-mail</SectionTitle>
+            <ExtraInfoTextForm
+              fontSize="16px"
+              letterSpacing="0.2px"
+            >Enviamos uma confirmação de e-mail para</ExtraInfoTextForm>
+            <TitleTextForm>dadinho@basedosdados.org</TitleTextForm>
+            <ExtraInfoTextForm
+              fontSize="16px"
+              letterSpacing="0.2px"
+              lineHeight="24px"
+            >Confira sua caixa de entrada e siga as <br/>
+instruções enviadas no e-mail para completar a alteração.</ExtraInfoTextForm>
+          </Stack>
+          :
+          <Stack spacing="24px">
+            <ExtraInfoTextForm fontSize="16px" lineHeight="24px" letterSpacing="0.2px">
+              Insira o seu novo endereço de e-mail. Enviaremos as instruções para você completar a alteração.
+            </ExtraInfoTextForm>
+
+            <FormControl isInvalid={!!errors.email}>
+              <LabelTextForm text="Novo e-mail"/>
+              <InputForm
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                placeholder="Insira seu e-mail"
+                fontFamily="ubuntu"
+                height="40px"
+                fontSize="14px"
+                borderRadius="16px"
+                _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+              />
+              <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+                <Exclamation marginTop="3px" fill="#D93B3B"/>{errors.email}
+              </FormErrorMessage>
+            </FormControl>
+
+            <FormControl isInvalid={!!errors.password} marginBottom="24px !important">
+              <Box
+                display="flex"
+                flexDirection="row"
+                width="100%"
+                marginBottom="8px"
+              >
+                <LabelTextForm text="Senha" margin="0 !important"/>
+                <ButtonSimple
+                  fontWeight="700"
+                  color="#42B0FF"
+                  letterSpacing="0.3px"
+                  fontSize="14px"
+                  justifyContent="end"
+                  _hover={{opacity: "0.6"}}
+                  onClick={() => window.open("./password-recovery", "_self")}
+                >Esqueceu a senha?
+                </ButtonSimple>
+              </Box>
+
+              <InputForm
+                type={showPassword ? "password" : "text"}
+                id="password"
+                name="password"
+                value={formData.password}
+                onChange={handleInputChange}
+                placeholder="Insira sua senha"
+                fontFamily="ubuntu"
+                height="40px"
+                fontSize="14px"
+                borderRadius="16px"
+                _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+                styleElmRight={{
+                  width: "50px",
+                  height: "40px",
+                  cursor: "pointer",
+                  onClick: () => setShowPassword(!showPassword)
+                }}
+                elmRight={showPassword ?
+                  <EyeOffIcon
+                    alt="esconder senha"
+                    width="20px"
+                    height="20px"
+                    fill="#D0D0D0"
+                  />
+                :
+                  <EyeIcon
+                    alt="exibir senhar"
+                    width="20px"
+                    height="20px"
+                    fill="#D0D0D0"
+                  />
+                }
+              />
+              <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+                <Exclamation marginTop="3px" fill="#D93B3B"/>{errors.password}
+              </FormErrorMessage>
+            </FormControl>
+          </Stack>
+        }
+
+        {emailSent ?
+          <></>
+          :
+          <RoundedButton
+            borderRadius="30px"
+            _hover={{transform: "none", opacity: 0.8}}
+            onClick={() => setEmailSent(true)}
+          >
+            Enviar e-mail
+          </RoundedButton>
+        }
+      </ModalGeneral>
+
+      <ModalGeneral
+        isOpen={eraseModalAccount.isOpen}
+        onClose={eraseModalAccount.onClose}
+      >
+        <Stack spacing={0} marginBottom="16px">
+          <SectionTitle
+            lineHeight="40px"
+          >Tem certeza que deseja deletar sua conta?</SectionTitle>
+          <ModalCloseButton
+            fontSize="14px"
+            top="34px"
+            right="26px"
+            _hover={{backgroundColor: "transparent", color:"#FF8484"}}
+          />
+        </Stack>
+
+        <Stack spacing="24px" marginBottom="16px">
+          <ExtraInfoTextForm fontSize="16px" lineHeight="24px" letterSpacing="0.2px">
+          Após deletar sua conta, todos os dados serão permanentemente removidos e não poderão ser recuperados. 
+          </ExtraInfoTextForm>
+        </Stack>
+
+        <Stack
+          flexDirection={isMobileMod() ? "column" : "row"}
+          spacing={0}
+          gap="24px"
+          width={isMobileMod() ? "100%" : "fit-content"}
+        >
+          <RoundedButton
+            borderRadius="30px"
+            backgroundColor="#FFF"
+            border="1px solid #FF8484"
+            color="#FF8484"
+            width={isMobileMod() ? "100%" : "fit-content"}
+            _hover={{transform: "none", opacity: 0.8}}
+            onClick={() => eraseModalAccount.onClose()}
+          >
+            Cancelar
+          </RoundedButton>
+
+          <RoundedButton
+            borderRadius="30px"
+            // backgroundColor="#FF8484"
+            cursor="default"
+            backgroundColor="#C4C4C4"
+            width={isMobileMod() ? "100%" : "fit-content"}
+            // _hover={{transform: "none", opacity: 0.8}}
+            _hover={{transform: "none"}}
+          >
+            Deletar
+          </RoundedButton>
+        </Stack>
+      </ModalGeneral>
+
+      <Box>
+        <TitleTextForm>E-mail</TitleTextForm>
+        <Text
+          color="#6F6F6F"
+          fontFamily="Ubuntu"
+          fontSize="14px"
+          fontWeight="400"
+          lineHeight="27px"
+          letterSpacing="0.3px"
+        >meuemail@gmail.com</Text>
+        <Link
+          color="#42B0FF"
+          fontFamily="ubuntu"
+          fontWeight="500"
+          fontSize="16px"
+          lineHeight="30px"
+          letterSpacing="0.2px"
+          onClick={() => emailModal.onOpen()}
+        >Alterar e-mail</Link>
+      </Box>
+
+      {/* <Box>
+        <TitleTextForm>Nome de usuário</TitleTextForm>
+        <Text
+          color="#6F6F6F"
+          fontFamily="Ubuntu"
+          fontSize="14px"
+          fontWeight="400"
+          lineHeight="27px"
+          letterSpacing="0.3px"
+        >dadinho</Text>
+        <Link
+          color="#42B0FF"
+          fontFamily="ubuntu"
+          fontWeight="500"
+          fontSize="16px"
+          lineHeight="30px"
+          letterSpacing="0.2px"
+          onClick={() => emailModal.onOpen()}
+        >Alterar nome de usuário</Link>
+      </Box> */}
+
+      <Box>
+        <TitleTextForm>Exportar dados da conta</TitleTextForm>
+        <ExtraInfoTextForm>Saiba como seus dados são armazenados em nossos Termos de Uso e Políticas de Privacidade.{!isMobileMod() && <br/>} Para exportar os dados da sua conta, entre em contato conosco.</ExtraInfoTextForm>
+        <Link
+          color="#42B0FF"
+          fontFamily="ubuntu"
+          fontWeight="500"
+          fontSize="16px"
+          lineHeight="30px"
+          letterSpacing="0.2px"
+          href="/contato"
+          target="_self"
+        >Entre em contato</Link>
+      </Box>
+
+      <Box>
+        <TitleTextForm color="#D93B3B">Deletar conta</TitleTextForm>
+        <ExtraInfoTextForm marginBottom="8px">Após a exclusão, não será possível recuperar o acesso à sua conta.</ExtraInfoTextForm>
+        <RoundedButton
+          width={isMobileMod() ? "100%" :"fit-content"}
+          backgroundColor="#FF8484"
+          onClick={() => eraseModalAccount.onOpen()}
+        >Deletar minha conta</RoundedButton>
+      </Box>
+    </Stack>
+  )
+}
+
+const NewPassword = () => {
+  const newPasswordModal = useDisclosure()
+  const [formData, setFormData] = useState({
+    password: "",
+    newPassword: "",
+    confirmPassword: ""
+  })
+  const [errors, setErrors] = useState({
+    password: "",
+    newPassword: "",
+    regexPassword: {},
+    confirmPassword: ""
+  })
+  const [showPassword, setShowPassword] = useState(true)
+  const [showNewPassword, setShowNewPassword] = useState(true)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(true)
+
+  const handleInputChange = (e) => {
+    setFormData((prevState) => ({
+      ...prevState,
+      [e.target.name]: e.target.value,
+    }))
+  }
+
+  return (
+    <Stack spacing="24px" maxWidth="480px">
+      <ModalGeneral
+        isOpen={newPasswordModal.isOpen}
+        onClose={newPasswordModal.onClose}
+      >
+        <Stack spacing={0} marginBottom="16px">
+          <ModalCloseButton
+            fontSize="14px"
+            top="34px"
+            right="26px"
+            _hover={{backgroundColor: "transparent", color:"#42B0FF"}}
+          />
+        </Stack>
+        <Stack spacing="24px" alignItems="center" textAlign="center" marginBottom="24px">
+          <EmailRecoveryImage/>
+          <SectionTitle
+            lineHeight="40px"
+          >Sua senha foi alterada com sucesso</SectionTitle>
+          <ExtraInfoTextForm
+              fontSize="16px"
+              letterSpacing="0.2px"
+              lineHeight="24px"
+            >Agora você pode utilizar a nova senha para acessar sua<br/> conta na Base dos Dados.</ExtraInfoTextForm>
+        </Stack>
+
+        <Stack
+          flexDirection={isMobileMod() ? "column" : "row"}
+          spacing={0}
+          justifyContent="center"
+          gap="24px"
+          width="100%"
+        >
+          <RoundedButton
+            borderRadius="30px"
+            backgroundColor="#FFF"
+            border="1px solid #42B0FF"
+            color="#42B0FF"
+            width={isMobileMod() ? "100%" : "fit-content"}
+            _hover={{transform: "none", opacity: 0.8}}
+            onClick={() => newPasswordModal.onClose()}
+          >
+            Continuar nas configurações
+          </RoundedButton>
+
+          <RoundedButton
+            borderRadius="30px"
+            width={isMobileMod() ? "100%" : "fit-content"}
+            _hover={{transform: "none", opacity: 0.8}}
+            onClick={() => window.open("/", "_self")}
+          >
+            Ir para a página inicial
+          </RoundedButton>
+        </Stack>
+      </ModalGeneral>
+
+      <FormControl isInvalid={!!errors.password}>
+        <Box
+          display="flex"
+          flexDirection="row"
+          width="100%"
+          marginBottom="8px"
+        >
+          <LabelTextForm width="100%" text="Senha atual" margin="0 !important"/>
+          <ButtonSimple
+            display={isMobileMod() ? "none" : "flex"}
+            fontWeight="700"
+            color="#42B0FF"
+            letterSpacing="0.3px"
+            fontSize="14px"
+            justifyContent="end"
+            _hover={{opacity: "0.6"}}
+            onClick={() => window.open("./password-recovery", "_self")}
+          >Esqueceu a senha?
+          </ButtonSimple>
+        </Box>
+        <InputForm
+          type={showPassword ? "password" : "text"}
+          id="password"
+          name="password"
+          value={formData.password}
+          onChange={handleInputChange}
+          placeholder="Insira a senha atual"
+          fontFamily="ubuntu"
+          height="40px"
+          fontSize="14px"
+          borderRadius="16px"
+          _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          styleElmRight={{
+            width: "50px",
+            height: "40px",
+            cursor: "pointer",
+            onClick: () => setShowPassword(!showPassword)
+          }}
+          elmRight={showPassword ?
+            <EyeOffIcon
+              alt="esconder senha"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          :
+            <EyeIcon
+              alt="exibir senhar"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          }
+        />
+        <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+          <Exclamation marginTop="4px" fill="#D93B3B"/>{errors.password}
+        </FormErrorMessage>
+        <ButtonSimple
+          display={isMobileMod() ? "flex" : "none"}
+          fontWeight="400"
+          color="#42B0FF"
+          letterSpacing="0.3px"
+          fontSize="12px"
+          _hover={{opacity: "0.6"}}
+          marginTop="8px"
+          onClick={() => window.open("./password-recovery", "_self")}
+        >Esqueceu a senha?
+        </ButtonSimple>
+      </FormControl>
+
+      <FormControl isInvalid={!!errors.newPassword}>
+        <LabelTextForm text="Nova Senha" />
+        <InputForm
+          type={showNewPassword ? "password" : "text"}
+          id="newPassword"
+          name="newPassword"
+          value={formData.newPassword}
+          onChange={handleInputChange}
+          placeholder="Crie uma nova senha"
+          fontFamily="ubuntu"
+          height="40px"
+          fontSize="14px"
+          borderRadius="16px"
+          _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          styleElmRight={{
+            width: "50px",
+            height: "40px",
+            cursor: "pointer",
+            onClick: () => setShowNewPassword(!showNewPassword)
+          }}
+          elmRight={showNewPassword ?
+            <EyeOffIcon
+              alt="esconder senha"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          :
+            <EyeIcon
+              alt="exibir senhar"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          }
+        />
+        <Text 
+          margin="8px 0"
+          color= {Object.keys(errors.regexPassword).length > 0 ? "#D93B3B" : "#7D7D7D"}
+          fontFamily= "Ubuntu"
+          fontSize= "12px"
+          fontWeight= "400"
+          lineHeight= "16px"
+          letterSpacing= "0.3px"
+          display="flex"
+          flexDirection="row"
+          gap="4px"
+          alignItems="flex-start"
+        ><Exclamation width="14px" height="14px" fill="#D93B3B" display={Object.keys(errors.regexPassword).length > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo:</Text>
+        <UnorderedList fontSize="12px" fontFamily="Ubuntu" position="relative" left="2px">
+          <ListItem fontSize="12px" color={errors?.regexPassword?.amount ? "#D93B3B" :"#7D7D7D"}>8 caracteres</ListItem>
+          <ListItem fontSize="12px" color={errors?.regexPassword?.upperCase ? "#D93B3B" :"#7D7D7D"}>Uma letra maiúscula</ListItem>
+          <ListItem fontSize="12px" color={errors?.regexPassword?.lowerCase ? "#D93B3B" :"#7D7D7D"}>Uma letra minúscula</ListItem>
+          <ListItem fontSize="12px" color={errors?.regexPassword?.number ? "#D93B3B" :"#7D7D7D"}>Um dígito</ListItem>
+          <ListItem fontSize="12px" color={errors?.regexPassword?.special ? "#D93B3B" :"#7D7D7D"}>Um caractere especial</ListItem>
+        </UnorderedList>
+      </FormControl>
+
+      <FormControl isInvalid={!!errors.confirmPassword}>
+        <LabelTextForm text="Confirme a nova senha" />
+        <InputForm
+          type={showConfirmPassword ? "password" : "text"}
+          id="confirmPassword"
+          name="confirmPassword"
+          value={formData.confirmPassword}
+          onChange={handleInputChange}
+          placeholder="Insira a senha novamente"
+          fontFamily="ubuntu"
+          height="40px"
+          fontSize="14px"
+          borderRadius="16px"
+          _invalid={{boxShadow:"0 0 0 2px #D93B3B"}}
+          styleElmRight={{
+            width: "50px",
+            height: "40px",
+            cursor: "pointer",
+            onClick: () => setShowConfirmPassword(!showConfirmPassword)
+          }}
+          elmRight={showConfirmPassword ?
+            <EyeOffIcon
+              alt="esconder senha"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          :
+            <EyeIcon
+              alt="exibir senhar"
+              width="20px"
+              height="20px"
+              fill="#D0D0D0"
+            />
+          }
+        />
+        <FormErrorMessage fontSize="12px" color="#D93B3B" display="flex" flexDirection="row" gap="4px" alignItems="flex-start">
+          <Exclamation marginTop="4px" fill="#D93B3B"/>{errors.confirmPassword}
+        </FormErrorMessage>
+      </FormControl>
+
+      <RoundedButton
+        borderRadius="30px"
+        _hover={{transform: "none", opacity: 0.8}}
+        width="fit-content"
+        onClick={() => newPasswordModal.onOpen()}
+      >
+        Atualizar senha
+      </RoundedButton>
+    </Stack>
+  )
+}
+
+const PlansAndPayment = () => {
+  const PlansModal = useDisclosure()
+
+  const resources={
+    "bdGratis" : [
+    {name: "Tabelas tratadas"},
+    {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."},
+    {name: "Acesso em nuvem"},
+    {name: "Acesso via SQL, Python, R e Stata"},
+    {name: "Integração com ferramentas BI"},
+    {name: "Download até 200.000 linhas"},
+    {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."}],
+    "bdPro" : [
+      {name: "Dezenas de bases de alta frequência atualizadas"}
+    ],
+    "bdEmpresas" : [
+      {name: "Acesso para 10 contas"},
+      {name: "Suporte prioritário via email e Discord"}
+    ]
+  }
+
+  const TabContent = ({children, ...props}) => {
+    return (
+      <Tab
+        fontFamily="ubuntu"
+        fontSize="16px"
+        fontWeight="400"
+        letterSpacing="0.2px"
+        lineHeight="24px"
+        color="#252A32"
+        padding="0 8px 11px"
+        _hover={{
+          borderBottom: "3px solid #D0D0D0"
+        }}
+        _selected={{
+          color: "#2B8C4D",
+          fontWeight: "700",
+          borderBottom: "3px solid #2B8C4D",
+          pointerEvents: "none"
+        }}
+        {...props}
+      >
+        {children}
+      </Tab>
+    )
+  }
+
+  return (
+    <Stack>
+      <ModalGeneral
+        isOpen={PlansModal.isOpen}
+        onClose={PlansModal.onClose}
+        propsModalContent={{maxWidth: "fit-content"}}
+        isCentered={isMobileMod() ? false : true}
+      >
+        <Stack spacing={0} marginBottom="16px">
+          <SectionTitle lineHeight="40px">
+            Compare os planos
+          </SectionTitle>
+          <ModalCloseButton
+            fontSize="14px"
+            top="34px"
+            right="26px"
+            _hover={{backgroundColor: "transparent", color:"#42B0FF"}}
+          />
+        </Stack>
+        <Stack
+          display={isMobileMod() ? "flex" : "grid"}
+          gridTemplateColumns="repeat(3, 320px)"
+          gridTemplateRows="1fr"
+          justifyContent="center"
+          justifyItems="center"
+          gap="20px"
+          spacing={0}
+        >
+          <CardPrice
+            colorBanner="#2B8C4D"
+            title="BD Grátis"
+            subTitle={<BodyText>Para você descobrir o potencial da plataforma de dados</BodyText>}
+            personConfig={{
+              price: "0"
+            }}
+            textResource="Recursos:"
+            resources={[
+              {name: "Tabelas tratadas"},
+              {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."},
+              {name: "Acesso em nuvem"},
+              {name: "Acesso via SQL, Python, R e Stata"},
+              {name: "Integração com ferramentas BI"},
+              {name: "Download até 200.000 linhas"},
+              {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."}
+            ]}
+            button={{
+              text: "Explorar recursos",
+              href: "/dataset",
+              target: "_self",
+              noHasModal: true,
+              color: "#FFF",
+              colorText: "#42B0FF"
+            }}
+          />
+
+          <CardPrice
+            colorBanner="#9C8400"
+            title="BD Pro"
+            badge="Beta"
+            subTitle={<BodyText>Para você ter acesso aos<br/> dados mais atualizados</BodyText>}
+            personConfig={{
+              price: "47"
+            }}
+            textResource="Todos os recursos da BD Grátis, mais:"
+            resources={[
+              {name: "Dezenas de bases de alta frequência atualizadas"},
+            ]}
+            button={{
+              text: "Iniciar teste grátis",
+              href: "https://buy.stripe.com/8wM01TeVQ3kg0mIeV4?locale=pt"
+            }}
+            hasServiceTerms
+          />
+
+          <CardPrice
+            colorBanner="#252A32"
+            title="BD Empresas"
+            badge="Beta"
+            subTitle={<BodyText>Para sua empresa ganhar tempo<br/> e qualidade em decisões</BodyText>}
+            personConfig={{
+              price: "350"
+            }}
+            textResource="Todos os recursos da BD Pro, mais:"
+            resources={[
+              {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"}
+            ]}
+            button={{
+              text: "Iniciar teste grátis",
+              href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt"
+            }}
+            hasServiceTerms
+          />
+        </Stack>
+      </ModalGeneral>
+
+      <Tabs isLazy>
+        <TabList
+          borderBottom= "2px solid #DEDFE0 !important"
+        >
+          <TabContent>Planos</TabContent>
+          <TabContent
+            color="#A3A3A3"
+            pointerEvents="none"
+          >Pagamento</TabContent>
+        </TabList>
+        <TabPanels>
+          <TabPanel padding="32px 0 0">
+            <Stack spacing="40px">
+              <Stack
+                spacing={0}
+                flexDirection={isMobileMod() ? "column" : "row"}
+                width="100%"
+                justifyContent="space-between"
+              >
+                <Stack spacing="8px" marginBottom={isMobileMod() ? "16px" : "0"}>
+                  <Badge
+                    width="fit-content"
+                    padding="4px 5px"
+                    textTransform="none"
+                    borderRadius="6px"
+                    backgroundColor="#DEDFE0"
+                    color="#252A32"
+                    fontSize="10px"
+                    fontFamily="ubuntu"
+                    fontWeight="300"
+                    letterSpacing="0.2px"
+                  >Plano atual</Badge>
+                  <Text
+                    color="#252A32"
+                    fontFamily="Ubuntu"
+                    fontSize="28px"
+                    fontWeight="500"
+                    lineHeight="36px"
+                  >BD Grátis</Text>
+                </Stack>
+                <Stack
+                  spacing={0}
+                  gap="24px"
+                  flexDirection={isMobileMod() ? "column" : "row"}
+                >
+                  <RoundedButton
+                    borderRadius="30px"
+                    backgroundColor="#FFF"
+                    border="1px solid #42B0FF"
+                    color="#42B0FF"
+                    width={isMobileMod() ? "100%" : "fit-content"}
+                    _hover={{transform: "none", opacity: 0.8}}
+                    onClick={() => PlansModal.onOpen()}
+                  >Compare os planos</RoundedButton>
+                  <RoundedButton
+                    borderRadius="30px"
+                    width={isMobileMod() ? "100%" : "fit-content"}
+                    // _hover={{transform: "none", opacity: 0.8}}
+                    cursor="default"
+                    backgroundColor="#C4C4C4"
+                    _hover={{transform: "none"}}
+                  >Faça o upgrade</RoundedButton>
+                </Stack>
+              </Stack>
+
+              <Stack
+                spacing={0}
+                gap="64px"
+                flexDirection={isMobileMod() ? "column" : "row"}
+              >
+                <Stack minWidth="350px" spacing="8px">
+                  <Text
+                    color="#7D7D7D"
+                    fontFamily="Ubuntu"
+                    fontSize="16px"
+                    fontWeight="400"
+                    lineHeight="16px"
+                    letterSpacing="0.2px"
+                    marginBottom="8px"
+                  >Inclui</Text>
+                  {resources.bdGratis.map((elm, index) => {
+                    return (
+                      <Box key={index} display="flex" alignItems="center">
+                        <CheckIcon fill="#2B8C4D" width="24px" height="24px" marginRight="8px"/>
+                        <Text
+                          color="#252A32"
+                          fontFamily="Ubuntu"
+                          fontSize="16px"
+                          fontWeight="400"
+                          lineHeight="16px"
+                          letterSpacing="0.2px"
+                        >{elm.name}</Text>
+                        {elm.tooltip &&
+                          <Tooltip
+                            hasArrow
+                            placement="top"
+                            bg="#2A2F38"
+                            label={elm.tooltip}
+                            fontSize="14px"
+                            fontWeight="400"
+                            padding="5px 16px 6px"
+                            letterSpacing="0.5px"
+                            lineHeight="24px"
+                            color="#FFF"
+                            borderRadius="6px"
+                          >
+                            <InfoIcon width="14px" height="14px" alt="tip" cursor="pointer" fill="#A3A3A3" marginLeft="16px"/>
+                          </Tooltip>
+                        }
+                      </Box>
+                    )
+                  })}
+                </Stack>
+
+                <Stack spacing="8px">
+                  <Text
+                    color="#7D7D7D"
+                    fontFamily="Ubuntu"
+                    fontSize="16px"
+                    fontWeight="400"
+                    lineHeight="16px"
+                    letterSpacing="0.2px"
+                    marginBottom="8px"
+                  >Não inclui</Text>
+                  {resources.bdPro.map((elm, index) => {
+                    return (
+                      <Box key={index} display="flex" alignItems="center">
+                        <CrossIcon fill="#FF8484" width="24px" height="24px" marginRight="8px"/>
+                        <Text
+                          color="#252A32"
+                          fontFamily="Ubuntu"
+                          fontSize="16px"
+                          fontWeight="400"
+                          lineHeight="24px"
+                          letterSpacing="0.2px"
+                        >{elm.name}</Text>
+                        {elm.tooltip &&
+                          <Tooltip
+                            hasArrow
+                            placement="top"
+                            bg="#2A2F38"
+                            label={elm.tooltip}
+                            fontSize="14px"
+                            fontWeight="400"
+                            padding="5px 16px 6px"
+                            letterSpacing="0.5px"
+                            lineHeight="24px"
+                            color="#FFF"
+                            borderRadius="6px"
+                          >
+                            <InfoIcon width="14px" height="14px" alt="tip" cursor="pointer" fill="#A3A3A3"/>
+                          </Tooltip>
+                        }
+                      </Box>
+                    )
+                  })}
+                  {resources.bdEmpresas.map((elm, index) => {
+                    return (
+                      <Box key={index} display="flex" alignItems="center">
+                        <CrossIcon fill="#FF8484" width="24px" height="24px" marginRight="8px"/>
+                        <Text
+                          color="#252A32"
+                          fontFamily="Ubuntu"
+                          fontSize="16px"
+                          fontWeight="400"
+                          lineHeight="24px"
+                          letterSpacing="0.2px"
+                        >{elm.name}</Text>
+                        {elm.tooltip &&
+                          <Tooltip
+                            hasArrow
+                            placement="top"
+                            bg="#2A2F38"
+                            label={elm.tooltip}
+                            fontSize="14px"
+                            fontWeight="400"
+                            padding="5px 16px 6px"
+                            letterSpacing="0.5px"
+                            lineHeight="24px"
+                            color="#FFF"
+                            borderRadius="6px"
+                          >
+                            <InfoIcon width="14px" height="14px" alt="tip" cursor="pointer" fill="#A3A3A3"/>
+                          </Tooltip>
+                        }
+                      </Box>
+                    )
+                  })}
+
+                  <ButtonSimple
+                    color="#42B0FF"
+                    fontSize="14px"
+                    fontWeight="700"
+                    letterSpacing="0.3px"
+                    _hover={{opacity: 0.7}}
+                    marginTop="16px !important"
+                    onClick={() => PlansModal.onOpen()}
+                  >
+                    Veja tudo e compare os planos
+                  </ButtonSimple>
+                </Stack>
+              </Stack>
+            </Stack>
+          </TabPanel>
+
+          <TabPanel>
+
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Stack>
+  )
+}
+
+const Accesses = () => {
+
+  return (
+    <Stack spacing="24px">
+      <Stack alignItems="end">
+        <Tooltip
+          hasArrow
+          top="-10px"
+          placement="top"
+          bg="#2A2F38"
+          label="Disponível apenas no plano BD Empresas"
+          fontSize="14px"
+          fontWeight="400"
+          fontFamily="Lato"
+          padding="5px 16px 6px"
+          letterSpacing="0.5px"
+          lineHeight="24px"
+          color="#FFF"
+          borderRadius="6px"
+        >
+          <Box width={isMobileMod() ? "100%" : "fit-content"}>
+            <RoundedButton
+              borderRadius="30px"
+              width={isMobileMod() ? "100%" : "fit-content"}
+              _hover={{transform: "none"}}
+              cursor="default"
+              backgroundColor="#C4C4C4"
+            >Adicionar usuário</RoundedButton>
+          </Box>
+        </Tooltip>
+      </Stack>
+
+      <Grid templateColumns={isMobileMod() ? "1fr 1fr" : "3fr 1fr"}>
+        <GridItem>
+          <Text
+            backgroundColor="#F6F6F6"
+            padding={isMobileMod() ? "8px 0 8px 16px" : "8px 24px"}
+            color="#6F6F6F"
+            fontFamily="Ubuntu"
+            fontSize="16px"
+            fontWeight="400"
+            lineHeight="16px"
+            letterSpacing="0.2px"
+          >Usuário</Text>
+        </GridItem>
+        <GridItem>
+          <Text
+            backgroundColor="#F6F6F6"
+            padding={isMobileMod() ? "8px 16px" : "8px 24px"}
+            color="#6F6F6F"
+            fontFamily="Ubuntu"
+            fontSize="16px"
+            fontWeight="400"
+            lineHeight="16px"
+            letterSpacing="0.2px"
+            width="100%"
+          >Acesso</Text>
+        </GridItem>
+
+        <GridItem
+          overflow="hidden"
+          padding={isMobileMod() ? "24px 0" : "24px"}
+          borderBottom="1px solid #DEDFE0"
+        >
+          <Stack
+            width="100%"
+            position="relative"
+            overflow="hidden"
+            flexDir="column"
+            spacing={0}
+            paddingLeft={isMobileMod() ? "16px" : "0"}
+            flexDirection="row"
+            alignItems={isMobileMod() ? "stretch" : "stretch"}
+            height="54px"
+          >
+            <Box
+              position="absolute"
+              width="36px"
+              minWidth="36px"
+              height="36px"
+              minHeight="36px"
+              borderRadius="50%"
+              overflow="hidden"
+              top="9px"
+            >
+              <Image width="100%" height="100%" src="https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"/>
+            </Box>
+            <Text
+              marginLeft={isMobileMod() ? "44px !important" : "60px !important"}
+              color="#252A32"
+              fontFamily="Ubuntu"
+              fontSize="14px"
+              fontWeight="400"
+              lineHeight="27px"
+              letterSpacing="0.3px"
+              height="27px"
+              isTruncated
+            >Dadinho</Text>
+            <Text
+              marginLeft={isMobileMod() ? "44px !important" : "60px !important"}
+              color="#6F6F6F"
+              fontFamily="Ubuntu"
+              fontSize="14px"
+              fontWeight="400"
+              lineHeight="27px"
+              letterSpacing="0.3px"
+              height="27px"
+              isTruncated
+            >dadinho@basedosdados.org</Text>
+          </Stack>
+        </GridItem>
+
+        <GridItem
+          display="flex"
+          alignItems="center"
+          width="100%"
+          padding={isMobileMod() ? "24px 16px" : "24px"}
+          borderBottom="1px solid #DEDFE0"
+        >
+          <Text
+            color="#6F6F6F"
+            fontFamily="Ubuntu"
+            fontSize="14px"
+            fontWeight="400"
+            lineHeight="27px"
+            letterSpacing="0.3px"
+          >
+            Administrador
+          </Text>
+        </GridItem>
+      </Grid>
+    </Stack>
+  )
+}
+
+export default function UserPage() {
+  const router = useRouter()
+  const { query } = router
+  const [sectionSelected, setSectionSelected] = useState(0)
+
+  const choices = [
+    {bar: "Perfil público", title: "Perfil público", value: "profile", index: 0},
+    {bar: "Conta", title: "Conta", value: "account", index: 1},
+    {bar: "Senha", title: "Alterar senha", value: "new_password", index: 2},
+    {bar: "Planos e pagamento", title: "Planos e pagamento", value: "plans_and_payment", index: 3},
+    {bar: "Acessos", title: "Gerenciar acessos", value: "accesses", index: 4},
+  ]
+
+  useEffect(() => {
+    const key = Object.keys(query)
+    const removeElem = key.indexOf("username")
+    if (removeElem !== -1) key.splice(removeElem, 1)
+
+    if (key.length === 0) return
+
+    for (const elements of choices) {
+      if (elements.value === key[0]) {
+        setSectionSelected(elements.index)
+      }
+    }
+  }, [query])
+
+  return (
+    <MainPageTemplate padding="70px 24px 50px !important" userTemplate>
+      <Stack
+        paddingTop="50px"
+        width="100%"
+        maxWidth="1264px"
+        flexDirection="column"
+        margin="auto"
+        spacing={0}
+        gap="40px"
+      >
+        <BigTitle display={isMobileMod() ? "none" : "flex"}>Configurações</BigTitle>
+
+        <Stack
+          flexDirection="row"
+          justifyContent="space-between"
+          spacing={0}
+          gap="80px"
+          width="100%"
+          marginBottom={isMobileMod() ? "0px" : "80px !important"}
+        >
+          <Stack
+            display={isMobileMod() ? "none" : "flex"}
+            width="fit-content"
+          >
+            {choices.map((section, index) => (
+              <Box
+                borderLeft={
+                  sectionSelected === index ? "3px solid #2B8C4D" : "transparent"
+                }
+                width="100%"
+              >
+                <Text
+                  fontFamily="Ubuntu"
+                  fontSize="16px"
+                  lineHeight="27px"
+                  letterSpacing="0.2px"
+                  cursor="pointer"
+                  fontWeight={sectionSelected === index ? "500" : "300"}
+                  color={sectionSelected === index ? "#2B8C4D" : "#7D7D7D"}
+                  _hover={sectionSelected === index ? "none" : {  opacity: "0.6" , fontWeight: "500" }}
+                  padding="0 24px"
+                  width="100%"
+                  onClick={() => router.push({pathname: "/user/dev", query: section.value})}
+                >
+                  {section.bar}
+                </Text>
+              </Box>
+            ))}
+          </Stack>
+
+          <Stack
+            flex={1}
+            maxWidth="800px"
+            spacing={0}
+          >
+            <SectionTitle marginBottom="8px">{choices[sectionSelected].title}</SectionTitle>
+            <Divider marginBottom={isMobileMod() ? "40px !important" : "32px !important"} borderColor="#DEDFE0"/>
+
+            {sectionSelected === 0 && <ProfileConfiguration/>}
+            {sectionSelected === 1 && <Account/>}
+            {sectionSelected === 2 && <NewPassword/>}
+            {sectionSelected === 3 && <PlansAndPayment/>}
+            {sectionSelected === 4 && <Accesses/>}
+          </Stack>
+        </Stack>
+      </Stack>
+    </MainPageTemplate>
+  )
+}
diff --git a/next/pages/user/login.js b/next/pages/user/login.js
index 822160e2..51768e95 100644
--- a/next/pages/user/login.js
+++ b/next/pages/user/login.js
@@ -52,7 +52,7 @@ export default function Login() {
   }
 
   const fetchToken = async ({ email, password }) => {
-    const result = await getToken({email: "email", password: "password"})
+    const result = await getToken({email: email, password: password})
 
     if(result?.tokenAuth === null || result?.errors?.length > 0) return setErrors({login:"E-mail ou senha incorretos."}) 
 
@@ -86,13 +86,18 @@ export default function Login() {
   }
 
   return (
-    <MainPageTemplate display="flex" justifyContent="center">
+    <MainPageTemplate
+      display="flex"
+      justifyContent="center"
+      paddingTop="72px"
+      cleanTemplate
+    >
       <Stack
         display="flex"
         justifyContent="center"
         width="320px"
         height="100%"
-        marginTop={isMobileMod() ? "150px" : "50px"}
+        marginTop="50px"
         marginX="27px"
         spacing={0}
       >
@@ -220,6 +225,7 @@ export default function Login() {
           Não tem uma conta?
           <ButtonSimple
             width="none"
+            fontSize="14px"
             justifyContent="start"
             color="#42B0FF"
             _hover={{opacity: "0.6"}}
diff --git a/next/pages/user/password-recovery.js b/next/pages/user/password-recovery.js
index ad373461..a863d6c2 100644
--- a/next/pages/user/password-recovery.js
+++ b/next/pages/user/password-recovery.js
@@ -19,13 +19,18 @@ export default function PasswordRecovery() {
   const [email, setEmail] = useState("")
 
   return (
-    <MainPageTemplate display="flex" justifyContent="center">
+    <MainPageTemplate
+      display="flex"
+      justifyContent="center"
+      paddingTop="72px"
+      cleanTemplate
+    >
       <Stack
         display="flex"
         justifyContent="center"
         width="510px"
         height="100%"
-        marginTop={isMobileMod() ? "150px" : "50px"}
+        marginTop="50px"
         marginX="27px"
         spacing="40px"
         alignItems="center"
@@ -64,7 +69,7 @@ export default function PasswordRecovery() {
           <Input
             type="email"
             placeholder="Insira seu e-mail"
-            _placeholder={{color:"#DEDFE0"}}
+            _placeholder={{color: "#A3A3A3"}}
             _focus={{border:"2px solid #42B0FF !important" }}
             _hover={{border:"2px solid #42B0FF !important" }}
             value={email}
diff --git a/next/pages/user/register.js b/next/pages/user/register.js
index 009b5c5d..32324e68 100644
--- a/next/pages/user/register.js
+++ b/next/pages/user/register.js
@@ -64,8 +64,11 @@ export default function Register() {
     if(!/^.{8,}$/.test(formData.password)) {
       regexPassword = {...regexPassword, amount: true}
     }
-    if(!/([a-z].*[A-Z])|([A-Z].*[a-z])/.test(formData.password)) {
-      regexPassword = {...regexPassword, uppercaseLowercase: true}
+    if(!/[A-Z]/.test(formData.password)) {
+      regexPassword = {...regexPassword, upperCase: true}
+    }
+    if(!/[a-z]/.test(formData.password)) {
+      regexPassword = {...regexPassword, lowerCase: true}
     }
     if(!/(?=.*?[0-9])/.test(formData.password)) {
       regexPassword = {...regexPassword, number: true}
@@ -122,13 +125,18 @@ export default function Register() {
   }
 
   return (
-    <MainPageTemplate display="flex" justifyContent="center">
+    <MainPageTemplate
+      display="flex"
+      justifyContent="center"
+      paddingTop="72px"
+      cleanTemplate
+    >
       <Stack
         display="flex"
         justifyContent="center"
         width="320px"
         height="100%"
-        marginTop={isMobileMod() ? "150px" : "50px"}
+        marginTop="50px"
         marginX="27px"
       >
         <Display
@@ -250,15 +258,16 @@ export default function Register() {
               alignItems="flex-start"
             ><Exclamation width="14px" height="14px" fill="#D93B3B" display={Object.keys(errors.regexPassword).length > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo:</Text>
             <UnorderedList fontSize="12px" fontFamily="Ubuntu" position="relative" left="2px">
-              <ListItem fontSize="12px" color={errors?.regexPassword?.amount ? "#D93B3B" :"#7D7D7D"}>Ter no mínimo 8 caracteres</ListItem>
-              <ListItem fontSize="12px" color={errors?.regexPassword?.uppercaseLowercase ? "#D93B3B" :"#7D7D7D"}>Pelo menos uma letra maiúscula e minúscula</ListItem>
+              <ListItem fontSize="12px" color={errors?.regexPassword?.amount ? "#D93B3B" :"#7D7D7D"}>8 caracteres</ListItem>
+              <ListItem fontSize="12px" color={errors?.regexPassword?.upperCase ? "#D93B3B" :"#7D7D7D"}>Uma letra maiúscula</ListItem>
+              <ListItem fontSize="12px" color={errors?.regexPassword?.lowerCase ? "#D93B3B" :"#7D7D7D"}>Uma letra minúscula</ListItem>
               <ListItem fontSize="12px" color={errors?.regexPassword?.number ? "#D93B3B" :"#7D7D7D"}>Um dígito</ListItem>
-              <ListItem fontSize="12px" color={errors?.regexPassword?.special ? "#D93B3B" :"#7D7D7D"}>E um caractere especial</ListItem>
+              <ListItem fontSize="12px" color={errors?.regexPassword?.special ? "#D93B3B" :"#7D7D7D"}>Um caractere especial</ListItem>
             </UnorderedList>
           </FormControl>
 
           <FormControl isInvalid={!!errors.confirmPassword}>
-            <LabelTextForm text="Senha novamente" />
+            <LabelTextForm text="Confirme a senha" />
             <Input
               type={showConfirmPassword ? "password" : "text"}
               id="confirmPassword"
diff --git a/next/public/img/icons/settingsIcon.js b/next/public/img/icons/settingsIcon.js
new file mode 100644
index 00000000..c5345385
--- /dev/null
+++ b/next/public/img/icons/settingsIcon.js
@@ -0,0 +1,14 @@
+import { createIcon } from '@chakra-ui/icons';
+
+const SettingsIcon = createIcon({
+  displayName: "settings",
+  viewBox: "0 0 22 22",
+  path: (
+    <path
+      fill="current-color"
+      d="M19.7472 12.5569L21.7218 13.6479C21.9473 13.7725 22.052 14.0302 21.9747 14.2682C21.4618 15.8491 20.5861 17.2773 19.4408 18.4636C19.3551 18.5524 19.2404 18.6107 19.1155 18.6288C18.9906 18.647 18.863 18.624 18.7536 18.5635L16.7805 17.4726C15.9503 18.1536 14.9959 18.6818 13.9653 19.0308V21.2123C13.9653 21.3333 13.9223 21.4507 13.8433 21.5451C13.7644 21.6396 13.6542 21.7055 13.5308 21.732C11.9112 22.0802 10.1717 22.0982 8.47032 21.7323C8.21595 21.6776 8.03464 21.462 8.03464 21.2124V19.0308C7.00401 18.6818 6.0496 18.1536 5.21945 17.4726L3.24638 18.5635C3.13697 18.624 3.00935 18.647 2.88447 18.6288C2.75959 18.6107 2.64487 18.5524 2.55916 18.4636C1.41388 17.2773 0.538129 15.8491 0.0252149 14.2682C-0.0520234 14.0302 0.0526444 13.7726 0.27815 13.6479L2.25275 12.5569C2.05442 11.5276 2.05442 10.4724 2.25275 9.44319L0.278197 8.35211C0.0526908 8.22752 -0.0519771 7.96986 0.0252612 7.73181C0.538175 6.15092 1.41388 4.7227 2.5592 3.53647C2.64492 3.44765 2.75963 3.38937 2.88451 3.3712C3.0094 3.35304 3.13702 3.37606 3.24643 3.4365L5.2195 4.5274C6.04966 3.84649 7.00407 3.31823 8.03469 2.96922V0.787723C8.03469 0.666735 8.07771 0.54935 8.15668 0.454884C8.23564 0.360418 8.34585 0.294499 8.46916 0.267974C10.0888 -0.0802103 11.8283 -0.0982183 13.5297 0.267664C13.7841 0.322353 13.9654 0.53805 13.9654 0.787634V2.96918C14.996 3.31817 15.9504 3.84643 16.7805 4.52736L18.7536 3.43645C18.863 3.37602 18.9907 3.35299 19.1155 3.37116C19.2404 3.38933 19.3551 3.44761 19.4408 3.53643C20.5861 4.72265 21.4619 6.15087 21.9748 7.73177C22.052 7.96977 21.9474 8.22743 21.7218 8.35207L19.7472 9.44315C19.9456 10.4724 19.9456 11.5276 19.7472 12.5569ZM14.7067 11C14.7067 9.04342 13.0439 7.45162 11 7.45162C8.95613 7.45162 7.2933 9.04342 7.2933 11C7.2933 12.9566 8.95613 14.5484 11 14.5484C13.0439 14.5484 14.7067 12.9566 14.7067 11Z"
+    />
+  )
+})
+
+export default SettingsIcon
diff --git a/next/public/img/icons/signOutIcon.js b/next/public/img/icons/signOutIcon.js
new file mode 100644
index 00000000..a7a5f601
--- /dev/null
+++ b/next/public/img/icons/signOutIcon.js
@@ -0,0 +1,14 @@
+import { createIcon } from '@chakra-ui/icons';
+
+const SignOutIcon = createIcon({
+  displayName: "signOut",
+  viewBox: "0 0 16 16",
+  path: (
+    <path
+      fill="current-color"
+      d="M14.0273 8.25754L9.96177 12.3231C9.59877 12.6861 8.96957 12.432 8.96957 11.9117V9.58854H5.67838C5.35653 9.58854 5.09759 9.3296 5.09759 9.00774V6.68454C5.09759 6.36268 5.35653 6.10374 5.67838 6.10374H8.96957V3.78053C8.96957 3.26265 9.59635 3.00613 9.96177 3.36913L14.0273 7.43474C14.2524 7.66222 14.2524 8.03006 14.0273 8.25754ZM6.64638 12.2021V11.2341C6.64638 11.0744 6.5157 10.9437 6.35598 10.9437H4.32319C3.89485 10.9437 3.54879 10.5977 3.54879 10.1693V5.52294C3.54879 5.0946 3.89485 4.74854 4.32319 4.74854H6.35598C6.5157 4.74854 6.64638 4.61786 6.64638 4.45814V3.49013C6.64638 3.33041 6.5157 3.19973 6.35598 3.19973H4.32319C3.0406 3.19973 2 4.24033 2 5.52294V10.1693C2 11.4519 3.0406 12.4925 4.32319 12.4925H6.35598C6.5157 12.4925 6.64638 12.3619 6.64638 12.2021Z"
+    />
+  )
+})
+
+export default SignOutIcon