diff --git a/src/app/_components/login-page.tsx b/src/app/_components/login-page.tsx
new file mode 100644
index 0000000..1500089
--- /dev/null
+++ b/src/app/_components/login-page.tsx
@@ -0,0 +1,12 @@
+import SpotifyLogin from "./spotify-login";
+
+export function LoginPage() {
+  return (
+    <div>
+      <h1>Spooky Spotify Showcase</h1>
+      <SpotifyLogin />
+    </div>
+  );
+}
+
+export default LoginPage;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a950693..97dcf8d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import { api, HydrateClient } from "@/trpc/server";
 import SpotifyLogin from "./_components/spotify-login";
 import SpotifyData from "./_components/spotify-data";
 import SpotifyWebApi from "spotify-web-api-node";
+import LoginPage from "./_components/login-page";
 
 export default async function Home({
   searchParams,
@@ -46,7 +47,7 @@ export default async function Home({
               refreshToken={refresh_token as string}
             />
           ) : (
-            <SpotifyLogin />
+            <LoginPage />
           )}
         </div>
       </main>