diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index b267e45..8649eda 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,8 +10,10 @@
 
 	const session = authClient.useSession();
 	const user = $derived($session.data?.user);
+	let loading = $state(false);
 
 	const signIn = async () => {
+		loading = true;
 		await authClient.signIn.social({
 			provider: 'github'
 		});
@@ -25,7 +27,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>