diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
new file mode 100644
index 000000000..22a7a886a
--- /dev/null
+++ b/src/components/Login/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PlexLoginButton from '../PlexLoginButton';
+
+const Login: React.FC = () => {
+  return (
+    <div className="w-full pt-10">
+      <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <div className="flex justify-center text-gray-900 font-bold text-xl mb-2">
+          Overseerr
+        </div>
+        <div className="flex justify-center text-gray-900 text-sm pb-6 mb-2">
+          would like to sign in to your Plex account
+        </div>
+        <div className="flex items-center justify-center">
+          <PlexLoginButton
+            onAuthToken={(authToken) =>
+              console.log(`auth token is: ${authToken}`)
+            }
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 63eaedead..1c5e578a9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,10 @@ import Layout from '../components/Layout';
 
 class CoreApp extends App {
   public render(): JSX.Element {
-    const { Component, pageProps } = this.props;
+    const { Component, pageProps, router } = this.props;
+    if (router.asPath === '/login') {
+      return <Component {...pageProps} />;
+    }
     return (
       <Layout>
         <Component {...pageProps} />
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 000000000..cb975e43e
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { NextPage } from 'next';
+import Login from '../components/Login';
+
+const LoginPage: NextPage = () => {
+  return <Login />;
+};
+
+export default LoginPage;