diff --git a/apiClient/client.ts b/apiClient/client.ts
index 2bbeb75a..a826b4c6 100644
--- a/apiClient/client.ts
+++ b/apiClient/client.ts
@@ -12,6 +12,11 @@ import {
   LoginEvent,
 } from './types'
 import { LocalError } from './errors'
+import {
+  UNABLE_TO_LOGIN,
+  ENDPOINT_UNAVAILABLE,
+  NOT_ISOMORPHIC,
+} from 'constants/errors'
 
 // Environment variables set in Vercel config.
 const SERVER_API_URL = process.env.API_URL
@@ -142,7 +147,7 @@ export async function getMetricsConfig(): Promise<
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export async function login(email: string): Promise<any> {
   if (typeof window === 'undefined' || !magic) {
-    return new LocalError('Only runnable in the browser', 500)
+    return new LocalError('Only runnable in the browser', NOT_ISOMORPHIC)
   }
   try {
     await magic.auth.loginWithMagicLink({
@@ -161,7 +166,7 @@ export async function login(email: string): Promise<any> {
       return { statusCode: 200, loaded: true }
     }
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, UNABLE_TO_LOGIN)
   }
 }
 
@@ -177,13 +182,13 @@ export async function getUserDetails(
     })
     return data.json()
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, ENDPOINT_UNAVAILABLE)
   }
 }
 
 export async function tokenLogin(): Promise<LoginEvent | LocalError> {
   if (typeof window === 'undefined' || !magic) {
-    return new LocalError('Only runnable in the browser', 500)
+    return new LocalError('Only runnable in the browser', NOT_ISOMORPHIC)
   }
   try {
     const token = await magic.auth.loginWithCredential()
@@ -195,6 +200,6 @@ export async function tokenLogin(): Promise<LoginEvent | LocalError> {
     })
     return res.json()
   } catch (e) {
-    return new LocalError(e.message, 500)
+    return new LocalError(e.message, ENDPOINT_UNAVAILABLE)
   }
 }
diff --git a/components/FooterCTA/index.tsx b/components/FooterCTA/index.tsx
index 3e1edae0..e54d72b8 100644
--- a/components/FooterCTA/index.tsx
+++ b/components/FooterCTA/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import Router from 'next/router'
+import Link from 'next/link'
 import Intertubes from 'components/About/ImageIntertubes'
 import { RawButton } from 'components/Button'
 
@@ -21,23 +21,24 @@ export function TubesCTA({ cta, goTo, buttonText }: TubesCTAProps) {
           <br />
           {cta}
         </h3>
-        <RawButton
-          onClick={() => Router.push(goTo)}
-          className={clsx(
-            'm-auto',
-            'mt-8',
-            'mb-16',
-            'max-w-[240px]',
-            'text-lg',
-            'px-4',
-            'py-3',
-            'md:text-xl',
-            'md:py-5',
-            'md:px-4'
-          )}
-        >
-          {buttonText}
-        </RawButton>
+        <Link passHref href={goTo}>
+          <RawButton
+            className={clsx(
+              'm-auto',
+              'mt-8',
+              'mb-16',
+              'max-w-[240px]',
+              'text-lg',
+              'px-4',
+              'py-3',
+              'md:text-xl',
+              'md:py-5',
+              'md:px-4'
+            )}
+          >
+            {buttonText}
+          </RawButton>
+        </Link>
       </div>
     </>
   )
diff --git a/components/Navbar/Flyout.tsx b/components/Navbar/Flyout.tsx
index 210216d6..b63c17f5 100644
--- a/components/Navbar/Flyout.tsx
+++ b/components/Navbar/Flyout.tsx
@@ -1,5 +1,6 @@
 import Logo from 'components/Logo'
 import Close from 'components/icons/Close'
+import { LoginContext } from 'hooks/useLogin'
 import NavbarLinks from './Links'
 
 export type NavbarFlyoutProps = {
@@ -9,6 +10,7 @@ export type NavbarFlyoutProps = {
   testnetClicked: () => unknown
   companyVisible: boolean
   testnetVisible: boolean
+  loginContext: LoginContext
 }
 
 export function NavbarFlyout({
@@ -18,12 +20,14 @@ export function NavbarFlyout({
   testnetClicked,
   companyVisible,
   testnetVisible,
+  loginContext,
 }: NavbarFlyoutProps) {
   const navbarLinksProps = {
     companyClicked,
     testnetClicked,
     companyVisible,
     testnetVisible,
+    loginContext,
   }
   return (
     <div
diff --git a/components/Navbar/Links.tsx b/components/Navbar/Links.tsx
index 3fd07130..234874e0 100644
--- a/components/Navbar/Links.tsx
+++ b/components/Navbar/Links.tsx
@@ -1,6 +1,8 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
+import { LoginContext } from 'hooks/useLogin'
+
 import SubnavButton from './SubnavButton'
 import LoginButton from './LoginButton'
 import Company from './Company'
@@ -16,6 +18,7 @@ type NavbarLinksProps = {
   testnetClicked?: () => unknown
   testnetHovered?: () => unknown
   testnetVisible?: boolean
+  loginContext: LoginContext
 }
 
 export function NavbarLinks({
@@ -28,6 +31,7 @@ export function NavbarLinks({
   testnetClicked,
   testnetHovered,
   testnetVisible = false,
+  loginContext,
 }: NavbarLinksProps) {
   const itemPadding = [`px-2`, `lg:px-3.5`, `3xl:px-5`]
   const cc = clsx([className, ...itemPadding])
@@ -60,7 +64,7 @@ export function NavbarLinks({
       >
         {testnetVisible && <Testnet condensed={condensed} />}
       </SubnavButton>
-      <LoginButton />
+      <LoginButton loginContext={loginContext} />
     </>
   )
 }
diff --git a/components/Navbar/LoginButton.tsx b/components/Navbar/LoginButton.tsx
index f38a150f..bf61300b 100644
--- a/components/Navbar/LoginButton.tsx
+++ b/components/Navbar/LoginButton.tsx
@@ -1,7 +1,7 @@
 import { useState, ReactNode, MouseEventHandler } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
-import { LoginContext } from 'contexts/LoginContext'
+import { LoginContext } from 'hooks/useLogin'
 
 import ChevronDown from './ChevronDown'
 import { ApiUserMetadata } from 'apiClient/types'
@@ -142,52 +142,49 @@ const UserButton = ({ id, graffiti, visible }: ApiUserMetadataUI) => (
     </Link>
   </div>
 )
-export const LoginButton = () => {
+type LoginProps = {
+  loginContext: LoginContext
+}
+export const LoginButton = ({ loginContext }: LoginProps) => {
   const [$visible, $setVisible] = useState<boolean>(false)
   const set = (x: boolean) => () => $setVisible(x)
   const on = set(true)
   const off = set(false)
+  const { checkLoggedIn, metadata } = loginContext
+  const isLoggedIn = checkLoggedIn()
+  // eslint-disable-next-line
+  const meta = metadata as any
   return (
-    <LoginContext.Consumer>
-      {({ checkLoggedIn, metadata }) => {
-        const isLoggedIn = checkLoggedIn()
-        // eslint-disable-next-line
-        const meta = metadata as any
-        const hasGraffiti = metadata && !!metadata.graffiti
-        return (
-          <HoverButton
-            className={clsx(
-              'bg-transparent',
-              'h-16',
-              'hover:bg-black',
-              'hover:text-white',
-              'px-6',
-              'py-3',
-              'relative',
-              'text-2xl',
-              'text-black',
-              'text-center',
-              'md:min-w-[8rem]',
-              'md:h-12',
-              'md:ml-4',
-              'md:px-3',
-              'md:text-sm',
-              'lg:min-w-[10rem]',
-              'lg:px-6',
-              'lg:text-base'
-            )}
-            onMouseOver={on}
-            onMouseOut={off}
-          >
-            {isLoggedIn && hasGraffiti ? (
-              <UserButton {...meta} visible={$visible} />
-            ) : (
-              <StaticButton href="/login" />
-            )}
-          </HoverButton>
-        )
-      }}
-    </LoginContext.Consumer>
+    <HoverButton
+      className={clsx(
+        'bg-transparent',
+        'h-16',
+        'hover:bg-black',
+        'hover:text-white',
+        'px-6',
+        'py-3',
+        'relative',
+        'text-2xl',
+        'text-black',
+        'text-center',
+        'md:min-w-[8rem]',
+        'md:h-12',
+        'md:ml-4',
+        'md:px-3',
+        'md:text-sm',
+        'lg:min-w-[10rem]',
+        'lg:px-6',
+        'lg:text-base'
+      )}
+      onMouseOver={on}
+      onMouseOut={off}
+    >
+      {isLoggedIn ? (
+        <UserButton {...meta} visible={$visible} />
+      ) : (
+        <StaticButton href="/login" />
+      )}
+    </HoverButton>
   )
 }
 export default LoginButton
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
index b05cc8f5..128abe5a 100644
--- a/components/Navbar/index.tsx
+++ b/components/Navbar/index.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import Logo from 'components/Logo'
 import Menu from 'components/icons/Menu'
 import { useNav, NavState } from 'hooks/useNav'
+import { LoginContext } from 'hooks/useLogin'
 
 import NavbarLinks from './Links'
 import NavbarFlyout from './Flyout'
@@ -13,11 +14,13 @@ import Link from 'next/link'
 type NavbarProps = {
   className?: string
   fill?: string
+  loginContext: LoginContext
 }
 
 function Navbar({
   fill = 'white',
   className = 'bg-black text-white',
+  loginContext,
 }: NavbarProps) {
   const {
     $flyoutVisible,
@@ -40,6 +43,7 @@ function Navbar({
     testnetClicked: toggleNavTestnet,
     testnetHovered: enterNavTestnet,
     testnetVisible,
+    loginContext,
   }
   return (
     <nav
diff --git a/components/ResponsiveToolkit/index.tsx b/components/ResponsiveToolkit/index.tsx
index baca487f..0e5650d8 100644
--- a/components/ResponsiveToolkit/index.tsx
+++ b/components/ResponsiveToolkit/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
+import { ApiUserMetadata } from 'apiClient/types'
 import clsx from 'clsx'
 import useQuery from 'hooks/useQuery'
-import { useLogin } from 'hooks/useLogin'
 import styles from './ResponsiveToolkit.module.css'
 import pkg from 'package.json'
 
@@ -45,15 +45,14 @@ const points = [
   '90%',
 ]
 
-type ResponsiveToolkitProps = {
-  userDetails: ReturnType<typeof useLogin>
+type ToolkitProps = {
+  metadata: ApiUserMetadata | null
 }
 
-const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
+const ResponsiveToolkit = ({ metadata }: ToolkitProps) => {
   const [$active, $setActive] = useState(true)
   const [$width, $setWidth] = useState(-1)
   const [$point, $setPoint] = useState(0)
-  const [$graffiti, $setGraffiti] = useState('👻')
   const toggle = () => $setActive(!$active)
   const $toolkit = useQuery('debug')
   const $customPoint = useQuery('point')
@@ -66,8 +65,6 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
     const update = () => {
       $setWidth(window.innerWidth)
       const newPoints = activePoints()
-      // eslint-disable-next-line no-console
-      console.log({ points: newPoints, $customPoint })
       $setPoint(newPoints)
     }
     if ($toolkit) {
@@ -81,16 +78,6 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
   const horizontal = pointsPlus.filter(z => !z.startsWith('v'))
   const vertical = pointsPlus.filter(z => z.startsWith('v'))
 
-  useEffect(() => {
-    if (userDetails && userDetails.metadata) {
-      // eslint-disable-next-line
-      const given = userDetails!.metadata.graffiti
-      if ($graffiti !== given) {
-        $setGraffiti(given)
-      }
-    }
-  }, [userDetails, $graffiti])
-
   return $toolkit ? (
     <>
       <div className={styles.toolkit} onClick={toggle}>
@@ -99,7 +86,7 @@ const ResponsiveToolkit = ({ userDetails }: ResponsiveToolkitProps) => {
       <div className={styles.debugMode}>
         {pkg.name}@{pkg.version}
       </div>
-      <div className={styles.contextual}>{$graffiti}</div>
+      <div className={styles.contextual}>{metadata?.graffiti || '👻'}</div>
       {$active && horizontal.map(x => <Breakpoint key={x} at={x} />)}
       {$active &&
         vertical.map(x => <Breakpoint key={x} at={x} horizontal={false} />)}
diff --git a/constants/errors.ts b/constants/errors.ts
new file mode 100644
index 00000000..019457ec
--- /dev/null
+++ b/constants/errors.ts
@@ -0,0 +1,18 @@
+export const NO_MAGIC_INSTANCE = 1000
+export const NO_MAGIC_TOKEN = 1001
+export const NO_MAGIC_USER = 1002
+
+export const NOT_ISOMORPHIC = 2000
+
+export const UNABLE_TO_LOGIN = 3000
+
+export const ENDPOINT_UNAVAILABLE = 4000
+
+export const ERRORS = {
+  NO_MAGIC_INSTANCE,
+  NO_MAGIC_TOKEN,
+  NO_MAGIC_USER,
+  NOT_ISOMORPHIC,
+  UNABLE_TO_LOGIN,
+  ENDPOINT_UNAVAILABLE,
+}
diff --git a/contexts/LoginContext.tsx b/contexts/LoginContext.tsx
deleted file mode 100644
index e143e216..00000000
--- a/contexts/LoginContext.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import useLogin, { STATUS } from 'hooks/useLogin'
-
-/* exemplary example data
-const example = {
-  metadata: {
-    id: 111,
-    created_at: '2021-11-30T23:28:59.505Z',
-    updated_at: '2021-11-30T23:43:28.555Z',
-    email: 'werewolf@ironfish.network',
-    graffiti: 'werewolf',
-    total_points: 0,
-    country_code: 'USA',
-    email_notifications: false,
-    last_login_at: null,
-    discord: 'werew0lf',
-    telegram: null,
-    confirmation_token: '01FNSJW13ESM3PNKQXWRYM24CH',
-    confirmed_at: '2021-11-30T23:43:28.554Z',
-    github: null,
-  },
-  magicMetadata: {
-    issuer: 'did:ethr:0x092309283409b092109182920910910928309109',
-    publicAddress: '0x6a84e014F0bh2903B020293a0293010101020202',
-    email: 'werewolf@ironfish.network',
-    isMfaEnabled: false,
-    phoneNumber: null,
-  },
-  }
-*/
-
-export const LoginContext = React.createContext<ReturnType<typeof useLogin>>({
-  checkLoggedIn: () => false,
-  isLoading: () => false,
-  isFailed: () => false,
-  error: null,
-  magicMetadata: null,
-  metadata: null,
-  status: STATUS.LOADING,
-  setStatus: () => false,
-})
diff --git a/hooks/useLogin.ts b/hooks/useLogin.ts
index 93fc2fd6..1749c537 100644
--- a/hooks/useLogin.ts
+++ b/hooks/useLogin.ts
@@ -1,8 +1,13 @@
 import { useState, useEffect } from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import { magic, MagicUserMetadata } from 'utils/magic'
 import { ApiUserMetadata, ApiError, LocalError } from 'apiClient'
 import { getUserDetails } from 'apiClient/client'
+import {
+  // NO_MAGIC_INSTANCE,
+  NO_MAGIC_USER,
+  NO_MAGIC_TOKEN,
+} from 'constants/errors'
 // import { encode as btoa } from 'base-64'
 
 export enum STATUS {
@@ -10,6 +15,7 @@ export enum STATUS {
   FAILED = 'failed',
   NOT_FOUND = 'not_found',
   LOADED = 'loaded',
+  LOGGED_OUT = 'logged_out',
   FORCED = 'forced',
 }
 
@@ -18,27 +24,30 @@ export enum STATUS {
 // {issuer, publicAddress, email}
 // https://github.com/magiclabs/magic-js/blob/master/packages/%40magic-sdk/types/src/modules/user-types.ts#L17-L21
 
-// const $metadata = useLogin('/go-somewhere-if-it-does-not-work')
+// const $metadata = useLogin({redirect: '/go-somewhere-if-it-does-not-work'})
 
 export interface LoginProps {
   redirect?: string
-  timeout?: number
 }
+
 export function useLogin(config: LoginProps = {}) {
-  const { redirect, timeout = -1 } = config
+  const $router = useRouter()
+  const { redirect } = config
   const [$status, $setStatus] = useState<STATUS>(STATUS.LOADING)
   const [$error, $setError] = useState<ApiError | LocalError | null>(null)
   const [$magicMetadata, $setMagicMetadata] =
     useState<MagicUserMetadata | null>(null)
   const [$metadata, $setMetadata] = useState<ApiUserMetadata | null>(null)
+
   useEffect(() => {
     const checkLoggedIn = async () => {
       try {
-        // this is likely a case where we're working in not-the-browser
-        if ($metadata || !magic || !magic.user) {
-          Promise.reject(new LocalError('Magic instance not available!', 500))
+        // if we're already loaded, quit
+        if ($status === STATUS.LOADED) return
+        if (!magic || !magic.user || !magic.user.logout) {
           return
         }
+
         let token
         try {
           token = await magic.user.getIdToken()
@@ -47,12 +56,13 @@ export function useLogin(config: LoginProps = {}) {
         if (!token) {
           if (redirect && typeof redirect === 'string') {
             // if redirect string is provided and we're not logged in, cya!
-            Router.push(redirect)
+            // if this is kept as a static Router.push, it _does not_ work
+            $router.push(redirect)
             return
           }
           // this is a visible error but not a breaking error
           $setStatus(STATUS.NOT_FOUND)
-          $setError(new LocalError('No token available.', 500))
+          $setError(new LocalError('No token available.', NO_MAGIC_TOKEN))
           return
         }
         const [magicMd, details] = await Promise.all([
@@ -69,7 +79,7 @@ export function useLogin(config: LoginProps = {}) {
         }
         if (details.statusCode && details.statusCode === 401) {
           $setStatus(STATUS.NOT_FOUND)
-          $setError(new LocalError('No user found.', 500))
+          $setError(new LocalError('No user found.', NO_MAGIC_USER))
           return
         }
         $setStatus(STATUS.LOADED)
@@ -94,7 +104,8 @@ export function useLogin(config: LoginProps = {}) {
         console.warn('general error!', e)
       }
     }
-  }, [$metadata, $setMetadata, redirect, $status])
+  }, [$metadata, $setMetadata, redirect, $status, $router])
+  /*
   useEffect(() => {
     const forceStatus = () => {
       if ($status === STATUS.LOADING) {
@@ -106,12 +117,14 @@ export function useLogin(config: LoginProps = {}) {
       return () => clearTimeout(tId)
     }
   }, [$status, $setStatus, timeout])
+  */
 
   const statusRelevantContext = (x: STATUS) => () => $status === x
   const loginContext = {
     checkLoggedIn: statusRelevantContext(STATUS.LOADED),
-    isLoading: statusRelevantContext(STATUS.LOADING),
-    isFailed: statusRelevantContext(STATUS.FAILED),
+    checkLoading: statusRelevantContext(STATUS.LOADING),
+    checkFailed: statusRelevantContext(STATUS.FAILED),
+    setError: $setError,
     error: $error,
     magicMetadata: $magicMetadata,
     metadata: $metadata,
@@ -121,4 +134,6 @@ export function useLogin(config: LoginProps = {}) {
   return loginContext
 }
 
+export type LoginContext = ReturnType<typeof useLogin>
+
 export default useLogin
diff --git a/hooks/useProtectedRoute.ts b/hooks/useProtectedRoute.ts
index 70bd69fd..7613d9c3 100644
--- a/hooks/useProtectedRoute.ts
+++ b/hooks/useProtectedRoute.ts
@@ -1,36 +1,34 @@
 import { useEffect } from 'react'
-import Router from 'next/router'
-import { useLogin, LoginProps } from './useLogin'
+import { useRouter } from 'next/router'
+import { LoginContext } from './useLogin'
 export { STATUS } from './useLogin'
 
-interface ProtectedProps extends LoginProps {
+interface ProtectedProps {
   ifLoggedIn?: string
   ifLoggedOut?: string
+  loginContext: LoginContext
 }
 
 export function useProtectedRoute({
   ifLoggedIn,
   ifLoggedOut,
-  redirect = '',
-  timeout = -1,
+  loginContext,
 }: ProtectedProps) {
-  const { checkLoggedIn, status, metadata, magicMetadata } = useLogin({
-    redirect,
-    timeout,
-  })
+  const $router = useRouter()
+  const { checkLoggedIn } = loginContext
   useEffect(() => {
     const check = () => {
       const loggedIn = checkLoggedIn()
       if (loggedIn && ifLoggedIn) {
-        Router.push(ifLoggedIn)
+        $router.push(ifLoggedIn)
       }
       if (!loggedIn && ifLoggedOut) {
-        Router.push(ifLoggedOut)
+        $router.push(ifLoggedOut)
       }
     }
     check()
-  }, [checkLoggedIn, ifLoggedIn, ifLoggedOut])
-  return { status, metadata, magicMetadata }
+  }, [$router, checkLoggedIn, ifLoggedIn, ifLoggedOut])
+  return loginContext
 }
 
 export default useProtectedRoute
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 70e270ca..703916c3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,12 +1,12 @@
 import 'styles/globals.css'
 import Head from 'next/head'
 import type { AppProps } from 'next/app'
-import { LoginContext } from 'contexts/LoginContext'
-import useLogin from 'hooks/useLogin'
 import ResponsiveToolkit from 'components/ResponsiveToolkit'
+import { useLogin } from 'hooks/useLogin'
 
-function MyApp({ Component, pageProps }: AppProps) {
-  const $loginValue = useLogin({ timeout: 1500 })
+function MyApp({ Component: Page, pageProps }: AppProps) {
+  const $login = useLogin()
+  const { metadata } = $login
   return (
     <>
       <Head>
@@ -18,10 +18,8 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta property="twitter:image" content="/preview_image.png" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <ResponsiveToolkit userDetails={$loginValue} />
-      <LoginContext.Provider value={$loginValue}>
-        <Component {...pageProps} className="font-favorit" />
-      </LoginContext.Provider>
+      <ResponsiveToolkit metadata={metadata} />
+      <Page loginContext={$login} {...pageProps} className="font-favorit" />
     </>
   )
 }
diff --git a/pages/about.tsx b/pages/about.tsx
index c0063e4f..b231662c 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -5,8 +5,7 @@ import clsx from 'clsx'
 
 import leaderboardPic from 'public/leaderboard.png'
 
-import { LoginContext } from 'contexts/LoginContext'
-import { STATUS } from 'hooks/useLogin'
+import { LoginContext } from 'hooks/useLogin'
 import TubesCTA from 'components/FooterCTA'
 import PageBanner from 'components/PageBanner'
 import Footer from 'components/Footer'
@@ -63,153 +62,147 @@ const ArrowButton = ({ children, onClick }: ArrowButtonProps) => (
     {children}
   </div>
 )
+type AboutProps = {
+  loginContext: LoginContext
+}
 
-export default function About() {
+export default function About({ loginContext }: AboutProps) {
   const { scrollLeft, scrollRight, $cards } = useResponsiveCards()
-  return (
-    <LoginContext.Consumer>
-      {({ status }) =>
-        status === STATUS.LOADING ? (
-          <Loader />
-        ) : (
-          <div className="min-h-screen flex flex-col font-favorit">
-            <Head>
-              <title>About</title>
-              <meta name="description" content="About" />
-            </Head>
-            <Navbar fill="black" className="bg-iflightorange text-black" />
-            <main className="bg-iflightorange flex-1 items-center flex flex-col">
-              <div className="w-full md:w-2/3 m-auto">
-                <PageBanner
-                  title="About the Incentivized Testnet"
-                  text="Sign up for the Iron Fish incentivized testnet to help make Iron Fish great 💖. Participate to earn testnet points (see Testnet Guidelines below for more details)."
-                  buttonText={status !== STATUS.LOADED ? 'Sign Up' : ''}
-                  buttonClassName={clsx(
-                    'm-auto',
-                    'mb-32',
-                    'w-full',
-                    'max-w-[240px]',
-                    'text-lg',
-                    'p-3',
-                    'md:text-xl',
-                    'md:py-5',
-                    'md:px-4'
-                  )}
-                  buttonLink={status !== STATUS.LOADED ? '/signup' : ''}
-                />
-              </div>
-              <div
-                className={clsx('mx-3', 'px-3', 'w-full', 'lg:w-2/3', 'mb-6')}
-              >
-                <AboutHeader className="md:w-1/2">
-                  Participation Categories
-                </AboutHeader>
-                <div className="flex flex-col md:flex-row mb-16">
-                  <div
-                    className={clsx(
-                      'flex',
-                      'flex-col',
-                      'w-full',
-                      'md:w-1/2',
-                      'md:mr-2',
-                      'md:ml-4',
-                      'lg:ml-0'
-                    )}
-                  >
-                    {callsToAction.columnOne.map(renderColumn)}
-                    <div className="text-center hidden md:flex mx-auto">
-                      <BasicLink href="#guidelines">
-                        View Testnet Guidelines
-                      </BasicLink>
-                    </div>
-                  </div>
-                  <div
-                    className={clsx(
-                      'flex',
-                      'flex-col',
-                      'w-full',
-                      'md:w-1/2',
-                      'md:ml-1',
-                      'md:-mt-32',
-                      'md:mr-4',
-                      'lg:mr-0'
-                    )}
-                  >
-                    {callsToAction.columnTwo.map(renderColumn)}
-                  </div>
-                  <div className="text-center flex md:hidden mx-auto">
-                    <BasicLink href="#guidelines">
-                      View Testnet Guidelines
-                    </BasicLink>
-                  </div>
-                </div>
-                <div className="hidden md:block">
-                  <AboutHeader className="md:w-1/2 mt-24">
-                    The Leaderboard
-                  </AboutHeader>
-                  <Para>
-                    Earning points places you on the Leaderboard. See how you
-                    progress each week in comparison to others.
-                  </Para>
-                  <div className="mt-8 mb-4 block text-2xl">
-                    <BasicLink href="/leaderboard">
-                      Show me the leaderboard
-                    </BasicLink>
-                  </div>
-                  <div className="flex md:ml-24">
-                    <Img src={leaderboardPic} />
-                  </div>
-                </div>
-                <AboutHeader className="text-center w-full mt-32">
-                  Win a Category, win an NFT!
-                </AboutHeader>
-                <Para className="text-left md:text-center m-auto">
-                  At the end of the testnet if you’re the leader in any of the
-                  categories mentioned above you might be eligible to receive an
-                  Iron Fish NFT. Filter the leaderboard to see category leaders.
-                </Para>
-              </div>
-              <div
-                className="flex flex-row w-full overflow-x-auto"
-                ref={$cards}
-              >
-                {cards.map(nft => (
-                  <NFTCard key={nft.title} {...nft} />
-                ))}
-              </div>
-              <div className="m-auto flex">
-                <ArrowButton onClick={scrollLeft}>
-                  <ArrowLeft />
-                </ArrowButton>
-                <ArrowButton onClick={scrollRight}>
-                  <ArrowRight />
-                </ArrowButton>
+  const { checkLoggedIn, checkLoading } = loginContext
+  const loaded = checkLoggedIn()
+  return checkLoading() ? (
+    <Loader />
+  ) : (
+    <div className="min-h-screen flex flex-col font-favorit">
+      <Head>
+        <title>About</title>
+        <meta name="description" content="About" />
+      </Head>
+      <Navbar
+        fill="black"
+        className="bg-iflightorange text-black"
+        loginContext={loginContext}
+      />
+      <main className="bg-iflightorange flex-1 items-center flex flex-col">
+        <div className="w-full md:w-2/3 m-auto">
+          <PageBanner
+            title="About the Incentivized Testnet"
+            text="Sign up for the Iron Fish incentivized testnet to help make Iron Fish great 💖. Participate to earn testnet points (see Testnet Guidelines below for more details)."
+            buttonText={!loaded ? 'Sign Up' : ''}
+            buttonClassName={clsx(
+              'm-auto',
+              'mb-32',
+              'w-full',
+              'max-w-[240px]',
+              'text-lg',
+              'p-3',
+              'md:text-xl',
+              'md:py-5',
+              'md:px-4'
+            )}
+            buttonLink={!loaded ? '/signup' : ''}
+          />
+        </div>
+        <div className={clsx('mx-3', 'px-3', 'w-full', 'lg:w-2/3', 'mb-6')}>
+          <AboutHeader className="md:w-1/2">
+            Participation Categories
+          </AboutHeader>
+          <div className="flex flex-col md:flex-row mb-16">
+            <div
+              className={clsx(
+                'flex',
+                'flex-col',
+                'w-full',
+                'md:w-1/2',
+                'md:mr-2',
+                'md:ml-4',
+                'lg:ml-0'
+              )}
+            >
+              {callsToAction.columnOne.map(renderColumn)}
+              <div className="text-center hidden md:flex mx-auto">
+                <BasicLink href="#guidelines">
+                  View Testnet Guidelines
+                </BasicLink>
               </div>
-              <TubesCTA
-                cta="Start earning points!"
-                buttonText="Get Incentivized"
-                goTo="/signup"
-              />
-              <div id="guidelines" className="mt-24 mx-3 lg:w-2/3">
-                <AboutHeader className="text-left text-4xl w-1/2">
-                  Testnet Guidelines
-                </AboutHeader>
-                <div className="flex flex-col md:flex-row mt-6">
-                  <div className="flex flex-col w-full md:w-1/2 md:mr-2">
-                    {guidelines.columnOne.map(renderGuidelineColumn)}
-                  </div>
-                  <div className="flex flex-col w-full md:w-1/2 md:ml-1 md:-mt-32">
-                    {guidelines.columnTwo.map(renderGuidelineColumn)}
-                  </div>
-                </div>
-              </div>
-              <KeepReading />
-              <div className="mb-24"></div>
-            </main>
-            <Footer />
+            </div>
+            <div
+              className={clsx(
+                'flex',
+                'flex-col',
+                'w-full',
+                'md:w-1/2',
+                'md:ml-1',
+                'md:-mt-32',
+                'md:mr-4',
+                'lg:mr-0'
+              )}
+            >
+              {callsToAction.columnTwo.map(renderColumn)}
+            </div>
+            <div className="text-center flex md:hidden mx-auto">
+              <BasicLink href="#guidelines">View Testnet Guidelines</BasicLink>
+            </div>
+          </div>
+          <div className="hidden md:block">
+            <AboutHeader className="md:w-1/2 mt-24">
+              The Leaderboard
+            </AboutHeader>
+            <Para>
+              Earning points places you on the Leaderboard. See how you progress
+              each week in comparison to others.
+            </Para>
+            <div className="mt-8 mb-4 block text-2xl">
+              <BasicLink href="/leaderboard">Show me the leaderboard</BasicLink>
+            </div>
+            <div className="flex md:ml-24">
+              <Img src={leaderboardPic} />
+            </div>
+          </div>
+          <AboutHeader className="text-center w-full mt-32">
+            Win a Category, win an NFT!
+          </AboutHeader>
+          <Para className="text-left md:text-center m-auto">
+            At the end of the testnet if you’re the leader in any of the
+            categories mentioned above you might be eligible to receive an Iron
+            Fish NFT. Filter the leaderboard to see category leaders.
+          </Para>
+        </div>
+        <div className="flex flex-row w-full overflow-x-auto" ref={$cards}>
+          {cards.map(nft => (
+            <NFTCard key={nft.title} {...nft} />
+          ))}
+        </div>
+        <div className="m-auto flex">
+          <ArrowButton onClick={scrollLeft}>
+            <ArrowLeft />
+          </ArrowButton>
+          <ArrowButton onClick={scrollRight}>
+            <ArrowRight />
+          </ArrowButton>
+        </div>
+        <TubesCTA
+          cta="Start earning points!"
+          buttonText="Get Incentivized"
+          goTo="/signup"
+        />
+        <div id="guidelines" className="mt-24 mx-3 lg:w-2/3">
+          <AboutHeader className="text-left text-4xl w-1/2">
+            Testnet Guidelines
+          </AboutHeader>
+          <div className="flex flex-col md:flex-row mt-6">
+            <div className="flex flex-col w-full md:w-1/2 md:mr-2">
+              {guidelines.columnOne.map(renderGuidelineColumn)}
+            </div>
+            <div className="flex flex-col w-full md:w-1/2 md:ml-1 md:-mt-32">
+              {guidelines.columnTwo.map(renderGuidelineColumn)}
+            </div>
           </div>
-        )
-      }
-    </LoginContext.Consumer>
+        </div>
+        <KeepReading />
+        <div className="mb-24"></div>
+      </main>
+      <Footer />
+    </div>
   )
 }
diff --git a/pages/callback.tsx b/pages/callback.tsx
index 43fd2800..470fdbfc 100644
--- a/pages/callback.tsx
+++ b/pages/callback.tsx
@@ -1,21 +1,22 @@
 import { magic } from 'utils/magic'
 import { useEffect } from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import Loader from 'components/Loader'
 import { getUserDetails } from 'apiClient/client'
 import { useQuery } from 'hooks/useQuery'
 import { encode as btoa } from 'base-64'
 
 const Callback = () => {
+  const $router = useRouter()
   const $error = useQuery('error')
   const $token = useQuery('magic_credential')
   useEffect(() => {
     const call = async () => {
       if ($error) {
         if ($error === 'user_invalid') {
-          Router.push(`/signup?toast=${btoa('Please sign up.')}`)
+          $router.push(`/signup?toast=${btoa('Please sign up.')}`)
         } else if ($error === 'user_unconfirmed') {
-          Router.push(`/login?toast=${btoa('Please log in.')}`)
+          $router.push(`/login?toast=${btoa('Please log in.')}`)
         }
         return
       }
@@ -27,14 +28,14 @@ const Callback = () => {
         }
         const details = await getUserDetails(token)
         if ('statusCode' in details && details.statusCode !== 200) {
-          Router.push(`/signup?toast=${btoa('Please sign up.')}`)
+          $router.push(`/signup?toast=${btoa('Please sign up.')}`)
           return
         }
-        Router.push(`/leaderboard?toast=${btoa('Welcome back!')}`)
+        $router.push(`/leaderboard?toast=${btoa('Welcome back!')}`)
       }
     }
     call()
-  }, [$error, $token])
+  }, [$router, $error, $token])
   return <Loader />
 }
 
diff --git a/pages/community.tsx b/pages/community.tsx
index 176e838e..4be1c006 100644
--- a/pages/community.tsx
+++ b/pages/community.tsx
@@ -6,10 +6,14 @@ import Footer from 'components/Footer'
 import Navbar from 'components/Navbar'
 import PageBanner from 'components/PageBanner'
 import TubesCTA from 'components/FooterCTA'
+import { LoginContext } from 'hooks/useLogin'
 
 import Stories from 'components/Community/Stories'
+type CommunityProps = {
+  loginContext: LoginContext
+}
 
-export default function Community() {
+export default function Community({ loginContext }: CommunityProps) {
   return (
     <div className="min-h-screen flex flex-col font-favorit">
       <Head>
@@ -17,7 +21,11 @@ export default function Community() {
         <meta name="description" content="Community" />
       </Head>
 
-      <Navbar fill="black" className="bg-ifbeige text-black" />
+      <Navbar
+        fill="black"
+        className="bg-ifbeige text-black"
+        loginContext={loginContext}
+      />
 
       <main className="bg-ifbeige flex-1 items-center flex flex-col">
         <div className="w-4/5 md:w-2/3">
diff --git a/pages/debug-user.tsx b/pages/debug-user.tsx
index dd546d9d..211e37a9 100644
--- a/pages/debug-user.tsx
+++ b/pages/debug-user.tsx
@@ -1,18 +1,24 @@
-import { useProtectedRoute, STATUS } from 'hooks/useProtectedRoute'
+import { useProtectedRoute } from 'hooks/useProtectedRoute'
 import { useState, useEffect } from 'react'
 import Debug from 'components/Debug'
+import { LoginContext } from 'hooks/useLogin'
 
-const Test = () => {
+type UserDebugProps = {
+  loginContext: LoginContext
+}
+
+const Test = ({ loginContext }: UserDebugProps) => {
   // eslint-disable-next-line
   const [$time, $setTime] = useState<number>(Date.now())
   const [$elapsed, $setElapsed] = useState<number>(0)
-  const deets = useProtectedRoute({})
+  const details = useProtectedRoute({ loginContext })
+  const { checkLoggedIn } = details
   useEffect(() => {
-    if (deets.status === STATUS.LOADED) {
+    if (checkLoggedIn()) {
       $setElapsed(Math.abs($time - Date.now()))
     }
-  }, [deets.status, $elapsed, $time])
-  return <Debug {...deets} elapsed={$elapsed} />
+  }, [checkLoggedIn, $elapsed, $time])
+  return <Debug {...details} elapsed={$elapsed} />
 }
 
 export default Test
diff --git a/pages/faq.tsx b/pages/faq.tsx
index 72aecc7d..372c90cb 100644
--- a/pages/faq.tsx
+++ b/pages/faq.tsx
@@ -8,8 +8,7 @@ import Footer from 'components/Footer'
 import Navbar from 'components/Navbar'
 import KeepReading from 'components/KeepReading'
 import QuestionAnswer from 'components/FAQ/QuestionAnswer'
-import { LoginContext } from 'contexts/LoginContext'
-import { STATUS } from 'hooks/useLogin'
+import { LoginContext } from 'hooks/useLogin'
 import Loader from 'components/Loader'
 import React from 'react'
 
@@ -90,72 +89,75 @@ on our `}
     .
   </span>
 )
+type FaqProps = {
+  loginContext: LoginContext
+}
 
-export default function Faq() {
-  return (
-    <LoginContext.Consumer>
-      {({ status }: { status: STATUS }) =>
-        status === STATUS.LOADING ? (
-          <Loader />
-        ) : (
-          <div className="min-h-screen flex flex-col font-favorit">
-            <Head>
-              <title>FAQ</title>
-              <meta name="description" content="FAQ" />
-            </Head>
+export default function Faq({ loginContext }: FaqProps) {
+  const { checkLoggedIn, checkLoading } = loginContext
+  const isLoaded = checkLoggedIn()
+  return checkLoading() ? (
+    <Loader />
+  ) : (
+    <div className="min-h-screen flex flex-col font-favorit">
+      <Head>
+        <title>FAQ</title>
+        <meta name="description" content="FAQ" />
+      </Head>
 
-            <Navbar fill="black" className="bg-white text-black" />
+      <Navbar
+        fill="black"
+        className="bg-white text-black"
+        loginContext={loginContext}
+      />
 
-            <main className="bg-white flex-1 items-center flex flex-col">
-              <div className="w-4/5 md:w-2/3">
-                <PageBanner
-                  title="Testnet FAQ"
-                  text={<PageBannerBody />}
-                  buttonText={status !== STATUS.LOADED ? 'Sign Up' : ''}
-                  buttonClassName={clsx(
-                    'm-auto',
-                    'mb-32',
-                    'w-full',
-                    'max-w-[240px]',
-                    'text-lg',
-                    'p-3',
-                    'md:text-xl',
-                    'md:py-5',
-                    'md:px-4'
-                  )}
-                  buttonLink={status !== STATUS.LOADED ? '/signup' : ''}
-                />
-                <h1
-                  className={clsx(
-                    'text-left',
-                    'text-5xl',
-                    'ml-0',
-                    'mt-24',
-                    'mb-8',
-                    'font-extended',
-                    'md:text-6xl'
-                  )}
-                >
-                  Questions
-                </h1>
-                <div className="flex flex-col gap-y-8">
-                  {questions.map((qa, i) => (
-                    <QuestionAnswer key={i} index={i} {...qa} />
-                  ))}
-                </div>
-              </div>
-              <TubesCTA
-                cta="Join the Testnet!"
-                buttonText="Join Now"
-                goTo="/signup"
-              />
-              <KeepReading background="bg-white" />
-              <div className="mb-24"></div>
-            </main>
-            <Footer />
+      <main className="bg-white flex-1 items-center flex flex-col">
+        <div className="w-4/5 md:w-2/3">
+          <PageBanner
+            title="Testnet FAQ"
+            text={<PageBannerBody />}
+            buttonText={!isLoaded ? 'Sign Up' : ''}
+            buttonClassName={clsx(
+              'm-auto',
+              'mb-32',
+              'w-full',
+              'max-w-[240px]',
+              'text-lg',
+              'p-3',
+              'md:text-xl',
+              'md:py-5',
+              'md:px-4'
+            )}
+            buttonLink={!isLoaded ? '/signup' : ''}
+          />
+          <h1
+            className={clsx(
+              'text-left',
+              'text-5xl',
+              'ml-0',
+              'mt-24',
+              'mb-8',
+              'font-extended',
+              'md:text-6xl'
+            )}
+          >
+            Questions
+          </h1>
+          <div className="flex flex-col gap-y-8">
+            {questions.map((qa, i) => (
+              <QuestionAnswer key={i} index={i} {...qa} />
+            ))}
           </div>
-        )
-      }
-    </LoginContext.Consumer>
+        </div>
+        <TubesCTA
+          cta="Join the Testnet!"
+          buttonText="Join Now"
+          goTo="/signup"
+        />
+        <KeepReading background="bg-white" />
+        <div className="mb-24"></div>
+      </main>
+      <Footer />
+    </div>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 0ebe8a7e..6d0dcf46 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,7 @@
 import Head from 'next/head'
 import Footer from 'components/Footer'
 import Navbar from 'components/Navbar'
-
-import { LoginContext } from 'contexts/LoginContext'
+import { LoginContext } from 'hooks/useLogin'
 
 export const getServerSideProps = () => {
   return {
@@ -13,34 +12,36 @@ export const getServerSideProps = () => {
   }
 }
 
-export default function Home() {
+interface HomeProps {
+  loginContext: LoginContext
+}
+
+export default function Home({ loginContext }: HomeProps) {
+  const { magicMetadata } = loginContext
+  const email = magicMetadata?.email || ''
   return (
-    <LoginContext.Consumer>
-      {({ magicMetadata }) => {
-        return (
-          <div className="min-h-screen flex flex-col">
-            <Head>
-              <title>Iron Fish</title>
-              <meta
-                name="description"
-                content="Iron Fish Incentivized Testnet. Iron Fish is a new layer-1 blockchain and the future universal privacy layer for all things crypto."
-              />
-            </Head>
+    <div className="min-h-screen flex flex-col">
+      <Head>
+        <title>Iron Fish</title>
+        <meta
+          name="description"
+          content="Iron Fish Incentivized Testnet. Iron Fish is a new layer-1 blockchain and the future universal privacy layer for all things crypto."
+        />
+      </Head>
 
-            <Navbar fill="black" className="bg-iforange text-black" />
+      <Navbar
+        fill="black"
+        className="bg-iforange text-black"
+        loginContext={loginContext}
+      />
 
-            <main className="bg-iforange flex-1">
-              <h1 className="text-2xl">
-                {magicMetadata && magicMetadata.email
-                  ? `Welcome to Testnet, ${magicMetadata.email}!`
-                  : `Welcome to Testnet.`}
-              </h1>
-            </main>
+      <main className="bg-iforange flex-1">
+        <h1 className="text-2xl">
+          {email ? `Welcome to Testnet, ${email}!` : `Welcome to Testnet.`}
+        </h1>
+      </main>
 
-            <Footer />
-          </div>
-        )
-      }}
-    </LoginContext.Consumer>
+      <Footer />
+    </div>
   )
 }
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index 5c34275d..bc2d7ceb 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -14,16 +14,16 @@ import { Toast, Alignment } from 'components/Toast'
 import { countries, CountryWithCode } from 'data/countries'
 import { defaultErrorText } from 'utils/forms'
 import useDebounce from 'hooks/useDebounce'
+import { LoginContext } from 'hooks/useLogin'
 import { useField } from 'hooks/useForm'
 import { useQueriedToast } from 'hooks/useToast'
-import { STATUS } from 'hooks/useLogin'
-import { LoginContext } from 'contexts/LoginContext'
 
 import * as API from 'apiClient'
 import NoResults from 'components/leaderboard/ImageNoResults'
 import LeaderboardRow from 'components/leaderboard/LeaderboardRow'
 import Loader from 'components/Loader'
 type Props = {
+  loginContext: LoginContext
   users: ReadonlyArray<API.ApiUser>
 }
 
@@ -61,7 +61,7 @@ const FIELDS = {
   },
 }
 
-export default function Leaderboard({ users = [] }: Props) {
+export default function Leaderboard({ users = [], loginContext }: Props) {
   const { visible: $visible, message: $toast } = useQueriedToast({
     queryString: 'toast',
     duration: 8e3,
@@ -107,113 +107,111 @@ export default function Leaderboard({ users = [] }: Props) {
     // Don't re-fire the effect when hasSearched updates
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [$debouncedSearch, $country, $eventType])
-  return (
-    <LoginContext.Consumer>
-      {({ status: $status }) =>
-        $status === STATUS.LOADING ? (
-          <Loader />
-        ) : (
-          <div className="min-h-screen flex flex-col font-favorit">
-            <Head>
-              <title>Leaderboard</title>
-              <meta name="description" content="Leaderboard" />
-            </Head>
-            <Toast
-              message={$toast}
-              visible={$visible}
-              alignment={Alignment.Top}
-            />
-            <Navbar fill="black" className="bg-ifpink text-black" />
-            <BackToTop />
-            <main className="bg-ifpink flex-1 items-center flex flex-col">
-              <div className="w-4/5 md:w-2/3">
-                <PageBanner
-                  title="Testnet Leaderboard"
-                  text="Our incentivized testnet leaderboard shows you who the top point
+  const { checkLoggedIn, checkLoading } = loginContext
+  const isLoggedIn = checkLoggedIn()
+  const isLoading = checkLoading()
+
+  return isLoading ? (
+    <Loader />
+  ) : (
+    <div className="min-h-screen flex flex-col font-favorit">
+      <Head>
+        <title>Leaderboard</title>
+        <meta name="description" content="Leaderboard" />
+      </Head>
+      <Toast message={$toast} visible={$visible} alignment={Alignment.Top} />
+      <Navbar
+        fill="black"
+        className="bg-ifpink text-black"
+        loginContext={loginContext}
+      />
+      <BackToTop />
+      <main className="bg-ifpink flex-1 items-center flex flex-col">
+        <div className="w-4/5 md:w-2/3">
+          <PageBanner
+            title="Testnet Leaderboard"
+            text="Our incentivized testnet leaderboard shows you who the top point
           getters are for all-time score, miners, bug catchers, net promoters,
           node hosting, and more! Click someone’s user name to see a breakdown
           of their activity."
-                  buttonText={$status !== STATUS.LOADED ? 'Sign Up' : ''}
-                  buttonClassName={clsx(
-                    'm-auto',
-                    'mb-32',
-                    'w-full',
-                    'max-w-[240px]',
-                    'text-lg',
-                    'p-3',
-                    'md:text-xl',
-                    'md:py-5',
-                    'md:px-4'
-                  )}
-                  buttonLink={$status !== STATUS.LOADED ? '/signup' : ''}
-                />
+            buttonText={!isLoggedIn ? 'Sign Up' : ''}
+            buttonClassName={clsx(
+              'm-auto',
+              'mb-32',
+              'w-full',
+              'max-w-[240px]',
+              'text-lg',
+              'p-3',
+              'md:text-xl',
+              'md:py-5',
+              'md:px-4'
+            )}
+            buttonLink={!isLoggedIn ? '/signup' : ''}
+          />
 
-                <div className="h-16 border border-black rounded flex items-center mb-8">
-                  <div className="border-r border-black flex h-full items-center w-1/2">
-                    <div className="pl-4 md:pl-10">
-                      <Search />
-                    </div>
-                    <input
-                      className="text-lg pl-2 md:pl-5 h-full font-favorit bg-transparent placeholder-black focus:outline-none"
-                      placeholder="Search"
-                      onChange={e => {
-                        $setSearch(e.target.value)
-                      }}
-                      value={$search}
-                    />
-                  </div>
-                  <div className="border-r border-black flex h-full items-center justify-between w-1/4">
-                    <label className="flex flex-col font-favorit text-xs px-2.5 w-full">
-                      Region:
-                      {$country && $country.value && (
-                        <Select {...$country} className="text-lg" />
-                      )}
-                    </label>
-                  </div>
-                  <div className="h-full flex items-center justify-between w-1/4">
-                    <label className="flex flex-col font-favorit text-xs px-2.5 w-full">
-                      View:
-                      {$eventType && $eventType.value && (
-                        <Select {...$eventType} className="text-lg" />
-                      )}
-                    </label>
-                  </div>
-                </div>
-                <div className="font-extended flex px-10 mb-4">
-                  {$users.length > 0 && (
-                    <>
-                      <div className="w-24">RANK</div>
-                      <div className="flex-1">USERNAME</div>
-                      <div>TOTAL POINTS</div>
-                    </>
-                  )}
-                </div>
-                {!$hasSearched || $searching ? (
-                  <Loader />
-                ) : !$searching && $hasSearched && $users.length > 0 ? (
-                  $users.map(user => (
-                    <div className="mb-3" key={user.id}>
-                      <Link href={`/users/${user.id}`}>
-                        <a>
-                          <LeaderboardRow
-                            rank={user.rank}
-                            graffiti={user.graffiti}
-                            points={user.total_points}
-                          />
-                        </a>
-                      </Link>
-                    </div>
-                  ))
-                ) : (
-                  <NoResults />
-                )}
-                <div className="mb-24"></div>
+          <div className="h-16 border border-black rounded flex items-center mb-8">
+            <div className="border-r border-black flex h-full items-center w-1/2">
+              <div className="pl-4 md:pl-10">
+                <Search />
               </div>
-            </main>
-            <Footer />
+              <input
+                className="text-lg pl-2 md:pl-5 h-full font-favorit bg-transparent placeholder-black focus:outline-none"
+                placeholder="Search"
+                onChange={e => {
+                  $setSearch(e.target.value)
+                }}
+                value={$search}
+              />
+            </div>
+            <div className="border-r border-black flex h-full items-center justify-between w-1/4">
+              <label className="flex flex-col font-favorit text-xs px-2.5 w-full">
+                Region:
+                {$country && $country.value && (
+                  <Select {...$country} className="text-lg" />
+                )}
+              </label>
+            </div>
+            <div className="h-full flex items-center justify-between w-1/4">
+              <label className="flex flex-col font-favorit text-xs px-2.5 w-full">
+                View:
+                {$eventType && $eventType.value && (
+                  <Select {...$eventType} className="text-lg" />
+                )}
+              </label>
+            </div>
           </div>
-        )
-      }
-    </LoginContext.Consumer>
+          <div className="font-extended flex px-10 mb-4">
+            {$users.length > 0 && (
+              <>
+                <div className="w-24">RANK</div>
+                <div className="flex-1">USERNAME</div>
+                <div>TOTAL POINTS</div>
+              </>
+            )}
+          </div>
+          {!$hasSearched || $searching ? (
+            <Loader />
+          ) : !$searching && $hasSearched && $users.length > 0 ? (
+            $users.map(user => (
+              <div className="mb-3" key={user.id}>
+                <Link href={`/users/${user.id}`}>
+                  <a>
+                    <LeaderboardRow
+                      rank={user.rank}
+                      graffiti={user.graffiti}
+                      points={user.total_points}
+                    />
+                  </a>
+                </Link>
+              </div>
+            ))
+          ) : (
+            <NoResults />
+          )}
+          <div className="mb-24"></div>
+        </div>
+      </main>
+      <Footer />
+    </div>
   )
 }
diff --git a/pages/login.tsx b/pages/login.tsx
index 41d3dd3d..ae470f7b 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState, KeyboardEvent } from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 
 import Navbar from 'components/Navbar'
@@ -12,6 +12,7 @@ import SignupCTA from 'components/login/SignupCTA'
 
 import { useField } from 'hooks/useForm'
 import { useQuery } from 'hooks/useQuery'
+import { LoginContext } from 'hooks/useLogin'
 
 import { useProtectedRoute, STATUS } from 'hooks/useProtectedRoute'
 import { scrollUp } from 'utils/scroll'
@@ -33,10 +34,14 @@ const FIELDS = {
     defaultErrorText: `Valid email address required`,
   },
 }
-export default function Login() {
+type LoginProps = {
+  loginContext: LoginContext
+}
+export default function Login({ loginContext }: LoginProps) {
+  const $router = useRouter()
   const { status } = useProtectedRoute({
     ifLoggedIn: `/leaderboard?toast=${btoa("You're already logged in.")}`,
-    timeout: 1500,
+    loginContext,
   })
   const {
     show: $show,
@@ -98,12 +103,12 @@ export default function Login() {
         $setLoaded(true)
         $setMessage('Logged in!')
         $show()
-        setTimeout(() => Router.push('/leaderboard'), 3e3)
+        setTimeout(() => $router.push('/leaderboard'), 3e3)
       }
     } catch (e) {
       $setError(e.message)
     }
-  }, [$email, testInvalid, $show])
+  }, [$email, testInvalid, $show, $router])
   useEffect(() => {
     if ($email) {
       $setLoaded(true)
@@ -125,7 +130,11 @@ export default function Login() {
         <Loader />
       ) : (
         <>
-          <Navbar fill="black" className="bg-ifpink text-black" />
+          <Navbar
+            fill="black"
+            className="bg-ifpink text-black"
+            loginContext={loginContext}
+          />
           <Toast
             message={$msg || $toast}
             visible={$visible}
@@ -135,7 +144,14 @@ export default function Login() {
             <div className="md:w-4/5 w-full my-6 max-w-section mx-auto transition-width">
               <OffsetBorderContainer>
                 <div className="flex justify-center">
-                  <div className="flex flex-col items-center md:px-4 px-5">
+                  <div
+                    className="flex flex-col items-center md:px-4 px-5"
+                    onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => {
+                      if (e.key === 'Enter') {
+                        submit()
+                      }
+                    }}
+                  >
                     {$loaded ? (
                       <>
                         <h1 className="text-4xl text-center mb-4 mt-16">
@@ -150,11 +166,6 @@ export default function Login() {
                         <RawButton
                           className="w-full mt-8 max-w-md mb-2 text-lg md:text-xl p-3 md:py-5 md:px-4"
                           onClick={submit}
-                          onKeyPress={(e: KeyboardEvent<HTMLButtonElement>) => {
-                            if (e.key === 'Enter') {
-                              submit()
-                            }
-                          }}
                         >
                           Login
                         </RawButton>
diff --git a/pages/logout.tsx b/pages/logout.tsx
index 5e35e07a..8e62f329 100644
--- a/pages/logout.tsx
+++ b/pages/logout.tsx
@@ -1,21 +1,28 @@
 import { useEffect } from 'react'
-import { magic } from 'utils/magic'
+// import { useRouter } from 'next/router'
 import Router from 'next/router'
+import { magic } from 'utils/magic'
 import Loader from 'components/Loader'
 import { encode as btoa } from 'base-64'
+import { LoginContext, STATUS } from 'hooks/useLogin'
+
+type LogoutProps = {
+  loginContext: LoginContext
+}
 
-export default function Logout() {
+export default function Logout({ loginContext }: LogoutProps) {
   useEffect(() => {
     const sayGoodbye = async () => {
-      if (!magic) return false
-      await magic.user.logout()
-      Router.push(
-        (await magic.user.isLoggedIn())
-          ? `/leaderboard`
-          : `/login?toast=${btoa('You have been logged out.')}`
-      )
+      const loggedOut = await magic?.user.logout()
+      if (loggedOut) {
+        loginContext.setStatus(STATUS.NOT_FOUND)
+        loginContext.setError(null)
+        await magic?.user.isLoggedIn()
+        const goto = `/login?toast=${btoa('You have been logged out.')}`
+        return Router.push(goto)
+      }
     }
     sayGoodbye()
-  }, [])
+  }, [loginContext])
   return <Loader />
 }
diff --git a/pages/signup.tsx b/pages/signup.tsx
index d9c98d3f..4a76eb9c 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 import Link from 'next/link'
+import { LoginContext } from 'hooks/useLogin'
 import Loader from 'components/Loader'
 import Navbar from 'components/Navbar'
 import Note from 'components/Form/Note'
@@ -69,10 +70,15 @@ export const FIELDS = {
   },
 }
 
-export default function SignUp() {
+interface SignUpProps {
+  loginContext: LoginContext
+}
+
+export default function SignUp({ loginContext }: SignUpProps) {
+  const $router = useRouter()
   const { status } = useProtectedRoute({
     ifLoggedIn: `/leaderboard?toast=${btoa("You're already logged in.")}`,
-    timeout: 1500,
+    loginContext,
   })
   const { visible: $visible, message: $toast } = useQueriedToast({
     queryString: 'toast',
@@ -143,9 +149,9 @@ export default function SignUp() {
     } else {
       $setSignedUp(true)
       scrollUp()
-      Router.push(`/login?email=${encodeURIComponent(email)}`)
+      $router.push(`/login?email=${encodeURIComponent(email)}`)
     }
-  }, [$email, $graffiti, $social, $country, testInvalid])
+  }, [$router, $email, $graffiti, $social, $country, testInvalid])
 
   // When loading is stopped with an error, the form fields re-render
   // but are empty, so repopulate them.
@@ -170,7 +176,11 @@ export default function SignUp() {
         <Loader />
       ) : (
         <>
-          <Navbar fill="black" className="bg-ifpink text-black" />
+          <Navbar
+            fill="black"
+            className="bg-ifpink text-black"
+            loginContext={loginContext}
+          />
           <Toast
             message={$toast}
             visible={$visible}
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index fcf8f54e..6e54ab54 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -15,12 +15,12 @@ import { encode as btoa } from 'base-64'
 
 import * as API from 'apiClient'
 import { graffitiToColor, numberToOrdinal } from 'utils'
-import { LoginContext } from 'contexts/LoginContext'
+import { LoginContext } from 'hooks/useLogin'
 
 // The number of events to display in the Recent Activity list.
 const EVENTS_LIMIT = 7
 
-type Props = {
+interface Props {
   events: API.ListEventsResponse
   user?: API.ApiUser
   allTimeMetrics: API.UserMetricsResponse
@@ -101,14 +101,17 @@ export const getServerSideProps: GetServerSideProps<Props | Redirect> =
       return failure
     }
   }
-
+interface LoginContextProps extends Props {
+  loginContext: LoginContext
+}
 export default function User({
+  loginContext,
   events,
   user,
   allTimeMetrics,
   weeklyMetrics,
   metricsConfig,
-}: Props) {
+}: LoginContextProps) {
   const id = (user && user.id && user.id.toString()) || 'unknown'
   // Recent Activity hooks
   const { $events, $hasPrevious, $hasNext, fetchPrevious, fetchNext } =
@@ -126,133 +129,127 @@ export default function User({
       />
     )
   }
+  const avatarColor = graffitiToColor(user.graffiti)
+  const ordinalRank = numberToOrdinal(user.rank)
 
-  return (
-    <LoginContext.Consumer>
-      {({ metadata }) => {
-        const avatarColor = graffitiToColor(user.graffiti)
-        const ordinalRank = numberToOrdinal(user.rank)
-
-        const totalWeeklyLimit = Object.values(
-          metricsConfig.weekly_limits
-        ).reduce((acc, cur) => acc + cur, 0)
-
-        return (
-          <div className="min-h-screen flex flex-col">
-            <Head>
-              <title>{user.graffiti}</title>
-              <meta name="description" content={String(user.graffiti)} />
-            </Head>
-
-            <Navbar fill="black" className="bg-ifpink text-black" />
+  const totalWeeklyLimit = Object.values(metricsConfig.weekly_limits).reduce(
+    (acc, cur) => acc + cur,
+    0
+  )
 
-            <main className="bg-ifpink flex-1 justify-center flex pt-16 pb-32">
-              <div style={{ flexBasis: 1138 }}>
-                <OffsetBorderContainer>
-                  <div className="px-24 pt-16 pb-12">
-                    {/* Header */}
-                    <div
-                      className="flex justify-between mb-8"
-                      style={{ width: '100%' }}
-                    >
-                      <div>
-                        <h1 className="font-extended text-6xl mt-6 mb-8">
-                          {user.graffiti}
-                        </h1>
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Head>
+        <title>{user.graffiti}</title>
+        <meta name="description" content={String(user.graffiti)} />
+      </Head>
+
+      <Navbar
+        loginContext={loginContext}
+        fill="black"
+        className="bg-ifpink text-black"
+      />
 
-                        <div className="font-favorit flex flex-wrap gap-x-16 gap-y-2">
-                          <div>
-                            <div>All Time Rank</div>
-                            <div className="text-3xl mt-2">{ordinalRank}</div>
-                          </div>
-                          <div>
-                            <div>Total Points</div>
-                            <div className="text-3xl mt-2">
-                              {user.total_points.toLocaleString()}
-                            </div>
-                          </div>
-                          <div>
-                            <div>Weekly Points</div>
-                            <div className="text-3xl mt-2">
-                              {weeklyMetrics.points.toLocaleString()} /{' '}
-                              {totalWeeklyLimit.toLocaleString()}
-                            </div>
-                          </div>
-                        </div>
+      <main className="bg-ifpink flex-1 justify-center flex pt-16 pb-32">
+        <div style={{ flexBasis: 1138 }}>
+          <OffsetBorderContainer>
+            <div className="px-24 pt-16 pb-12">
+              {/* Header */}
+              <div
+                className="flex justify-between mb-8"
+                style={{ width: '100%' }}
+              >
+                <div>
+                  <h1 className="font-extended text-6xl mt-6 mb-8">
+                    {user.graffiti}
+                  </h1>
+
+                  <div className="font-favorit flex flex-wrap gap-x-16 gap-y-2">
+                    <div>
+                      <div>All Time Rank</div>
+                      <div className="text-3xl mt-2">{ordinalRank}</div>
+                    </div>
+                    <div>
+                      <div>Total Points</div>
+                      <div className="text-3xl mt-2">
+                        {user.total_points.toLocaleString()}
                       </div>
-                      <div className="flex flex-col items-center">
-                        <FishAvatar color={avatarColor} />
-                        <div className="mt-4">
-                          <Flag code={user.country_code} />
-                        </div>
+                    </div>
+                    <div>
+                      <div>Weekly Points</div>
+                      <div className="text-3xl mt-2">
+                        {weeklyMetrics.points.toLocaleString()} /{' '}
+                        {totalWeeklyLimit.toLocaleString()}
                       </div>
                     </div>
-
-                    {/* Tabs */}
-                    <Tabs
-                      activeTab={$activeTab}
-                      onTabChange={onTabChange}
-                      user={user}
-                      authedUser={metadata}
-                      allTimeMetrics={allTimeMetrics}
-                      weeklyMetrics={weeklyMetrics}
-                      metricsConfig={metricsConfig}
-                    />
-
-                    {/* Recent Activity */}
-                    {$activeTab !== 'settings' && (
-                      <>
-                        <h1 className="font-favorit">Recent Activity</h1>
-
-                        <table className="font-favorit w-full">
-                          <thead>
-                            <tr className="text-xs text-left tracking-widest border-b border-black">
-                              <th className="font-normal py-4">ACTIVITY</th>
-                              <th className="font-normal">DATE</th>
-                              <th className="font-normal">POINTS EARNED</th>
-                            </tr>
-                          </thead>
-                          <tbody className="text-sm">
-                            {$events.map(e => (
-                              <tr key={e.id} className="border-b border-black">
-                                <td className="py-4">
-                                  {displayEventType(e.type)}
-                                </td>
-                                <td>
-                                  {new Date(e.occurred_at).toLocaleString()}
-                                </td>
-                                <td>{e.points}</td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </>
-                    )}
                   </div>
-                </OffsetBorderContainer>
-                {/* Recent Activity Pagination */}
-                {$activeTab !== 'settings' && (
-                  <div className="flex font-favorit justify-center mt-8">
-                    <div className="flex gap-x-1.5">
-                      <EventsPaginationButton
-                        disabled={!$hasPrevious}
-                        onClick={fetchPrevious}
-                      >{`<< Previous`}</EventsPaginationButton>
-                      <div>{`|`}</div>
-                      <EventsPaginationButton
-                        disabled={!$hasNext}
-                        onClick={fetchNext}
-                      >{`Next >>`}</EventsPaginationButton>
-                    </div>
+                </div>
+                <div className="flex flex-col items-center">
+                  <FishAvatar color={avatarColor} />
+                  <div className="mt-4">
+                    <Flag code={user.country_code} />
                   </div>
-                )}
+                </div>
+              </div>
+
+              {/* Tabs */}
+              <Tabs
+                activeTab={$activeTab}
+                onTabChange={onTabChange}
+                user={user}
+                authedUser={loginContext.metadata}
+                allTimeMetrics={allTimeMetrics}
+                weeklyMetrics={weeklyMetrics}
+                metricsConfig={metricsConfig}
+              />
+
+              {/* Recent Activity */}
+              {$activeTab !== 'settings' && (
+                <>
+                  <h1 className="font-favorit">Recent Activity</h1>
+
+                  <table className="font-favorit w-full">
+                    <thead>
+                      <tr className="text-xs text-left tracking-widest border-b border-black">
+                        <th className="font-normal py-4">ACTIVITY</th>
+                        <th className="font-normal">DATE</th>
+                        <th className="font-normal">POINTS EARNED</th>
+                      </tr>
+                    </thead>
+                    <tbody className="text-sm">
+                      {$events.map(e => (
+                        <tr key={e.id} className="border-b border-black">
+                          <td className="py-4">{displayEventType(e.type)}</td>
+                          <td>{new Date(e.occurred_at).toLocaleString()}</td>
+                          <td>{e.points}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </>
+              )}
+            </div>
+          </OffsetBorderContainer>
+          {/* Recent Activity Pagination */}
+          {$activeTab !== 'settings' && (
+            <div className="flex font-favorit justify-center mt-8">
+              <div className="flex gap-x-1.5">
+                <EventsPaginationButton
+                  disabled={!$hasPrevious}
+                  onClick={fetchPrevious}
+                >{`<< Previous`}</EventsPaginationButton>
+                <div>{`|`}</div>
+                <EventsPaginationButton
+                  disabled={!$hasNext}
+                  onClick={fetchNext}
+                >{`Next >>`}</EventsPaginationButton>
               </div>
-            </main>
+            </div>
+          )}
+        </div>
+      </main>
 
-            <Footer />
-          </div>
-        )
-      }}
-    </LoginContext.Consumer>
+      <Footer />
+    </div>
   )
 }