Index: src/routes/posts.js
===================================================================
--- src/routes/posts.js	(revision 02021042f8346f4cca62228062484c41e0df8bcd)
+++ src/routes/posts.js	(revision 439f09574e5643c1bfc9e6787974389afdb0802b)
@@ -939,29 +939,7 @@
     ? Guardianship.offersCollection(`${gMe}/queues/offers`, site.slug, gMe).orderedItems
     : []).filter((o) => o['shaer:ward'] === gMe && o['shaer:needsMyAccept']);
-  // FEP-633c §2: who guards this account (committed). Shown so a ward can always
-  // see its guardians, not just pending offers. Derive a display @handle when the
-  // stored one is missing or is the escalation (inbox) handle rather than a @handle.
-  const guardianHandle = (uri, cached) => {
-    if (cached && cached.charAt(0) === '@') return cached;
-    try { const u = new URL(uri); return `@${u.pathname.split('/').filter(Boolean).pop()}@${u.host}`; }
-    catch { return uri; }
-  };
-  // With their availability (FEP-633c 3.6.1): the ward always sees the real
-  // size of its safety net, not just the names. Owner-only by construction:
-  // this page is the owner's.
-  const gStatus = site ? Object.fromEntries(
-    Guardianship.availability.statusesFor(site.slug, Guardianship.listGuardians(site.slug).map((g) => g.other_uri), Date.now())
-      .map((s) => [s.id, s]),
-  ) : {};
-  const myGuardians = (site ? Guardianship.listGuardians(site.slug) : [])
-    .map((g) => ({
-      uri: g.other_uri,
-      handle: guardianHandle(g.other_uri, g.other_handle),
-      availability: (gStatus[g.other_uri] || {})['shaer:availability'] || 'active',
-      awayUntil: (gStatus[g.other_uri] || {})['shaer:awayUntil'] || null,
-    }));
   renderPage(req, res, 'pages/messages', {
     pageTitleKey: 'msg.title', bodyClass: 'on-special', items, seenAt,
-    hasMore, nextOffset: offset + FEED_PAGE, moreBase, guardianOffers, myGuardians,
+    hasMore, nextOffset: offset + FEED_PAGE, moreBase, guardianOffers,
     success: req.query.success || null, error: req.query.error || null,
   });
@@ -1162,7 +1140,27 @@
   const site = res.locals.site;
   const connections = site ? ActivityPubService.listConnections(site.slug) : [];
+  // FEP-633c §2: the ward always sees who guards it, and §3.6 how available
+  // each of them is. Connect is where "who am I connected to" belongs; a
+  // guardian is the one connection a ward should never have to hunt for.
+  // Owner-only by construction: this page is the owner's.
+  const guardianHandle = (uri, cached) => {
+    if (cached && cached.charAt(0) === '@') return cached;
+    try { const u = new URL(uri); return `@${u.pathname.split('/').filter(Boolean).pop()}@${u.host}`; }
+    catch { return uri; }
+  };
+  const gStatus = site ? Object.fromEntries(
+    Guardianship.availability.statusesFor(site.slug, Guardianship.listGuardians(site.slug).map((g) => g.other_uri), Date.now())
+      .map((s) => [s.id, s]),
+  ) : {};
+  const myGuardians = (site ? Guardianship.listGuardians(site.slug) : [])
+    .map((g) => ({
+      uri: g.other_uri,
+      handle: guardianHandle(g.other_uri, g.other_handle),
+      availability: (gStatus[g.other_uri] || {})['shaer:availability'] || 'active',
+      awayUntil: (gStatus[g.other_uri] || {})['shaer:awayUntil'] || null,
+    }));
   renderPage(req, res, 'pages/connect', {
     pageTitle: 'Connect', bodyClass: 'on-special',
-    connections,
+    connections, myGuardians,
     success: req.query.success || null, error: req.query.error || null,
   });
Index: src/views/pages/connect.ejs
===================================================================
--- src/views/pages/connect.ejs	(revision 02021042f8346f4cca62228062484c41e0df8bcd)
+++ src/views/pages/connect.ejs	(revision 439f09574e5643c1bfc9e6787974389afdb0802b)
@@ -4,4 +4,27 @@
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>
+
+  <%# FEP-633c §2 + §3.6: who guards this account, and how available each of
+      them is. Connect is the "who am I connected to" page, and a guardian is
+      the one connection a ward should never have to hunt for. Availability in
+      buddy-list language on the responsibility axis; the labels are UI, the
+      wire keeps the spec terms. Never public: this page is the owner's. %>
+  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
+    <section class="conn-guardians">
+      <h2 class="conn-gtitle">&#128737; <%= t('msg.guardians_label') %></h2>
+      <ul class="conn-glist">
+        <% myGuardians.forEach(function(g){
+             var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
+             var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
+                      : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
+          <li class="conn-guardian">
+            <span class="conn-gdot conn-gdot--<%= _st %>" aria-hidden="true"></span>
+            <span class="conn-ghandle"><%= g.handle %></span>
+            <span class="conn-gstate"><%= _lbl %></span>
+          </li>
+        <% }); %>
+      </ul>
+    </section>
+  <% } %>
 
   <form method="post" action="/news/follow" class="tl-follow">
@@ -83,4 +106,21 @@
 
 <style>
+  /* Guardians (FEP-633c 3.6): the buddy-list dot on the responsibility axis.
+     Green available, yellow declared away with an end, grey observed dormant
+     (one answer restores). Set apart from the follow list on purpose: these
+     are not people you chose to follow, they are the ones looking after you. */
+  .conn-guardians { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 12px;
+    border: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent);
+    background: color-mix(in srgb, var(--ink, #000) 2.5%, transparent);
+    border-left: 3px solid #35a2ff; }
+  .conn-gtitle { margin: 0 0 .5rem; font-size: .95rem; }
+  .conn-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
+  .conn-guardian { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+  .conn-gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
+  .conn-gdot--active { background: #4caf7d; }
+  .conn-gdot--away { background: #e0a83a; }
+  .conn-gdot--dormant { background: #8a93a3; }
+  .conn-ghandle { font-weight: 600; }
+  .conn-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .tl-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .tl-title { margin: 0 0 .75rem; }
Index: src/views/pages/messages.ejs
===================================================================
--- src/views/pages/messages.ejs	(revision 02021042f8346f4cca62228062484c41e0df8bcd)
+++ src/views/pages/messages.ejs	(revision 439f09574e5643c1bfc9e6787974389afdb0802b)
@@ -22,30 +22,4 @@
     </div>
     <% }); %>
-  <% } %>
-
-  <%# FEP-633c §2: the ward always sees who guards it (committed relations). %>
-  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
-    <div class="alert" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-left:3px solid #35a2ff;">
-      <span style="font-size:1.4em;">&#128737;</span>
-      <div style="flex:1;min-width:200px;">
-        <strong><%= t('msg.guardians_label') %></strong><br>
-        <%# Availability (FEP-633c 3.6): the ward sees the real size of its
-            safety net, in buddy-list language on the responsibility axis.
-            Labels are UI (Robins besluit); the wire keeps the spec terms.
-            Owner-only by construction: this page is the owner's. %>
-        <span class="msg-guardians">
-          <% myGuardians.forEach(function(g){
-               var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
-               var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
-                        : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
-            <span class="msg-guardian">
-              <span class="msg-gdot msg-gdot-<%= _st %>" aria-hidden="true"></span>
-              <%= g.handle %>
-              <span class="msg-gstate"><%= _lbl %></span>
-            </span>
-          <% }); %>
-        </span>
-      </div>
-    </div>
   <% } %>
 
@@ -145,14 +119,4 @@
 
 <style>
-  /* Availability of the ward's guardians (FEP-633c 3.6): the buddy-list dot
-     on the responsibility axis. Green available, yellow declared away, grey
-     observed dormant (one answer restores). */
-  .msg-guardians { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
-  .msg-guardian { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
-  .msg-gdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-  .msg-gdot-active { background: #4caf7d; }
-  .msg-gdot-away { background: #e0a83a; }
-  .msg-gdot-dormant { background: #8a93a3; }
-  .msg-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .msg-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .msg-title { margin: 0 0 .9rem; }