diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..cfae37f6
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,15 @@
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        [
+            "styled-components",
+            {
+                "ssr": true,
+                "displayName": true,
+                "preprocess": false
+            }
+        ]
+    ]
+}
\ No newline at end of file
diff --git a/components/Header/index.jsx b/components/Header/index.jsx
new file mode 100644
index 00000000..e6772c3d
--- /dev/null
+++ b/components/Header/index.jsx
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { Avatar, AvatarContainer, AvatarImage, AvatarInfo, ButtonLogout, HeaderContainer, LogoContainer, LogoText, NavBar, ToggleMobileContainer, ToggleMobileMenu, UserInfo, UserName, UserNickName } from "./styles";
+import {FaSignOutAlt, FaBars, FaTimes} from 'react-icons/fa'
+import { useState } from "react";
+import MobileMenu from "../MobileMenu";
+import { signOut, useSession } from "next-auth/react";
+import Router from "next/router";
+export default function Header({ currentPage }){
+    const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false)
+    const {data:session, status} = useSession()
+    
+    if(!session || status === "unauthenticated"){
+        Router.push("/")
+        return
+    }
+
+    const {user} = session
+
+
+    function handleMobileMenu(){
+        setMobileMenuIsOpen( prevState => !prevState)
+    } 
+
+
+    return (
+        <HeaderContainer>
+            <MobileMenu isOpen={mobileMenuIsOpen} currentPage={currentPage}/>
+            <NavBar>
+                <LogoContainer>
+                    <Link legacyBehavior passHref href="/">
+                        <LogoText>
+                            DevKut
+                        </LogoText>
+                    </Link>
+                </LogoContainer>
+                <ToggleMobileContainer>
+                    <ToggleMobileMenu onClick={handleMobileMenu}>
+                        {mobileMenuIsOpen ? (
+                            <FaTimes/>
+                        ): (
+                            <FaBars/>
+                        )}
+                    </ToggleMobileMenu>
+                </ToggleMobileContainer>
+                <AvatarContainer>
+                    <Avatar>
+                        <Link href="/perfil" passHref legacyBehavior>
+                            <AvatarImage src={user.image}/>
+                        </Link>
+                    </Avatar>
+                    <UserInfo>
+                        <UserName>{user.name.split(" ").slice(0,2).join(" ")}</UserName>
+                        <UserNickName>{user.email}</UserNickName>
+                    </UserInfo>
+                    
+                    <ButtonLogout onClick={ () => signOut()}>
+                        <FaSignOutAlt/>
+                    </ButtonLogout>
+                    
+                </AvatarContainer>
+            </NavBar>
+        </HeaderContainer>
+    )
+}
\ No newline at end of file
diff --git a/components/Header/styles.js b/components/Header/styles.js
new file mode 100644
index 00000000..75109295
--- /dev/null
+++ b/components/Header/styles.js
@@ -0,0 +1,141 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.header`
+    width: 100%;
+    height: 100px;
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    background: ${ props => props.theme.secondary};
+`
+
+export const NavBar = styled.nav`
+    width: 80%;
+    height: 70px;
+    display:flex;
+    align-items:center;
+    justify-content: space-between;
+`
+
+export const LogoContainer= styled.div`
+    width: 100%;
+    max-width: 300px;
+    display:flex;
+    align-items:center;
+    justify-content: center;
+`
+
+export const LogoText = styled.span`
+    font-size: 2.4rem;
+    color: ${props => props.theme.primary};
+    font-weight: 500;
+    cursor: pointer;
+`
+export const ToggleMobileContainer = styled.div`
+    width: 100%;
+    display: none;
+
+    @media (max-width: 768px) {
+        & {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+`
+export const ToggleMobileMenu = styled.button`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    outline:none;
+    border:none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background:  ${props => props.theme.isDark ? props.theme.black : props.theme.lightGray};
+    color:  ${props => props.theme.isDark ? props.theme.lightGray : props.theme.lightBlack};
+`
+
+export const AvatarContainer = styled.nav`
+    width: 100%;
+    max-width: 400px;
+    height: 50px;
+    display:flex;
+    align-items:center;
+    justify-content: flex-end;
+    gap: 1rem;
+
+    @media (max-width: 768px) {
+        & {
+            display:none;
+        }
+    }
+`
+
+export const Avatar = styled.nav`
+    width: 100%;
+    max-width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    /* background: ${props => props.theme.primary}; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+`
+
+export const AvatarImage = styled.img`
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: contain;
+    cursor: pointer;
+    transition: all 200ms ease-in-out;
+
+    &:hover{
+        border: 0.15rem solid ${props => props.theme.primary};
+        opacity: 0.8;
+    }
+`
+
+
+export const UserInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+export const UserName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+    font-size: 1.2rem;
+    font-weight: 400;
+`
+export const UserNickName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.gray : props.theme.black};
+    font-size: 0.85rem;
+    font-weight: 200;
+`
+
+
+export const ButtonLogout = styled.button`
+    width: 100%;
+    max-width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    padding: 0.2rem;
+    margin-left: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    font-size: 1.2rem;
+    background:  ${props => props.theme.isDark ? props.theme.black : props.theme.secondary};
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+    cursor: pointer;
+
+    &:hover{
+        opacity: 0.8;
+    }
+
+`
+
+
diff --git a/components/Icon/index.jsx b/components/Icon/index.jsx
new file mode 100644
index 00000000..12a37d5b
--- /dev/null
+++ b/components/Icon/index.jsx
@@ -0,0 +1,14 @@
+export default function Icon({ index, isActive = false, menuItems }){
+    const configIcons = {
+        size: 22,
+        color:"#cbcad2",
+        fill: "#cbcad2"
+    }
+
+    const Icon = menuItems[index].icon
+
+    configIcons.color = isActive ? '#e22b8d' : configIcons.color
+    configIcons.fill  = isActive ? '#e22b8d' : configIcons.color
+
+    return <Icon  {...configIcons} ></Icon>
+}
\ No newline at end of file
diff --git a/components/ListUsers/index.jsx b/components/ListUsers/index.jsx
new file mode 100644
index 00000000..f81ba724
--- /dev/null
+++ b/components/ListUsers/index.jsx
@@ -0,0 +1,123 @@
+import Link from "next/link";
+import { Alert, Avatar, FollowButton, FollowUser, Followers, LisUsersContainer, ListUsersItem, Nickname, TextBold, Title, UserAvatar, UserDescription, UserInfo, Username } from "./styles";
+import { FaUsers } from "react-icons/fa"
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { ThemeContext } from "../../context/ThemeContext";
+import api from "../../services/api";
+import { useSession } from "next-auth/react";
+import Loading from "../Loading";
+import menuItems from "../../utils/menuItems";
+
+const iconColor = {
+    dark:  '#e7e7e7',
+    light: '#252525'
+}
+const PER_PAGE = 15
+export default function ListUsers(){
+    const {theme} = useContext(ThemeContext)
+    const [users, setUsers] = useState([])
+    const [currentPage, setCurrentPage] = useState(1)
+    const [isLoading, setIsLoading] = useState(true)
+    const [showFooterLoader, setFooterLoader] = useState(false)
+    const refLoader =  useRef()
+    const {data:session} = useSession()
+
+    async function getUserProfile(user){
+        return await api.get(`users/${user}`, {
+            headers: {
+                "Authorization": `Bearer ${session.accessToken}`,
+                "Accept": "application/vnd.github+json"
+            }
+        })
+    }
+
+
+    function getUsers(){
+        api.get(`user/followers?per_page=${PER_PAGE}&page=${currentPage}&order=DESC`, {
+            headers: {
+                "Authorization": `Bearer ${session.accessToken}`,
+                "Accept": "application/vnd.github+json"
+            }
+        }).then(async (res) => {
+            const { data } = res
+            if(data.length == 0){
+                setFooterLoader(false)
+                return
+            }
+
+            data.forEach( async (user) => {
+                const {data } = await getUserProfile(user.login)                
+                setUsers( prevUsers => [...prevUsers, data])
+                setIsLoading(false)
+                setFooterLoader(true)
+            })
+        })
+    }
+
+
+    useEffect(() => {
+       getUsers()
+    }, [currentPage])
+
+
+    useEffect(() => {
+        const intersectionObserver = new IntersectionObserver(entries => {
+          if (entries.some(entry => entry.isIntersecting)) {
+            if(users.length == 0) return
+            setCurrentPage((currentValue) => currentValue + 1);
+          }
+        })
+        if(refLoader.current){
+            intersectionObserver.observe(refLoader.current);
+        }
+        return () => intersectionObserver.disconnect();
+      }, [refLoader.current]);
+
+
+    if(isLoading){
+        return <Loading/>
+    }
+
+    return (
+        <LisUsersContainer>
+            <Title>Seguidores</Title>
+            {users.length === 0 && !isLoading && (
+                <Alert>
+                    <p>Nenhum resultado encontrado...</p>
+                </Alert>
+            )}
+            {users.map( (user, index) => (
+                <React.Fragment key={user.id}>
+                    <ListUsersItem >
+                        <UserInfo>
+                            <UserAvatar>
+                                <Avatar src={user.avatar_url}/>
+                            </UserAvatar>
+                            <UserDescription>
+                                <div>
+                                    <Link href={user.html_url} passHref legacyBehavior>
+                                        <Username target="_blank">{user.name || user.login}</Username>
+                                    </Link>
+                                    <Nickname>{user.login}</Nickname>
+                                </div>
+                                <div>
+                                    <FaUsers color={iconColor[theme]} size={18}/>
+                                    <Followers><TextBold>{user.followers}</TextBold> seguidores</Followers>
+                                    <Followers><TextBold>{user.following}</TextBold>  seguindo</Followers>
+                                </div>
+                            </UserDescription>
+                        </UserInfo>
+                        {/* <FollowUser>
+                            <FollowButton>Seguir</FollowButton>
+                        </FollowUser> */}
+                    </ListUsersItem>
+                </React.Fragment>
+            ))}           
+
+            {showFooterLoader && users.length > 0 && (
+                <Loading ref={refLoader}/>
+            )}
+            
+        </LisUsersContainer>
+    )
+}
\ No newline at end of file
diff --git a/components/ListUsers/styles.js b/components/ListUsers/styles.js
new file mode 100644
index 00000000..9c48b3d2
--- /dev/null
+++ b/components/ListUsers/styles.js
@@ -0,0 +1,139 @@
+import styled from "styled-components";
+
+export const LisUsersContainer = styled.div`
+    width: 100%;
+    height: auto;
+`
+
+export const ListUsersItem = styled.div`
+    width: 100%;
+    height: 100px;
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    border: 1px solid ${props => props.theme.secondary};
+    border-top-color: ${props => props.theme.isDark ? props.theme.black : props.theme.gray};
+
+    @media (max-width: 768px){
+        padding: 0.5rem;
+    }
+`
+
+export const UserInfo = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0.3rem;
+`
+
+export const UserAvatar = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content:center;
+`
+
+export const Avatar = styled.img`
+    object-fit: contain;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+`
+
+export const UserDescription = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    & > div {
+        display: flex;
+        align-items: center;
+    }
+`
+
+export const Username = styled.a`
+    font-size: 1.12rem;
+    font-weight: 400;
+    text-decoration: none;
+    color: ${props => props.theme.isDark ? props.theme.lightGray : props.theme.black};
+    margin-right: 0.6rem;
+    cursor: pointer;
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all 200ms ease-in-out;
+
+    &:hover{
+        color: ${props => props.theme.gray};
+    }
+
+    @media (max-width: 768px){
+        font-size: 1rem;
+    }
+`
+
+export const Nickname = styled.span`
+    font-size: 1rem;
+    color: ${props => props.theme.isDark ? props.theme.gray : props.theme.lightBlack};
+`
+
+export const Followers = styled.span`
+    font-size: 0.8rem;
+    color: ${props => props.theme.isDark ? props.theme.gray : props.theme.lightBlack};
+    margin: 0.2rem;
+`
+
+export const TextBold = styled.b`
+`
+
+export const FollowUser = styled.div`
+    width: 100%;
+    max-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media (max-width: 768px){
+        max-width: 300px;
+        margin-bottom: 1rem;
+        margin: 0 auto;
+    }
+`
+
+export const FollowButton = styled.button`
+    width: 100%;
+    height: 30px;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background:  ${props => props.theme.isDark ? props.theme.black : props.theme.lightGray};
+    color:  ${props => props.theme.isDark ? props.theme.lightGray : props.theme.black};
+    transition: all 200ms ease-in-out;
+
+    &:hover{
+        background:  ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.gray};
+    }
+
+
+`
+
+export const Alert = styled.div`
+    display: flex;
+    gap: 1rem;
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.2rem;
+    width: 100%;
+    border: 0.12rem solid ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.gray};
+
+    & > p {
+        color: ${props => props.theme.isDark ? props.theme.gray : props.theme.lightBlack};
+    }
+`
+
+export const Title = styled.h1`
+    font-size: 1.6rem;
+    color: ${ props => props.theme.isDark ? props.theme.white : props.theme.black};
+`
diff --git a/components/Loading/index.jsx b/components/Loading/index.jsx
new file mode 100644
index 00000000..0128d322
--- /dev/null
+++ b/components/Loading/index.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Loader, LoadingContainer } from "./styles";
+
+// eslint-disable-next-line react/display-name
+const Loading = React.forwardRef((props, ref) => {
+    return (
+        <LoadingContainer ref={ref}>
+            <Loader></Loader>
+        </LoadingContainer>
+    )
+})
+
+
+export default Loading
\ No newline at end of file
diff --git a/components/Loading/styles.js b/components/Loading/styles.js
new file mode 100644
index 00000000..eb610cf0
--- /dev/null
+++ b/components/Loading/styles.js
@@ -0,0 +1,29 @@
+import styled, { keyframes } from "styled-components";
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const LoadingContainer = styled.div`
+    width: 100%;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+export const Loader = styled.span`
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 0.20rem solid ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.gray};
+    border-top-color: ${props => props.theme.primary};
+    animation: ${rotate} 0.8s infinite linear;
+`
+
+
diff --git a/components/MobileMenu/index.jsx b/components/MobileMenu/index.jsx
new file mode 100644
index 00000000..2d4da2f0
--- /dev/null
+++ b/components/MobileMenu/index.jsx
@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { Avatar, AvatarContainer, AvatarImage, MobileMenuContainer, UserInfo, UserName, UserNickName } from "./styles";
+import Switch from "../Switch"
+import { FaSignOutAlt } from "react-icons/fa";
+import NavMenuItems from "../NavMenuItems";
+import menuItems from "../../utils/menuItems";
+import { useSession } from "next-auth/react";
+
+ const newMenuItems = [
+    ...menuItems,
+    {
+        title: "Sair",
+        route: "/login",
+        icon: FaSignOutAlt,
+        name: "logout"
+
+    }
+ ]
+
+export default function MobileMenu({ isOpen, currentPage }){
+    const {data:session, status} = useSession()
+    const {user} = session
+
+    return (
+       <MobileMenuContainer isOpen={isOpen}>
+           <AvatarContainer>
+                <div>
+                    <Avatar>
+                        <Link href="/perfil" passHref legacyBehavior>
+                            <AvatarImage src={user.image}/>
+                        </Link>
+                    </Avatar>
+                    <UserInfo>
+                        <UserName>{user.name.split(" ").slice(0,2).join(" ")}</UserName>
+                        <UserNickName>{user.email}</UserNickName>
+                    </UserInfo>
+                </div>
+                <div>
+                    <Switch/>
+                </div>
+            </AvatarContainer>
+            <NavMenuItems menuItems={newMenuItems} currentPage={currentPage}/>
+       </MobileMenuContainer>
+       
+    )
+}
\ No newline at end of file
diff --git a/components/MobileMenu/styles.js b/components/MobileMenu/styles.js
new file mode 100644
index 00000000..295307c8
--- /dev/null
+++ b/components/MobileMenu/styles.js
@@ -0,0 +1,87 @@
+import styled from "styled-components";
+
+export const MobileMenuContainer = styled.aside`
+    width: 300px;
+    max-width: 300px;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    margin-left: ${props => props.isOpen ? '0' : '-300px'};
+    z-index: 2;
+    border-right: 0.08rem solid ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.gray};
+    background: ${props => props.theme.secondary};
+    transition: all 200ms ease-in-out;
+
+    @media (min-width: 768px) {
+        margin-left: -300px;
+    }
+`
+
+
+export const AvatarContainer = styled.nav`
+    width: 100%;
+    max-width: 400px;
+    height: 50px;
+    display:flex;
+    align-items:center;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+    margin-top: 0.6rem;
+    flex-direction: column;
+
+    & > div{
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    & div:nth-child(2n){
+        justify-content: center;
+    }
+`
+
+export const Avatar = styled.nav`
+    width: 100%;
+    max-width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    /* background: ${props => props.theme.primary}; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+`
+
+export const AvatarImage = styled.img`
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: contain;
+    cursor: pointer;
+    transition: all 200ms ease-in-out;
+
+    &:hover{
+        border: 0.15rem solid ${props => props.theme.primary};
+        opacity: 0.8;
+    }
+`
+
+
+export const UserInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+export const UserName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+    font-size: 1.2rem;
+    font-weight: 400;
+`
+export const UserNickName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.gray : props.theme.black};
+    font-size: 0.85rem;
+    font-weight: 200;
+`
\ No newline at end of file
diff --git a/components/NavMenuItems/index.jsx b/components/NavMenuItems/index.jsx
new file mode 100644
index 00000000..e1f976e2
--- /dev/null
+++ b/components/NavMenuItems/index.jsx
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { LinkContent, LinkMenu, NavMenu, NavMenuItem } from "./styles";
+import Icon from "../Icon"
+import { signOut } from "next-auth/react";
+import React from "react";
+
+export default function NavMenuItems({ menuItems, currentPage }){
+    return (
+        <NavMenu>
+            {menuItems.map( (item, index) => (
+                <React.Fragment key={item.name}>
+                    <NavMenuItem>
+                        {item.name === "logout" ? (
+                            
+                            <LinkContent onClick={() => signOut()}>
+                                <Icon 
+                                    index={index} 
+                                    isActive={item.name === currentPage ? true : false}
+                                    menuItems={menuItems}
+                                />
+                                <LinkMenu isActive={item.name === currentPage ? true : false}>{item.title}</LinkMenu>
+                            </LinkContent>
+                            
+                        ): (
+                            <Link href={item.route} passHref legacyBehavior>
+                                <LinkContent>
+                                    <Icon 
+                                        index={index} 
+                                        isActive={item.name === currentPage ? true : false}
+                                        menuItems={menuItems}
+                                    />
+                                    <LinkMenu isActive={item.name === currentPage ? true : false}>{item.title}</LinkMenu>
+                                </LinkContent>
+                            </Link>
+                        )}
+                    </NavMenuItem>
+                </React.Fragment>
+            ))}
+        </NavMenu>
+    )
+}
\ No newline at end of file
diff --git a/components/NavMenuItems/styles.js b/components/NavMenuItems/styles.js
new file mode 100644
index 00000000..962a768d
--- /dev/null
+++ b/components/NavMenuItems/styles.js
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+export const NavMenu = styled.nav`
+    width: 100%;
+    height: 200px;
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @media (max-width:768px){
+        margin-top: 4rem;
+    }
+`
+
+export const NavMenuItem = styled.div`
+    width: 70%;
+    height: 40px;
+    padding: 0.2rem 2rem;
+    display: flex;
+    align-items: center;
+    gap: 1.4rem;
+    margin-top: 0.3rem;
+`
+
+
+export const LinkMenu = styled.span`
+    font-size: 1rem;
+    font-weight: 400;
+    color ${props => props.isActive ? props.theme.primary : props.theme.isDark ? props.theme.white : props.theme.black};
+`
+
+
+export const LinkContent = styled.a`
+   width: 100%;
+   height: 30px;
+   padding: 0.5rem 0.6rem;
+   display: flex;
+   align-items: center;
+   gap: 1rem;
+   cursor: pointer;
+   border-radius: 0.3rem;
+   transition: all 200ms ease-in-out;
+   text-decoration: none;
+   
+
+   &:hover{
+        background: ${props => props.theme.hoverMenu};
+   }
+   
+`
\ No newline at end of file
diff --git a/components/Sidebar/index.jsx b/components/Sidebar/index.jsx
new file mode 100644
index 00000000..e53d54f4
--- /dev/null
+++ b/components/Sidebar/index.jsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import Switch from "../Switch";
+import { Avatar, AvatarContainer, AvatarImage, Divider, NavMenu, SidebarContainer, UserInfo, UserName } from "./styles";
+import menuItems from "../../utils/menuItems";
+import { BsPatchCheckFill  } from "react-icons/bs"
+import NavMenuItems from "../NavMenuItems";
+import { useSession } from "next-auth/react";
+import Router from "next/router";
+export default function Sidebar({ currentPage }){
+    const {data:session, status} = useSession()
+
+    if(!session || status === "unauthenticated"){
+        Router.push("/")
+        return
+    }
+
+    const {user} = session
+
+    return (
+        <SidebarContainer>
+            <AvatarContainer>
+                <Avatar>
+                    <AvatarImage src={user.image}/>
+                </Avatar>
+                <UserInfo>
+                    <UserName><BsPatchCheckFill size={24} color="#e22b8d"/> {user.name.split(" ").slice(0,2).join(" ")}</UserName>
+                </UserInfo>
+                <Switch/>
+                <Divider></Divider>
+            </AvatarContainer>
+            <NavMenuItems menuItems={menuItems} currentPage={currentPage}/>
+
+        </SidebarContainer>
+    )
+}
\ No newline at end of file
diff --git a/components/Sidebar/styles.js b/components/Sidebar/styles.js
new file mode 100644
index 00000000..eaf0d039
--- /dev/null
+++ b/components/Sidebar/styles.js
@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+export const SidebarContainer = styled.aside`
+    width: 100%;
+    max-width: 300px;
+    height: 500px;
+    background: ${ props => props.theme.isDark ? props.theme.black : props.theme.white};
+    border: 1px solid ${ props => !props.theme.isDark ? props.theme.lightGray : props.theme.black};
+    border-radius: 1.5rem;
+    position: sticky;
+    top: 1rem;
+
+    @media (max-width: 768px) {
+        & {
+            display: none;
+        }
+    }
+` 
+
+
+export const AvatarContainer = styled.div`
+    width: 100%;
+    max-width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+` 
+
+
+export const Avatar = styled.div`
+    width: 100%;
+    max-width: 154px;
+    height: 154px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1.2rem;
+    background: ${props => props.theme.primary};
+    padding: 0.15rem;
+` 
+
+export const AvatarImage = styled.img`
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: contain;
+`
+
+
+export const UserInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+`
+
+export const UserName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.4rem;
+    font-weight: 400;
+`
+export const UserNickName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.gray : props.theme.black};
+    font-size: 0.85rem;
+    font-weight: 200;
+`
+
+
+export const Divider = styled.div`
+    background: ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.lightGray};
+    width: 70%;
+    height: 0.2px;
+    margin-top: 2rem;
+`
\ No newline at end of file
diff --git a/components/Switch/index.jsx b/components/Switch/index.jsx
new file mode 100644
index 00000000..060e1f25
--- /dev/null
+++ b/components/Switch/index.jsx
@@ -0,0 +1,22 @@
+import { useContext } from "react"
+import { ThemeContext } from "../../context/ThemeContext"
+import { Input, SwitchContainer, ToggleButton } from "./styles"
+import {FaSun, FaMoon } from 'react-icons/fa'
+
+const icons = {
+    light: <FaSun color="#dbab17"/>,
+    dark: <FaMoon color="#fff"/> 
+}
+export default function Switch(){
+    const {theme, toggleTheme} = useContext(ThemeContext)
+
+    return(
+        <SwitchContainer>
+            
+            <Input id="toggletheme" type="checkbox" onChange={toggleTheme} checked={theme === "light" ? true : false}/>
+            <ToggleButton htmlFor="toggletheme">
+                {icons[theme]}
+            </ToggleButton>
+        </SwitchContainer>
+    )
+}
\ No newline at end of file
diff --git a/components/Switch/styles.js b/components/Switch/styles.js
new file mode 100644
index 00000000..ccbe655b
--- /dev/null
+++ b/components/Switch/styles.js
@@ -0,0 +1,58 @@
+import styled from "styled-components";
+
+export const SwitchContainer = styled.div`
+    width: 100%;
+    max-width: 50px;
+    height: 30px;
+    background: ${props => props.theme.isDark ? props.theme.lightBlack : props.theme.gray};
+    position: relative;
+    margin-top: 1rem;
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0rem 0.24rem;
+
+    /* Add pseudo element */
+    /* &:before {
+        content: "";
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        border-radius: 35px;
+        top: 50%;
+        left: 4px;
+        background: white;
+        transform: translate(0, -50%);
+    } */
+`
+
+
+export const ToggleButton = styled.label`
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: ${props => props.theme.secondary};
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+
+`
+
+export const Input = styled.input`
+    opacity: 0;
+    width: 100%;
+    max-width: 50px;
+    height: 30px;
+    z-index: 1;
+    cursor: pointer;
+    
+    &:checked + ${ToggleButton} {
+        transform: translateX(30px);
+    }
+`
diff --git a/context/ThemeContext.jsx b/context/ThemeContext.jsx
new file mode 100644
index 00000000..276f076c
--- /dev/null
+++ b/context/ThemeContext.jsx
@@ -0,0 +1,57 @@
+import { createContext, useEffect, useState } from "react";
+import Theme from "../theme/Theme";
+
+export const ThemeContext = createContext({
+    theme: 'light',
+    toggleTheme: () => {}
+})
+
+export function ThemeProvider({ children }){
+    const [theme, setTheme] = useState('light')
+    const [mounted, setMounted] = useState(false)
+
+    function addToLocalStorage(theme){
+        localStorage.setItem('@theme', theme)
+    }
+
+    function getSavedTheme(){
+        return localStorage.getItem('@theme')
+    }
+
+    function initTheme(){
+        const savedTheme = getSavedTheme()
+        if(savedTheme){
+            setTheme(savedTheme)
+            return
+        }
+
+        addToLocalStorage('light')
+    }
+
+    function toggleTheme(){
+        if(theme == "light"){
+            setTheme('dark')
+            addToLocalStorage('dark')
+        }else{
+            setTheme('light')
+            addToLocalStorage('light')
+        }
+    }
+
+    useEffect(() => {
+        initTheme()
+        setMounted(true)
+    }, [])
+
+
+    if (!mounted) return null
+    
+
+    return(
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            <Theme theme={theme}>
+                {children}
+            </Theme>
+        </ThemeContext.Provider>
+    )
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index ae887958..491e9ba9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: true,
 }
 
diff --git a/package.json b/package.json
index d6d970b0..b9aca2c8 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.2.2",
     "next": "13.0.6",
+    "next-auth": "^4.18.8",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6"
   }
diff --git a/pages/_app.js b/pages/_app.js
index 23d1ca6c..0a16560a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,17 @@
+import GlobalStyle from "../styles/globalStyles"
+import { ThemeProvider } from "../context/ThemeContext"
+import { SessionProvider } from "next-auth/react"
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+function MyApp({ Component, pageProps : { session, ...pageProps}}) {
+
+  return (
+    <SessionProvider session={session}>
+      <ThemeProvider>  
+        <GlobalStyle/>
+          <Component {...pageProps} />
+      </ThemeProvider>
+    </SessionProvider>
+  )
 }
 
 export default MyApp
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 00000000..7e81cf7e
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,17 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+            <link rel="preconnect" href="https://fonts.googleapis.com"/>
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+            <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
+        </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
new file mode 100644
index 00000000..b1b14a0d
--- /dev/null
+++ b/pages/api/auth/[...nextauth].js
@@ -0,0 +1,35 @@
+import NextAuth from "next-auth"
+import GitHubProvider from "next-auth/providers/github";
+
+export default NextAuth({
+  providers: [
+    GitHubProvider({
+        clientId: process.env.GITHUB_CLIENT_ID,
+        clientSecret: process.env.GITHUB_CLIENT_SECRET,
+        // authorization: { params: { scope: 'public_repo user repo' } },
+        authorization: {
+          url: "https://github.com/login/oauth/authorize",
+          params: { scope: "read:user user:email" },
+        },
+        token: "https://github.com/login/oauth/access_token"
+      })
+  ],
+  secret: process.env.NEXTAUTH_SECRET,
+  callbacks: {
+    async session({ session, token, user }) {
+      session.user.id = token.id;
+      session.accessToken = token.accessToken;
+      return session;
+    },
+    async jwt({ token, user, account, profile, isNewUser }) {
+      if (user) {
+        token.id = user.id;
+      }
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
+  },
+
+})
diff --git a/pages/index.js b/pages/index.js
index f80b4ce2..9bff09cc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,8 +1,30 @@
+import { useSession } from "next-auth/react";
+import Header from "../components/Header";
+import ListUsers from "../components/ListUsers";
+import Sidebar from "../components/Sidebar";
+import { Container, Content, Main } from "../styles/App/style";
+import Router from "next/router";
+import { useEffect } from "react";
+
 
 export default function Home() {
+  const {data: session, status } = useSession()
+
+
+  if(!session || status === "unauthenticated"){
+    Router.push("/login")
+    return
+  }
+
   return (
-    <div>
-      <h1>Hello, World!</h1>
-    </div>
+    <Container>
+      <Header currentPage="home"/>
+      <Main>
+        <Content>
+          <Sidebar currentPage="home"/>
+          <ListUsers/>
+        </Content>
+      </Main>
+    </Container>
   )
 }
diff --git a/pages/login/index.jsx b/pages/login/index.jsx
new file mode 100644
index 00000000..a116580e
--- /dev/null
+++ b/pages/login/index.jsx
@@ -0,0 +1,39 @@
+import { useSession, signIn } from "next-auth/react";
+import { Container, DescriptionContainer, LoginContainer, Text, Title, TextFilled, LoginButton, Description } from "../../styles/Login/styles.js";
+import {FaGithub} from 'react-icons/fa'
+import Router from "next/router";
+import { useEffect } from "react";
+
+export default function Login(){
+    const {data: session, status } = useSession()
+
+    
+    if(session || status === "authenticated"){
+        Router.push("/")
+        return
+    }
+    
+
+
+    function handleLogin(){ 
+        signIn('github', { callbackUrl: process.env.NEXTAUTH_URL/*"http://127.0.0.1:3000"*/})
+    }
+
+    return (
+        <Container>
+            <LoginContainer>
+                <Title>Bem vindo ao <TextFilled>DevKut</TextFilled></Title>
+                <LoginButton onClick={handleLogin}>
+                    <FaGithub size={20}/>
+                    Login com o GitHub
+                </LoginButton>
+            </LoginContainer>
+            <DescriptionContainer>
+                <Text>DevKut</Text>
+                <Description>
+                    Conecte-se com outros devs e faça networking.
+                </Description>
+            </DescriptionContainer>
+        </Container>
+    )
+}
diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx
new file mode 100644
index 00000000..df71057f
--- /dev/null
+++ b/pages/profile/index.jsx
@@ -0,0 +1,83 @@
+import { useSession } from "next-auth/react";
+import Header from "../../components/Header";
+import Sidebar from "../../components/Sidebar";
+import { Container, Content, Main } from "../../styles/App/style";
+import Router from "next/router";
+import { useEffect, useState } from "react";
+import api from "../../services/api";
+import { Avatar, AvatarContainer, AvatarImage, Bio, Description, Followers, FollowersContent, ProfileContainer, Text, TextCount, Title, UserInfo, UserName } from "../../styles/Profile/styles.js";
+import Loading from "../../components/Loading";
+import { BsPatchCheckFill } from "react-icons/bs";
+
+export default function Profile(){
+    const {data: session, status } = useSession()
+    const [user, setUser]   = useState(null)
+
+    function getProfile() {
+        api.get(`user`, {
+            headers: {
+                "Accept": "application/vnd.github+json",
+                "Authorization": `Bearer ${session.accessToken}`
+            }
+        })
+        .then( res => {
+            setUser(res.data)
+        })
+    }
+    
+
+    useEffect(() => {     
+        if(!session || status === "unauthenticated"){
+            Router.push("/login")
+            return
+        }
+        getProfile()
+    }, [])
+    
+
+    return (
+        <Container>
+            <Header currentPage="perfil"/>
+            <Main>
+                <Content>
+                    <Sidebar currentPage="perfil"/>
+                    <ProfileContainer>
+                    {!user  && (
+                        <Loading/>
+                    )}
+
+                    {user && (
+                        <>
+                        <AvatarContainer>
+                            <Avatar>
+                                <AvatarImage src={user.avatar_url}/>
+                            </Avatar>
+                            <UserInfo>
+                                <UserName><BsPatchCheckFill size={24} color="#e22b8d"/> {user.name.split(" ").slice(0,2).join(" ")}</UserName>
+                            </UserInfo>
+                        </AvatarContainer>
+                        <Bio>
+                            <Title>Bio</Title>
+                            <Description>
+                                {user.bio}
+                            </Description>
+                        </Bio>
+                        <Followers>
+                            <Title>Seguidores</Title>
+                            <FollowersContent>
+                                <Text>
+                                    <TextCount>{user.following}</TextCount> seguindo
+                                </Text>
+                                <Text>
+                                <TextCount>{user.followers}</TextCount> seguidores
+                                </Text>
+                            </FollowersContent>
+                        </Followers>
+                        </>
+                    )}
+                    </ProfileContainer>
+                </Content>
+            </Main>
+        </Container>
+    )
+}
diff --git a/pages/test.js b/pages/test.js
new file mode 100644
index 00000000..64d1db64
--- /dev/null
+++ b/pages/test.js
@@ -0,0 +1,27 @@
+import { useSession } from "next-auth/react"
+import { useEffect, useState } from "react"
+import api from "../services/api"
+
+export default function Test(){
+    const {data: session, status } = useSession()
+    const [user, setUser]   = useState(null)
+
+    function getProfile(){
+        api.get(`user`, {
+            headers: {
+                "Accept": "application/vnd.github+json",
+                "Authorization": `Bearer ${session.accessToken}`
+            }
+        })
+        .then( res => {
+            setUser(res.data)
+        })
+    }
+   
+    useEffect(() => {      
+        getProfile()
+    }, [])
+    return (
+        <h1>TESTE</h1>
+    )
+}
\ No newline at end of file
diff --git a/services/api.js b/services/api.js
new file mode 100644
index 00000000..9209413f
--- /dev/null
+++ b/services/api.js
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const api = axios.create({
+    baseURL: 'https://api.github.com/'
+})
+
+export default api
\ No newline at end of file
diff --git a/styles/App/style.js b/styles/App/style.js
new file mode 100644
index 00000000..e36f7e29
--- /dev/null
+++ b/styles/App/style.js
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width: 100%;
+    height: 100vh;
+    background: ${ props => props.theme.secondary};
+`
+
+export const Main = styled.main`
+    display: flex;
+    justify-content: center;
+`
+
+
+export const Content = styled.div`
+    width: 80%;
+    display: flex;
+    gap: 2rem;
+`
\ No newline at end of file
diff --git a/styles/Login/styles.js b/styles/Login/styles.js
new file mode 100644
index 00000000..dcbaed81
--- /dev/null
+++ b/styles/Login/styles.js
@@ -0,0 +1,80 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+`
+
+export const LoginContainer = styled.div`
+    width: 40%;
+    height: 100vh;
+    background-color: ${props => props.theme.secondary};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    transition: all 50ms ease-in-out;
+
+    @media (max-width: 768px) {
+       width: 100%;
+    }
+`
+export const DescriptionContainer = styled.div`
+    width: 60%;
+    height: 100vh;
+    background-color: ${props => props.theme.primary};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    @media (max-width: 768px) {
+        display: none;
+    }
+`
+
+export const Text = styled.span`
+    font-size: 3.5rem;
+    font-weight: 400;
+    color:  ${props => props.theme.white};
+`
+
+export const Title = styled.h1`
+    font-size: 1.4rem;
+    font-weight: 300;
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+`
+
+export const TextFilled = styled.span`
+    font-size: 1.4rem;
+    color: ${props => props.theme.primary};
+    font-weight: 500;
+`
+
+export const LoginButton = styled.button`
+    width: 100%;
+    max-width: 200px;
+    height: 40px;
+    outline: none;
+    border: none;
+    border-radius: 0.2rem;
+    background: ${props => props.theme.primary};
+    color: ${props => props.theme.white};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.30rem;
+    cursor: pointer;
+    transition: all 200ms ease-in-out;
+
+    &:hover{
+        background: ${props => props.theme.primaryHover};
+    }
+`
+
+export const Description = styled.p`
+    font-size: 1.2rem;
+    color: ${props => props.theme.gray}
+`
\ No newline at end of file
diff --git a/styles/Profile/styles.js b/styles/Profile/styles.js
new file mode 100644
index 00000000..a17ddffd
--- /dev/null
+++ b/styles/Profile/styles.js
@@ -0,0 +1,125 @@
+import styled from "styled-components";
+
+export const ProfileContainer = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`
+
+export const Bio = styled.div`
+    width: 90%;
+    height: 200px;
+    background: ${ props => props.theme.isDark ? props.theme.black : props.theme.white};
+    border: 1px solid ${ props => !props.theme.isDark ? props.theme.lightGray : props.theme.black};
+    border-radius: 1.5rem;
+    padding: 0.6rem 2rem;
+
+    @media (max-width: 768px){
+        &{
+            border: none;
+            width: 100%;
+            background: transparent;
+        }
+    }
+`
+
+export const Title = styled.h1`
+    font-size: 1.6rem;
+    color: ${ props => props.theme.isDark ? props.theme.white : props.theme.black};
+`
+
+export const Description = styled.p`
+    font-size: 1rem;
+    color: ${ props => props.theme.isDark ? props.theme.gray : props.theme.lightBlack};
+`
+
+export const Followers = styled.div`
+    width: 90%;
+    height: 228px;
+    background: ${ props => props.theme.isDark ? props.theme.black : props.theme.white};
+    border: 1px solid ${ props => !props.theme.isDark ? props.theme.lightGray : props.theme.black};
+    border-radius: 1.5rem;
+    padding: 0.6rem 2rem;
+    margin-top: 2rem;
+
+    @media (max-width: 768px){
+        &{
+            border: none;
+            width: 100%;
+            background: transparent;
+        }
+    }
+`
+
+export const FollowersContent = styled.div`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+`
+
+export const Text = styled.span`
+    font-size: 1.2rem;
+    color: ${ props => props.theme.isDark ? props.theme.lightGray : props.theme.lightBlack};
+`
+
+export const TextCount = styled.span`
+    font-size: 1.5rem;
+    color: ${ props => props.theme.primary};
+    font-weight: 400;
+`
+
+export const AvatarContainer = styled.div`
+    width: 100%;
+    max-width: 300px;
+    display: none;
+    align-items: center;
+    
+
+    @media (max-width: 768px){
+        &{
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+        }
+    }
+` 
+
+
+export const Avatar = styled.div`
+    width: 100%;
+    max-width: 154px;
+    height: 154px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1.2rem;
+    background: ${props => props.theme.primary};
+    padding: 0.15rem;
+` 
+
+export const AvatarImage = styled.img`
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: contain;
+`
+
+
+export const UserInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+`
+
+export const UserName = styled.span`
+    color: ${props => props.theme.isDark ? props.theme.white : props.theme.black};
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.4rem;
+    font-weight: 400;
+`
\ No newline at end of file
diff --git a/styles/globalStyles.js b/styles/globalStyles.js
new file mode 100644
index 00000000..ece0514b
--- /dev/null
+++ b/styles/globalStyles.js
@@ -0,0 +1,15 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+    body{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: "Rubik", sans-serif;
+        background: ${props => props.theme.secondary};
+    }
+
+`;
+
+
+export default GlobalStyle;
\ No newline at end of file
diff --git a/theme/Theme.jsx b/theme/Theme.jsx
new file mode 100644
index 00000000..ecb78ae3
--- /dev/null
+++ b/theme/Theme.jsx
@@ -0,0 +1,33 @@
+import { ThemeProvider } from "styled-components"
+
+const themeColors = {
+    white: '#fff',
+    gray: '#cbcad2',
+    black: '#252525',
+    pink: '#fa45a9',
+    purple: '#014fb0',
+    primaryHover: '#c1277a',
+    lightGray: '#e7e7e7',
+    lightBlack: "#444444",
+}
+
+const themes = {
+    light: {
+        ...themeColors,
+        primary: '#e22b8d',
+        secondary: '#f8fafc',
+        isDark: false,
+        hoverMenu: "#e9e9e9"
+    }, 
+    dark : {
+        ...themeColors,
+        primary: '#e22b8d',
+        secondary: '#161616',
+        isDark: true,
+        hoverMenu: "#393939"
+    }
+}
+
+export default function Theme({ children, theme }){
+    return <ThemeProvider theme={themes[theme]}> { children }</ThemeProvider>
+}
\ No newline at end of file
diff --git a/utils/menuItems.js b/utils/menuItems.js
new file mode 100644
index 00000000..fdd6ea3f
--- /dev/null
+++ b/utils/menuItems.js
@@ -0,0 +1,21 @@
+import {BsFillGrid1X2Fill} from 'react-icons/bs'
+import {FaUser} from 'react-icons/fa'
+
+const menuItems = [
+    {
+        title:  "Inicio",
+        route:  "/",
+        icon:   BsFillGrid1X2Fill,
+        name: "home"
+    },
+    {
+        title:  "Perfil",
+        route:  "/profile",
+        icon:   FaUser,
+        name: "perfil"
+
+    }
+]
+
+
+export default menuItems
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 904d3d1c..b3966600 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,87 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a"
+  integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==
+  dependencies:
+    "@babel/types" "^7.20.7"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
+  integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.20.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.20.6.tgz#63dae945963539ab0ad578efbf3eff271e7067ae"
@@ -17,6 +98,69 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.16.3":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/template@^7.18.10":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/traverse@^7.4.5":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.12.tgz#7f0f787b3a67ca4475adef1f56cb94f6abd4a4b5"
+  integrity sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
+  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
@@ -51,6 +195,38 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
+  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@next/env@13.0.6":
   version "13.0.6"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.6.tgz#3fcab11ffbe95bff127827d9f7f3139bc5e6adff"
@@ -149,6 +325,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@panva/hkdf@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.0.2.tgz#bab0f09d09de9fd83628220d496627681bc440d6"
+  integrity sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==
+
 "@pkgr/utils@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.1.tgz#0a9b06ffddee364d6642b3cd562ca76f55b34a03"
@@ -247,6 +428,13 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
 ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -319,16 +507,46 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 axe-core@^4.4.3:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.6.0.tgz#1d07514866fa51262734b3357932fcf86961383a"
   integrity sha512-L3ZNbXPTxMrl0+qTXAzn9FBRvk5XdO56K8CvcCKtlxv44Aw2w2NCclGuvCWxHPw1Riiq3ncP/sxFYj2nUqdoTw==
 
+axios@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.2.tgz#72681724c6e6a43a9fea860fc558127dbe32f9f1"
+  integrity sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -362,11 +580,25 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-lite@^1.0.30001406:
   version "1.0.30001439"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
   integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
 
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -380,6 +612,13 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -387,16 +626,33 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
 core-js-pure@^3.25.1:
   version "3.26.1"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.26.1.tgz#653f4d7130c427820dcecd3168b594e8bb095a33"
@@ -411,6 +667,20 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -430,7 +700,7 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -455,6 +725,11 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -536,6 +811,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -819,6 +1099,20 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -904,6 +1198,11 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.15.0:
   version "13.19.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8"
@@ -966,6 +1265,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@@ -997,6 +1301,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c"
@@ -1158,12 +1469,17 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+jose@^4.10.0, jose@^4.9.3:
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.11.2.tgz#d9699307c02e18ff56825843ba90e2fae9f09e23"
+  integrity sha512-njj0VL2TsIxCtgzhO+9RRobBvws4oYyCM8TpvoUQwl/MbIM3NFJRR9+e6x0sS5xXaP1t6OCBkaBME98OV9zU5A==
+
 js-sdsl@^4.1.4:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
   integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
 
-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -1175,6 +1491,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -1232,6 +1553,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.11:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -1259,6 +1585,18 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -1296,6 +1634,21 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-auth@^4.18.8:
+  version "4.18.8"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.18.8.tgz#34012ac107702b27779647e8787715cea948812a"
+  integrity sha512-USP8ihmvB7iCGtkS0+toe2QPrzdbZfkydQZX56JOI9Ft5n/BardOXh3D4wQ2An+vpq/jDKojGlgfv21wVElW7A==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@panva/hkdf" "^1.0.1"
+    cookie "^0.5.0"
+    jose "^4.9.3"
+    oauth "^0.9.15"
+    openid-client "^5.1.0"
+    preact "^10.6.3"
+    preact-render-to-string "^5.1.19"
+    uuid "^8.3.2"
+
 next@13.0.6:
   version "13.0.6"
   resolved "https://registry.yarnpkg.com/next/-/next-13.0.6.tgz#f9a2e9e2df9ad60e1b6b716488c9ad501a383621"
@@ -1321,11 +1674,21 @@ next@13.0.6:
     "@next/swc-win32-ia32-msvc" "13.0.6"
     "@next/swc-win32-x64-msvc" "13.0.6"
 
+oauth@^0.9.15:
+  version "0.9.15"
+  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
+  integrity sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.12.2, object-inspect@^1.9.0:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
@@ -1381,6 +1744,11 @@ object.values@^1.1.5, object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+oidc-token-hash@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz#ae6beec3ec20f0fd885e5400d175191d6e2f10c6"
+  integrity sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -1397,6 +1765,16 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+openid-client@^5.1.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/openid-client/-/openid-client-5.3.1.tgz#69a5fa7d2b5ad479032f576852d40b4d4435488a"
+  integrity sha512-RLfehQiHch9N6tRWNx68cicf3b1WR0x74bJWHRc25uYIbSRwjxYcTFaRnzbbpls5jroLAaB/bFIodTgA5LJMvw==
+  dependencies:
+    jose "^4.10.0"
+    lru-cache "^6.0.0"
+    object-hash "^2.0.1"
+    oidc-token-hash "^5.0.1"
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@@ -1460,11 +1838,16 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.3.1:
+picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+postcss-value-parser@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
@@ -1474,11 +1857,28 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact-render-to-string@^5.1.19:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz#0ff0c86cd118d30affb825193f18e92bd59d0604"
+  integrity sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==
+  dependencies:
+    pretty-format "^3.8.0"
+
+preact@^10.6.3:
+  version "10.11.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
+  integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+pretty-format@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+  integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -1488,6 +1888,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -1506,7 +1911,12 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-icons@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
+  integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -1607,6 +2017,11 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -1692,6 +2107,22 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+styled-components@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.0.tgz#4a5622ab9714bd3fcfaeec292aa555871f057563"
@@ -1699,6 +2130,13 @@ styled-jsx@5.1.0:
   dependencies:
     client-only "0.0.1"
 
+supports-color@^5.3.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -1737,6 +2175,11 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -1800,6 +2243,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"