diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md
index 17d1f914..81934037 100644
--- a/docs/swarm/ui.md
+++ b/docs/swarm/ui.md
@@ -55,7 +55,6 @@ works too.
 
 ### The agents page
 
-`/agents` is a column of separate cards: the hives card, a filter card, then one
 `/agents` is a column of separate cards: the hives card, a filter card, then one
 card per agent, none of them inside a bigger card. A card's
 header shows its icon, name, freshness, the status message, a **terminal**
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx
index 989911c7..7c5ec19b 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx
@@ -124,11 +124,31 @@ export function AgentsPage() {
     });
   });
 
+  const barActions = (
+    <>
+      <Button variant="primary" onClick={() => setCreateOpen(true)}>
+        + agent
+      </Button>
+      <RefreshIntervalPicker
+        id="agents-refresh"
+        value={intervalMs}
+        onChange={setIntervalMs}
+      />
+    </>
+  );
+
   return (
     <>
       <div class="ui-agents-hives">
         <HivesCard />
       </div>
+      {/* Until the roster loads (or when it fails) there are no filters, but the
+          buttons stay, so an agent can still be created. */}
+      {rows === null ? (
+        <div class="ui-filterable-view-filter-bar ui-filterable-view-filter-card">
+          <div class="ui-filterable-view-actions">{barActions}</div>
+        </div>
+      ) : null}
       {error ? (
         <ApiErrorPanel
           context="failed to load the agent roster"
@@ -140,18 +160,7 @@ export function AgentsPage() {
         <FilterableView
           view="cards"
           standalone
-          barActions={
-            <>
-              <Button variant="primary" onClick={() => setCreateOpen(true)}>
-                + agent
-              </Button>
-              <RefreshIntervalPicker
-                id="agents-refresh"
-                value={intervalMs}
-                onChange={setIntervalMs}
-              />
-            </>
-          }
+          barActions={barActions}
           columns={FIELDS}
           rows={rows}
           rowKey={(a) => a.name}