diff --git a/apps/web/src/components/dev/DevLogin.tsx b/apps/web/src/components/dev/DevLogin.tsx
index f3d3dca..14152a8 100644
--- a/apps/web/src/components/dev/DevLogin.tsx
+++ b/apps/web/src/components/dev/DevLogin.tsx
@@ -7,14 +7,14 @@ import { apiFetch } from '../../lib/api-client';
 import { authStore } from '../../lib/auth-store';
 import { AuthTokenResponseSchema } from '@sar/api-interface';
 
-type DevUser = { userId: string; role: string; label: string };
+type DevUser = { key: string; userId: string; role: string; label: string };
 
 // userId = cod_vendedor como string; idEmpresa = empresa no ERP (dev default = 1)
 // Em dev, o backend força DEV_REP_CODE=29 independente do userId enviado.
 const DEV_USERS: DevUser[] = [
-  { userId: '29', role: 'rep', label: 'PAVEI COMERCIO (cod 29)' },
-  { userId: '29', role: 'supervisor', label: 'PAVEI — Supervisor (cod 29)' },
-  { userId: '29', role: 'manager', label: 'PAVEI — Gerente (cod 29)' },
+  { key: 'rep-29', userId: '29', role: 'rep', label: 'PAVEI COMERCIO (cod 29)' },
+  { key: 'sup-29', userId: '29', role: 'supervisor', label: 'PAVEI — Supervisor (cod 29)' },
+  { key: 'mgr-29', userId: '29', role: 'manager', label: 'PAVEI — Gerente (cod 29)' },
 ];
 
 export function DevLogin({ onLogin }: { onLogin: () => void }) {
@@ -22,7 +22,7 @@ export function DevLogin({ onLogin }: { onLogin: () => void }) {
   const [error, setError] = useState<string | null>(null);
 
   async function handleLogin(user: DevUser) {
-    setLoading(user.userId);
+    setLoading(user.key);
     setError(null);
     try {
       const raw = await apiFetch('/auth/dev/token', {
@@ -42,24 +42,24 @@ export function DevLogin({ onLogin }: { onLogin: () => void }) {
   return (
     <Flex justify="center" align="center" style={{ minHeight: '100vh' }}>
       <Card style={{ width: 380 }}>
-        <Space direction="vertical" size={16} style={{ width: '100%' }}>
+        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
           <Typography.Title level={3} style={{ margin: 0 }}>
             SAR · Login Dev
           </Typography.Title>
           <Alert
             type="warning"
-            message="Ambiente de desenvolvimento"
+            title="Ambiente de desenvolvimento"
             description="Este login automático não existe em produção."
             showIcon
           />
-          {error && <Alert type="error" message={error} showIcon />}
+          {error && <Alert type="error" title={error} showIcon />}
           <Divider style={{ margin: '4px 0' }}>Entrar como</Divider>
           {DEV_USERS.map((u) => (
             <Button
-              key={u.userId}
+              key={u.key}
               block
               type={u.role === 'rep' ? 'primary' : 'default'}
-              loading={loading === u.userId}
+              loading={loading === u.key}
               onClick={() => void handleLogin(u)}
             >
               {u.label}
diff --git a/apps/web/src/lib/router.tsx b/apps/web/src/lib/router.tsx
index 4157a2e..8d8485b 100644
--- a/apps/web/src/lib/router.tsx
+++ b/apps/web/src/lib/router.tsx
@@ -1,4 +1,11 @@
-import { createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router';
+import {
+  createRouter,
+  createRootRoute,
+  createRoute,
+  Outlet,
+  notFound,
+} from '@tanstack/react-router';
+import { Typography } from 'antd';
 import { AppShell } from '../components/layout/AppShell';
 import { RafaelPainel } from '../cockpits/rafael/RafaelPainel';
 import { ClientsPage } from '../cockpits/rafael/ClientsPage';
@@ -27,12 +34,26 @@ function HomeRoute() {
   return role === 'supervisor' || role === 'manager' ? <SandraPainel /> : <RafaelPainel />;
 }
 
+function NotFoundPage() {
+  return (
+    <div style={{ padding: 48, textAlign: 'center' }}>
+      <Typography.Title level={3} type="secondary">
+        Página não encontrada
+      </Typography.Title>
+    </div>
+  );
+}
+
+// Suprime aviso de notFound não utilizado — usado via throw notFound() em loaders futuros.
+void notFound;
+
 const rootRoute = createRootRoute({
   component: () => (
     <AppShell>
       <Outlet />
     </AppShell>
   ),
+  notFoundComponent: NotFoundPage,
 });
 
 const indexRoute = createRoute({