diff --git a/apps/web/components/site/nav.tsx b/apps/web/components/site/nav.tsx
index 127e0a9..f402725 100644
--- a/apps/web/components/site/nav.tsx
+++ b/apps/web/components/site/nav.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { Footer } from "@profullstack/footer/react";
 import { Button } from "@/components/ui/button";
 
 /** lucide dropped brand icons in v1, so the mark lives here. */
@@ -84,34 +85,28 @@ export function SiteNav() {
   );
 }
 
+/**
+ * @profullstack/footer: links, copyright and the webring, from the package's
+ * @latest template (an async server component).
+ */
 export function SiteFooter({ views }: { views?: number }) {
   return (
-    <footer className="border-t border-white/10 py-10">
-      <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 text-sm text-white/50 sm:flex-row sm:items-center sm:px-6">
-        <div className="flex items-center gap-2 font-mono">
-          <Image src="/icons/icon-512x512.png" alt="HQTUI" width={512} height={512} className="h-4 w-4 opacity-70" />
-          <span className="text-white/50">·</span>
-          <span>MIT</span>
-        </div>
-        <div className="flex flex-wrap gap-4 sm:ml-auto">
-          <Link className="hover:text-white" href="/#languages">Languages</Link>
-          <a className="hover:text-white" href="https://bbs.hqtui.com">Discussions</a>
-          <a className="hover:text-white" href="https://github.com/profullstack/hqtui">GitHub</a>
-          <a className="hover:text-white" href="https://www.npmjs.com/package/@profullstack/hqtui">npm</a>
-          <Link className="hover:text-white" href="/docs">Docs</Link>
-          <Link className="hover:text-white" href="/apps">Apps</Link>
-          <Link className="hover:text-white" href="/book">Cookbook</Link>
-          <Link className="hover:text-white" href="/blog">Blog</Link>
-          <a className="hover:text-white" href="https://github.com/profullstack/hqtui/blob/main/docs/PRD.md">PRD</a>
-        </div>
-        <nav className="webring flex gap-3 font-mono text-xs" aria-label="Profullstack webring">
-          <a className="hover:text-white" href="https://rssamplifier.com/ring/profullstack/previous?from=https%3A%2F%2Fhqtui.com%2F" rel="prev" title="Previous site">{"<<"}</a>
-          <a className="hover:text-white" href="https://rssamplifier.com/ring/profullstack">Profullstack</a>
-          <a className="hover:text-white" href="https://rssamplifier.com/ring/profullstack/next?from=https%3A%2F%2Fhqtui.com%2F" rel="next" title="Next site">{">>"}</a>
-          <a className="hover:text-white" href="https://rssamplifier.com/ring/profullstack/random?from=https%3A%2F%2Fhqtui.com%2F" title="Random site" aria-label="Random site">{"⚄"}</a>
-        </nav>
-        {views ? <span className="font-mono text-xs text-white/50">{views.toLocaleString()} views</span> : null}
-      </div>
-    </footer>
+    <div className="text-white">
+      <Footer
+        site="https://hqtui.com/"
+        tagline={views ? `MIT · ${views.toLocaleString()} views` : "MIT"}
+        links={[
+          { label: "Languages", href: "/#languages" },
+          { label: "Discussions", href: "https://bbs.hqtui.com" },
+          { label: "GitHub", href: "https://github.com/profullstack/hqtui" },
+          { label: "npm", href: "https://www.npmjs.com/package/@profullstack/hqtui" },
+          { label: "Docs", href: "/docs" },
+          { label: "Apps", href: "/apps" },
+          { label: "Cookbook", href: "/book" },
+          { label: "Blog", href: "/blog" },
+          { label: "PRD", href: "https://github.com/profullstack/hqtui/blob/main/docs/PRD.md" },
+        ]}
+      />
+    </div>
   );
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 5dc2c88..245a6ad 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@base-ui/react": "1.7.0",
+    "@profullstack/footer": "latest",
     "@profullstack/hqtui": "^0.10.3",
     "@profullstack/libsql-pg": "^0.1.3",
     "class-variance-authority": "0.7.1",
diff --git a/bun.lock b/bun.lock
index b962b1f..29ff304 100644
--- a/bun.lock
+++ b/bun.lock
@@ -34,6 +34,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@base-ui/react": "1.7.0",
+        "@profullstack/footer": "latest",
         "@profullstack/hqtui": "^0.10.3",
         "@profullstack/libsql-pg": "^0.1.3",
         "class-variance-authority": "0.7.1",
@@ -281,6 +282,8 @@
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@profullstack/footer": ["@profullstack/footer@0.2.1", "", { "peerDependencies": { "react": ">=18" }, "optionalPeers": ["react"], "bin": { "profullstack-footer": "bin/profullstack-footer.js" } }, "sha512-KHmKVwrlzCBrSAAJ4zobNFCxTg8VF0gvNMeAut00dX3+gbWCtk6eOwIR2AaqEC7smj6Aio6cIexzt/dUnv1McA=="],
+
     "@profullstack/hqtui": ["@profullstack/hqtui@workspace:packages/hqtui"],
 
     "@profullstack/hqtui-benchmark": ["@profullstack/hqtui-benchmark@workspace:apps/benchmark"],