diff --git a/packages/components/src/icons/mapMarked/mod.tsx b/packages/components/src/icons/mapMarked/mod.tsx
index 38fcbae..bf2f1c7 100644
--- a/packages/components/src/icons/mapMarked/mod.tsx
+++ b/packages/components/src/icons/mapMarked/mod.tsx
@@ -8,6 +8,7 @@ import type { IconProps } from '../common.js'
 const MapMarked: FC<IconProps> = ({
   onClick,
   className,
+  cursor,
   size = 'medium',
   color = 'black',
   tabIndex = 0
@@ -29,6 +30,7 @@ const MapMarked: FC<IconProps> = ({
   return (
     <Icon
       color={color}
+      cursor={cursor}
       size={size}
       className={className}
       tabIndex={tabIndex}
diff --git a/packages/components/src/icons/signIn/mod.tsx b/packages/components/src/icons/signIn/mod.tsx
new file mode 100644
index 0000000..4f8f2b0
--- /dev/null
+++ b/packages/components/src/icons/signIn/mod.tsx
@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+
+import { Icon } from '../common.js'
+
+import type { FC, KeyboardEvent } from 'react'
+import type { IconProps } from '../common.js'
+
+const SignIn: FC<IconProps> = ({
+  onClick,
+  className,
+  cursor,
+  size = 'medium',
+  color = 'black',
+  tabIndex = 0
+}) => {
+  const handleOnClick = useCallback(() => {
+    if (typeof onClick === 'function') {
+      onClick()
+    }
+  }, [onClick])
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      if (evt.code === 'Enter') {
+        handleOnClick()
+      }
+    },
+    [handleOnClick]
+  )
+
+  return (
+    <Icon
+      color={color}
+      cursor={cursor}
+      size={size}
+      className={className}
+      tabIndex={tabIndex}
+      onClick={handleOnClick}
+      onKeyDown={onKeyDown}>
+      <svg viewBox="0 0 512 512">
+        <path d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z" />
+      </svg>
+    </Icon>
+  )
+}
+
+export { SignIn }
+export type { IconProps }
diff --git a/packages/components/src/icons/signIn/story.tsx b/packages/components/src/icons/signIn/story.tsx
new file mode 100644
index 0000000..4019ec6
--- /dev/null
+++ b/packages/components/src/icons/signIn/story.tsx
@@ -0,0 +1,31 @@
+import { SignIn } from './mod.js'
+
+import type { StoryFn } from '@storybook/react'
+
+const Primary: StoryFn<typeof SignIn> = args => {
+  return <SignIn {...args} />
+}
+
+export default {
+  title: 'Icons/SignIn',
+  component: SignIn,
+  args: {
+    outlined: false,
+    size: 'medium',
+    color: '#c1c1c1',
+    tabIndex: 0
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    },
+    color: {
+      control: 'color'
+    },
+    onClick: {
+      action: 'onClick'
+    }
+  }
+}
+export { Primary }
diff --git a/packages/components/src/icons/signOut/mod.tsx b/packages/components/src/icons/signOut/mod.tsx
new file mode 100644
index 0000000..7e08ac5
--- /dev/null
+++ b/packages/components/src/icons/signOut/mod.tsx
@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+
+import { Icon } from '../common.js'
+
+import type { FC, KeyboardEvent } from 'react'
+import type { IconProps } from '../common.js'
+
+const SignOut: FC<IconProps> = ({
+  onClick,
+  className,
+  cursor,
+  size = 'medium',
+  color = 'black',
+  tabIndex = 0
+}) => {
+  const handleOnClick = useCallback(() => {
+    if (typeof onClick === 'function') {
+      onClick()
+    }
+  }, [onClick])
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      if (evt.code === 'Enter') {
+        handleOnClick()
+      }
+    },
+    [handleOnClick]
+  )
+
+  return (
+    <Icon
+      color={color}
+      cursor={cursor}
+      size={size}
+      className={className}
+      tabIndex={tabIndex}
+      onClick={handleOnClick}
+      onKeyDown={onKeyDown}>
+      <svg viewBox="0 0 512 512">
+        <path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z" />
+      </svg>
+    </Icon>
+  )
+}
+
+export { SignOut }
+export type { IconProps }
diff --git a/packages/components/src/icons/signOut/story.tsx b/packages/components/src/icons/signOut/story.tsx
new file mode 100644
index 0000000..3f8afbd
--- /dev/null
+++ b/packages/components/src/icons/signOut/story.tsx
@@ -0,0 +1,31 @@
+import { SignOut } from './mod.js'
+
+import type { StoryFn } from '@storybook/react'
+
+const Primary: StoryFn<typeof SignOut> = args => {
+  return <SignOut {...args} />
+}
+
+export default {
+  title: 'Icons/SignOut',
+  component: SignOut,
+  args: {
+    outlined: false,
+    size: 'medium',
+    color: '#c1c1c1',
+    tabIndex: 0
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    },
+    color: {
+      control: 'color'
+    },
+    onClick: {
+      action: 'onClick'
+    }
+  }
+}
+export { Primary }
diff --git a/packages/ui/index.html b/packages/ui/index.html
index a2b1bf8..de3623c 100644
--- a/packages/ui/index.html
+++ b/packages/ui/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>BusMap</title>
+    <title>Busmap</title>
     <meta
       name="description"
       content="Real-time arrival predictions with route and vehicle locations for bus stops in San Francisco Muni CIS, Toronto Transit Commission, OmniTrans and more." />
@@ -28,6 +28,7 @@
       referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/src/global.css" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <script src="https://accounts.google.com/gsi/client" async></script>
   </head>
   <body>
     <main></main>
diff --git a/packages/ui/src/components/authnCallback.tsx b/packages/ui/src/components/authnCallback.tsx
new file mode 100644
index 0000000..e3f72b4
--- /dev/null
+++ b/packages/ui/src/components/authnCallback.tsx
@@ -0,0 +1,7 @@
+import type { FC } from 'react'
+
+const AuthnCallback: FC = () => {
+  return null
+}
+
+export { AuthnCallback }
diff --git a/packages/ui/src/components/navigation.tsx b/packages/ui/src/components/navigation.tsx
index 4e0fd46..236b773 100644
--- a/packages/ui/src/components/navigation.tsx
+++ b/packages/ui/src/components/navigation.tsx
@@ -6,9 +6,11 @@ import { Bus } from '@busmap/components/icons/bus'
 import { Cog } from '@busmap/components/icons/cog'
 import { InfoCircle } from '@busmap/components/icons/infoCircle'
 import { Exchange } from '@busmap/components/icons/exchange'
+import { SignIn } from '@busmap/components/icons/signIn'
 import {
   SO,
   SDB,
+  PB10T,
   PB70T,
   PB80T,
   PB30T,
@@ -35,11 +37,11 @@ const Nav = styled.nav<{ mode: Mode }>`
 
   ul {
     margin: 0;
-    padding: 12px 0 0;
+    padding: 6px 0 0;
     list-style: none;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
     width: 48px;
     height: 100%;
   }
@@ -65,19 +67,19 @@ const Nav = styled.nav<{ mode: Mode }>`
     }
 
     &.active {
-      color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
       svg {
-        color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+        color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
       }
     }
 
     &:hover {
       cursor: pointer;
-      color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
       svg {
-        color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+        color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
       }
     }
 
@@ -86,7 +88,7 @@ const Nav = styled.nav<{ mode: Mode }>`
       height: 16px;
     }
 
-    span:last-child {
+    span:nth-of-type(2) {
       display: none;
     }
   }
@@ -108,18 +110,56 @@ const Nav = styled.nav<{ mode: Mode }>`
     }
   }
 
-  li:last-child {
-    margin-top: auto;
+  li:nth-child(2) {
+    margin: 6px 0;
+    border: 1px solid ${({ mode }) => (mode === 'light' ? PB80T : PB50T)};
+    border-right: none;
+    border-left: none;
+    background: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
     button {
-      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+      padding: 3px 5px;
+      white-space: nowrap;
+      flex-direction: row;
+      justify-content: center;
+      color: ${({ mode }) => (mode === 'light' ? PB70T : PB40T)};
 
-      svg {
+      span {
+        width: auto;
+        height: auto;
+        font-weight: bold;
+
+        &:last-child {
+          width: 10px;
+          height: 10px;
+        }
+      }
+
+      &:hover {
+        svg {
+          color: ${({ mode }) => (mode === 'light' ? PB70T : PB40T)};
+        }
+      }
+    }
+
+    &.active {
+      width: calc(100% + 1px);
+      background: ${({ mode }) => (mode === 'light' ? '#fffc' : `${PB10T}cc`)};
+
+      button {
         color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+
+        svg {
+          color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+        }
       }
     }
   }
 
+  li:last-child {
+    margin-top: auto;
+  }
+
   @media (width >= 431px) and (height >= 536px) {
     ul {
       width: 78px;
@@ -131,7 +171,7 @@ const Nav = styled.nav<{ mode: Mode }>`
         height: 24px;
       }
 
-      span:last-child {
+      span:nth-of-type(2) {
         display: block;
       }
     }
@@ -161,25 +201,31 @@ const Navigation: FC = () => {
   return (
     <Nav mode={mode}>
       <ul>
-        <li>
-          <a href="/" title="BusMap" dangerouslySetInnerHTML={{ __html: logoSvg }} />
+        <li title="Busmap">
+          <a href="/" dangerouslySetInnerHTML={{ __html: logoSvg }} />
+        </li>
+        <li title="Sign In" className={page === 'signin' ? 'active' : undefined}>
+          <button data-name="signin" onClick={onClick}>
+            <span>Sign in</span>
+            <SignIn />
+          </button>
         </li>
-        <li title="Nearby Stops">
+        <li title="Nearby">
           <button
             data-name="locate"
             onClick={onClick}
             className={page === 'locate' ? 'active' : undefined}>
             <MapPin />
-            <span>Nearby Stops</span>
+            <span>Nearby</span>
           </button>
         </li>
-        <li title="Bus Selector">
+        <li title="Selector">
           <button
             data-name="select"
             onClick={onClick}
             className={page === 'select' ? 'active' : undefined}>
             <Bus />
-            <span>Bus Selector</span>
+            <span>Selector</span>
           </button>
         </li>
         <li title="Favorites">
@@ -210,7 +256,7 @@ const Navigation: FC = () => {
           </button>
         </li>
         <li>
-          <button onClick={onClickToggle}>
+          <button onClick={onClickToggle} className={!collapsed ? 'active' : undefined}>
             <Exchange />
             <span>{collapsed ? 'Open' : 'Close'}</span>
           </button>
diff --git a/packages/ui/src/components/page.tsx b/packages/ui/src/components/page.tsx
index 38a5ce0..2743642 100644
--- a/packages/ui/src/components/page.tsx
+++ b/packages/ui/src/components/page.tsx
@@ -17,6 +17,10 @@ const Section = styled.section`
     font-size: 22px;
     margin: 0;
   }
+
+  p {
+    margin: 0;
+  }
 `
 const Page: FC<PageProps> = ({ title, children, className }) => {
   return (
diff --git a/packages/ui/src/components/predictions.tsx b/packages/ui/src/components/predictions.tsx
index 1852a72..6fb4db0 100644
--- a/packages/ui/src/components/predictions.tsx
+++ b/packages/ui/src/components/predictions.tsx
@@ -1,4 +1,8 @@
 import styled from 'styled-components'
+import { useCallback } from 'react'
+import { latLng } from 'leaflet'
+import { Tooltip } from '@busmap/components/tooltip'
+import { MapMarked } from '@busmap/components/icons/mapMarked'
 import { PB50T, PB80T, PB70T } from '@busmap/components/colors'
 
 import { useTheme } from '@module/settings/contexts/theme.js'
@@ -8,6 +12,7 @@ import { UserLocator } from '@module/location/components/userLocator.js'
 
 import { VehicleLocator } from './vehicleLocator.js'
 
+import { useMap } from '../contexts/map.js'
 import { PredictedVehiclesColors, blinkStyles } from '../common.js'
 
 import type { FC } from 'react'
@@ -34,7 +39,7 @@ const Section = styled.section`
   header {
     display: flex;
     flex-direction: column;
-    gap: 3px;
+    gap: 4px;
     margin: 0 0 12px;
 
     h2 {
@@ -46,7 +51,9 @@ const Section = styled.section`
       margin: 0;
       font-size: 14px;
       font-weight: normal;
-      line-height: 1;
+      display: flex;
+      gap: 6px;
+      align-items: flex-start;
     }
   }
 `
@@ -206,9 +213,18 @@ const Predictions: FC<PredictionsProps> = ({
   timestamp,
   locateActive
 }) => {
+  const map = useMap()
   const { mode } = useTheme()
   const { format } = usePredictionsSettings()
   const { markPredictedVehicles } = useVehicleSettings()
+  const onClickIcon = useCallback(() => {
+    if (map && stop) {
+      const { lat, lon } = stop
+      const latLon = latLng(lat, lon)
+
+      map.setView(latLon, Math.max(map.getZoom(), 16))
+    }
+  }, [stop, map])
   const Format = format === 'minutes' ? Minutes : Time
 
   if (Array.isArray(preds) && stop && route) {
@@ -223,7 +239,12 @@ const Predictions: FC<PredictionsProps> = ({
         <Section>
           <header>
             <h2>Next {title}</h2>
-            <h3>{stop.title}</h3>
+            <h3>
+              <span>{stop.title}</span>
+              <Tooltip title="Locate selected stop.">
+                <MapMarked size="small" onClick={onClickIcon} />
+              </Tooltip>
+            </h3>
           </header>
           {locateActive && <UserLocator withDistance />}
           {messages.length > 0 && (
diff --git a/packages/ui/src/components/signIn.tsx b/packages/ui/src/components/signIn.tsx
new file mode 100644
index 0000000..0c06956
--- /dev/null
+++ b/packages/ui/src/components/signIn.tsx
@@ -0,0 +1,18 @@
+import { MAX_FAVORITES } from '@module/favorites/common.js'
+
+import { Page } from './page.js'
+
+import type { FC } from 'react'
+
+const SignIn: FC = () => {
+  return (
+    <Page title="Sign In">
+      <p>
+        Sign in to save your favorite stops and settings across devices. After signing in,
+        you can <strong>save more than {MAX_FAVORITES} favorite stops</strong>.
+      </p>
+    </Page>
+  )
+}
+
+export { SignIn }
diff --git a/packages/ui/src/home.tsx b/packages/ui/src/home.tsx
index 1c5120a..eb35a05 100644
--- a/packages/ui/src/home.tsx
+++ b/packages/ui/src/home.tsx
@@ -9,14 +9,15 @@ import { useGlobals } from './globals.js'
 import { usePredictions } from './contexts/predictions.js'
 import { useVehiclesDispatch } from './contexts/vehicles.js'
 import { useTheme } from './modules/settings/contexts/theme.js'
-import { BusSelector } from './components/busSelector.js'
-import { Loading } from './components/loading.js'
-import { ErrorAgencies } from './components/error/agencies.js'
 import { Location } from './modules/location/components/location.js'
 import { Settings } from './modules/settings/components/settings.js'
 import { Favorites } from './modules/favorites/components/favorites.js'
+import { SignIn } from './components/signIn.js'
+import { BusSelector } from './components/busSelector.js'
+import { Loading } from './components/loading.js'
 import { Info } from './components/info.js'
 import { Predictions } from './components/predictions.js'
+import { ErrorAgencies } from './components/error/agencies.js'
 import { getAll as getAllAgencies } from './api/rb/agency.js'
 import { getAll as getAllVehicles } from './api/rb/vehicles.js'
 import { getForStop } from './api/rb/predictions.js'
@@ -145,12 +146,16 @@ const Home: FC = () => {
             color={tabsColor}
             background={tabsBackground}>
             <TabList>
+              <Tab name="signin">Sign In</Tab>
               <Tab name="locate">📍</Tab>
               <Tab name="select">🚌</Tab>
               <Tab name="favorites">⭐</Tab>
               <Tab name="settings">⚙️</Tab>
               <Tab name="info">ℹ️</Tab>
             </TabList>
+            <TabPanel name="signin">
+              <SignIn />
+            </TabPanel>
             <TabPanel name="locate">
               <Location active={page === 'locate'} />
             </TabPanel>
diff --git a/packages/ui/src/modules/favorites/common.ts b/packages/ui/src/modules/favorites/common.ts
index 5db510c..d4be5cb 100644
--- a/packages/ui/src/modules/favorites/common.ts
+++ b/packages/ui/src/modules/favorites/common.ts
@@ -1 +1 @@
-export const MAX_FAVORITES = 5
+export const MAX_FAVORITES = 3
diff --git a/packages/ui/src/modules/favorites/components/favorites.tsx b/packages/ui/src/modules/favorites/components/favorites.tsx
index 54988fc..b8ee295 100644
--- a/packages/ui/src/modules/favorites/components/favorites.tsx
+++ b/packages/ui/src/modules/favorites/components/favorites.tsx
@@ -130,8 +130,8 @@ const Favorites = memo(function Favorites() {
         <Empty>
           <span>⭐⭐⭐</span>
           <p>
-            You can select up to {MAX_FAVORITES} favorite stops from the bus selector tab.
-            Their arrival or departure prediction times will be displayed here.
+            You can select up to {MAX_FAVORITES} favorite stops from the Selector tab.
+            Their predicted arrival or departure times will be displayed here.
           </p>
           <span>⭐⭐⭐</span>
         </Empty>
@@ -142,8 +142,8 @@ const Favorites = memo(function Favorites() {
               <summary>Maximum favorites reached.</summary>
               <p>
                 You have reached your maximum of {MAX_FAVORITES} favorite stops. To select
-                another favorite stop you can remove a current favorite, or create an
-                account to increase your maximum limit.
+                another favorite stop you can remove a current favorite, or sign in to
+                increase your maximum limit.
               </p>
             </Details>
           )}
diff --git a/packages/ui/src/router.tsx b/packages/ui/src/router.tsx
index 6901699..398cd8a 100644
--- a/packages/ui/src/router.tsx
+++ b/packages/ui/src/router.tsx
@@ -3,6 +3,7 @@ import { createBrowserRouter, useRouteError } from 'react-router-dom'
 import { Root } from './root.js'
 import { Home } from './home.js'
 import { Providers } from './providers.js'
+import { AuthnCallback } from './components/authnCallback.js'
 import { ErrorBoundary } from './components/error/boundary.js'
 import { NotFound } from './components/error/notFound.js'
 
@@ -38,6 +39,11 @@ const router = createBrowserRouter([
             element: <Home />
           }
         ]
+      },
+      {
+        id: 'authn',
+        path: '/authn-callback',
+        element: <AuthnCallback />
       }
     ]
   },
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 15b969e..4fe5242 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -103,7 +103,7 @@ interface Selection {
 }
 
 // Busmap types
-type Page = 'locate' | 'favorites' | 'select' | 'settings' | 'info'
+type Page = 'locate' | 'favorites' | 'select' | 'settings' | 'info' | 'signin'
 interface BoundsChanged {
   type: 'bounds'
   value: Bounds