diff --git a/.github/workflows/keepalive.yml b/.github/workflows/keepalive.yml
new file mode 100644
index 0000000..d6ba304
--- /dev/null
+++ b/.github/workflows/keepalive.yml
@@ -0,0 +1,34 @@
+name: Keep SupportOps available
+
+on:
+  schedule:
+    - cron: "17 13 * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  health-check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 8
+    steps:
+      - name: Wake the API
+        run: |
+          curl --fail-with-body \
+            --retry 3 \
+            --retry-all-errors \
+            --retry-delay 10 \
+            --connect-timeout 15 \
+            --max-time 90 \
+            https://supportops-api.onrender.com/health
+
+      - name: Verify the database connection
+        run: |
+          curl --fail-with-body \
+            --retry 5 \
+            --retry-all-errors \
+            --retry-delay 20 \
+            --connect-timeout 15 \
+            --max-time 90 \
+            https://supportops-api.onrender.com/health/dependencies
diff --git a/README.md b/README.md
index 7b2e208..31193cb 100644
--- a/README.md
+++ b/README.md
@@ -163,7 +163,9 @@ App runs at `http://localhost:5173`.
 - **Frontend** — Vercel, SPA rewrites in `frontend/vercel.json`. Env: `VITE_API_BASE_URL`.
 - **Backend** — Render web service from `render.yaml` at repo root. Python 3.11.9. Env: `SUPABASE_URL`, `SUPABASE_KEY`, `ANTHROPIC_API_KEY`, `ANTHROPIC_MODEL`. Health check: `/health`.
 
-Free-tier dynos sleep after 15 min of inactivity. The frontend warms the backend on app load — see `frontend/src/api.js` (`warmupBackend`).
+Free-tier dynos sleep after 15 min of inactivity. The frontend warms the backend on app load, and `.github/workflows/keepalive.yml` runs a daily dependency check to keep the free Supabase project active and catch outages early.
+
+`GET /health` confirms the API process is running. `GET /health/dependencies` performs a real database query and returns `503` with a `Retry-After` header when Supabase is unavailable.
 
 ---
 
diff --git a/backend/database.py b/backend/database.py
index 3d24182..6b1203b 100644
--- a/backend/database.py
+++ b/backend/database.py
@@ -8,8 +8,7 @@
 SUPABASE_URL = os.getenv("SUPABASE_URL")
 SUPABASE_KEY = os.getenv("SUPABASE_KEY")
 DATABASE_UNAVAILABLE_DETAIL = (
-    "SupportOps database is unavailable. Check SUPABASE_URL, SUPABASE_KEY, "
-    "and Supabase table setup in Render."
+    "SupportOps data service is temporarily unavailable. It may be starting up; retry in a moment."
 )
 
 
@@ -57,13 +56,17 @@ def handle_response(response):
 
 def request_supabase(method, table, params="", data=None):
     query = f"?{params}" if params else ""
-    response = requests.request(
-        method,
-        f"{SUPABASE_URL}/rest/v1/{table}{query}",
-        headers=get_headers(),
-        json=data,
-        timeout=20,
-    )
+    try:
+        response = requests.request(
+            method,
+            f"{SUPABASE_URL}/rest/v1/{table}{query}",
+            headers=get_headers(),
+            json=data,
+            timeout=20,
+        )
+    except requests.RequestException as error:
+        raise DatabaseRequestError(DATABASE_UNAVAILABLE_DETAIL) from error
+
     return handle_response(response)
 
 
diff --git a/backend/main.py b/backend/main.py
index 9b87fe0..b1d7063 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -30,7 +30,11 @@ def database_config_error(_request: Request, exc: DatabaseConfigError):
 
 @app.exception_handler(DatabaseRequestError)
 def database_request_error(_request: Request, exc: DatabaseRequestError):
-    return JSONResponse(status_code=503, content={"detail": str(exc)})
+    return JSONResponse(
+        status_code=503,
+        content={"detail": str(exc)},
+        headers={"Retry-After": "30"},
+    )
 
 
 # --- Models ---
@@ -104,6 +108,7 @@ def dependency_health(response: Response):
             reachable = True
         except (DatabaseConfigError, DatabaseRequestError) as error:
             response.status_code = 503
+            response.headers["Retry-After"] = "30"
             detail = str(error)
 
     return {
diff --git a/backend/test_database.py b/backend/test_database.py
index fbccf45..9b5f3a4 100644
--- a/backend/test_database.py
+++ b/backend/test_database.py
@@ -76,5 +76,17 @@ def test_supabase_http_error_raises_database_error(monkeypatch):
     fake_response.raise_for_status.side_effect = requests.HTTPError("503")
     monkeypatch.setattr(database.requests, "request", MagicMock(return_value=fake_response))
 
-    with pytest.raises(database.DatabaseRequestError, match="SupportOps database is unavailable"):
+    with pytest.raises(database.DatabaseRequestError, match="temporarily unavailable"):
+        database.db_get("tickets")
+
+
+@pytest.mark.parametrize(
+    "error", [requests.Timeout("timed out"), requests.ConnectionError("offline")]
+)
+def test_supabase_network_error_raises_database_error(monkeypatch, error):
+    monkeypatch.setattr(database, "SUPABASE_URL", "https://example.supabase.co")
+    monkeypatch.setattr(database, "SUPABASE_KEY", "secret")
+    monkeypatch.setattr(database.requests, "request", MagicMock(side_effect=error))
+
+    with pytest.raises(database.DatabaseRequestError, match="temporarily unavailable"):
         database.db_get("tickets")
diff --git a/backend/test_main.py b/backend/test_main.py
index db693e6..3260ab7 100644
--- a/backend/test_main.py
+++ b/backend/test_main.py
@@ -196,10 +196,28 @@ def test_dependency_health_returns_503_when_supabase_query_fails(client, monkeyp
     res = test_client.get("/health/dependencies")
 
     assert res.status_code == 503
+    assert res.headers["retry-after"] == "30"
     assert res.json()["status"] == "error"
     assert res.json()["supabase"]["reachable"] is False
 
 
+def test_data_route_returns_503_when_supabase_times_out(client, monkeypatch):
+    test_client, main = client
+    monkeypatch.setattr(
+        main,
+        "db_get",
+        lambda table, params="": (_ for _ in ()).throw(
+            main.DatabaseRequestError("SupportOps data service is temporarily unavailable.")
+        ),
+    )
+
+    res = test_client.get("/customers")
+
+    assert res.status_code == 503
+    assert res.headers["retry-after"] == "30"
+    assert res.json()["detail"] == "SupportOps data service is temporarily unavailable."
+
+
 def test_get_ticket_not_found_returns_404(client, monkeypatch):
     test_client, main = client
     monkeypatch.setattr(main, "db_get", lambda table, params="": [])
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 85888b0..e07ee98 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -6,36 +6,41 @@ import Tickets from "./pages/Tickets";
 import RMAs from "./pages/RMAs";
 
 export default function App() {
+  const navigation = [
+    { to: "/", label: "Dashboard" },
+    { to: "/tickets", label: "Tickets" },
+    { to: "/customers", label: "Customers" },
+    { to: "/devices", label: "Devices" },
+    { to: "/rmas", label: "RMAs" },
+  ];
+
   return (
     <BrowserRouter>
-      <div className="min-h-screen bg-gray-100 flex">
-        {/* Sidebar */}
-        <aside className="w-56 bg-gray-900 text-white flex flex-col p-4 gap-2">
-          <h1 className="text-xl font-bold mb-6">SupportOps</h1>
-          {[
-            { to: "/", label: "Dashboard" },
-            { to: "/tickets", label: "Tickets" },
-            { to: "/customers", label: "Customers" },
-            { to: "/devices", label: "Devices" },
-            { to: "/rmas", label: "RMAs" },
-          ].map(({ to, label }) => (
+      <div className="min-h-screen bg-gray-100 lg:flex">
+        <aside className="bg-gray-950 text-white p-4 lg:w-60 lg:min-h-screen lg:p-5">
+          <div className="mb-4 flex items-center justify-between lg:mb-8">
+            <h1 className="text-xl font-bold">SupportOps</h1>
+            <span className="text-xs text-gray-400 lg:hidden">Service console</span>
+          </div>
+          <nav aria-label="Primary" className="grid grid-cols-3 gap-2 sm:grid-cols-5 lg:flex lg:flex-col">
+            {navigation.map(({ to, label }) => (
             <NavLink
               key={to}
               to={to}
               end={to === "/"}
               className={({ isActive }) =>
-                `px-3 py-2 rounded text-sm font-medium transition ${
-                  isActive ? "bg-blue-600" : "hover:bg-gray-700"
+                `min-w-0 px-2 py-2 text-center text-sm font-medium transition lg:px-3 lg:text-left ${
+                  isActive ? "bg-blue-600 text-white" : "text-gray-300 hover:bg-gray-800 hover:text-white"
                 }`
               }
             >
               {label}
             </NavLink>
-          ))}
+            ))}
+          </nav>
         </aside>
 
-        {/* Main content */}
-        <main className="flex-1 p-8">
+        <main className="min-w-0 flex-1 p-4 sm:p-6 lg:p-8">
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/tickets" element={<Tickets />} />
diff --git a/frontend/src/api.js b/frontend/src/api.js
index e843326..74834d0 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -9,7 +9,40 @@ if (!BASE) {
 // 90s — long enough for a Render free-tier cold start.
 const DEFAULT_TIMEOUT_MS = 90_000;
 
+export class ApiError extends Error {
+  constructor(message, status = 0) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
+async function responseDetail(response) {
+  const contentType = response.headers.get("content-type") || "";
+
+  if (contentType.includes("application/json")) {
+    const payload = await response.json().catch(() => null);
+    if (typeof payload?.detail === "string") return payload.detail;
+  }
+
+  return response.text().catch(() => "");
+}
+
+function apiErrorMessage(status, detail) {
+  if (status === 503) {
+    return "SupportOps is temporarily unavailable while its data service recovers. Wait a moment, then try again.";
+  }
+  if (status >= 500) {
+    return "SupportOps hit a server error. Try again in a moment.";
+  }
+  return detail || `Request failed with status ${status}.`;
+}
+
 async function request(path, { method = "GET", body, timeoutMs = DEFAULT_TIMEOUT_MS } = {}) {
+  if (!BASE) {
+    throw new ApiError("SupportOps is missing its API configuration.");
+  }
+
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), timeoutMs);
 
@@ -22,18 +55,21 @@ async function request(path, { method = "GET", body, timeoutMs = DEFAULT_TIMEOUT
     });
 
     if (!res.ok) {
-      const text = await res.text().catch(() => "");
-      throw new Error(`${res.status} ${res.statusText}${text ? ` — ${text.slice(0, 200)}` : ""}`);
+      const detail = await responseDetail(res);
+      throw new ApiError(apiErrorMessage(res.status, detail), res.status);
     }
 
     if (res.status === 204) return null;
     return await res.json();
   } catch (err) {
     if (err.name === "AbortError") {
-      throw new Error(
-        "Request timed out. The demo backend runs on Render's free tier and may take up to a minute to wake from sleep — please retry."
+      throw new ApiError(
+        "SupportOps took too long to respond. The service may be waking up; please try again."
       );
     }
+    if (err instanceof TypeError) {
+      throw new ApiError("SupportOps could not reach its API. Check your connection and try again.");
+    }
     throw err;
   } finally {
     clearTimeout(timer);
@@ -61,17 +97,19 @@ export function useApiResource(path) {
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  const load = useCallback(() => {
+  const load = useCallback(async () => {
     setLoading(true);
     setError(null);
-    api
-      .get(path)
-      .then((d) => {
-        setData(d);
-        setError(null);
-      })
-      .catch((e) => setError(e.message || String(e)))
-      .finally(() => setLoading(false));
+
+    try {
+      const result = await api.get(path);
+      setData(result);
+      setError(null);
+    } catch (error) {
+      setError(error.message || String(error));
+    } finally {
+      setLoading(false);
+    }
   }, [path]);
 
   useEffect(() => {
diff --git a/frontend/src/components/AsyncState.jsx b/frontend/src/components/AsyncState.jsx
index 197dee0..e636b07 100644
--- a/frontend/src/components/AsyncState.jsx
+++ b/frontend/src/components/AsyncState.jsx
@@ -1,11 +1,13 @@
 export function LoadingState({ message }) {
   return (
-    <div className="flex flex-col items-center justify-center py-16 text-gray-600">
-      <div className="w-10 h-10 border-4 border-gray-300 border-t-blue-600 rounded-full animate-spin mb-4" />
+    <div role="status" className="flex flex-col items-center justify-center py-16 text-gray-600">
+      <div
+        aria-hidden="true"
+        className="w-10 h-10 border-4 border-gray-300 border-t-blue-600 rounded-full animate-spin mb-4"
+      />
       <p className="text-sm font-medium">{message || "Loading…"}</p>
       <p className="text-xs text-gray-500 mt-2 max-w-md text-center">
-        The demo backend runs on Render's free tier and sleeps after 15 min of inactivity.
-        First load after a nap can take up to a minute while the server wakes up.
+        The service may need a moment to wake up after a period of inactivity.
       </p>
     </div>
   );
@@ -13,17 +15,27 @@ export function LoadingState({ message }) {
 
 export function ErrorState({ error, onRetry }) {
   return (
-    <div className="rounded-lg border border-red-300 bg-red-50 p-6 max-w-2xl">
-      <p className="text-red-800 font-semibold mb-1">Couldn't load data</p>
-      <p className="text-red-700 text-sm mb-4 break-words">{error}</p>
+    <div role="alert" className="rounded-lg border border-red-300 bg-red-50 p-5 max-w-2xl">
+      <p className="text-red-900 font-semibold mb-1">SupportOps could not load this view</p>
+      <p className="text-red-800 text-sm mb-4 break-words">{error}</p>
       {onRetry && (
         <button
           onClick={onRetry}
           className="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded hover:bg-red-700 transition"
         >
-          Retry
+          Try again
         </button>
       )}
     </div>
   );
 }
+
+export function InlineError({ error }) {
+  if (!error) return null;
+
+  return (
+    <p role="alert" className="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+      {error}
+    </p>
+  );
+}
diff --git a/frontend/src/pages/Customers.jsx b/frontend/src/pages/Customers.jsx
index c3e5092..c4148eb 100644
--- a/frontend/src/pages/Customers.jsx
+++ b/frontend/src/pages/Customers.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
-import { LoadingState, ErrorState } from "../components/AsyncState";
+import { LoadingState, ErrorState, InlineError } from "../components/AsyncState";
 
 export default function Customers() {
   const [customers, setCustomers] = useState([]);
@@ -9,15 +9,20 @@ export default function Customers() {
   const [showForm, setShowForm] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [query, setQuery] = useState("");
 
-  const load = () => {
+  const load = async () => {
     setLoading(true);
     setError(null);
-    return api
-      .get("/customers")
-      .then(setCustomers)
-      .catch((e) => setError(e.message || String(e)))
-      .finally(() => setLoading(false));
+    try {
+      setCustomers(await api.get("/customers"));
+    } catch (e) {
+      setError(e.message || String(e));
+    } finally {
+      setLoading(false);
+    }
   };
 
   useEffect(() => { load(); }, []);
@@ -26,46 +31,78 @@ export default function Customers() {
   if (error) return <ErrorState error={error} onRetry={load} />;
 
   const handleSubmit = async () => {
-    if (!form.name) return alert("Name is required");
-    if (editing) {
-      await api.put(`/customers/${editing}`, form);
-    } else {
-      await api.post("/customers", form);
+    setActionError(null);
+    if (!form.name.trim()) {
+      setActionError("Name is required.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editing) {
+        await api.put(`/customers/${editing}`, form);
+      } else {
+        await api.post("/customers", form);
+      }
+      setForm({ name: "", email: "", phone: "", company: "" });
+      setEditing(null);
+      setShowForm(false);
+      await load();
+    } catch (e) {
+      setActionError(e.message || String(e));
+    } finally {
+      setSaving(false);
     }
-    setForm({ name: "", email: "", phone: "", company: "" });
-    setEditing(null);
-    setShowForm(false);
-    load();
   };
 
   const handleEdit = (c) => {
     setForm({ name: c.name, email: c.email || "", phone: c.phone || "", company: c.company || "" });
     setEditing(c.id);
+    setActionError(null);
     setShowForm(true);
   };
 
   const handleDelete = async (id) => {
     if (!confirm("Delete this customer?")) return;
-    await api.delete(`/customers/${id}`);
-    load();
+    setActionError(null);
+    setSaving(true);
+    try {
+      await api.delete(`/customers/${id}`);
+      await load();
+    } catch (e) {
+      setActionError(e.message || String(e));
+    } finally {
+      setSaving(false);
+    }
   };
 
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredCustomers = customers.filter((customer) =>
+    [customer.name, customer.email, customer.phone, customer.company]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase()
+      .includes(normalizedQuery)
+  );
+
   return (
     <div>
-      <div className="flex justify-between items-center mb-6">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h2 className="text-2xl font-bold">Customers</h2>
         <button
-          onClick={() => { setShowForm(!showForm); setEditing(null); setForm({ name: "", email: "", phone: "", company: "" }); }}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+          onClick={() => { setShowForm(!showForm); setEditing(null); setActionError(null); setForm({ name: "", email: "", phone: "", company: "" }); }}
+          className="self-start bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 sm:self-auto"
         >
           {showForm ? "Cancel" : "+ New Customer"}
         </button>
       </div>
 
+      <InlineError error={actionError} />
+
       {showForm && (
         <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h3 className="font-semibold mb-4">{editing ? "Edit Customer" : "New Customer"}</h3>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {[
               { label: "Name *", key: "name" },
               { label: "Email", key: "email" },
@@ -84,15 +121,32 @@ export default function Customers() {
           </div>
           <button
             onClick={handleSubmit}
-            className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700"
+            disabled={saving}
+            className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
           >
-            {editing ? "Update" : "Create"}
+            {saving ? "Saving…" : editing ? "Update" : "Create"}
           </button>
         </div>
       )}
 
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="mb-2">
+        <label htmlFor="customer-search" className="sr-only">Search customers</label>
+        <input
+          id="customer-search"
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search customers, companies, email, or phone"
+          className="w-full border bg-white px-3 py-2 text-sm"
+        />
+      </div>
+
+      <p className="mb-2 text-xs text-gray-500" aria-live="polite">
+        Showing {filteredCustomers.length} of {customers.length} customers
+      </p>
+
+      <div className="bg-white rounded-lg shadow overflow-x-auto">
+        <table className="w-full min-w-[680px] text-sm">
           <thead className="bg-gray-50 text-gray-600 uppercase text-xs">
             <tr>
               {["Name", "Email", "Phone", "Company", "Actions"].map(h => (
@@ -101,17 +155,21 @@ export default function Customers() {
             </tr>
           </thead>
           <tbody>
-            {customers.length === 0 ? (
-              <tr><td colSpan={5} className="px-4 py-6 text-center text-gray-400">No customers yet</td></tr>
-            ) : customers.map(c => (
+            {filteredCustomers.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-6 text-center text-gray-400">
+                  {customers.length === 0 ? "No customers yet" : "No customers match this search"}
+                </td>
+              </tr>
+            ) : filteredCustomers.map(c => (
               <tr key={c.id} className="border-t hover:bg-gray-50">
                 <td className="px-4 py-3 font-medium">{c.name}</td>
                 <td className="px-4 py-3 text-gray-600">{c.email || "—"}</td>
                 <td className="px-4 py-3 text-gray-600">{c.phone || "—"}</td>
                 <td className="px-4 py-3 text-gray-600">{c.company || "—"}</td>
                 <td className="px-4 py-3 flex gap-2">
-                  <button onClick={() => handleEdit(c)} className="text-blue-600 hover:underline">Edit</button>
-                  <button onClick={() => handleDelete(c.id)} className="text-red-500 hover:underline">Delete</button>
+                  <button disabled={saving} onClick={() => handleEdit(c)} className="text-blue-600 hover:underline disabled:opacity-50">Edit</button>
+                  <button disabled={saving} onClick={() => handleDelete(c.id)} className="text-red-500 hover:underline disabled:opacity-50">Delete</button>
                 </td>
               </tr>
             ))}
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index e736954..3975834 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -18,11 +18,11 @@ export default function Dashboard() {
   return (
     <div>
       <h2 className="text-2xl font-bold mb-6">Dashboard</h2>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
         {cards.map(({ label, value, color }) => (
           <div key={label} className={`${color} text-white rounded-lg p-6`}>
             <p className="text-sm opacity-80">{label}</p>
-            <p className="text-4xl font-bold mt-1">{value}</p>
+            <p className="text-3xl font-bold mt-1">{value}</p>
           </div>
         ))}
       </div>
diff --git a/frontend/src/pages/Devices.jsx b/frontend/src/pages/Devices.jsx
index c178da7..855f893 100644
--- a/frontend/src/pages/Devices.jsx
+++ b/frontend/src/pages/Devices.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
-import { LoadingState, ErrorState } from "../components/AsyncState";
+import { LoadingState, ErrorState, InlineError } from "../components/AsyncState";
 
 export default function Devices() {
   const [devices, setDevices] = useState([]);
@@ -10,6 +10,9 @@ export default function Devices() {
   const [showForm, setShowForm] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [query, setQuery] = useState("");
 
   const load = async () => {
     setLoading(true);
@@ -31,42 +34,71 @@ export default function Devices() {
   if (error) return <ErrorState error={error} onRetry={load} />;
 
   const handleSubmit = async () => {
-    if (!form.serial_number) return alert("Serial number is required");
-    if (editing) {
-      await api.put(`/devices/${editing}`, form);
-    } else {
-      await api.post("/devices", form);
+    setActionError(null);
+    if (!form.serial_number.trim()) {
+      setActionError("Serial number is required.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editing) {
+        await api.put(`/devices/${editing}`, form);
+      } else {
+        await api.post("/devices", form);
+      }
+      setForm({ serial_number: "", model: "", product_type: "", customer_id: "" });
+      setEditing(null);
+      setShowForm(false);
+      await load();
+    } catch (e) {
+      setActionError(e.message || String(e));
+    } finally {
+      setSaving(false);
     }
-    setForm({ serial_number: "", model: "", product_type: "", customer_id: "" });
-    setEditing(null);
-    setShowForm(false);
-    load();
   };
 
   const handleEdit = (d) => {
     setForm({ serial_number: d.serial_number, model: d.model || "", product_type: d.product_type || "", customer_id: d.customer_id || "" });
     setEditing(d.id);
+    setActionError(null);
     setShowForm(true);
   };
 
   const getCustomerName = (id) => customers.find(c => c.id === id)?.name || "—";
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredDevices = devices.filter((device) => {
+    const customer = customers.find((item) => item.id === device.customer_id);
+    return [
+      device.serial_number,
+      device.model,
+      device.product_type,
+      customer?.name,
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase()
+      .includes(normalizedQuery);
+  });
 
   return (
     <div>
-      <div className="flex justify-between items-center mb-6">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h2 className="text-2xl font-bold">Devices</h2>
         <button
-          onClick={() => { setShowForm(!showForm); setEditing(null); setForm({ serial_number: "", model: "", product_type: "", customer_id: "" }); }}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+          onClick={() => { setShowForm(!showForm); setEditing(null); setActionError(null); setForm({ serial_number: "", model: "", product_type: "", customer_id: "" }); }}
+          className="self-start bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 sm:self-auto"
         >
           {showForm ? "Cancel" : "+ New Device"}
         </button>
       </div>
 
+      <InlineError error={actionError} />
+
       {showForm && (
         <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h3 className="font-semibold mb-4">{editing ? "Edit Device" : "New Device"}</h3>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label className="text-sm text-gray-600">Serial Number *</label>
               <input className="w-full border rounded px-3 py-2 mt-1 text-sm" value={form.serial_number}
@@ -91,15 +123,31 @@ export default function Devices() {
               </select>
             </div>
           </div>
-          <button onClick={handleSubmit}
-            className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700">
-            {editing ? "Update" : "Create"}
+          <button onClick={handleSubmit} disabled={saving}
+            className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50">
+            {saving ? "Saving…" : editing ? "Update" : "Create"}
           </button>
         </div>
       )}
 
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="mb-2">
+        <label htmlFor="device-search" className="sr-only">Search devices</label>
+        <input
+          id="device-search"
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search serial numbers, models, product types, or customers"
+          className="w-full border bg-white px-3 py-2 text-sm"
+        />
+      </div>
+
+      <p className="mb-2 text-xs text-gray-500" aria-live="polite">
+        Showing {filteredDevices.length} of {devices.length} devices
+      </p>
+
+      <div className="bg-white rounded-lg shadow overflow-x-auto">
+        <table className="w-full min-w-[680px] text-sm">
           <thead className="bg-gray-50 text-gray-600 uppercase text-xs">
             <tr>
               {["Serial Number", "Model", "Product Type", "Customer", "Actions"].map(h => (
@@ -108,16 +156,20 @@ export default function Devices() {
             </tr>
           </thead>
           <tbody>
-            {devices.length === 0 ? (
-              <tr><td colSpan={5} className="px-4 py-6 text-center text-gray-400">No devices yet</td></tr>
-            ) : devices.map(d => (
+            {filteredDevices.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-6 text-center text-gray-400">
+                  {devices.length === 0 ? "No devices yet" : "No devices match this search"}
+                </td>
+              </tr>
+            ) : filteredDevices.map(d => (
               <tr key={d.id} className="border-t hover:bg-gray-50">
                 <td className="px-4 py-3 font-mono font-medium">{d.serial_number}</td>
                 <td className="px-4 py-3 text-gray-600">{d.model || "—"}</td>
                 <td className="px-4 py-3 text-gray-600">{d.product_type || "—"}</td>
                 <td className="px-4 py-3 text-gray-600">{getCustomerName(d.customer_id)}</td>
                 <td className="px-4 py-3">
-                  <button onClick={() => handleEdit(d)} className="text-blue-600 hover:underline mr-2">Edit</button>
+                  <button disabled={saving} onClick={() => handleEdit(d)} className="text-blue-600 hover:underline mr-2 disabled:opacity-50">Edit</button>
                 </td>
               </tr>
             ))}
diff --git a/frontend/src/pages/RMAs.jsx b/frontend/src/pages/RMAs.jsx
index 191d26b..f171228 100644
--- a/frontend/src/pages/RMAs.jsx
+++ b/frontend/src/pages/RMAs.jsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
-import { LoadingState, ErrorState } from "../components/AsyncState";
+import { LoadingState, ErrorState, InlineError } from "../components/AsyncState";
+
+const SHIPPING_STATUSES = ["Pending", "Shipped", "Delivered", "Returned"];
+const RESOLUTION_STATUSES = ["Pending", "In Progress", "Completed", "Cancelled"];
 
 export default function RMAs() {
   const [rmas, setRmas] = useState([]);
@@ -10,6 +13,11 @@ export default function RMAs() {
   const [editing, setEditing] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [query, setQuery] = useState("");
+  const [shippingFilter, setShippingFilter] = useState("");
+  const [resolutionFilter, setResolutionFilter] = useState("");
 
   const load = async () => {
     setLoading(true);
@@ -31,43 +39,77 @@ export default function RMAs() {
   if (error) return <ErrorState error={error} onRetry={load} />;
 
   const handleSubmit = async () => {
-    if (!form.ticket_id) return alert("Ticket is required");
-    if (!form.rma_number) return alert("RMA number is required");
-    if (editing) {
-      await api.put(`/rmas/${editing}`, form);
-    } else {
-      await api.post("/rmas", form);
+    setActionError(null);
+    if (!form.ticket_id) {
+      setActionError("Ticket is required.");
+      return;
+    }
+    if (!form.rma_number.trim()) {
+      setActionError("RMA number is required.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editing) {
+        await api.put(`/rmas/${editing}`, form);
+      } else {
+        await api.post("/rmas", form);
+      }
+      setForm({ ticket_id: "", rma_number: "", serial_number: "", shipping_status: "Pending", resolution_status: "Pending" });
+      setEditing(null);
+      setShowForm(false);
+      await load();
+    } catch (e) {
+      setActionError(e.message || String(e));
+    } finally {
+      setSaving(false);
     }
-    setForm({ ticket_id: "", rma_number: "", serial_number: "", shipping_status: "Pending", resolution_status: "Pending" });
-    setEditing(null);
-    setShowForm(false);
-    load();
   };
 
   const handleEdit = (r) => {
     setForm({ ticket_id: r.ticket_id, rma_number: r.rma_number, serial_number: r.serial_number || "", shipping_status: r.shipping_status, resolution_status: r.resolution_status });
     setEditing(r.id);
+    setActionError(null);
     setShowForm(true);
   };
 
   const getTicketTitle = (id) => tickets.find(t => t.id === id)?.title || "—";
 
   const statusColor = (s) => s === "Pending" ? "bg-yellow-100 text-yellow-700" : s === "Completed" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600";
+  const shippingStatuses = [...new Set([...SHIPPING_STATUSES, ...rmas.map((rma) => rma.shipping_status).filter(Boolean)])];
+  const resolutionStatuses = [...new Set([...RESOLUTION_STATUSES, ...rmas.map((rma) => rma.resolution_status).filter(Boolean)])];
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredRmas = rmas.filter((rma) => {
+    const ticket = tickets.find((item) => item.id === rma.ticket_id);
+    const searchable = [rma.rma_number, rma.serial_number, ticket?.title]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+
+    return (
+      (!normalizedQuery || searchable.includes(normalizedQuery)) &&
+      (!shippingFilter || rma.shipping_status === shippingFilter) &&
+      (!resolutionFilter || rma.resolution_status === resolutionFilter)
+    );
+  });
 
   return (
     <div>
-      <div className="flex justify-between items-center mb-6">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h2 className="text-2xl font-bold">RMAs</h2>
-        <button onClick={() => { setShowForm(!showForm); setEditing(null); setForm({ ticket_id: "", rma_number: "", serial_number: "", shipping_status: "Pending", resolution_status: "Pending" }); }}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+        <button onClick={() => { setShowForm(!showForm); setEditing(null); setActionError(null); setForm({ ticket_id: "", rma_number: "", serial_number: "", shipping_status: "Pending", resolution_status: "Pending" }); }}
+          className="self-start bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 sm:self-auto">
           {showForm ? "Cancel" : "+ New RMA"}
         </button>
       </div>
 
+      <InlineError error={actionError} />
+
       {showForm && (
         <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h3 className="font-semibold mb-4">{editing ? "Edit RMA" : "New RMA"}</h3>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label className="text-sm text-gray-600">Ticket *</label>
               <select className="w-full border rounded px-3 py-2 mt-1 text-sm" value={form.ticket_id}
@@ -90,25 +132,67 @@ export default function RMAs() {
               <label className="text-sm text-gray-600">Shipping Status</label>
               <select className="w-full border rounded px-3 py-2 mt-1 text-sm" value={form.shipping_status}
                 onChange={e => setForm({ ...form, shipping_status: e.target.value })}>
-                {["Pending", "Shipped", "Delivered", "Returned"].map(s => <option key={s}>{s}</option>)}
+                {shippingStatuses.map(s => <option key={s}>{s}</option>)}
               </select>
             </div>
             <div>
               <label className="text-sm text-gray-600">Resolution Status</label>
               <select className="w-full border rounded px-3 py-2 mt-1 text-sm" value={form.resolution_status}
                 onChange={e => setForm({ ...form, resolution_status: e.target.value })}>
-                {["Pending", "In Progress", "Completed", "Cancelled"].map(s => <option key={s}>{s}</option>)}
+                {resolutionStatuses.map(s => <option key={s}>{s}</option>)}
               </select>
             </div>
           </div>
-          <button onClick={handleSubmit} className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700">
-            {editing ? "Update" : "Create"}
+          <button onClick={handleSubmit} disabled={saving} className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50">
+            {saving ? "Saving…" : editing ? "Update" : "Create"}
           </button>
         </div>
       )}
 
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="mb-4 grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_180px_180px]">
+        <div>
+          <label htmlFor="rma-search" className="sr-only">Search RMAs</label>
+          <input
+            id="rma-search"
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search RMA numbers, serial numbers, or tickets"
+            className="w-full border bg-white px-3 py-2 text-sm"
+          />
+        </div>
+        <div>
+          <label htmlFor="rma-shipping-filter" className="sr-only">Filter by shipping status</label>
+          <select
+            id="rma-shipping-filter"
+            value={shippingFilter}
+            onChange={(event) => setShippingFilter(event.target.value)}
+            className="w-full border bg-white px-3 py-2 text-sm"
+          >
+            <option value="">All shipping</option>
+            {shippingStatuses.map((status) => <option key={status}>{status}</option>)}
+          </select>
+        </div>
+        <div>
+          <label htmlFor="rma-resolution-filter" className="sr-only">Filter by resolution status</label>
+          <select
+            id="rma-resolution-filter"
+            value={resolutionFilter}
+            onChange={(event) => setResolutionFilter(event.target.value)}
+            className="w-full border bg-white px-3 py-2 text-sm"
+          >
+            <option value="">All resolutions</option>
+            {resolutionStatuses.map((status) => <option key={status}>{status}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <p className="mb-2 text-xs text-gray-500" aria-live="polite">
+        Showing {filteredRmas.length} of {rmas.length} RMAs
+      </p>
+
+      <div className="bg-white rounded-lg shadow overflow-x-auto">
+        <table className="w-full min-w-[820px] text-sm">
           <thead className="bg-gray-50 text-gray-600 uppercase text-xs">
             <tr>
               {["RMA Number", "Ticket", "Serial Number", "Shipping", "Resolution", "Actions"].map(h => (
@@ -117,17 +201,21 @@ export default function RMAs() {
             </tr>
           </thead>
           <tbody>
-            {rmas.length === 0 ? (
-              <tr><td colSpan={6} className="px-4 py-6 text-center text-gray-400">No RMAs yet</td></tr>
-            ) : rmas.map(r => (
+            {filteredRmas.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-6 text-center text-gray-400">
+                  {rmas.length === 0 ? "No RMAs yet" : "No RMAs match these filters"}
+                </td>
+              </tr>
+            ) : filteredRmas.map(r => (
               <tr key={r.id} className="border-t hover:bg-gray-50">
                 <td className="px-4 py-3 font-mono font-medium">{r.rma_number}</td>
                 <td className="px-4 py-3 text-gray-600">{getTicketTitle(r.ticket_id)}</td>
                 <td className="px-4 py-3 text-gray-600">{r.serial_number || "—"}</td>
-                <td className="px-4 py-3"><span className={`text-xs px-2 py-1 rounded-full font-medium ${statusColor(r.shipping_status)}`}>{r.shipping_status}</span></td>
-                <td className="px-4 py-3"><span className={`text-xs px-2 py-1 rounded-full font-medium ${statusColor(r.resolution_status)}`}>{r.resolution_status}</span></td>
+                <td className="px-4 py-3"><span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${statusColor(r.shipping_status)}`}>{r.shipping_status}</span></td>
+                <td className="px-4 py-3"><span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${statusColor(r.resolution_status)}`}>{r.resolution_status}</span></td>
                 <td className="px-4 py-3">
-                  <button onClick={() => handleEdit(r)} className="text-blue-600 hover:underline">Edit</button>
+                  <button disabled={saving} onClick={() => handleEdit(r)} className="text-blue-600 hover:underline disabled:opacity-50">Edit</button>
                 </td>
               </tr>
             ))}
diff --git a/frontend/src/pages/Tickets.jsx b/frontend/src/pages/Tickets.jsx
index 01b4c4d..cabc416 100644
--- a/frontend/src/pages/Tickets.jsx
+++ b/frontend/src/pages/Tickets.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import AISuggestions from "../components/AISuggestions";
-import { LoadingState, ErrorState } from "../components/AsyncState";
+import { LoadingState, ErrorState, InlineError } from "../components/AsyncState";
 
 const STATUSES = ["Open", "In Progress", "Waiting on Customer", "Resolved", "Closed"];
 const PRIORITIES = ["Low", "Medium", "High", "Critical"];
@@ -34,6 +34,14 @@ export default function Tickets() {
   const [form, setForm] = useState({ title: "", description: "", status: "Open", priority: "Medium", customer_id: "", device_id: "" });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [priorityFilter, setPriorityFilter] = useState("");
+  const [actionError, setActionError] = useState(null);
+  const [detailError, setDetailError] = useState(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [noteSaving, setNoteSaving] = useState(false);
 
   const load = async () => {
     setLoading(true);
@@ -56,15 +64,21 @@ export default function Tickets() {
 
   const loadDetail = async (t) => {
     setSelected(t);
+    setDetailError(null);
+    setDetailLoading(true);
+    setNotes([]);
+    setHistory([]);
     try {
-      const [n, h] = await Promise.all([
+      const [ticketNotes, ticketHistory] = await Promise.all([
         api.get(`/tickets/${t.id}/notes`),
         api.get(`/tickets/${t.id}/history`),
       ]);
-      setNotes(n);
-      setHistory(h);
+      setNotes(ticketNotes);
+      setHistory(ticketHistory);
     } catch (e) {
-      setError(e.message || String(e));
+      setDetailError(e.message || String(e));
+    } finally {
+      setDetailLoading(false);
     }
   };
 
@@ -74,54 +88,93 @@ export default function Tickets() {
   if (error) return <ErrorState error={error} onRetry={load} />;
 
   const handleSubmit = async () => {
-    if (!form.title) return alert("Title is required");
-    if (editing) {
-      await api.put(`/tickets/${editing}`, form);
-    } else {
-      await api.post("/tickets", form);
+    setActionError(null);
+    if (!form.title.trim()) {
+      setActionError("Title is required.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editing) {
+        await api.put(`/tickets/${editing}`, form);
+      } else {
+        await api.post("/tickets", form);
+      }
+      setForm({ title: "", description: "", status: "Open", priority: "Medium", customer_id: "", device_id: "" });
+      setEditing(null);
+      setShowForm(false);
+      await load();
+    } catch (e) {
+      setActionError(e.message || String(e));
+    } finally {
+      setSaving(false);
     }
-    setForm({ title: "", description: "", status: "Open", priority: "Medium", customer_id: "", device_id: "" });
-    setEditing(null);
-    setShowForm(false);
-    load();
   };
 
   const handleEdit = (t) => {
     setForm({ title: t.title, description: t.description || "", status: t.status, priority: t.priority, customer_id: t.customer_id || "", device_id: t.device_id || "" });
     setEditing(t.id);
+    setActionError(null);
     setShowForm(true);
     setSelected(null);
   };
 
   const handleAddNote = async () => {
     if (!newNote.trim()) return;
-    await api.post("/notes", { ticket_id: selected.id, note_text: newNote, created_by: "Agent" });
-    setNewNote("");
+    setDetailError(null);
+    setNoteSaving(true);
     try {
+      await api.post("/notes", { ticket_id: selected.id, note_text: newNote, created_by: "Agent" });
+      setNewNote("");
       setNotes(await api.get(`/tickets/${selected.id}/notes`));
     } catch (e) {
-      setError(e.message || String(e));
+      setDetailError(e.message || String(e));
+    } finally {
+      setNoteSaving(false);
     }
   };
 
   const getName = (arr, id) => arr.find(x => x.id === id)?.name || "—";
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredTickets = tickets.filter((ticket) => {
+    const customer = customers.find((item) => item.id === ticket.customer_id);
+    const device = devices.find((item) => item.id === ticket.device_id);
+    const searchable = [
+      ticket.title,
+      ticket.description,
+      customer?.name,
+      device?.serial_number,
+      device?.model,
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+
+    return (
+      (!normalizedQuery || searchable.includes(normalizedQuery)) &&
+      (!statusFilter || ticket.status === statusFilter) &&
+      (!priorityFilter || ticket.priority === priorityFilter)
+    );
+  });
 
   if (selected) return (
     <div>
       <button onClick={() => setSelected(null)} className="text-blue-600 hover:underline mb-4 text-sm">← Back to Tickets</button>
+      <InlineError error={detailError} />
       <div className="bg-white rounded-lg shadow p-6 mb-4">
-        <div className="flex justify-between items-start">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <div>
             <h2 className="text-2xl font-bold mb-1">{selected.title}</h2>
             <p className="text-gray-500 text-sm mb-3">{selected.description || "No description"}</p>
             <div className="flex gap-2">
-              <span className={`text-xs px-2 py-1 rounded-full font-medium ${statusColor(selected.status)}`}>{selected.status}</span>
-              <span className={`text-xs px-2 py-1 rounded-full font-medium ${priorityColor(selected.priority)}`}>{selected.priority}</span>
+              <span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${statusColor(selected.status)}`}>{selected.status}</span>
+              <span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${priorityColor(selected.priority)}`}>{selected.priority}</span>
             </div>
           </div>
           <button onClick={() => handleEdit(selected)} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">Edit Ticket</button>
         </div>
-        <div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-600">
+        <div className="mt-4 grid grid-cols-1 gap-4 text-sm text-gray-600 sm:grid-cols-2">
           <p><span className="font-medium">Customer:</span> {getName(customers, selected.customer_id)}</p>
           <p><span className="font-medium">Device:</span> {devices.find(d => d.id === selected.device_id)?.serial_number || "—"}</p>
         </div>
@@ -133,27 +186,29 @@ export default function Tickets() {
       {/* Notes */}
       <div className="bg-white rounded-lg shadow p-6 mb-4">
         <h3 className="font-semibold mb-3">Notes</h3>
-        {notes.length === 0 ? <p className="text-gray-400 text-sm">No notes yet</p> : notes.map(n => (
+        {detailLoading ? <p className="text-gray-400 text-sm">Loading notes…</p> : notes.length === 0 ? <p className="text-gray-400 text-sm">No notes yet</p> : notes.map(n => (
           <div key={n.id} className="border-b py-3 text-sm">
             <p>{n.note_text}</p>
             <p className="text-gray-400 text-xs mt-1">{n.created_by} · {new Date(n.created_at).toLocaleString()}</p>
           </div>
         ))}
         <div className="mt-4 flex gap-2">
-          <input className="flex-1 border rounded px-3 py-2 text-sm" placeholder="Add a note..."
+          <input disabled={noteSaving} className="min-w-0 flex-1 border rounded px-3 py-2 text-sm disabled:bg-gray-100" placeholder="Add a note..."
             value={newNote} onChange={e => setNewNote(e.target.value)} />
-          <button onClick={handleAddNote} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">Add</button>
+          <button disabled={noteSaving || !newNote.trim()} onClick={handleAddNote} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm disabled:cursor-not-allowed disabled:opacity-50">
+            {noteSaving ? "Adding…" : "Add"}
+          </button>
         </div>
       </div>
 
       {/* History */}
       <div className="bg-white rounded-lg shadow p-6">
         <h3 className="font-semibold mb-3">Status History</h3>
-        {history.length === 0 ? <p className="text-gray-400 text-sm">No history yet</p> : history.map(h => (
+        {detailLoading ? <p className="text-gray-400 text-sm">Loading history…</p> : history.length === 0 ? <p className="text-gray-400 text-sm">No history yet</p> : history.map(h => (
           <div key={h.id} className="border-b py-2 text-sm flex gap-2 items-center">
-            <span className={`px-2 py-0.5 rounded-full text-xs ${statusColor(h.old_status)}`}>{h.old_status}</span>
+            <span className={`whitespace-nowrap px-2 py-0.5 rounded-full text-xs ${statusColor(h.old_status)}`}>{h.old_status}</span>
             <span className="text-gray-400">→</span>
-            <span className={`px-2 py-0.5 rounded-full text-xs ${statusColor(h.new_status)}`}>{h.new_status}</span>
+            <span className={`whitespace-nowrap px-2 py-0.5 rounded-full text-xs ${statusColor(h.new_status)}`}>{h.new_status}</span>
             <span className="text-gray-400 text-xs ml-auto">{new Date(h.changed_at).toLocaleString()}</span>
           </div>
         ))}
@@ -163,24 +218,26 @@ export default function Tickets() {
 
   return (
     <div>
-      <div className="flex justify-between items-center mb-6">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h2 className="text-2xl font-bold">Tickets</h2>
-        <button onClick={() => { setShowForm(!showForm); setEditing(null); setForm({ title: "", description: "", status: "Open", priority: "Medium", customer_id: "", device_id: "" }); }}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+        <button onClick={() => { setShowForm(!showForm); setEditing(null); setActionError(null); setForm({ title: "", description: "", status: "Open", priority: "Medium", customer_id: "", device_id: "" }); }}
+          className="self-start bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 sm:self-auto">
           {showForm ? "Cancel" : "+ New Ticket"}
         </button>
       </div>
 
+      <InlineError error={actionError} />
+
       {showForm && (
         <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h3 className="font-semibold mb-4">{editing ? "Edit Ticket" : "New Ticket"}</h3>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="col-span-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="md:col-span-2">
               <label className="text-sm text-gray-600">Title *</label>
               <input className="w-full border rounded px-3 py-2 mt-1 text-sm" value={form.title}
                 onChange={e => setForm({ ...form, title: e.target.value })} />
             </div>
-            <div className="col-span-2">
+            <div className="md:col-span-2">
               <label className="text-sm text-gray-600">Description</label>
               <textarea className="w-full border rounded px-3 py-2 mt-1 text-sm" rows={3} value={form.description}
                 onChange={e => setForm({ ...form, description: e.target.value })} />
@@ -216,14 +273,56 @@ export default function Tickets() {
               </select>
             </div>
           </div>
-          <button onClick={handleSubmit} className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700">
-            {editing ? "Update" : "Create"}
+          <button onClick={handleSubmit} disabled={saving} className="mt-4 bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50">
+            {saving ? "Saving…" : editing ? "Update" : "Create"}
           </button>
         </div>
       )}
 
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="mb-4 grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_180px_160px]">
+        <div>
+          <label htmlFor="ticket-search" className="sr-only">Search tickets</label>
+          <input
+            id="ticket-search"
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search tickets, customers, or devices"
+            className="w-full border bg-white px-3 py-2 text-sm"
+          />
+        </div>
+        <div>
+          <label htmlFor="ticket-status-filter" className="sr-only">Filter by status</label>
+          <select
+            id="ticket-status-filter"
+            value={statusFilter}
+            onChange={(event) => setStatusFilter(event.target.value)}
+            className="w-full border bg-white px-3 py-2 text-sm"
+          >
+            <option value="">All statuses</option>
+            {STATUSES.map((status) => <option key={status}>{status}</option>)}
+          </select>
+        </div>
+        <div>
+          <label htmlFor="ticket-priority-filter" className="sr-only">Filter by priority</label>
+          <select
+            id="ticket-priority-filter"
+            value={priorityFilter}
+            onChange={(event) => setPriorityFilter(event.target.value)}
+            className="w-full border bg-white px-3 py-2 text-sm"
+          >
+            <option value="">All priorities</option>
+            {PRIORITIES.map((priority) => <option key={priority}>{priority}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <p className="mb-2 text-xs text-gray-500" aria-live="polite">
+        Showing {filteredTickets.length} of {tickets.length} tickets
+      </p>
+
+      <div className="bg-white rounded-lg shadow overflow-x-auto">
+        <table className="w-full min-w-[680px] text-sm">
           <thead className="bg-gray-50 text-gray-600 uppercase text-xs">
             <tr>
               {["Title", "Status", "Priority", "Customer", "Actions"].map(h => (
@@ -232,13 +331,17 @@ export default function Tickets() {
             </tr>
           </thead>
           <tbody>
-            {tickets.length === 0 ? (
-              <tr><td colSpan={5} className="px-4 py-6 text-center text-gray-400">No tickets yet</td></tr>
-            ) : tickets.map(t => (
+            {filteredTickets.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-6 text-center text-gray-400">
+                  {tickets.length === 0 ? "No tickets yet" : "No tickets match these filters"}
+                </td>
+              </tr>
+            ) : filteredTickets.map(t => (
               <tr key={t.id} className="border-t hover:bg-gray-50">
                 <td className="px-4 py-3 font-medium">{t.title}</td>
-                <td className="px-4 py-3"><span className={`text-xs px-2 py-1 rounded-full font-medium ${statusColor(t.status)}`}>{t.status}</span></td>
-                <td className="px-4 py-3"><span className={`text-xs px-2 py-1 rounded-full font-medium ${priorityColor(t.priority)}`}>{t.priority}</span></td>
+                <td className="px-4 py-3"><span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${statusColor(t.status)}`}>{t.status}</span></td>
+                <td className="px-4 py-3"><span className={`whitespace-nowrap text-xs px-2 py-1 rounded-full font-medium ${priorityColor(t.priority)}`}>{t.priority}</span></td>
                 <td className="px-4 py-3 text-gray-600">{getName(customers, t.customer_id)}</td>
                 <td className="px-4 py-3">
                   <button onClick={() => loadDetail(t)} className="text-blue-600 hover:underline">View</button>