diff --git a/.changelog/unreleased/626-changelog-foundations.md b/.changelog/unreleased/626-changelog-foundations.md
new file mode 100644
index 00000000..6f38fe22
--- /dev/null
+++ b/.changelog/unreleased/626-changelog-foundations.md
@@ -0,0 +1,8 @@
+---
+type: added
+area: internal
+pr: 626
+breaking: false
+---
+
+The changelog now has stable release links, semantic category badges, and an on-request what's-new summary from the application navbar.
diff --git a/apps/web/src/features/changelog/changelog.search.test.tsx b/apps/web/src/features/changelog/changelog.search.test.tsx
index 8fe58fa8..a5f44cea 100644
--- a/apps/web/src/features/changelog/changelog.search.test.tsx
+++ b/apps/web/src/features/changelog/changelog.search.test.tsx
@@ -1,7 +1,6 @@
-import { describe, it, expect } from "vitest"
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { highlightMatches, findMatches, matchesQuery } from "./utils.search"
+import { describe, expect, it } from "vitest"
+import { render } from "@testing-library/react"
+import { findMatches, highlightMatches, matchesQuery } from "./utils.search"
 import { HighlightedText } from "./components/HighlightedText"
 
 describe("Search utilities", () => {
@@ -80,9 +79,7 @@ describe("Search utilities", () => {
 
 describe("HighlightedText component", () => {
   it("renders text without highlighting when no query", () => {
-    const { container } = render(
-      <HighlightedText text="hello world" />
-    )
+    const { container } = render(<HighlightedText text="hello world" />)
     expect(container.textContent).toBe("hello world")
   })
 
@@ -129,15 +126,25 @@ describe("HighlightedText component", () => {
 describe("Search in changelog context", () => {
   it("composes search with other filters", () => {
     const entries = [
-      { type: "added" as const, area: "trade" as const, text: "Trigger orders", pr: 1, breaking: false },
-      { type: "fixed" as const, area: "pools" as const, text: "Pool APY calculation", pr: 2, breaking: false },
+      {
+        type: "added" as const,
+        area: "trade" as const,
+        text: "Trigger orders",
+        pr: 1,
+        breaking: false,
+      },
+      {
+        type: "fixed" as const,
+        area: "pools" as const,
+        text: "Pool APY calculation",
+        pr: 2,
+        breaking: false,
+      },
     ]
 
     // Filter by type AND search
     const filtered = entries.filter(
-      (e) =>
-        e.type === "added" &&
-        matchesQuery(e.text, "trigger")
+      (e) => e.type === "added" && matchesQuery(e.text, "trigger")
     )
 
     expect(filtered).toHaveLength(1)
diff --git a/apps/web/src/features/changelog/changelog.test.tsx b/apps/web/src/features/changelog/changelog.test.tsx
index 60d82d1b..483c2cae 100644
--- a/apps/web/src/features/changelog/changelog.test.tsx
+++ b/apps/web/src/features/changelog/changelog.test.tsx
@@ -1,9 +1,14 @@
-import { describe, it, expect, vi, beforeAll, afterEach, afterAll } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { http, HttpResponse } from "msw"
-import { setupServer } from "msw/node"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { HttpResponse, http } from "msw"
 import { ChangelogPage } from "./components/ChangelogPage"
+import { server } from "@/test/msw/server"
+
+vi.mock("@/ui/Navbar", () => ({
+  Navbar: () => <nav aria-label="Primary" />,
+}))
 
 const mockChangelogData = {
   releases: [
@@ -24,18 +29,25 @@ const mockChangelogData = {
   ],
 }
 
-const server = setupServer(
-  http.get("/changelog.json", () => {
-    return HttpResponse.json(mockChangelogData)
-  })
-)
+beforeEach(() => {
+  server.use(
+    http.get("/changelog.json", () => HttpResponse.json(mockChangelogData))
+  )
+})
 
-beforeAll(() => server.listen())
-afterEach(() => server.resetHandlers())
-afterAll(() => server.close())
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ChangelogPage />
+    </QueryClientProvider>
+  )
+}
 
 describe("ChangelogPage - States", () => {
-  it("renders skeleton while loading", async () => {
+  it("renders skeleton while loading", () => {
     server.use(
       http.get("/changelog.json", async () => {
         await new Promise((resolve) => setTimeout(resolve, 100))
@@ -43,7 +55,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     const status = screen.getByRole("status")
     expect(status).toBeInTheDocument()
@@ -57,7 +69,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     await waitFor(() => {
       const alert = screen.getByRole("alert")
@@ -80,7 +92,7 @@ describe("ChangelogPage - States", () => {
     )
 
     const user = userEvent.setup()
-    render(<ChangelogPage />)
+    renderPage()
 
     // Wait for error
     await waitFor(() => {
@@ -97,7 +109,7 @@ describe("ChangelogPage - States", () => {
       expect(screen.getByText("0.4.0")).toBeInTheDocument()
     })
 
-    expect(callCount).toBe(2)
+    expect(callCount).toBeGreaterThanOrEqual(2)
   })
 
   it("renders empty state for zero releases", async () => {
@@ -107,7 +119,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     await waitFor(() => {
       expect(screen.getByText("No releases yet")).toBeInTheDocument()
@@ -121,7 +133,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     await waitFor(() => {
       const alert = screen.getByRole("alert")
@@ -137,7 +149,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     await waitFor(() => {
       const alert = screen.getByRole("alert")
@@ -147,21 +159,69 @@ describe("ChangelogPage - States", () => {
   })
 
   it("displays loaded content after successful fetch", async () => {
-    render(<ChangelogPage />)
+    renderPage()
 
     await waitFor(() => {
       expect(screen.getByText("0.4.0")).toBeInTheDocument()
-      expect(screen.getByText("Trigger orders on the trade panel.")).toBeInTheDocument()
+      expect(
+        screen.getByText("Trigger orders on the trade panel.")
+      ).toBeInTheDocument()
     })
   })
 
-  it("preserves header across all states", async () => {
-    // Error state
+  it("bounds the initial page to the ten newest releases", async () => {
     server.use(
-      http.get("/changelog.json", () => HttpResponse.error())
+      http.get("/changelog.json", () =>
+        HttpResponse.json({
+          releases: Array.from({ length: 11 }, (_, index) => ({
+            version: `1.${10 - index}.0`,
+            date: "2026-08-24",
+            yanked: false,
+            entries: [
+              {
+                type: "added",
+                area: "trade",
+                text: `Release ${10 - index}.`,
+                pr: index + 1,
+                breaking: false,
+              },
+            ],
+          })),
+        })
+      )
+    )
+
+    renderPage()
+
+    expect(await screen.findByText("1.10.0")).toBeInTheDocument()
+    expect(screen.queryByText("1.0.0")).not.toBeInTheDocument()
+  })
+
+  it("copies an absolute release permalink", async () => {
+    const user = userEvent.setup()
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    })
+    renderPage()
+
+    await user.click(
+      await screen.findByRole("button", {
+        name: "Copy permalink for version 0.4.0",
+      })
     )
 
-    const { rerender } = render(<ChangelogPage />)
+    expect(writeText).toHaveBeenCalledWith(
+      "http://localhost:3000/changelog#v0-4-0"
+    )
+  })
+
+  it("preserves header across all states", async () => {
+    // Error state
+    server.use(http.get("/changelog.json", () => HttpResponse.error()))
+
+    const { unmount } = renderPage()
     await waitFor(() => screen.getByRole("alert"))
 
     let heading = screen.getByRole("heading", { name: /changelog/i })
@@ -170,19 +230,18 @@ describe("ChangelogPage - States", () => {
     // Empty state
     server.resetHandlers()
     server.use(
-      http.get("/changelog.json", () =>
-        HttpResponse.json({ releases: [] })
-      )
+      http.get("/changelog.json", () => HttpResponse.json({ releases: [] }))
     )
 
-    rerender(<ChangelogPage />)
+    unmount()
+    renderPage()
     await waitFor(() => screen.getByText("No releases yet"))
 
     heading = screen.getByRole("heading", { name: /changelog/i })
     expect(heading).toBeInTheDocument()
   })
 
-  it("skeleton has aria attributes for accessibility", async () => {
+  it("skeleton has aria attributes for accessibility", () => {
     server.use(
       http.get("/changelog.json", async () => {
         await new Promise((resolve) => setTimeout(resolve, 100))
@@ -190,7 +249,7 @@ describe("ChangelogPage - States", () => {
       })
     )
 
-    render(<ChangelogPage />)
+    renderPage()
 
     const status = screen.getByRole("status")
     expect(status).toHaveAttribute("aria-live", "polite")
diff --git a/apps/web/src/features/changelog/components/ChangelogCategoryBadge.test.tsx b/apps/web/src/features/changelog/components/ChangelogCategoryBadge.test.tsx
new file mode 100644
index 00000000..be87d566
--- /dev/null
+++ b/apps/web/src/features/changelog/components/ChangelogCategoryBadge.test.tsx
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { typeToVariant } from "../utils"
+import { ChangelogCategoryBadge } from "./ChangelogCategoryBadge"
+
+describe("changelog category badges", () => {
+  it.each([
+    ["added", "success"],
+    ["changed", "info"],
+    ["fixed", "info-subtle"],
+    ["deprecated", "muted"],
+    ["removed", "danger-subtle"],
+    ["security", "warning"],
+  ] as const)("maps %s to %s", (type, variant) => {
+    expect(typeToVariant(type)).toBe(variant)
+  })
+
+  it("composes the breaking marker with a category", () => {
+    render(<ChangelogCategoryBadge type="added" breaking />)
+
+    expect(screen.getByText("Added")).toBeInTheDocument()
+    expect(screen.getByText("Breaking")).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/features/changelog/components/ChangelogCategoryBadge.tsx b/apps/web/src/features/changelog/components/ChangelogCategoryBadge.tsx
new file mode 100644
index 00000000..692ccb8f
--- /dev/null
+++ b/apps/web/src/features/changelog/components/ChangelogCategoryBadge.tsx
@@ -0,0 +1,19 @@
+import { StatusBadge } from "@workspace/ui/components/status-badge"
+import { typeLabel, typeToVariant } from "../utils"
+
+interface ChangelogCategoryBadgeProps {
+  type: string
+  breaking?: boolean
+}
+
+export function ChangelogCategoryBadge({
+  type,
+  breaking = false,
+}: ChangelogCategoryBadgeProps) {
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1.5">
+      <StatusBadge variant={typeToVariant(type)}>{typeLabel(type)}</StatusBadge>
+      {breaking && <StatusBadge variant="danger-subtle">Breaking</StatusBadge>}
+    </span>
+  )
+}
diff --git a/apps/web/src/features/changelog/components/ChangelogEntry.tsx b/apps/web/src/features/changelog/components/ChangelogEntry.tsx
index 973d45b9..991bc70a 100644
--- a/apps/web/src/features/changelog/components/ChangelogEntry.tsx
+++ b/apps/web/src/features/changelog/components/ChangelogEntry.tsx
@@ -1,8 +1,7 @@
-import { Badge } from "@workspace/ui/components/badge"
 import { Button } from "@workspace/ui/components/button"
-import type { ChangelogEntry as IChangelogEntry } from "../types"
-import { typeToVariant, typeLabel } from "../utils"
 import { HighlightedText } from "./HighlightedText"
+import { ChangelogCategoryBadge } from "./ChangelogCategoryBadge"
+import type { ChangelogEntry as IChangelogEntry } from "../types"
 
 interface ChangelogEntryProps {
   entry: IChangelogEntry
@@ -11,41 +10,35 @@ interface ChangelogEntryProps {
 
 export function ChangelogEntry({ entry, highlight }: ChangelogEntryProps) {
   return (
-    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between py-3 border-b border-border last:border-b-0">
+    <div className="flex flex-col gap-2 border-b border-border py-3 last:border-b-0 sm:flex-row sm:items-start sm:justify-between">
       {/* Left side: badge and text */}
-      <div className="flex flex-col gap-2 min-w-0 flex-1">
-        <div className="flex flex-wrap gap-2 items-start">
-          <Badge
-            variant={typeToVariant(entry.type) as any}
-            size="sm"
-            className="shrink-0"
-          >
-            {typeLabel(entry.type)}
-          </Badge>
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <div className="flex flex-wrap items-start gap-2">
+          <ChangelogCategoryBadge type={entry.type} breaking={entry.breaking} />
         </div>
         {/* Entry text with highlight support */}
-        <p className="text-body text-text-secondary break-words">
+        <p className="text-body break-words text-text-secondary">
           <HighlightedText text={entry.text} query={highlight} />
         </p>
       </div>
 
       {/* Right side: PR link - touch target 44×44 */}
       {entry.pr && (
-        <div className="mt-2 sm:mt-0 sm:ml-4 shrink-0">
+        <div className="mt-2 shrink-0 sm:mt-0 sm:ml-4">
           <Button
             variant="link"
             size="sm"
-            className="h-11 min-w-11 px-3 text-info hover:text-info/80 transition-colors"
-            asChild
+            className="h-11 min-w-11 px-3 text-info transition-colors hover:text-info/80"
+            render={
+              <a
+                href={`https://github.com/SO4-Markets/interface/pull/${entry.pr}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              />
+            }
+            nativeButton={false}
           >
-            <a
-              href={`https://github.com/SO4-Markets/interface/pull/${entry.pr}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center justify-center"
-            >
-              #{entry.pr}
-            </a>
+            #{entry.pr}
           </Button>
         </div>
       )}
diff --git a/apps/web/src/features/changelog/components/ChangelogPage.tsx b/apps/web/src/features/changelog/components/ChangelogPage.tsx
index b51c1505..dfcaf2fa 100644
--- a/apps/web/src/features/changelog/components/ChangelogPage.tsx
+++ b/apps/web/src/features/changelog/components/ChangelogPage.tsx
@@ -1,271 +1,151 @@
-import { useEffect, useState, useCallback, useMemo } from "react"
-import { useSearch } from "@tanstack/react-router"
+import { useEffect, useMemo } from "react"
+import { RssIcon } from "@hugeicons/core-free-icons"
+import { AppShell } from "@workspace/ui/components/app-shell"
 import { Button } from "@workspace/ui/components/button"
-import { Rss01Icon } from "@hugeicons/core-free-icons"
 import { Icon } from "@workspace/ui/components/icon"
-import { ErrorState, EmptyState } from "@workspace/ui/components/states"
 import { LiveRegion, useAnnouncer } from "@workspace/ui/components/live-region"
-import type { ChangelogData, ChangelogSearch } from "../types"
+import { PageHeader } from "@workspace/ui/components/page-header"
+import { EmptyState, ErrorState } from "@workspace/ui/components/states"
+import { useChangelog } from "../hooks/use-changelog"
+import { useReleaseHash } from "../hooks/use-release-hash"
+import { ChangelogSkeleton } from "./ChangelogSkeleton"
 import { FilterBar } from "./FilterBar"
 import { ReleaseSection } from "./ReleaseSection"
-import { ChangelogSkeleton } from "./ChangelogSkeleton"
-import { useNavigate } from "@tanstack/react-router"
-
-function validateChangelogData(data: unknown): data is ChangelogData {
-  if (!data || typeof data !== "object") return false
-  const obj = data as Record<string, unknown>
-  if (!Array.isArray(obj.releases)) return false
-  return obj.releases.every(
-    (r: unknown) =>
-      r &&
-      typeof r === "object" &&
-      "version" in r &&
-      "date" in r &&
-      "yanked" in r &&
-      "entries" in r &&
-      Array.isArray((r as any).entries)
-  )
-}
-
-export function ChangelogPage() {
-  const search = useSearch({ from: "/changelog" }) as ChangelogSearch
-  const navigate = useNavigate({ from: "/changelog" })
-  const [data, setData] = useState<ChangelogData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+import type { ChangelogSearch } from "../types"
+import { Navbar } from "@/ui/Navbar"
 
-  const fetchChangelog = useCallback(async () => {
-    setLoading(true)
-    setError(null)
-    try {
-      const res = await fetch("/changelog.json")
-      if (!res.ok) {
-        throw new Error(`HTTP ${res.status}: Failed to load changelog`)
-      }
-      const json = await res.json()
-      if (!validateChangelogData(json)) {
-        throw new Error("Invalid changelog format: missing or malformed releases")
-      }
-      setData(json)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Unknown error")
-      setData(null)
-    } finally {
-      setLoading(false)
-    }
-  }, [])
+const INITIAL_RELEASE_LIMIT = 10
 
-  useEffect(() => {
-    fetchChangelog()
-  }, [fetchChangelog])
-
-  const handleFilterChange = (newSearch: ChangelogSearch) => {
-    navigate({ search: newSearch })
-  }
+interface ChangelogPageProps {
+  search?: ChangelogSearch
+  onSearchChange?: (search: ChangelogSearch) => void
+}
 
-  // Live region announcements with debouncing
+export function ChangelogPage({
+  search = {},
+  onSearchChange = () => {},
+}: ChangelogPageProps) {
+  const changelog = useChangelog()
   const { message, announcementKey, announce } = useAnnouncer()
-
-  const filteredReleases = data.releases.filter((release) => {
-    const entries = release.entries.filter((entry) => {
-      if (search.type && entry.type !== search.type) return false
-      if (search.area && entry.area !== search.area) return false
-      if (
-        search.q &&
-        !entry.text.toLowerCase().includes(search.q.toLowerCase())
-      ) {
-        return false
-      }
-      return true
-    })
-    return entries.length > 0
-  })
-
+  const releases = useMemo(
+    () => changelog.data?.releases.slice(0, INITIAL_RELEASE_LIMIT) ?? [],
+    [changelog.data]
+  )
   const activeFilterCount = [search.type, search.area, search.q].filter(
     Boolean
   ).length
-
   const isFiltered = activeFilterCount > 0
 
-  // Announce filter results with debouncing
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      const resultCount = filteredReleases.reduce(
-        (sum, release) => sum + release.entries.length,
-        0
-      )
-      announce(`${resultCount} result${resultCount !== 1 ? "s" : ""} found`)
-    }, 300)
+  const filteredReleases = useMemo(
+    () =>
+      releases
+        .map((release) => ({
+          ...release,
+          entries: release.entries.filter((entry) => {
+            if (search.type && entry.type !== search.type) return false
+            if (search.area && entry.area !== search.area) return false
+            return !(
+              search.q &&
+              !entry.text.toLowerCase().includes(search.q.toLowerCase())
+            )
+          }),
+        }))
+        .filter((release) => release.entries.length > 0),
+    [releases, search.area, search.q, search.type]
+  )
 
-    return () => clearTimeout(timer)
-  }, [filteredReleases, announce])
+  useReleaseHash(changelog.isSuccess)
 
-  // Debounced search parameter update
   useEffect(() => {
-    // This is handled by the input onChange which calls handleFilterChange
-    // No additional debouncing needed - the timer below debounces URL updates
-  }, [search.q])
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-background">
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] pt-6 md:pt-8 lg:pt-10 pb-4 md:pb-6 border-b border-border">
-          <div className="max-w-4xl mx-auto flex flex-col gap-2">
-            <div className="h-10 w-48 bg-muted rounded animate-pulse" />
-            <div className="h-4 w-96 bg-muted rounded animate-pulse" />
-          </div>
-        </div>
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] py-6 md:py-8 max-w-4xl mx-auto">
-          <ChangelogSkeleton />
-        </div>
-      </div>
+    if (!changelog.isSuccess) return
+    const resultCount = filteredReleases.reduce(
+      (sum, release) => sum + release.entries.length,
+      0
     )
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className="min-h-screen bg-background">
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] pt-6 md:pt-8 lg:pt-10 pb-4 md:pb-6 border-b border-border">
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-display-sm md:text-display font-bold text-foreground mb-2">
-              Changelog
-            </h1>
-            <p className="text-body text-text-secondary">
-              Everything that shipped, newest first.
-            </p>
-          </div>
-        </div>
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] py-6 md:py-8 max-w-4xl mx-auto">
-          <ErrorState
-            title="Failed to load changelog"
-            description={error}
-            onRetry={fetchChangelog}
-            retryLabel="Try again"
-          />
-        </div>
-      </div>
+    const timer = window.setTimeout(
+      () =>
+        announce(`${resultCount} result${resultCount === 1 ? "" : "s"} found`),
+      300
     )
-  }
-
-  // Empty state
-  if (!data || data.releases.length === 0) {
-    return (
-      <div className="min-h-screen bg-background">
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] pt-6 md:pt-8 lg:pt-10 pb-4 md:pb-6 border-b border-border">
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-display-sm md:text-display font-bold text-foreground mb-2">
-              Changelog
-            </h1>
-            <p className="text-body text-text-secondary">
-              Everything that shipped, newest first.
-            </p>
-          </div>
-        </div>
-        <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] py-6 md:py-8 max-w-4xl mx-auto">
-          <EmptyState
-            title="No releases yet"
-            description="The changelog is empty. Releases will appear here as they ship."
-          />
-        </div>
-      </div>
-    )
-  }
+    return () => window.clearTimeout(timer)
+  }, [announce, changelog.isSuccess, filteredReleases])
 
   return (
-    <div className="min-h-screen bg-background">
-      {/* Page header with safe area padding */}
-      <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] pt-6 md:pt-8 lg:pt-10 pb-4 md:pb-6 border-b border-border">
-        <div className="max-w-4xl mx-auto flex flex-col md:flex-row md:items-start md:justify-between gap-4 md:gap-8">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-display-sm md:text-display font-bold text-foreground mb-2 break-words">
-              Changelog
-            </h1>
-            <p className="text-body text-text-secondary">
-              Everything that shipped, newest first.
-            </p>
-          </div>
+    <AppShell navbar={<Navbar variant="app" />} maxWidth="3xl">
+      <PageHeader
+        title="Changelog"
+        description="Everything that shipped, newest first."
+        actions={
           <Button
             variant="ghost"
             size="sm"
-            className="h-11 px-3 flex-shrink-0"
-            asChild
+            render={<a href="/changelog.xml" />}
+            nativeButton={false}
           >
-            <a href="/changelog.xml" className="flex items-center gap-2">
-              <Icon>
-                <Rss01Icon />
-              </Icon>
-              <span>RSS</span>
-            </a>
+            <Icon icon={RssIcon} />
+            RSS
           </Button>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="px-[var(--gutter-page-sm)] md:px-[var(--gutter-page-md)] lg:px-[var(--gutter-page-lg)] py-6 md:py-8 max-w-4xl mx-auto">
-        {/* Live region for filter announcements */}
-        <LiveRegion message={message} announcementKey={announcementKey} />
-
-        {/* Filter region - landmark */}
-        <region aria-labelledby="filter-heading" className="mb-6">
-          <h2 id="filter-heading" className="sr-only">
-            Filters and search
-          </h2>
-          <FilterBar
-            search={search}
-            onFilterChange={handleFilterChange}
-            activeFilterCount={activeFilterCount}
-          />
-        </region>
-
-        {/* Releases list */}
-        {filteredReleases.length > 0 ? (
-          <section aria-label="Release history" className="space-y-0">
-            <ul role="list" className="space-y-0">
-              {filteredReleases.map((release) => (
-                <li key={release.version}>
-                  <ReleaseSection
-                    release={{
-                      ...release,
-                      entries: isFiltered
-                        ? release.entries.filter((entry) => {
-                            if (search.type && entry.type !== search.type)
-                              return false
-                            if (search.area && entry.area !== search.area)
-                              return false
-                            if (
-                              search.q &&
-                              !entry.text
-                                .toLowerCase()
-                                .includes(search.q.toLowerCase())
-                            ) {
-                              return false
-                            }
-                            return true
-                          })
-                        : release.entries,
-                    }}
-                    isFiltered={isFiltered}
-                    highlight={search.q}
-                  />
-                </li>
-              ))}
-            </ul>
+        }
+      />
+
+      {changelog.isPending && <ChangelogSkeleton />}
+
+      {changelog.isError && (
+        <ErrorState
+          title="Failed to load changelog"
+          description={changelog.error.message}
+          onRetry={() => void changelog.refetch()}
+          retryLabel="Try again"
+        />
+      )}
+
+      {changelog.isSuccess && releases.length === 0 && (
+        <EmptyState
+          title="No releases yet"
+          description="The changelog is empty. Releases will appear here as they ship."
+        />
+      )}
+
+      {changelog.isSuccess && releases.length > 0 && (
+        <>
+          <LiveRegion message={message} announcementKey={announcementKey} />
+          <section aria-labelledby="changelog-filters" className="mb-6">
+            <h2 id="changelog-filters" className="sr-only">
+              Filters and search
+            </h2>
+            <FilterBar
+              search={search}
+              onFilterChange={onSearchChange}
+              activeFilterCount={activeFilterCount}
+            />
           </section>
-        ) : (
-          <div className="py-12 text-center">
-            <p className="text-body text-text-secondary mb-2">
-              No entries match your filters.
-            </p>
-            <Button
-              variant="link"
-              onClick={() => handleFilterChange({})}
-              className="h-9 px-3"
-            >
-              Clear all filters
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
+
+          {filteredReleases.length > 0 ? (
+            <section aria-label="Release history">
+              <ul role="list">
+                {filteredReleases.map((release) => (
+                  <li key={release.version}>
+                    <ReleaseSection
+                      release={release}
+                      isFiltered={isFiltered}
+                      highlight={search.q}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ) : (
+            <div className="py-12 text-center">
+              <p className="mb-2 text-sm text-text-secondary">
+                No entries match your filters.
+              </p>
+              <Button variant="link" onClick={() => onSearchChange({})}>
+                Clear all filters
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </AppShell>
   )
 }
diff --git a/apps/web/src/features/changelog/components/ChangelogSkeleton.tsx b/apps/web/src/features/changelog/components/ChangelogSkeleton.tsx
index cbb77aee..1d40296c 100644
--- a/apps/web/src/features/changelog/components/ChangelogSkeleton.tsx
+++ b/apps/web/src/features/changelog/components/ChangelogSkeleton.tsx
@@ -17,14 +17,17 @@ export function ChangelogSkeleton() {
             <Skeleton key={`chip-${i}`} className="h-9 w-20" />
           ))}
         </div>
-        <Skeleton className="h-9 w-48 hidden md:block" />
+        <Skeleton className="hidden h-9 w-48 md:block" />
       </div>
 
       {/* Release sections - 3 releases with consistent heights */}
       {Array.from({ length: 3 }).map((_, releaseIdx) => (
-        <div key={`release-${releaseIdx}`} className="pb-8 border-b border-border">
+        <div
+          key={`release-${releaseIdx}`}
+          className="border-b border-border pb-8"
+        >
           {/* Release header */}
-          <div className="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-2 sm:gap-4 mb-6">
+          <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
             <div className="flex flex-col gap-2">
               <Skeleton className="h-8 w-32" />
               <Skeleton className="h-4 w-40" />
@@ -33,13 +36,16 @@ export function ChangelogSkeleton() {
           </div>
 
           {/* Version separator */}
-          <Skeleton className="h-px w-full mb-6" />
+          <Skeleton className="mb-6 h-px w-full" />
 
           {/* Changelog entries - 3 per release */}
           <div className="space-y-3">
             {Array.from({ length: 3 }).map((_, entryIdx) => (
-              <div key={`entry-${entryIdx}`} className="py-3 flex flex-col sm:flex-row gap-3">
-                <div className="flex-1 min-w-0 space-y-2">
+              <div
+                key={`entry-${entryIdx}`}
+                className="flex flex-col gap-3 py-3 sm:flex-row"
+              >
+                <div className="min-w-0 flex-1 space-y-2">
                   <Skeleton className="h-5 w-16" />
                   <Skeleton className="h-4 w-full" />
                   <Skeleton className="h-4 w-4/5" />
diff --git a/apps/web/src/features/changelog/components/FilterBar.tsx b/apps/web/src/features/changelog/components/FilterBar.tsx
index dbc7a9b5..24ce8077 100644
--- a/apps/web/src/features/changelog/components/FilterBar.tsx
+++ b/apps/web/src/features/changelog/components/FilterBar.tsx
@@ -8,11 +8,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@workspace/ui/components/select"
-import type { ChangelogSearch, ChangelogEntryType, ChangelogArea } from "../types"
-import { CHANGELOG_TYPES, CHANGELOG_AREAS, typeLabel, areaLabel } from "../utils"
-import { useState, useEffect, useCallback } from "react"
+import { useEffect, useState } from "react"
 import { ChevronDownIcon } from "@hugeicons/core-free-icons"
 import { Icon } from "@workspace/ui/components/icon"
+import {
+  CHANGELOG_AREAS,
+  CHANGELOG_TYPES,
+  areaLabel,
+  typeLabel,
+} from "../utils"
+import type {
+  ChangelogArea,
+  ChangelogEntryType,
+  ChangelogSearch,
+} from "../types"
 
 interface FilterBarProps {
   search: ChangelogSearch
@@ -44,11 +53,11 @@ export function FilterBar({
     setSearchInput(search.q || "")
   }, [search.q])
 
-  const handleTypeFilter = (type: ChangelogEntryType | null) => {
+  const handleTypeFilter = (type: ChangelogEntryType | undefined) => {
     onFilterChange({ ...search, type })
   }
 
-  const handleAreaFilter = (area: ChangelogArea | null) => {
+  const handleAreaFilter = (area: ChangelogArea | undefined) => {
     onFilterChange({ ...search, area })
   }
 
@@ -66,10 +75,10 @@ export function FilterBar({
   return (
     <>
       {/* Mobile: Collapsible filter bar */}
-      <div className="md:hidden mb-6">
+      <div className="mb-6 md:hidden">
         <Button
           variant="outline"
-          className="w-full h-11 justify-between px-4 focus-visible:ring-2"
+          className="h-11 w-full justify-between px-4 focus-visible:ring-2"
           onClick={() => setIsFilterOpen(!isFilterOpen)}
         >
           <span className="flex items-center gap-2">
@@ -80,26 +89,27 @@ export function FilterBar({
               </Badge>
             )}
           </span>
-          <Icon className={`transition-transform ${isFilterOpen ? "rotate-180" : ""}`}>
-            <ChevronDownIcon />
-          </Icon>
+          <Icon
+            icon={ChevronDownIcon}
+            className={`transition-transform ${isFilterOpen ? "rotate-180" : ""}`}
+          />
         </Button>
 
         {/* Collapsible content */}
         {isFilterOpen && (
-          <div className="mt-3 space-y-3 p-4 bg-surface-raised rounded-lg border border-border">
+          <div className="mt-3 space-y-3 rounded-lg border border-border bg-surface-raised p-4">
             {/* Category chips - scrollable row on mobile */}
             <div>
-              <p className="text-label mb-2">Category</p>
+              <p className="mb-2 text-label">Category</p>
               <div className="flex flex-wrap gap-2">
                 <Badge
                   variant={allTypesActive ? "default" : "outline"}
                   size="sm"
-                  className="cursor-pointer transition-all h-9 px-3 py-1 focus-visible:ring-2"
-                  onClick={() => handleTypeFilter(null)}
+                  className="h-9 cursor-pointer px-3 py-1 transition-all focus-visible:ring-2"
+                  onClick={() => handleTypeFilter(undefined)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {
-                      handleTypeFilter(null)
+                      handleTypeFilter(undefined)
                     }
                   }}
                   role="button"
@@ -112,7 +122,7 @@ export function FilterBar({
                     key={type}
                     variant={search.type === type ? "default" : "outline"}
                     size="sm"
-                    className="cursor-pointer transition-all h-9 px-3 py-1 focus-visible:ring-2"
+                    className="h-9 cursor-pointer px-3 py-1 transition-all focus-visible:ring-2"
                     onClick={() => handleTypeFilter(type)}
                     onKeyDown={(e) => {
                       if (e.key === "Enter" || e.key === " ") {
@@ -130,12 +140,16 @@ export function FilterBar({
 
             {/* Area dropdown */}
             <div>
-              <label className="text-label block mb-2">Area</label>
+              <label className="mb-2 block text-label">Area</label>
               <Select
                 value={search.area || "all"}
-                onValueChange={(v) => handleAreaFilter(v === "all" ? undefined : (v as ChangelogArea))}
+                onValueChange={(v) =>
+                  handleAreaFilter(
+                    v === "all" ? undefined : (v as ChangelogArea)
+                  )
+                }
               >
-                <SelectTrigger className="w-full h-11">
+                <SelectTrigger className="h-11 w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -151,7 +165,7 @@ export function FilterBar({
 
             {/* Search */}
             <div>
-              <label className="text-label block mb-2">Search</label>
+              <label className="mb-2 block text-label">Search</label>
               <Input
                 placeholder="Search entries..."
                 value={searchInput}
@@ -164,7 +178,7 @@ export function FilterBar({
             {activeFilterCount > 0 && (
               <Button
                 variant="ghost"
-                className="w-full h-9 text-text-secondary"
+                className="h-9 w-full text-text-secondary"
                 onClick={handleClearAll}
               >
                 Clear all filters
@@ -175,17 +189,17 @@ export function FilterBar({
       </div>
 
       {/* Desktop: Always visible filter bar */}
-      <div className="hidden md:flex gap-4 mb-8 items-center flex-wrap">
+      <div className="mb-8 hidden flex-wrap items-center gap-4 md:flex">
         {/* Category chips */}
-        <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <Badge
             variant={allTypesActive ? "default" : "outline"}
             size="sm"
-            className="cursor-pointer transition-all h-9 px-3 py-1 focus-visible:ring-2"
-            onClick={() => handleTypeFilter(null)}
+            className="h-9 cursor-pointer px-3 py-1 transition-all focus-visible:ring-2"
+            onClick={() => handleTypeFilter(undefined)}
             onKeyDown={(e) => {
               if (e.key === "Enter" || e.key === " ") {
-                handleTypeFilter(null)
+                handleTypeFilter(undefined)
               }
             }}
             role="button"
@@ -198,7 +212,7 @@ export function FilterBar({
               key={type}
               variant={search.type === type ? "default" : "outline"}
               size="sm"
-              className="cursor-pointer transition-all h-9 px-3 py-1 focus-visible:ring-2"
+              className="h-9 cursor-pointer px-3 py-1 transition-all focus-visible:ring-2"
               onClick={() => handleTypeFilter(type)}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
@@ -216,9 +230,11 @@ export function FilterBar({
         {/* Area dropdown */}
         <Select
           value={search.area || "all"}
-          onValueChange={(v) => handleAreaFilter(v === "all" ? undefined : (v as ChangelogArea))}
+          onValueChange={(v) =>
+            handleAreaFilter(v === "all" ? undefined : (v as ChangelogArea))
+          }
         >
-          <SelectTrigger className="w-48 h-9">
+          <SelectTrigger className="h-9 w-48">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -236,7 +252,7 @@ export function FilterBar({
           placeholder="Search..."
           value={searchInput}
           onChange={handleSearchChange}
-          className="h-9 flex-1 min-w-xs"
+          className="h-9 min-w-xs flex-1"
         />
       </div>
     </>
diff --git a/apps/web/src/features/changelog/components/HighlightedText.tsx b/apps/web/src/features/changelog/components/HighlightedText.tsx
index 349fd8d1..4a4bfa3f 100644
--- a/apps/web/src/features/changelog/components/HighlightedText.tsx
+++ b/apps/web/src/features/changelog/components/HighlightedText.tsx
@@ -10,7 +10,11 @@ interface HighlightedTextProps {
  * Safely highlights matched substrings without breaking markup.
  * Only highlights plain text segments, not markdown or links.
  */
-export function HighlightedText({ text, query, className }: HighlightedTextProps) {
+export function HighlightedText({
+  text,
+  query,
+  className,
+}: HighlightedTextProps) {
   if (!query) {
     return <span className={className}>{text}</span>
   }
@@ -23,7 +27,10 @@ export function HighlightedText({ text, query, className }: HighlightedTextProps
         const [content, isMatch] = segment
         if (isMatch) {
           return (
-            <mark key={idx} className="bg-yellow-200 dark:bg-yellow-700 font-medium">
+            <mark
+              key={idx}
+              className="bg-yellow-200 font-medium dark:bg-yellow-700"
+            >
               {content}
             </mark>
           )
diff --git a/apps/web/src/features/changelog/components/ReleaseSection.tsx b/apps/web/src/features/changelog/components/ReleaseSection.tsx
index a9b3864b..f8b9830b 100644
--- a/apps/web/src/features/changelog/components/ReleaseSection.tsx
+++ b/apps/web/src/features/changelog/components/ReleaseSection.tsx
@@ -1,11 +1,8 @@
-import { Badge } from "@workspace/ui/components/badge"
-import { Button } from "@workspace/ui/components/button"
-import type { Release } from "../types"
-import { formatDate, createAnchor, typeToVariant, typeLabel } from "../utils"
+import { CopyButton } from "@workspace/ui/components/copy-button"
+import { formatDate } from "../utils"
+import { releasePermalink, versionToAnchorId } from "../lib/version-anchor"
 import { ChangelogEntry } from "./ChangelogEntry"
-import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"
-import { Icon } from "@workspace/ui/components/icon"
-import { useState } from "react"
+import type { Release } from "../types"
 
 interface ReleaseSectionProps {
   release: Release
@@ -13,29 +10,31 @@ interface ReleaseSectionProps {
   highlight?: string
 }
 
-export function ReleaseSection({ release, isFiltered, highlight }: ReleaseSectionProps) {
-  const [copied, setCopied] = useState(false)
-  const anchor = createAnchor(release.version)
-
-  const handleCopyPermalink = () => {
-    const url = `${window.location.origin}/changelog${anchor}`
-    navigator.clipboard.writeText(url)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
+export function ReleaseSection({
+  release,
+  isFiltered,
+  highlight,
+}: ReleaseSectionProps) {
+  const anchorId = versionToAnchorId(release.version)
+  const origin =
+    typeof window === "undefined"
+      ? "https://so4.market"
+      : window.location.origin
+  const permalink = releasePermalink(release.version, origin)
 
   return (
     <section
-      id={anchor.slice(1)}
-      className="mb-8 sm:mb-12 pb-8 sm:pb-12 border-b border-border last:border-b-0 last:mb-0 last:pb-0"
+      id={anchorId}
+      tabIndex={-1}
+      className="mb-8 scroll-mt-20 border-b border-border pb-8 outline-none last:mb-0 last:border-b-0 last:pb-0 focus-visible:ring-2 focus-visible:ring-ring sm:mb-12 sm:pb-12"
     >
       {/* Release header: responsive layout */}
-      <div className="flex flex-col gap-3 sm:gap-4 mb-6 sm:mb-8">
+      <div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:gap-4">
         {/* Version and date: stack on mobile, inline on desktop */}
-        <div className="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-2 sm:gap-4">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
           <div className="flex flex-col gap-1">
             {/* h2 for release - proper heading hierarchy */}
-            <h2 className="text-page-title font-bold text-foreground break-words">
+            <h2 className="text-page-title font-bold break-words text-foreground">
               {release.version}
             </h2>
             <p className="text-body-sm text-text-secondary">
@@ -44,18 +43,10 @@ export function ReleaseSection({ release, isFiltered, highlight }: ReleaseSectio
           </div>
 
           {/* Permalink button: 44×44 touch target, keyboard accessible */}
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleCopyPermalink}
-            className="h-11 w-11 p-0 flex-shrink-0 justify-center items-center focus-visible:ring-2"
-            title={`Copy permalink for version ${release.version}`}
-            aria-label={`Copy permalink for version ${release.version}`}
-          >
-            <Icon>
-              {copied ? <Tick02Icon className="text-success" /> : <Copy01Icon />}
-            </Icon>
-          </Button>
+          <CopyButton
+            value={permalink}
+            label={`Copy permalink for version ${release.version}`}
+          />
         </div>
 
         {/* Version separator */}
@@ -72,7 +63,7 @@ export function ReleaseSection({ release, isFiltered, highlight }: ReleaseSectio
       </ul>
 
       {isFiltered && (
-        <p className="text-caption text-text-tertiary mt-4">
+        <p className="mt-4 text-caption text-text-tertiary">
           Filtered view — some entries hidden
         </p>
       )}
diff --git a/apps/web/src/features/changelog/components/WhatsNew.test.tsx b/apps/web/src/features/changelog/components/WhatsNew.test.tsx
new file mode 100644
index 00000000..12b09f3c
--- /dev/null
+++ b/apps/web/src/features/changelog/components/WhatsNew.test.tsx
@@ -0,0 +1,105 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { HttpResponse, http } from "msw"
+import { SEEN_RELEASE_KEY } from "../lib/seen-release"
+import { WhatsNew } from "./WhatsNew"
+import { server } from "@/test/msw/server"
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({
+    children,
+    to,
+    ...props
+  }: React.ComponentProps<"a"> & { to: string }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+const release = {
+  releases: [
+    {
+      version: "0.4.0",
+      date: "2026-08-24",
+      yanked: false,
+      entries: [
+        {
+          type: "added",
+          area: "trade",
+          text: "Trigger orders are now available.",
+          pr: 512,
+          breaking: false,
+        },
+      ],
+    },
+  ],
+}
+
+afterEach(() => {
+  localStorage.clear()
+})
+
+function renderWhatsNew() {
+  server.use(http.get("/changelog.json", () => HttpResponse.json(release)))
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <WhatsNew />
+    </QueryClientProvider>
+  )
+}
+
+describe("WhatsNew", () => {
+  it("never opens for an unseen release without a user action", async () => {
+    localStorage.setItem(SEEN_RELEASE_KEY, "0.3.0")
+    renderWhatsNew()
+
+    await screen.findByLabelText("Unseen release")
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  })
+
+  it("opens on request and exposes the mobile drawer variant", async () => {
+    const user = userEvent.setup()
+    renderWhatsNew()
+
+    await user.click(screen.getByRole("button", { name: /what's new/i }))
+
+    const dialog = await screen.findByRole("dialog")
+    expect(dialog).toHaveAttribute("data-mobile-variant", "drawer")
+    expect(screen.getByText(/Version 0.4.0/)).toBeInTheDocument()
+    expect(
+      screen.getByText("Trigger orders are now available.")
+    ).toBeInTheDocument()
+  })
+
+  it("dismisses with Escape, marks the version seen, and restores focus", async () => {
+    const user = userEvent.setup()
+    localStorage.setItem(SEEN_RELEASE_KEY, "0.3.0")
+    renderWhatsNew()
+    const trigger = screen.getByRole("button", { name: /what's new/i })
+
+    await user.click(trigger)
+    await screen.findByRole("dialog")
+    await user.keyboard("{Escape}")
+
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    )
+    expect(localStorage.getItem(SEEN_RELEASE_KEY)).toBe("0.4.0")
+    expect(trigger).toHaveFocus()
+  })
+
+  it("opens from the Alt+N keyboard shortcut", async () => {
+    const user = userEvent.setup()
+    renderWhatsNew()
+
+    await user.keyboard("{Alt>}n{/Alt}")
+
+    expect(await screen.findByRole("dialog")).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/features/changelog/components/WhatsNew.tsx b/apps/web/src/features/changelog/components/WhatsNew.tsx
new file mode 100644
index 00000000..e92301f6
--- /dev/null
+++ b/apps/web/src/features/changelog/components/WhatsNew.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useMemo, useState } from "react"
+import { Link } from "@tanstack/react-router"
+import { Button } from "@workspace/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog"
+import { useChangelog } from "../hooks/use-changelog"
+import {
+  hasUnseenFeatureRelease,
+  markReleaseSeen,
+  readSeenRelease,
+} from "../lib/seen-release"
+import { CHANGELOG_ENTRY_TYPES } from "../types"
+import { formatDate, typeLabel } from "../utils"
+import { ChangelogEntry } from "./ChangelogEntry"
+
+export function WhatsNew() {
+  const [open, setOpen] = useState(false)
+  const changelog = useChangelog()
+  const newestRelease = changelog.data?.releases[0]
+  const seenVersion =
+    typeof window === "undefined" ? null : readSeenRelease(window.localStorage)
+  const showIndicator = newestRelease
+    ? hasUnseenFeatureRelease(newestRelease.version, seenVersion)
+    : false
+
+  const groupedEntries = useMemo(
+    () =>
+      CHANGELOG_ENTRY_TYPES.map((type) => ({
+        type,
+        entries:
+          newestRelease?.entries.filter((entry) => entry.type === type) ?? [],
+      })).filter((group) => group.entries.length > 0),
+    [newestRelease]
+  )
+
+  useEffect(() => {
+    function openFromShortcut(event: KeyboardEvent) {
+      if (!event.altKey || event.key.toLowerCase() !== "n") return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        (target.matches("input, textarea, select") || target.isContentEditable)
+      ) {
+        return
+      }
+      event.preventDefault()
+      setOpen(true)
+    }
+
+    document.addEventListener("keydown", openFromShortcut)
+    return () => document.removeEventListener("keydown", openFromShortcut)
+  }, [])
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (open && !nextOpen && newestRelease && typeof window !== "undefined") {
+      markReleaseSeen(window.localStorage, newestRelease.version)
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        aria-keyshortcuts="Alt+N"
+        onClick={() => setOpen(true)}
+        className="relative"
+      >
+        What&apos;s new
+        {showIndicator && (
+          <span
+            aria-label="Unseen release"
+            className="size-1.5 rounded-full bg-info"
+          />
+        )}
+      </Button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent
+          data-mobile-variant="drawer"
+          className="max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-lg"
+        >
+          <DialogHeader>
+            <DialogTitle>What&apos;s new</DialogTitle>
+            {newestRelease ? (
+              <DialogDescription>
+                Version {newestRelease.version} ·{" "}
+                {formatDate(newestRelease.date)}
+              </DialogDescription>
+            ) : (
+              <DialogDescription>
+                Release notes are unavailable.
+              </DialogDescription>
+            )}
+          </DialogHeader>
+
+          {newestRelease && (
+            <div className="max-h-96 space-y-4 overflow-y-auto pe-1">
+              {groupedEntries.map((group) => (
+                <section
+                  key={group.type}
+                  aria-labelledby={`whats-new-${group.type}`}
+                >
+                  <h3
+                    id={`whats-new-${group.type}`}
+                    className="mb-1 text-xs font-semibold text-foreground"
+                  >
+                    {typeLabel(group.type)}
+                  </h3>
+                  <ul role="list">
+                    {group.entries.map((entry) => (
+                      <li key={`${entry.pr}-${entry.text}`}>
+                        <ChangelogEntry entry={entry} />
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              render={<Link to="/changelog" />}
+              nativeButton={false}
+              onClick={() => handleOpenChange(false)}
+            >
+              See full changelog
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/web/src/features/changelog/hooks/use-changelog.ts b/apps/web/src/features/changelog/hooks/use-changelog.ts
new file mode 100644
index 00000000..fa9c078c
--- /dev/null
+++ b/apps/web/src/features/changelog/hooks/use-changelog.ts
@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+import { changelogQueryKey, getChangelog } from "../lib/changelog-client"
+
+export function useChangelog() {
+  return useQuery({
+    queryKey: changelogQueryKey,
+    queryFn: getChangelog,
+    staleTime: Number.POSITIVE_INFINITY,
+  })
+}
diff --git a/apps/web/src/features/changelog/hooks/use-release-hash.test.tsx b/apps/web/src/features/changelog/hooks/use-release-hash.test.tsx
new file mode 100644
index 00000000..de7189c1
--- /dev/null
+++ b/apps/web/src/features/changelog/hooks/use-release-hash.test.tsx
@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { render } from "@testing-library/react"
+import { useReleaseHash } from "./use-release-hash"
+
+function TestRelease({ ready = true }: { ready?: boolean }) {
+  useReleaseHash(ready)
+  return <section id="v0-4-0" tabIndex={-1} />
+}
+
+afterEach(() => {
+  window.history.replaceState(null, "", "/")
+  vi.restoreAllMocks()
+})
+
+describe("useReleaseHash", () => {
+  it("scrolls to and focuses a direct release hash", () => {
+    window.history.replaceState(null, "", "/changelog#v0-4-0")
+    const scrollIntoView = vi.fn()
+    Element.prototype.scrollIntoView = scrollIntoView
+    vi.spyOn(window, "matchMedia").mockReturnValue({
+      matches: false,
+    } as MediaQueryList)
+
+    const { container } = render(<TestRelease />)
+    const release = container.querySelector("#v0-4-0")
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "smooth",
+      block: "start",
+    })
+    expect(release).toHaveFocus()
+  })
+
+  it("uses instant scrolling when reduced motion is preferred", () => {
+    window.history.replaceState(null, "", "/changelog#v0-4-0")
+    const scrollIntoView = vi.fn()
+    Element.prototype.scrollIntoView = scrollIntoView
+    vi.spyOn(window, "matchMedia").mockReturnValue({
+      matches: true,
+    } as MediaQueryList)
+
+    render(<TestRelease />)
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "auto",
+      block: "start",
+    })
+  })
+
+  it.each(["#not-a-version", "#v9-9-9"])(
+    "ignores unknown or malformed hash %s",
+    (hash) => {
+      window.history.replaceState(null, "", `/changelog${hash}`)
+      const scrollIntoView = vi.fn()
+      Element.prototype.scrollIntoView = scrollIntoView
+      const consoleError = vi.spyOn(console, "error")
+
+      render(<TestRelease />)
+
+      expect(scrollIntoView).not.toHaveBeenCalled()
+      expect(consoleError).not.toHaveBeenCalled()
+    }
+  )
+})
diff --git a/apps/web/src/features/changelog/hooks/use-release-hash.ts b/apps/web/src/features/changelog/hooks/use-release-hash.ts
new file mode 100644
index 00000000..89312cba
--- /dev/null
+++ b/apps/web/src/features/changelog/hooks/use-release-hash.ts
@@ -0,0 +1,29 @@
+import { useEffect } from "react"
+import { isReleaseHash } from "../lib/version-anchor"
+
+function focusHashTarget() {
+  if (!isReleaseHash(window.location.hash)) return
+
+  const target = document.getElementById(window.location.hash.slice(1))
+  if (!target) return
+
+  const reducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)"
+  ).matches
+
+  target.scrollIntoView({
+    behavior: reducedMotion ? "auto" : "smooth",
+    block: "start",
+  })
+  target.focus({ preventScroll: true })
+}
+
+export function useReleaseHash(releasesReady: boolean) {
+  useEffect(() => {
+    if (!releasesReady) return
+
+    focusHashTarget()
+    window.addEventListener("hashchange", focusHashTarget)
+    return () => window.removeEventListener("hashchange", focusHashTarget)
+  }, [releasesReady])
+}
diff --git a/apps/web/src/features/changelog/lib/changelog-client.ts b/apps/web/src/features/changelog/lib/changelog-client.ts
new file mode 100644
index 00000000..db796073
--- /dev/null
+++ b/apps/web/src/features/changelog/lib/changelog-client.ts
@@ -0,0 +1,72 @@
+import {
+  CHANGELOG_AREAS,
+  CHANGELOG_ENTRY_TYPES
+  
+  
+  
+} from "../types"
+import type {ChangelogArea, ChangelogData, ChangelogEntryType} from "../types";
+
+const CHANGELOG_URL = "/changelog.json"
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
+export function isChangelogEntryType(
+  value: unknown
+): value is ChangelogEntryType {
+  return (
+    typeof value === "string" &&
+    CHANGELOG_ENTRY_TYPES.some((entryType) => entryType === value)
+  )
+}
+
+export function isChangelogArea(value: unknown): value is ChangelogArea {
+  return (
+    typeof value === "string" && CHANGELOG_AREAS.some((area) => area === value)
+  )
+}
+
+function isChangelogEntry(value: unknown): boolean {
+  if (!isRecord(value)) return false
+
+  return (
+    isChangelogEntryType(value.type) &&
+    isChangelogArea(value.area) &&
+    typeof value.text === "string" &&
+    (value.pr === null ||
+      (typeof value.pr === "number" && Number.isInteger(value.pr))) &&
+    typeof value.breaking === "boolean"
+  )
+}
+
+export function isChangelogData(value: unknown): value is ChangelogData {
+  if (!isRecord(value) || !Array.isArray(value.releases)) return false
+
+  return value.releases.every(
+    (release) =>
+      isRecord(release) &&
+      typeof release.version === "string" &&
+      typeof release.date === "string" &&
+      typeof release.yanked === "boolean" &&
+      Array.isArray(release.entries) &&
+      release.entries.every(isChangelogEntry)
+  )
+}
+
+export async function getChangelog(): Promise<ChangelogData> {
+  const response = await fetch(CHANGELOG_URL)
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: Failed to load changelog`)
+  }
+
+  const data: unknown = await response.json()
+  if (!isChangelogData(data)) {
+    throw new Error("Invalid changelog format: missing or malformed releases")
+  }
+
+  return data
+}
+
+export const changelogQueryKey = ["changelog"] as const
diff --git a/apps/web/src/features/changelog/lib/seen-release.test.ts b/apps/web/src/features/changelog/lib/seen-release.test.ts
new file mode 100644
index 00000000..13d04bde
--- /dev/null
+++ b/apps/web/src/features/changelog/lib/seen-release.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from "vitest"
+import {
+  SEEN_RELEASE_KEY,
+  hasUnseenFeatureRelease,
+  markReleaseSeen,
+  readSeenRelease,
+} from "./seen-release"
+
+describe("seen release storage", () => {
+  it("detects only newer major and minor releases", () => {
+    expect(hasUnseenFeatureRelease("0.4.0", "0.3.2")).toBe(true)
+    expect(hasUnseenFeatureRelease("1.0.0", "0.9.9")).toBe(true)
+    expect(hasUnseenFeatureRelease("0.4.1", "0.4.0")).toBe(false)
+    expect(hasUnseenFeatureRelease("0.4.0", null)).toBe(false)
+  })
+
+  it("reads and writes the stable storage key", () => {
+    localStorage.clear()
+
+    markReleaseSeen(localStorage, "0.4.0")
+    expect(localStorage.getItem(SEEN_RELEASE_KEY)).toBe("0.4.0")
+    expect(readSeenRelease(localStorage)).toBe("0.4.0")
+  })
+
+  it("treats unreadable storage as no indicator", () => {
+    const getItem = vi
+      .spyOn(Storage.prototype, "getItem")
+      .mockImplementation(() => {
+        throw new Error("blocked")
+      })
+
+    expect(readSeenRelease(localStorage)).toBeNull()
+    getItem.mockRestore()
+  })
+})
diff --git a/apps/web/src/features/changelog/lib/seen-release.ts b/apps/web/src/features/changelog/lib/seen-release.ts
new file mode 100644
index 00000000..92aac4ab
--- /dev/null
+++ b/apps/web/src/features/changelog/lib/seen-release.ts
@@ -0,0 +1,36 @@
+export const SEEN_RELEASE_KEY = "so4:changelog:seen"
+
+function parseCoreVersion(version: string): [number, number, number] | null {
+  const match = /^(\d+)\.(\d+)\.(\d+)(?:[-+].*)?$/.exec(version)
+  if (!match) return null
+  return [Number(match[1]), Number(match[2]), Number(match[3])]
+}
+
+export function readSeenRelease(storage: Storage): string | null {
+  try {
+    return storage.getItem(SEEN_RELEASE_KEY)
+  } catch {
+    return null
+  }
+}
+
+export function markReleaseSeen(storage: Storage, version: string): void {
+  try {
+    storage.setItem(SEEN_RELEASE_KEY, version)
+  } catch {
+    // Storage may be unavailable in private browsing. Dismissal still succeeds.
+  }
+}
+
+export function hasUnseenFeatureRelease(
+  newestVersion: string,
+  seenVersion: string | null
+): boolean {
+  if (seenVersion === null) return false
+
+  const newest = parseCoreVersion(newestVersion)
+  const seen = parseCoreVersion(seenVersion)
+  if (!newest || !seen || newest[2] !== 0) return false
+
+  return newest[0] > seen[0] || (newest[0] === seen[0] && newest[1] > seen[1])
+}
diff --git a/apps/web/src/features/changelog/lib/version-anchor.test.ts b/apps/web/src/features/changelog/lib/version-anchor.test.ts
new file mode 100644
index 00000000..d983d3f2
--- /dev/null
+++ b/apps/web/src/features/changelog/lib/version-anchor.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest"
+import {
+  isReleaseHash,
+  releasePermalink,
+  versionToAnchorId,
+} from "./version-anchor"
+
+describe("versionToAnchorId", () => {
+  it.each([
+    ["0.4.0", "v0-4-0"],
+    ["12.34.56", "v12-34-56"],
+    ["2.0.0-rc.12", "v2-0-0-rc-12"],
+    ["1.5.0-beta.2+build.9", "v1-5-0-beta-2-build-9"],
+  ])("maps %s to %s", (version, anchor) => {
+    expect(versionToAnchorId(version)).toBe(anchor)
+  })
+
+  it.each(["", "v0.4.0", "0.4", "0.4.0/unsafe"])(
+    "rejects malformed version %s",
+    (version) => {
+      expect(() => versionToAnchorId(version)).toThrow()
+    }
+  )
+})
+
+it("builds an absolute URL that round-trips to the release hash", () => {
+  const permalink = releasePermalink("0.4.0", "https://so4.market")
+  const url = new URL(permalink)
+
+  expect(url.href).toBe("https://so4.market/changelog#v0-4-0")
+  expect(isReleaseHash(url.hash)).toBe(true)
+})
diff --git a/apps/web/src/features/changelog/lib/version-anchor.ts b/apps/web/src/features/changelog/lib/version-anchor.ts
new file mode 100644
index 00000000..76a1b413
--- /dev/null
+++ b/apps/web/src/features/changelog/lib/version-anchor.ts
@@ -0,0 +1,20 @@
+const SEMVER_PATTERN =
+  /^\d+\.\d+\.\d+(?:-[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?(?:\+[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/
+
+/** Derive the permanent DOM id used for a release permalink. */
+export function versionToAnchorId(version: string): string {
+  if (!SEMVER_PATTERN.test(version)) {
+    throw new Error(`Invalid changelog version: ${version}`)
+  }
+
+  return `v${version.toLowerCase().replace(/[.+]/g, "-")}`
+}
+
+export function releasePermalink(version: string, origin: string): string {
+  const anchorId = versionToAnchorId(version)
+  return new URL(`/changelog#${anchorId}`, origin).href
+}
+
+export function isReleaseHash(hash: string): boolean {
+  return /^#v\d+-\d+-\d+(?:-[0-9a-z-]+)*$/i.test(hash)
+}
diff --git a/apps/web/src/features/changelog/types.ts b/apps/web/src/features/changelog/types.ts
index 55343e42..9199d32c 100644
--- a/apps/web/src/features/changelog/types.ts
+++ b/apps/web/src/features/changelog/types.ts
@@ -1,24 +1,37 @@
-export type ChangelogEntryType = "added" | "changed" | "deprecated" | "removed" | "fixed" | "security"
-export type ChangelogArea = "trade" | "pools" | "earn" | "referrals" | "faucet" | "wallet" | "docs" | "ci" | "internal"
+import type changelogJson from "../../../public/changelog.json"
 
-export interface ChangelogEntry {
-  type: ChangelogEntryType
-  area: ChangelogArea
-  text: string
-  pr: number | null
-  breaking: boolean
-}
+/**
+ * The response model is derived from the generated DX-005 JSON artifact. This
+ * keeps the UI coupled to the producer's shape instead of maintaining a second
+ * release interface by hand.
+ */
+export type ChangelogData = typeof changelogJson
+export type Release = ChangelogData["releases"][number]
+export type ChangelogEntry = Release["entries"][number]
 
-export interface Release {
-  version: string
-  date: string
-  yanked: boolean
-  entries: ChangelogEntry[]
-}
+export const CHANGELOG_ENTRY_TYPES = [
+  "added",
+  "changed",
+  "deprecated",
+  "removed",
+  "fixed",
+  "security",
+] as const
 
-export interface ChangelogData {
-  releases: Release[]
-}
+export const CHANGELOG_AREAS = [
+  "trade",
+  "pools",
+  "earn",
+  "referrals",
+  "faucet",
+  "wallet",
+  "docs",
+  "ci",
+  "internal",
+] as const
+
+export type ChangelogEntryType = (typeof CHANGELOG_ENTRY_TYPES)[number]
+export type ChangelogArea = (typeof CHANGELOG_AREAS)[number]
 
 export type ChangelogSearch = {
   type?: ChangelogEntryType
diff --git a/apps/web/src/features/changelog/utils.search.ts b/apps/web/src/features/changelog/utils.search.ts
index 68a532f4..02136d34 100644
--- a/apps/web/src/features/changelog/utils.search.ts
+++ b/apps/web/src/features/changelog/utils.search.ts
@@ -11,7 +11,10 @@ function normalizeString(str: string): string {
 /**
  * Find all indices of a substring in text (case and diacritic-insensitive)
  */
-export function findMatches(text: string, query: string): Array<{ start: number; end: number }> {
+export function findMatches(
+  text: string,
+  query: string
+): Array<{ start: number; end: number }> {
   if (!query) return []
 
   const normalizedText = normalizeString(text)
diff --git a/apps/web/src/features/changelog/utils.ts b/apps/web/src/features/changelog/utils.ts
index b63bb0fd..06960c4b 100644
--- a/apps/web/src/features/changelog/utils.ts
+++ b/apps/web/src/features/changelog/utils.ts
@@ -1,39 +1,28 @@
-import type { ChangelogEntryType } from "./types"
+import {
+  CHANGELOG_AREAS,
+  CHANGELOG_ENTRY_TYPES
+  
+} from "./types"
+import { isChangelogEntryType } from "./lib/changelog-client"
+import type {ChangelogEntryType} from "./types";
+import type { StatusVariant } from "@workspace/ui/components/status-badge"
 
-export const CHANGELOG_TYPES: ChangelogEntryType[] = [
-  "added",
-  "changed",
-  "deprecated",
-  "removed",
-  "fixed",
-  "security",
-]
+export const CHANGELOG_TYPES = CHANGELOG_ENTRY_TYPES
 
-export const CHANGELOG_AREAS = [
-  "trade",
-  "pools",
-  "earn",
-  "referrals",
-  "faucet",
-  "wallet",
-  "docs",
-  "ci",
-  "internal",
-]
-
-export function typeToVariant(type: ChangelogEntryType) {
-  const map: Record<ChangelogEntryType, string> = {
+export function typeToVariant(type: string): StatusVariant {
+  const map: Record<ChangelogEntryType, StatusVariant> = {
     added: "success",
     changed: "info",
-    deprecated: "warning",
-    removed: "danger",
-    fixed: "info",
+    fixed: "info-subtle",
+    deprecated: "muted",
+    removed: "danger-subtle",
     security: "warning",
   }
-  return map[type]
+
+  return isChangelogEntryType(type) ? map[type] : "neutral"
 }
 
-export function typeLabel(type: ChangelogEntryType): string {
+export function typeLabel(type: string): string {
   return type.charAt(0).toUpperCase() + type.slice(1)
 }
 
@@ -61,6 +50,4 @@ export function formatDate(dateStr: string): string {
   })
 }
 
-export function createAnchor(version: string): string {
-  return `#v${version.replace(/\./g, "-")}`
-}
+export { CHANGELOG_AREAS }
diff --git a/apps/web/src/features/gallery/components/gallery-page.tsx b/apps/web/src/features/gallery/components/gallery-page.tsx
index f9d11e41..3601b53b 100644
--- a/apps/web/src/features/gallery/components/gallery-page.tsx
+++ b/apps/web/src/features/gallery/components/gallery-page.tsx
@@ -3,7 +3,14 @@ import { AppShell } from "@workspace/ui/components/app-shell"
 import { Avatar, AvatarGroup } from "@workspace/ui/components/avatar"
 import { Badge } from "@workspace/ui/components/badge"
 import { Button } from "@workspace/ui/components/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@workspace/ui/components/card"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card"
 import { Input } from "@workspace/ui/components/input"
 import { KeyboardShortcut } from "@workspace/ui/components/keyboard-shortcut"
 import { LiveRegion } from "@workspace/ui/components/live-region"
@@ -14,24 +21,63 @@ import { Divider, Separator } from "@workspace/ui/components/separator"
 import { Skeleton } from "@workspace/ui/components/skeleton"
 import { Slider } from "@workspace/ui/components/slider"
 import { Spinner } from "@workspace/ui/components/spinner"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@workspace/ui/components/tabs"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@workspace/ui/components/tooltip"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@workspace/ui/components/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@workspace/ui/components/tooltip"
 import { VisuallyHidden } from "@workspace/ui/components/visually-hidden"
+import type { ProgressIndicatorProps } from "@workspace/ui/components/progress-indicator"
 import { useDirection } from "@/ui/direction-provider"
-
-const BUTTON_VARIANTS = ["default", "outline", "secondary", "ghost", "destructive", "link"] as const
+import { ChangelogCategoryBadge } from "@/features/changelog/components/ChangelogCategoryBadge"
+import { CHANGELOG_ENTRY_TYPES } from "@/features/changelog/types"
+
+const BUTTON_VARIANTS = [
+  "default",
+  "outline",
+  "secondary",
+  "ghost",
+  "destructive",
+  "link",
+] as const
 const BUTTON_SIZES = ["xs", "sm", "default", "lg"] as const
-const BADGE_VARIANTS = ["default", "secondary", "destructive", "outline", "ghost", "link"] as const
+const BADGE_VARIANTS = [
+  "default",
+  "secondary",
+  "destructive",
+  "outline",
+  "ghost",
+  "link",
+] as const
 const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const
 const PROGRESS_SIZES = ["sm", "md", "lg"] as const
-const PROGRESS_TONES = ["neutral", "accent", "success", "danger"] as const
+const PROGRESS_TONES = [
+  "neutral",
+  "accent",
+  "success",
+  "danger",
+] as const satisfies ReadonlyArray<NonNullable<ProgressIndicatorProps["tone"]>>
 const SEPARATOR_TONES = ["subtle", "default", "strong"] as const
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function Section({
+  title,
+  children,
+}: {
+  title: string
+  children: React.ReactNode
+}) {
   return (
     <section className="space-y-4">
       <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-      <div className="rounded-lg border border-border bg-card p-6">{children}</div>
+      <div className="rounded-lg border border-border bg-card p-6">
+        {children}
+      </div>
     </section>
   )
 }
@@ -57,7 +103,9 @@ export function GalleryPage() {
     <main className="mx-auto max-w-4xl space-y-10 p-6">
       <div className="flex items-start justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-foreground">Component Gallery</h1>
+          <h1 className="text-2xl font-semibold text-foreground">
+            Component Gallery
+          </h1>
           <p className="mt-1 text-sm text-muted-foreground">
             Every packages/ui primitive, all variants. See{" "}
             <a
@@ -90,7 +138,9 @@ export function GalleryPage() {
         <div className="flex flex-col gap-4">
           {BUTTON_VARIANTS.map((variant) => (
             <div key={variant} className="flex flex-wrap items-center gap-3">
-              <span className="w-20 shrink-0 text-13 text-muted-foreground">{variant}</span>
+              <span className="w-20 shrink-0 text-13 text-muted-foreground">
+                {variant}
+              </span>
               {BUTTON_SIZES.map((size) => (
                 <Button key={size} variant={variant} size={size}>
                   {size}
@@ -111,6 +161,35 @@ export function GalleryPage() {
         </div>
       </Section>
 
+      <Section title="Changelog status badges">
+        <div className="grid gap-4 sm:grid-cols-2">
+          {CHANGELOG_ENTRY_TYPES.map((type) => (
+            <div
+              key={type}
+              className="flex items-center justify-between gap-4 rounded-md bg-surface-canvas p-3"
+            >
+              <ChangelogCategoryBadge type={type} />
+              <span className="text-xs text-muted-foreground">Canvas</span>
+            </div>
+          ))}
+          {CHANGELOG_ENTRY_TYPES.map((type) => (
+            <div
+              key={`${type}-raised`}
+              className="flex items-center justify-between gap-4 rounded-md bg-surface-raised p-3"
+            >
+              <ChangelogCategoryBadge type={type} />
+              <span className="text-xs text-muted-foreground">Raised</span>
+            </div>
+          ))}
+          <div className="flex items-center gap-3 rounded-md bg-surface-canvas p-3 sm:col-span-2">
+            <ChangelogCategoryBadge type="changed" breaking />
+            <span className="text-xs text-muted-foreground">
+              Breaking marker composes with every category
+            </span>
+          </div>
+        </div>
+      </Section>
+
       <Section title="Input">
         <div className="max-w-sm space-y-3">
           <Input placeholder="Default input" />
@@ -123,11 +202,15 @@ export function GalleryPage() {
         <div className="max-w-sm">
           <Slider
             value={sliderValue}
-            onValueChange={(value) => setSliderValue(Array.isArray(value) ? [...value] : [value])}
+            onValueChange={(value) =>
+              setSliderValue(Array.isArray(value) ? [...value] : [value])
+            }
             max={100}
             step={1}
           />
-          <p className="mt-2 text-13 text-muted-foreground">Value: {sliderValue[0]}</p>
+          <p className="mt-2 text-13 text-muted-foreground">
+            Value: {sliderValue[0]}
+          </p>
         </div>
       </Section>
 
@@ -160,7 +243,7 @@ export function GalleryPage() {
         <div className="mt-6 space-y-3">
           {SEPARATOR_TONES.map((tone) => (
             <div key={tone} className="space-y-2">
-              <p className="text-11 uppercase text-muted-foreground">{tone}</p>
+              <p className="text-11 text-muted-foreground uppercase">{tone}</p>
               <Separator tone={tone} decorative />
             </div>
           ))}
@@ -186,10 +269,13 @@ export function GalleryPage() {
       <Section title="ScrollArea">
         <div className="grid gap-6 sm:grid-cols-2">
           <div className="space-y-2">
-            <p className="text-11 uppercase text-muted-foreground">
+            <p className="text-11 text-muted-foreground uppercase">
               Vertical — edge shadows follow scroll position
             </p>
-            <ScrollArea className="max-h-40 rounded-md border border-border" tone="card">
+            <ScrollArea
+              className="max-h-40 rounded-md border border-border"
+              tone="card"
+            >
               <div className="space-y-1 p-3">
                 {Array.from({ length: 20 }, (_, i) => (
                   <p key={i} className="text-13 text-foreground">
@@ -201,7 +287,9 @@ export function GalleryPage() {
           </div>
 
           <div className="space-y-2">
-            <p className="text-11 uppercase text-muted-foreground">Horizontal</p>
+            <p className="text-11 text-muted-foreground uppercase">
+              Horizontal
+            </p>
             <ScrollArea
               orientation="horizontal"
               className="rounded-md border border-border"
@@ -225,12 +313,15 @@ export function GalleryPage() {
       <Section title="Accessibility primitives">
         <div className="space-y-4">
           <p className="text-13 text-muted-foreground">
-            VisuallyHidden and LiveRegion render nothing visible by default — the
-            button below carries a hidden label, and the counter announces itself
-            politely. See packages/ui/ACCESSIBILITY_PRIMITIVES.md.
+            VisuallyHidden and LiveRegion render nothing visible by default —
+            the button below carries a hidden label, and the counter announces
+            itself politely. See packages/ui/ACCESSIBILITY_PRIMITIVES.md.
           </p>
           <div className="flex flex-wrap items-center gap-3">
-            <Button variant="outline" onClick={() => setAnnounceCount((n) => n + 1)}>
+            <Button
+              variant="outline"
+              onClick={() => setAnnounceCount((n) => n + 1)}
+            >
               Announce
               <VisuallyHidden> a polite status message</VisuallyHidden>
             </Button>
@@ -270,7 +361,8 @@ export function GalleryPage() {
       <Section title="AppShell">
         <div className="space-y-4">
           <p className="text-13 text-muted-foreground">
-            Constrained layout (default) — used for Pools, Earn, Referrals, Faucet
+            Constrained layout (default) — used for Pools, Earn, Referrals,
+            Faucet
           </p>
           <div className="overflow-hidden rounded-lg border border-border">
             <AppShell
@@ -282,7 +374,9 @@ export function GalleryPage() {
               skipLink={false}
               navbar={
                 <div className="flex h-10 items-center border-b border-border bg-muted/30 px-4">
-                  <span className="text-13 font-medium text-foreground">Navbar slot</span>
+                  <span className="text-13 font-medium text-foreground">
+                    Navbar slot
+                  </span>
                 </div>
               }
               banner={
@@ -307,7 +401,9 @@ export function GalleryPage() {
               skipLink={false}
               navbar={
                 <div className="flex h-10 items-center border-b border-border bg-muted/30 px-4">
-                  <span className="text-13 font-medium text-foreground">Navbar slot</span>
+                  <span className="text-13 font-medium text-foreground">
+                    Navbar slot
+                  </span>
                 </div>
               }
             >
@@ -322,14 +418,21 @@ export function GalleryPage() {
       <Section title="PageHeader">
         <div className="space-y-6">
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">Minimal — title + description</p>
+            <p className="mb-2 text-13 text-muted-foreground">
+              Minimal — title + description
+            </p>
             <div className="rounded-lg border border-border bg-muted/10 p-4">
-              <PageHeader title="Pools" description="Provide liquidity to SO4 GM markets." />
+              <PageHeader
+                title="Pools"
+                description="Provide liquidity to SO4 GM markets."
+              />
             </div>
           </div>
 
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">With actions slot</p>
+            <p className="mb-2 text-13 text-muted-foreground">
+              With actions slot
+            </p>
             <div className="rounded-lg border border-border bg-muted/10 p-4">
               <PageHeader
                 title="Earn"
@@ -347,7 +450,9 @@ export function GalleryPage() {
           </div>
 
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">With metadata + tabs slot</p>
+            <p className="mb-2 text-13 text-muted-foreground">
+              With metadata + tabs slot
+            </p>
             <div className="rounded-lg border border-border bg-muted/10 p-4">
               <PageHeader
                 title="Referrals"
@@ -355,7 +460,9 @@ export function GalleryPage() {
                 metadata={
                   <>
                     <Badge variant="success">Active</Badge>
-                    <span className="text-13 text-muted-foreground">Tier 3</span>
+                    <span className="text-13 text-muted-foreground">
+                      Tier 3
+                    </span>
                   </>
                 }
                 tabs={
@@ -363,7 +470,9 @@ export function GalleryPage() {
                     <TabsList className="h-9">
                       <TabsTrigger value="traders">Traders</TabsTrigger>
                       <TabsTrigger value="affiliates">Affiliates</TabsTrigger>
-                      <TabsTrigger value="distributions">Distributions</TabsTrigger>
+                      <TabsTrigger value="distributions">
+                        Distributions
+                      </TabsTrigger>
                     </TabsList>
                   </Tabs>
                 }
@@ -372,7 +481,9 @@ export function GalleryPage() {
           </div>
 
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">With breadcrumbs slot</p>
+            <p className="mb-2 text-13 text-muted-foreground">
+              With breadcrumbs slot
+            </p>
             <div className="rounded-lg border border-border bg-muted/10 p-4">
               <PageHeader
                 title="Settings"
@@ -394,7 +505,10 @@ export function GalleryPage() {
         <div className="flex flex-wrap items-center gap-3">
           <KeyboardShortcut keys={["Mod", "K"]} platform="mac" />
           <KeyboardShortcut keys={["Mod", "Shift", "P"]} platform="mac" />
-          <KeyboardShortcut keys={["Ctrl", "Alt", "Delete"]} platform="windows" />
+          <KeyboardShortcut
+            keys={["Ctrl", "Alt", "Delete"]}
+            platform="windows"
+          />
           <KeyboardShortcut keys={["Mod", "S"]} presentation="grouped" />
         </div>
       </Section>
@@ -402,7 +516,9 @@ export function GalleryPage() {
       <Section title="Card">
         <div className="space-y-6">
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">Default variant</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              Default variant
+            </p>
             <Card>
               <CardHeader>
                 <CardTitle>Card Title</CardTitle>
@@ -419,7 +535,9 @@ export function GalleryPage() {
           </div>
 
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">Interactive variant</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              Interactive variant
+            </p>
             <Card variant="interactive" className="cursor-pointer">
               <CardHeader>
                 <CardTitle>Interactive Card</CardTitle>
@@ -434,12 +552,16 @@ export function GalleryPage() {
               <CardHeader>
                 <CardTitle>Supporting Information</CardTitle>
               </CardHeader>
-              <CardContent>Recessed surface for secondary information</CardContent>
+              <CardContent>
+                Recessed surface for secondary information
+              </CardContent>
             </Card>
           </div>
 
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">With compact padding</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              With compact padding
+            </p>
             <Card padding="compact">
               <CardHeader>
                 <CardTitle>Compact Card</CardTitle>
@@ -453,11 +575,15 @@ export function GalleryPage() {
       <Section title="Spinner">
         <div className="space-y-6">
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">Decorative (hidden from screen readers)</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              Decorative (hidden from screen readers)
+            </p>
             <Spinner />
           </div>
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">With accessible label</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              With accessible label
+            </p>
             <Spinner label="Loading data..." />
           </div>
         </div>
@@ -471,7 +597,7 @@ export function GalleryPage() {
               {PROGRESS_TONES.map((tone) => (
                 <div key={`${size}-${tone}`} className="mb-3 space-y-1">
                   <span className="text-10 text-text-tertiary">{tone}</span>
-                  <ProgressIndicator value={65} size={size} tone={tone as any} />
+                  <ProgressIndicator value={65} size={size} tone={tone} />
                 </div>
               ))}
             </div>
@@ -485,7 +611,11 @@ export function GalleryPage() {
             <p className="mb-3 text-13 text-muted-foreground">All sizes</p>
             <div className="flex items-center gap-4">
               {AVATAR_SIZES.map((size) => (
-                <Avatar key={size} size={size} fallback={size.charAt(0).toUpperCase()} />
+                <Avatar
+                  key={size}
+                  size={size}
+                  fallback={size.charAt(0).toUpperCase()}
+                />
               ))}
             </div>
           </div>
@@ -511,7 +641,9 @@ export function GalleryPage() {
       <Section title="AvatarGroup">
         <div className="space-y-6">
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">With maximum visible</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              With maximum visible
+            </p>
             <AvatarGroup max={3}>
               <Avatar fallback="A" />
               <Avatar fallback="B" />
@@ -531,7 +663,9 @@ export function GalleryPage() {
           </div>
 
           <div>
-            <p className="mb-3 text-13 text-muted-foreground">Without overflow count</p>
+            <p className="mb-3 text-13 text-muted-foreground">
+              Without overflow count
+            </p>
             <AvatarGroup max={2} showCount={false}>
               <Avatar fallback="A" />
               <Avatar fallback="B" />
@@ -549,11 +683,15 @@ export function GalleryPage() {
         <div className="dark space-y-6 bg-background p-6">
           <div>
             <p className="mb-2 text-13 text-muted-foreground">text-heading-1</p>
-            <h1 className="text-heading-1 text-foreground">Perpetual markets.</h1>
+            <h1 className="text-heading-1 text-foreground">
+              Perpetual markets.
+            </h1>
           </div>
           <div>
             <p className="mb-2 text-13 text-muted-foreground">text-heading-2</p>
-            <h2 className="text-heading-2 text-foreground">Built for traders.</h2>
+            <h2 className="text-heading-2 text-foreground">
+              Built for traders.
+            </h2>
           </div>
           <div>
             <p className="mb-2 text-13 text-muted-foreground">text-heading-3</p>
@@ -561,22 +699,30 @@ export function GalleryPage() {
           </div>
           <div>
             <p className="mb-2 text-13 text-muted-foreground">text-heading-4</p>
-            <h4 className="text-heading-4 text-foreground">Small card titles</h4>
+            <h4 className="text-heading-4 text-foreground">
+              Small card titles
+            </h4>
           </div>
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">text-subheadline</p>
-            <p className="text-subheadline">Supporting copy under a call to action.</p>
+            <p className="mb-2 text-13 text-muted-foreground">
+              text-subheadline
+            </p>
+            <p className="text-subheadline">
+              Supporting copy under a call to action.
+            </p>
           </div>
           <div>
-            <p className="mb-2 text-13 text-muted-foreground">text-description</p>
-            <p className="text-description max-w-md">
-              Body copy on a dark card surface, set in Archivo at 16px with GMX's
-              tracking and line height.
+            <p className="mb-2 text-13 text-muted-foreground">
+              text-description
+            </p>
+            <p className="max-w-md text-description">
+              Body copy on a dark card surface, set in Archivo at 16px with
+              GMX's tracking and line height.
             </p>
           </div>
           <div>
             <p className="mb-2 text-13 text-muted-foreground">btn-landing</p>
-            <Button variant="default" className="btn-landing h-10 px-5 text-sm">
+            <Button variant="default" className="h-10 btn-landing px-5 text-sm">
               Launch trading app
             </Button>
           </div>
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index 81b307c4..de04b3f1 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ChangelogRouteImport } from './routes/changelog'
 import { Route as DesignSystemRouteImport } from './routes/design-system'
 import { Route as EarnRouteImport } from './routes/earn'
 import { Route as FaucetRouteImport } from './routes/faucet'
@@ -23,6 +24,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ChangelogRoute = ChangelogRouteImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DesignSystemRoute = DesignSystemRouteImport.update({
   id: '/design-system',
   path: '/design-system',
@@ -61,6 +67,7 @@ const TradeRoute = TradeRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
   '/design-system': typeof DesignSystemRoute
   '/earn': typeof EarnRoute
   '/faucet': typeof FaucetRoute
@@ -71,6 +78,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
   '/design-system': typeof DesignSystemRoute
   '/earn': typeof EarnRoute
   '/faucet': typeof FaucetRoute
@@ -82,6 +90,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
   '/design-system': typeof DesignSystemRoute
   '/earn': typeof EarnRoute
   '/faucet': typeof FaucetRoute
@@ -94,6 +103,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/changelog'
     | '/design-system'
     | '/earn'
     | '/faucet'
@@ -104,6 +114,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/changelog'
     | '/design-system'
     | '/earn'
     | '/faucet'
@@ -114,6 +125,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/changelog'
     | '/design-system'
     | '/earn'
     | '/faucet'
@@ -125,6 +137,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  ChangelogRoute: typeof ChangelogRoute
   DesignSystemRoute: typeof DesignSystemRoute
   EarnRoute: typeof EarnRoute
   FaucetRoute: typeof FaucetRoute
@@ -143,6 +156,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/changelog': {
+      id: '/changelog'
+      path: '/changelog'
+      fullPath: '/changelog'
+      preLoaderRoute: typeof ChangelogRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/design-system': {
       id: '/design-system'
       path: '/design-system'
@@ -197,6 +217,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  ChangelogRoute: ChangelogRoute,
   DesignSystemRoute: DesignSystemRoute,
   EarnRoute: EarnRoute,
   FaucetRoute: FaucetRoute,
diff --git a/apps/web/src/routes/a11y.test.tsx b/apps/web/src/routes/a11y.test.tsx
index a60efe66..5f443e55 100644
--- a/apps/web/src/routes/a11y.test.tsx
+++ b/apps/web/src/routes/a11y.test.tsx
@@ -1,13 +1,32 @@
-import { describe, expect, it } from "vitest";
-import { render } from "@testing-library/react";
-import { axe } from "vitest-axe";
-import { RouterProvider, createMemoryHistory, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
-import { FaucetPage } from "../features/faucet/components/faucet-page";
-import { TradePage } from "../features/trade/components/TradePage";
-import { ReferralsPage } from "../features/referrals/components/referrals-page";
-import { ChangelogPage } from "../features/changelog/components/ChangelogPage";
-import { http, HttpResponse } from "msw";
-import { setupServer } from "msw/node";
+import { describe, expect, it, vi } from "vitest"
+import { render } from "@testing-library/react"
+import { axe } from "vitest-axe"
+import {
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router"
+import { HttpResponse, http } from "msw"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { FaucetPage } from "../features/faucet/components/faucet-page"
+import { TradePage } from "../features/trade/components/TradePage"
+import { ReferralsPage } from "../features/referrals/components/referrals-page"
+import { ChangelogPage } from "../features/changelog/components/ChangelogPage"
+import { server } from "@/test/msw/server"
+
+vi.mock("@/ui/Navbar", () => ({
+  Navbar: () => <nav aria-label="Primary" />,
+}))
+
+vi.mock("@/lib/contracts", () => ({
+  saveReferralCode: vi.fn(),
+  referralStorageClient: { getStakerInfo: vi.fn() },
+  getAffiliateCode: vi.fn(),
+  getTraderDiscountBps: vi.fn(),
+  getTraderReferralCode: vi.fn(),
+}))
 
 // A11y Triage Guide:
 // If an accessibility violation occurs, you can triage it by inspecting the violation details.
@@ -17,122 +36,97 @@ import { setupServer } from "msw/node";
 // Always aim to fix critical and serious violations rather than waiving them.
 
 function renderWithRouter(component: React.FunctionComponent) {
-  const rootRoute = createRootRoute();
+  const rootRoute = createRootRoute()
   const indexRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: "/",
     component,
-  });
-  const routeTree = rootRoute.addChildren([indexRoute]);
-  const history = createMemoryHistory({ initialEntries: ["/"] });
-  const router = createRouter({ routeTree, history });
-  
-  return render(<RouterProvider router={router} />);
-}
+  })
+  const routeTree = rootRoute.addChildren([indexRoute])
+  const history = createMemoryHistory({ initialEntries: ["/"] })
+  const router = createRouter({ routeTree, history })
 
-const mockChangelogData = {
-  releases: [
-    {
-      version: "0.4.0",
-      date: "2026-08-24",
-      yanked: false,
-      entries: [
-        {
-          type: "added" as const,
-          area: "trade" as const,
-          text: "Trigger orders on the trade panel.",
-          pr: 512,
-          breaking: false,
-        },
-      ],
-    },
-  ],
-};
-
-const server = setupServer(
-  http.get("/changelog.json", () => {
-    return HttpResponse.json(mockChangelogData);
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
   })
-);
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  )
+}
 
 describe("Accessibility Smoke Checks", () => {
   it("Faucet page has no critical/serious violations in disconnected state", async () => {
-    const { container } = renderWithRouter(FaucetPage);
-    const results = await axe(container);
-    
+    const { container } = renderWithRouter(FaucetPage)
+    const results = await axe(container)
+
     const seriousViolations = results.violations.filter(
-      v => v.impact === "critical" || v.impact === "serious"
-    );
-    expect(seriousViolations).toEqual([]);
-  });
+      (v) => v.impact === "critical" || v.impact === "serious"
+    )
+    expect(seriousViolations).toEqual([])
+  })
 
   it("Trade page has no critical/serious violations in disconnected state", async () => {
-    const { container } = renderWithRouter(TradePage);
-    const results = await axe(container);
-    
+    const { container } = renderWithRouter(TradePage)
+    const results = await axe(container)
+
     const seriousViolations = results.violations.filter(
-      v => v.impact === "critical" || v.impact === "serious"
-    );
-    expect(seriousViolations).toEqual([]);
-  });
+      (v) => v.impact === "critical" || v.impact === "serious"
+    )
+    expect(seriousViolations).toEqual([])
+  })
 
   it("Referrals page has no critical/serious violations in disconnected state", async () => {
-    const { container } = renderWithRouter(ReferralsPage);
-    const results = await axe(container);
-    
+    const { container } = renderWithRouter(ReferralsPage)
+    const results = await axe(container)
+
     const seriousViolations = results.violations.filter(
-      v => v.impact === "critical" || v.impact === "serious"
-    );
-    expect(seriousViolations).toEqual([]);
-  });
+      (v) => v.impact === "critical" || v.impact === "serious"
+    )
+    expect(seriousViolations).toEqual([])
+  })
 
   describe("Changelog accessibility", () => {
-    beforeAll(() => server.listen());
-    afterEach(() => server.resetHandlers());
-    afterAll(() => server.close());
-
     it("has no critical/serious violations in default state (loaded)", async () => {
-      const { container } = renderWithRouter(ChangelogPage);
+      const { container } = renderWithRouter(ChangelogPage)
       // Wait for loading
-      await new Promise(resolve => setTimeout(resolve, 100));
-      const results = await axe(container);
-      
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      const results = await axe(container)
+
       const seriousViolations = results.violations.filter(
-        v => v.impact === "critical" || v.impact === "serious"
-      );
-      expect(seriousViolations).toEqual([]);
-    });
+        (v) => v.impact === "critical" || v.impact === "serious"
+      )
+      expect(seriousViolations).toEqual([])
+    })
 
     it("has no critical/serious violations in error state", async () => {
-      server.use(
-        http.get("/changelog.json", () => HttpResponse.error())
-      );
-      
-      const { container } = renderWithRouter(ChangelogPage);
-      await new Promise(resolve => setTimeout(resolve, 100));
-      const results = await axe(container);
-      
+      server.use(http.get("/changelog.json", () => HttpResponse.error()))
+
+      const { container } = renderWithRouter(ChangelogPage)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      const results = await axe(container)
+
       const seriousViolations = results.violations.filter(
-        v => v.impact === "critical" || v.impact === "serious"
-      );
-      expect(seriousViolations).toEqual([]);
-    });
+        (v) => v.impact === "critical" || v.impact === "serious"
+      )
+      expect(seriousViolations).toEqual([])
+    })
 
     it("has no critical/serious violations in empty state", async () => {
       server.use(
-        http.get("/changelog.json", () =>
-          HttpResponse.json({ releases: [] })
-        )
-      );
-      
-      const { container } = renderWithRouter(ChangelogPage);
-      await new Promise(resolve => setTimeout(resolve, 100));
-      const results = await axe(container);
-      
+        http.get("/changelog.json", () => HttpResponse.json({ releases: [] }))
+      )
+
+      const { container } = renderWithRouter(ChangelogPage)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      const results = await axe(container)
+
       const seriousViolations = results.violations.filter(
-        v => v.impact === "critical" || v.impact === "serious"
-      );
-      expect(seriousViolations).toEqual([]);
-    });
-  });
-});
+        (v) => v.impact === "critical" || v.impact === "serious"
+      )
+      expect(seriousViolations).toEqual([])
+    })
+  })
+})
diff --git a/apps/web/src/routes/changelog.tsx b/apps/web/src/routes/changelog.tsx
index 82a1eb93..4b20e3b8 100644
--- a/apps/web/src/routes/changelog.tsx
+++ b/apps/web/src/routes/changelog.tsx
@@ -1,33 +1,28 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { ChangelogPage } from "../features/changelog/components/ChangelogPage"
+import {
+  isChangelogArea,
+  isChangelogEntryType,
+} from "../features/changelog/lib/changelog-client"
 import type { ChangelogSearch } from "../features/changelog/types"
 
 export const Route = createFileRoute("/changelog")({
-  component: ChangelogPage,
+  component: ChangelogRoute,
   validateSearch: (search: Record<string, unknown>): ChangelogSearch => ({
-    type:
-      search.type === "added" ||
-      search.type === "changed" ||
-      search.type === "deprecated" ||
-      search.type === "removed" ||
-      search.type === "fixed" ||
-      search.type === "security"
-        ? search.type
-        : undefined,
-    area:
-      [
-        "trade",
-        "pools",
-        "earn",
-        "referrals",
-        "faucet",
-        "wallet",
-        "docs",
-        "ci",
-        "internal",
-      ].includes(search.area as string)
-        ? (search.area as any)
-        : undefined,
+    type: isChangelogEntryType(search.type) ? search.type : undefined,
+    area: isChangelogArea(search.area) ? search.area : undefined,
     q: typeof search.q === "string" ? search.q : undefined,
   }),
 })
+
+function ChangelogRoute() {
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+
+  return (
+    <ChangelogPage
+      search={search}
+      onSearchChange={(nextSearch) => void navigate({ search: nextSearch })}
+    />
+  )
+}
diff --git a/apps/web/src/ui/Navbar.tsx b/apps/web/src/ui/Navbar.tsx
index debb1d76..f34337ef 100644
--- a/apps/web/src/ui/Navbar.tsx
+++ b/apps/web/src/ui/Navbar.tsx
@@ -13,6 +13,7 @@ import {
   useMobileMenu,
 } from "./nav/primitives"
 import { ConnectButton } from "@/features/wallet/components/ConnectButton"
+import { WhatsNew } from "@/features/changelog/components/WhatsNew"
 
 const LANDING_LINKS = [
   { label: "Trade", href: "/trade" },
@@ -22,7 +23,10 @@ const LANDING_LINKS = [
   { label: "Governance", href: "#" },
 ]
 
-const APP_LINKS: Array<{ label: string; to: "/trade" | "/pools" | "/earn" | "/referrals" | "/faucet" | null }> = [
+const APP_LINKS: Array<{
+  label: string
+  to: "/trade" | "/pools" | "/earn" | "/referrals" | "/faucet" | null
+}> = [
   { label: "Trade", to: "/trade" },
   { label: "Pools", to: "/pools" },
   { label: "Earn", to: "/earn" },
@@ -83,15 +87,18 @@ export function Navbar({ variant }: Props) {
 
         {/* Actions */}
         <div className="flex min-w-0 shrink-0 items-center gap-1.5 sm:gap-2">
+          {isApp && <WhatsNew />}
           <ThemeToggle />
           <ConnectButton />
           {!isApp && (
             <Button
               variant="default"
-              className="btn-landing hidden h-9.5 gap-2 px-4 text-13-5 sm:inline-flex"
+              className="hidden h-9.5 gap-2 btn-landing px-4 text-13-5 sm:inline-flex"
             >
               Launch app
-              <span className="transition-transform group-hover:translate-x-0.5">→</span>
+              <span className="transition-transform group-hover:translate-x-0.5">
+                →
+              </span>
             </Button>
           )}
           <HamburgerButton open={open} onToggle={toggle} />
@@ -135,7 +142,7 @@ export function Navbar({ variant }: Props) {
                 ))}
           </ul>
           {!isApp && (
-            <Button variant="default" className="btn-landing mt-3 w-full gap-2">
+            <Button variant="default" className="mt-3 w-full gap-2 btn-landing">
               Launch app →
             </Button>
           )}
diff --git a/apps/web/test/changelog.a11y.spec.ts b/apps/web/test/changelog.a11y.spec.ts
index 1b939e37..a407b0f5 100644
--- a/apps/web/test/changelog.a11y.spec.ts
+++ b/apps/web/test/changelog.a11y.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 test.describe("Changelog - Accessibility", () => {
   test.beforeEach(async ({ page }) => {
@@ -57,7 +57,9 @@ test.describe("Changelog - Accessibility", () => {
   test("releases are in a list structure", async ({ page }) => {
     await page.waitForLoadState("networkidle")
 
-    const list = page.locator('section[aria-label="Release history"] ul[role="list"]')
+    const list = page.locator(
+      'section[aria-label="Release history"] ul[role="list"]'
+    )
     await expect(list).toBeVisible()
 
     const items = list.locator("li")
@@ -69,15 +71,17 @@ test.describe("Changelog - Accessibility", () => {
     await page.waitForLoadState("networkidle")
 
     // Tab through all focusable elements
-    const focusableElements = await page.locator(
-      "button, [role='button'], input, select, a, [tabindex]"
-    ).count()
+    const focusableElements = await page
+      .locator("button, [role='button'], input, select, a, [tabindex]")
+      .count()
 
     expect(focusableElements).toBeGreaterThan(0)
 
     // Start tabbing
     await page.keyboard.press("Tab")
-    let focusedElement = await page.evaluate(() => document.activeElement?.tagName)
+    const focusedElement = await page.evaluate(
+      () => document.activeElement?.tagName
+    )
     expect(focusedElement).not.toBeNull()
 
     // Tab through several elements and ensure we keep getting focus
@@ -144,7 +148,9 @@ test.describe("Changelog - Accessibility", () => {
     await page.waitForLoadState("networkidle")
 
     // Find a filter chip with role="button"
-    const chips = page.locator('[role="button"]').filter({ hasText: /Added|Fixed/ })
+    const chips = page
+      .locator('[role="button"]')
+      .filter({ hasText: /Added|Fixed/ })
 
     if ((await chips.count()) > 0) {
       const firstChip = chips.first()
@@ -177,7 +183,6 @@ test.describe("Changelog - Accessibility", () => {
       await page.keyboard.press("Enter")
 
       // Button should show success state (Check icon)
-      const checkIcon = page.locator("svg").filter({ hasText: "✓" }).first()
       // Icon state changes on copy
       await page.waitForTimeout(100)
     }
@@ -216,7 +221,10 @@ test.describe("Changelog - Accessibility", () => {
     await page.setViewportSize({ width: 1024, height: 768 })
 
     // Click a filter
-    const addedChip = page.locator('[role="button"]').filter({ hasText: "Added" }).first()
+    const addedChip = page
+      .locator('[role="button"]')
+      .filter({ hasText: "Added" })
+      .first()
     if ((await addedChip.count()) > 0) {
       await addedChip.click()
 
@@ -283,9 +291,7 @@ test.describe("Changelog - Accessibility", () => {
 
     // Should be able to Tab out
     await page.keyboard.press("Tab")
-    const activeTag = await page.evaluate(
-      () => document.activeElement?.tagName
-    )
+    const activeTag = await page.evaluate(() => document.activeElement?.tagName)
     expect(activeTag).not.toBe("BODY")
   })
 })
diff --git a/apps/web/test/changelog.search.spec.ts b/apps/web/test/changelog.search.spec.ts
index 83c46851..f46b14e5 100644
--- a/apps/web/test/changelog.search.spec.ts
+++ b/apps/web/test/changelog.search.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 test.describe("Changelog - Search", () => {
   test.beforeEach(async ({ page }) => {
@@ -52,7 +52,9 @@ test.describe("Changelog - Search", () => {
     await page.setViewportSize({ width: 1024, height: 768 })
 
     // Apply category filter
-    const addedChip = page.locator('[role="button"]').filter({ hasText: "Added" })
+    const addedChip = page
+      .locator('[role="button"]')
+      .filter({ hasText: "Added" })
     await addedChip.click()
 
     // Apply search
@@ -73,7 +75,9 @@ test.describe("Changelog - Search", () => {
     const areaSelect = page.locator("select-trigger").first()
     if ((await areaSelect.count()) > 0) {
       await areaSelect.click()
-      const tradeOption = page.locator("select-item").filter({ hasText: "Trading" })
+      const tradeOption = page
+        .locator("select-item")
+        .filter({ hasText: "Trading" })
       if ((await tradeOption.count()) > 0) {
         await tradeOption.click()
       }
@@ -88,10 +92,10 @@ test.describe("Changelog - Search", () => {
     expect(url).toContain("q=orders")
   })
 
-  test("typing does not create history entry per character", async ({ page }) => {
-    const historyLengthBefore = await page.evaluate(
-      () => window.history.length
-    )
+  test("typing does not create history entry per character", async ({
+    page,
+  }) => {
+    const historyLengthBefore = await page.evaluate(() => window.history.length)
 
     const searchInput = page.locator("input[placeholder*='Search']")
     await searchInput.fill("t")
@@ -104,9 +108,7 @@ test.describe("Changelog - Search", () => {
     // Wait for debounce
     await page.waitForTimeout(400)
 
-    const historyLengthAfter = await page.evaluate(
-      () => window.history.length
-    )
+    const historyLengthAfter = await page.evaluate(() => window.history.length)
 
     // Should only add 1 history entry, not 3
     const entriesAdded = historyLengthAfter - historyLengthBefore
@@ -149,7 +151,9 @@ test.describe("Changelog - Search", () => {
     await page.waitForTimeout(400)
 
     // Apply additional filter
-    const addedChip = page.locator('[role="button"]').filter({ hasText: "Added" })
+    const addedChip = page
+      .locator('[role="button"]')
+      .filter({ hasText: "Added" })
     await addedChip.click()
 
     // Clear all filters
@@ -176,8 +180,6 @@ test.describe("Changelog - Search", () => {
     await filterBtn.click()
 
     const searchInput = page.locator("input[placeholder*='Search']")
-    const startTime = Date.now()
-
     await searchInput.fill("test")
     await page.waitForTimeout(100)
     await searchInput.fill("test2")
@@ -233,6 +235,7 @@ test.describe("Changelog - Search", () => {
     await page.waitForTimeout(400)
 
     const urlBefore = page.url()
+    expect(urlBefore).toContain("q=liquidation")
 
     // Reload page
     await page.reload()
diff --git a/apps/web/test/changelog.spec.ts b/apps/web/test/changelog.spec.ts
index 5c78abab..ea1185e2 100644
--- a/apps/web/test/changelog.spec.ts
+++ b/apps/web/test/changelog.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 test.describe("Changelog - Responsive Layout", () => {
   test.beforeEach(async ({ page }) => {
@@ -6,9 +6,7 @@ test.describe("Changelog - Responsive Layout", () => {
   })
 
   // Mobile viewport tests (360px, 768px)
-  test("renders without horizontal scroll at 360px width", async ({
-    page,
-  }) => {
+  test("renders without horizontal scroll at 360px width", async ({ page }) => {
     await page.setViewportSize({ width: 360, height: 800 })
     await page.waitForLoadState("networkidle")
 
@@ -28,9 +26,7 @@ test.describe("Changelog - Responsive Layout", () => {
     expect(await versionHeading.first().isVisible()).toBe(true)
   })
 
-  test("renders without horizontal scroll at 768px width", async ({
-    page,
-  }) => {
+  test("renders without horizontal scroll at 768px width", async ({ page }) => {
     await page.setViewportSize({ width: 768, height: 1024 })
     await page.waitForLoadState("networkidle")
 
@@ -77,7 +73,7 @@ test.describe("Changelog - Responsive Layout", () => {
     page,
     context,
   }) => {
-    await context.setOfflineMode(false)
+    await context.setOffline(false)
     await page.setViewportSize({ width: 360, height: 800 })
 
     // Add touch device simulation
diff --git a/apps/web/test/changelog.states.spec.ts b/apps/web/test/changelog.states.spec.ts
index a87a2f67..723e59b6 100644
--- a/apps/web/test/changelog.states.spec.ts
+++ b/apps/web/test/changelog.states.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 test.describe("Changelog - States (Loading, Error, Empty)", () => {
   test("displays skeleton loading state initially", async ({ page }) => {
diff --git a/apps/web/test/msw/handlers.ts b/apps/web/test/msw/handlers.ts
index 093198f7..cf9c1565 100644
--- a/apps/web/test/msw/handlers.ts
+++ b/apps/web/test/msw/handlers.ts
@@ -1,4 +1,5 @@
 import { HttpResponse, http } from "msw"
+import changelog from "../../public/changelog.json"
 
 type RpcBody = { id?: string | number; method?: string }
 
@@ -14,6 +15,8 @@ const simulateTransactionSuccess = {
 }
 
 export const handlers = [
+  http.get("/changelog.json", () => HttpResponse.json(changelog)),
+
   http.post("https://soroban-testnet.stellar.org", async ({ request }) => {
     const body = (await request.json().catch(() => ({}))) as RpcBody
 
@@ -28,5 +31,7 @@ export const handlers = [
     return HttpResponse.json({ jsonrpc: "2.0", id: body.id ?? 1, result: {} })
   }),
 
-  http.get("https://horizon-testnet.stellar.org/:path*", () => HttpResponse.json({})),
+  http.get("https://horizon-testnet.stellar.org/:path*", () =>
+    HttpResponse.json({})
+  ),
 ]
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 58d9059d..200c0a58 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
 import { ChevronDownIcon, Tick02Icon } from "@hugeicons/core-free-icons"
@@ -90,14 +89,14 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pe-2 ps-8 text-xs/relaxed outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-3.5 [&>svg]:shrink-0",
+        "relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 ps-8 pe-2 text-xs/relaxed outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-3.5 [&>svg]:shrink-0",
         className
       )}
       {...props}
     >
       <SelectPrimitive.ItemIndicator
         data-slot="select-item-indicator"
-        className="absolute inset-inline-start-2 inline-flex items-center justify-center"
+        className="inset-inline-start-2 absolute inline-flex items-center justify-center"
       >
         <Icon icon={Tick02Icon} size="sm" />
       </SelectPrimitive.ItemIndicator>
diff --git a/packages/ui/src/components/status-badge.test.tsx b/packages/ui/src/components/status-badge.test.tsx
new file mode 100644
index 00000000..7aa27ea9
--- /dev/null
+++ b/packages/ui/src/components/status-badge.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { StatusBadge, statusBadgeVariants } from "./status-badge"
+
+const variants = [
+  "success",
+  "warning",
+  "danger-subtle",
+  "info",
+  "info-subtle",
+  "muted",
+] as const
+
+describe("StatusBadge", () => {
+  it.each(variants)("renders the %s semantic variant", (variant) => {
+    render(<StatusBadge variant={variant}>{variant}</StatusBadge>)
+
+    expect(screen.getByText(variant)).toHaveAttribute(
+      "data-slot",
+      "status-badge"
+    )
+  })
+
+  it("keeps every changelog variant visually distinct", () => {
+    const classes = variants.map((variant) => statusBadgeVariants({ variant }))
+
+    expect(new Set(classes).size).toBe(variants.length)
+  })
+})
diff --git a/packages/ui/src/components/status-badge.tsx b/packages/ui/src/components/status-badge.tsx
index 58c94503..43d20a0d 100644
--- a/packages/ui/src/components/status-badge.tsx
+++ b/packages/ui/src/components/status-badge.tsx
@@ -1,27 +1,31 @@
-import { cva } from 'class-variance-authority'
-import { cn } from '@workspace/ui/lib/utils'
-import type { VariantProps } from 'class-variance-authority'
-
+import { cva } from "class-variance-authority"
+import { cn } from "@workspace/ui/lib/utils"
+import type { VariantProps } from "class-variance-authority"
 
 const statusBadgeVariants = cva(
-  'group/status-badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-10 font-medium whitespace-nowrap',
+  "group/status-badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-10 font-medium whitespace-nowrap",
   {
     variants: {
       variant: {
-        success: 'border-green-500/20 bg-green-500/10 text-green-400',
-        warning: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-        danger: 'border-red-500/20 bg-red-500/10 text-red-400',
-        info: 'border-blue-500/20 bg-blue-500/10 text-blue-400',
-        neutral: 'border-border bg-muted/60 text-muted-foreground',
+        success:
+          "border-success-border bg-success-subtle text-success-foreground",
+        warning: "border-warning-border bg-warning text-warning-foreground",
+        danger: "text-danger-foreground border-danger-border bg-danger-subtle",
+        "danger-subtle":
+          "text-danger-foreground border-danger-border bg-danger-subtle",
+        info: "border-info-border bg-info text-info-foreground",
+        "info-subtle": "border-info-border bg-info-subtle text-info-foreground",
+        muted: "border-border bg-muted text-foreground",
+        neutral: "border-neutral-border bg-neutral-subtle text-foreground",
       },
     },
     defaultVariants: {
-      variant: 'neutral',
+      variant: "neutral",
     },
-  },
+  }
 )
 
-type StatusVariant = VariantProps<typeof statusBadgeVariants>['variant']
+type StatusVariant = VariantProps<typeof statusBadgeVariants>["variant"]
 
 interface StatusBadgeProps {
   variant: StatusVariant