diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index e369f7c2..c152e075 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -3,7 +3,7 @@ import PlexLoginButton from '../PlexLoginButton';
 
 const Login: React.FC = () => {
   return (
-    <div className="w-full">
+    <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
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 63eaedea..1f02ea2f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,15 +2,20 @@ import React from 'react';
 import '../styles/globals.css';
 import App from 'next/app';
 import Layout from '../components/Layout';
+import LoginPage from './login';
 
 class CoreApp extends App {
   public render(): JSX.Element {
-    const { Component, pageProps } = this.props;
-    return (
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    );
+    const { Component, pageProps, router } = this.props;
+    if (router.asPath == '/login') {
+      return <LoginPage />;
+    } else {
+      return (
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      );
+    }
   }
 }
 
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 5b390e2d..cb975e43 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -3,11 +3,7 @@ import { NextPage } from 'next';
 import Login from '../components/Login';
 
 const LoginPage: NextPage = () => {
-  return (
-    <div className="w-full">
-      <Login />
-    </div>
-  );
+  return <Login />;
 };
 
 export default LoginPage;