diff --git a/frontend/src/components/GarminConnection.tsx b/frontend/src/components/GarminConnection.tsx
index 4918965..0ed3eb0 100644
--- a/frontend/src/components/GarminConnection.tsx
+++ b/frontend/src/components/GarminConnection.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api/client";
+import { showError } from "../banner";
 import type { AuthResponse } from "../types/api";
 import { SyncModal } from "./SyncModal";
 
@@ -7,7 +8,6 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
   const [auth, setAuth] = useState<AuthResponse | null>(null);
   const [code, setCode] = useState("");
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   // There's no real Garmin logout -- the backend session just sits idle.
   // "Disconnect" only hides that and shows Connect again locally; a real
   // login (connect()) clears it.
@@ -18,7 +18,7 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
   // it's open, so this no longer needs the "poll faster while syncing"
   // dynamic interval it used to have.
   useEffect(() => {
-    api.authStatus().then(setAuth).catch((e) => setError(String(e)));
+    api.authStatus().then(setAuth).catch((e) => showError(String(e)));
     const interval = setInterval(() => {
       api.authStatus().then(setAuth).catch(() => {});
     }, 6000);
@@ -27,13 +27,12 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
 
   async function connect() {
     setBusy(true);
-    setError(null);
     try {
       await onBeforeConnect?.();
       setAuth(await api.login());
       setDisconnected(false);
     } catch (e) {
-      setError(String(e));
+      showError(String(e));
     } finally {
       setBusy(false);
     }
@@ -46,12 +45,11 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
   async function submitMFA() {
     if (!code.trim()) return;
     setBusy(true);
-    setError(null);
     try {
       setAuth(await api.submitMFA(code.trim()));
       setCode("");
     } catch (e) {
-      setError(String(e));
+      showError(String(e));
     } finally {
       setBusy(false);
     }
@@ -59,12 +57,11 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
 
   async function sync() {
     setBusy(true);
-    setError(null);
     try {
       await api.syncRun();
       setShowSyncModal(true);
     } catch (e) {
-      setError(String(e));
+      showError(String(e));
     } finally {
       setBusy(false);
     }
@@ -75,7 +72,6 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
       return;
     }
     setBusy(true);
-    setError(null);
     try {
       await api.resetSync();
       // Reset runs as a background sync job; wait for it to actually finish
@@ -88,7 +84,7 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
       }
       window.location.reload();
     } catch (e) {
-      setError(String(e));
+      showError(String(e));
       setBusy(false);
     }
   }
@@ -153,8 +149,6 @@ export function GarminConnection({ onBeforeConnect }: { onBeforeConnect?: () =>
 
       {!disconnected && auth?.message && <p className="garmin-connection-message">{auth.message}</p>}
 
-      {error && <p className="error">{error}</p>}
-
       {showSyncModal && <SyncModal onClose={() => setShowSyncModal(false)} />}
     </div>
   );