diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index dc954d4..8000bba 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -6,6 +6,7 @@ import SmallUserDisplay from "@/components/small-user-display";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { getAuthHeaders } from "@/lib/utils";
 import LogOutButton from "./components/log-out-button";
+import Loading from "./components/loading";
 
 function Index() {
     const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
diff --git a/packages/frontend/src/components/auth-provider.tsx b/packages/frontend/src/components/auth-provider.tsx
index f9970ff..5c17bd8 100644
--- a/packages/frontend/src/components/auth-provider.tsx
+++ b/packages/frontend/src/components/auth-provider.tsx
@@ -51,9 +51,5 @@ export function Auth({ children }: AuthProviderProps) {
             </div>
         );
 
-    return (
-        <Loading>
-            <span className="text-xs px-2 py-1 bg-input">Understanding your authentication state</span>
-        </Loading>
-    );
+    return <Loading message={"Understanding your authentication state"} />;
 }
diff --git a/packages/frontend/src/components/loading.tsx b/packages/frontend/src/components/loading.tsx
index cf4b0de..bd039f6 100644
--- a/packages/frontend/src/components/loading.tsx
+++ b/packages/frontend/src/components/loading.tsx
@@ -1,7 +1,12 @@
-export default function Loading({ children }: { children?: React.ReactNode }) {
+import { Spinner } from "@/components/ui/spinner";
+
+export default function Loading({ message, children }: { message?: string; children?: React.ReactNode }) {
     return (
         <div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
-            <h1>Loading...</h1>
+            <Spinner className="size-6" />
+            {message && (
+                <span className="text-xs px-2 py-1 border-2 border-input border-dashed">{message}</span>
+            )}
             {children}
         </div>
     );
diff --git a/packages/frontend/src/components/ui/spinner.tsx b/packages/frontend/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..e057587
--- /dev/null
+++ b/packages/frontend/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon, Loader } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+    return (
+        <Loader
+            role="status"
+            aria-label="Loading"
+            className={cn("size-4 animate-spin", className)}
+            {...props}
+        />
+    );
+}
+
+export { Spinner };