diff --git a/public/site.css b/public/site.css
index 67a5298..1a0b555 100644
--- a/public/site.css
+++ b/public/site.css
@@ -215,14 +215,26 @@ h1 {
   display: flex;
   justify-content: center;
   align-items: baseline;
-  gap: 0.75em;
-  margin-top: 0.75em;
+  gap: 0.9em;
+  margin-top: 0.85em;
   color: var(--site-text-muted);
   font-size: 0.8125rem;
 }
 
+.webring-copy {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.45em;
+}
+
 .webring-label {
   color: var(--site-text-secondary);
+  font-weight: 500;
+}
+
+.webring-description {
+  color: var(--site-text-muted);
+  font-size: 0.75rem;
 }
 
 .webring-links {
@@ -245,7 +257,13 @@ h1 {
   .webring {
     flex-direction: column;
     align-items: center;
-    gap: 0.2em;
+    gap: 0.3em;
+  }
+
+  .webring-copy {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.05em;
   }
 }
 
diff --git a/src/components/site.tsx b/src/components/site.tsx
index 05eff14..88c81c6 100644
--- a/src/components/site.tsx
+++ b/src/components/site.tsx
@@ -3,6 +3,7 @@
 
 import { raw } from "hono/html";
 import { getProfile } from "../data.ts";
+import { Webring } from "./webring.tsx";
 
 export async function Site() {
   const profile = await getProfile();
@@ -44,30 +45,7 @@ export async function Site() {
         </a>
       </nav>
 
-      <div class="webring" aria-label="LettaMates webring navigation">
-        <span class="webring-label">LettaMates webring</span>
-        <span class="webring-links">
-          <a href={`https://ringdt.rapid.workers.dev/lettamates/prev?from=${ringFrom}`}>
-            previous
-          </a>
-          <span aria-hidden="true">/</span>
-          <a href="https://github.com/4shub/ringdt" target="_blank" rel="noopener">
-            about
-          </a>
-          <span aria-hidden="true">/</span>
-          <a href={`https://ringdt.rapid.workers.dev/lettamates/next?from=${ringFrom}`}>
-            next
-          </a>
-        </span>
-      </div>
+      <Webring name="LettaMates" slug="lettamates" from={ringFrom} />
     </div>
   );
 }
-
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
diff --git a/src/components/webring.tsx b/src/components/webring.tsx
new file mode 100644
index 0000000..65f4039
--- /dev/null
+++ b/src/components/webring.tsx
@@ -0,0 +1,34 @@
+type WebringProps = {
+  name: string;
+  slug: string;
+  from: string;
+  aboutHref?: string;
+};
+
+export function Webring({
+  name,
+  slug,
+  from,
+  aboutHref = "https://github.com/4shub/ringdt",
+}: WebringProps) {
+  const baseUrl = `https://ringdt.rapid.workers.dev/${slug}`;
+  const fromParam = encodeURIComponent(from);
+
+  return (
+    <div class="webring" aria-label={`${name} webring navigation`}>
+      <div class="webring-copy">
+        <span class="webring-label">{name} webring</span>
+        <span class="webring-description">visit another Letta person</span>
+      </div>
+      <span class="webring-links">
+        <a href={`${baseUrl}/prev?from=${fromParam}`}>previous</a>
+        <span aria-hidden="true">/</span>
+        <a href={aboutHref} target="_blank" rel="noopener">
+          about
+        </a>
+        <span aria-hidden="true">/</span>
+        <a href={`${baseUrl}/next?from=${fromParam}`}>next</a>
+      </span>
+    </div>
+  );
+}