diff --git a/.changeset/smart-stamps-hope.md b/.changeset/smart-stamps-hope.md
new file mode 100644
index 000000000..eb26398a4
--- /dev/null
+++ b/.changeset/smart-stamps-hope.md
@@ -0,0 +1,5 @@
+---
+"@nmi-agro/fdm-app": minor
+---
+
+In case of a client error (400, 403 and 404) show a visually distinct page than for an error (500) to make it more clear to the user.
diff --git a/fdm-app/app/components/blocks/helpdesk/ticket-viewer.tsx b/fdm-app/app/components/blocks/helpdesk/ticket-viewer.tsx
index a4635b808..ad5e6eac8 100644
--- a/fdm-app/app/components/blocks/helpdesk/ticket-viewer.tsx
+++ b/fdm-app/app/components/blocks/helpdesk/ticket-viewer.tsx
@@ -276,10 +276,7 @@ export function TicketViewer({
   }
 
   return (
-    <div
-      ref={containerRef}
-      className="relative flex h-[calc(100vh-16*calc(var(--spacing)))] flex-row"
-    >
+    <div ref={containerRef} className="relative flex h-full min-h-0 flex-row">
       {/* Static sidebar — only rendered on xl+ screens */}
       {isXl && (
         <aside className="border-sidebar-border bg-background flex w-100 shrink-0 flex-col border-r">
diff --git a/fdm-app/app/components/custom/error.tsx b/fdm-app/app/components/custom/error.tsx
index 875fe01cb..50ded9823 100644
--- a/fdm-app/app/components/custom/error.tsx
+++ b/fdm-app/app/components/custom/error.tsx
@@ -1,27 +1,93 @@
 import * as Sentry from "@sentry/react-router"
-import { ArrowLeft, Copy, Home } from "lucide-react"
+import { ArrowLeft, Compass, Copy, Home, LifeBuoy } from "lucide-react"
 import { useEffect, useState } from "react"
-import { NavLink, useNavigate } from "react-router"
+import { isRouteErrorResponse, NavLink, useLocation, useNavigate } from "react-router"
 import { Button } from "~/components/ui/button"
+import { useAnalytics } from "~/hooks/use-analytics"
 import { clientConfig } from "~/lib/config"
 import { normalizePage } from "~/lib/url-utils"
 
+export const CLIENT_ERROR_STATUSES = [400, 403, 404]
+
 /**
- * Displays a full-screen error block with tailored messaging and navigation options.
- *
- * Depending on the provided error status, this component renders:
- * - A specific message and navigation buttons for a 404 error, indicating that the page does not exist.
- * - A generic error message along with a button to copy the formatted error details (including status, message, stack trace, page, and timestamp) to the clipboard for other errors.
+ * Full-screen, generic "page unavailable" state for client error statuses (400, 403, 404).
  *
- * If an error message is available, the component also displays the error details formatted as pretty-printed JSON. Otherwise, it shows a fallback message for non-404 errors.
+ * Deliberately visually distinct from the 5xx/unexpected-error UI below (no illustration, no
+ * grey background, no stack trace) — this is an expected, everyday state a user might land on by
+ * accident, not a bug. It borrows the brand-mark treatment already used on the sign-in/auth
+ * surfaces (a solid `#122023` badge) to give the moment real presence, with a short reassuring
+ * message and a clearly prioritized set of next steps, none of which reveal whether the specific
+ * page/resource exists or the user simply lacks permission for it.
  *
- * @param status - HTTP status code of the error or null.
- * @param message - Detailed error message, or null if not available.
- * @param stacktrace - Optional stack trace providing additional error context.
- * @param page - The page where the error occurred.
- * @param timestamp - The timestamp when the error was recorded.
+ * @param status - The real HTTP-like status (400/403/404), for analytics only — never rendered,
+ * so the page itself still never reveals to the *user* which case they hit.
  */
-export function ErrorBlock({
+export function ClientErrorPage({ status }: { status?: number | null } = {}) {
+  const navigate = useNavigate()
+  const { capture } = useAnalytics()
+
+  useEffect(() => {
+    capture("client_error_page_viewed", {
+      status: status ?? null,
+      page: normalizePage(window.location.pathname),
+    })
+  }, [capture, status])
+
+  return (
+    <div className="bg-background flex min-h-screen items-center justify-center px-4">
+      <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 flex max-w-md flex-col items-center text-center motion-safe:duration-500">
+        <div className="mb-6 flex aspect-square size-16 items-center justify-center rounded-2xl bg-[#122023]">
+          <Compass className="size-8 text-white" strokeWidth={1.75} />
+        </div>
+
+        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+          Deze pagina is niet beschikbaar
+        </h1>
+        <p className="text-muted-foreground mt-4 text-lg text-pretty">
+          Het lijkt erop dat deze pagina niet bestaat, of dat je er geen toegang tot hebt.
+          Controleer het webadres en of je toegang hebt, of neem contact op als je denkt dat dit niet
+          klopt.
+        </p>
+
+        <div className="mt-8 flex w-full flex-col items-center gap-4">
+          <Button
+            size="lg"
+            className="w-full sm:w-auto"
+            onClick={() => {
+              if (window.history.length > 1) {
+                void navigate(-1)
+              } else {
+                void navigate("/")
+              }
+            }}
+          >
+            <ArrowLeft className="mr-2 size-4" /> Terug naar vorige pagina
+          </Button>
+          <div className="flex items-center gap-6">
+            <Button variant="link" className="text-muted-foreground h-auto p-0" asChild>
+              <NavLink to="/farm">
+                <Home className="mr-1.5 size-3.5" /> Mijn bedrijven
+              </NavLink>
+            </Button>
+            <Button variant="link" className="text-muted-foreground h-auto p-0" asChild>
+              <NavLink to="/support/new">
+                <LifeBuoy className="mr-1.5 size-3.5" /> Ondersteuning
+              </NavLink>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Full-screen diagnostic UI for genuinely unexpected errors: server 5xx route-error responses,
+ * thrown `Error` instances (e.g. a component that throws while rendering), or any other unknown
+ * thrown value. Deliberately distinct from {@link ClientErrorPage} — this *is* a bug, so it shows
+ * the tractor illustration, the raw error details, and a way to copy them for a support request.
+ */
+export function UnexpectedErrorPage({
   status,
   message,
   stacktrace,
@@ -35,7 +101,7 @@ export function ErrorBlock({
   timestamp: string
 }) {
   const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle")
-  const navigate = useNavigate()
+  const { capture } = useAnalytics()
 
   useEffect(() => {
     if (clientConfig.analytics.sentry) {
@@ -45,7 +111,11 @@ export function ErrorBlock({
         Sentry.metrics.count("error_block.shown", 1)
       })
     }
-  }, [status, page])
+    capture("unexpected_error_page_viewed", {
+      status: status ?? null,
+      page: normalizePage(page),
+    })
+  }, [status, page, capture])
 
   useEffect(() => {
     if (copyState !== "idle") {
@@ -81,6 +151,7 @@ export function ErrorBlock({
       setCopyState("failed")
     }
   }
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4 dark:bg-gray-900">
       <div className="mb-8 w-full max-w-md overflow-hidden rounded-lg">
@@ -91,50 +162,28 @@ export function ErrorBlock({
         />
       </div>
       <h1 className="mb-2 text-4xl font-bold text-gray-900 dark:text-gray-100">
-        {status === 404 ? "Aii, deze pagina bestaat niet." : "Oeps, er lijkt iets mis te zijn."}
+        Oeps, er lijkt iets mis te zijn.
       </h1>
       <p className="mb-8 text-center text-xl text-gray-600 dark:text-gray-400">
-        {status === 404
-          ? "Het lijkt erop dat de pagina die je zoekt niet bestaat."
-          : "Er is onverwachts wat fout gegaan. Probeer eerst opnieuw. Als het niet opnieuw lukt, kopieer dan de foutmelding en neem contact op met Ondersteuning."}
+        Er is onverwachts wat fout gegaan. Probeer eerst opnieuw. Als het niet opnieuw lukt, kopieer
+        dan de foutmelding en neem contact op met Ondersteuning.
       </p>
 
-      {status === 404 ? (
-        <div className="flex flex-col gap-4 sm:flex-row">
-          <Button
-            onClick={() => {
-              if (window.history.length > 1) {
-                void navigate(-1)
-              } else {
-                void navigate("/")
-              }
-            }}
-          >
-            <ArrowLeft className="mr-2 h-4 w-4" /> Terug naar vorige pagina
-          </Button>
-          <Button variant="outline" asChild>
-            <NavLink to="/">
-              <Home className="mr-2 h-4 w-4" /> Terug naar de hoofdpagina
-            </NavLink>
-          </Button>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-4 sm:flex-row">
-          <Button asChild>
-            <NavLink to="/">
-              <Home className="mr-2 h-4 w-4" /> Terug naar de hoofdpagina
-            </NavLink>
-          </Button>
-          <Button variant="outline" onClick={copyStackTrace}>
-            <Copy className="mr-2 h-4 w-4" />
-            {copyState === "copied"
-              ? "Gekopieerd!"
-              : copyState === "failed"
-                ? "Browser staat niet toe om te kopiëren — selecteer de tekst hieronder en kopieer handmatig"
-                : "Kopieer foutmelding"}
-          </Button>
-        </div>
-      )}
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <Button asChild>
+          <NavLink to="/">
+            <Home className="mr-2 h-4 w-4" /> Terug naar de hoofdpagina
+          </NavLink>
+        </Button>
+        <Button variant="outline" onClick={copyStackTrace}>
+          <Copy className="mr-2 h-4 w-4" />
+          {copyState === "copied"
+            ? "Gekopieerd!"
+            : copyState === "failed"
+              ? "Browser staat niet toe om te kopiëren — selecteer de tekst hieronder en kopieer handmatig"
+              : "Kopieer foutmelding"}
+        </Button>
+      </div>
       {message ? (
         <div className="mt-8 w-full max-w-2xl">
           <h2 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
@@ -144,7 +193,7 @@ export function ErrorBlock({
             {errorDetails}
           </pre>
         </div>
-      ) : status === 404 ? null : (
+      ) : (
         <p className="mt-8 text-gray-600 dark:text-gray-400">
           Er zijn helaas geen details over de fout beschikbaar.
         </p>
@@ -152,3 +201,129 @@ export function ErrorBlock({
     </div>
   )
 }
+
+/**
+ * Displays a full-screen error block with tailored messaging and navigation options.
+ *
+ * Depending on the provided error status, this component renders:
+ * - One unified, generic "page unavailable" message for client error statuses (400, 403, 404),
+ *   via {@link ClientErrorPage}. This deliberately never reveals whether a specific resource
+ *   exists or the user simply lacks permission for it — both cases look identical to the user.
+ * - The diagnostic {@link UnexpectedErrorPage} for anything else.
+ *
+ * @param status - HTTP status code of the error or null.
+ * @param message - Detailed error message, or null if not available.
+ * @param stacktrace - Optional stack trace providing additional error context.
+ * @param page - The page where the error occurred.
+ * @param timestamp - The timestamp when the error was recorded.
+ */
+export function ErrorBlock({
+  status,
+  message,
+  stacktrace,
+  page,
+  timestamp,
+}: {
+  status: number | null
+  message: string | null
+  stacktrace: string | null | undefined
+  page: string
+  timestamp: string
+}) {
+  const isClientError = status !== null && CLIENT_ERROR_STATUSES.includes(status)
+
+  if (isClientError) {
+    return <ClientErrorPage status={status} />
+  }
+
+  return (
+    <UnexpectedErrorPage
+      status={status}
+      message={message}
+      stacktrace={stacktrace}
+      page={page}
+      timestamp={timestamp}
+    />
+  )
+}
+
+/**
+ * Classifies the current route error and renders the right UI for it. Meant to be used from a
+ * route module's `ErrorBoundary` export (pass its `error` prop straight through) — including
+ * ones nested under a layout route that wants to keep its own shell (sidebar/header) around this
+ * component rather than losing it entirely, as `root.tsx`'s top-level boundary would.
+ *
+ * - Redirects to sign-in for a `401` route error response.
+ * - Renders the generic, friendly {@link ClientErrorPage} for expected client errors (400, 403,
+ *   404) — a route/resource that doesn't exist or one the user lacks permission for.
+ * - Renders the diagnostic {@link UnexpectedErrorPage} for everything else: `5xx` route error
+ *   responses, thrown `Error` instances (e.g. a component that throws while rendering — a real
+ *   bug, not an expected state), or any other unknown thrown value. Client-side errors that
+ *   weren't already captured server-side are reported to Sentry here.
+ */
+export function RouteErrorFallback({ error }: { error: unknown }) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const page = location.pathname
+  const timestamp = new Date().toISOString()
+
+  const isUnauthorized = isRouteErrorResponse(error) && error.status === 401
+
+  // Redirect to signin page if authentication is not provided. Navigation must happen after
+  // render (in an effect), not by throwing `redirect()` here — this component renders inside an
+  // `ErrorBoundary`, not a loader/action, so a thrown redirect isn't a supported navigation
+  // mechanism in that position.
+  useEffect(() => {
+    if (isUnauthorized) {
+      const currentPath = location.pathname + location.search + location.hash
+      const signInUrl = `/signin?redirectTo=${encodeURIComponent(currentPath)}`
+      void navigate(signInUrl, { replace: true })
+    }
+  }, [isUnauthorized, location, navigate])
+
+  if (isUnauthorized) {
+    return null
+  }
+
+  if (isRouteErrorResponse(error)) {
+    if (CLIENT_ERROR_STATUSES.includes(error.status)) {
+      return <ClientErrorPage status={error.status} />
+    }
+
+    // Server-side errors are already captured in Sentry via handleError / reportError.
+    // No need to capture again client-side.
+    return (
+      <UnexpectedErrorPage
+        status={error.status}
+        message={error.statusText}
+        stacktrace={error.data}
+        page={page}
+        timestamp={timestamp}
+      />
+    )
+  }
+
+  if (error instanceof Error) {
+    // Client-side JS error (e.g. a component that threw while rendering) — not captured
+    // server-side, so capture here.
+    Sentry.captureException(error)
+    return (
+      <UnexpectedErrorPage
+        status={500}
+        message={error.message}
+        stacktrace={error.stack}
+        page={page}
+        timestamp={timestamp}
+      />
+    )
+  }
+
+  if (error === null) {
+    return null
+  }
+
+  Sentry.captureException(error)
+  return (
+    <UnexpectedErrorPage status={500} message="Unknown Error" stacktrace={null} page={page} timestamp={timestamp} />
+  )
+}
diff --git a/fdm-app/app/lib/error.ts b/fdm-app/app/lib/error.ts
index c1606d7d7..281be846e 100644
--- a/fdm-app/app/lib/error.ts
+++ b/fdm-app/app/lib/error.ts
@@ -8,6 +8,55 @@ const errorIdSize = 8 // Number of characters in ID
 
 export const createErrorId = customAlphabet(customErrorAlphabet, errorIdSize)
 
+// Thrown by fdm-core's checkPermission for any resource the principal can't access, whether it
+// exists or not. Shared here so route loaders that need to distinguish this specific failure
+// (e.g. to keep the app shell up and show a friendly in-app message instead of throwing) don't
+// duplicate the string.
+export const PERMISSION_DENIED_MESSAGE = "Principal does not have permission to perform this action"
+
+/**
+ * Extracts `{ status, statusText }` from a thrown/returned route error, if it has one.
+ *
+ * Route modules in this codebase almost always use `throw data(message, { status, statusText })`
+ * rather than `throw new Response(...)`. `data()` returns a `DataWithResponseInit` instance whose
+ * `status`/`statusText` live under `.init`, NOT as direct properties — so a naive
+ * `"status" in error` check (which only matches a real `Response`) silently fails for it, and the
+ * error falls through to the generic 500 branch below regardless of the status it was thrown
+ * with. This helper checks both shapes so callers don't need to know which one they're dealing
+ * with.
+ */
+function getThrownStatus(
+  error: unknown,
+): { status: number; statusText: string | undefined } | null {
+  if (typeof error !== "object" || error === null) return null
+
+  // `data(value, init)` — status/statusText live under `.init`.
+  if (
+    "type" in error &&
+    error.type === "DataWithResponseInit" &&
+    "init" in error &&
+    typeof error.init === "object" &&
+    error.init !== null &&
+    "status" in error.init &&
+    typeof error.init.status === "number"
+  ) {
+    const statusText =
+      "statusText" in error.init && typeof error.init.statusText === "string"
+        ? error.init.statusText
+        : undefined
+    return { status: error.init.status, statusText }
+  }
+
+  // A real thrown `Response` (or Response-like object) — status/statusText are direct properties.
+  if ("status" in error && typeof error.status === "number") {
+    const statusText =
+      "statusText" in error && typeof error.statusText === "string" ? error.statusText : undefined
+    return { status: error.status, statusText }
+  }
+
+  return null
+}
+
 /**
  * Extracts a human-readable error message from any thrown value.
  *
@@ -83,44 +132,43 @@ export function reportError(
 }
 
 export function handleLoaderError(error: unknown) {
-  // Handle 'data' thrown errors
-  if (typeof error === "object" && error !== null && "status" in error && "statusText" in error) {
-    // Type guard to check if it's a 'data' object
-    if (typeof error.status === "number" && typeof error.statusText === "string") {
-      console.warn(`Loader error: ${error.status} - ${error.statusText}`)
+  // Handle 'data' thrown errors (and real thrown `Response` objects)
+  const thrownStatus = getThrownStatus(error)
+  if (thrownStatus) {
+    const { status, statusText } = thrownStatus
+    console.warn(`Loader error: ${status} - ${statusText}`, error)
 
-      // Customize the user-facing message based on the status code
-      let userMessage: string
-      switch (error.status) {
-        case 400:
-          userMessage = error.statusText
-          break
-        case 401:
-          return redirect("/signin")
-        case 403:
-          userMessage = "U heeft geen rechten om deze actie uit te voeren."
-          break
-        case 404:
-          userMessage = "De gevraagde data kon niet worden gevonden."
-          break
-        // case 500:
-        default: {
-          const errorId = reportError(error, { scope: "loader" })
-          userMessage = `Er is een onverwachte fout opgetreden. Probeer het later opnieuw of neem contact op met Ondersteuning en meldt de volgende foutcode: ${errorId}.`
-          break
-        }
+    // Customize the user-facing message based on the status code
+    let userMessage: string
+    switch (status) {
+      case 400:
+        userMessage = statusText ?? "Ongeldige waarde"
+        break
+      case 401:
+        return redirect("/signin")
+      case 403:
+        userMessage = "U heeft geen rechten om deze actie uit te voeren."
+        break
+      case 404:
+        userMessage = "De gevraagde data kon niet worden gevonden."
+        break
+      // case 500:
+      default: {
+        const errorId = reportError(error, { scope: "loader" })
+        userMessage = `Er is een onverwachte fout opgetreden. Probeer het later opnieuw of neem contact op met Ondersteuning en meldt de volgende foutcode: ${errorId}.`
+        break
       }
-      return data(
-        {
-          warning: error,
-        },
-        { status: error.status, statusText: userMessage },
-      )
     }
+    return data(
+      {
+        warning: error,
+      },
+      { status, statusText: userMessage },
+    )
   }
 
   // Permission denied error
-  if (containsErrorMessage(error, "Principal does not have permission to perform this action")) {
+  if (containsErrorMessage(error, PERMISSION_DENIED_MESSAGE)) {
     console.warn("Permission denied: ", error)
     return data(
       {
@@ -138,7 +186,7 @@ export function handleLoaderError(error: unknown) {
     error instanceof Error &&
     (error.message.startsWith("missing: ") || error.message.startsWith("invalid: "))
   ) {
-    console.warn(error.message)
+    console.warn(error.message, error)
     return data(
       {
         warning: error,
@@ -151,7 +199,7 @@ export function handleLoaderError(error: unknown) {
   }
   // Not found errors
   if (error instanceof Error && error.message.startsWith("not found")) {
-    console.warn(error.message)
+    console.warn(error.message, error)
     return data(
       {
         warning: error,
@@ -183,13 +231,29 @@ export function handleLoaderError(error: unknown) {
  * Recursively checks whether an error or any error in its cause chain
  * contains the given substring in its message.
  */
-function containsErrorMessage(error: unknown, message: string): boolean {
+export function containsErrorMessage(error: unknown, message: string): boolean {
   if (!(error instanceof Error)) return false
   if (error.message.includes(message)) return true
   return containsErrorMessage(error.cause, message)
 }
 
-export function handleActionError(error: unknown) {
+/**
+ * Handles an error thrown/caught inside a route `action`, returning a toast-bearing response for
+ * expected failures (permission denied, validation, not found), or a generic error toast for
+ * anything else.
+ *
+ * Always use `return handleActionError(error)` — never `throw` it. The `dataWithWarning` /
+ * `dataWithError` responses this produces are meant to keep the user on the same page with a
+ * toast notification (and any inline, action-data-driven UI still rendering), not to trigger the
+ * route's `ErrorBoundary`. Throwing it instead would replace the whole page with the generic
+ * error/no-access screen and the user would never see the toast.
+ *
+ * This function is `async` because several branches delegate to `remix-toast`'s
+ * `dataWithWarning` / `dataWithError` (which read/write a flash-message cookie and are themselves
+ * `async`) — but callers don't need to `await` it themselves: returning a `Promise` from an
+ * `async` action function is automatically awaited by the caller.
+ */
+export async function handleActionError(error: unknown) {
   // Spam prevention: inviter exceeded hourly limit
   if (containsErrorMessage(error, "Rate limit exceeded")) {
     console.warn("Invitation rate limit hit:", error)
@@ -217,77 +281,88 @@ export function handleActionError(error: unknown) {
     )
   }
 
-  // Handle 'data' thrown errors
-  if (typeof error === "object" && error !== null && "status" in error && "statusText" in error) {
-    // Type guard to check if it's a 'data' object
-    if (typeof error.status === "number" && typeof error.statusText === "string") {
-      console.warn(`Action error: ${error.status} - ${error.statusText}`)
+  // Handle 'data' thrown errors (and real thrown `Response` objects)
+  const thrownStatus = getThrownStatus(error)
+  if (thrownStatus) {
+    const { status, statusText } = thrownStatus
+    console.warn(`Action error: ${status} - ${statusText}`, error)
 
-      // Customize the user-facing message based on the status code
-      let userMessage: string
-      let dataStatus = "error"
-      switch (error.status) {
-        case 400:
-          userMessage = error.statusText
-          dataStatus = "warning"
-          break
-        case 401:
-          return redirect("/signin")
-        case 403:
-          userMessage = "U heeft geen rechten om deze actie uit te voeren."
-          dataStatus = "warning"
-          break
-        case 404:
-          userMessage = "De gevraagde data kon niet worden gevonden."
-          dataStatus = "warning"
-          break
-        // case 500:
-        default: {
-          const errorId = reportError(error, { scope: "action" })
-          userMessage = `Er is een onverwachte fout opgetreden. Probeer het later opnieuw of neem contact op met Ondersteuning en meldt de volgende foutcode: ${errorId}.`
-          dataStatus = "error"
-          break
-        }
+    let userMessage: string
+    let dataStatus: "error" | "warning"
+    let errorId: string | undefined
+    switch (status) {
+      case 400:
+        userMessage =
+          "Ongeldige invoergegevens. Controleer de ingevoerde gegevens en probeer het opnieuw."
+        dataStatus = "warning"
+        break
+      case 401:
+        return redirect("/signin")
+      case 403:
+        userMessage = "U heeft geen rechten om deze actie uit te voeren."
+        dataStatus = "warning"
+        break
+      case 404:
+        userMessage = "De gevraagde data kon niet worden gevonden."
+        dataStatus = "warning"
+        break
+      case 405:
+        userMessage = "Deze actie is niet toegestaan."
+        dataStatus = "warning"
+        break
+      // case 500:
+      default: {
+        errorId = reportError(error, { scope: "action" })
+        userMessage = `Er is een onverwachte fout opgetreden. Probeer het later opnieuw of neem contact op met Ondersteuning en meldt de volgende foutcode: ${errorId}.`
+        dataStatus = "error"
+        break
       }
-      if (dataStatus === "warning") {
-        return dataWithWarning(
-          {
-            warning: error,
-          },
-          userMessage,
-        )
-      }
-      return dataWithError(
+    }
+    if (dataStatus === "warning") {
+      return dataWithWarning(
         {
           warning: error,
         },
         userMessage,
+        { status },
       )
     }
+    return dataWithError(
+      {
+        warning: error,
+        errorId,
+      },
+      userMessage,
+      { status },
+    )
   }
 
   // Permission denied error
-  if (containsErrorMessage(error, "Principal does not have permission to perform this action")) {
+  if (containsErrorMessage(error, PERMISSION_DENIED_MESSAGE)) {
     console.warn("Permission denied: ", error)
     return dataWithWarning(
       {
         warning: error,
       },
-      "U heeft helaas geen rechten om dit te doen.",
+      { message: "U heeft helaas geen rechten om dit te doen.", status: 403 },
     )
   }
 
-  // Missing or invalid parameters errors
   if (
     error instanceof Error &&
     (error.message.startsWith("missing: ") || error.message.startsWith("invalid: "))
   ) {
-    console.warn(error.message)
-    return dataWithWarning(
+    console.warn(error.message, error)
+    const errorId = reportError(error, { scope: "action" })
+    return dataWithError(
       {
         warning: error,
       },
-      error.message,
+      {
+        message: `Er is helaas iets misgegaan. Vernieuw de pagina en probeer het opnieuw. Blijft dit gebeuren, neem dan contact op met Ondersteuning en meld de volgende foutcode: ${errorId}.`,
+        status: 400,
+        errorId,
+      },
     )
   }
 
@@ -296,7 +371,8 @@ export function handleActionError(error: unknown) {
     scope: "action",
   })
   return dataWithError(
-    error instanceof Error ? error.message : "Unknown error",
+    { warning: error instanceof Error ? error.message : "Unknown error", errorId },
     `Er is helaas iets fout gegaan. Probeer het later opnieuw of neem contact op met Ondersteuning en meldt de volgende foutcode: ${errorId}.`,
+    { status: 500 },
   )
 }
diff --git a/fdm-app/app/lib/form.ts b/fdm-app/app/lib/form.ts
index 9db2c031a..74cc4ccd6 100644
--- a/fdm-app/app/lib/form.ts
+++ b/fdm-app/app/lib/form.ts
@@ -72,6 +72,6 @@ export async function extractFormValuesFromRequest<T extends z.ZodType<unknown>>
 
     return parsedData.data
   } catch (error) {
-    throw handleActionError(error)
+    throw await handleActionError(error)
   }
 }
diff --git a/fdm-app/app/root.tsx b/fdm-app/app/root.tsx
index 1aaa770e3..b0c5a606e 100644
--- a/fdm-app/app/root.tsx
+++ b/fdm-app/app/root.tsx
@@ -1,16 +1,13 @@
 import type { LinksFunction, LoaderFunctionArgs } from "react-router"
 import { withAuditContext } from "@nmi-agro/fdm-core"
-import * as Sentry from "@sentry/react-router"
 import mapLibreStyle from "maplibre-gl/dist/maplibre-gl.css?url"
 import posthog from "posthog-js"
 import { useEffect } from "react"
 import {
   data,
-  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
-  redirect,
   Scripts,
   ScrollRestoration,
   useLoaderData,
@@ -19,7 +16,7 @@ import {
 import { getToast } from "remix-toast"
 import { toast as notify } from "sonner"
 import { Banner } from "~/components/custom/banner"
-import { ErrorBlock } from "~/components/custom/error"
+import { RouteErrorFallback } from "~/components/custom/error"
 import { NavigationProgress } from "~/components/custom/navigation-progress"
 import { Toaster } from "~/components/ui/sonner"
 import { auth } from "~/lib/auth.server"
@@ -138,11 +135,55 @@ export function Layout() {
   // Hook to show the toasts
   useEffect(() => {
     if (toast && toast.type === "error") {
+      const status = typeof toast.status === "number" ? toast.status : null
+      const errorId = typeof toast.errorId === "string" ? toast.errorId : null
+
+      if (clientConfig.analytics.posthog) {
+        posthog.capture("unexpected_error_toast_shown", {
+          status,
+          errorId,
+          page: window.location.pathname,
+        })
+      }
+
       notify.error(toast.message, {
         duration: 30000,
+        action: {
+          label: "Kopieer",
+          onClick: () => {
+            const errorDetails = JSON.stringify(
+              {
+                status,
+                message: toast.message,
+                stacktrace: errorId ? `ErrorId: ${errorId}` : null,
+                page: window.location.pathname,
+                timestamp: new Date().toISOString(),
+              },
+              null,
+              2,
+            )
+            navigator.clipboard
+              .writeText(errorDetails)
+              .then(() => notify.success("Foutmelding gekopieerd naar klembord"))
+              .catch(() =>
+                notify.error(
+                  errorId
+                    ? `Kopiëren niet gelukt. Stuur foutcode ${errorId} op naar Ondersteuning.`
+                    : "Kopiëren niet gelukt. Neem contact op met Ondersteuning.",
+                ),
+              )
+          },
+        },
       })
     }
     if (toast && toast.type === "warning") {
+      const status = typeof toast.status === "number" ? toast.status : null
+      if (status !== null && clientConfig.analytics.posthog) {
+        posthog.capture("client_error_toast_shown", {
+          status,
+          page: window.location.pathname,
+        })
+      }
       notify.warning(toast.message)
     }
     if (toast && toast.type === "success") {
@@ -211,85 +252,13 @@ export default function App() {
 }
 
 /**
- * Renders an error boundary that handles and displays error information based on the provided error.
- *
- * This component distinguishes between route error responses and generic errors:
- * - For route errors:
- *   - Redirects to the signin page if the error status is 401.
- *   - Renders a 404 error block for client errors with status 400, 403, or 404.
- *   - Logs other route errors to the error tracking service and renders an error block reflecting the specific status.
- * - For generic Error instances, it logs the error and renders a 500 error block with the error message and stack trace.
- * - If the error is null, no error UI is rendered.
- * - For any other cases, it logs the error and displays an error block with a 500 status and a generic message.
+ * Renders an error boundary that classifies and displays the current route error. Delegates all
+ * classification to {@link RouteErrorFallback} (redirect for 401, the friendly, generic page for
+ * client errors 400/403/404, or the diagnostic page for anything else, including a `null` error
+ * — this component is also rendered unconditionally inside `Layout` below with `error={null}`).
  *
  * @param error - The error encountered during route processing, either as a route error response or a generic Error.
  */
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  const location = useLocation()
-  const page = location.pathname
-  const timestamp = new Date().toISOString()
-
-  if (isRouteErrorResponse(error)) {
-    // Redirect to signin page if authentication is not provided
-    if (error.status === 401) {
-      // Get the current path the user tried to access
-      const currentPath = location.pathname + location.search + location.hash
-      // Construct the sign-in URL with the redirectTo parameter
-      const signInUrl = `./signin?redirectTo=${encodeURIComponent(currentPath)}`
-      // Throw the redirect response to be caught by React Router
-      throw redirect(signInUrl)
-    }
-
-    const clientErrors = [400, 403, 404]
-    if (clientErrors.includes(error.status)) {
-      return (
-        <ErrorBlock
-          status={404} // Show 404 in case user is not authorized to access page
-          message={error.statusText}
-          stacktrace={error.data}
-          page={page}
-          timestamp={timestamp}
-        />
-      )
-    }
-
-    // Server-side errors are already captured in Sentry via handleError / reportError.
-    // No need to capture again client-side.
-    return (
-      <ErrorBlock
-        status={error.status}
-        message={error.statusText}
-        stacktrace={error.data}
-        page={page}
-        timestamp={timestamp}
-      />
-    )
-  }
-  if (error instanceof Error) {
-    // Client-side JS error — not captured server-side, so capture here.
-    Sentry.captureException(error)
-    return (
-      <ErrorBlock
-        status={500}
-        message={error.message}
-        stacktrace={error.stack}
-        page={page}
-        timestamp={timestamp}
-      />
-    )
-  }
-  if (error === null) {
-    return null
-  }
-
-  Sentry.captureException(error)
-  return (
-    <ErrorBlock
-      status={500}
-      message="Unknown Error"
-      stacktrace={null}
-      page={page}
-      timestamp={timestamp}
-    />
-  )
+  return <RouteErrorFallback error={error} />
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.atlas.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.atlas.tsx
index ad115de41..26205c307 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.atlas.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.atlas.tsx
@@ -15,7 +15,7 @@ import { Skeleton } from "~/components/ui/skeleton"
 import { getMapStyle } from "~/integrations/map"
 import { getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
-import { handleActionError } from "~/lib/error"
+import { handleActionError, handleLoaderError } from "~/lib/error"
 import { fdm } from "~/lib/fdm.server"
 
 export const meta: MetaFunction = () => {
@@ -90,7 +90,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       mapStyle: mapStyle,
     }
   } catch (error) {
-    throw handleActionError(error)
+    throw handleLoaderError(error)
   }
 }
 
@@ -175,6 +175,6 @@ export async function action({ params }: ActionFunctionArgs) {
       throw new Error("Missing field ID.")
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.$a_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.$a_id.tsx
index 10079911b..fd8e7dc1f 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.$a_id.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.$a_id.tsx
@@ -262,6 +262,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "BodemConditieScore is verwijderd!",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs._index.tsx
index 832156382..02ba29cfd 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs._index.tsx
@@ -280,6 +280,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "BodemConditieScore is verwijderd!",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.new.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.new.tsx
index 0fd547233..f53cbadda 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.new.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.bcs.new.tsx
@@ -265,6 +265,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
     // arbitrary objects. Orphaned GCS uploads from failed saves are acceptable; a
     // separate cleanup job can remove them.
 
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx
index eb91cdf2b..d31a27091 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx
@@ -303,6 +303,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       )
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.new.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.new.tsx
index 5286798f6..de405445c 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.new.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.harvest.new.tsx
@@ -248,7 +248,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: `${term} succesvol toegevoegd! 🎉`,
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.tsx
index 8060f6a6c..48a9dd0ef 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.$b_lu.tsx
@@ -267,6 +267,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       )
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.tsx
index 0c954207a..6fdd54ed7 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.cultivation.tsx
@@ -284,6 +284,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       })
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.fertilizer._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.fertilizer._index.tsx
index 105391049..87a79ed59 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.fertilizer._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.fertilizer._index.tsx
@@ -427,6 +427,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       })
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil._index.tsx
index 6293741c4..4e655305e 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil._index.tsx
@@ -261,6 +261,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       statusText: "Method not allowed",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.$a_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.$a_id.tsx
index 87e443b29..45de3afd9 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.$a_id.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.$a_id.tsx
@@ -214,6 +214,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "Bodemanalyse is bijgewerkt! 🎉",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.$analysis_type.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.$analysis_type.tsx
index f6c98aec2..0ed731837 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.$analysis_type.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.$analysis_type.tsx
@@ -202,6 +202,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "Bodemanalyse is toegevoegd! 🎉",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.upload.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.upload.tsx
index c816229da..1d3d35a66 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.upload.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.soil.analysis.new.upload.tsx
@@ -244,6 +244,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       )
     }
 
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsx
index 47815509a..2067b0486 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsx
@@ -604,6 +604,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
     if (error instanceof z.ZodError) {
       return dataWithError(null, "Invoer is ongeldig. Controleer het formulier.")
     }
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new._index.tsx
index f499f4869..36e7302ad 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new._index.tsx
@@ -533,6 +533,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       },
     )
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.$b_id._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.$b_id._index.tsx
index 86cb40f93..92319e36f 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.$b_id._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.$b_id._index.tsx
@@ -241,6 +241,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
     throw new Error("invalid method")
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.tsx
index c456f6dcc..bb25c7b07 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.tsx
@@ -423,6 +423,6 @@ export async function action({ request }: ActionFunctionArgs) {
       message: "Bufferstrook status bijgewerkt.",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures.$b_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures.$b_id.tsx
index 62cced845..5f2308977 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures.$b_id.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures.$b_id.tsx
@@ -293,7 +293,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
     return dataWithError("unknown intent", "Onbekende actie.")
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures._index.tsx
index ba39544a2..3a9e22428 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.measures._index.tsx
@@ -324,7 +324,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
     return dataWithError("unknown intent", "Onbekende actie.")
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_fertilizer.$p_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_fertilizer.$p_id.tsx
index 7c0007bcf..ab334239e 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_fertilizer.$p_id.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_fertilizer.$p_id.tsx
@@ -162,6 +162,6 @@ export async function action({ request }: Route.ActionArgs) {
 
     throw Error(`invalid intent: ${formData.intent}`)
   } catch (e) {
-    throw handleActionError(e)
+    return handleActionError(e)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_harvest.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_harvest.tsx
index 0e6591d83..19cd1e1a5 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_harvest.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.modify_harvest.tsx
@@ -361,6 +361,6 @@ export async function action({ request, params }: Route.ActionArgs) {
       statusText: "Method Not Allowed",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.tsx
index e08b0fe0b..645fb8396 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.tsx
@@ -515,6 +515,6 @@ export async function action({ params, request }: Route.ActionArgs) {
       message: "Succesvol bijgewerkt.",
     })
   } catch (e) {
-    throw handleActionError(e)
+    return handleActionError(e)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.fertilizer._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.fertilizer._index.tsx
index 1b2e3d06a..2fbf6078f 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.fertilizer._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.fertilizer._index.tsx
@@ -569,6 +569,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
     if (error instanceof z.ZodError) {
       return dataWithError(null, "Invoer is ongeldig. Controleer het formulier.")
     }
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.harvest._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.harvest._index.tsx
index e42c58417..8274a7e4c 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.harvest._index.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation_.harvest._index.tsx
@@ -900,7 +900,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     if (error instanceof z.ZodError) {
       return dataWithWarning(null, "Invoer is ongeldig. Controleer het formulier.")
     }
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.fertilizers.$p_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.fertilizers.$p_id.tsx
index 04c75eebe..8fd8e7ec0 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.fertilizers.$p_id.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.fertilizers.$p_id.tsx
@@ -238,6 +238,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: `${formValues.p_name_nl} is toegevoegd! 🎉`,
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.fertilizers.new.custom.tsx b/fdm-app/app/routes/farm.$b_id_farm.fertilizers.new.custom.tsx
index a71b2ccbd..3da238f6f 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.fertilizers.new.custom.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.fertilizers.new.custom.tsx
@@ -155,6 +155,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       },
     )
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.$b_id_farm.settings.derogation.tsx b/fdm-app/app/routes/farm.$b_id_farm.settings.derogation.tsx
index e1adf2722..5c1757708 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.settings.derogation.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.settings.derogation.tsx
@@ -71,7 +71,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     }
     return dataWithError({}, `Het is niet gelukt derogatie voor ${year} aan te passen.`)
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.settings.grazing-intention.tsx b/fdm-app/app/routes/farm.$b_id_farm.settings.grazing-intention.tsx
index bd7b97d49..c0be8fd1c 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.settings.grazing-intention.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.settings.grazing-intention.tsx
@@ -65,7 +65,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     }
     return dataWithSuccess({}, `Beweiding voor ${year} ingeschakeld.`)
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsx b/fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsx
index ab52a32fa..b761135fc 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsx
@@ -281,7 +281,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: `${formValues.b_name_farm} is bijgewerkt! 🎉`,
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
 
diff --git a/fdm-app/app/routes/farm.$b_id_farm.tsx b/fdm-app/app/routes/farm.$b_id_farm.tsx
index 9109ff7e4..4e2ed1ad8 100644
--- a/fdm-app/app/routes/farm.$b_id_farm.tsx
+++ b/fdm-app/app/routes/farm.$b_id_farm.tsx
@@ -2,7 +2,7 @@ import { getFarm } from "@nmi-agro/fdm-core"
 import { data, type LoaderFunctionArgs, type MetaFunction } from "react-router"
 import { getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
-import { handleActionError } from "~/lib/error"
+import { handleLoaderError } from "~/lib/error"
 import { fdm } from "~/lib/fdm.server"
 
 // Meta
@@ -51,6 +51,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       session,
     }
   } catch (error) {
-    throw handleActionError(error)
+    throw handleLoaderError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx
index 12be5c19f..79e9cf10d 100644
--- a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx
+++ b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx
@@ -477,6 +477,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "Percelen zijn toegevoegd! 🎉",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
index 098cdd9c4..19474251a 100644
--- a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
+++ b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
@@ -255,6 +255,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       throw new Error("invalid method")
     }
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.$analysis_type.tsx b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.$analysis_type.tsx
index 217691a03..e41fae869 100644
--- a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.$analysis_type.tsx
+++ b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.$analysis_type.tsx
@@ -189,6 +189,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       message: "Bodemanalyse is toegevoegd! 🎉",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.upload.tsx b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.upload.tsx
index d9cbdc057..d2560e615 100644
--- a/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.upload.tsx
+++ b/fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id.soil.analysis.upload.tsx
@@ -233,6 +233,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
       )
     }
 
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.create._index.tsx b/fdm-app/app/routes/farm.create._index.tsx
index c9fcff96c..2e3377527 100644
--- a/fdm-app/app/routes/farm.create._index.tsx
+++ b/fdm-app/app/routes/farm.create._index.tsx
@@ -617,6 +617,6 @@ export async function action({ request }: ActionFunctionArgs) {
       message: "Bedrijf is toegevoegd! 🎉 Selecteer nu de importmethode.",
     })
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/farm.tsx b/fdm-app/app/routes/farm.tsx
index 0a91c73a6..aa3ecf303 100644
--- a/fdm-app/app/routes/farm.tsx
+++ b/fdm-app/app/routes/farm.tsx
@@ -8,21 +8,25 @@ import {
 } from "@nmi-agro/fdm-helpdesk"
 import posthog from "posthog-js"
 import { useEffect } from "react"
-import { Outlet, redirect, useLoaderData, useMatches } from "react-router"
+import { Outlet, redirect, useLoaderData, useMatches, useParams } from "react-router"
 import { SidebarApps } from "~/components/blocks/sidebar/apps"
 import { SidebarFarm, SidebarLabs } from "~/components/blocks/sidebar/farm"
 import { SidebarSupport } from "~/components/blocks/sidebar/support"
 import { SidebarTitle } from "~/components/blocks/sidebar/title"
 import { SidebarUser } from "~/components/blocks/sidebar/user"
+import { ClientErrorPage, RouteErrorFallback } from "~/components/custom/error"
 import { Sidebar, SidebarContent, SidebarInset, SidebarProvider } from "~/components/ui/sidebar"
 import { checkSession, getSession } from "~/lib/auth.server"
 import { getTimeframe } from "~/lib/calendar"
 import { clientConfig } from "~/lib/config"
-import { handleLoaderError } from "~/lib/error"
+import { containsErrorMessage, handleLoaderError, PERMISSION_DENIED_MESSAGE } from "~/lib/error"
 import { fdm } from "~/lib/fdm.server"
 import { useCalendarStore } from "~/store/calendar"
 import { useFarmStore } from "~/store/farm"
 import { useSelectedFieldStore } from "~/store/selected-field"
+import type { Route } from "./+types/farm"
+
+type FarmLoaderData = ReturnType<typeof useLoaderData<typeof loader>>
 
 export const meta: MetaFunction = () => {
   return [
@@ -41,6 +45,13 @@ export const meta: MetaFunction = () => {
  * If the session does not contain a user, the function redirects to the "/signin" route.
  * Any errors encountered during session retrieval are processed by the designated error handler.
  *
+ * If `b_id_farm` is present but doesn't resolve to a farm the principal can access (whether it
+ * doesn't exist or the principal simply lacks permission — both look identical to the caller),
+ * this does NOT throw: it returns `farmAccessDenied: true` instead, so the layout can keep the
+ * sidebar/app shell in place and show a friendly, generic message in the content pane rather
+ * than losing the entire shell to the root error page. Any other, unexpected error still throws
+ * normally.
+ *
  * @param request - The HTTP request used for obtaining session data.
  * @returns An object with a "user" property when a valid session is found, and a "farm" property when b_id_farm is found in the URL.
  *
@@ -56,22 +67,35 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
       return sessionCheckResponse
     }
 
-    const farm =
-      params.b_id_farm && params.b_id_farm !== "undefined"
-        ? await getFarm(fdm, session.principal_id, params.b_id_farm)
-        : undefined
+    const hasFarmParam = Boolean(params.b_id_farm && params.b_id_farm !== "undefined")
 
-    // Minimal farm list for the sidebar's farm picker dialog; only needed when no farm is selected yet
-    const isFarmSelected = params.b_id_farm && params.b_id_farm !== "undefined"
-    const farmOptions = isFarmSelected
-      ? []
-      : (await getFarms(fdm, session.principal_id)).map((f) => ({
-          b_id_farm: f.b_id_farm,
-          b_name_farm: f.b_name_farm,
-        }))
+    let farm: Awaited<ReturnType<typeof getFarm>> | undefined
+    let farmAccessDenied = false
+    if (hasFarmParam && params.b_id_farm) {
+      try {
+        farm = await getFarm(fdm, session.principal_id, params.b_id_farm)
+      } catch (err) {
+        if (containsErrorMessage(err, PERMISSION_DENIED_MESSAGE)) {
+          farmAccessDenied = true
+        } else {
+          throw err
+        }
+      }
+    }
+
+    // Minimal farm list for the sidebar's farm picker dialog; needed whenever no valid farm is
+    // selected — either none was requested, or the requested one couldn't be accessed — so the
+    // user always has a real way to get back into the app.
+    const farmOptions =
+      !hasFarmParam || farmAccessDenied
+        ? (await getFarms(fdm, session.principal_id)).map((f) => ({
+            b_id_farm: f.b_id_farm,
+            b_name_farm: f.b_name_farm,
+          }))
+        : []
 
     const farmWritePermission =
-      params.b_id_farm && params.b_id_farm !== "undefined"
+      hasFarmParam && !farmAccessDenied && params.b_id_farm
         ? await checkPermission(
             fdm,
             "farm",
@@ -86,7 +110,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
     const timeframe = getTimeframe(params)
 
     const fields =
-      params.b_id_farm && params.b_id_farm !== "undefined"
+      hasFarmParam && !farmAccessDenied && params.b_id_farm
         ? await getFields(fdm, session.principal_id, params.b_id_farm, timeframe)
         : []
 
@@ -124,6 +148,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
     // Return user information from loader
     return {
       farm: farm,
+      farmAccessDenied: farmAccessDenied,
       farmOptions: farmOptions,
       user: session.user,
       userName: session.userName,
@@ -147,6 +172,82 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   }
 }
 
+/**
+ * Renders the farm app shell: sidebar and a content pane. Shared between the normal route
+ * render, the in-loader "farm inaccessible" state, and this route's `ErrorBoundary` for
+ * descendant-route errors, so none of those cases ever lose the sidebar — only the content
+ * pane changes.
+ */
+function FarmShell({
+  loaderData,
+  activeFieldId,
+  fieldWritePermission,
+  children,
+}: {
+  loaderData: FarmLoaderData
+  activeFieldId: string | undefined
+  fieldWritePermission: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarTitle />
+        <SidebarContent>
+          <SidebarFarm
+            farm={loaderData.farm}
+            farms={loaderData.farmOptions}
+            fields={loaderData.fieldOptions}
+            activeFieldId={activeFieldId}
+            fieldWritePermission={fieldWritePermission}
+          />
+          <SidebarApps farms={loaderData.farmOptions} />
+          <SidebarLabs />
+        </SidebarContent>
+        <SidebarSupport
+          name={loaderData.userName}
+          email={loaderData.user.email}
+          hasNotification={loaderData.hasNotification}
+        />
+        <SidebarUser
+          name={loaderData.userName}
+          email={loaderData.user.email}
+          image={loaderData.user.image}
+          avatarInitials={loaderData.initials}
+          userName={loaderData.userName}
+        />
+      </Sidebar>
+      <SidebarInset className="min-w-0">{children}</SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+/**
+ * Keeps the sidebar's farm/calendar context (zustand stores) in sync with the current URL. Used
+ * by both the normal render and the `ErrorBoundary` below — a descendant-route error (e.g. an
+ * invalid field id) must not leave the sidebar showing a stale or "no farm selected" state when
+ * the farm itself is perfectly valid.
+ */
+function useFarmContextSync(farmId: string | undefined, calendar: string | undefined) {
+  const setFarmId = useFarmStore((state) => state.setFarmId)
+  useEffect(() => {
+    setFarmId(farmId)
+  }, [farmId, setFarmId])
+
+  const setCalendar = useCalendarStore((state) => state.setCalendar)
+  useEffect(() => {
+    if (calendar !== undefined) {
+      setCalendar(calendar)
+    }
+  }, [calendar, setCalendar])
+
+  const syncContext = useSelectedFieldStore((state) => state.syncContext)
+  useEffect(() => {
+    // Expire stale fields across farm or calendar change
+    syncContext(farmId, calendar)
+  }, [farmId, calendar, syncContext])
+}
+
 /**
  * Renders the main application layout.
  *
@@ -159,30 +260,17 @@ export default function App() {
     (match) => match.pathname.startsWith("/farm/") && match.params.b_id_farm,
   )
   const initialFarmId = farmMatch?.params.b_id_farm as string | undefined
-  const setFarmId = useFarmStore((state) => state.setFarmId)
-
-  useEffect(() => {
-    setFarmId(initialFarmId)
-  }, [initialFarmId, setFarmId])
 
   const calendarMatch = matches.find(
     (match) => match.pathname.startsWith("/farm/") && match.params.calendar,
   )
   const initialCalendar = calendarMatch?.params.calendar as string | undefined
-  const setCalendar = useCalendarStore((state) => state.setCalendar)
 
-  useEffect(() => {
-    if (initialCalendar !== undefined) {
-      setCalendar(initialCalendar)
-    }
-  }, [initialCalendar, setCalendar])
-
-  const { b_id: storedFieldId, setSelectedField, syncContext } = useSelectedFieldStore()
+  // When the requested farm couldn't be accessed, don't leave the store pointing at it — the
+  // sidebar should fall back to its normal "no farm selected" state instead of a broken one.
+  useFarmContextSync(loaderData.farmAccessDenied ? undefined : initialFarmId, initialCalendar)
 
-  // Expire stale fields across farm or calendar change
-  useEffect(() => {
-    syncContext(initialFarmId, initialCalendar)
-  }, [initialFarmId, initialCalendar, syncContext])
+  const { b_id: storedFieldId, setSelectedField } = useSelectedFieldStore()
 
   // Sync store from any route scoped to a specific field (b_id), not just /field/*, so pages
   // like nutrient advice, norms, balance, indicators, and measures also keep the sidebar's
@@ -229,36 +317,46 @@ export default function App() {
   }, [loaderData.farm?.b_id_farm, loaderData.farm?.b_name_farm])
 
   return (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarTitle />
-        <SidebarContent>
-          <SidebarFarm
-            farm={loaderData.farm}
-            farms={loaderData.farmOptions}
-            fields={loaderData.fieldOptions}
-            activeFieldId={activeFieldId}
-            fieldWritePermission={fieldWritePermission}
-          />
-          <SidebarApps farms={loaderData.farmOptions} />
-          <SidebarLabs />
-        </SidebarContent>
-        <SidebarSupport
-          name={loaderData.userName}
-          email={loaderData.user.email}
-          hasNotification={loaderData.hasNotification}
-        />
-        <SidebarUser
-          name={loaderData.userName}
-          email={loaderData.user.email}
-          image={loaderData.user.image}
-          avatarInitials={loaderData.initials}
-          userName={loaderData.userName}
-        />
-      </Sidebar>
-      <SidebarInset className="min-w-0">
-        <Outlet />
-      </SidebarInset>
-    </SidebarProvider>
+    <FarmShell
+      loaderData={loaderData}
+      activeFieldId={activeFieldId}
+      fieldWritePermission={fieldWritePermission}
+    >
+      {loaderData.farmAccessDenied ? <ClientErrorPage status={403} /> : <Outlet />}
+    </FarmShell>
+  )
+}
+
+/**
+ * Renders when a descendant route throws (e.g. a field, cultivation, or other resource that
+ * doesn't exist or can't be accessed — or a genuine component bug). This route's own loader
+ * already succeeded — the requested farm itself is fine — so the sidebar shell can render
+ * normally via {@link FarmShell}; only the content pane is replaced with the classified
+ * {@link RouteErrorFallback} (the friendly page for an expected client error, or the diagnostic
+ * page for a real bug). The app never appears to have been "left".
+ *
+ * The farm/calendar context is synced from `loaderData.farm` and the URL just like in {@link App},
+ * so e.g. an invalid field id under a perfectly valid farm still shows that farm as active in the
+ * sidebar instead of falling back to "no farm selected".
+ *
+ * If instead this route's *own* loader threw (an unexpected error, not the handled
+ * `farmAccessDenied` case), `useLoaderData()` has nothing to return — there's no session/farm
+ * data to build the sidebar from, so fall back to the bare, shell-less fallback rather than crash.
+ */
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const loaderData = useLoaderData<typeof loader>() as FarmLoaderData | undefined
+  const params = useParams()
+  const calendar = params.calendar
+
+  useFarmContextSync(loaderData?.farm?.b_id_farm, calendar)
+
+  if (!loaderData) {
+    return <RouteErrorFallback error={error} />
+  }
+
+  return (
+    <FarmShell loaderData={loaderData} activeFieldId={undefined} fieldWritePermission={false}>
+      <RouteErrorFallback error={error} />
+    </FarmShell>
   )
 }
diff --git a/fdm-app/app/routes/logout.tsx b/fdm-app/app/routes/logout.tsx
index 2662a6cbc..74a188a77 100644
--- a/fdm-app/app/routes/logout.tsx
+++ b/fdm-app/app/routes/logout.tsx
@@ -29,6 +29,6 @@ export async function action({ request }: ActionFunctionArgs) {
     })
     return redirect("/signin")
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/organization.$slug.members.tsx b/fdm-app/app/routes/organization.$slug.members.tsx
index 01465de1b..e113e3575 100644
--- a/fdm-app/app/routes/organization.$slug.members.tsx
+++ b/fdm-app/app/routes/organization.$slug.members.tsx
@@ -369,7 +369,10 @@ const FormSchema = z.object({
 export async function action({ request, params }: Route.ActionArgs) {
   try {
     if (!params.slug) {
-      throw handleActionError("not found: organization")
+      throw data("not found: organization", {
+        status: 404,
+        statusText: "not found: organization",
+      })
     }
 
     const session = await getSession(request)
@@ -399,7 +402,10 @@ export async function action({ request, params }: Route.ActionArgs) {
     })
     const organization = organizations.find((org) => org.slug === params.slug)
     if (!organization) {
-      throw handleActionError("not found: organization")
+      throw data("not found: organization", {
+        status: 404,
+        statusText: "not found: organization",
+      })
     }
     const organizationId = organization.id
     const organizationName = organization.name
@@ -536,6 +542,6 @@ export async function action({ request, params }: Route.ActionArgs) {
         }
       }
     }
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/organization.$slug.settings.tsx b/fdm-app/app/routes/organization.$slug.settings.tsx
index a1797d0a0..4d204ad95 100644
--- a/fdm-app/app/routes/organization.$slug.settings.tsx
+++ b/fdm-app/app/routes/organization.$slug.settings.tsx
@@ -320,6 +320,6 @@ export async function action({ params, request }: Route.ActionArgs) {
       )
     }
 
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/organization._index.tsx b/fdm-app/app/routes/organization._index.tsx
index 2cba32974..39d7566f0 100644
--- a/fdm-app/app/routes/organization._index.tsx
+++ b/fdm-app/app/routes/organization._index.tsx
@@ -166,6 +166,6 @@ export async function action({ request }: Route.ActionArgs) {
     }
     throw new Error("invalid intent")
   } catch (error) {
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/organization.new.tsx b/fdm-app/app/routes/organization.new.tsx
index 75fedb524..c705ed283 100644
--- a/fdm-app/app/routes/organization.new.tsx
+++ b/fdm-app/app/routes/organization.new.tsx
@@ -1,7 +1,7 @@
 import { FileUpload, parseFormData } from "@remix-run/form-data-parser"
 import imageSize from "image-size"
 import crypto from "node:crypto"
-import { dataWithError, redirectWithSuccess } from "remix-toast"
+import { redirectWithSuccess } from "remix-toast"
 import z from "zod"
 import { FarmTitle } from "~/components/blocks/farm/farm-title"
 import { OrganizationSettingsForm } from "~/components/blocks/organization/form"
@@ -177,16 +177,6 @@ export async function action({ request }: Route.ActionArgs) {
       message: `Organisatie ${formValues.name} is aangemaakt! 🎉`,
     })
   } catch (error) {
-    if (
-      error &&
-      (error as { body?: { code?: string } }).body?.code === "ORGANIZATION_SLUG_ALREADY_TAKEN"
-    ) {
-      return dataWithError(
-        null,
-        "Naam voor organisatie is niet meer beschikbaar. Kies een andere naam",
-      )
-    }
-
-    throw handleActionError(error)
+    return handleActionError(error)
   }
 }
diff --git a/fdm-app/app/routes/organization.tsx b/fdm-app/app/routes/organization.tsx
index 9127d4b5f..9643ec75a 100644
--- a/fdm-app/app/routes/organization.tsx
+++ b/fdm-app/app/routes/organization.tsx
@@ -15,11 +15,15 @@ import { SidebarOrganizationApps } from "~/components/blocks/sidebar/organizatio
 import { SidebarSupport } from "~/components/blocks/sidebar/support"
 import { SidebarTitle } from "~/components/blocks/sidebar/title"
 import { SidebarUser } from "~/components/blocks/sidebar/user"
+import { RouteErrorFallback } from "~/components/custom/error"
 import { Sidebar, SidebarContent, SidebarInset, SidebarProvider } from "~/components/ui/sidebar"
 import { auth, checkSession, getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
 import { handleLoaderError } from "~/lib/error"
 import { fdm } from "~/lib/fdm.server"
+import type { Route } from "./+types/organization"
+
+type OrganizationLoaderData = ReturnType<typeof useLoaderData<typeof loader>>
 
 /**
  * Retrieves the session from the HTTP request and returns user information if available.
@@ -112,46 +116,28 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 }
 
 /**
- * Renders the main application layout.
- *
- * This component retrieves user data from the loader using React Router's useLoaderData hook and passes it to the SidebarApp component within a SidebarProvider context. It also renders an Outlet to display nested routes.
+ * Renders the organization app shell: sidebar, header, and a content pane. Shared between the
+ * normal route render (`<Outlet />` in the content pane) and this route's `ErrorBoundary` (a
+ * friendly `<ClientErrorPage />` in the content pane) so a descendant route error never leaves
+ * the user with a bare, out-of-app-feeling page — the sidebar and header stay in place.
  */
-export default function App() {
-  const loaderData = useLoaderData<typeof loader>()
-
+function OrganizationShell({
+  loaderData,
+  children,
+}: {
+  loaderData: OrganizationLoaderData
+  children: React.ReactNode
+}) {
   const organization = loaderData.organizations.find(
     (org) => org.slug === loaderData.selectedOrganizationSlug,
   )
 
-  // Identify user if PostHog is configured
-  useEffect(() => {
-    if (clientConfig.analytics.posthog && loaderData.user) {
-      posthog.identify(loaderData.user.id, {
-        id: loaderData.user.id,
-        email: loaderData.user.email,
-        name: loaderData.user.name,
-      })
-    }
-  }, [loaderData.user])
-
-  // Register organization group so org-level dashboards aggregate events
-  useEffect(() => {
-    if (clientConfig.analytics.posthog && organization) {
-      posthog.group("organization", organization.slug, {
-        name: organization.name,
-      })
-    }
-  }, [loaderData.selectedOrganizationSlug, organization?.name])
-
   return (
     <SidebarProvider>
       <Sidebar>
         <SidebarTitle />
         <SidebarContent>
-          <SidebarOrganization
-            organization={organization}
-            roles={loaderData.selectedOrganizationRoles}
-          />
+          <SidebarOrganization organization={organization} roles={loaderData.selectedOrganizationRoles} />
           <SidebarOrganizationApps />
         </SidebarContent>
         <SidebarSupport
@@ -182,8 +168,71 @@ export default function App() {
             organizationOptions={loaderData.organizations}
           />
         </Header>
-        <Outlet />
+        {children}
       </SidebarInset>
     </SidebarProvider>
   )
 }
+
+/**
+ * Renders the main application layout.
+ *
+ * This component retrieves user data from the loader using React Router's useLoaderData hook and passes it to the SidebarApp component within a SidebarProvider context. It also renders an Outlet to display nested routes.
+ */
+export default function App() {
+  const loaderData = useLoaderData<typeof loader>()
+
+  const organization = loaderData.organizations.find(
+    (org) => org.slug === loaderData.selectedOrganizationSlug,
+  )
+
+  // Identify user if PostHog is configured
+  useEffect(() => {
+    if (clientConfig.analytics.posthog && loaderData.user) {
+      posthog.identify(loaderData.user.id, {
+        id: loaderData.user.id,
+        email: loaderData.user.email,
+        name: loaderData.user.name,
+      })
+    }
+  }, [loaderData.user])
+
+  // Register organization group so org-level dashboards aggregate events
+  useEffect(() => {
+    if (clientConfig.analytics.posthog && organization) {
+      posthog.group("organization", organization.slug, {
+        name: organization.name,
+      })
+    }
+  }, [loaderData.selectedOrganizationSlug, organization?.name])
+
+  return (
+    <OrganizationShell loaderData={loaderData}>
+      <Outlet />
+    </OrganizationShell>
+  )
+}
+
+/**
+ * Renders when a descendant route throws (e.g. a farm/settings page the user can't access, a
+ * resource that doesn't exist, or a genuine component bug). This route's own loader already
+ * succeeded, so the sidebar/header shell can render normally via {@link OrganizationShell}; only
+ * the content pane is replaced with the classified {@link RouteErrorFallback} — the app never
+ * appears to have been "left".
+ *
+ * If instead this route's *own* loader threw, `useLoaderData()` has nothing to return — fall
+ * back to the bare, shell-less fallback rather than crash on undefined loader data.
+ */
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const loaderData = useLoaderData<typeof loader>() as OrganizationLoaderData | undefined
+
+  if (!loaderData) {
+    return <RouteErrorFallback error={error} />
+  }
+
+  return (
+    <OrganizationShell loaderData={loaderData}>
+      <RouteErrorFallback error={error} />
+    </OrganizationShell>
+  )
+}
diff --git a/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx b/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
index 65b46f569..cc87254e8 100644
--- a/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
+++ b/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
@@ -442,16 +442,21 @@ export async function action({ params, request }: Args) {
       })
     }
   } catch (err) {
-    // extractFormValuesFromRequest calls handleActionError itself, so if that is detected to be the case,
-    // return the response returned from it directly.
-    if (err instanceof Promise) {
-      const awaited = await (err as Promise<any>).catch(() => {})
-      if (awaited?.type === "DataWithResponseInit") {
-        return awaited
-      }
+    // extractFormValuesFromRequest awaits handleActionError before throwing (see
+    // fdm-app/app/lib/form.ts), so `err` here is already a resolved `DataWithResponseInit`
+    // toast-bearing response, not an Error. Return it directly instead of re-classifying it
+    // through handleActionError, which would overwrite its specific validation message with a
+    // generic one.
+    if (
+      typeof err === "object" &&
+      err !== null &&
+      "type" in err &&
+      (err as { type: unknown }).type === "DataWithResponseInit"
+    ) {
+      return err
     }
 
-    throw handleActionError(err)
+    return handleActionError(err)
   }
 }
 
diff --git a/fdm-app/app/routes/support.new.tsx b/fdm-app/app/routes/support.new.tsx
index f0bc8c22f..ab31faf62 100644
--- a/fdm-app/app/routes/support.new.tsx
+++ b/fdm-app/app/routes/support.new.tsx
@@ -127,7 +127,7 @@ export async function action({ request }: Route.ActionArgs) {
       "We hebben uw vraag ontvangen. Een collega neemt binnenkort contact met u op.",
     )
   } catch (err) {
-    throw handleActionError(err)
+    return handleActionError(err)
   }
 }
 
diff --git a/fdm-app/app/routes/support.settings.agents.tsx b/fdm-app/app/routes/support.settings.agents.tsx
index 92c5bd73c..d39096d9a 100644
--- a/fdm-app/app/routes/support.settings.agents.tsx
+++ b/fdm-app/app/routes/support.settings.agents.tsx
@@ -173,7 +173,7 @@ export async function action({ request }: Route.ActionArgs) {
       )
     }
   } catch (err) {
-    throw handleActionError(err)
+    return handleActionError(err)
   }
 }
 
diff --git a/fdm-app/app/routes/support.settings.blocked-emails.tsx b/fdm-app/app/routes/support.settings.blocked-emails.tsx
index cce35cf6e..f222dd3ef 100644
--- a/fdm-app/app/routes/support.settings.blocked-emails.tsx
+++ b/fdm-app/app/routes/support.settings.blocked-emails.tsx
@@ -108,7 +108,7 @@ export async function action({ request }: Route.ActionArgs) {
       })
     }
   } catch (err) {
-    throw handleActionError(err)
+    return handleActionError(err)
   }
 }
 
diff --git a/fdm-app/app/routes/support.settings.tags.tsx b/fdm-app/app/routes/support.settings.tags.tsx
index e564ae3dd..136d86a59 100644
--- a/fdm-app/app/routes/support.settings.tags.tsx
+++ b/fdm-app/app/routes/support.settings.tags.tsx
@@ -143,7 +143,7 @@ export async function action({ request }: Route.ActionArgs) {
       })
     }
   } catch (err) {
-    throw handleActionError(err)
+    return handleActionError(err)
   }
 }
 
diff --git a/fdm-app/app/routes/support.tsx b/fdm-app/app/routes/support.tsx
index 62d3faed8..c845c06ab 100644
--- a/fdm-app/app/routes/support.tsx
+++ b/fdm-app/app/routes/support.tsx
@@ -13,6 +13,7 @@ import { SidebarAdminHelpdesk } from "~/components/blocks/sidebar/admin-helpdesk
 import { SidebarHelpdesk } from "~/components/blocks/sidebar/helpdesk"
 import { SidebarTitle } from "~/components/blocks/sidebar/title"
 import { SidebarUser } from "~/components/blocks/sidebar/user"
+import { RouteErrorFallback } from "~/components/custom/error"
 import { Sidebar, SidebarContent, SidebarInset, SidebarProvider } from "~/components/ui/sidebar"
 import { checkSession, getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
@@ -20,6 +21,8 @@ import { handleLoaderError } from "~/lib/error"
 import { fdm } from "~/lib/fdm.server"
 import type { Route } from "./+types/support"
 
+type SupportLoaderData = ReturnType<typeof useLoaderData<typeof loader>>
+
 /**
  * Retrieves the session from the HTTP request and returns user information if available.
  *
@@ -84,24 +87,18 @@ export async function loader({ request }: Route.LoaderArgs) {
 }
 
 /**
- * Renders the main application layout.
- *
- * This component retrieves user data from the loader using React Router's useLoaderData hook and passes it to the SidebarApp component within a SidebarProvider context. It also renders an Outlet to display nested routes.
+ * Renders the support/helpdesk app shell: sidebar, header, and a content pane. Shared between
+ * the normal route render and this route's `ErrorBoundary`, so a descendant route error (e.g. a
+ * ticket that doesn't exist or can't be accessed) never leaves the user with a bare,
+ * out-of-app-feeling page — the sidebar and header stay in place.
  */
-export default function App() {
-  const loaderData = useLoaderData<typeof loader>()
-
-  // Identify user if PostHog is configured
-  useEffect(() => {
-    if (clientConfig.analytics.posthog && loaderData.user) {
-      posthog.identify(loaderData.user.id, {
-        id: loaderData.user.id,
-        email: loaderData.user.email,
-        name: loaderData.user.name,
-      })
-    }
-  }, [loaderData.user])
-
+function SupportShell({
+  loaderData,
+  children,
+}: {
+  loaderData: SupportLoaderData
+  children: React.ReactNode
+}) {
   return (
     <SidebarProvider>
       <Sidebar>
@@ -124,14 +121,64 @@ export default function App() {
           userName={loaderData.userName}
         />
       </Sidebar>
-      <SidebarInset className="flex flex-col">
+      <SidebarInset className="flex flex-col h-screen">
         <Header action={undefined}>
           <HeaderHelpdesk />
         </Header>
-        <div className="grow">
-          <Outlet />
-        </div>
+        {/* min-h-0 lets this flex child actually shrink to its fair share of the available
+            height (the flexbox "min-height: auto" default otherwise lets tall descendants —
+            e.g. TicketViewer's own h-full split-pane — stretch this box past the viewport). */}
+        <div className="min-h-0 grow">{children}</div>
       </SidebarInset>
     </SidebarProvider>
   )
 }
+
+/**
+ * Renders the main application layout.
+ *
+ * This component retrieves user data from the loader using React Router's useLoaderData hook and passes it to the SidebarApp component within a SidebarProvider context. It also renders an Outlet to display nested routes.
+ */
+export default function App() {
+  const loaderData = useLoaderData<typeof loader>()
+
+  // Identify user if PostHog is configured
+  useEffect(() => {
+    if (clientConfig.analytics.posthog && loaderData.user) {
+      posthog.identify(loaderData.user.id, {
+        id: loaderData.user.id,
+        email: loaderData.user.email,
+        name: loaderData.user.name,
+      })
+    }
+  }, [loaderData.user])
+
+  return (
+    <SupportShell loaderData={loaderData}>
+      <Outlet />
+    </SupportShell>
+  )
+}
+
+/**
+ * Renders when a descendant route throws (e.g. a ticket that doesn't exist or can't be accessed,
+ * or a genuine component bug). This route's own loader already succeeded, so the sidebar/header
+ * shell can render normally via {@link SupportShell}; only the content pane is replaced with the
+ * classified {@link RouteErrorFallback}.
+ *
+ * If instead this route's *own* loader threw, `useLoaderData()` has nothing to return — fall
+ * back to the bare, shell-less fallback rather than crash on undefined loader data.
+ */
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const loaderData = useLoaderData<typeof loader>() as SupportLoaderData | undefined
+
+  if (!loaderData) {
+    return <RouteErrorFallback error={error} />
+  }
+
+  return (
+    <SupportShell loaderData={loaderData}>
+      <RouteErrorFallback error={error} />
+    </SupportShell>
+  )
+}
diff --git a/fdm-app/app/routes/user.tsx b/fdm-app/app/routes/user.tsx
index 2c29100f7..b69e83431 100644
--- a/fdm-app/app/routes/user.tsx
+++ b/fdm-app/app/routes/user.tsx
@@ -6,10 +6,14 @@ import { SidebarPlatform } from "~/components/blocks/sidebar/platform"
 import { SidebarSupport } from "~/components/blocks/sidebar/support"
 import { SidebarTitle } from "~/components/blocks/sidebar/title"
 import { SidebarUser } from "~/components/blocks/sidebar/user"
+import { RouteErrorFallback } from "~/components/custom/error"
 import { Sidebar, SidebarContent, SidebarInset, SidebarProvider } from "~/components/ui/sidebar"
 import { checkSession, getSession } from "~/lib/auth.server"
 import { clientConfig } from "~/lib/config"
 import { handleLoaderError } from "~/lib/error"
+import type { Route } from "./+types/user"
+
+type UserLoaderData = ReturnType<typeof useLoaderData<typeof loader>>
 
 /**
  * Retrieves the session from the HTTP request and returns user information if available.
@@ -43,6 +47,40 @@ export async function loader({ request }: LoaderFunctionArgs) {
   }
 }
 
+/**
+ * Renders the user-settings app shell: sidebar and a content pane. Shared between the normal
+ * route render (`<Outlet />` in the content pane) and this route's `ErrorBoundary` (a friendly
+ * `<ClientErrorPage />` in the content pane), so a descendant route error (e.g. a settings
+ * sub-page that fails) never leaves the user with a bare, out-of-app-feeling page.
+ */
+function UserShell({
+  loaderData,
+  children,
+}: {
+  loaderData: UserLoaderData
+  children: React.ReactNode
+}) {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarTitle />
+        <SidebarContent>
+          <SidebarPlatform />
+        </SidebarContent>
+        <SidebarSupport name={loaderData.userName} email={loaderData.user.email} hasNotification={false} />
+        <SidebarUser
+          name={loaderData.userName}
+          email={loaderData.user.email}
+          image={loaderData.user.image}
+          avatarInitials={loaderData.initials}
+          userName={loaderData.userName}
+        />
+      </Sidebar>
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  )
+}
+
 /**
  * Renders the main application layout.
  *
@@ -63,28 +101,31 @@ export default function App() {
   }, [loaderData.user])
 
   return (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarTitle />
-        <SidebarContent>
-          <SidebarPlatform />
-        </SidebarContent>
-        <SidebarSupport
-          name={loaderData.userName}
-          email={loaderData.user.email}
-          hasNotification={false}
-        />
-        <SidebarUser
-          name={loaderData.userName}
-          email={loaderData.user.email}
-          image={loaderData.user.image}
-          avatarInitials={loaderData.initials}
-          userName={loaderData.userName}
-        />
-      </Sidebar>
-      <SidebarInset>
-        <Outlet />
-      </SidebarInset>
-    </SidebarProvider>
+    <UserShell loaderData={loaderData}>
+      <Outlet />
+    </UserShell>
+  )
+}
+
+/**
+ * Renders when a descendant route throws (e.g. a settings sub-page that fails, or a genuine
+ * component bug). This route's own loader already succeeded, so the sidebar shell can render
+ * normally via {@link UserShell}; only the content pane is replaced with the classified
+ * {@link RouteErrorFallback}.
+ *
+ * If instead this route's *own* loader threw, `useLoaderData()` has nothing to return — fall
+ * back to the bare, shell-less fallback rather than crash on undefined loader data.
+ */
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const loaderData = useLoaderData<typeof loader>() as UserLoaderData | undefined
+
+  if (!loaderData) {
+    return <RouteErrorFallback error={error} />
+  }
+
+  return (
+    <UserShell loaderData={loaderData}>
+      <RouteErrorFallback error={error} />
+    </UserShell>
   )
 }