diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 09570eb..874953f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { Footer } from "./components/Footer";
 import { LoginFailure } from "./components/LoginFailure";
+import { LoginLoading } from "./components/LoginLoading";
 import { LoginSuccess } from "./components/LoginSuccess";
 import { NavBar } from "./components/NavBar";
 import { RecentListens } from "./components/RecentListens";
@@ -16,7 +17,7 @@ export function App() {
   const { isLoaded } = useAuth();
 
   if (!isLoaded) {
-    return <div>Loading...</div>;
+    return <LoginLoading />;
   }
 
   return (
diff --git a/frontend/src/components/LoginLoading.tsx b/frontend/src/components/LoginLoading.tsx
new file mode 100644
index 0000000..b98f4c1
--- /dev/null
+++ b/frontend/src/components/LoginLoading.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Spinner } from "./Spinner";
+
+export const LoginLoading: React.FC = () => (
+  <main className="md:flex md:justify-center p-4">
+    <div className="md:shrink-0 min-w-full md:min-w-0 md:w-1/3 l:w-1/5 xl:w-1/6 max-w-screen-lg shadow-xl bg-gray-100 rounded-lg m-2">
+      <div className="text-white bg-green-500 rounded-lg rounded-b-none text-center mb-4 p-6">
+        <span className="font-semibold text-xl tracking-tight">Listory</span>
+      </div>
+      <p className="text-2xl font-extralight text-gray-700 text-center p-6">
+        Logging in
+      </p>
+      <Spinner className="p-6" size={128} />
+    </div>
+  </main>
+);
+
+<div className="shadow-xl bg-gray-100 rounded p-5 m-2"></div>;