diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx
index 29bac15..1112e75 100644
--- a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/layout.tsx
@@ -10,8 +10,15 @@ export default async function layout(props: {
 }) {
     const { id } = await props.params
     const api = await getServerApi()
-    const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
-    const vendor = response?.data
+    // Guard the fetch: a failed request (404/401/5xx) must not throw and crash
+    // the whole route — render the chrome with a fallback title instead.
+    let vendor: Record<string, any> | undefined
+    try {
+        const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
+        vendor = response?.data
+    } catch (err) {
+        console.error(`Failed to load vendor ${id} (layout):`, err)
+    }
 
     const company = vendor?.company_name as string | undefined
     const fullName = [vendor?.first_name, vendor?.last_name].filter(Boolean).join(" ").trim()
diff --git a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx
index f8739ee..aaeb81e 100644
--- a/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx
+++ b/apps/dashboard/app/(authenticated)/purchase/vendor/[id]/page.tsx
@@ -6,8 +6,15 @@ export default async function VendorDetailPage(props: { params: Promise<{ id: st
     const api = await getServerApi()
     // The OpenAPI schema doesn't yet describe GET /api/vendors/{id} (only PUT/DELETE),
     // so cast through `any` here until the schema is regenerated.
-    const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
-    const vendor = response?.data
+    // Guard the fetch: a failed request (404/401/5xx) must degrade gracefully
+    // instead of throwing and white-screening the whole route.
+    let vendor: Record<string, any> | undefined
+    try {
+        const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
+        vendor = response?.data
+    } catch (err) {
+        console.error(`Failed to load vendor ${id}:`, err)
+    }
 
     if (!vendor) {
         return <div className="text-muted-foreground p-6">Vendor not found.</div>