diff --git a/web/app/(app)/servers/page.tsx b/web/app/(app)/servers/page.tsx
index db7b76a..edf7348 100644
--- a/web/app/(app)/servers/page.tsx
+++ b/web/app/(app)/servers/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter, useSearchParams } from "next/navigation";
 import { api, Server } from "@/lib/api";
-import { Button, Card } from "@/components/ui";
+import { AsyncBoundary, Button, Card, CenteredSpinner, EmptyState, TableSkeleton } from "@/components/ui";
 import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
 import { TagChips } from "@/components/servers/TagChips";
 import { TagFilterBar } from "@/components/servers/TagFilterBar";
@@ -12,6 +12,23 @@ import { TagFilterBar } from "@/components/servers/TagFilterBar";
 
 type DotStatus = "offline" | "needs-update" | "has-package-updates" | "ok";
 
+type SortKey = "hostname" | "status" | "last_seen";
+
+const SORT_LABELS: Record<SortKey, string> = {
+  hostname: "Hostname",
+  status: "Status (worst first)",
+  last_seen: "Last seen (newest first)",
+};
+
+// Sorting by status means "show me what is wrong", so the order is by how much
+// attention each state wants rather than alphabetical.
+const STATUS_ORDER: Record<DotStatus, number> = {
+  offline: 0,
+  "needs-update": 1,
+  "has-package-updates": 2,
+  ok: 3,
+};
+
 function resolveStatus(server: Server, latestVersion: string | undefined): DotStatus {
   if (server.status === "offline" || server.status === "pending") return "offline";
   if (latestVersion && server.agent_version && server.agent_version !== latestVersion) return "needs-update";
@@ -108,7 +125,7 @@ function ServersPageBody() {
     router.replace(qs ? `/servers?${qs}` : "/servers");
   }
 
-  const { data: servers, isLoading, error } = useQuery({
+  const { data: servers, isLoading, error, refetch } = useQuery({
     queryKey: ["servers", selected],
     queryFn: () => api.listServers(selected),
     refetchInterval: 30_000,
@@ -121,13 +138,43 @@ function ServersPageBody() {
   });
   const latestVersion = latestVersionData?.version;
 
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState<SortKey>("hostname");
+
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const matched = q
+      ? (servers ?? []).filter((s) =>
+          [s.hostname, s.ip_address, s.os_info].some((field) => field?.toLowerCase().includes(q)),
+        )
+      : (servers ?? []);
+
+    // Sorted on a copy: the query cache's array is not ours to reorder.
+    return [...matched].sort((a, b) => {
+      switch (sort) {
+        case "status":
+          // Whatever needs attention first, which is the reason to sort by
+          // status at all.
+          return STATUS_ORDER[resolveStatus(a, latestVersion)] - STATUS_ORDER[resolveStatus(b, latestVersion)];
+        case "last_seen":
+          return new Date(b.last_seen ?? 0).getTime() - new Date(a.last_seen ?? 0).getTime();
+        default:
+          return a.hostname.localeCompare(b.hostname);
+      }
+    });
+  }, [servers, search, sort, latestVersion]);
+
   return (
     <div className="p-4 sm:p-6 lg:p-8">
       <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-text-primary">Servers</h1>
-          <p className="mt-1 text-sm text-text-secondary">
-            {servers?.length ?? 0} registered server{servers?.length !== 1 ? "s" : ""}
+          <p className="mt-1 text-sm text-text-secondary" aria-live="polite">
+            {/* Showing the filtered count beside the total is what stops a
+                search reading as "the fleet shrank". */}
+            {visible.length === (servers?.length ?? 0)
+              ? `${servers?.length ?? 0} registered server${servers?.length !== 1 ? "s" : ""}`
+              : `${visible.length} of ${servers?.length ?? 0} servers`}
           </p>
         </div>
         <Button href="/servers/new" variant="primary">
@@ -140,16 +187,67 @@ function ServersPageBody() {
 
       <TagFilterBar value={selected} onChange={setSelected} />
 
+      <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <label htmlFor="fleet-search" className="sr-only">
+            Search servers by hostname, address or OS
+          </label>
+          <input
+            id="fleet-search"
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search hostname, address or OS…"
+            className="w-full rounded border border-border bg-surface px-3 py-2 text-sm text-text-primary placeholder-text-secondary/60 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <label htmlFor="fleet-sort" className="font-mono text-[0.68rem] uppercase tracking-[0.13em] text-text-secondary">
+            Sort
+          </label>
+          <select
+            id="fleet-sort"
+            value={sort}
+            onChange={(e) => setSort(e.target.value as SortKey)}
+            className="rounded border border-border bg-surface px-3 py-2 text-sm text-text-primary focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+          >
+            {(Object.keys(SORT_LABELS) as SortKey[]).map((k) => (
+              <option key={k} value={k}>
+                {SORT_LABELS[k]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
       <Card padding={false}>
-        {isLoading ? (
-          <div className="flex items-center justify-center py-20">
-            <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
-          </div>
-        ) : error ? (
-          <div className="py-20 text-center text-danger">
-            Failed to load servers. Is the backend running?
-          </div>
-        ) : servers && servers.length > 0 ? (
+        <AsyncBoundary
+          isLoading={isLoading}
+          error={error}
+          onRetry={refetch}
+          skeleton={<TableSkeleton columns={6} />}
+          isEmpty={visible.length === 0}
+          empty={
+            search.trim() ? (
+              <EmptyState
+                title="No servers match that search."
+                description="Clear the search to see the rest of the fleet."
+                action={{ label: "Clear search", onClick: () => setSearch("") }}
+              />
+            ) : (
+              <EmptyState
+                title="No servers registered yet."
+                description="Add one and Vantage gives you an install one-liner to run on it."
+                icon={
+                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7" />
+                  </svg>
+                }
+                action={{ label: "Add your first server", href: "/servers/new" }}
+              />
+            )
+          }
+        >
           <Table>
             <Thead>
               <Tr>
@@ -163,7 +261,7 @@ function ServersPageBody() {
               </Tr>
             </Thead>
             <Tbody>
-              {servers.map((server: Server) => (
+              {visible.map((server: Server) => (
                 <Tr key={server.server_id}>
                   <Td label="Hostname">
                     <span className="font-medium text-text-primary">
@@ -210,19 +308,7 @@ function ServersPageBody() {
               ))}
             </Tbody>
           </Table>
-        ) : (
-          <div className="py-20 text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2">
-              <svg className="h-6 w-6 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
-              </svg>
-            </div>
-            <p className="text-text-secondary">No servers registered yet.</p>
-            <Button href="/servers/new" variant="primary" size="sm" className="mt-4">
-              Add your first server
-            </Button>
-          </div>
-        )}
+        </AsyncBoundary>
       </Card>
     </div>
   );
@@ -230,13 +316,7 @@ function ServersPageBody() {
 
 export default function ServersPage() {
   return (
-    <Suspense
-      fallback={
-        <div className="flex items-center justify-center p-20">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
-        </div>
-      }
-    >
+    <Suspense fallback={<CenteredSpinner label="Loading fleet" />}>
       <ServersPageBody />
     </Suspense>
   );
diff --git a/web/lib/query-client.ts b/web/lib/query-client.ts
index 089b922..f9c715a 100644
--- a/web/lib/query-client.ts
+++ b/web/lib/query-client.ts
@@ -7,6 +7,13 @@ export const queryClient = new QueryClient({
     queries: {
       staleTime: 30_000,
       retry: 1,
+      // Several pages poll on an interval — the fleet list every 30s, run logs
+      // faster than that. A hidden tab was still doing all of it, so a console
+      // left open overnight in a background tab kept refetching the fleet and
+      // its inventory blobs until the session expired. The default here rather
+      // than per page, because the argument is the same everywhere and the
+      // pages that poll are exactly the ones nobody remembers to check.
+      refetchIntervalInBackground: false,
     },
   },
 });