diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index b267e45..e9dffca 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -2,7 +2,7 @@
 	import { Avatar, Button, DropdownMenu, Separator } from 'bits-ui';
 	import { authClient } from './auth-client';
 	import Image from './Image.svelte';
-	import { CircleUser, FolderGit2, User } from '@lucide/svelte';
+	import { CircleUser, FolderGit2, Loader2, User } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 	type MockUser = {
 		image: string;
@@ -10,11 +10,16 @@
 
 	const session = authClient.useSession();
 	const user = $derived($session.data?.user);
+	let loading = $state(false);
 
 	const signIn = async () => {
-		await authClient.signIn.social({
+		loading = true;
+		const { error } = await authClient.signIn.social({
 			provider: 'github'
 		});
+		if (error) {
+			loading = false;
+		}
 	};
 </script>
 
@@ -25,7 +30,11 @@
 		</Button.Root>
 		{#if !user && !$session.isPending}
 			<Button.Root class="rounded-md p-2 transition-colors hover:bg-gray-800" onclick={signIn}>
-				Sign In
+				{#if loading}
+					<Loader2 class="animate-spin" />
+				{:else}
+					Sign In
+				{/if}
 			</Button.Root>
 		{:else if user}
 			<DropdownMenu.Root>