diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 338aba67..09b65e38 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 import { flex } from '@/styled-system/patterns'
 import { apiUrl } from '@/api/apiUrl'
 import { A, Badge, Text } from '@/primitives'
-import { useUser } from '@/features/auth/api/useUser'
+import { authUrl, useUser } from '@/features/auth'
 
 export const Header = () => {
   const { user, isLoggedIn } = useUser()
@@ -31,7 +31,7 @@ export const Header = () => {
           </Text>
         </div>
         <div>
-          {isLoggedIn === false && <A href={apiUrl('/authenticate')}>Login</A>}
+          {isLoggedIn === false && <A href={authUrl()}>Login</A>}
           {!!user && (
             <p className={flex({ gap: 1, align: 'center' })}>
               <Badge>{user.email}</Badge>
diff --git a/src/frontend/src/routes/Home.tsx b/src/frontend/src/routes/Home.tsx
index 4118235a..da1a35ca 100644
--- a/src/frontend/src/routes/Home.tsx
+++ b/src/frontend/src/routes/Home.tsx
@@ -1,6 +1,5 @@
 import { A, Button, Italic, P, Div, H, Box } from '@/primitives'
-import { useUser } from '@/features/auth'
-import { apiUrl } from '@/api/apiUrl'
+import { authUrl, useUser } from '@/features/auth'
 import { navigateToNewRoom } from '@/features/rooms'
 import { Screen } from '@/layout/Screen'
 
@@ -19,7 +18,7 @@ export const Home = () => {
               </Button>
             ) : (
               <p>
-                <A href={apiUrl('/authenticate')}>
+                <A href={authUrl()}>
                   Login to create a conference call
                 </A>
               </p>