diff --git a/dashboard_js/app/components/menu.jsx b/dashboard_js/app/components/menu.jsx
new file mode 100644
index 0000000..b154822
--- /dev/null
+++ b/dashboard_js/app/components/menu.jsx
@@ -0,0 +1,88 @@
+import { createContext, useContext, useState } from 'react'
+import {
+  Menu as HeadlessMenu,
+  MenuButton as HeadlessMenuButton,
+  MenuItem as HeadlessMenuItem,
+  MenuItems as HeadlessMenuItems,
+} from '@headlessui/react'
+import { Loader } from './loader'
+import clsx from 'clsx'
+
+const MenuContext = createContext(null)
+
+export function useMenu() {
+  return useContext(MenuContext)
+}
+
+export function Menu({
+  children,
+  isLoading: defaultIsLoading = false,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = useState(defaultIsLoading)
+
+  return (
+    <MenuContext.Provider
+      value={{ isLoading: isLoading || defaultIsLoading, setIsLoading }}
+    >
+      <HeadlessMenu {...props}>{children}</HeadlessMenu>
+    </MenuContext.Provider>
+  )
+}
+
+export function MenuButton({ children, className, disabled, ...props }) {
+  const { isLoading } = useContext(MenuContext)
+
+  return (
+    <HeadlessMenuButton
+      className={clsx(
+        className,
+        'relative overflow-hidden disabled:pointer-events-none',
+      )}
+      disabled={isLoading || disabled}
+      {...props}
+    >
+      {isLoading && (
+        <div className="absolute inset-0 flex justify-center items-center bg-white dark:bg-slate-800">
+          <Loader className="w-4" />
+        </div>
+      )}
+
+      {children}
+    </HeadlessMenuButton>
+  )
+}
+
+export function MenuItem({ children, className, ...props }) {
+  return (
+    <HeadlessMenuItem
+      className={clsx(
+        'relative flex items-center gap-1 py-2 px-4 hover:bg-zinc-100 dark:hover:bg-slate-600 w-full transition',
+        'aria-[disabled=true]:text-gray-400 aria-[disabled=true]:dark:text-gray-600',
+        'aria-[disabled=true]:pointer-events-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </HeadlessMenuItem>
+  )
+}
+
+export function MenuItems({ children, className, ...props }) {
+  return (
+    <HeadlessMenuItems
+      className={clsx(
+        'absolute right-0 origin-top-right bg-white dark:bg-slate-700 rounded-lg drop-shadow shadow overflow-hidden py-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </HeadlessMenuItems>
+  )
+}
+
+export function MenuSeparator() {
+  return <hr className="my-2 dark:border-t-slate-600" />
+}
diff --git a/dashboard_js/app/hooks/use-auth.jsx b/dashboard_js/app/hooks/use-auth.jsx
index 1218c37..bb03f70 100644
--- a/dashboard_js/app/hooks/use-auth.jsx
+++ b/dashboard_js/app/hooks/use-auth.jsx
@@ -4,6 +4,7 @@ import {
   useCallback,
   createContext,
   useState,
+  useEffect,
 } from 'react'
 import * as Auth from 'aws-amplify/auth'
 
@@ -22,6 +23,12 @@ export function useAuth() {
 export function AuthProvider({ children }) {
   const [authUser, setAuthUser] = useState(null)
 
+  useEffect(() => {
+    Auth.fetchUserAttributes().then((user) => {
+      setAuthUser(user)
+    })
+  }, [])
+
   const signIn = useCallback(async ({ username, password }) => {
     const signInOut = await Auth.signIn({
       username,
diff --git a/dashboard_js/app/layouts/app/_user-menu.jsx b/dashboard_js/app/layouts/app/_user-menu.jsx
new file mode 100644
index 0000000..786ce9d
--- /dev/null
+++ b/dashboard_js/app/layouts/app/_user-menu.jsx
@@ -0,0 +1,57 @@
+import { useAuth } from '~/hooks/use-auth'
+import { MenuButton, MenuItem as HeadlessMenuItem } from '@headlessui/react'
+import {
+  ChevronDownIcon,
+  AdjustmentsHorizontalIcon,
+  ArrowRightStartOnRectangleIcon,
+} from '@heroicons/react/24/solid'
+import { BookOpenIcon } from '@heroicons/react/24/outline'
+import { Menu, MenuItem, MenuItems, MenuSeparator } from '~/components/menu'
+import clsx from 'clsx'
+import { Link } from 'react-router'
+
+export function UserMenu({ className }) {
+  const { authUser } = useAuth()
+
+  return (
+    <Menu as="div" className={clsx('relative', className)}>
+      <MenuButton className="flex gap-0.5 items-center cursor-pointer">
+        <div className="w-10 h-10 bg-zinc-200 dark:bg-gray-800 rounded-full overflow-hidden">
+          {/* <Avatar
+            name={authUser.name}
+            email={authUser.email}
+            size={40}
+            maxInitials={2}
+          /> */}
+        </div>
+        <ChevronDownIcon className="w-5 fill-gray-500 dark:fill-white" />
+      </MenuButton>
+
+      <MenuItems className="w-64 mt-1">
+        {/* User */}
+        <HeadlessMenuItem as="div" className="py-2 px-4">
+          <div className="font-semibold truncate">{authUser?.name}</div>
+          <div className="text-sm text-gray-600 dark:text-slate-300 truncate">
+            {authUser?.email}
+          </div>
+        </HeadlessMenuItem>
+
+        <MenuSeparator />
+
+        <MenuItem as={Link} target="_blank" to="/redirect-out">
+          <BookOpenIcon className="w-5" /> Sala de aula
+        </MenuItem>
+
+        <MenuSeparator />
+
+        <MenuItem as={Link} to="/settings">
+          <AdjustmentsHorizontalIcon className="w-5" /> Configurações
+        </MenuItem>
+
+        <MenuItem as={Link} to="/auth/logout">
+          <ArrowRightStartOnRectangleIcon className="w-5" /> Sair
+        </MenuItem>
+      </MenuItems>
+    </Menu>
+  )
+}
diff --git a/dashboard_js/app/layouts/app.jsx b/dashboard_js/app/layouts/app/layout.jsx
similarity index 57%
rename from dashboard_js/app/layouts/app.jsx
rename to dashboard_js/app/layouts/app/layout.jsx
index 5e6beaa..b31c66f 100644
--- a/dashboard_js/app/layouts/app.jsx
+++ b/dashboard_js/app/layouts/app/layout.jsx
@@ -2,8 +2,10 @@ import { useNavigation, redirect, useNavigate } from 'react-router'
 import { fetchAuthSession } from 'aws-amplify/auth'
 import { Link } from 'react-router'
 import { Outlet } from 'react-router'
-import { useAuth } from '~/hooks/use-auth'
 import { Container } from '~/components/container'
+import { Smallest, Regular } from '~/components/logo'
+import { clsx } from 'clsx'
+import { UserMenu } from './_user-menu'
 
 export async function clientLoader() {
   const session = await fetchAuthSession()
@@ -15,14 +17,14 @@ export async function clientLoader() {
 
 export default function Layout() {
   const navigation = useNavigation()
-  const navigate = useNavigate()
-  const { signOut } = useAuth()
   const isNavigating = Boolean(navigation.location)
 
   return (
-    <>
-      <nav>
-        <ul className="flex gap-1">
+    <div>
+      <aside className="p-4 w-80 h-full fixed top-0 left-0 dark:bg-green-primary max-lg:hidden">
+        <Logo className="h-12 lg:h-14" />
+
+        <ul className="flex flex-col gap-1">
           <li>
             <Link to="/orders">Pagamentos</Link>
           </li>
@@ -33,26 +35,27 @@ export default function Layout() {
             <Link to="/enrollments">Matrículas</Link>
           </li>
         </ul>
+      </aside>
 
-        <button
-          onClick={() => {
-            signOut()
-            navigate('/auth')
-          }}
-        >
-          Sair
-        </button>
-      </nav>
+      <section className="lg:ml-80">
+        <header className="flex items-center bg-slate-50/50 dark:bg-gray-900/50 backdrop-blur backdrop-filter sticky top-0 border-b dark:border-gray-700 lg:border-0 z-20 h-16 px-4 lg:px-8">
+          <div className="ml-auto flex items-center">
+            <UserMenu />
+          </div>
+        </header>
 
-      {isNavigating ? <Loading /> : <Outlet />}
-    </>
+        <main className="p-4 lg:p-8">
+          {isNavigating ? <Loading /> : <Outlet />}
+        </main>
+      </section>
+    </div>
   )
 }
 
 function Loading() {
   return (
     <Container>
-      <div className="animate-pulse flex flex-col gap-2.5 lg:w-2/4 [&>*]:bg-gray-200 dark:[&>*]:bg-gray-700 [&>*]:h-5 [&>*]:rounded-md">
+      <div className="animate-pulse flex flex-col gap-2.5 lg:w-2/4 [&>*]:bg-gray-200 dark:[&>*]:bg-gray-700 [&>*]:h-5 [&>*]:rounded">
         <div className="w-2/6" />
         <div className="w-4/6" />
         <div className="w-5/6" />
@@ -67,3 +70,12 @@ function Loading() {
     </Container>
   )
 }
+
+function Logo({ className }) {
+  return (
+    <div>
+      <Regular className={clsx('max-lg:hidden', className)} />
+      <Smallest className={clsx('lg:hidden w-full', className)} />
+    </div>
+  )
+}
diff --git a/dashboard_js/app/layouts/auth/layout.jsx b/dashboard_js/app/layouts/auth/layout.jsx
index ba30368..21a9e42 100644
--- a/dashboard_js/app/layouts/auth/layout.jsx
+++ b/dashboard_js/app/layouts/auth/layout.jsx
@@ -1,7 +1,8 @@
-import { Outlet, Link, useSearchParams } from 'react-router'
+import { Outlet, Link as RouterLink, useSearchParams } from 'react-router'
 import { Regular as Logo } from '../../components/logo'
 import Pulse from './_pulse'
 import WomanImg from './woman.png'
+import { Link } from './_link'
 
 export default function Auth() {
   const [searchParams] = useSearchParams()
@@ -48,6 +49,7 @@ export default function Auth() {
                 pathname: '/auth/support',
                 search: searchParams.toString(),
               }}
+              as={RouterLink}
               state={{ location: window.location.href }}
             >
               Precisa de ajuda? Fale conosco
diff --git a/dashboard_js/app/routes.js b/dashboard_js/app/routes.js
index 66a6890..c7b34ca 100644
--- a/dashboard_js/app/routes.js
+++ b/dashboard_js/app/routes.js
@@ -1,7 +1,7 @@
 import { index, route, layout, prefix } from '@react-router/dev/routes'
 
 export default [
-  layout('layouts/app.jsx', [
+  layout('layouts/app/layout.jsx', [
     index('routes/overview/index.jsx'),
     route('users', 'routes/users/index.jsx'),
     route('users/:id', 'routes/users/$id.jsx'),
@@ -13,11 +13,12 @@ export default [
   ]),
   layout('layouts/auth/layout.jsx', [
     ...prefix('auth', [
-      index('routes/auth/signin/index.jsx'),
-      route('signup', 'routes/auth/signup/index.jsx'),
+      index('routes/auth/login/index.jsx'),
+      route('logout', 'routes/auth/logout.jsx'),
+      route('register', 'routes/auth/register/index.jsx'),
       route('forgot', 'routes/auth/forgot/index.jsx'),
       route('passcode', 'routes/auth/passcode/index.jsx'),
-      route('support', 'routes/auth/support/index.jsx'),
+      route('support', 'routes/auth/support.jsx'),
     ]),
   ]),
 ]
diff --git a/dashboard_js/app/routes/auth/signin/_password.jsx b/dashboard_js/app/routes/auth/login/_password.jsx
similarity index 100%
rename from dashboard_js/app/routes/auth/signin/_password.jsx
rename to dashboard_js/app/routes/auth/login/_password.jsx
diff --git a/dashboard_js/app/routes/auth/signin/index.jsx b/dashboard_js/app/routes/auth/login/index.jsx
similarity index 100%
rename from dashboard_js/app/routes/auth/signin/index.jsx
rename to dashboard_js/app/routes/auth/login/index.jsx
diff --git a/dashboard_js/app/routes/auth/logout.jsx b/dashboard_js/app/routes/auth/logout.jsx
new file mode 100644
index 0000000..b6bd5c2
--- /dev/null
+++ b/dashboard_js/app/routes/auth/logout.jsx
@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router'
+import { useEffect } from 'react'
+import { useAuth } from '~/hooks/use-auth'
+
+export default function Component() {
+  const { signOut } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    signOut()
+    navigate('/auth')
+  }, [])
+
+  return <></>
+}
diff --git a/dashboard_js/app/routes/auth/signup/index.jsx b/dashboard_js/app/routes/auth/register/index.jsx
similarity index 100%
rename from dashboard_js/app/routes/auth/signup/index.jsx
rename to dashboard_js/app/routes/auth/register/index.jsx
diff --git a/dashboard_js/app/routes/auth/support.jsx b/dashboard_js/app/routes/auth/support.jsx
new file mode 100644
index 0000000..9f4fc68
--- /dev/null
+++ b/dashboard_js/app/routes/auth/support.jsx
@@ -0,0 +1,9 @@
+import { Heading } from '~/components/heading'
+
+export default function Component() {
+  return (
+    <>
+      <Heading>...</Heading>
+    </>
+  )
+}
diff --git a/dashboard_js/app/routes/auth/support/index.jsx b/dashboard_js/app/routes/auth/support/index.jsx
deleted file mode 100644
index aab2041..0000000
--- a/dashboard_js/app/routes/auth/support/index.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Heading } from '../../../components/heading'
-
-export default function Component() {
-  return <>...</>
-}
diff --git a/dashboard_js/app/routes/users/index.jsx b/dashboard_js/app/routes/users/index.jsx
index 231a381..eca6b70 100644
--- a/dashboard_js/app/routes/users/index.jsx
+++ b/dashboard_js/app/routes/users/index.jsx
@@ -6,7 +6,7 @@ export function meta({}) {
 
 export default function Component() {
   const info = useSuspenseQuery({
-    queryKey: ['todos'],
+    queryKey: ['users'],
     queryFn: async () => {
       await new Promise((r) => setTimeout(r, 3000))
       return { data: 'todos' }
diff --git a/dashboard_js/package-lock.json b/dashboard_js/package-lock.json
index 4197db8..268eb54 100644
--- a/dashboard_js/package-lock.json
+++ b/dashboard_js/package-lock.json
@@ -7,6 +7,7 @@
       "name": "dashboard_js",
       "dependencies": {
         "@brazilian-utils/brazilian-utils": "^1.0.0-rc.12",
+        "@headlessui/react": "^2.2.0",
         "@heroicons/react": "^2.2.0",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^4.1.0",
@@ -2248,6 +2249,78 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.8.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@heroicons/react": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
@@ -2430,6 +2503,71 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.19.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.19.1.tgz",
+      "integrity": "sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.23.0",
+        "@react-aria/utils": "^3.27.0",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.23.0.tgz",
+      "integrity": "sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.7",
+        "@react-aria/utils": "^3.27.0",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.27.0.tgz",
+      "integrity": "sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.7",
+        "@react-stately/utils": "^3.10.5",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@react-router/dev": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@react-router/dev/-/dev-7.2.0.tgz",
@@ -2578,6 +2716,27 @@
         "react-router": "7.2.0"
       }
     },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
+      "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.27.0.tgz",
+      "integrity": "sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.8",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
@@ -3640,6 +3799,15 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.8.tgz",
@@ -3904,6 +4072,33 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.0.tgz",
+      "integrity": "sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.0.tgz",
+      "integrity": "sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/aws-lambda": {
       "version": "8.10.147",
       "resolved": "https://registry.npmjs.org/@types/aws-lambda/-/aws-lambda-8.10.147.tgz",
@@ -6892,6 +7087,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.8.tgz",
diff --git a/dashboard_js/package.json b/dashboard_js/package.json
index 24eb772..3b0dee7 100644
--- a/dashboard_js/package.json
+++ b/dashboard_js/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@brazilian-utils/brazilian-utils": "^1.0.0-rc.12",
+    "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^4.1.0",