diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md
index 15fcdd1..eefe2aa 100644
--- a/IMPLEMENTATION_PLAN.md
+++ b/IMPLEMENTATION_PLAN.md
@@ -47,7 +47,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
 | Dashboard (`/`) | **COMPLETE** | Wired with /api/today, DecisionCard, DataPanel, NutritionPanel, OverrideToggles |
 | Login (`/login`) | **COMPLETE** | Email/password form with auth, error handling, loading states |
 | Settings (`/settings`) | **COMPLETE** | Form with cycleLength, notificationTime, timezone |
-| Settings/Garmin (`/settings/garmin`) | Placeholder | Needs token management UI |
+| Settings/Garmin (`/settings/garmin`) | **COMPLETE** | Token management UI, connection status, disconnect functionality, 27 tests |
 | Calendar (`/calendar`) | Placeholder | Needs MonthView integration |
 | History (`/history`) | **COMPLETE** | Table view with date filtering, pagination, decision styling, 26 tests |
 | Plan (`/plan`) | Placeholder | Needs phase details display |
@@ -384,12 +384,20 @@ Full feature set for production use.
 - **Why:** Users need to configure their preferences
 - **Depends On:** P0.4, P1.1
 
-### P2.10: Settings/Garmin Page Implementation
-- [ ] Garmin connection management UI
+### P2.10: Settings/Garmin Page Implementation ✅ COMPLETE
+- [x] Garmin connection management UI
 - **Files:**
-  - `src/app/settings/garmin/page.tsx` - Token input form, connection status, disconnect button
+  - `src/app/settings/garmin/page.tsx` - Token input form, connection status, expiry warnings, disconnect button
 - **Tests:**
-  - E2E test: connect flow, disconnect flow
+  - `src/app/settings/garmin/page.test.tsx` - 27 tests covering rendering, connection states, warning levels, token submission, disconnect flow
+  - `src/app/settings/page.test.tsx` - 3 additional tests for Garmin link (28 total)
+- **Features Implemented:**
+  - Connection status display with green/red/gray indicators
+  - Token expiry warnings (yellow for 14 days, red for 7 days)
+  - Token input form with JSON validation
+  - Instructions for running bootstrap script
+  - Disconnect functionality
+  - Loading and error states
 - **Why:** Users need to manage their Garmin connection
 - **Depends On:** P0.4, P2.2, P2.3
 
@@ -615,7 +623,8 @@ P2.14 Mini calendar
 ### Pages
 - [x] **Login Page** - Email/password form with PocketBase auth, error handling, loading states, redirect, 14 tests (P1.6)
 - [x] **Dashboard Page** - Complete daily interface with /api/today integration, DecisionCard, DataPanel, NutritionPanel, OverrideToggles, 23 tests (P1.7)
-- [x] **Settings Page** - Form for cycleLength, notificationTime, timezone with validation, loading states, error handling, 24 tests (P2.9)
+- [x] **Settings Page** - Form for cycleLength, notificationTime, timezone with validation, loading states, error handling, 28 tests (P2.9)
+- [x] **Settings/Garmin Page** - Token input form, connection status, expiry warnings, disconnect functionality, 27 tests (P2.10)
 - [x] **History Page** - Table view of DailyLogs with date filtering, pagination, decision styling, 26 tests (P2.12)
 
 ### Test Infrastructure
diff --git a/src/app/settings/garmin/page.test.tsx b/src/app/settings/garmin/page.test.tsx
new file mode 100644
index 0000000..5bcf2a0
--- /dev/null
+++ b/src/app/settings/garmin/page.test.tsx
@@ -0,0 +1,728 @@
+// ABOUTME: Unit tests for the Garmin settings page component.
+// ABOUTME: Tests connection status display, token input, and disconnect functionality.
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock next/link
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+  }: {
+    children: React.ReactNode;
+    href: string;
+  }) => <a href={href}>{children}</a>,
+}));
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+import GarminSettingsPage from "./page";
+
+describe("GarminSettingsPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mock for disconnected state
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          connected: false,
+          daysUntilExpiry: null,
+          expired: false,
+          warningLevel: null,
+        }),
+    });
+  });
+
+  describe("rendering", () => {
+    it("renders the page heading", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("heading", { name: /garmin connection/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("renders a back link to settings", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("link", { name: /back to settings/i }),
+        ).toHaveAttribute("href", "/settings");
+      });
+    });
+
+    it("shows loading state while fetching status", async () => {
+      let resolveStatus: (value: unknown) => void = () => {};
+      const statusPromise = new Promise((resolve) => {
+        resolveStatus = resolve;
+      });
+      mockFetch.mockReturnValue({
+        ok: true,
+        json: () => statusPromise,
+      });
+
+      render(<GarminSettingsPage />);
+
+      expect(screen.getByText(/loading/i)).toBeInTheDocument();
+
+      resolveStatus({
+        connected: false,
+        daysUntilExpiry: null,
+        expired: false,
+        warningLevel: null,
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("disconnected state", () => {
+    it("shows not connected message when disconnected", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/not connected/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows token input section when disconnected", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows instructions for getting tokens", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/garmin_auth\.py/i)).toBeInTheDocument();
+      });
+    });
+
+    it("renders save tokens button", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /save tokens/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("connected state", () => {
+    beforeEach(() => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: 85,
+            expired: false,
+            warningLevel: null,
+          }),
+      });
+    });
+
+    it("shows connected status", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/connected/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows days until expiry", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/85 days/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows disconnect button when connected", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnect/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("does not show token input when connected", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/connected/i)).toBeInTheDocument();
+      });
+
+      expect(screen.queryByLabelText(/paste tokens/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe("warning levels", () => {
+    it("shows yellow warning when expiring in 8-14 days", async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: 10,
+            expired: false,
+            warningLevel: "warning",
+          }),
+      });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        const warningElement = screen.getByTestId("expiry-warning");
+        expect(warningElement).toHaveClass("bg-yellow-50");
+      });
+    });
+
+    it("shows red warning when expiring in 7 days or less", async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: 5,
+            expired: false,
+            warningLevel: "critical",
+          }),
+      });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        const warningElement = screen.getByTestId("expiry-warning");
+        expect(warningElement).toHaveClass("bg-red-50");
+      });
+    });
+
+    it("shows expired message when tokens have expired", async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: -5,
+            expired: true,
+            warningLevel: "critical",
+          }),
+      });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/token expired/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows token input when tokens are expired", async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: -5,
+            expired: true,
+            warningLevel: "critical",
+          }),
+      });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("token submission", () => {
+    it("validates JSON format before submission", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: "not valid json" } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/invalid json format/i)).toBeInTheDocument();
+      });
+    });
+
+    it("validates required fields in token JSON", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: '{"oauth1": {}}' } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/oauth2.*required/i)).toBeInTheDocument();
+      });
+    });
+
+    it("calls POST /api/garmin/tokens with valid data", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              success: true,
+              garminConnected: true,
+              daysUntilExpiry: 90,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 90,
+              expired: false,
+              warningLevel: null,
+            }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const validTokens = JSON.stringify({
+        oauth1: { token: "abc", secret: "def" },
+        oauth2: { access_token: "xyz" },
+        expires_at: "2025-04-10T00:00:00Z",
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: validTokens } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith("/api/garmin/tokens", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: validTokens,
+        });
+      });
+    });
+
+    it("shows success message after saving tokens", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              success: true,
+              garminConnected: true,
+              daysUntilExpiry: 90,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 90,
+              expired: false,
+              warningLevel: null,
+            }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const validTokens = JSON.stringify({
+        oauth1: { token: "abc" },
+        oauth2: { access_token: "xyz" },
+        expires_at: "2025-04-10T00:00:00Z",
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: validTokens } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/tokens saved/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows saving state during submission", async () => {
+      let resolveSave: (value: unknown) => void = () => {};
+      const savePromise = new Promise((resolve) => {
+        resolveSave = resolve;
+      });
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockReturnValueOnce({
+          ok: true,
+          json: () => savePromise,
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const validTokens = JSON.stringify({
+        oauth1: {},
+        oauth2: {},
+        expires_at: "2025-04-10T00:00:00Z",
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: validTokens } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /saving/i }),
+        ).toBeInTheDocument();
+      });
+
+      resolveSave({
+        success: true,
+        garminConnected: true,
+        daysUntilExpiry: 90,
+      });
+    });
+
+    it("shows error when save fails", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          json: () => Promise.resolve({ error: "Failed to save tokens" }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const validTokens = JSON.stringify({
+        oauth1: {},
+        oauth2: {},
+        expires_at: "2025-04-10T00:00:00Z",
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: validTokens } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/failed to save tokens/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("disconnect flow", () => {
+    beforeEach(() => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            connected: true,
+            daysUntilExpiry: 85,
+            expired: false,
+            warningLevel: null,
+          }),
+      });
+    });
+
+    it("calls DELETE /api/garmin/tokens when disconnect clicked", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 85,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({ success: true, garminConnected: false }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnect/i }),
+        ).toBeInTheDocument();
+      });
+
+      const disconnectButton = screen.getByRole("button", {
+        name: /disconnect/i,
+      });
+      fireEvent.click(disconnectButton);
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith("/api/garmin/tokens", {
+          method: "DELETE",
+        });
+      });
+    });
+
+    it("shows disconnected message after successful disconnect", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 85,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({ success: true, garminConnected: false }),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: false,
+              daysUntilExpiry: null,
+              expired: false,
+              warningLevel: null,
+            }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnect/i }),
+        ).toBeInTheDocument();
+      });
+
+      const disconnectButton = screen.getByRole("button", {
+        name: /disconnect/i,
+      });
+      fireEvent.click(disconnectButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/garmin disconnected/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows disconnecting state during disconnect", async () => {
+      let resolveDisconnect: (value: unknown) => void = () => {};
+      const disconnectPromise = new Promise((resolve) => {
+        resolveDisconnect = resolve;
+      });
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 85,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockReturnValueOnce({
+          ok: true,
+          json: () => disconnectPromise,
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnect/i }),
+        ).toBeInTheDocument();
+      });
+
+      const disconnectButton = screen.getByRole("button", {
+        name: /disconnect/i,
+      });
+      fireEvent.click(disconnectButton);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnecting/i }),
+        ).toBeInTheDocument();
+      });
+
+      resolveDisconnect({ success: true, garminConnected: false });
+    });
+
+    it("shows error when disconnect fails", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              connected: true,
+              daysUntilExpiry: 85,
+              expired: false,
+              warningLevel: null,
+            }),
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          json: () => Promise.resolve({ error: "Failed to disconnect" }),
+        });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /disconnect/i }),
+        ).toBeInTheDocument();
+      });
+
+      const disconnectButton = screen.getByRole("button", {
+        name: /disconnect/i,
+      });
+      fireEvent.click(disconnectButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/failed to disconnect/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("error handling", () => {
+    it("shows error when status fetch fails", async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        json: () => Promise.resolve({ error: "Failed to fetch status" }),
+      });
+
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/failed to fetch status/i)).toBeInTheDocument();
+      });
+    });
+
+    it("clears error when user modifies input", async () => {
+      render(<GarminSettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/paste tokens/i)).toBeInTheDocument();
+      });
+
+      const textarea = screen.getByLabelText(/paste tokens/i);
+      fireEvent.change(textarea, { target: { value: "invalid json" } });
+
+      const saveButton = screen.getByRole("button", { name: /save tokens/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+      });
+
+      fireEvent.change(textarea, { target: { value: '{"oauth1": {}}' } });
+
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/app/settings/garmin/page.tsx b/src/app/settings/garmin/page.tsx
index 2c79989..dd581c1 100644
--- a/src/app/settings/garmin/page.tsx
+++ b/src/app/settings/garmin/page.tsx
@@ -1,13 +1,306 @@
 // ABOUTME: Garmin connection settings page.
-// ABOUTME: Allows users to paste OAuth tokens from the bootstrap script.
+// ABOUTME: Allows users to paste OAuth tokens from the bootstrap script and manage connection.
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+interface GarminStatus {
+  connected: boolean;
+  daysUntilExpiry: number | null;
+  expired: boolean;
+  warningLevel: "warning" | "critical" | null;
+}
+
 export default function GarminSettingsPage() {
+  const [status, setStatus] = useState<GarminStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [tokenInput, setTokenInput] = useState("");
+
+  const fetchStatus = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/garmin/status");
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to fetch status");
+      }
+
+      setStatus(data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "An error occurred";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  const handleTokenChange = (value: string) => {
+    setTokenInput(value);
+    if (error) {
+      setError(null);
+    }
+    if (success) {
+      setSuccess(null);
+    }
+  };
+
+  const validateTokens = (
+    input: string,
+  ): { valid: true; data: object } | { valid: false; error: string } => {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(input);
+    } catch {
+      return { valid: false, error: "Invalid JSON format" };
+    }
+
+    if (typeof parsed !== "object" || parsed === null) {
+      return { valid: false, error: "Invalid JSON format" };
+    }
+
+    const tokens = parsed as Record<string, unknown>;
+
+    if (!tokens.oauth1) {
+      return { valid: false, error: "oauth1 is required" };
+    }
+
+    if (!tokens.oauth2) {
+      return { valid: false, error: "oauth2 is required" };
+    }
+
+    if (!tokens.expires_at) {
+      return { valid: false, error: "expires_at is required" };
+    }
+
+    return { valid: true, data: tokens };
+  };
+
+  const handleSaveTokens = async () => {
+    const validation = validateTokens(tokenInput);
+    if (!validation.valid) {
+      setError(validation.error);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch("/api/garmin/tokens", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: tokenInput,
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save tokens");
+      }
+
+      setSuccess("Tokens saved successfully");
+      setTokenInput("");
+      await fetchStatus();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "An error occurred";
+      setError(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDisconnect = async () => {
+    setDisconnecting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch("/api/garmin/tokens", {
+        method: "DELETE",
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to disconnect");
+      }
+
+      setSuccess("Garmin disconnected successfully");
+      await fetchStatus();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "An error occurred";
+      setError(message);
+    } finally {
+      setDisconnecting(false);
+    }
+  };
+
+  const showTokenInput = !status?.connected || status?.expired;
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-8">
+        <h1 className="text-2xl font-bold mb-8">
+          Settings &gt; Garmin Connection
+        </h1>
+        <p className="text-gray-500">Loading...</p>
+      </div>
+    );
+  }
+
   return (
     <div className="container mx-auto p-8">
-      <h1 className="text-2xl font-bold mb-8">
-        Settings &gt; Garmin Connection
-      </h1>
-      {/* Garmin token input will be implemented here */}
-      <p className="text-gray-500">Garmin settings placeholder</p>
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-2xl font-bold">Settings &gt; Garmin Connection</h1>
+        <Link
+          href="/settings"
+          className="text-blue-600 hover:text-blue-700 hover:underline"
+        >
+          Back to Settings
+        </Link>
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6"
+        >
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6">
+          {success}
+        </div>
+      )}
+
+      <div className="max-w-lg space-y-6">
+        {/* Connection Status Section */}
+        <div className="border border-gray-200 rounded-lg p-6">
+          <h2 className="text-lg font-semibold mb-4">Connection Status</h2>
+
+          {status?.connected && !status.expired ? (
+            <div className="space-y-4">
+              <div className="flex items-center space-x-2">
+                <span className="w-3 h-3 bg-green-500 rounded-full" />
+                <span className="text-green-700 font-medium">Connected</span>
+              </div>
+
+              {status.warningLevel && (
+                <div
+                  data-testid="expiry-warning"
+                  className={`px-4 py-3 rounded ${
+                    status.warningLevel === "critical"
+                      ? "bg-red-50 border border-red-200 text-red-700"
+                      : "bg-yellow-50 border border-yellow-200 text-yellow-700"
+                  }`}
+                >
+                  {status.warningLevel === "critical"
+                    ? "Token expires soon! Please refresh your tokens."
+                    : "Token expiring soon. Consider refreshing your tokens."}
+                </div>
+              )}
+
+              <p className="text-gray-600">
+                Token expires in{" "}
+                <span className="font-medium">
+                  {status.daysUntilExpiry} days
+                </span>
+              </p>
+
+              <button
+                type="button"
+                onClick={handleDisconnect}
+                disabled={disconnecting}
+                className="rounded-md bg-red-600 px-4 py-2 text-white font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:bg-red-400 disabled:cursor-not-allowed"
+              >
+                {disconnecting ? "Disconnecting..." : "Disconnect"}
+              </button>
+            </div>
+          ) : status?.expired ? (
+            <div className="space-y-4">
+              <div className="flex items-center space-x-2">
+                <span className="w-3 h-3 bg-red-500 rounded-full" />
+                <span className="text-red-700 font-medium">Token Expired</span>
+              </div>
+              <p className="text-gray-600">
+                Your Garmin tokens have expired. Please generate new tokens and
+                paste them below.
+              </p>
+            </div>
+          ) : (
+            <div className="flex items-center space-x-2">
+              <span className="w-3 h-3 bg-gray-400 rounded-full" />
+              <span className="text-gray-600">Not Connected</span>
+            </div>
+          )}
+        </div>
+
+        {/* Token Input Section */}
+        {showTokenInput && (
+          <div className="border border-gray-200 rounded-lg p-6">
+            <h2 className="text-lg font-semibold mb-4">Connect Garmin</h2>
+
+            <div className="space-y-4">
+              <div className="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded text-sm">
+                <p className="font-medium mb-2">Instructions:</p>
+                <ol className="list-decimal list-inside space-y-1">
+                  <li>
+                    Run{" "}
+                    <code className="bg-blue-100 px-1 rounded">
+                      python3 scripts/garmin_auth.py
+                    </code>{" "}
+                    locally
+                  </li>
+                  <li>Copy the JSON output</li>
+                  <li>Paste it in the field below</li>
+                </ol>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="tokenInput"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Paste Tokens (JSON)
+                </label>
+                <textarea
+                  id="tokenInput"
+                  rows={8}
+                  value={tokenInput}
+                  onChange={(e) => handleTokenChange(e.target.value)}
+                  disabled={saving}
+                  placeholder='{"oauth1": {...}, "oauth2": {...}, "expires_at": "..."}'
+                  className="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm"
+                />
+              </div>
+
+              <button
+                type="button"
+                onClick={handleSaveTokens}
+                disabled={saving || !tokenInput.trim()}
+                className="w-full rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400 disabled:cursor-not-allowed"
+              >
+                {saving ? "Saving..." : "Save Tokens"}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/app/settings/page.test.tsx b/src/app/settings/page.test.tsx
index 6873d50..5f9d200 100644
--- a/src/app/settings/page.test.tsx
+++ b/src/app/settings/page.test.tsx
@@ -100,6 +100,39 @@ describe("SettingsPage", () => {
         expect(screen.getByText("test@example.com")).toBeInTheDocument();
       });
     });
+
+    it("renders Garmin connection section with manage link", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/garmin connection/i)).toBeInTheDocument();
+        expect(screen.getByRole("link", { name: /manage/i })).toHaveAttribute(
+          "href",
+          "/settings/garmin",
+        );
+      });
+    });
+
+    it("shows not connected when garminConnected is false", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/not connected/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows connected when garminConnected is true", async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ ...mockUser, garminConnected: true }),
+      });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/connected to garmin/i)).toBeInTheDocument();
+      });
+    });
   });
 
   describe("data loading", () => {
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index f0fe5cd..2cfa3a5 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -144,6 +144,27 @@ export default function SettingsPage() {
           <p className="mt-1 text-gray-900">{userData?.email}</p>
         </div>
 
+        <div className="mb-6 p-4 border border-gray-200 rounded-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="block text-sm font-medium text-gray-700">
+                Garmin Connection
+              </span>
+              <p className="mt-1 text-sm text-gray-500">
+                {userData?.garminConnected
+                  ? "Connected to Garmin"
+                  : "Not connected"}
+              </p>
+            </div>
+            <Link
+              href="/settings/garmin"
+              className="text-blue-600 hover:text-blue-700 hover:underline text-sm"
+            >
+              Manage
+            </Link>
+          </div>
+        </div>
+
         <form onSubmit={handleSubmit} className="space-y-6">
           <div>
             <label