diff --git a/frontend/app/audit/page.tsx b/frontend/app/audit/page.tsx
index 3e27cb2..c0bc7b4 100644
--- a/frontend/app/audit/page.tsx
+++ b/frontend/app/audit/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 
+import ListViewCard, { ListGrid } from "../../components/ListViewCard";
 import SearchableSelect from "../../components/SearchableSelect";
 import { useToast } from "../../components/ToastProvider";
 import { queryAuditLogs } from "../../lib/api";
@@ -96,70 +97,98 @@ export default function AuditPage() {
           <h1>Audit Timeline</h1>
           <p className="lede">Database-backed request audit log for all mutating API operations.</p>
         </div>
-        <button className="secondary" onClick={loadEvents}>
+        <button className="secondary" onClick={loadEvents} disabled={loading}>
           {loading ? "Loading..." : "Refresh"}
         </button>
       </header>
 
-      <section className="table-card">
-        <div className="card-header">
-          <h2>Audit Logs</h2>
-          <span className="pill">Persisted in DB</span>
-        </div>
-        <div className="filter-bar">
-          <div className="filter-field grow">
-            <label>Search</label>
-            <input
-              type="search"
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder="Path, method, role, status, actor, entity id"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Method"
-              value={method}
-              options={methodOptions}
-              placeholder="Any method"
-              onChange={setMethod}
-              multiple
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Entity"
-              value={entity}
-              options={entityOptions}
-              placeholder="Any entity"
-              onChange={setEntity}
-              multiple
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Sort"
-              value={sortBy}
-              options={sortOptions}
-              placeholder="Sort logs"
-              onChange={setSortBy}
-              testId="audit-sort"
-            />
-          </div>
-          <div className="filter-field">
-            <label>Page Size</label>
-            <select
-              value={pageSize}
-              onChange={(event) => setPageSize(Number(event.target.value))}
-              data-testid="audit-page-size"
-            >
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-              <option value={100}>100</option>
-            </select>
+      <ListViewCard
+        title="Audit Logs"
+        headerRight={<span className="pill">Persisted in DB</span>}
+        filters={(
+          <>
+            <div className="filter-field grow">
+              <label>Search</label>
+              <input
+                type="search"
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder="Path, method, role, status, actor, entity id"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Method"
+                value={method}
+                options={methodOptions}
+                placeholder="Any method"
+                onChange={setMethod}
+                multiple
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Entity"
+                value={entity}
+                options={entityOptions}
+                placeholder="Any entity"
+                onChange={setEntity}
+                multiple
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Sort"
+                value={sortBy}
+                options={sortOptions}
+                placeholder="Sort logs"
+                onChange={setSortBy}
+                testId="audit-sort"
+              />
+            </div>
+            <div className="filter-field">
+              <label>Page Size</label>
+              <select
+                value={pageSize}
+                onChange={(event) => setPageSize(Number(event.target.value))}
+                data-testid="audit-page-size"
+              >
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+                <option value={100}>100</option>
+              </select>
+            </div>
+          </>
+        )}
+        footer={(
+          <div className="table-footer">
+            <div className="meta-label">
+              Page {page} · Showing {events.length} record{events.length === 1 ? "" : "s"}
+            </div>
+            <div className="row-actions">
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                disabled={page === 1 || loading}
+                data-testid="audit-prev-page"
+              >
+                Previous
+              </button>
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => current + 1)}
+                disabled={!hasNextPage || loading}
+                data-testid="audit-next-page"
+              >
+                Next
+              </button>
+            </div>
           </div>
-        </div>
-        <div className="table">
+        )}
+      >
+        <ListGrid>
           {events.map((event) => (
             <div key={event.id} className="row">
               <div>
@@ -191,33 +220,8 @@ export default function AuditPage() {
               <div />
             </div>
           ) : null}
-        </div>
-        <div className="table-footer">
-          <div className="meta-label">
-            Page {page} · Showing {events.length} record{events.length === 1 ? "" : "s"}
-          </div>
-          <div className="row-actions">
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              disabled={page === 1 || loading}
-              data-testid="audit-prev-page"
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => current + 1)}
-              disabled={!hasNextPage || loading}
-              data-testid="audit-next-page"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </section>
+        </ListGrid>
+      </ListViewCard>
     </div>
   );
 }
diff --git a/frontend/app/catalog/page.tsx b/frontend/app/catalog/page.tsx
index 41dd41d..6f6668e 100644
--- a/frontend/app/catalog/page.tsx
+++ b/frontend/app/catalog/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import ActionModal from "../../components/ActionModal";
+import ListViewCard, { ListGrid } from "../../components/ListViewCard";
 import SearchableSelect from "../../components/SearchableSelect";
 import { useToast } from "../../components/ToastProvider";
 import { createBook, deleteBook, getBooks, queryBooks, updateBook } from "../../lib/api";
@@ -35,6 +36,8 @@ export default function CatalogPage() {
   const [modalMode, setModalMode] = useState<BookModalMode>(null);
   const [activeBookId, setActiveBookId] = useState<number | null>(null);
   const [bookForm, setBookForm] = useState(initialBookForm);
+  const [bookSubmitting, setBookSubmitting] = useState(false);
+  const [deletingBookId, setDeletingBookId] = useState<number | null>(null);
 
   const sortConfigMap: Record<string, { sort_by: string; sort_order: "asc" | "desc" }> = {
     title_asc: { sort_by: "title", sort_order: "asc" },
@@ -187,6 +190,17 @@ export default function CatalogPage() {
 
   const handleBookSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (bookSubmitting) return;
+    const trimmedTitle = bookForm.title.trim();
+    const trimmedAuthor = bookForm.author.trim();
+    if (!trimmedTitle || !trimmedAuthor) {
+      showToast({
+        type: "error",
+        title: "Title and author are required",
+        description: "Whitespace-only values are not allowed.",
+      });
+      return;
+    }
     const copies = Number(bookForm.copies_total);
     if (!Number.isFinite(copies) || copies < 1) {
       showToast({ type: "error", title: "Total copies must be 1 or higher" });
@@ -207,12 +221,13 @@ export default function CatalogPage() {
       return;
     }
 
+    setBookSubmitting(true);
     try {
       if (modalMode === "edit") {
         if (!activeBookId) return;
         await updateBook(activeBookId, {
-          title: bookForm.title.trim(),
-          author: bookForm.author.trim(),
+          title: trimmedTitle,
+          author: trimmedAuthor,
           subject: bookForm.subject.trim() || null,
           rack_number: bookForm.rack_number.trim() || null,
           isbn: bookForm.isbn.trim() || null,
@@ -223,6 +238,8 @@ export default function CatalogPage() {
       } else {
         await createBook({
           ...bookForm,
+          title: trimmedTitle,
+          author: trimmedAuthor,
           subject: bookForm.subject.trim() || undefined,
           rack_number: bookForm.rack_number.trim() || undefined,
           isbn: bookForm.isbn.trim() || undefined,
@@ -242,12 +259,16 @@ export default function CatalogPage() {
         title: modalMode === "edit" ? "Unable to update book" : "Unable to create book",
         description: err.message || "Request failed",
       });
+    } finally {
+      setBookSubmitting(false);
     }
   };
 
   const handleDeleteBook = async (book: any) => {
+    if (bookSubmitting || deletingBookId !== null) return;
     const ok = window.confirm(`Delete "${book.title}"?`);
     if (!ok) return;
+    setDeletingBookId(book.id);
     try {
       await deleteBook(book.id);
       if (activeBookId === book.id) {
@@ -261,6 +282,8 @@ export default function CatalogPage() {
         title: "Unable to delete book",
         description: err.message || "Request failed",
       });
+    } finally {
+      setDeletingBookId(null);
     }
   };
 
@@ -282,11 +305,20 @@ export default function CatalogPage() {
           </p>
         </div>
         <div className="page-actions">
-          <button type="button" onClick={openCreateModal} data-testid="book-open-create">
+          <button
+            type="button"
+            onClick={openCreateModal}
+            data-testid="book-open-create"
+            disabled={loading || bookSubmitting || deletingBookId !== null}
+          >
             Add Book
           </button>
-          <button className="secondary" onClick={() => refresh(true)}>
-            Refresh
+          <button
+            className="secondary"
+            onClick={() => refresh(true)}
+            disabled={loading || bookSubmitting || deletingBookId !== null}
+          >
+            {loading ? "Refreshing..." : "Refresh"}
           </button>
         </div>
       </header>
@@ -310,78 +342,106 @@ export default function CatalogPage() {
         </div>
       </section>
 
-      <section className="table-card">
-        <div className="card-header">
-          <h2>Catalog Index</h2>
-          <span className="pill">Searchable</span>
-        </div>
-        <div className="filter-bar">
-          <div className="filter-field grow">
-            <label>Search</label>
-            <input
-              type="search"
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder="Title, author, subject, rack, ISBN, Book ID"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Author"
-              value={authorFilter}
-              options={authorFilterOptions}
-              placeholder="Any author"
-              onChange={setAuthorFilter}
-              multiple
-              testId="catalog-author-filter"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Availability"
-              value={availabilityFilter}
-              options={availabilityFilterOptions}
-              placeholder="Any availability"
-              onChange={setAvailabilityFilter}
-              multiple
-              testId="catalog-availability-filter"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Subject"
-              value={subjectFilter}
-              options={subjectFilterOptions}
-              placeholder="Any subject"
-              onChange={setSubjectFilter}
-              multiple
-              testId="catalog-subject-filter"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Sort"
-              value={sortBy}
-              options={sortOptions}
-              placeholder="Sort catalog"
-              onChange={setSortBy}
-              testId="catalog-sort"
-            />
-          </div>
-          <div className="filter-field">
-            <label>Page Size</label>
-            <select
-              value={pageSize}
-              onChange={(event) => setPageSize(Number(event.target.value))}
-              data-testid="catalog-page-size"
-            >
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-            </select>
+      <ListViewCard
+        title="Catalog Index"
+        headerRight={<span className="pill">Searchable</span>}
+        filters={(
+          <>
+            <div className="filter-field grow">
+              <label>Search</label>
+              <input
+                type="search"
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder="Title, author, subject, rack, ISBN, Book ID"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Author"
+                value={authorFilter}
+                options={authorFilterOptions}
+                placeholder="Any author"
+                onChange={setAuthorFilter}
+                multiple
+                testId="catalog-author-filter"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Availability"
+                value={availabilityFilter}
+                options={availabilityFilterOptions}
+                placeholder="Any availability"
+                onChange={setAvailabilityFilter}
+                multiple
+                testId="catalog-availability-filter"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Subject"
+                value={subjectFilter}
+                options={subjectFilterOptions}
+                placeholder="Any subject"
+                onChange={setSubjectFilter}
+                multiple
+                testId="catalog-subject-filter"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Sort"
+                value={sortBy}
+                options={sortOptions}
+                placeholder="Sort catalog"
+                onChange={setSortBy}
+                testId="catalog-sort"
+              />
+            </div>
+            <div className="filter-field">
+              <label>Page Size</label>
+              <select
+                value={pageSize}
+                onChange={(event) => setPageSize(Number(event.target.value))}
+                data-testid="catalog-page-size"
+              >
+                <option value={10}>10</option>
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+          </>
+        )}
+        footer={(
+          <div className="table-footer">
+            <div className="meta-label">
+              Page {page} · Showing {books.length} record{books.length === 1 ? "" : "s"}
+            </div>
+            <div className="row-actions">
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                disabled={page === 1 || loading}
+                data-testid="catalog-prev-page"
+              >
+                Previous
+              </button>
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => current + 1)}
+                disabled={!hasNextPage || loading}
+                data-testid="catalog-next-page"
+              >
+                Next
+              </button>
+            </div>
           </div>
-        </div>
-        <div className="table">
+        )}
+      >
+        <ListGrid>
           {books.map((book) => (
             <div
               key={book.id}
@@ -425,6 +485,7 @@ export default function CatalogPage() {
                     className="ghost small"
                     type="button"
                     onClick={() => openEditModal(book)}
+                    disabled={bookSubmitting || deletingBookId !== null}
                   >
                     Edit
                   </button>
@@ -432,8 +493,9 @@ export default function CatalogPage() {
                     className="danger small"
                     type="button"
                     onClick={() => handleDeleteBook(book)}
+                    disabled={bookSubmitting || deletingBookId !== null}
                   >
-                    Delete
+                    {deletingBookId === book.id ? "Deleting..." : "Delete"}
                   </button>
                 </div>
               </div>
@@ -452,33 +514,8 @@ export default function CatalogPage() {
               <div />
             </div>
           )}
-        </div>
-        <div className="table-footer">
-          <div className="meta-label">
-            Page {page} · Showing {books.length} record{books.length === 1 ? "" : "s"}
-          </div>
-          <div className="row-actions">
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              disabled={page === 1 || loading}
-              data-testid="catalog-prev-page"
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => current + 1)}
-              disabled={!hasNextPage || loading}
-              data-testid="catalog-next-page"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </section>
+        </ListGrid>
+      </ListViewCard>
 
       <ActionModal
         open={modalMode !== null}
@@ -561,11 +598,11 @@ export default function CatalogPage() {
             />
           </div>
           <div className="modal-actions">
-            <button type="button" className="secondary" onClick={closeModal}>
+            <button type="button" className="secondary" onClick={closeModal} disabled={bookSubmitting}>
               Cancel
             </button>
-            <button type="submit" data-testid="book-submit">
-              {modalMode === "edit" ? "Save Changes" : "Add Book"}
+            <button type="submit" data-testid="book-submit" disabled={bookSubmitting}>
+              {bookSubmitting ? "Saving..." : modalMode === "edit" ? "Save Changes" : "Add Book"}
             </button>
           </div>
         </form>
diff --git a/frontend/app/error.tsx b/frontend/app/error.tsx
new file mode 100644
index 0000000..d6225a6
--- /dev/null
+++ b/frontend/app/error.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function AppRouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Route error boundary", error);
+  }, [error]);
+
+  return (
+    <main className="app-error-shell">
+      <section className="app-error-card">
+        <div className="badge">Error</div>
+        <h1>Unable to render this page</h1>
+        <p className="lede">
+          An unexpected issue occurred while loading this route.
+        </p>
+        {error?.message ? <p className="notice">{error.message}</p> : null}
+        <div className="row-actions">
+          <button type="button" onClick={reset}>
+            Try Again
+          </button>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/frontend/app/fines/page.tsx b/frontend/app/fines/page.tsx
index 6d9f168..1724351 100644
--- a/frontend/app/fines/page.tsx
+++ b/frontend/app/fines/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 
+import ListViewCard, { ListGrid } from "../../components/ListViewCard";
 import SearchableSelect from "../../components/SearchableSelect";
 import { useToast } from "../../components/ToastProvider";
 import { FinePaymentLedgerItem, queryFinePayments } from "../../lib/api";
@@ -130,8 +131,8 @@ export default function FinesLedgerPage() {
             Payment ledger for collected fines with user, loan, and catalog traceability.
           </p>
         </div>
-        <button className="secondary" onClick={() => loadPage(true)}>
-          Refresh
+        <button className="secondary" onClick={() => loadPage(true)} disabled={loading}>
+          {loading ? "Refreshing..." : "Refresh"}
         </button>
       </header>
 
@@ -154,53 +155,78 @@ export default function FinesLedgerPage() {
         </div>
       </section>
 
-      <section className="table-card">
-        <div className="card-header">
-          <h2>Collection Register</h2>
-          <span className="pill">Auditable</span>
-        </div>
-        <div className="filter-bar">
-          <div className="filter-field grow">
-            <label>Search</label>
-            <input
-              type="search"
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder="Payment ID, loan, user name/email/phone, title, ISBN, reference"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Payment Mode"
-              value={paymentModes}
-              options={paymentModeOptions}
-              placeholder="All modes"
-              onChange={setPaymentModes}
-              multiple
-              testId="fines-mode-filter"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Sort"
-              value={sortBy}
-              options={sortOptions}
-              placeholder="Sort"
-              onChange={setSortBy}
-              testId="fines-sort"
-            />
-          </div>
-          <div className="filter-field">
-            <label>Page Size</label>
-            <select value={pageSize} onChange={(event) => setPageSize(Number(event.target.value))}>
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-            </select>
+      <ListViewCard
+        title="Collection Register"
+        headerRight={<span className="pill">Auditable</span>}
+        filters={(
+          <>
+            <div className="filter-field grow">
+              <label>Search</label>
+              <input
+                type="search"
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder="Payment ID, loan, user name/email/phone, title, ISBN, reference"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Payment Mode"
+                value={paymentModes}
+                options={paymentModeOptions}
+                placeholder="All modes"
+                onChange={setPaymentModes}
+                multiple
+                testId="fines-mode-filter"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Sort"
+                value={sortBy}
+                options={sortOptions}
+                placeholder="Sort"
+                onChange={setSortBy}
+                testId="fines-sort"
+              />
+            </div>
+            <div className="filter-field">
+              <label>Page Size</label>
+              <select value={pageSize} onChange={(event) => setPageSize(Number(event.target.value))}>
+                <option value={10}>10</option>
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+          </>
+        )}
+        footer={(
+          <div className="table-footer">
+            <div className="meta-label">
+              Page {page} · Showing {rows.length} payment record{rows.length === 1 ? "" : "s"}
+            </div>
+            <div className="row-actions">
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                disabled={page === 1 || loading}
+              >
+                Previous
+              </button>
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => current + 1)}
+                disabled={!hasNextPage || loading}
+              >
+                Next
+              </button>
+            </div>
           </div>
-        </div>
-
-        <div className="table">
+        )}
+      >
+        <ListGrid>
           {rows.map((row) => (
             <div key={row.id} className="row row-fine" data-testid="fine-row">
               <div>
@@ -253,31 +279,8 @@ export default function FinesLedgerPage() {
               <div />
             </div>
           ) : null}
-        </div>
-        <div className="table-footer">
-          <div className="meta-label">
-            Page {page} · Showing {rows.length} payment record{rows.length === 1 ? "" : "s"}
-          </div>
-          <div className="row-actions">
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              disabled={page === 1 || loading}
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => current + 1)}
-              disabled={!hasNextPage || loading}
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </section>
+        </ListGrid>
+      </ListViewCard>
     </div>
   );
 }
diff --git a/frontend/app/global-error.tsx b/frontend/app/global-error.tsx
new file mode 100644
index 0000000..6a6b568
--- /dev/null
+++ b/frontend/app/global-error.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import "./globals.css";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <main className="app-error-shell">
+          <section className="app-error-card">
+            <div className="badge">Critical Error</div>
+            <h1>Application failed to load</h1>
+            <p className="lede">
+              A global rendering error occurred.
+            </p>
+            {error?.message ? <p className="notice">{error.message}</p> : null}
+            <div className="row-actions">
+              <button type="button" onClick={reset}>
+                Retry
+              </button>
+              <button
+                type="button"
+                className="secondary"
+                onClick={() => window.location.reload()}
+              >
+                Reload
+              </button>
+            </div>
+          </section>
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 16d8f6e..0e87823 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -181,6 +181,13 @@ a {
   padding: 24px;
 }
 
+.app-error-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
 .auth-card {
   width: min(480px, 100%);
   background: var(--surface);
@@ -192,6 +199,17 @@ a {
   gap: 14px;
 }
 
+.app-error-card {
+  width: min(560px, 100%);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow);
+  padding: 24px;
+  display: grid;
+  gap: 14px;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -277,6 +295,14 @@ p.lede {
   transform: translateY(-1px);
 }
 
+.action-tile:disabled,
+.action-tile:disabled:hover {
+  background: linear-gradient(135deg, #fff, #fff8ee);
+  border-color: rgba(14, 107, 78, 0.22);
+  box-shadow: 0 6px 14px rgba(19, 15, 10, 0.08);
+  transform: none;
+}
+
 .action-tile:focus-visible {
   outline: 2px solid rgba(14, 107, 78, 0.55);
   outline-offset: 2px;
@@ -947,6 +973,16 @@ button:hover {
   background: var(--accent-dark);
 }
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+  transform: none;
+}
+
+button:disabled:hover {
+  transform: none;
+}
+
 button.secondary {
   background: transparent;
   color: var(--accent-dark);
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 90725bf..2c9d7c1 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./globals.css";
 import AppShell from "../components/AppShell";
+import AppErrorBoundary from "../components/AppErrorBoundary";
 
 export const metadata = {
   title: "Neighborhood Library Service",
@@ -10,7 +11,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        <AppShell>{children}</AppShell>
+        <AppErrorBoundary>
+          <AppShell>{children}</AppShell>
+        </AppErrorBoundary>
       </body>
     </html>
   );
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index 5cc7cf3..81b0963 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -17,10 +17,17 @@ export default function LoginPage() {
 
   const onSubmit = async (event: FormEvent) => {
     event.preventDefault();
+    if (submitting || bootstrapping) return;
+    const trimmedEmail = email.trim();
+    const trimmedPassword = password.trim();
+    if (!trimmedEmail || !trimmedPassword) {
+      setError("Enter a valid email and password. Whitespace-only values are not allowed.");
+      return;
+    }
     setSubmitting(true);
     setError(null);
     try {
-      const result = await login({ email: email.trim(), password });
+      const result = await login({ email: trimmedEmail, password });
       setStoredToken(result.access_token);
       setStoredUser(result.user);
       router.replace("/");
@@ -32,6 +39,7 @@ export default function LoginPage() {
   };
 
   const onBootstrap = async () => {
+    if (submitting || bootstrapping) return;
     const trimmedName = name.trim();
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
@@ -99,14 +107,14 @@ export default function LoginPage() {
             required
           />
         </div>
-        <button type="submit" data-testid="login-submit" disabled={submitting}>
+        <button type="submit" data-testid="login-submit" disabled={submitting || bootstrapping}>
           {submitting ? "Signing in..." : "Sign In"}
         </button>
         <button
           type="button"
           className="secondary"
           onClick={onBootstrap}
-          disabled={bootstrapping}
+          disabled={submitting || bootstrapping}
         >
           {bootstrapping ? "Creating..." : "Bootstrap Admin (First Run)"}
         </button>
diff --git a/frontend/app/member/page.tsx b/frontend/app/member/page.tsx
index 9c1e5e9..4267cf0 100644
--- a/frontend/app/member/page.tsx
+++ b/frontend/app/member/page.tsx
@@ -92,7 +92,7 @@ export default function MemberDashboardPage() {
           <h1>My Borrowings & Fines</h1>
           <p className="lede">Track your active loans, returned books, due dates, and fine totals.</p>
         </div>
-        <button className="secondary" onClick={loadLoans}>
+        <button className="secondary" onClick={loadLoans} disabled={loading}>
           {loading ? "Refreshing..." : "Refresh"}
         </button>
       </header>
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index fc094f4..11de0ac 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -68,6 +68,8 @@ export default function BorrowingsPage() {
     payment_mode: "upi",
     reference: "",
   });
+  const [borrowLoading, setBorrowLoading] = useState(false);
+  const [returnLoading, setReturnLoading] = useState(false);
   const [fineLoading, setFineLoading] = useState(false);
   const [quickUserForm, setQuickUserForm] = useState<QuickUserForm>(initialQuickUser);
   const [userActionLoading, setUserActionLoading] = useState(false);
@@ -77,6 +79,7 @@ export default function BorrowingsPage() {
   const [registerPageSize, setRegisterPageSize] = useState(10);
   const [registerHasNext, setRegisterHasNext] = useState(false);
   const [registerLoading, setRegisterLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
   const [activeModal, setActiveModal] = useState<BorrowingActionModal>(null);
 
   const loanSortConfig: Record<string, { sort_by: string; sort_order: "asc" | "desc" }> = {
@@ -136,6 +139,8 @@ export default function BorrowingsPage() {
   };
 
   const refresh = async (showSuccess = false) => {
+    if (refreshing) return;
+    setRefreshing(true);
     try {
       const [booksData, usersData, loansData] = await Promise.all([getBooks(), getUsers(), getLoans()]);
       setBooks(booksData);
@@ -151,6 +156,8 @@ export default function BorrowingsPage() {
         title: "Unable to load borrowings",
         description: err.message || "Request failed",
       });
+    } finally {
+      setRefreshing(false);
     }
   };
 
@@ -288,6 +295,8 @@ export default function BorrowingsPage() {
 
   const handleBorrow = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (borrowLoading) return;
+    setBorrowLoading(true);
     try {
       await borrowBook({
         book_id: Number(borrowForm.book_id),
@@ -308,11 +317,15 @@ export default function BorrowingsPage() {
         title: "Borrowing failed",
         description: err.message || "Request failed",
       });
+    } finally {
+      setBorrowLoading(false);
     }
   };
 
   const handleReturn = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (returnLoading) return;
+    setReturnLoading(true);
     try {
       await returnBook(Number(returnForm.loan_id));
       setReturnForm({ loan_id: "" });
@@ -329,11 +342,14 @@ export default function BorrowingsPage() {
         title: "Return failed",
         description: err.message || "Request failed",
       });
+    } finally {
+      setReturnLoading(false);
     }
   };
 
   const handleCollectFine = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (fineLoading) return;
     setFineLoading(true);
     try {
       await createLoanFinePayment(Number(fineForm.loan_id), {
@@ -362,10 +378,20 @@ export default function BorrowingsPage() {
 
   const handleCreateQuickUser = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (userActionLoading) return;
+    const trimmedName = quickUserForm.name.trim();
+    if (!trimmedName) {
+      showToast({
+        type: "error",
+        title: "Name is required",
+        description: "Whitespace-only values are not allowed.",
+      });
+      return;
+    }
     setUserActionLoading(true);
     try {
       const payload: any = {
-        name: quickUserForm.name.trim(),
+        name: trimmedName,
         email: quickUserForm.email.trim() || null,
         phone: quickUserForm.phone.trim() || null,
         role: quickUserForm.role,
@@ -398,6 +424,7 @@ export default function BorrowingsPage() {
   };
 
   const handleUpdateQuickUser = async () => {
+    if (userActionLoading) return;
     if (!quickUserForm.id) {
       showToast({
         type: "info",
@@ -406,10 +433,19 @@ export default function BorrowingsPage() {
       });
       return;
     }
+    const trimmedName = quickUserForm.name.trim();
+    if (!trimmedName) {
+      showToast({
+        type: "error",
+        title: "Name is required",
+        description: "Whitespace-only values are not allowed.",
+      });
+      return;
+    }
     setUserActionLoading(true);
     try {
       const payload: any = {
-        name: quickUserForm.name.trim(),
+        name: trimmedName,
         email: quickUserForm.email.trim() || null,
         phone: quickUserForm.phone.trim() || null,
         role: quickUserForm.role,
@@ -433,6 +469,9 @@ export default function BorrowingsPage() {
     }
   };
 
+  const modalActionLoading = borrowLoading || returnLoading || fineLoading || userActionLoading;
+  const pageActionLoading = modalActionLoading || refreshing;
+
   return (
     <div className="page-layout">
       <header className="page-header">
@@ -441,8 +480,12 @@ export default function BorrowingsPage() {
           <h1>Borrowings, Returns, Fines</h1>
           <p className="lede">Issue and return books fast while keeping user and inventory records accurate.</p>
         </div>
-        <button className="secondary" onClick={() => refresh(true)}>
-          Refresh
+        <button
+          className="secondary"
+          onClick={() => refresh(true)}
+          disabled={registerLoading || pageActionLoading}
+        >
+          {registerLoading || refreshing ? "Refreshing..." : "Refresh"}
         </button>
       </header>
 
@@ -475,6 +518,7 @@ export default function BorrowingsPage() {
             type="button"
             className="action-tile"
             onClick={() => setActiveModal("borrow")}
+            disabled={pageActionLoading}
             data-testid="borrow-open-modal"
           >
             <strong>Issue Book</strong>
@@ -485,6 +529,7 @@ export default function BorrowingsPage() {
             type="button"
             className="action-tile"
             onClick={() => setActiveModal("return")}
+            disabled={pageActionLoading}
             data-testid="return-open-modal"
           >
             <strong>Accept Return</strong>
@@ -495,6 +540,7 @@ export default function BorrowingsPage() {
             type="button"
             className="action-tile"
             onClick={() => setActiveModal("fine")}
+            disabled={pageActionLoading}
             data-testid="fine-open-modal"
           >
             <strong>Fine Collection</strong>
@@ -505,6 +551,7 @@ export default function BorrowingsPage() {
             type="button"
             className="action-tile"
             onClick={() => setActiveModal("quick_user")}
+            disabled={pageActionLoading}
             data-testid="quick-user-open-modal"
           >
             <strong>Quick User Desk</strong>
@@ -699,8 +746,8 @@ export default function BorrowingsPage() {
             />
           </div>
           <div className="modal-actions">
-            <button type="submit" data-testid="borrow-submit">
-              Record Borrowing
+            <button type="submit" data-testid="borrow-submit" disabled={borrowLoading}>
+              {borrowLoading ? "Recording..." : "Record Borrowing"}
             </button>
           </div>
         </form>
@@ -724,8 +771,13 @@ export default function BorrowingsPage() {
             testId="return-loan-id"
           />
           <div className="modal-actions">
-            <button type="submit" className="secondary" data-testid="return-submit">
-              Record Return
+            <button
+              type="submit"
+              className="secondary"
+              data-testid="return-submit"
+              disabled={returnLoading}
+            >
+              {returnLoading ? "Recording..." : "Record Return"}
             </button>
           </div>
         </form>
diff --git a/frontend/app/users/page.tsx b/frontend/app/users/page.tsx
index 37ebfd5..5280ed4 100644
--- a/frontend/app/users/page.tsx
+++ b/frontend/app/users/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import ActionModal from "../../components/ActionModal";
+import ListViewCard, { ListGrid } from "../../components/ListViewCard";
 import SearchableSelect from "../../components/SearchableSelect";
 import { useToast } from "../../components/ToastProvider";
 import { createUser, deleteUser, getUsers, queryUsers, updateUser } from "../../lib/api";
@@ -30,6 +31,8 @@ export default function UsersPage() {
   const [modalMode, setModalMode] = useState<UserModalMode>(null);
   const [activeUserId, setActiveUserId] = useState<number | null>(null);
   const [userForm, setUserForm] = useState(initialUserForm);
+  const [userSubmitting, setUserSubmitting] = useState(false);
+  const [deletingUserId, setDeletingUserId] = useState<number | null>(null);
 
   const sortConfigMap: Record<string, { sort_by: string; sort_order: "asc" | "desc" }> = {
     name_asc: { sort_by: "name", sort_order: "asc" },
@@ -141,11 +144,22 @@ export default function UsersPage() {
 
   const handleUserSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (userSubmitting) return;
+    const trimmedName = userForm.name.trim();
+    if (!trimmedName) {
+      showToast({
+        type: "error",
+        title: "Name is required",
+        description: "Whitespace-only values are not allowed.",
+      });
+      return;
+    }
+    setUserSubmitting(true);
     try {
       if (modalMode === "edit") {
         if (!activeUserId) return;
         await updateUser(activeUserId, {
-          name: userForm.name.trim(),
+          name: trimmedName,
           email: userForm.email.trim() || null,
           phone: userForm.phone.trim() || null,
           role: userForm.role,
@@ -153,7 +167,7 @@ export default function UsersPage() {
         showToast({ type: "success", title: "User updated successfully" });
       } else {
         await createUser({
-          name: userForm.name.trim(),
+          name: trimmedName,
           email: userForm.email.trim() || undefined,
           phone: userForm.phone.trim() || undefined,
           role: userForm.role,
@@ -170,12 +184,16 @@ export default function UsersPage() {
         title: modalMode === "edit" ? "Unable to update user" : "Unable to create user",
         description: err.message || "Request failed",
       });
+    } finally {
+      setUserSubmitting(false);
     }
   };
 
   const handleDeleteUser = async (user: any) => {
+    if (userSubmitting || deletingUserId !== null) return;
     const ok = window.confirm(`Delete user "${user.name}"?`);
     if (!ok) return;
+    setDeletingUserId(user.id);
     try {
       await deleteUser(user.id);
       if (activeUserId === user.id) {
@@ -189,6 +207,8 @@ export default function UsersPage() {
         title: "Unable to delete user",
         description: err.message || "Request failed",
       });
+    } finally {
+      setDeletingUserId(null);
     }
   };
 
@@ -210,11 +230,20 @@ export default function UsersPage() {
           </p>
         </div>
         <div className="page-actions">
-          <button type="button" onClick={openCreateModal} data-testid="user-open-create">
+          <button
+            type="button"
+            onClick={openCreateModal}
+            data-testid="user-open-create"
+            disabled={loading || userSubmitting || deletingUserId !== null}
+          >
             Add User
           </button>
-          <button className="secondary" onClick={() => refresh(true)}>
-            Refresh
+          <button
+            className="secondary"
+            onClick={() => refresh(true)}
+            disabled={loading || userSubmitting || deletingUserId !== null}
+          >
+            {loading ? "Refreshing..." : "Refresh"}
           </button>
         </div>
       </header>
@@ -238,56 +267,84 @@ export default function UsersPage() {
         </div>
       </section>
 
-      <section className="table-card">
-        <div className="card-header">
-          <h2>User Directory</h2>
-          <span className="pill">Searchable</span>
-        </div>
-        <div className="filter-bar">
-          <div className="filter-field grow">
-            <label>Search</label>
-            <input
-              type="search"
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder="Name, email, phone, user ID"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Role"
-              value={roleFilter}
-              options={roleFilterOptions}
-              placeholder="Any role"
-              onChange={setRoleFilter}
-              multiple
-              testId="users-role-filter"
-            />
-          </div>
-          <div className="filter-field">
-            <SearchableSelect
-              label="Sort"
-              value={sortBy}
-              options={sortOptions}
-              placeholder="Sort users"
-              onChange={setSortBy}
-              testId="users-sort"
-            />
-          </div>
-          <div className="filter-field">
-            <label>Page Size</label>
-            <select
-              value={pageSize}
-              onChange={(event) => setPageSize(Number(event.target.value))}
-              data-testid="users-page-size"
-            >
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-            </select>
+      <ListViewCard
+        title="User Directory"
+        headerRight={<span className="pill">Searchable</span>}
+        filters={(
+          <>
+            <div className="filter-field grow">
+              <label>Search</label>
+              <input
+                type="search"
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder="Name, email, phone, user ID"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Role"
+                value={roleFilter}
+                options={roleFilterOptions}
+                placeholder="Any role"
+                onChange={setRoleFilter}
+                multiple
+                testId="users-role-filter"
+              />
+            </div>
+            <div className="filter-field">
+              <SearchableSelect
+                label="Sort"
+                value={sortBy}
+                options={sortOptions}
+                placeholder="Sort users"
+                onChange={setSortBy}
+                testId="users-sort"
+              />
+            </div>
+            <div className="filter-field">
+              <label>Page Size</label>
+              <select
+                value={pageSize}
+                onChange={(event) => setPageSize(Number(event.target.value))}
+                data-testid="users-page-size"
+              >
+                <option value={10}>10</option>
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+          </>
+        )}
+        footer={(
+          <div className="table-footer">
+            <div className="meta-label">
+              Page {page} · Showing {users.length} record{users.length === 1 ? "" : "s"}
+            </div>
+            <div className="row-actions">
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                disabled={page === 1 || loading}
+                data-testid="users-prev-page"
+              >
+                Previous
+              </button>
+              <button
+                type="button"
+                className="ghost small"
+                onClick={() => setPage((current) => current + 1)}
+                disabled={!hasNextPage || loading}
+                data-testid="users-next-page"
+              >
+                Next
+              </button>
+            </div>
           </div>
-        </div>
-        <div className="table">
+        )}
+      >
+        <ListGrid>
           {users.map((user) => (
             <div
               key={user.id}
@@ -320,6 +377,7 @@ export default function UsersPage() {
                     className="ghost small"
                     type="button"
                     onClick={() => openEditModal(user)}
+                    disabled={userSubmitting || deletingUserId !== null}
                   >
                     Edit
                   </button>
@@ -327,8 +385,9 @@ export default function UsersPage() {
                     className="danger small"
                     type="button"
                     onClick={() => handleDeleteUser(user)}
+                    disabled={userSubmitting || deletingUserId !== null}
                   >
-                    Delete
+                    {deletingUserId === user.id ? "Deleting..." : "Delete"}
                   </button>
                 </div>
               </div>
@@ -345,33 +404,8 @@ export default function UsersPage() {
               <div />
             </div>
           )}
-        </div>
-        <div className="table-footer">
-          <div className="meta-label">
-            Page {page} · Showing {users.length} record{users.length === 1 ? "" : "s"}
-          </div>
-          <div className="row-actions">
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              disabled={page === 1 || loading}
-              data-testid="users-prev-page"
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              className="ghost small"
-              onClick={() => setPage((current) => current + 1)}
-              disabled={!hasNextPage || loading}
-              data-testid="users-next-page"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </section>
+        </ListGrid>
+      </ListViewCard>
 
       <ActionModal
         open={modalMode !== null}
@@ -421,11 +455,11 @@ export default function UsersPage() {
             </select>
           </div>
           <div className="modal-actions">
-            <button type="button" className="secondary" onClick={closeModal}>
+            <button type="button" className="secondary" onClick={closeModal} disabled={userSubmitting}>
               Cancel
             </button>
-            <button type="submit" data-testid="user-submit">
-              {modalMode === "edit" ? "Save Changes" : "Add User"}
+            <button type="submit" data-testid="user-submit" disabled={userSubmitting}>
+              {userSubmitting ? "Saving..." : modalMode === "edit" ? "Save Changes" : "Add User"}
             </button>
           </div>
         </form>
diff --git a/frontend/components/AppErrorBoundary.tsx b/frontend/components/AppErrorBoundary.tsx
new file mode 100644
index 0000000..f2232b8
--- /dev/null
+++ b/frontend/components/AppErrorBoundary.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ErrorInfo } from "react";
+import React from "react";
+
+type AppErrorBoundaryProps = {
+  children: React.ReactNode;
+};
+
+type AppErrorBoundaryState = {
+  hasError: boolean;
+  message: string;
+};
+
+export default class AppErrorBoundary extends React.Component<
+  AppErrorBoundaryProps,
+  AppErrorBoundaryState
+> {
+  state: AppErrorBoundaryState = {
+    hasError: false,
+    message: "",
+  };
+
+  static getDerivedStateFromError(error: Error): AppErrorBoundaryState {
+    return {
+      hasError: true,
+      message: error.message || "Unexpected UI error",
+    };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("AppErrorBoundary caught an error", error, info);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, message: "" });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <main className="app-error-shell">
+          <section className="app-error-card">
+            <div className="badge">Error</div>
+            <h1>Something went wrong</h1>
+            <p className="lede">
+              The page crashed unexpectedly. Retry the view or reload the application.
+            </p>
+            {this.state.message ? <p className="notice">{this.state.message}</p> : null}
+            <div className="row-actions">
+              <button type="button" onClick={this.handleRetry}>
+                Retry
+              </button>
+              <button
+                type="button"
+                className="secondary"
+                onClick={() => window.location.reload()}
+              >
+                Reload
+              </button>
+            </div>
+          </section>
+        </main>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/frontend/components/ListViewCard.tsx b/frontend/components/ListViewCard.tsx
new file mode 100644
index 0000000..1ecc42a
--- /dev/null
+++ b/frontend/components/ListViewCard.tsx
@@ -0,0 +1,45 @@
+type ListViewCardProps = {
+  title: string;
+  headerRight?: React.ReactNode;
+  filters?: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  testId?: string;
+};
+
+type ListGridProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function withClass(base: string, value?: string) {
+  if (!value) return base;
+  return `${base} ${value}`;
+}
+
+export function ListGrid({ children, className }: ListGridProps) {
+  return <div className={withClass("table", className)}>{children}</div>;
+}
+
+export default function ListViewCard({
+  title,
+  headerRight,
+  filters,
+  footer,
+  children,
+  className,
+  testId,
+}: ListViewCardProps) {
+  return (
+    <section className={withClass("table-card", className)} data-testid={testId}>
+      <div className="card-header">
+        <h2>{title}</h2>
+        {headerRight || null}
+      </div>
+      {filters ? <div className="filter-bar">{filters}</div> : null}
+      {children}
+      {footer || null}
+    </section>
+  );
+}
diff --git a/frontend/lib/api-paths.ts b/frontend/lib/api-paths.ts
new file mode 100644
index 0000000..c2263a5
--- /dev/null
+++ b/frontend/lib/api-paths.ts
@@ -0,0 +1,23 @@
+export const API_PATHS = {
+  books: "/books",
+  book: (bookId: number) => `/books/${bookId}`,
+  users: "/users",
+  user: (userId: number) => `/users/${userId}`,
+  loans: "/loans",
+  loan: (loanId: number) => `/loans/${loanId}`,
+  borrowLoan: "/loans/borrow",
+  returnLoan: (loanId: number) => `/loans/${loanId}/return`,
+  loanFineSummary: (loanId: number) => `/loans/${loanId}/fine-summary`,
+  loanFinePayments: (loanId: number) => `/loans/${loanId}/fine-payments`,
+  finePayments: "/fine-payments",
+  seed: "/seed",
+  importBooks: "/imports/books",
+  importUsers: "/imports/users",
+  importLoans: "/imports/loans",
+  policy: "/settings/policy",
+  auditLogs: "/audit/logs",
+  authLogin: "/auth/login",
+  authMe: "/auth/me",
+  myLoans: "/users/me/loans",
+  myFinePayments: "/users/me/fine-payments",
+} as const;
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
index 2b43b72..b51ee4c 100644
--- a/frontend/lib/api.ts
+++ b/frontend/lib/api.ts
@@ -1,4 +1,5 @@
 import { clearAuth, getStoredToken } from "./auth";
+import { API_PATHS } from "./api-paths";
 
 type RequestOptions = RequestInit & {
   auth?: boolean;
@@ -269,31 +270,31 @@ export async function queryBooks(params?: PageQuery & {
   appendQueryValue(query, "skip", params?.skip);
   appendQueryValue(query, "limit", params?.limit);
   const suffix = query.toString() ? `?${query.toString()}` : "";
-  return request<any[]>(`/books${suffix}`, { method: "GET" });
+  return request<any[]>(`${API_PATHS.books}${suffix}`, { method: "GET" });
 }
 
 export async function getBooks(q?: string) {
   const query = new URLSearchParams();
   if (q?.trim()) query.set("q", q.trim());
-  return requestAllPages<any>("/books", query, { method: "GET", pageSize: 200 });
+  return requestAllPages<any>(API_PATHS.books, query, { method: "GET", pageSize: 200 });
 }
 
 export async function createBook(payload: any) {
-  return request("/books", {
+  return request(API_PATHS.books, {
     method: "POST",
     body: JSON.stringify(payload)
   });
 }
 
 export async function updateBook(bookId: number, payload: any) {
-  return request(`/books/${bookId}`, {
+  return request(API_PATHS.book(bookId), {
     method: "PATCH",
     body: JSON.stringify(payload)
   });
 }
 
 export async function deleteBook(bookId: number) {
-  return request<void>(`/books/${bookId}`, {
+  return request<void>(API_PATHS.book(bookId), {
     method: "DELETE"
   });
 }
@@ -301,7 +302,7 @@ export async function deleteBook(bookId: number) {
 export async function getUsers(q?: string) {
   const query = new URLSearchParams();
   if (q?.trim()) query.set("q", q.trim());
-  return requestAllPages<any>("/users", query, { method: "GET", pageSize: 200 });
+  return requestAllPages<any>(API_PATHS.users, query, { method: "GET", pageSize: 200 });
 }
 
 export async function queryUsers(params?: PageQuery & {
@@ -318,31 +319,31 @@ export async function queryUsers(params?: PageQuery & {
   appendQueryValue(query, "skip", params?.skip);
   appendQueryValue(query, "limit", params?.limit);
   const suffix = query.toString() ? `?${query.toString()}` : "";
-  return request<any[]>(`/users${suffix}`, { method: "GET" });
+  return request<any[]>(`${API_PATHS.users}${suffix}`, { method: "GET" });
 }
 
 export async function createUser(payload: any) {
-  return request("/users", {
+  return request(API_PATHS.users, {
     method: "POST",
     body: JSON.stringify(payload)
   });
 }
 
 export async function updateUser(userId: number, payload: any) {
-  return request(`/users/${userId}`, {
+  return request(API_PATHS.user(userId), {
     method: "PATCH",
     body: JSON.stringify(payload)
   });
 }
 
 export async function deleteUser(userId: number) {
-  return request<void>(`/users/${userId}`, {
+  return request<void>(API_PATHS.user(userId), {
     method: "DELETE"
   });
 }
 
 export async function getLoans() {
-  return requestAllPages<LoanItem>("/loans", undefined, { method: "GET", pageSize: 200 });
+  return requestAllPages<LoanItem>(API_PATHS.loans, undefined, { method: "GET", pageSize: 200 });
 }
 
 export async function queryLoans(params?: PageQuery & {
@@ -365,62 +366,62 @@ export async function queryLoans(params?: PageQuery & {
   appendQueryValue(query, "skip", params?.skip);
   appendQueryValue(query, "limit", params?.limit);
   const suffix = query.toString() ? `?${query.toString()}` : "";
-  return request<LoanItem[]>(`/loans${suffix}`, { method: "GET" });
+  return request<LoanItem[]>(`${API_PATHS.loans}${suffix}`, { method: "GET" });
 }
 
 export async function borrowBook(payload: any) {
-  return request("/loans/borrow", {
+  return request(API_PATHS.borrowLoan, {
     method: "POST",
     body: JSON.stringify(payload)
   });
 }
 
 export async function returnBook(loanId: number) {
-  return request(`/loans/${loanId}/return`, { method: "POST" });
+  return request(API_PATHS.returnLoan(loanId), { method: "POST" });
 }
 
 export async function updateLoan(loanId: number, payload: { extend_days: number }) {
-  return request(`/loans/${loanId}`, {
+  return request(API_PATHS.loan(loanId), {
     method: "PATCH",
     body: JSON.stringify(payload)
   });
 }
 
 export async function deleteLoan(loanId: number) {
-  return request<void>(`/loans/${loanId}`, {
+  return request<void>(API_PATHS.loan(loanId), {
     method: "DELETE"
   });
 }
 
 export async function seedData() {
-  return request<{ status: string; message?: string; counts?: Record<string, number> }>("/seed", {
+  return request<{ status: string; message?: string; counts?: Record<string, number> }>(API_PATHS.seed, {
     method: "POST"
   });
 }
 
 export async function importBooksFile(file: File) {
   return upload<{ entity: string; imported: number; skipped: number; errors: Array<any> }>(
-    "/imports/books",
+    API_PATHS.importBooks,
     file
   );
 }
 
 export async function importUsersFile(file: File) {
   return upload<{ entity: string; imported: number; skipped: number; errors: Array<any> }>(
-    "/imports/users",
+    API_PATHS.importUsers,
     file
   );
 }
 
 export async function importLoansFile(file: File) {
   return upload<{ entity: string; imported: number; skipped: number; errors: Array<any> }>(
-    "/imports/loans",
+    API_PATHS.importLoans,
     file
   );
 }
 
 export async function getPolicy() {
-  return request<LibraryPolicy>("/settings/policy", { method: "GET" });
+  return request<LibraryPolicy>(API_PATHS.policy, { method: "GET" });
 }
 
 export async function updatePolicy(payload: {
@@ -429,7 +430,7 @@ export async function updatePolicy(payload: {
   max_loan_days: number;
   fine_per_day: number;
 }) {
-  return request<LibraryPolicy>("/settings/policy", {
+  return request<LibraryPolicy>(API_PATHS.policy, {
     method: "PUT",
     body: JSON.stringify(payload),
   });
@@ -448,7 +449,7 @@ export async function getAuditLogs(params?: {
   appendQueryValues(query, "entity", params?.entity);
   if (typeof params?.status_code === "number") query.set("status_code", String(params.status_code));
   const maxItems = typeof params?.limit === "number" ? params.limit : undefined;
-  return requestAllPages<AuditLog>("/audit/logs", query, {
+  return requestAllPages<AuditLog>(API_PATHS.auditLogs, query, {
     method: "GET",
     pageSize: 200,
     maxItems,
@@ -473,12 +474,12 @@ export async function queryAuditLogs(params?: PageQuery & {
   appendQueryValue(query, "skip", params?.skip);
   appendQueryValue(query, "limit", params?.limit);
   const suffix = query.toString() ? `?${query.toString()}` : "";
-  return request<AuditLog[]>(`/audit/logs${suffix}`, { method: "GET" });
+  return request<AuditLog[]>(`${API_PATHS.auditLogs}${suffix}`, { method: "GET" });
 }
 
 export async function login(payload: { email: string; password: string }) {
   return request<{ access_token: string; user: any; expires_in: number; token_type: string }>(
-    "/auth/login",
+    API_PATHS.authLogin,
     {
       method: "POST",
       body: JSON.stringify(payload),
@@ -488,30 +489,30 @@ export async function login(payload: { email: string; password: string }) {
 }
 
 export async function getMe() {
-  return request<any>("/auth/me", { method: "GET" });
+  return request<any>(API_PATHS.authMe, { method: "GET" });
 }
 
 export async function getMyLoans() {
-  return request<MemberLoan[]>("/users/me/loans", { method: "GET" });
+  return request<MemberLoan[]>(API_PATHS.myLoans, { method: "GET" });
 }
 
 export async function getMyFinePayments() {
-  return request<FinePayment[]>("/users/me/fine-payments", { method: "GET" });
+  return request<FinePayment[]>(API_PATHS.myFinePayments, { method: "GET" });
 }
 
 export async function getLoanFineSummary(loanId: number) {
-  return request<FineSummary>(`/loans/${loanId}/fine-summary`, { method: "GET" });
+  return request<FineSummary>(API_PATHS.loanFineSummary(loanId), { method: "GET" });
 }
 
 export async function getLoanFinePayments(loanId: number) {
-  return request<FinePayment[]>(`/loans/${loanId}/fine-payments`, { method: "GET" });
+  return request<FinePayment[]>(API_PATHS.loanFinePayments(loanId), { method: "GET" });
 }
 
 export async function createLoanFinePayment(
   loanId: number,
   payload: { amount: number; payment_mode: string; reference?: string | null; notes?: string | null }
 ) {
-  return request<FinePayment>(`/loans/${loanId}/fine-payments`, {
+  return request<FinePayment>(API_PATHS.loanFinePayments(loanId), {
     method: "POST",
     body: JSON.stringify(payload),
   });
@@ -539,7 +540,7 @@ export async function queryFinePayments(params?: PageQuery & {
   appendQueryValue(query, "skip", params?.skip);
   appendQueryValue(query, "limit", params?.limit);
   const suffix = query.toString() ? `?${query.toString()}` : "";
-  return request<FinePaymentLedgerItem[]>(`/fine-payments${suffix}`, { method: "GET" });
+  return request<FinePaymentLedgerItem[]>(`${API_PATHS.finePayments}${suffix}`, { method: "GET" });
 }
 
 export async function bootstrapAdmin(payload: {
@@ -548,7 +549,7 @@ export async function bootstrapAdmin(payload: {
   role: string;
   password: string;
 }) {
-  return request("/users", {
+  return request(API_PATHS.users, {
     method: "POST",
     body: JSON.stringify(payload),
     auth: false,