diff --git a/src/app/explore/ExplorePageClient.tsx b/src/app/explore/ExplorePageClient.tsx
index 5e15fe0..695f5e4 100644
--- a/src/app/explore/ExplorePageClient.tsx
+++ b/src/app/explore/ExplorePageClient.tsx
@@ -9,6 +9,7 @@ import { Footer } from "@/components/Footer";
 import { IntentStatusBadge } from "@/components/IntentStatusBadge";
 import { SkeletonCard } from "@/components/Skeleton";
 import { useLiveIntents } from "@/hooks/useLiveIntents";
+import { useTranslation } from "@/lib/i18n/I18nProvider";
 import { timeAgo } from "@/lib/time";
 import { CHAINS } from "@/lib/marketData";
 import { sanitizeDisplayText } from "@/lib/textSafety";
@@ -32,6 +33,7 @@ function readSort(value: string | null): SortOption {
 }
 
 export default function ExplorePageClient() {
+  const { t } = useTranslation();
   const { intents, isLoading, error, isLive } = useLiveIntents();
   const router = useRouter();
   const pathname = usePathname();
@@ -55,6 +57,13 @@ export default function ExplorePageClient() {
   const setChainFilter = (value: string) => updateQuery({ chain: value });
   const setSort = (value: SortOption) => updateQuery({ sort: value });
 
+  const isFiltered = statusFilter !== "all" || chainFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+    setChainFilter("all");
+  };
+
   const filtered = useMemo(() => {
     let result = intents;
     if (statusFilter !== "all") {
@@ -102,7 +111,7 @@ export default function ExplorePageClient() {
           </div>
           <div className="flex items-center gap-1.5 text-[10px] text-vx-muted px-1 pt-1 flex-shrink-0">
             <span aria-hidden="true" className={`state-dot ${isLive ? "bg-vx-sage" : "bg-vx-dim"}`} />
-            {isLive ? "Live" : "Polling"}
+            {isLive ? t("activityFeed.status.live") : t("activityFeed.status.polling")}
           </div>
         </div>
 
@@ -149,7 +158,17 @@ export default function ExplorePageClient() {
             <option value="largest">Largest amount</option>
           </select>
 
-          <span className="text-xs text-vx-muted ml-auto">
+          {isFiltered && (
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="px-3 py-2 rounded-lg border border-vx-sage/40 text-xs font-semibold text-vx-sage hover:border-vx-sage/70 transition-colors focus:outline-none focus:ring-2 focus:ring-vx-sage focus:ring-offset-2 focus:ring-offset-vx-ink"
+            >
+              {t("explore.empty.clearFilters")}
+            </button>
+          )}
+
+          <span className="text-xs text-vx-muted ml-auto" aria-live="polite" aria-atomic="true">
             {filtered.length} intent{filtered.length === 1 ? "" : "s"}
           </span>
         </div>
@@ -158,12 +177,23 @@ export default function ExplorePageClient() {
         {isLoading && intents.length === 0 ? (
           <SkeletonCard rows={4} rowHeight="h-14" />
         ) : error ? (
-          <div className="card p-8 text-center text-sm text-vx-muted">
-            Couldn&apos;t load intents right now. Try again shortly.
+          <div className="card p-8 text-center">
+            <p className="text-sm font-medium text-vx-text mb-1">{t("explore.error.title")}</p>
+            <p className="text-xs text-vx-muted max-w-xs mx-auto">{t("explore.error.message")}</p>
           </div>
         ) : filtered.length === 0 ? (
-          <div className="card p-8 text-center text-sm text-vx-muted">
-            No intents match your filters.
+          <div className="card p-8 text-center">
+            <p className="text-sm font-medium text-vx-text mb-1">{t("explore.empty.title")}</p>
+            <p className="text-xs text-vx-muted max-w-xs mx-auto mb-4">{t("explore.empty.message")}</p>
+            {isFiltered && (
+              <button
+                type="button"
+                onClick={clearFilters}
+                className="inline-block px-4 py-2 rounded-lg border border-vx-sage/40 text-vx-text text-sm hover:border-vx-sage/70 transition-colors focus:outline-none focus:ring-2 focus:ring-vx-sage focus:ring-offset-2 focus:ring-offset-vx-ink"
+              >
+                {t("explore.empty.clearFilters")}
+              </button>
+            )}
           </div>
         ) : (
           <div
diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx
index 2777355..cb9040f 100644
--- a/src/app/explore/page.tsx
+++ b/src/app/explore/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+import dynamic from "next/dynamic";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 994c994..cd30f09 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -98,6 +98,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <IntentStatusWatcher />
           {children}
           <ToastViewport />
+          <ConnectivityBanner />
         </I18nProvider>
       </body>
     </html>
diff --git a/src/app/my-intents/page.tsx b/src/app/my-intents/page.tsx
index 1a83f0d..34bad57 100644
--- a/src/app/my-intents/page.tsx
+++ b/src/app/my-intents/page.tsx
@@ -41,6 +41,7 @@ function swapAgainHref(item: FeedItem): string {
 }
 
 export default function MyIntentsPage() {
+  const { t } = useTranslation();
   const address = useWalletStore((s) => s.address);
   const isConnected = useWalletStore((s) => s.isConnected);
 
@@ -54,6 +55,13 @@ export default function MyIntentsPage() {
 
   const { intent: expandedIntent, isLoading: expandedLoading, error: expandedError } = useIntent(expandedId);
 
+  const isFiltered = statusFilter !== "all" || chainFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+    setChainFilter("all");
+  };
+
   const filtered = useMemo(() => {
     let result = intents;
     if (statusFilter !== "all") result = result.filter((i) => i.status === statusFilter);
@@ -104,7 +112,7 @@ export default function MyIntentsPage() {
           {isConnected && (
             <div className="flex items-center gap-1.5 text-[10px] text-vx-muted px-1 pt-1 flex-shrink-0">
               <span aria-hidden="true" className={`state-dot ${isLive ? "bg-vx-sage" : "bg-vx-dim"}`} />
-              {isLive ? "Live" : "Polling"}
+              {isLive ? t("activityFeed.status.live") : t("activityFeed.status.polling")}
             </div>
           )}
         </div>
@@ -178,7 +186,7 @@ export default function MyIntentsPage() {
                 Export CSV
               </button>
 
-              <span className="text-xs text-vx-muted" aria-live="polite" aria-atomic="true">
+              <span className="text-xs text-vx-muted ml-auto" aria-live="polite" aria-atomic="true">
                 {filtered.length} intent{filtered.length === 1 ? "" : "s"}
               </span>
             </fieldset>
@@ -221,18 +229,37 @@ export default function MyIntentsPage() {
                 </button>
               </div>
             ) : intents.length === 0 ? (
-              <div role="status" className="card p-8 text-center text-sm text-vx-muted">
-                <p className="mb-4">You haven&apos;t submitted any swaps yet.</p>
+              /* Wallet is connected but no swaps have been submitted at all */
+              <div role="status" className="card p-8 text-center">
+                <p className="text-sm font-medium text-vx-text mb-2">
+                  {t("myIntents.empty.title")}
+                </p>
+                <p className="text-xs text-vx-muted max-w-xs mx-auto mb-4">
+                  {t("myIntents.empty.message")}
+                </p>
                 <Link
                   href="/"
-                  className="inline-block px-4 py-2 rounded-lg border border-vx-sage/40 text-vx-text text-sm hover:border-vx-sage/70 transition-colors focus:outline-none focus:ring-2 focus:ring-vx-sage focus:ring-offset-2 focus:ring-offset-vx-ink rounded"
+                  className="inline-block px-4 py-2 rounded-lg border border-vx-sage/40 text-vx-text text-sm hover:border-vx-sage/70 transition-colors focus:outline-none focus:ring-2 focus:ring-vx-sage focus:ring-offset-2 focus:ring-offset-vx-ink"
                 >
-                  Make your first swap
+                  {t("myIntents.empty.cta")}
                 </Link>
               </div>
             ) : filtered.length === 0 ? (
-              <div role="status" className="card p-8 text-center text-sm text-vx-muted">
-                No intents match your filters.
+              /* Intents exist but the active filter combination matches nothing */
+              <div role="status" className="card p-8 text-center">
+                <p className="text-sm font-medium text-vx-text mb-2">
+                  {t("myIntents.filterEmpty.title")}
+                </p>
+                <p className="text-xs text-vx-muted max-w-xs mx-auto mb-4">
+                  {t("myIntents.filterEmpty.message")}
+                </p>
+                <button
+                  type="button"
+                  onClick={clearFilters}
+                  className="inline-block px-4 py-2 rounded-lg border border-vx-sage/40 text-vx-text text-sm hover:border-vx-sage/70 transition-colors focus:outline-none focus:ring-2 focus:ring-vx-sage focus:ring-offset-2 focus:ring-offset-vx-ink"
+                >
+                  {t("myIntents.filterEmpty.clearFilters")}
+                </button>
               </div>
             ) : (
               <div data-address={address} data-testid="intents-list" className="space-y-2" role="list">
@@ -317,6 +344,33 @@ export default function MyIntentsPage() {
                 })}
               </div>
             )}
+
+            {/* Pagination */}
+            {pageCount > 1 && filtered.length > 0 && (
+              <div className="flex items-center justify-center gap-4 mt-6">
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page === 1}
+                  className="px-3 py-1.5 text-xs rounded-lg border border-vx-border text-vx-muted
+                             hover:text-vx-text hover:border-vx-sage/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                >
+                  Previous
+                </button>
+                <span className="text-xs text-vx-muted num">
+                  Page {page} of {pageCount}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.min(pageCount, p + 1))}
+                  disabled={page === pageCount}
+                  className="px-3 py-1.5 text-xs rounded-lg border border-vx-border text-vx-muted
+                             hover:text-vx-text hover:border-vx-sage/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                >
+                  Next
+                </button>
+              </div>
+            )}
           </>
         )}
       </main>
diff --git a/src/app/solve/[address]/page.tsx b/src/app/solve/[address]/page.tsx
index d6dc4ac..5df6229 100644
--- a/src/app/solve/[address]/page.tsx
+++ b/src/app/solve/[address]/page.tsx
@@ -8,6 +8,7 @@ import { CopyButton } from "@/components/CopyButton";
 import { SkeletonCard } from "@/components/Skeleton";
 import { useSolver } from "@/hooks/useSolver";
 import { useIntentFeed } from "@/hooks/useIntentFeed";
+import { useTranslation } from "@/lib/i18n/I18nProvider";
 import { timeAgo } from "@/lib/time";
 import { CHAINS } from "@/lib/marketData";
 import { isValidStellarPublicKey } from "@/lib/stellarAddress";
@@ -20,6 +21,7 @@ const usdCompact = new Intl.NumberFormat("en-US", {
 });
 
 export default function SolverDetailPage({ params }: { params: { address: string } }) {
+  const { t } = useTranslation();
   const isValidAddress = isValidStellarPublicKey(params.address);
   const { solver, isLoading, error } = useSolver(isValidAddress ? params.address : null);
   const { items: fillHistory, isLoading: historyLoading, error: historyError } = useIntentFeed();
@@ -64,7 +66,7 @@ export default function SolverDetailPage({ params }: { params: { address: string
                     {sanitizeDisplayText(solver.name)}
                   </h1>
                 </div>
-                <div 
+                <div
                   className={`flex-shrink-0 px-2 sm:px-3 py-1 rounded-lg text-xs font-semibold border whitespace-nowrap ${
                     solver.status === "active"
                       ? "bg-vx-sage-bg text-vx-sage border-vx-sage/30"
@@ -117,7 +119,16 @@ export default function SolverDetailPage({ params }: { params: { address: string
               </div>
             </div>
 
-            {/* Fill history section */}
+            {/* ── Solver Timeline ─────────────────────────────────────────── */}
+            <div className="mb-6">
+              <SolverTimeline
+                solverAddress={solver.address}
+                fills={fillHistory}
+                isLoading={historyLoading && fillHistory.length === 0}
+              />
+            </div>
+
+            {/* ── Fill history table ──────────────────────────────────────── */}
             <div className="card overflow-hidden">
               <div className="px-4 sm:px-5 py-3 sm:py-3.5 border-b border-vx-border bg-vx-surface/30">
                 <h2 className="text-sm font-semibold text-vx-text">Recent Fills by Solver</h2>
@@ -134,8 +145,13 @@ export default function SolverDetailPage({ params }: { params: { address: string
                   Couldn&apos;t load fill history right now.
                 </div>
               ) : fillHistory.filter(item => item.solver === solver.address).length === 0 ? (
-                <div className="p-6 sm:p-8 text-center text-sm text-vx-muted">
-                  No fills from this solver in the history.
+                <div className="p-6 sm:p-8 text-center">
+                  <p className="text-sm font-medium text-vx-text mb-1">
+                    {t("solverDetail.fillHistory.empty.title")}
+                  </p>
+                  <p className="text-xs text-vx-muted max-w-xs mx-auto">
+                    {t("solverDetail.fillHistory.empty.message")}
+                  </p>
                 </div>
               ) : (
                 <div className="divide-y divide-vx-line">
@@ -143,8 +159,8 @@ export default function SolverDetailPage({ params }: { params: { address: string
                     .filter(item => item.solver === solver.address)
                     .slice(0, 10)
                     .map(fill => (
-                      <div 
-                        key={fill.id} 
+                      <div
+                        key={fill.id}
                         className="px-4 sm:px-5 py-4 hover:bg-vx-surface/30 transition-colors"
                       >
                         <div className="flex flex-col gap-2">
diff --git a/src/components/ActivityFeed.tsx b/src/components/ActivityFeed.tsx
index b30e844..48b0342 100644
--- a/src/components/ActivityFeed.tsx
+++ b/src/components/ActivityFeed.tsx
@@ -9,8 +9,12 @@ import type { FeedItem } from "@/lib/types";
 import { SkeletonCard } from "./Skeleton";
 
 const CHAIN_COLOR: Record<string, string> = {
-  ethereum: "#627EEA", base: "#0052FF", polygon: "#8247E5",
-  arbitrum: "#12AAFF", optimism: "#FF0420", avalanche: "#E84142",
+  ethereum: "#627EEA",
+  base: "#0052FF",
+  polygon: "#8247E5",
+  arbitrum: "#12AAFF",
+  optimism: "#FF0420",
+  avalanche: "#E84142",
 };
 
 /** Maximum number of activity items shown in the feed. */
@@ -139,7 +143,6 @@ export function ActivityFeedView({ items, isLoading, error, isLive }: ActivityFe
               <span
                 className="text-[10px] text-vx-muted"
                 title={new Date(item.createdAt).toLocaleString()}
-                tabIndex={0}
               >
                 {timeAgo(item.createdAt)}
               </span>
diff --git a/src/components/ConnectivityBanner.test.tsx b/src/components/ConnectivityBanner.test.tsx
new file mode 100644
index 0000000..3c0ebea
--- /dev/null
+++ b/src/components/ConnectivityBanner.test.tsx
@@ -0,0 +1,100 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ConnectivityBanner } from "./ConnectivityBanner";
+
+// Mock useConnectivity so we can control state without real events.
+const mockConnectivity = vi.hoisted(() => ({
+  connectivity: "online" as "online" | "offline",
+  reconnectionCount: 0,
+}));
+
+vi.mock("@/hooks/useConnectivity", () => ({
+  useConnectivity: () => mockConnectivity,
+}));
+
+// ── Tests ──────────────────────────────────────────────────────────────────
+
+describe("ConnectivityBanner", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockConnectivity.connectivity = "online";
+    mockConnectivity.reconnectionCount = 0;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders nothing when the user is online and no prior offline event occurred", () => {
+    const { container } = render(<ConnectivityBanner />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("shows an offline banner when connectivity transitions to offline", async () => {
+    mockConnectivity.connectivity = "offline";
+
+    render(<ConnectivityBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("connectivity-banner")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/you appear to be offline/i)).toBeInTheDocument();
+    expect(screen.getByTestId("connectivity-banner")).toHaveAttribute("data-connectivity", "offline");
+  });
+
+  it("shows a 'back online' message when connectivity is restored", async () => {
+    // Start offline.
+    mockConnectivity.connectivity = "offline";
+    const { rerender } = render(<ConnectivityBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("connectivity-banner")).toBeInTheDocument();
+    });
+
+    // Regain connectivity.
+    mockConnectivity.connectivity = "online";
+    rerender(<ConnectivityBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("connectivity-banner")).toHaveAttribute("data-connectivity", "online");
+    });
+
+    expect(screen.getByText(/back online/i)).toBeInTheDocument();
+  });
+
+  it("automatically dismisses the banner after the grace period on reconnection", async () => {
+    mockConnectivity.connectivity = "offline";
+    const { rerender } = render(<ConnectivityBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("connectivity-banner")).toBeInTheDocument();
+    });
+
+    mockConnectivity.connectivity = "online";
+    rerender(<ConnectivityBanner />);
+
+    // Banner should still be visible immediately after coming back online.
+    await waitFor(() => {
+      expect(screen.getByTestId("connectivity-banner")).toBeInTheDocument();
+    });
+
+    // Fast-forward past the 2500ms auto-dismiss timer.
+    await act(async () => {
+      vi.advanceTimersByTime(3000);
+    });
+
+    expect(screen.queryByTestId("connectivity-banner")).not.toBeInTheDocument();
+  });
+
+  it("has role=status and aria-live=polite for accessibility", async () => {
+    mockConnectivity.connectivity = "offline";
+    render(<ConnectivityBanner />);
+
+    await waitFor(() => {
+      const banner = screen.getByTestId("connectivity-banner");
+      expect(banner).toHaveAttribute("role", "status");
+      expect(banner).toHaveAttribute("aria-live", "polite");
+    });
+  });
+});
diff --git a/src/components/ConnectivityBanner.tsx b/src/components/ConnectivityBanner.tsx
new file mode 100644
index 0000000..23beaca
--- /dev/null
+++ b/src/components/ConnectivityBanner.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useConnectivity } from "@/hooks/useConnectivity";
+
+/**
+ * App-wide offline/connectivity-loss banner.
+ *
+ * Mounts once (in layout.tsx alongside WalletHydrator / ToastViewport) and
+ * listens for browser online/offline events via `useConnectivity`. Shows a
+ * persistent, accessible banner while the user is offline and automatically
+ * dismisses it a moment after connectivity is restored.
+ *
+ * The banner is dismissed automatically on reconnect (after a brief grace
+ * period) and does NOT need a manual close button in the offline state — the
+ * act of coming back online is the dismissal signal.
+ */
+export function ConnectivityBanner() {
+  const { connectivity } = useConnectivity();
+  const [visible, setVisible] = useState(false);
+  const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (connectivity === "offline") {
+      // Cancel any pending dismissal — we've gone offline again.
+      if (dismissTimerRef.current) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+      setVisible(true);
+    } else {
+      // Give the user a moment to see the "back online" state before hiding.
+      dismissTimerRef.current = setTimeout(() => {
+        setVisible(false);
+        dismissTimerRef.current = null;
+      }, 2500);
+    }
+
+    return () => {
+      if (dismissTimerRef.current) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+    };
+  }, [connectivity]);
+
+  if (!visible) return null;
+
+  const isOffline = connectivity === "offline";
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      data-testid="connectivity-banner"
+      data-connectivity={connectivity}
+      className={`fixed bottom-0 left-0 right-0 z-[100] flex items-center justify-center
+                  gap-2 px-4 py-3 text-sm font-medium transition-colors
+                  ${isOffline
+                    ? "bg-amber-500/95 text-amber-950"
+                    : "bg-vx-sage/95 text-vx-ink"
+                  }`}
+    >
+      {isOffline ? (
+        <>
+          {/* Offline icon */}
+          <svg
+            aria-hidden="true"
+            className="w-4 h-4 flex-shrink-0"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
+            <path
+              d="M2 2l12 12M8 3C5.5 3 3.3 4.1 1.8 5.9M14.2 5.9C12.7 4.1 10.5 3 8 3m-3.8 3.9C5.2 6.3 6.5 6 8 6s2.8.3 3.8.9M5.5 9.5C6.2 9.2 7.1 9 8 9s1.8.2 2.5.5M8 12.5a.5.5 0 110-1 .5.5 0 010 1z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span>You appear to be offline — reconnecting&hellip;</span>
+        </>
+      ) : (
+        <>
+          {/* Back-online checkmark */}
+          <svg
+            aria-hidden="true"
+            className="w-4 h-4 flex-shrink-0"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
+            <path
+              d="M2.5 8.5l4 4 7-7"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span>Back online — refreshing data&hellip;</span>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index a1aa3cf..442ec71 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -96,6 +96,7 @@ export function Nav(props: NavProps) {
             <button
               onClick={() => setMobileOpen((open) => !open)}
               aria-expanded={mobileOpen}
+              aria-controls="mobile-nav-panel"
               aria-label={mobileOpen ? getMessage("nav.closeMenu") : getMessage("nav.openMenu")}
               className="md:hidden flex items-center justify-center w-8 h-8 rounded-lg border border-vx-border text-vx-muted hover:text-vx-text transition-colors"
             >
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 61451e2..ef3588f 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { LOCALES, type Locale } from "@/lib/i18n";
 import { useLocale, useSetLocale } from "@/lib/i18n/I18nProvider";
 
@@ -23,6 +23,9 @@ export function SettingsPanel() {
   const locale = useLocale();
   const setLocale = useSetLocale();
 
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
     const preference = stored === "reduce" || stored === "allow" ? stored : "system";
@@ -30,6 +33,43 @@ export function SettingsPanel() {
     applyMotionPreference(preference);
   }, []);
 
+  // Move focus into the panel when it opens.
+  useEffect(() => {
+    if (!open) return;
+    const firstFocusable = panelRef.current?.querySelector<HTMLElement>(
+      "select, button, input, [tabindex]:not([tabindex='-1'])"
+    );
+    firstFocusable?.focus();
+  }, [open]);
+
+  const closePanel = () => {
+    setOpen(false);
+    toggleRef.current?.focus();
+  };
+
+  // Trap Tab focus inside panel; Escape closes it.
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closePanel();
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const focusable = panelRef.current?.querySelectorAll<HTMLElement>(
+      "select, button, input, [tabindex]:not([tabindex='-1'])"
+    );
+    if (!focusable || focusable.length === 0) return;
+    const first = focusable[0]!;
+    const last = focusable[focusable.length - 1]!;
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
   const handleMotionChange = (preference: MotionPreference) => {
     setMotionPreference(preference);
     applyMotionPreference(preference);
@@ -43,10 +83,12 @@ export function SettingsPanel() {
   return (
     <div className="relative">
       <button
+        ref={toggleRef}
         type="button"
-        onClick={() => setOpen((value) => !value)}
+        onClick={() => (open ? closePanel() : setOpen(true))}
         aria-expanded={open}
         aria-controls="settings-panel"
+        aria-haspopup="dialog"
         className="px-3 py-1.5 text-xs rounded-lg border border-vx-border text-vx-muted hover:text-vx-text hover:border-vx-sage/50 transition-colors"
       >
         Settings
@@ -54,16 +96,21 @@ export function SettingsPanel() {
 
       {open && (
         <div
+          ref={panelRef}
           id="settings-panel"
-          className="absolute right-0 mt-2 w-64 rounded-xl border border-vx-border bg-vx-card p-4 shadow-xl"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Settings"
+          onKeyDown={handleKeyDown}
+          className="absolute right-0 mt-2 w-64 rounded-xl border border-vx-border bg-vx-card p-4 shadow-xl z-50"
         >
           <div className="space-y-4">
             <div>
-              <label htmlFor="locale-switcher" className="block text-xs font-medium text-vx-muted">
+              <label htmlFor="settings-locale-switcher" className="block text-xs font-medium text-vx-muted">
                 Language
               </label>
               <select
-                id="locale-switcher"
+                id="settings-locale-switcher"
                 value={locale}
                 onChange={(e) => setLocale(e.target.value as Locale)}
                 aria-label="Switch language"
diff --git a/src/components/SolverTimeline.test.tsx b/src/components/SolverTimeline.test.tsx
new file mode 100644
index 0000000..69214e7
--- /dev/null
+++ b/src/components/SolverTimeline.test.tsx
@@ -0,0 +1,169 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SolverTimeline } from "./SolverTimeline";
+import type { FeedItem } from "@/lib/types";
+
+const SOLVER_ADDR = "GBRPYHIL2CI3WHZDTOOQFC6EB4CGQOFN4QO5JTJVSXBLEDSOMETHING";
+const OTHER_ADDR = "GDIFFERENTADDRESS000000000000000000000000000000000000000";
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function makeFill(overrides: Partial<FeedItem> = {}): FeedItem {
+  return {
+    id: `fill-${Math.random()}`,
+    srcChain: "ethereum",
+    srcToken: "USDC",
+    srcAmount: "100",
+    dstToken: "XLM",
+    solver: SOLVER_ADDR,
+    status: "filled",
+    createdAt: new Date().toISOString(),
+    ...overrides,
+  };
+}
+
+function makeWeeklyFills(count: number): FeedItem[] {
+  return Array.from({ length: count }, (_, i) =>
+    makeFill({
+      id: `fill-${i}`,
+      // Space fills ~1 week apart so they land in distinct weekly buckets.
+      createdAt: new Date(Date.now() - i * 7 * 24 * 60 * 60 * 1000).toISOString(),
+    })
+  );
+}
+
+// ── Tests ──────────────────────────────────────────────────────────────────
+
+describe("SolverTimeline", () => {
+  it("shows a loading skeleton when isLoading is true", () => {
+    const { container } = render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={[]} isLoading />
+    );
+    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
+    // The full timeline content should not be present.
+    expect(screen.queryByText("Solver Timeline")).not.toBeInTheDocument();
+  });
+
+  it("renders the 'just getting started' empty state when there are no fills", () => {
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={[]} />
+    );
+    expect(screen.getByText("Solver Timeline")).toBeInTheDocument();
+    expect(screen.getByText("Just getting started")).toBeInTheDocument();
+    expect(screen.getByText(/hasn't filled any intents yet/)).toBeInTheDocument();
+  });
+
+  it("ignores fills from other solvers in empty-state calculation", () => {
+    const fills = [makeFill({ solver: OTHER_ADDR })];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    // Should still show empty state because no fills belong to SOLVER_ADDR.
+    expect(screen.getByText("Just getting started")).toBeInTheDocument();
+  });
+
+  it("renders sparse state with a single fill without a sparkline polyline", () => {
+    const fills = [makeFill()];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("Solver Timeline")).toBeInTheDocument();
+    // Sparse fallback text instead of a chart.
+    expect(screen.getByText(/chart will populate as more data arrives/)).toBeInTheDocument();
+    // Should NOT render an SVG sparkline for sparse data.
+    expect(document.querySelector("polyline")).not.toBeInTheDocument();
+  });
+
+  it("shows a first-fill milestone for sparse data", () => {
+    const fills = [makeFill({ createdAt: "2025-03-10T12:00:00Z" })];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("First fill")).toBeInTheDocument();
+  });
+
+  it("renders the SVG sparkline for rich data (2+ weekly buckets)", () => {
+    const fills = makeWeeklyFills(4);
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    // The polyline element should exist when there are multiple weekly buckets.
+    // (It's aria-hidden but still in the DOM.)
+    const polylines = document.querySelectorAll("polyline");
+    expect(polylines.length).toBeGreaterThan(0);
+  });
+
+  it("provides a screen-reader accessible text summary for rich data", () => {
+    const fills = makeWeeklyFills(4);
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    // The sr-only paragraph should contain a meaningful summary.
+    const srParagraph = document.querySelector(".sr-only");
+    expect(srParagraph).toBeTruthy();
+    expect(srParagraph?.textContent).toMatch(/fill/i);
+  });
+
+  it("shows the 5-fills milestone when solver has >= 5 fills", () => {
+    const fills = makeWeeklyFills(5);
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("5 fills milestone")).toBeInTheDocument();
+  });
+
+  it("does not show the 5-fills milestone for fewer than 5 fills", () => {
+    const fills = makeWeeklyFills(3);
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.queryByText("5 fills milestone")).not.toBeInTheDocument();
+  });
+
+  it("shows the 10-fills milestone when solver has >= 10 fills", () => {
+    const fills = makeWeeklyFills(10);
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("10 fills milestone")).toBeInTheDocument();
+  });
+
+  it("displays correct summary stats", () => {
+    const fills = [
+      makeFill({ status: "filled" }),
+      makeFill({ status: "filled" }),
+      makeFill({ status: "failed" }),
+    ];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("3")).toBeInTheDocument(); // Total fills
+    expect(screen.getByText("2")).toBeInTheDocument(); // Successful
+    expect(screen.getByText("67%")).toBeInTheDocument(); // 2/3 rounded
+  });
+
+  it("shows a 'most recent fill' milestone when there are multiple fills", () => {
+    const fills = [
+      makeFill({ id: "old", createdAt: "2025-01-01T00:00:00Z" }),
+      makeFill({ id: "new", createdAt: "2025-06-15T00:00:00Z" }),
+    ];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    expect(screen.getByText("Most recent fill")).toBeInTheDocument();
+  });
+
+  it("only counts fills belonging to the target solver address", () => {
+    const fills = [
+      makeFill({ solver: SOLVER_ADDR, status: "filled" }),
+      makeFill({ solver: OTHER_ADDR, status: "filled" }),
+      makeFill({ solver: OTHER_ADDR, status: "filled" }),
+    ];
+    render(
+      <SolverTimeline solverAddress={SOLVER_ADDR} fills={fills} />
+    );
+    // Only 1 fill belongs to SOLVER_ADDR — should show "1" in Total fills.
+    const statCells = screen.getAllByText("1");
+    expect(statCells.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/components/SolverTimeline.tsx b/src/components/SolverTimeline.tsx
new file mode 100644
index 0000000..3a6e4f5
--- /dev/null
+++ b/src/components/SolverTimeline.tsx
@@ -0,0 +1,374 @@
+"use client";
+
+import { useMemo } from "react";
+import type { FeedItem } from "@/lib/types";
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export type SolverTimelineProps = {
+  /** The solver whose fill history to visualise. */
+  solverAddress: string;
+  /**
+   * All feed items — the component filters to the solver's fills itself.
+   * Passing the full feed (already loaded by the page) avoids a second fetch.
+   */
+  fills: FeedItem[];
+  /** True while the parent is still fetching. */
+  isLoading?: boolean;
+};
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+/** Group fills by ISO week (YYYY-Wnn). Returns an array of {week, count} sorted oldest→newest. */
+function groupByWeek(items: FeedItem[]): Array<{ week: string; count: number }> {
+  const map = new Map<string, number>();
+  for (const item of items) {
+    const d = new Date(item.createdAt);
+    // ISO week number
+    const dayOfYear = Math.floor(
+      (d.getTime() - new Date(d.getFullYear(), 0, 0).getTime()) / 86_400_000
+    );
+    const week = `${d.getFullYear()}-W${String(Math.ceil(dayOfYear / 7)).padStart(2, "0")}`;
+    map.set(week, (map.get(week) ?? 0) + 1);
+  }
+  return Array.from(map.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([week, count]) => ({ week, count }));
+}
+
+const SPARKLINE_W = 280;
+const SPARKLINE_H = 48;
+const DOT_R = 3;
+const MARGIN = DOT_R + 2;
+
+/** Convert weekly bucket counts to SVG polyline points. */
+function toPoints(buckets: Array<{ count: number }>): string {
+  if (buckets.length === 0) return "";
+  const maxCount = Math.max(...buckets.map(b => b.count), 1);
+  const step = (SPARKLINE_W - 2 * MARGIN) / Math.max(buckets.length - 1, 1);
+  return buckets
+    .map((b, i) => {
+      const x = MARGIN + i * step;
+      const y = SPARKLINE_H - MARGIN - ((b.count / maxCount) * (SPARKLINE_H - 2 * MARGIN));
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(" ");
+}
+
+/** Return a short human-readable label for an ISO week string like "2025-W32". */
+function weekLabel(isoWeek: string): string {
+  // Parse the year and week number to derive the Monday of that week.
+  const [yearStr, weekStr] = isoWeek.split("-W");
+  const year = parseInt(yearStr ?? "2025", 10);
+  const week = parseInt(weekStr ?? "1", 10);
+  // Jan 4 is always in week 1 of its year (ISO 8601).
+  const jan4 = new Date(year, 0, 4);
+  const monday = new Date(jan4.getTime() + (week - 1) * 7 * 86_400_000);
+  // Snap to that week's Monday.
+  const dayOfWeek = monday.getDay(); // 0=Sun
+  monday.setDate(monday.getDate() - ((dayOfWeek + 6) % 7));
+  return monday.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+// ── Component ──────────────────────────────────────────────────────────────
+
+export function SolverTimeline({ solverAddress, fills, isLoading }: SolverTimelineProps) {
+  // ── Derive solver-specific fills ────────────────────────────────────────
+  const solverFills = useMemo(
+    () => fills.filter(f => f.solver === solverAddress),
+    [fills, solverAddress]
+  );
+
+  const buckets = useMemo(() => groupByWeek(solverFills), [solverFills]);
+
+  // ── Milestones ──────────────────────────────────────────────────────────
+  const firstFill = useMemo(
+    () =>
+      solverFills.length > 0
+        ? solverFills.reduce((a, b) =>
+            new Date(a.createdAt) < new Date(b.createdAt) ? a : b
+          )
+        : null,
+    [solverFills]
+  );
+
+  const latestFill = useMemo(
+    () =>
+      solverFills.length > 0
+        ? solverFills.reduce((a, b) =>
+            new Date(a.createdAt) > new Date(b.createdAt) ? a : b
+          )
+        : null,
+    [solverFills]
+  );
+
+  const successCount = useMemo(
+    () => solverFills.filter(f => f.status === "filled").length,
+    [solverFills]
+  );
+
+  // ── Skeleton ─────────────────────────────────────────────────────────────
+  if (isLoading) {
+    return (
+      <div className="card overflow-hidden">
+        <div className="px-4 sm:px-5 py-3 sm:py-3.5 border-b border-vx-border bg-vx-surface/30">
+          <div className="h-4 w-32 bg-vx-surface rounded animate-pulse" />
+        </div>
+        <div className="p-4 sm:p-5 space-y-3">
+          <div className="h-12 bg-vx-surface rounded animate-pulse" />
+          <div className="h-3 w-3/4 bg-vx-surface rounded animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+
+  // ── Empty / just-getting-started ─────────────────────────────────────────
+  if (solverFills.length === 0) {
+    return (
+      <div className="card overflow-hidden">
+        <div className="px-4 sm:px-5 py-3 sm:py-3.5 border-b border-vx-border bg-vx-surface/30">
+          <h2 className="text-sm font-semibold text-vx-text">Solver Timeline</h2>
+        </div>
+        <div className="p-6 sm:p-8 text-center">
+          <div aria-hidden="true" className="mb-3 text-2xl">🌱</div>
+          <p className="text-sm font-medium text-vx-text mb-1">Just getting started</p>
+          <p className="text-xs text-vx-muted max-w-xs mx-auto">
+            This solver hasn&apos;t filled any intents yet. Once they start filling, a
+            week-by-week volume trend will appear here.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Sparse data (1–2 fills) — still render but without a polyline curve ──
+  const hasSufficientData = buckets.length >= 2;
+
+  // Pre-compute sparkline geometry for rich data path.
+  const points = hasSufficientData ? toPoints(buckets) : "";
+  const maxCount = Math.max(...buckets.map(b => b.count), 1);
+  const step = (SPARKLINE_W - 2 * MARGIN) / Math.max(buckets.length - 1, 1);
+
+  // ── Accessible text summary ──────────────────────────────────────────────
+  const summaryText = [
+    `Solver timeline: ${solverFills.length} fill${solverFills.length !== 1 ? "s" : ""} total`,
+    firstFill
+      ? `first fill ${new Date(firstFill.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`
+      : null,
+    latestFill && latestFill.id !== firstFill?.id
+      ? `most recent fill ${new Date(latestFill.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`
+      : null,
+    `${successCount} successful fill${successCount !== 1 ? "s" : ""}`,
+    hasSufficientData
+      ? `weekly fill counts: ${buckets.map(b => `${weekLabel(b.week)}: ${b.count}`).join(", ")}`
+      : null,
+  ]
+    .filter(Boolean)
+    .join(". ");
+
+  return (
+    <div className="card overflow-hidden">
+      {/* Header */}
+      <div className="px-4 sm:px-5 py-3 sm:py-3.5 border-b border-vx-border bg-vx-surface/30">
+        <h2 className="text-sm font-semibold text-vx-text">Solver Timeline</h2>
+        <p className="text-[10px] text-vx-muted mt-0.5">
+          Based on available feed data — registration date not yet exposed by the API
+        </p>
+      </div>
+
+      <div className="p-4 sm:p-5 space-y-5">
+        {/* Milestones list */}
+        <ol className="relative border-l border-vx-border ml-2 space-y-3" aria-label="Solver milestones">
+          {firstFill && (
+            <li className="ml-4">
+              <span
+                aria-hidden="true"
+                className="absolute -left-[5px] top-1 w-2.5 h-2.5 rounded-full bg-vx-sage border-2 border-vx-ink"
+              />
+              <p className="text-xs font-semibold text-vx-text">
+                First fill
+                <span className="text-vx-muted ml-1 font-normal">
+                  (proxy for registration — earliest known fill)
+                </span>
+              </p>
+              <time
+                dateTime={firstFill.createdAt}
+                className="text-[10px] text-vx-muted num"
+              >
+                {new Date(firstFill.createdAt).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </time>
+              <p className="text-[10px] text-vx-muted mt-0.5">
+                {firstFill.srcAmount} {firstFill.srcToken} → {firstFill.dstToken}
+              </p>
+            </li>
+          )}
+
+          {solverFills.length >= 5 && (
+            <li className="ml-4">
+              <span
+                aria-hidden="true"
+                className="absolute -left-[5px] w-2.5 h-2.5 rounded-full bg-vx-lav border-2 border-vx-ink"
+              />
+              <p className="text-xs font-semibold text-vx-text">5 fills milestone</p>
+              <p className="text-[10px] text-vx-muted">Gaining traction</p>
+            </li>
+          )}
+
+          {solverFills.length >= 10 && (
+            <li className="ml-4">
+              <span
+                aria-hidden="true"
+                className="absolute -left-[5px] w-2.5 h-2.5 rounded-full bg-amber-400 border-2 border-vx-ink"
+              />
+              <p className="text-xs font-semibold text-vx-text">10 fills milestone</p>
+              <p className="text-[10px] text-vx-muted">Established solver</p>
+            </li>
+          )}
+
+          {latestFill && latestFill.id !== firstFill?.id && (
+            <li className="ml-4">
+              <span
+                aria-hidden="true"
+                className="absolute -left-[5px] w-2.5 h-2.5 rounded-full bg-vx-sage/50 border-2 border-vx-ink"
+              />
+              <p className="text-xs font-semibold text-vx-text">Most recent fill</p>
+              <time
+                dateTime={latestFill.createdAt}
+                className="text-[10px] text-vx-muted num"
+              >
+                {new Date(latestFill.createdAt).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </time>
+            </li>
+          )}
+        </ol>
+
+        {/* Weekly volume sparkline */}
+        <div>
+          <p className="text-[10px] text-vx-muted mb-2 uppercase tracking-wide">
+            Weekly fill volume
+          </p>
+
+          {/* Screen-reader summary — hides the SVG from AT */}
+          <p className="sr-only">{summaryText}</p>
+
+          {hasSufficientData ? (
+            <svg
+              aria-hidden="true"
+              width={SPARKLINE_W}
+              height={SPARKLINE_H}
+              viewBox={`0 0 ${SPARKLINE_W} ${SPARKLINE_H}`}
+              className="w-full h-auto overflow-visible"
+            >
+              {/* Zero baseline */}
+              <line
+                x1={MARGIN}
+                y1={SPARKLINE_H - MARGIN}
+                x2={SPARKLINE_W - MARGIN}
+                y2={SPARKLINE_H - MARGIN}
+                stroke="var(--color-vx-border, #2a2f3e)"
+                strokeWidth="1"
+              />
+
+              {/* Fill area under sparkline */}
+              <defs>
+                <linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="var(--color-vx-sage, #4ade80)" stopOpacity="0.25" />
+                  <stop offset="100%" stopColor="var(--color-vx-sage, #4ade80)" stopOpacity="0" />
+                </linearGradient>
+              </defs>
+              <polyline
+                points={`${MARGIN},${SPARKLINE_H - MARGIN} ${points} ${
+                  MARGIN + (buckets.length - 1) * step
+                },${SPARKLINE_H - MARGIN}`}
+                fill="url(#spark-fill)"
+                stroke="none"
+              />
+
+              {/* Sparkline itself */}
+              <polyline
+                points={points}
+                fill="none"
+                stroke="var(--color-vx-sage, #4ade80)"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+
+              {/* Dots at each data point */}
+              {buckets.map((b, i) => {
+                const x = MARGIN + i * step;
+                const y =
+                  SPARKLINE_H -
+                  MARGIN -
+                  (b.count / maxCount) * (SPARKLINE_H - 2 * MARGIN);
+                return (
+                  <circle
+                    key={b.week}
+                    cx={x.toFixed(1)}
+                    cy={y.toFixed(1)}
+                    r={DOT_R}
+                    fill="var(--color-vx-sage, #4ade80)"
+                    stroke="var(--color-vx-ink, #080C14)"
+                    strokeWidth="1.5"
+                  />
+                );
+              })}
+            </svg>
+          ) : (
+            /* Sparse: just show a single data point with context text */
+            <div className="flex items-center gap-3 py-2">
+              <span
+                aria-hidden="true"
+                className="w-2.5 h-2.5 rounded-full bg-vx-sage flex-shrink-0"
+              />
+              <span className="text-xs text-vx-muted">
+                {solverFills.length} fill{solverFills.length !== 1 ? "s" : ""} —
+                chart will populate as more data arrives
+              </span>
+            </div>
+          )}
+
+          {/* X-axis labels: first and last week */}
+          {hasSufficientData && (
+            <div className="flex justify-between mt-1">
+              <span className="text-[9px] text-vx-muted num">
+                {weekLabel(buckets[0]!.week)}
+              </span>
+              <span className="text-[9px] text-vx-muted num">
+                {weekLabel(buckets[buckets.length - 1]!.week)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Summary stats */}
+        <div className="grid grid-cols-3 gap-3 pt-2 border-t border-vx-border">
+          <div className="text-center">
+            <div className="num text-sm font-semibold text-vx-text">{solverFills.length}</div>
+            <div className="text-[10px] text-vx-muted">Total fills</div>
+          </div>
+          <div className="text-center">
+            <div className="num text-sm font-semibold text-vx-text">{successCount}</div>
+            <div className="text-[10px] text-vx-muted">Successful</div>
+          </div>
+          <div className="text-center">
+            <div className="num text-sm font-semibold text-vx-text">
+              {solverFills.length > 0
+                ? `${Math.round((successCount / solverFills.length) * 100)}%`
+                : "—"}
+            </div>
+            <div className="text-[10px] text-vx-muted">Success rate</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SwapCard.tsx b/src/components/SwapCard.tsx
index a87ca73..37fb216 100644
--- a/src/components/SwapCard.tsx
+++ b/src/components/SwapCard.tsx
@@ -48,9 +48,12 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
 
   const chainToggleRef = useRef<HTMLButtonElement>(null);
   const chainPickerRef = useRef<HTMLDivElement>(null);
+  const tokenToggleRef = useRef<HTMLButtonElement>(null);
+  const tokenPickerRef = useRef<HTMLDivElement>(null);
 
   const chain = CHAINS.find(c => c.id === srcChain) ?? CHAINS[0]!;
 
+  // ── Chain picker helpers ───────────────────────────────────────────────────
   const closeChainPicker = () => {
     setShowChainPicker(false);
     chainToggleRef.current?.focus();
@@ -97,6 +100,7 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
 
   const dstAddressError = dstAddress && !isValidStellarPublicKey(dstAddress) ? t("swap.destination.invalidAddress") : null;
 
+  // ── Derived display values ─────────────────────────────────────────────────
   const dstAmount = quote
     ? parseFloat(quote.dstAmount)
     : srcAmount
@@ -118,6 +122,9 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
     return { kind: "generic" as const };
   })();
 
+  const quoteErrorType = quoteError as { kind?: string } | null | undefined;
+
+  // ── Submission ─────────────────────────────────────────────────────────────
   const submission = useSwapSubmission();
   const isSubmitting = submission.status in SUBMISSION_LABEL_KEY;
   const canSwap = Boolean(srcAmount) && parseFloat(srcAmount) > 0 && !quoting && !isSubmitting && !dstAddressError;
@@ -210,7 +217,7 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
               ref={chainToggleRef}
               type="button"
               onClick={() => setShowChainPicker(true)}
-              aria-haspopup="true"
+              aria-haspopup="dialog"
               aria-expanded={showChainPicker}
               aria-label={t("swap.from.selectChain", { name: chain.name })}
               className="chain-badge cursor-pointer hover:bg-vx-lav/15 transition-colors"
@@ -233,11 +240,13 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
               placeholder={t("swap.from.amountPlaceholder")}
               className="input-swap flex-1"
             />
+            {/* ── Token picker toggle ── */}
             <button
+              ref={tokenToggleRef}
               type="button"
               className="token-btn"
-              onClick={() => setShowTokenPicker(!showTokenPicker)}
-              aria-haspopup="true"
+              onClick={() => setShowTokenPicker(prev => !prev)}
+              aria-haspopup="listbox"
               aria-expanded={showTokenPicker}
               aria-label={t("swap.from.selectToken", { symbol: srcToken.symbol })}
             >
@@ -251,8 +260,15 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
             </button>
           </div>
 
+          {/* ── Token picker inline overlay ── */}
           {showTokenPicker && (
-            <div className="pt-2 border-t border-vx-line space-y-1">
+            <div
+              ref={tokenPickerRef}
+              role="listbox"
+              aria-label={t("swap.from.selectToken", { symbol: srcToken.symbol })}
+              onKeyDown={handleTokenPickerKeyDown}
+              className="pt-2 border-t border-vx-line space-y-1"
+            >
               {(SRC_TOKENS[srcChain] ?? []).map(token => (
                 <button
                   key={token.symbol}
@@ -362,6 +378,7 @@ export function SwapCard({ initialAmount = "", previewQuote, onPreviewSubmit }:
           <input
             id="dst-address"
             type="text"
+            tabIndex={hiddenTabIndex}
             value={dstAddress}
             onChange={e => setDstAddress(e.target.value.trim())}
             placeholder={t("swap.destination.placeholder")}
diff --git a/src/hooks/useConnectivity.test.ts b/src/hooks/useConnectivity.test.ts
new file mode 100644
index 0000000..ef65795
--- /dev/null
+++ b/src/hooks/useConnectivity.test.ts
@@ -0,0 +1,148 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useConnectivity } from "./useConnectivity";
+
+// Mock SWR's global mutate so we can assert it's called on reconnection.
+const mutateMock = vi.fn();
+vi.mock("swr", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("swr")>();
+  return { ...actual, mutate: mutateMock };
+});
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function fireOffline() {
+  window.dispatchEvent(new Event("offline"));
+}
+
+function fireOnline() {
+  window.dispatchEvent(new Event("online"));
+}
+
+// ── Tests ──────────────────────────────────────────────────────────────────
+
+describe("useConnectivity", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mutateMock.mockClear();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("starts online", () => {
+    const { result } = renderHook(() => useConnectivity());
+    expect(result.current.connectivity).toBe("online");
+    expect(result.current.reconnectionCount).toBe(0);
+  });
+
+  it("transitions to offline after the debounce delay on an offline event", async () => {
+    const { result } = renderHook(() => useConnectivity());
+
+    act(() => {
+      fireOffline();
+    });
+
+    // Before debounce fires, still online.
+    expect(result.current.connectivity).toBe("online");
+
+    await act(async () => {
+      vi.advanceTimersByTime(1600); // > OFFLINE_DEBOUNCE_MS (1500ms)
+    });
+
+    expect(result.current.connectivity).toBe("offline");
+  });
+
+  it("does NOT transition to offline if the connection is restored before the debounce fires", async () => {
+    const { result } = renderHook(() => useConnectivity());
+
+    act(() => {
+      fireOffline();
+    });
+
+    // Quickly reconnect before the debounce (1500ms) fires.
+    await act(async () => {
+      vi.advanceTimersByTime(500);
+      fireOnline();
+      vi.advanceTimersByTime(2000);
+    });
+
+    // We never reached the debounce threshold so we stayed online.
+    expect(result.current.connectivity).toBe("online");
+  });
+
+  it("transitions back to online after going offline", async () => {
+    const { result } = renderHook(() => useConnectivity());
+
+    act(() => {
+      fireOffline();
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(1600);
+    });
+
+    expect(result.current.connectivity).toBe("offline");
+
+    act(() => {
+      fireOnline();
+    });
+
+    expect(result.current.connectivity).toBe("online");
+  });
+
+  it("increments reconnectionCount each time connectivity is restored", async () => {
+    const { result } = renderHook(() => useConnectivity());
+
+    // First offline→online cycle
+    act(() => { fireOffline(); });
+    await act(async () => { vi.advanceTimersByTime(1600); });
+    act(() => { fireOnline(); });
+
+    expect(result.current.reconnectionCount).toBe(1);
+
+    // Second cycle
+    act(() => { fireOffline(); });
+    await act(async () => { vi.advanceTimersByTime(1600); });
+    act(() => { fireOnline(); });
+
+    expect(result.current.reconnectionCount).toBe(2);
+  });
+
+  it("calls SWR global mutate exactly once per reconnection", async () => {
+    renderHook(() => useConnectivity());
+
+    act(() => { fireOffline(); });
+    await act(async () => { vi.advanceTimersByTime(1600); });
+    act(() => { fireOnline(); });
+
+    expect(mutateMock).toHaveBeenCalledTimes(1);
+
+    act(() => { fireOffline(); });
+    await act(async () => { vi.advanceTimersByTime(1600); });
+    act(() => { fireOnline(); });
+
+    // Should fire once more — still exactly once per reconnection, not
+    // once per flapping offline event.
+    expect(mutateMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("does NOT call SWR mutate when coming online without having been offline", () => {
+    renderHook(() => useConnectivity());
+
+    // Dispatch an online event without ever having been offline.
+    act(() => { fireOnline(); });
+
+    expect(mutateMock).not.toHaveBeenCalled();
+  });
+
+  it("cleans up event listeners on unmount", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { unmount } = renderHook(() => useConnectivity());
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("offline", expect.any(Function));
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("online", expect.any(Function));
+  });
+});
diff --git a/src/hooks/useConnectivity.ts b/src/hooks/useConnectivity.ts
new file mode 100644
index 0000000..ee959d1
--- /dev/null
+++ b/src/hooks/useConnectivity.ts
@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { mutate } from "swr";
+
+/** How long (ms) a connection loss must persist before we show the banner. */
+const OFFLINE_DEBOUNCE_MS = 1500;
+
+export type ConnectivityState = "online" | "offline";
+
+/**
+ * Tracks browser connectivity via the `online`/`offline` window events.
+ *
+ * Design decisions:
+ * - We deliberately ignore `navigator.onLine` at mount because Safari and
+ *   Firefox sometimes report an incorrect initial value. Instead we only trust
+ *   the event stream, treating the first `offline` event as authoritative.
+ * - We debounce the transition to "offline" by `OFFLINE_DEBOUNCE_MS` to avoid
+ *   showing the banner on transient sub-second blips.
+ * - On regaining connectivity we call SWR's global `mutate()` (no key) which
+ *   revalidates every cached SWR entry at once, so the UI refreshes
+ *   immediately instead of waiting for each hook's own retry timer.
+ *
+ * Returns the current connectivity state and the number of times the
+ * connection has been restored (useful for testing).
+ */
+export function useConnectivity(): {
+  connectivity: ConnectivityState;
+  reconnectionCount: number;
+} {
+  // We start optimistically as "online" — the first `offline` event corrects
+  // this if the browser truly has no network access.
+  const [connectivity, setConnectivity] = useState<ConnectivityState>("online");
+  const [reconnectionCount, setReconnectionCount] = useState(0);
+
+  const offlineTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Track whether we've already gone offline this session so we know when a
+  // subsequent `online` event constitutes a genuine reconnection.
+  const wasOfflineRef = useRef(false);
+
+  const clearOfflineTimer = useCallback(() => {
+    if (offlineTimerRef.current !== null) {
+      clearTimeout(offlineTimerRef.current);
+      offlineTimerRef.current = null;
+    }
+  }, []);
+
+  const handleOffline = useCallback(() => {
+    // Debounce: only mark as offline after the blip threshold has elapsed.
+    clearOfflineTimer();
+    offlineTimerRef.current = setTimeout(() => {
+      wasOfflineRef.current = true;
+      setConnectivity("offline");
+    }, OFFLINE_DEBOUNCE_MS);
+  }, [clearOfflineTimer]);
+
+  const handleOnline = useCallback(() => {
+    // Cancel a pending offline debounce — connectivity was restored before the
+    // timer fired, so there's nothing to show.
+    clearOfflineTimer();
+
+    if (!wasOfflineRef.current) return; // Never actually went offline; nothing to do.
+
+    setConnectivity("online");
+    setReconnectionCount((c) => c + 1);
+
+    // Trigger a coordinated revalidation of all SWR-cached data now that
+    // we're back online, instead of waiting for each hook's own retry timing.
+    mutate(() => true, undefined, { revalidate: true });
+  }, [clearOfflineTimer]);
+
+  useEffect(() => {
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
+    return () => {
+      clearOfflineTimer();
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
+    };
+  }, [handleOffline, handleOnline, clearOfflineTimer]);
+
+  return { connectivity, reconnectionCount };
+}
diff --git a/src/lib/i18n/messages/en.ts b/src/lib/i18n/messages/en.ts
index fc65c3d..6a3c714 100644
--- a/src/lib/i18n/messages/en.ts
+++ b/src/lib/i18n/messages/en.ts
@@ -135,4 +135,39 @@ export const en = {
   "notFound.title": "Page not found",
   "notFound.body": "The page you're looking for doesn't exist, or may have moved.",
   "notFound.backHome": "← Back to Vortex",
+
+  // ── Empty states ──────────────────────────────────────────────────────────
+
+  // /explore — filters match nothing
+  "explore.empty.title": "No intents match your filters",
+  "explore.empty.message": "Try adjusting or clearing your status and chain filters to see more results.",
+  "explore.empty.clearFilters": "Clear filters",
+
+  // /explore — error loading
+  "explore.error.title": "Couldn't load intents",
+  "explore.error.message": "Something went wrong fetching intents. Check your connection and try again.",
+
+  // /my-intents — wallet connected but no intents yet
+  "myIntents.empty.title": "No swaps yet",
+  "myIntents.empty.message": "You haven't submitted any swaps from this wallet. Make your first swap to get started.",
+  "myIntents.empty.cta": "Make your first swap →",
+
+  // /my-intents — filter combination matches nothing
+  "myIntents.filterEmpty.title": "No intents match your filters",
+  "myIntents.filterEmpty.message": "Try a different status or chain filter, or clear all filters to see everything.",
+  "myIntents.filterEmpty.clearFilters": "Clear filters",
+
+  // ActivityFeed — empty on a fresh/quiet deployment
+  "activityFeed.empty.title": "No activity yet",
+  "activityFeed.empty.message": "Waiting for the first swap intents to arrive. Submit a swap to kick things off.",
+  "activityFeed.empty.cta": "Swap now →",
+
+  "activityFeed.status.live": "Live",
+  "activityFeed.status.polling": "Polling",
+  "activityFeed.error.unavailable": "Live feed unavailable right now.",
+  "activityFeed.item.route": "{chain} · via {solver}",
+
+  // solve/[address] — fill history empty
+  "solverDetail.fillHistory.empty.title": "No fills yet",
+  "solverDetail.fillHistory.empty.message": "Once this solver starts accepting and filling intents, their history will appear here.",
 } as const;
diff --git a/src/lib/i18n/messages/es.ts b/src/lib/i18n/messages/es.ts
index 3468c17..e6f8278 100644
--- a/src/lib/i18n/messages/es.ts
+++ b/src/lib/i18n/messages/es.ts
@@ -97,4 +97,39 @@ export const es = {
   "home.chains.stellarDestination": "Stellar (dest.)",
 
   "notFound.backHome": "← Volver a Vortex",
+
+  // ── Estados vacíos ─────────────────────────────────────────────────────────
+
+  // /explore — filtros sin resultados
+  "explore.empty.title": "Ninguna intención coincide con tus filtros",
+  "explore.empty.message": "Intenta ajustar o borrar los filtros de estado y cadena para ver más resultados.",
+  "explore.empty.clearFilters": "Limpiar filtros",
+
+  // /explore — error al cargar
+  "explore.error.title": "No se pudieron cargar las intenciones",
+  "explore.error.message": "Algo salió mal al obtener las intenciones. Verifica tu conexión e inténtalo de nuevo.",
+
+  // /my-intents — sin intenciones aún
+  "myIntents.empty.title": "Sin swaps aún",
+  "myIntents.empty.message": "No has enviado ningún swap desde esta billetera. Haz tu primer swap para empezar.",
+  "myIntents.empty.cta": "Hacer mi primer swap →",
+
+  // /my-intents — filtros sin resultados
+  "myIntents.filterEmpty.title": "Ninguna intención coincide con tus filtros",
+  "myIntents.filterEmpty.message": "Prueba con un filtro de estado o cadena diferente, o limpia todos los filtros para ver todo.",
+  "myIntents.filterEmpty.clearFilters": "Limpiar filtros",
+
+  // ActivityFeed — vacío en despliegue nuevo
+  "activityFeed.empty.title": "Sin actividad aún",
+  "activityFeed.empty.message": "Esperando las primeras intenciones de swap. Envía un swap para comenzar.",
+  "activityFeed.empty.cta": "Hacer swap ahora →",
+
+  "activityFeed.status.live": "En vivo",
+  "activityFeed.status.polling": "Consultando",
+  "activityFeed.error.unavailable": "Feed en vivo no disponible ahora mismo.",
+  "activityFeed.item.route": "{chain} · vía {solver}",
+
+  // solve/[address] — historial de llenados vacío
+  "solverDetail.fillHistory.empty.title": "Sin llenados aún",
+  "solverDetail.fillHistory.empty.message": "Una vez que este solver empiece a aceptar y llenar intenciones, su historial aparecerá aquí.",
 } as const;