diff --git a/app/cm_api.py b/app/cm_api.py
index f4a28c3..bea4d1b 100644
--- a/app/cm_api.py
+++ b/app/cm_api.py
@@ -15,7 +15,7 @@ def _debug_enabled() -> bool:
 
 
 class CM_API:
-    
+
     def __init__(self):
         self.app = Flask(__name__)
         # No CORS middleware: api-server is internal-only (no host port
@@ -25,6 +25,19 @@ class CM_API:
         # default that becomes an attack surface if a host port is ever
         # accidentally re-exposed.
         self._register_routes()
+        # Schema verification is deferred to the first request so that
+        # constructing the WSGI app (e.g., in tests, or via gunicorn's
+        # preload phase before MySQL is reachable) doesn't require the
+        # DB to be up. The first request hits this hook, validates the
+        # schema, and flips the latch — subsequent requests skip it.
+        self._schema_verified = False
+        self.app.before_request(self._verify_schema_once)
+
+    def _verify_schema_once(self):
+        if self._schema_verified:
+            return
+        verify_tables_once()
+        self._schema_verified = True
     
     def _get_database_connection(self):
         """Return a DB handle backed by the shared connection pool.
@@ -74,36 +87,86 @@ class CM_API:
         is_available, db, error_response = self._check_database_available()
         if not is_available:
             return error_response
-        
+
         try:
             if username:
                 query = "SELECT username, password, status, link FROM acc WHERE username = %s"
-                query_params = [username]
+                results = db.query(query, [username])
+                return jsonify(results)
+
+            # Listing path — pagination + prefix-priority sort.
+            try:
+                limit = max(1, min(int(request.args.get('limit', 200)), 1000))
+                offset = max(0, int(request.args.get('offset', 0)))
+            except (TypeError, ValueError):
+                return jsonify({"error": "limit and offset must be integers"}), 400
+            prefix = (request.args.get('prefix') or '').strip()
+            # Whitelist direction so it's safe to interpolate into the
+            # ORDER BY clause (parameterised binding doesn't apply to
+            # column names or sort directions).
+            direction = 'ASC' if request.args.get('dir', 'desc').lower() == 'asc' else 'DESC'
+
+            if prefix:
+                query = (
+                    "SELECT username, password, status, link FROM acc "
+                    "ORDER BY (CASE WHEN username LIKE %s THEN 0 ELSE 1 END), "
+                    f"username {direction} "
+                    "LIMIT %s OFFSET %s"
+                )
+                params = [f"{prefix}%", limit, offset]
             else:
-                query = "SELECT username, password, status, link FROM acc"
-                query_params = []
-            
-            results = db.query(query, query_params)
-            return jsonify(results)
-        
+                query = (
+                    "SELECT username, password, status, link FROM acc "
+                    f"ORDER BY username {direction} "
+                    "LIMIT %s OFFSET %s"
+                )
+                params = [limit, offset]
+
+            return jsonify(db.query(query, params))
+
         except Exception as error:
             return self._handle_error(error, "Not Found"), 404
-    
+
     def get_user(self, username=None):
         is_available, db, error_response = self._check_database_available()
         if not is_available:
             return error_response
-        
+
         try:
             if username:
                 query = "SELECT f_username, f_password, t_username, t_password FROM user WHERE f_username = %s"
-                query_params = [username]
+                results = db.query(query, [username])
+                return jsonify(results)
+
+            try:
+                limit = max(1, min(int(request.args.get('limit', 200)), 1000))
+                offset = max(0, int(request.args.get('offset', 0)))
+            except (TypeError, ValueError):
+                return jsonify({"error": "limit and offset must be integers"}), 400
+            prefix = (request.args.get('prefix') or '').strip()
+            sort_arg = request.args.get('sort', 'last_update_time')
+            sort_col = 'f_username' if sort_arg == 'f_username' else 'last_update_time'
+            direction = 'ASC' if request.args.get('dir', 'desc').lower() == 'asc' else 'DESC'
+
+            if prefix:
+                query = (
+                    "SELECT f_username, f_password, t_username, t_password, last_update_time "
+                    "FROM user "
+                    "ORDER BY (CASE WHEN f_username LIKE %s THEN 0 ELSE 1 END), "
+                    f"{sort_col} {direction} "
+                    "LIMIT %s OFFSET %s"
+                )
+                params = [f"{prefix}%", limit, offset]
             else:
-                query = "SELECT f_username, f_password, t_username, t_password, last_update_time FROM user"
-                query_params = []
-            
-            results = db.query(query, query_params)
-            return jsonify(results)
+                query = (
+                    "SELECT f_username, f_password, t_username, t_password, last_update_time "
+                    "FROM user "
+                    f"ORDER BY {sort_col} {direction} "
+                    "LIMIT %s OFFSET %s"
+                )
+                params = [limit, offset]
+
+            return jsonify(db.query(query, params))
 
         except Exception as error:
             return self._handle_error(error, "Not Found"), 404
@@ -298,13 +361,13 @@ class CM_API:
 def create_app():
     """WSGI factory used by gunicorn (`app.cm_api:create_app()`).
 
-    Returns the Flask app object so gunicorn can serve it. Validates the
-    schema once at boot (so a misconfigured DB fails fast) — request-time
-    handlers don't repeat the check.
+    Returns the Flask app object. Schema verification runs lazily on the
+    first request (see CM_API._verify_schema_once) so the factory itself
+    never touches MySQL — keeps gunicorn's preload phase unaffected by a
+    momentarily-unavailable DB and lets unit tests construct the app
+    without DB env wiring.
     """
-    app = CM_API().app
-    verify_tables_once()
-    return app
+    return CM_API().app
 
 
 if __name__ == '__main__':
diff --git a/web/app/actions.ts b/web/app/actions.ts
index d3a79bb..37294f7 100644
--- a/web/app/actions.ts
+++ b/web/app/actions.ts
@@ -1,14 +1,22 @@
 "use server";
 
 import { revalidatePath, revalidateTag } from "next/cache";
-import { ACCOUNTS_TAG, USERS_TAG, fetchApi } from "@/lib/api";
-import type { AccUpdate, UserUpdate } from "@/lib/types";
+import {
+  ACCOUNTS_TAG,
+  USERS_TAG,
+  fetchApi,
+  getAccountsPage,
+  getUsersPage,
+  type AccountsPageOpts,
+  type Page,
+  type UsersPageOpts,
+} from "@/lib/api";
+import type { Acc, AccUpdate, User, UserUpdate } from "@/lib/types";
 
 export type ActionResult = { ok: true } | { ok: false; error: string };
 
 // Each mutation evicts the matching tag so the next GET bypasses the
-// 30s data cache and re-reads from MySQL. revalidatePath then tells
-// Next.js to re-render the dependent route on the next request.
+// 30s data cache and re-reads from MySQL.
 
 export async function updateAccount(data: AccUpdate): Promise<ActionResult> {
   try {
@@ -75,3 +83,27 @@ export async function deleteUser(f_username: string): Promise<ActionResult> {
     return { ok: false, error: err instanceof Error ? err.message : String(err) };
   }
 }
+
+// ---- Pagination + force-refresh ----
+
+export async function loadMoreAccounts(opts: AccountsPageOpts): Promise<Page<Acc>> {
+  return getAccountsPage(opts);
+}
+
+export async function loadMoreUsers(opts: UsersPageOpts): Promise<Page<User>> {
+  return getUsersPage(opts);
+}
+
+// Force-refresh evicts the cached tag before refetching the first page,
+// so manual Refresh always returns DB-fresh data even if the cache is
+// still warm.
+
+export async function refreshAccounts(opts: AccountsPageOpts = {}): Promise<Page<Acc>> {
+  revalidateTag(ACCOUNTS_TAG);
+  return getAccountsPage({ ...opts, offset: 0 });
+}
+
+export async function refreshUsers(opts: UsersPageOpts = {}): Promise<Page<User>> {
+  revalidateTag(USERS_TAG);
+  return getUsersPage({ ...opts, offset: 0 });
+}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index f9fbed0..df66366 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,7 +1,6 @@
 import "./globals.css";
 import type { Metadata, Viewport } from "next";
 import Nav from "@/components/nav";
-import AutoRefresh from "@/components/auto-refresh";
 import { getSession } from "@/lib/auth";
 
 export const metadata: Metadata = {
@@ -27,7 +26,6 @@ export default async function RootLayout({
         <main className="mx-auto max-w-6xl px-4 pb-16 pt-8 sm:px-6 sm:pt-12">
           {children}
         </main>
-        <AutoRefresh />
       </body>
     </html>
   );
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 88a6007..dc7a7fd 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,9 +1,15 @@
-import { getAccounts } from "@/lib/api";
+import { getAccountsPage } from "@/lib/api";
 import AccountsTable from "@/components/accounts-table";
 
 const PREFIX_PATTERN = process.env.NEXT_PUBLIC_CM_PREFIX_PATTERN ?? "13c";
 
 export default async function AccountsPage() {
-  const accounts = await getAccounts();
-  return <AccountsTable initial={accounts} prefixPattern={PREFIX_PATTERN} />;
+  const page = await getAccountsPage({ prefix: PREFIX_PATTERN, dir: "desc" });
+  return (
+    <AccountsTable
+      initial={page.rows}
+      initialHasMore={page.hasMore}
+      prefixPattern={PREFIX_PATTERN}
+    />
+  );
 }
diff --git a/web/app/users/page.tsx b/web/app/users/page.tsx
index da8c03e..d5c9a3d 100644
--- a/web/app/users/page.tsx
+++ b/web/app/users/page.tsx
@@ -1,9 +1,19 @@
-import { getUsers } from "@/lib/api";
+import { getUsersPage } from "@/lib/api";
 import UsersTable from "@/components/users-table";
 
 const PREFIX_PATTERN = process.env.NEXT_PUBLIC_CM_PREFIX_PATTERN ?? "13c";
 
 export default async function UsersPage() {
-  const users = await getUsers();
-  return <UsersTable initial={users} prefixPattern={PREFIX_PATTERN} />;
+  const page = await getUsersPage({
+    prefix: PREFIX_PATTERN,
+    sort: "last_update_time",
+    dir: "desc",
+  });
+  return (
+    <UsersTable
+      initial={page.rows}
+      initialHasMore={page.hasMore}
+      prefixPattern={PREFIX_PATTERN}
+    />
+  );
 }
diff --git a/web/components/accounts-table.tsx b/web/components/accounts-table.tsx
index 57bb8c2..66f8025 100644
--- a/web/components/accounts-table.tsx
+++ b/web/components/accounts-table.tsx
@@ -1,30 +1,26 @@
 "use client";
 
-import { useMemo, useOptimistic, useState, useTransition } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect, useOptimistic, useRef, useState, useTransition } from "react";
 import type { Acc } from "@/lib/types";
-import { deleteAccount, updateAccount } from "@/app/actions";
+import {
+  deleteAccount,
+  loadMoreAccounts,
+  refreshAccounts,
+  updateAccount,
+} from "@/app/actions";
 import EditableCell from "./editable-cell";
 import ConfirmDialog from "./confirm-dialog";
 import CreateAccountDialog from "./create-account-dialog";
 import Toast, { type ToastMessage } from "./toast";
 
-type Props = { initial: Acc[]; prefixPattern: string };
+type Props = {
+  initial: Acc[];
+  initialHasMore: boolean;
+  prefixPattern: string;
+};
 type SortDir = "asc" | "desc";
 type OptimisticPatch = { username: string; field: keyof Acc; value: string };
 
-function sortAccounts(rows: Acc[], dir: SortDir, prefix: string): Acc[] {
-  return [...rows].sort((a, b) => {
-    const ap = a.username.startsWith(prefix);
-    const bp = b.username.startsWith(prefix);
-    if (ap && !bp) return -1;
-    if (!ap && bp) return 1;
-    return dir === "asc"
-      ? a.username.localeCompare(b.username)
-      : b.username.localeCompare(a.username);
-  });
-}
-
 function StatusBadge({ status }: { status: string }) {
   const map: Record<string, { bg: string; fg: string; label: string }> = {
     "": { bg: "bg-zinc-100", fg: "text-zinc-600", label: "available" },
@@ -62,52 +58,111 @@ function DeleteButton({
   );
 }
 
-export default function AccountsTable({ initial, prefixPattern }: Props) {
-  const router = useRouter();
+export default function AccountsTable({
+  initial,
+  initialHasMore,
+  prefixPattern,
+}: Props) {
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [, startTransition] = useTransition();
   const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [toast, setToast] = useState<ToastMessage | null>(null);
 
+  // Accumulated rows from initial server-side fetch + every loadMore.
+  const [rows, setRows] = useState<Acc[]>(initial);
+  const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
   const [optimistic, applyOptimistic] = useOptimistic<Acc[], OptimisticPatch>(
-    initial,
+    rows,
     (state, patch) =>
       state.map((row) =>
         row.username === patch.username ? { ...row, [patch.field]: patch.value } : row,
       ),
   );
 
-  const sorted = useMemo(
-    () => sortAccounts(optimistic, sortDir, prefixPattern),
-    [optimistic, sortDir, prefixPattern],
-  );
-
   function saveCell(username: string, field: keyof Acc, value: string) {
     return new Promise<{ ok: boolean; error?: string }>((resolve) => {
       startTransition(async () => {
         applyOptimistic({ username, field, value });
-        const row = initial.find((r) => r.username === username);
+        const row = rows.find((r) => r.username === username);
         if (!row) return resolve({ ok: false, error: "row not found" });
         const next: Acc = { ...row, [field]: value };
         const result = await updateAccount(next);
-        resolve(result.ok ? { ok: true } : { ok: false, error: result.error });
+        if (result.ok) {
+          setRows((prev) => prev.map((r) => (r.username === username ? next : r)));
+          resolve({ ok: true });
+        } else {
+          resolve({ ok: false, error: result.error });
+        }
       });
     });
   }
 
-  function refresh() {
+  async function refresh() {
     setRefreshing(true);
-    startTransition(() => {
-      router.refresh();
-      setTimeout(() => setRefreshing(false), 400);
-    });
+    try {
+      const page = await refreshAccounts({ prefix: prefixPattern, dir: sortDir });
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setRefreshing(false);
+    }
   }
 
+  async function changeSort(next: SortDir) {
+    if (next === sortDir) return;
+    setSortDir(next);
+    setLoadingMore(true);
+    try {
+      const page = await loadMoreAccounts({
+        offset: 0,
+        prefix: prefixPattern,
+        dir: next,
+      });
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setLoadingMore(false);
+    }
+  }
+
+  // Infinite scroll: when sentinel enters viewport, fetch the next page.
+  // 300px rootMargin so the next page starts loading before the user
+  // hits the bottom — feels seamless when scrolling fast.
+  useEffect(() => {
+    if (!hasMore || loadingMore || refreshing) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((e) => e.isIntersecting)) return;
+        setLoadingMore(true);
+        loadMoreAccounts({
+          offset: rows.length,
+          prefix: prefixPattern,
+          dir: sortDir,
+        })
+          .then((page) => {
+            setRows((prev) => [...prev, ...page.rows]);
+            setHasMore(page.hasMore);
+          })
+          .catch((err) => console.error("loadMoreAccounts failed:", err))
+          .finally(() => setLoadingMore(false));
+      },
+      { rootMargin: "300px 0px" },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortDir]);
+
   async function confirmDelete() {
     if (!deleteTarget) return;
     setDeleting(true);
@@ -116,6 +171,7 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
     setDeleting(false);
     if (result.ok) {
       const deleted = deleteTarget;
+      setRows((prev) => prev.filter((r) => r.username !== deleted));
       setDeleteTarget(null);
       setToast({ type: "success", message: `Account ${deleted} deleted` });
     } else {
@@ -123,11 +179,13 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
     }
   }
 
-  if (initial.length === 0) {
+  if (rows.length === 0) {
     return (
       <div>
         <PageHead
           count={0}
+          loaded={0}
+          hasMore={false}
           onRefresh={refresh}
           refreshing={refreshing}
           onAdd={() => setCreateOpen(true)}
@@ -140,6 +198,12 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
         <CreateAccountDialog
           open={createOpen}
           onClose={() => setCreateOpen(false)}
+          onSuccess={async (name) => {
+            setToast({ type: "success", message: `Account ${name} created` });
+            // Force-refresh from page 1 so the new row appears in its
+            // sorted position. (We don't know where it ranks otherwise.)
+            await refresh();
+          }}
           prefixPattern={prefixPattern}
         />
       </div>
@@ -150,6 +214,8 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
     <div>
       <PageHead
         count={optimistic.length}
+        loaded={optimistic.length}
+        hasMore={hasMore}
         onRefresh={refresh}
         refreshing={refreshing}
         onAdd={() => setCreateOpen(true)}
@@ -163,7 +229,7 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
               <th className="w-[18%] px-5 py-3 text-left">
                 <button
                   type="button"
-                  onClick={() => setSortDir((d) => (d === "asc" ? "desc" : "asc"))}
+                  onClick={() => changeSort(sortDir === "asc" ? "desc" : "asc")}
                   className="inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider text-zinc-500 transition-colors hover:text-zinc-900"
                 >
                   Username
@@ -177,7 +243,7 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
             </tr>
           </thead>
           <tbody className="divide-y divide-zinc-100">
-            {sorted.map((row) => {
+            {optimistic.map((row) => {
               const k = (f: string) => `${row.username}::${f}`;
               return (
                 <tr key={row.username} className="transition-colors hover:bg-zinc-50/60">
@@ -233,7 +299,7 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
 
       {/* Mobile cards */}
       <div className="mt-6 space-y-3 sm:hidden">
-        {sorted.map((row) => {
+        {optimistic.map((row) => {
           const k = (f: string) => `${row.username}::${f}`;
           return (
             <div key={row.username} className="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/60">
@@ -289,12 +355,28 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
         })}
       </div>
 
+      {/* Sentinel for infinite scroll. Hidden visually unless we're at
+          the bottom; the IntersectionObserver triggers loadMore as it
+          comes into view. */}
+      <div ref={sentinelRef} className="h-10" aria-hidden="true" />
+      {loadingMore && (
+        <p className="mt-4 text-center text-[11px] font-medium uppercase tracking-wider text-zinc-400">
+          Loading more…
+        </p>
+      )}
+      {!hasMore && rows.length > 0 && (
+        <p className="mt-6 text-center text-[11px] text-zinc-400">
+          End of list — {rows.length} accounts loaded
+        </p>
+      )}
+
       <CreateAccountDialog
         open={createOpen}
         onClose={() => setCreateOpen(false)}
-        onSuccess={(name) =>
-          setToast({ type: "success", message: `Account ${name} created` })
-        }
+        onSuccess={async (name) => {
+          setToast({ type: "success", message: `Account ${name} created` });
+          await refresh();
+        }}
         prefixPattern={prefixPattern}
       />
 
@@ -354,15 +436,22 @@ function CardRow({ label, children }: { label: string; children: React.ReactNode
 
 function PageHead({
   count,
+  loaded,
+  hasMore,
   onRefresh,
   refreshing,
   onAdd,
 }: {
   count: number;
+  loaded: number;
+  hasMore: boolean;
   onRefresh: () => void;
   refreshing: boolean;
   onAdd: () => void;
 }) {
+  // count == loaded for now; kept separate so a future "showing X of Y"
+  // header (when we surface a server-side total) drops in cleanly.
+  const showHasMore = hasMore && loaded > 0;
   return (
     <div className="flex flex-wrap items-end justify-between gap-4">
       <div>
@@ -373,6 +462,7 @@ function PageHead({
           Accounts
           <span className="ml-2 align-middle text-base font-medium text-zinc-400">
             {count}
+            {showHasMore && <span className="text-zinc-300">+</span>}
           </span>
         </h1>
       </div>
diff --git a/web/components/auto-refresh.tsx b/web/components/auto-refresh.tsx
deleted file mode 100644
index 61d60b4..0000000
--- a/web/components/auto-refresh.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-/**
- * Mounts a setInterval that calls router.refresh() every `intervalMs`.
- * router.refresh() re-runs the matching Server Component fetch and
- * patches the rendered output in — no full page reload, no flicker.
- *
- * Renders nothing.
- */
-export default function AutoRefresh({
-  intervalMs = 30_000,
-}: {
-  intervalMs?: number;
-}) {
-  const router = useRouter();
-  useEffect(() => {
-    const id = setInterval(() => router.refresh(), intervalMs);
-    return () => clearInterval(id);
-  }, [router, intervalMs]);
-  return null;
-}
diff --git a/web/components/users-table.tsx b/web/components/users-table.tsx
index e26816f..1ccc782 100644
--- a/web/components/users-table.tsx
+++ b/web/components/users-table.tsx
@@ -1,15 +1,23 @@
 "use client";
 
-import { useMemo, useOptimistic, useState, useTransition } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect, useOptimistic, useRef, useState, useTransition } from "react";
 import type { User } from "@/lib/types";
-import { deleteUser, updateUser } from "@/app/actions";
+import {
+  deleteUser,
+  loadMoreUsers,
+  refreshUsers,
+  updateUser,
+} from "@/app/actions";
 import EditableCell from "./editable-cell";
 import ConfirmDialog from "./confirm-dialog";
 import CreateUserDialog from "./create-user-dialog";
 import Toast, { type ToastMessage } from "./toast";
 
-type Props = { initial: User[]; prefixPattern: string };
+type Props = {
+  initial: User[];
+  initialHasMore: boolean;
+  prefixPattern: string;
+};
 type SortDir = "asc" | "desc";
 type SortKey = "f_username" | "last_update_time";
 type OptimisticPatch = {
@@ -18,29 +26,6 @@ type OptimisticPatch = {
   value: string;
 };
 
-function timeOf(t: string | null) {
-  if (!t) return 0;
-  const ms = Date.parse(t);
-  return Number.isNaN(ms) ? 0 : ms;
-}
-
-function sortUsers(rows: User[], key: SortKey, dir: SortDir, prefix: string): User[] {
-  return [...rows].sort((a, b) => {
-    const ap = a.f_username.startsWith(prefix);
-    const bp = b.f_username.startsWith(prefix);
-    if (ap && !bp) return -1;
-    if (!ap && bp) return 1;
-    if (key === "f_username") {
-      return dir === "asc"
-        ? a.f_username.localeCompare(b.f_username)
-        : b.f_username.localeCompare(a.f_username);
-    }
-    return dir === "asc"
-      ? timeOf(a.last_update_time) - timeOf(b.last_update_time)
-      : timeOf(b.last_update_time) - timeOf(a.last_update_time);
-  });
-}
-
 function formatTime(t: string | null) {
   if (!t) return <em className="not-italic text-zinc-400">—</em>;
   const d = new Date(t);
@@ -74,32 +59,35 @@ function DeleteButton({
   );
 }
 
-export default function UsersTable({ initial, prefixPattern }: Props) {
-  const router = useRouter();
+export default function UsersTable({
+  initial,
+  initialHasMore,
+  prefixPattern,
+}: Props) {
   const [sortKey, setSortKey] = useState<SortKey>("last_update_time");
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [, startTransition] = useTransition();
   const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [toast, setToast] = useState<ToastMessage | null>(null);
 
+  const [rows, setRows] = useState<User[]>(initial);
+  const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
   const [optimistic, applyOptimistic] = useOptimistic<User[], OptimisticPatch>(
-    initial,
+    rows,
     (state, patch) =>
       state.map((row) =>
         row.f_username === patch.f_username ? { ...row, [patch.field]: patch.value } : row,
       ),
   );
 
-  const sorted = useMemo(
-    () => sortUsers(optimistic, sortKey, sortDir, prefixPattern),
-    [optimistic, sortKey, sortDir, prefixPattern],
-  );
-
   function saveCell(
     f_username: string,
     field: OptimisticPatch["field"],
@@ -108,7 +96,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
     return new Promise<{ ok: boolean; error?: string }>((resolve) => {
       startTransition(async () => {
         applyOptimistic({ f_username, field, value });
-        const row = initial.find((r) => r.f_username === f_username);
+        const row = rows.find((r) => r.f_username === f_username);
         if (!row) return resolve({ ok: false, error: "row not found" });
         const next = {
           f_username: row.f_username,
@@ -118,27 +106,86 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
           [field]: value,
         };
         const result = await updateUser(next);
-        resolve(result.ok ? { ok: true } : { ok: false, error: result.error });
+        if (result.ok) {
+          setRows((prev) =>
+            prev.map((r) =>
+              r.f_username === f_username ? { ...r, [field]: value } : r,
+            ),
+          );
+          resolve({ ok: true });
+        } else {
+          resolve({ ok: false, error: result.error });
+        }
       });
     });
   }
 
-  function refresh() {
+  async function refresh() {
     setRefreshing(true);
-    startTransition(() => {
-      router.refresh();
-      setTimeout(() => setRefreshing(false), 400);
-    });
-  }
-
-  function toggleSort(k: SortKey) {
-    if (sortKey === k) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-    else {
-      setSortKey(k);
-      setSortDir("desc");
+    try {
+      const page = await refreshUsers({
+        prefix: prefixPattern,
+        sort: sortKey,
+        dir: sortDir,
+      });
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setRefreshing(false);
     }
   }
 
+  async function changeSort(nextKey: SortKey) {
+    let nextDir: SortDir;
+    if (nextKey === sortKey) {
+      nextDir = sortDir === "asc" ? "desc" : "asc";
+    } else {
+      nextDir = "desc";
+    }
+    setSortKey(nextKey);
+    setSortDir(nextDir);
+    setLoadingMore(true);
+    try {
+      const page = await loadMoreUsers({
+        offset: 0,
+        prefix: prefixPattern,
+        sort: nextKey,
+        dir: nextDir,
+      });
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setLoadingMore(false);
+    }
+  }
+
+  useEffect(() => {
+    if (!hasMore || loadingMore || refreshing) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((e) => e.isIntersecting)) return;
+        setLoadingMore(true);
+        loadMoreUsers({
+          offset: rows.length,
+          prefix: prefixPattern,
+          sort: sortKey,
+          dir: sortDir,
+        })
+          .then((page) => {
+            setRows((prev) => [...prev, ...page.rows]);
+            setHasMore(page.hasMore);
+          })
+          .catch((err) => console.error("loadMoreUsers failed:", err))
+          .finally(() => setLoadingMore(false));
+      },
+      { rootMargin: "300px 0px" },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortKey, sortDir]);
+
   async function confirmDelete() {
     if (!deleteTarget) return;
     setDeleting(true);
@@ -147,6 +194,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
     setDeleting(false);
     if (result.ok) {
       const deleted = deleteTarget;
+      setRows((prev) => prev.filter((r) => r.f_username !== deleted));
       setDeleteTarget(null);
       setToast({ type: "success", message: `User ${deleted} deleted` });
     } else {
@@ -159,7 +207,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
     return (
       <button
         type="button"
-        onClick={() => toggleSort(k)}
+        onClick={() => changeSort(k)}
         className={`inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider transition-colors ${
           active ? "text-zinc-900" : "text-zinc-500 hover:text-zinc-900"
         }`}
@@ -170,11 +218,12 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
     );
   }
 
-  if (initial.length === 0) {
+  if (rows.length === 0) {
     return (
       <div>
         <PageHead
           count={0}
+          hasMore={false}
           onRefresh={refresh}
           refreshing={refreshing}
           onAdd={() => setCreateOpen(true)}
@@ -185,14 +234,14 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
           </p>
         </div>
         <CreateUserDialog
-        open={createOpen}
-        onClose={() => setCreateOpen(false)}
-        onSuccess={(name) =>
-          setToast({ type: "success", message: `User ${name} created` })
-        }
-      />
-
-      <Toast toast={toast} onDismiss={() => setToast(null)} />
+          open={createOpen}
+          onClose={() => setCreateOpen(false)}
+          onSuccess={async (name) => {
+            setToast({ type: "success", message: `User ${name} created` });
+            await refresh();
+          }}
+        />
+        <Toast toast={toast} onDismiss={() => setToast(null)} />
       </div>
     );
   }
@@ -201,6 +250,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
     <div>
       <PageHead
         count={optimistic.length}
+        hasMore={hasMore}
         onRefresh={refresh}
         refreshing={refreshing}
         onAdd={() => setCreateOpen(true)}
@@ -229,7 +279,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
             </tr>
           </thead>
           <tbody className="divide-y divide-zinc-100">
-            {sorted.map((row) => {
+            {optimistic.map((row) => {
               const k = (f: string) => `${row.f_username}::${f}`;
               return (
                 <tr key={row.f_username} className="transition-colors hover:bg-zinc-50/60">
@@ -286,7 +336,7 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
       </div>
 
       <div className="mt-6 space-y-3 sm:hidden">
-        {sorted.map((row) => {
+        {optimistic.map((row) => {
           const k = (f: string) => `${row.f_username}::${f}`;
           return (
             <div key={row.f_username} className="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/60">
@@ -344,12 +394,25 @@ export default function UsersTable({ initial, prefixPattern }: Props) {
         })}
       </div>
 
+      <div ref={sentinelRef} className="h-10" aria-hidden="true" />
+      {loadingMore && (
+        <p className="mt-4 text-center text-[11px] font-medium uppercase tracking-wider text-zinc-400">
+          Loading more…
+        </p>
+      )}
+      {!hasMore && rows.length > 0 && (
+        <p className="mt-6 text-center text-[11px] text-zinc-400">
+          End of list — {rows.length} users loaded
+        </p>
+      )}
+
       <CreateUserDialog
         open={createOpen}
         onClose={() => setCreateOpen(false)}
-        onSuccess={(name) =>
-          setToast({ type: "success", message: `User ${name} created` })
-        }
+        onSuccess={async (name) => {
+          setToast({ type: "success", message: `User ${name} created` });
+          await refresh();
+        }}
       />
 
       <Toast toast={toast} onDismiss={() => setToast(null)} />
@@ -397,22 +460,28 @@ function MobileRow({ label, children }: { label: string; children: React.ReactNo
 
 function PageHead({
   count,
+  hasMore,
   onRefresh,
   refreshing,
   onAdd,
 }: {
   count: number;
+  hasMore: boolean;
   onRefresh: () => void;
   refreshing: boolean;
   onAdd: () => void;
 }) {
+  const showHasMore = hasMore && count > 0;
   return (
     <div className="flex flex-wrap items-end justify-between gap-4">
       <div>
         <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Table</p>
         <h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
           Users
-          <span className="ml-2 align-middle text-base font-medium text-zinc-400">{count}</span>
+          <span className="ml-2 align-middle text-base font-medium text-zinc-400">
+            {count}
+            {showHasMore && <span className="text-zinc-300">+</span>}
+          </span>
         </h1>
       </div>
       <div className="flex items-center gap-2">
diff --git a/web/lib/api.ts b/web/lib/api.ts
index 1909fdc..2a712c5 100644
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -2,16 +2,34 @@ import type { Acc, User } from "./types";
 
 const API_BASE_URL = process.env.API_BASE_URL ?? "http://api-server:3000";
 
-// How long the Next.js data cache holds an /acc/ or /user/ response
-// before considering it stale. Tab switches and auto-refreshes within
-// this window are served from memory — no api-server / MySQL round-trip.
-// Mutations (update/create/delete) call revalidateTag() so the next
-// request always sees fresh data after a write.
+// Tab-switch responses come from the Next.js data cache for this many
+// seconds before re-fetching. Mutations call revalidateTag() to evict
+// the cached entry and force the next read to hit MySQL.
 const CACHE_REVALIDATE_SECONDS = 30;
 
 export const ACCOUNTS_TAG = "accounts";
 export const USERS_TAG = "users";
 
+// Page size used for both initial server-side fetch and infinite scroll
+// on the client. 200 keeps each cached payload under ~50KB and renders
+// in well under one frame even on phones.
+export const PAGE_SIZE = 200;
+
+export type Page<T> = { rows: T[]; hasMore: boolean };
+
+export type AccountsPageOpts = {
+  offset?: number;
+  prefix?: string;
+  dir?: "asc" | "desc";
+};
+
+export type UsersPageOpts = {
+  offset?: number;
+  prefix?: string;
+  sort?: "f_username" | "last_update_time";
+  dir?: "asc" | "desc";
+};
+
 type FetchInit = {
   method?: "GET" | "POST";
   body?: unknown;
@@ -38,16 +56,39 @@ export async function fetchApi(path: string, options: FetchInit = {}): Promise<u
   return res.json();
 }
 
-export async function getAccounts(): Promise<Acc[]> {
-  const data = await fetchApi("/acc/", {
-    next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [ACCOUNTS_TAG] },
+function buildAccountsUrl(opts: AccountsPageOpts): string {
+  const { offset = 0, prefix = "", dir = "desc" } = opts;
+  const params = new URLSearchParams({
+    limit: String(PAGE_SIZE),
+    offset: String(offset),
+    dir,
   });
-  return data as Acc[];
+  if (prefix) params.set("prefix", prefix);
+  return `/acc/?${params.toString()}`;
 }
 
-export async function getUsers(): Promise<User[]> {
-  const data = await fetchApi("/user/", {
-    next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [USERS_TAG] },
+function buildUsersUrl(opts: UsersPageOpts): string {
+  const { offset = 0, prefix = "", sort = "last_update_time", dir = "desc" } = opts;
+  const params = new URLSearchParams({
+    limit: String(PAGE_SIZE),
+    offset: String(offset),
+    sort,
+    dir,
   });
-  return data as User[];
+  if (prefix) params.set("prefix", prefix);
+  return `/user/?${params.toString()}`;
+}
+
+export async function getAccountsPage(opts: AccountsPageOpts = {}): Promise<Page<Acc>> {
+  const data = (await fetchApi(buildAccountsUrl(opts), {
+    next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [ACCOUNTS_TAG] },
+  })) as Acc[];
+  return { rows: data, hasMore: data.length === PAGE_SIZE };
+}
+
+export async function getUsersPage(opts: UsersPageOpts = {}): Promise<Page<User>> {
+  const data = (await fetchApi(buildUsersUrl(opts), {
+    next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [USERS_TAG] },
+  })) as User[];
+  return { rows: data, hasMore: data.length === PAGE_SIZE };
 }