diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index 519bda6e..34c2175e 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -40,6 +40,10 @@ export const authOptions = {
     },
   },
 
+  pages: {
+    signIn: '/signin',
+  },
+
   events: {
     async signIn({ profile }) {
       // On successful sign in we should persist the user to the database
diff --git a/src/pages/login.js b/src/pages/login.js
deleted file mode 100644
index 16b6a553..00000000
--- a/src/pages/login.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from 'react'
-import { Box, Button, Container, Heading } from '@chakra-ui/react'
-import Link from 'next/link'
-
-const OSM_NAME = process.env.OSM_NAME
-class Login extends Component {
-  static async getInitialProps({ query }) {
-    if (query) {
-      return {
-        challenge: query.challenge,
-      }
-    }
-  }
-
-  render() {
-    return (
-      <Box>
-        <Container maxW='container.xl'>
-          <Heading>Login</Heading>
-          <p>
-            Teams uses {OSM_NAME} as your login, connect your {OSM_NAME}{' '}
-            account!
-          </p>
-          <br />
-          <Button
-            as={Link}
-            href={`/oauth/openstreetmap?login_challenge=${this.props.challenge}`}
-          >
-            Login with {OSM_NAME}
-          </Button>
-        </Container>
-      </Box>
-    )
-  }
-}
-
-export default Login
diff --git a/src/pages/signin.js b/src/pages/signin.js
new file mode 100644
index 00000000..32d8dbc9
--- /dev/null
+++ b/src/pages/signin.js
@@ -0,0 +1,45 @@
+import { signIn, getProviders } from 'next-auth/react'
+import { getServerSession } from 'next-auth/next'
+import { Box, Container, Heading, Text, Button } from '@chakra-ui/react'
+import InpageHeader from '../components/inpage-header'
+import { authOptions } from './api/auth/[...nextauth]'
+
+export default function SignIn() {
+  return (
+    <>
+      <Box as='main' mb={8}>
+        <InpageHeader>
+          <Heading color='white' mb={2}>
+            You are not signed in.
+          </Heading>
+        </InpageHeader>
+        <Container maxW='container.xl' as='section'>
+          <Box layerStyle={'shadowed'}>
+            <Text fontSize='2xl'>
+              Sorry, you need to be signed in to view this page.
+            </Text>
+            <Button onClick={() => signIn('osm-teams')}>Sign in →</Button>
+            <Text>Still having problems? Contact a system administrator.</Text>
+          </Box>
+        </Container>
+      </Box>
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions)
+
+  // If the user is already logged in, redirect.
+  // Note: Make sure not to redirect to the same page
+  // To avoid an infinite loop!
+  if (session) {
+    return { redirect: { destination: '/' } }
+  }
+
+  const providers = await getProviders()
+
+  return {
+    props: { providers: providers ?? [] },
+  }
+}