diff --git a/src/components/Estilo/TrocardePerfis.css b/src/components/Estilo/TrocardePerfis.css
new file mode 100644
index 00000000..58282b9d
--- /dev/null
+++ b/src/components/Estilo/TrocardePerfis.css
@@ -0,0 +1,44 @@
+.perfil-button, .selecionado{
+    margin: 8px;
+    margin-left:0px;
+    padding: 10px 12px;
+    font-size: 15px;
+
+    width:68%;
+    border: 2px solid #25396f;
+    border-radius: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+    flex-wrap: nowrap;
+    background-color: transparent;
+    color: #25396f;
+    font-weight: bold;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.container-perfis{
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    justify-content: flex-end;
+    margin-left: 0px;
+}
+
+#primeiro-conjunto-botoes, #segundo-conjunto-botoes{
+    display: flex;
+    flex-direction: column;
+    
+}
+
+.perfil-button:hover{
+    background-color: #5d5dff;
+    border-color: #5d5dff;
+    color: white;
+    transition: 0.5s;
+}
+
+.selecionado{
+    background-color: #5d5dff;
+    border-color: #5d5dff;
+    color: white;
+}
\ No newline at end of file
diff --git a/src/components/TrocardePerfis.jsx b/src/components/TrocardePerfis.jsx
new file mode 100644
index 00000000..a812b2b7
--- /dev/null
+++ b/src/components/TrocardePerfis.jsx
@@ -0,0 +1,80 @@
+import {React, useState, useEffect} from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { UserInfos } from './utils/Functions-Endpoints/General';
+import { useAuth } from './utils/AuthProvider';
+import './Estilo/TrocardePerfis.css'
+
+const TrocardePerfis = () => {
+  const location = useLocation();
+   
+  const [selectedProfile, setSelectedProfile] = useState('');
+  const { getAuthorizationHeader } = useAuth();
+  const [showProfiles, setShowProfiles] = useState([]);
+   const navigate = useNavigate();
+
+  let authHeader = getAuthorizationHeader();
+  console.log('AUTH HEADER', authHeader)
+
+  const handleUserInfo = async () => {
+    const userInfo = await UserInfos(authHeader);
+    setShowProfiles(userInfo.roles)
+    
+  };
+
+const handleProfileClick = (profile, route) => {
+  setSelectedProfile(profile);
+  navigate(route);
+};
+
+
+useEffect(() => {
+  setSelectedProfile(location.pathname)
+
+  handleUserInfo();
+},[])
+
+  return (
+    
+    <div className='container-perfis'>
+    <div id='primeiro-conjunto-botoes'>
+  {(showProfiles.includes('secretaria') || showProfiles.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === 'secretaria' ? 'selecionado' : ''}`}
+      onClick={() => handleProfileClick('secretaria', '/secretaria')}
+    >
+      Secretaria
+    </button>
+  )}
+  {(showProfiles.includes('medico') || showProfiles.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === 'medico' ? 'selecionado' : ''}`}
+      onClick={() => handleProfileClick('medico', '/medico')}
+    >
+      Médico(a)
+    </button>
+  )}
+</div>
+
+<div id='segundo-conjunto-botoes'>
+  {(showProfiles.includes('financeiro') || showProfiles.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === 'financeiro' ? 'selecionado' : ''}`}
+      onClick={() => handleProfileClick('financeiro', '/financeiro')}
+    >
+      Financeiro
+    </button>
+  )}
+  {showProfiles.includes('admin') && (
+    <button
+      className={`perfil-button${selectedProfile === 'admin' ? 'selecionado' : ''}`}
+      onClick={() => handleProfileClick('admin', '/admin')}
+    >
+      Administrador(a)
+    </button>
+  )}
+</div>
+    </div>
+  )
+}
+
+export default TrocardePerfis
\ No newline at end of file
diff --git a/src/components/utils/Functions-Endpoints/General.js b/src/components/utils/Functions-Endpoints/General.js
new file mode 100644
index 00000000..e77f9f89
--- /dev/null
+++ b/src/components/utils/Functions-Endpoints/General.js
@@ -0,0 +1,27 @@
+import API_KEY from "../apiKeys";
+
+  const UserInfos = async (access_token) => {
+
+    let Token = access_token.replace('bearer', 'Bearer')
+
+    
+   var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+
+    myHeaders.append("Authorization", Token);
+
+    var requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow'
+    };
+
+    
+
+    const userInfo = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/user-info`, requestOptions)
+    const userInfoData = await userInfo.json()
+    console.log(userInfoData, "Dados do usuário")
+    return userInfoData 
+}
+
+export {UserInfos}
\ No newline at end of file