diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 1488f1e4..d60eb3bd 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -1,15 +1,12 @@
 import { Link } from 'wouter'
 import { css } from '@/styled-system/css'
-import { flex } from '@/styled-system/patterns'
 import { Stack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
-import { LanguageSelector } from '@/i18n/LanguageSelector'
-import { A, Badge, Text } from '@/primitives'
-import { authUrl, logoutUrl, useUser } from '@/features/auth'
+import { Text } from '@/primitives'
+import { SettingsButton } from '@/features/settings'
 
 export const Header = () => {
   const { t } = useTranslation()
-  const { user, isLoggedIn } = useUser()
   return (
     <div
       className={css({
@@ -29,18 +26,7 @@ export const Header = () => {
           </Text>
         </header>
         <nav>
-          <Stack gap={1} direction="row" align="center">
-            <LanguageSelector />
-            {isLoggedIn === false && <A href={authUrl()}>{t('login')}</A>}
-            {!!user && (
-              <p className={flex({ gap: 1, align: 'center' })}>
-                <Badge>{user.email}</Badge>
-                <A href={logoutUrl()} size="sm">
-                  {t('logout')}
-                </A>
-              </p>
-            )}
-          </Stack>
+          <SettingsButton />
         </nav>
       </Stack>
     </div>