diff --git a/web/src/components/sync-button.tsx b/web/src/components/sync-button.tsx
index 68840d8..7c4ad11 100644
--- a/web/src/components/sync-button.tsx
+++ b/web/src/components/sync-button.tsx
@@ -1,33 +1,41 @@
-import { client } from "#/lib/eden";
-import { toast } from "sonner";
-import { Button } from "./ui/button";
 import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { client } from "#/lib/eden";
+import { Button } from "./ui/button";
 import { Item, ItemActions, ItemDescription, ItemTitle } from "./ui/item";
 
 export function SyncButton() {
-  const query = useQueryClient();
-  return (
-    <Item className="px-0 justify-between">
-      <ItemDescription>Sync your data</ItemDescription>
-      <ItemActions>
-        <Button
-          onClick={async () => {
-            toast.promise(
-              (async () => {
-                await client.api.sync.post();
-                query.invalidateQueries();
-              })(),
-              {
-                loading: "Syncing...",
-                success: "Synced!",
-                error: "Sync failed",
-              },
-            );
-          }}
-        >
-          Sync
-        </Button>
-      </ItemActions>
-    </Item>
-  );
+	const query = useQueryClient();
+	const [syncing, setSyncing] = useState(false);
+	return (
+		<Item className="px-0 justify-between">
+			<ItemDescription>Sync your data</ItemDescription>
+			<ItemActions>
+				<Button
+					disabled={syncing}
+					onClick={async () => {
+						toast.promise(
+							(async () => {
+								setSyncing(true);
+								try {
+									await client.api.sync.post();
+								} finally {
+									setSyncing(false);
+									query.invalidateQueries();
+								}
+							})(),
+							{
+								loading: "Syncing...",
+								success: "Synced!",
+								error: "Sync failed",
+							},
+						);
+					}}
+				>
+					Sync
+				</Button>
+			</ItemActions>
+		</Item>
+	);
 }
diff --git a/web/src/hooks/user.ts b/web/src/hooks/user.ts
index 88333ab..88309b2 100644
--- a/web/src/hooks/user.ts
+++ b/web/src/hooks/user.ts
@@ -1,21 +1,21 @@
-import { authClient } from "#/lib/auth-client";
 import type { AuthSession } from "#/lib/auth.serverfn";
+import { authClient } from "#/lib/auth-client";
 import { Route } from "#/routes/__root";
 
 interface UserData {
-  user: AuthSession["user"] | null;
-  session: AuthSession["session"] | null;
-  isLoading: boolean;
+	user: AuthSession["user"] | null;
+	session: AuthSession["session"] | null;
+	isLoading: boolean;
 }
 
 export function useUser() {
-  const routeContext = Route.useRouteContext();
-  const { data: clientSession, isPending: isClientSessionPending } =
-    authClient.useSession();
-  const session = (clientSession?.session ??
-    routeContext.session?.session ??
-    null) as AuthSession["session"] | null;
-  const user = clientSession?.user ?? routeContext.session?.user ?? null;
-  const isLoading = !routeContext.session && isClientSessionPending;
-  return { user, session, isLoading } satisfies UserData;
+	const routeContext = Route.useRouteContext();
+	const { data: clientSession, isPending: isClientSessionPending } =
+		authClient.useSession();
+	const session = (clientSession?.session ??
+		routeContext.session?.session ??
+		null) as AuthSession["session"] | null;
+	const user = clientSession?.user ?? routeContext.session?.user ?? null;
+	const isLoading = !routeContext.session && isClientSessionPending;
+	return { user, session, isLoading } as UserData;
 }
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 69c4a6f..fd496ac 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -1,17 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PartyQr } from "#/components/party-qr";
 import { SyncButton } from "#/components/sync-button";
 import { MainContent } from "#/components/ui/main-content";
 import { UserInfo } from "#/components/user-info";
-import { PartyQr } from "#/components/party-qr";
-import { createFileRoute } from "@tanstack/react-router";
+import { useUser } from "#/hooks/user";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-  return (
-    <MainContent>
-      <UserInfo />
-      <SyncButton />
-      <PartyQr />
-    </MainContent>
-  );
+	const { user } = useUser();
+	return (
+		<MainContent>
+			<UserInfo />
+			{!user?.lastSyncAt && <SyncButton />}
+			{user && <PartyQr />}
+		</MainContent>
+	);
 }