diff --git a/README.md b/README.md
index adb5d9f..c038050 100644
--- a/README.md
+++ b/README.md
@@ -47,18 +47,31 @@ cp apps/web/env.example apps/web/.env.local
 # Start the web application
 pnpm dev:web
 
+# Start the Nest API (fixture-backed common data; default :3001)
+pnpm --filter @worksight/common build
+pnpm dev:api
+
 # Start the documentation site
 pnpm dev:docs
 
-# Start both applications
+# Start both web + docs (turbo)
 pnpm dev
+
+# MVP E2E demo: API + web with shared common fixtures (see docs/mvp/DEMO.md)
+pnpm demo
 ```
 
 Open:
 
 - **Web App**: <http://localhost:3000>
+- **E2E demo page**: <http://localhost:3000/demo> (requires API on :3001)
+- **API**: <http://localhost:3001> (Swagger at `/api`)
 - **Documentation**: <http://localhost:5173>
 
+> Demo data is **fixture-backed** from `@worksight/common` — not Supabase. Set
+> `NEXT_PUBLIC_USE_API=true` and `NEXT_PUBLIC_API_URL=http://localhost:3001` so
+> dashboard/admin pages call Nest instead of in-process fixtures.
+
 ## 📦 Available Scripts
 
 ### Root Scripts
diff --git a/apps/api/src/main.ts b/apps/api/src/main.ts
index f6b776d..a8d9a04 100644
--- a/apps/api/src/main.ts
+++ b/apps/api/src/main.ts
@@ -1,12 +1,23 @@
-import { ClassSerializerInterceptor } from '@nestjs/common';
+import { ClassSerializerInterceptor, Logger } from '@nestjs/common';
 import { NestFactory, Reflector } from '@nestjs/core';
 import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
 import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  const logger = new Logger('Bootstrap');
+  const port = Number(process.env.PORT ?? 3001);
+  const corsOrigins = (process.env.CORS_ORIGINS ?? 'http://localhost:3000')
+    .split(',')
+    .map(origin => origin.trim())
+    .filter(Boolean);
+
+  app.enableCors({
+    origin: corsOrigins,
+    methods: ['GET', 'HEAD', 'OPTIONS'],
+  });
   app.useGlobalInterceptors(new ClassSerializerInterceptor(app.get(Reflector)));
-  await app.listen(process.env.PORT ?? 3000);
+
   const config = new DocumentBuilder()
     .setTitle('WorkSight')
     .setDescription('Check your tasks, manage your well-being')
@@ -15,5 +26,9 @@ async function bootstrap() {
     .build();
   const document = SwaggerModule.createDocument(app, config);
   SwaggerModule.setup('api', app, document);
+
+  await app.listen(port);
+  logger.log(`API listening on http://localhost:${port} (CORS: ${corsOrigins.join(', ')})`);
+  logger.log('Data is fixture-backed from @worksight/common — not Supabase.');
 }
 bootstrap();
diff --git a/apps/web/.env.example b/apps/web/.env.example
index 9b78e34..c3c82cd 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -29,6 +29,11 @@ NEXT_PUBLIC_IS_OFFLINE=false
 # Server-side offline flag (for server components)
 IS_OFFLINE=false
 
+# MVP data source (#18): when true, web fetches Nest API instead of in-process fixtures
+# /demo always hits the API regardless of this flag
+NEXT_PUBLIC_USE_API=false
+NEXT_PUBLIC_API_URL=http://localhost:3001
+
 # App URL for metadata and OpenGraph
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 
@@ -55,7 +60,9 @@ NEXT_PUBLIC_ENABLE_ERROR_REPORTING="false"
 NEXT_PUBLIC_ENABLE_PERFORMANCE_MONITORING="true"
 
 # API Configuration
-API_BASE_URL="http://localhost:3000/api"
+# Nest API (fixture-backed @worksight/common). Web uses NEXT_PUBLIC_* below.
+API_BASE_URL="http://localhost:3001"
+NEXT_PUBLIC_API_URL="http://localhost:3001"
 API_TIMEOUT="10000"
 
 # Email Configuration (if needed)
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 435c5c1..71ab30e 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -59,12 +59,16 @@ const nextConfig: NextConfig = {
         },
       };
     }
+    const commonDist = path.resolve(__dirname, '../../packages/common/dist');
     config.resolve.alias = {
       ...config.resolve.alias,
       '@': path.resolve(__dirname, 'src'),
       '@worksight/assets': path.resolve(__dirname, '../../packages/assets/dist'),
-      '@worksight/common': path.resolve(__dirname, '../../packages/common/dist')
-    }
+      '@worksight/common/data': path.resolve(commonDist, 'data'),
+      '@worksight/common/types': path.resolve(commonDist, 'types'),
+      '@worksight/common/utils': path.resolve(commonDist, 'utils'),
+      '@worksight/common': commonDist,
+    };
     return config;
   },
 
diff --git a/apps/web/src/app/admin/surveys/page.tsx b/apps/web/src/app/admin/surveys/page.tsx
index 7575478..9a2a728 100644
--- a/apps/web/src/app/admin/surveys/page.tsx
+++ b/apps/web/src/app/admin/surveys/page.tsx
@@ -41,103 +41,23 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
-
-interface Survey {
-  id: string;
-  title: string;
-  description: string;
-  status: 'draft' | 'active' | 'paused' | 'completed';
-  questionCount: number;
-  responseCount: number;
-  createdAt: string;
-  lastModified: string;
-  createdBy: string;
-  category: 'burnout' | 'satisfaction' | 'wellness' | 'feedback';
-  targetAudience: 'all' | 'managers' | 'employees' | 'specific';
-}
-
-const mockSurveys: Survey[] = [
-  {
-    id: '1',
-    title: 'Burnout Assessment 2025',
-    description: 'Comprehensive burnout evaluation for all employees',
-    status: 'active',
-    questionCount: 15,
-    responseCount: 247,
-    createdAt: '2025-01-15',
-    lastModified: '2025-01-20',
-    createdBy: 'Admin User',
-    category: 'burnout',
-    targetAudience: 'all',
-  },
-  {
-    id: '2',
-    title: 'Job Satisfaction Survey',
-    description: 'Quarterly job satisfaction and engagement survey',
-    status: 'active',
-    questionCount: 12,
-    responseCount: 156,
-    createdAt: '2025-01-10',
-    lastModified: '2025-01-18',
-    createdBy: 'HR Manager',
-    category: 'satisfaction',
-    targetAudience: 'employees',
-  },
-  {
-    id: '3',
-    title: 'Manager Feedback Survey',
-    description: 'Leadership effectiveness and team dynamics assessment',
-    status: 'draft',
-    questionCount: 8,
-    responseCount: 0,
-    createdAt: '2025-01-22',
-    lastModified: '2025-01-22',
-    createdBy: 'Admin User',
-    category: 'feedback',
-    targetAudience: 'managers',
-  },
-  {
-    id: '4',
-    title: 'Wellness Check Q4 2024',
-    description: 'Mental health and wellness assessment',
-    status: 'completed',
-    questionCount: 10,
-    responseCount: 312,
-    createdAt: '2024-10-01',
-    lastModified: '2024-12-31',
-    createdBy: 'Wellness Team',
-    category: 'wellness',
-    targetAudience: 'all',
-  },
-  {
-    id: '5',
-    title: 'Remote Work Experience',
-    description: 'Evaluation of remote work setup and productivity',
-    status: 'paused',
-    questionCount: 14,
-    responseCount: 89,
-    createdAt: '2025-01-05',
-    lastModified: '2025-01-19',
-    createdBy: 'Operations Lead',
-    category: 'feedback',
-    targetAudience: 'all',
-  },
-];
+import { getMvpSurveys, type MvpSurvey } from '@/lib/mvp-data';
 
 function SurveyManagementContent() {
   const { logout } = useAuth();
-  const [surveys, setSurveys] = useState<Survey[]>([]);
+  const [surveys, setSurveys] = useState<MvpSurvey[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [categoryFilter, setCategoryFilter] = useState<string>('all');
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    // Simulate API call
-    setTimeout(() => {
-      setSurveys(mockSurveys);
-      setIsLoading(false);
-    }, 1000);
+    const fixtureSurveys = getMvpSurveys();
+    if (fixtureSurveys.length === 0) {
+      throw new Error('Common survey fixtures empty; refusing silent empty fallback');
+    }
+    setSurveys(fixtureSurveys);
+    setIsLoading(false);
   }, []);
 
   const handleLogout = async () => {
diff --git a/apps/web/src/app/admin/users/page.tsx b/apps/web/src/app/admin/users/page.tsx
index 453602b..1ceaba4 100644
--- a/apps/web/src/app/admin/users/page.tsx
+++ b/apps/web/src/app/admin/users/page.tsx
@@ -2,121 +2,55 @@
 
 import { useAuth } from '@/auth';
 import { getRoleColor, getUserRoleDisplay } from '@/auth/admin';
-import { UserRole } from '@/auth/types';
 import { AdminRoute } from '@/components/admin';
 import { SessionTimer } from '@/components/features';
 import { AppSidebar } from '@/components/main/sidebar';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { sections } from '@/data/sections';
 import {
-    UserFilters,
-    UserWithMetrics,
-    validateUserArray,
-    validateUserFilters,
+  UserFilters,
+  UserWithMetrics,
+  validateUserArray,
+  validateUserFilters,
 } from '@/schemas/user';
+import { fetchUsersWithMetricsFromApi } from '@/lib/mvp-api-bridge';
+import { getUsersWithMetrics } from '@/lib/mvp-data';
+import { isApiDataMode } from '@/lib/worksight-api';
 import {
-    AlertTriangle,
-    CheckCircle,
-    Clock,
-    Edit3,
-    LogOut,
-    MoreHorizontal,
-    Plus,
-    Search,
-    Shield,
-    Users,
+  AlertTriangle,
+  CheckCircle,
+  Clock,
+  Edit3,
+  LogOut,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Shield,
+  Users,
 } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
-const mockUsers: UserWithMetrics[] = [
-  {
-    id: '1',
-    name: 'John Doe',
-    email: 'john.doe@company.com',
-    role: UserRole.EMPLOYEE,
-    department: 'Engineering',
-    team: 'Frontend',
-    burnoutScore: 3.2,
-    lastActive: '2 hours ago',
-    surveyCompleted: true,
-    riskLevel: 'low',
-    tasksCompleted: 24,
-  },
-  {
-    id: '2',
-    name: 'Jane Smith',
-    email: 'jane.smith@company.com',
-    role: UserRole.TEAM_LEAD,
-    department: 'Engineering',
-    team: 'Backend',
-    burnoutScore: 7.8,
-    lastActive: '30 minutes ago',
-    surveyCompleted: true,
-    riskLevel: 'high',
-    tasksCompleted: 31,
-  },
-  {
-    id: '3',
-    name: 'Bob Wilson',
-    email: 'bob.wilson@company.com',
-    role: UserRole.MANAGER,
-    department: 'Product',
-    team: 'Design',
-    burnoutScore: 5.4,
-    lastActive: '1 day ago',
-    surveyCompleted: false,
-    riskLevel: 'medium',
-    tasksCompleted: 18,
-  },
-  {
-    id: '4',
-    name: 'Alice Johnson',
-    email: 'alice.johnson@company.com',
-    role: UserRole.EMPLOYEE,
-    department: 'Marketing',
-    team: 'Content',
-    burnoutScore: 2.1,
-    lastActive: '5 minutes ago',
-    surveyCompleted: true,
-    riskLevel: 'low',
-    tasksCompleted: 42,
-  },
-  {
-    id: '5',
-    name: 'Charlie Brown',
-    email: 'charlie.brown@company.com',
-    role: UserRole.ADMIN,
-    department: 'IT',
-    team: 'DevOps',
-    burnoutScore: 6.7,
-    lastActive: '1 hour ago',
-    surveyCompleted: true,
-    riskLevel: 'medium',
-    tasksCompleted: 15,
-  },
-];
-
 function UserManagementContent() {
   const { logout } = useAuth();
   const [users, setUsers] = useState<UserWithMetrics[]>([]);
@@ -125,25 +59,49 @@ function UserManagementContent() {
   const [riskFilter, setRiskFilter] = useState<string>('all');
   const [isLoading, setIsLoading] = useState(true);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [dataSource, setDataSource] = useState<'api' | 'fixtures'>('fixtures');
 
   useEffect(() => {
-    // Simulate API call with validation
-    setTimeout(() => {
-      // Validate mock data using Zod
-      const validationResult = validateUserArray(mockUsers);
+    let cancelled = false;
+
+    const applyUsers = (rawUsers: UserWithMetrics[], source: 'api' | 'fixtures') => {
+      const validationResult = validateUserArray(rawUsers);
 
       if (!validationResult.allValid) {
         const errors = validationResult.invalid.map(
-          (item) =>
+          item =>
             `User at index ${item.index}: ${item.errors?.map((e: { message: string }) => e.message).join(', ')}`
         );
         setValidationErrors(errors);
       }
 
-      // Use only valid users
-      setUsers(validationResult.valid.map((item) => item.data!));
-      setIsLoading(false);
-    }, 1000);
+      if (validationResult.valid.length === 0 && rawUsers.length > 0) {
+        throw new Error('Employee payloads failed validation; refusing empty fallback');
+      }
+
+      if (!cancelled) {
+        setDataSource(source);
+        setUsers(validationResult.valid.map(item => item.data!));
+        setIsLoading(false);
+      }
+    };
+
+    (async () => {
+      if (isApiDataMode()) {
+        try {
+          const apiUsers = await fetchUsersWithMetricsFromApi();
+          applyUsers(apiUsers, 'api');
+          return;
+        } catch (err) {
+          console.warn('API user load failed; falling back to fixtures', err);
+        }
+      }
+      applyUsers(getUsersWithMetrics(), 'fixtures');
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
   // Validate filters when they change
@@ -179,7 +137,7 @@ function UserManagementContent() {
   };
 
   const filteredUsers = useMemo(() => {
-    return users.filter((user) => {
+    return users.filter(user => {
       const matchesSearch =
         user.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
         user.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -193,7 +151,7 @@ function UserManagementContent() {
   }, [users, searchTerm, departmentFilter, riskFilter]);
 
   const departments = useMemo(() => {
-    const depts = Array.from(new Set(users.map((u) => u.department)));
+    const depts = Array.from(new Set(users.map(u => u.department)));
     return depts.sort();
   }, [users]);
 
@@ -244,7 +202,12 @@ function UserManagementContent() {
               <div className="space-y-1">
                 <div className="flex items-center gap-2">
                   <Users className="h-6 w-6 text-blue-600" />
-                  <h1 className="text-3xl font-bold tracking-tight">User Management</h1>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h1 className="text-3xl font-bold tracking-tight">User Management</h1>
+                    <Badge variant="outline">
+                      data: {dataSource === 'api' ? 'Nest API' : 'common fixtures'}
+                    </Badge>
+                  </div>
                 </div>
                 <p className="text-muted-foreground">
                   Manage user accounts, roles, and monitor burnout metrics
@@ -296,7 +259,7 @@ function UserManagementContent() {
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold text-red-600">
-                    {users.filter((u) => u.riskLevel === 'high').length}
+                    {users.filter(u => u.riskLevel === 'high').length}
                   </div>
                 </CardContent>
               </Card>
@@ -308,7 +271,7 @@ function UserManagementContent() {
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold text-green-600">
-                    {users.filter((u) => u.surveyCompleted).length}
+                    {users.filter(u => u.surveyCompleted).length}
                   </div>
                 </CardContent>
               </Card>
@@ -339,7 +302,7 @@ function UserManagementContent() {
                     <Input
                       placeholder="Search users by name, email, or department..."
                       value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
+                      onChange={e => setSearchTerm(e.target.value)}
                       className="pl-10"
                     />
                   </div>
@@ -349,7 +312,7 @@ function UserManagementContent() {
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="all">All Departments</SelectItem>
-                      {departments.map((dept) => (
+                      {departments.map(dept => (
                         <SelectItem key={dept} value={dept}>
                           {dept}
                         </SelectItem>
@@ -395,7 +358,7 @@ function UserManagementContent() {
                           <AvatarFallback>
                             {user.name
                               ?.split(' ')
-                              .map((n) => n[0])
+                              .map(n => n[0])
                               .join('') || 'U'}
                           </AvatarFallback>
                         </Avatar>
diff --git a/apps/web/src/app/dashboard/tasks/page.tsx b/apps/web/src/app/dashboard/tasks/page.tsx
index e4197a8..6fdd80b 100644
--- a/apps/web/src/app/dashboard/tasks/page.tsx
+++ b/apps/web/src/app/dashboard/tasks/page.tsx
@@ -10,51 +10,55 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import {
-    DndContext,
-    DragEndEvent,
-    DragOverlay,
-    DragStartEvent,
-    PointerSensor,
-    closestCenter,
-    useSensor,
-    useSensors,
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
 } from '@dnd-kit/core';
 import {
-    SortableContext,
-    arrayMove,
-    useSortable,
-    verticalListSortingStrategy,
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import {
-    AlertCircle,
-    CheckCircle,
-    Clock,
-    Flag,
-    GripVertical,
-    LayoutGrid,
-    List,
-    Plus,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  Flag,
+  GripVertical,
+  LayoutGrid,
+  List,
+  Plus,
 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { fetchDashboardTasksFromApi } from '@/lib/mvp-api-bridge';
+import { assignmentLookup } from '@/lib/mvp-data';
+import { isApiDataMode } from '@/lib/worksight-api';
+import type { Assignment } from '@worksight/common/types';
 
 interface Task {
   id: string;
@@ -68,63 +72,33 @@ interface Task {
 
 type ViewMode = 'kanban' | 'table';
 
-// Mock tasks data - in real app this would come from your backend
-const initialTasks: Task[] = [
-  {
-    id: '1',
-    title: 'Implement survey results storage',
-    description: 'Create Zustand store for survey results with persistence',
-    status: 'completed',
-    priority: 'high',
-    dueDate: '2025-08-24',
-    storyPoints: 8,
-  },
-  {
-    id: '2',
-    title: 'Fix ESLint warnings',
-    description: 'Resolve remaining TypeScript and linting issues',
-    status: 'in-progress',
-    priority: 'medium',
-    dueDate: '2025-08-25',
-    storyPoints: 3,
-  },
-  {
-    id: '3',
-    title: 'Dashboard navigation improvements',
-    description: 'Implement client-side routing for dashboard sections',
-    status: 'in-progress',
-    priority: 'high',
-    dueDate: '2025-08-26',
-    storyPoints: 5,
-  },
-  {
-    id: '4',
-    title: 'Mobile responsive design',
-    description: 'Ensure dashboard works well on mobile devices',
-    status: 'pending',
-    priority: 'medium',
-    dueDate: '2025-08-28',
-    storyPoints: 13,
-  },
-  {
-    id: '5',
-    title: 'User authentication improvements',
-    description: 'Add password reset and email verification',
-    status: 'pending',
-    priority: 'low',
-    dueDate: '2025-08-30',
-    storyPoints: 8,
-  },
-  {
-    id: '6',
-    title: 'Add task drag and drop',
-    description: 'Implement kanban board with draggable tasks',
-    status: 'in-progress',
-    priority: 'high',
-    dueDate: '2025-08-25',
-    storyPoints: 8,
-  },
-];
+function mapDashboardStatus(status: Assignment['status']): Task['status'] {
+  if (status === 'completed') return 'completed';
+  if (status === 'in_progress') return 'in-progress';
+  return 'pending';
+}
+
+function mapDashboardPriority(priority: Assignment['priority']): Task['priority'] {
+  if (priority === 'critical' || priority === 'high') return 'high';
+  if (priority === 'medium') return 'medium';
+  return 'low';
+}
+
+function getInitialTasksFromCommon(): Task[] {
+  const assignments = assignmentLookup.all();
+  if (assignments.length === 0) {
+    throw new Error('Common assignment fixtures empty; refusing silent empty fallback');
+  }
+  return assignments.map(assignment => ({
+    id: assignment.id,
+    title: assignment.title ?? assignment.external_id ?? 'Untitled task',
+    description: [assignment.epic, assignment.sprint, assignment.type].filter(Boolean).join(' · '),
+    status: mapDashboardStatus(assignment.status),
+    priority: mapDashboardPriority(assignment.priority),
+    dueDate: assignment.updated_at.toISOString().slice(0, 10),
+    storyPoints: assignment.points ?? 1,
+  }));
+}
 
 const statusConfig = {
   pending: { icon: Clock, color: 'text-orange-500', bg: 'bg-orange-50', label: 'Pending' },
@@ -147,11 +121,30 @@ const statusOrder: Task['status'][] = ['pending', 'in-progress', 'completed'];
 
 export default function TasksPage() {
   const [viewMode, setViewMode] = useState<ViewMode>('kanban');
-  const [tasks, setTasks] = useState<Task[]>(initialTasks);
+  const [tasks, setTasks] = useState<Task[]>(() =>
+    isApiDataMode() ? [] : getInitialTasksFromCommon()
+  );
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   const [showNewTaskDialog, setShowNewTaskDialog] = useState(false);
   const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!isApiDataMode()) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const apiTasks = await fetchDashboardTasksFromApi();
+        if (!cancelled) setTasks(apiTasks);
+      } catch (err) {
+        console.warn('API dashboard tasks failed; falling back to fixtures', err);
+        if (!cancelled) setTasks(getInitialTasksFromCommon());
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   // Get current user's stats if they're an employee
 
   const sensors = useSensors(
@@ -162,14 +155,14 @@ export default function TasksPage() {
     })
   );
 
-  const completedTasks = tasks.filter((task) => task.status === 'completed');
-  const inProgressTasks = tasks.filter((task) => task.status === 'in-progress');
+  const completedTasks = tasks.filter(task => task.status === 'completed');
+  const inProgressTasks = tasks.filter(task => task.status === 'in-progress');
 
   const totalStoryPoints = tasks.reduce((sum, task) => sum + task.storyPoints, 0);
   const completedStoryPoints = completedTasks.reduce((sum, task) => sum + task.storyPoints, 0);
 
   const handleDragStart = (event: DragStartEvent) => {
-    const task = tasks.find((t) => t.id === event.active.id);
+    const task = tasks.find(t => t.id === event.active.id);
     setActiveTask(task || null);
   };
 
@@ -181,7 +174,7 @@ export default function TasksPage() {
       return;
     }
 
-    const activeTask = tasks.find((t) => t.id === active.id);
+    const activeTask = tasks.find(t => t.id === active.id);
     if (!activeTask) {
       setActiveTask(null);
       return;
@@ -191,25 +184,25 @@ export default function TasksPage() {
     if (over.id === 'pending' || over.id === 'in-progress' || over.id === 'completed') {
       const newStatus = over.id as Task['status'];
       if (activeTask.status !== newStatus) {
-        setTasks((prev) =>
-          prev.map((task) => (task.id === activeTask.id ? { ...task, status: newStatus } : task))
+        setTasks(prev =>
+          prev.map(task => (task.id === activeTask.id ? { ...task, status: newStatus } : task))
         );
       }
     } else {
       // Reordering within same status or between tasks
       const overId = over.id as string;
-      const overTask = tasks.find((t) => t.id === overId);
+      const overTask = tasks.find(t => t.id === overId);
 
       if (overTask && activeTask.id !== overTask.id) {
-        setTasks((prev) => {
-          const oldIndex = prev.findIndex((t) => t.id === activeTask.id);
-          const newIndex = prev.findIndex((t) => t.id === overTask.id);
+        setTasks(prev => {
+          const oldIndex = prev.findIndex(t => t.id === activeTask.id);
+          const newIndex = prev.findIndex(t => t.id === overTask.id);
 
           const updatedTasks = arrayMove(prev, oldIndex, newIndex);
 
           // If moving to a different status group, update the status
           if (activeTask.status !== overTask.status) {
-            return updatedTasks.map((task) =>
+            return updatedTasks.map(task =>
               task.id === activeTask.id ? { ...task, status: overTask.status } : task
             );
           }
@@ -223,8 +216,8 @@ export default function TasksPage() {
   };
 
   const toggleTaskStatus = (taskId: string) => {
-    setTasks((prev) =>
-      prev.map((task) => {
+    setTasks(prev =>
+      prev.map(task => {
         if (task.id === taskId) {
           const currentIndex = statusOrder.indexOf(task.status);
           const nextIndex = (currentIndex + 1) % statusOrder.length;
@@ -240,12 +233,12 @@ export default function TasksPage() {
       ...newTask,
       id: Date.now().toString(), // Simple ID generation
     };
-    setTasks((prev) => [...prev, task]);
+    setTasks(prev => [...prev, task]);
     setShowNewTaskDialog(false);
   };
 
   const updateTask = (taskId: string, updates: Partial<Task>) => {
-    setTasks((prev) => prev.map((task) => (task.id === taskId ? { ...task, ...updates } : task)));
+    setTasks(prev => prev.map(task => (task.id === taskId ? { ...task, ...updates } : task)));
   };
 
   return (
@@ -314,94 +307,128 @@ export default function TasksPage() {
                     label: 'Learn about tasks',
                     href: '/help',
                   }}
-                  illustration={<svg aria-hidden="true" className="mx-auto mt-6 h-32 w-32 opacity-30" viewBox="0 0 200 200">
-                    <circle cx="100" cy="100" r="90" className="fill-primary/5" />
-                    <rect x="55" y="60" width="90" height="12" rx="3" className="fill-primary/10" />
-                    <rect x="55" y="86" width="70" height="12" rx="3" className="fill-primary/10" />
-                    <rect x="55" y="112" width="80" height="12" rx="3" className="fill-primary/10" />
-                    <rect x="55" y="138" width="50" height="12" rx="3" className="fill-primary/10" />
-                  </svg>}
+                  illustration={
+                    <svg
+                      aria-hidden="true"
+                      className="mx-auto mt-6 h-32 w-32 opacity-30"
+                      viewBox="0 0 200 200"
+                    >
+                      <circle cx="100" cy="100" r="90" className="fill-primary/5" />
+                      <rect
+                        x="55"
+                        y="60"
+                        width="90"
+                        height="12"
+                        rx="3"
+                        className="fill-primary/10"
+                      />
+                      <rect
+                        x="55"
+                        y="86"
+                        width="70"
+                        height="12"
+                        rx="3"
+                        className="fill-primary/10"
+                      />
+                      <rect
+                        x="55"
+                        y="112"
+                        width="80"
+                        height="12"
+                        rx="3"
+                        className="fill-primary/10"
+                      />
+                      <rect
+                        x="55"
+                        y="138"
+                        width="50"
+                        height="12"
+                        rx="3"
+                        className="fill-primary/10"
+                      />
+                    </svg>
+                  }
                 />
               ) : (
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-                <Card>
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-2xl font-bold">{tasks.length}</div>
-                    <p className="text-muted-foreground text-xs">
-                      {totalStoryPoints} story points total
-                    </p>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">Completed</CardTitle>
-                    <CheckCircle className="h-4 w-4 text-green-500" />
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-2xl font-bold">{completedTasks.length}</div>
-                    <p className="text-muted-foreground text-xs">
-                      {completedStoryPoints} story points
-                    </p>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">In Progress</CardTitle>
-                    <AlertCircle className="h-4 w-4 text-blue-500" />
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-2xl font-bold">{inProgressTasks.length}</div>
-                    <p className="text-muted-foreground text-xs">Active work items</p>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">Completion Rate</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-2xl font-bold">
-                      {Math.round((completedTasks.length / tasks.length) * 100)}%
-                    </div>
-                    <p className="text-muted-foreground text-xs">Task completion rate</p>
-                  </CardContent>
-                </Card>
-              </div>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                  <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                      <CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">{tasks.length}</div>
+                      <p className="text-muted-foreground text-xs">
+                        {totalStoryPoints} story points total
+                      </p>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                      <CardTitle className="text-sm font-medium">Completed</CardTitle>
+                      <CheckCircle className="h-4 w-4 text-green-500" />
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">{completedTasks.length}</div>
+                      <p className="text-muted-foreground text-xs">
+                        {completedStoryPoints} story points
+                      </p>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                      <CardTitle className="text-sm font-medium">In Progress</CardTitle>
+                      <AlertCircle className="h-4 w-4 text-blue-500" />
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">{inProgressTasks.length}</div>
+                      <p className="text-muted-foreground text-xs">Active work items</p>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                      <CardTitle className="text-sm font-medium">Completion Rate</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">
+                        {Math.round((completedTasks.length / tasks.length) * 100)}%
+                      </div>
+                      <p className="text-muted-foreground text-xs">Task completion rate</p>
+                    </CardContent>
+                  </Card>
+                </div>
               )}
 
               {/* Task Views */}
               {tasks.length > 0 && (
-              <DndContext
-                sensors={sensors}
-                onDragStart={handleDragStart}
-                onDragEnd={handleDragEnd}
-                collisionDetection={closestCenter}
-                autoScroll={{
-                  enabled: false,
-                }}
-              >
-                {viewMode === 'kanban' ? (
-                  <KanbanView tasks={tasks} onToggleStatus={toggleTaskStatus} />
-                ) : (
-                  <TableView
-                    tasks={tasks}
-                    onToggleStatus={toggleTaskStatus}
-                    onUpdateTask={updateTask}
-                    editingTaskId={editingTaskId}
-                    setEditingTaskId={setEditingTaskId}
-                    isDragging={!!activeTask}
-                  />
-                )}
-
-                <DragOverlay>
-                  {activeTask ? <TaskCard task={activeTask} isDragging /> : null}
-                </DragOverlay>
-              </DndContext>
+                <DndContext
+                  sensors={sensors}
+                  onDragStart={handleDragStart}
+                  onDragEnd={handleDragEnd}
+                  collisionDetection={closestCenter}
+                  autoScroll={{
+                    enabled: false,
+                  }}
+                >
+                  {viewMode === 'kanban' ? (
+                    <KanbanView tasks={tasks} onToggleStatus={toggleTaskStatus} />
+                  ) : (
+                    <TableView
+                      tasks={tasks}
+                      onToggleStatus={toggleTaskStatus}
+                      onUpdateTask={updateTask}
+                      editingTaskId={editingTaskId}
+                      setEditingTaskId={setEditingTaskId}
+                      isDragging={!!activeTask}
+                    />
+                  )}
+
+                  <DragOverlay>
+                    {activeTask ? <TaskCard task={activeTask} isDragging /> : null}
+                  </DragOverlay>
+                </DndContext>
               )}
 
               {/* New Task Dialog */}
@@ -427,15 +454,15 @@ function KanbanView({
   onToggleStatus: (taskId: string) => void;
 }) {
   const tasksByStatus = {
-    pending: tasks.filter((task) => task.status === 'pending'),
-    'in-progress': tasks.filter((task) => task.status === 'in-progress'),
-    completed: tasks.filter((task) => task.status === 'completed'),
+    pending: tasks.filter(task => task.status === 'pending'),
+    'in-progress': tasks.filter(task => task.status === 'in-progress'),
+    completed: tasks.filter(task => task.status === 'completed'),
   };
 
   return (
     <div className="w-full overflow-hidden">
       <div className="grid gap-6 overflow-hidden lg:grid-cols-3">
-        {statusOrder.map((status) => {
+        {statusOrder.map(status => {
           const statusInfo = statusConfig[status];
           const StatusIcon = statusInfo.icon;
           const statusTasks = tasksByStatus[status];
@@ -486,11 +513,8 @@ function KanbanColumn({
         ref={setNodeRef}
         className="border-muted-foreground/25 max-h-[600px] min-h-[200px] space-y-3 overflow-y-auto rounded-lg border-2 border-dashed p-4"
       >
-        <SortableContext
-          items={tasks.map((task) => task.id)}
-          strategy={verticalListSortingStrategy}
-        >
-          {tasks.map((task) => (
+        <SortableContext items={tasks.map(task => task.id)} strategy={verticalListSortingStrategy}>
+          {tasks.map(task => (
             <SortableTaskCard key={task.id} task={task} onToggleStatus={onToggleStatus} />
           ))}
         </SortableContext>
@@ -521,10 +545,7 @@ function TableView({
         <CardTitle>Tasks Table</CardTitle>
       </CardHeader>
       <CardContent>
-        <SortableContext
-          items={tasks.map((task) => task.id)}
-          strategy={verticalListSortingStrategy}
-        >
+        <SortableContext items={tasks.map(task => task.id)} strategy={verticalListSortingStrategy}>
           <Table>
             <TableHeader>
               <TableRow>
@@ -538,14 +559,14 @@ function TableView({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {tasks.map((task) => (
+              {tasks.map(task => (
                 <SortableTableRow
                   key={task.id}
                   task={task}
                   onToggleStatus={onToggleStatus}
                   onUpdateTask={onUpdateTask}
                   isEditing={editingTaskId === task.id}
-                  setEditing={(editing) => setEditingTaskId(editing ? task.id : null)}
+                  setEditing={editing => setEditingTaskId(editing ? task.id : null)}
                   disabled={isDragging}
                 />
               ))}
@@ -658,13 +679,13 @@ function SortableTableRow({
           <div className="space-y-2">
             <Input
               value={editValues.title}
-              onChange={(e) => setEditValues({ ...editValues, title: e.target.value })}
+              onChange={e => setEditValues({ ...editValues, title: e.target.value })}
               placeholder="Task title"
               className="font-medium"
             />
             <Textarea
               value={editValues.description}
-              onChange={(e) => setEditValues({ ...editValues, description: e.target.value })}
+              onChange={e => setEditValues({ ...editValues, description: e.target.value })}
               placeholder="Task description"
               className="text-sm"
               rows={2}
@@ -673,7 +694,12 @@ function SortableTableRow({
               <Button size="sm" onClick={handleSave} aria-label="Save task changes">
                 Save Task
               </Button>
-              <Button size="sm" variant="outline" onClick={handleCancel} aria-label="Cancel editing task">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleCancel}
+                aria-label="Cancel editing task"
+              >
                 Cancel Edit
               </Button>
             </div>
@@ -689,7 +715,7 @@ function SortableTableRow({
         {isEditing ? (
           <Select
             value={editValues.status}
-            onValueChange={(value) =>
+            onValueChange={value =>
               setEditValues({ ...editValues, status: value as Task['status'] })
             }
           >
@@ -710,7 +736,7 @@ function SortableTableRow({
         {isEditing ? (
           <Select
             value={editValues.priority}
-            onValueChange={(value) =>
+            onValueChange={value =>
               setEditValues({ ...editValues, priority: value as Task['priority'] })
             }
           >
@@ -732,7 +758,7 @@ function SortableTableRow({
           <Input
             type="date"
             value={editValues.dueDate}
-            onChange={(e) => setEditValues({ ...editValues, dueDate: e.target.value })}
+            onChange={e => setEditValues({ ...editValues, dueDate: e.target.value })}
           />
         ) : (
           new Date(task.dueDate).toLocaleDateString()
@@ -743,7 +769,7 @@ function SortableTableRow({
           <Input
             type="number"
             value={editValues.storyPoints}
-            onChange={(e) =>
+            onChange={e =>
               setEditValues({ ...editValues, storyPoints: parseInt(e.target.value) || 0 })
             }
             min="0"
@@ -781,7 +807,7 @@ function TaskCard({
               <Checkbox
                 checked={task.status === 'completed'}
                 onCheckedChange={() => onToggleStatus(task.id)}
-                onClick={(e) => e.stopPropagation()}
+                onClick={e => e.stopPropagation()}
               />
             )}
             <div>
@@ -880,24 +906,30 @@ function NewTaskDialog({
     });
     // Make background inert (basic implementation)
     const rootChildren = Array.from(document.body.children).filter(
-      (el) => !el.id.startsWith('task-dialog-portal')
+      el => !el.id.startsWith('task-dialog-portal')
     );
-    rootChildren.forEach((el) => {
+    rootChildren.forEach(el => {
       if (el.getAttribute('aria-hidden') === 'true') return;
       el.setAttribute('aria-hidden', 'true');
     });
     return () => {
       document.removeEventListener('keydown', onKeyDown);
       cancelAnimationFrame(timer);
-      rootChildren.forEach((el) => el.removeAttribute('aria-hidden'));
+      rootChildren.forEach(el => el.removeAttribute('aria-hidden'));
       previouslyFocusedRef.current?.focus();
     };
   }, [open, onKeyDown]);
 
   const validate = () => {
     const v: { id: string; message: string; field?: string }[] = [];
-    if (!newTask.title.trim()) v.push({ id: 'title', message: 'Title is required.', field: 'task-title-input' });
-    if (newTask.storyPoints < 1) v.push({ id: 'storyPoints', message: 'Story points must be at least 1.', field: 'task-story-points' });
+    if (!newTask.title.trim())
+      v.push({ id: 'title', message: 'Title is required.', field: 'task-title-input' });
+    if (newTask.storyPoints < 1)
+      v.push({
+        id: 'storyPoints',
+        message: 'Story points must be at least 1.',
+        field: 'task-story-points',
+      });
     return v;
   };
 
@@ -958,7 +990,7 @@ function NewTaskDialog({
           >
             <p className="font-medium text-destructive mb-1">Please correct the following:</p>
             <ul className="list-disc pl-5 space-y-0.5">
-              {errors.map((e) => (
+              {errors.map(e => (
                 <li key={e.id}>{e.message}</li>
               ))}
             </ul>
@@ -967,23 +999,27 @@ function NewTaskDialog({
 
         <div className="space-y-4">
           <div>
-            <label className="text-sm font-medium" htmlFor="task-title-input">Title</label>
+            <label className="text-sm font-medium" htmlFor="task-title-input">
+              Title
+            </label>
             <Input
               id="task-title-input"
               ref={firstFieldRef}
               value={newTask.title}
-              onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+              onChange={e => setNewTask({ ...newTask, title: e.target.value })}
               placeholder="Enter task title"
               aria-required="true"
-              aria-invalid={errors.some((e) => e.id === 'title') || undefined}
-              aria-describedby={[
-                errors.some((e) => e.id === 'title') && 'task-title-error',
-                errors.length > 0 && 'new-task-error-summary',
-              ]
-                .filter(Boolean)
-                .join(' ') || undefined}
+              aria-invalid={errors.some(e => e.id === 'title') || undefined}
+              aria-describedby={
+                [
+                  errors.some(e => e.id === 'title') && 'task-title-error',
+                  errors.length > 0 && 'new-task-error-summary',
+                ]
+                  .filter(Boolean)
+                  .join(' ') || undefined
+              }
             />
-            {errors.some((e) => e.id === 'title') && (
+            {errors.some(e => e.id === 'title') && (
               <p id="task-title-error" className="mt-1 text-xs text-destructive">
                 Title is required.
               </p>
@@ -991,11 +1027,13 @@ function NewTaskDialog({
           </div>
 
           <div>
-            <label className="text-sm font-medium" htmlFor="task-desc-input">Description</label>
+            <label className="text-sm font-medium" htmlFor="task-desc-input">
+              Description
+            </label>
             <Textarea
               id="task-desc-input"
               value={newTask.description}
-              onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+              onChange={e => setNewTask({ ...newTask, description: e.target.value })}
               placeholder="Enter task description"
               rows={3}
               aria-describedby={errors.length > 0 ? 'new-task-error-summary' : undefined}
@@ -1004,12 +1042,12 @@ function NewTaskDialog({
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="text-sm font-medium" htmlFor="task-status-select">Status</label>
+              <label className="text-sm font-medium" htmlFor="task-status-select">
+                Status
+              </label>
               <Select
                 value={newTask.status}
-                onValueChange={(value) =>
-                  setNewTask({ ...newTask, status: value as Task['status'] })
-                }
+                onValueChange={value => setNewTask({ ...newTask, status: value as Task['status'] })}
               >
                 <SelectTrigger id="task-status-select">
                   <SelectValue />
@@ -1023,10 +1061,12 @@ function NewTaskDialog({
             </div>
 
             <div>
-              <label className="text-sm font-medium" htmlFor="task-priority-select">Priority</label>
+              <label className="text-sm font-medium" htmlFor="task-priority-select">
+                Priority
+              </label>
               <Select
                 value={newTask.priority}
-                onValueChange={(value) =>
+                onValueChange={value =>
                   setNewTask({ ...newTask, priority: value as Task['priority'] })
                 }
               >
@@ -1044,35 +1084,41 @@ function NewTaskDialog({
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="text-sm font-medium" htmlFor="task-due-date">Due Date</label>
+              <label className="text-sm font-medium" htmlFor="task-due-date">
+                Due Date
+              </label>
               <Input
                 id="task-due-date"
                 type="date"
                 value={newTask.dueDate}
-                onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
+                onChange={e => setNewTask({ ...newTask, dueDate: e.target.value })}
                 aria-describedby={errors.length > 0 ? 'new-task-error-summary' : undefined}
               />
             </div>
 
             <div>
-              <label className="text-sm font-medium" htmlFor="task-story-points">Story Points</label>
+              <label className="text-sm font-medium" htmlFor="task-story-points">
+                Story Points
+              </label>
               <Input
                 id="task-story-points"
                 type="number"
                 value={newTask.storyPoints}
-                onChange={(e) =>
+                onChange={e =>
                   setNewTask({ ...newTask, storyPoints: parseInt(e.target.value) || 1 })
                 }
                 min="1"
-                aria-invalid={errors.some((e) => e.id === 'storyPoints') || undefined}
-                aria-describedby={[
-                  errors.some((e) => e.id === 'storyPoints') && 'task-story-points-error',
-                  errors.length > 0 && 'new-task-error-summary',
-                ]
-                  .filter(Boolean)
-                  .join(' ') || undefined}
+                aria-invalid={errors.some(e => e.id === 'storyPoints') || undefined}
+                aria-describedby={
+                  [
+                    errors.some(e => e.id === 'storyPoints') && 'task-story-points-error',
+                    errors.length > 0 && 'new-task-error-summary',
+                  ]
+                    .filter(Boolean)
+                    .join(' ') || undefined
+                }
               />
-              {errors.some((e) => e.id === 'storyPoints') && (
+              {errors.some(e => e.id === 'storyPoints') && (
                 <p id="task-story-points-error" className="mt-1 text-xs text-destructive">
                   Story points must be at least 1.
                 </p>
@@ -1082,11 +1128,7 @@ function NewTaskDialog({
         </div>
 
         <div className="mt-6 flex justify-end gap-3">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            aria-label="Cancel creating new task dialog"
-          >
+          <Button variant="outline" onClick={onClose} aria-label="Cancel creating new task dialog">
             Cancel Creation
           </Button>
           <Button
@@ -1099,18 +1141,14 @@ function NewTaskDialog({
         </div>
         <button
           type="button"
-            className="absolute right-3 top-3 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none"
-            aria-label="Close dialog"
-            onClick={onClose}
+          className="absolute right-3 top-3 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none"
+          aria-label="Close dialog"
+          onClick={onClose}
         >
           <span aria-hidden="true">×</span>
         </button>
       </div>
-      <div
-        className="bg-black/50 fixed inset-0 -z-10"
-        aria-hidden="true"
-        onClick={onClose}
-      />
+      <div className="bg-black/50 fixed inset-0 -z-10" aria-hidden="true" onClick={onClose} />
     </div>
   );
 
diff --git a/apps/web/src/app/demo/page.tsx b/apps/web/src/app/demo/page.tsx
new file mode 100644
index 0000000..99899bf
--- /dev/null
+++ b/apps/web/src/app/demo/page.tsx
@@ -0,0 +1,236 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { fetchDemoSnapshot, type DemoSnapshot } from '@/lib/mvp-api-bridge';
+import { getApiBaseUrl } from '@/lib/worksight-api';
+import { Activity, AlertTriangle, HeartPulse, ListChecks, Users } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+function riskVariant(risk: 'low' | 'medium' | 'high') {
+  if (risk === 'high') return 'destructive' as const;
+  if (risk === 'medium') return 'secondary' as const;
+  return 'outline' as const;
+}
+
+export default function DemoPage() {
+  const [snapshot, setSnapshot] = useState<DemoSnapshot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const apiBase = getApiBaseUrl();
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await fetchDemoSnapshot();
+        if (!cancelled) {
+          setSnapshot(data);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <main className="mx-auto min-h-screen max-w-6xl space-y-8 px-4 py-10">
+      <header className="space-y-3">
+        <p className="text-muted-foreground text-sm tracking-wide uppercase">WorkSight MVP</p>
+        <h1 className="text-3xl font-semibold tracking-tight">E2E demo path</h1>
+        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+          This page calls the Nest API at{' '}
+          <code className="bg-muted rounded px-1 py-0.5 text-xs">{apiBase}</code>. The API serves
+          the same <code className="bg-muted rounded px-1 py-0.5 text-xs">@worksight/common</code>{' '}
+          fixtures as the web bridge — fixture-backed only, not Supabase persistence.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="outline">source: Nest API</Badge>
+          <Badge variant="secondary">contract: @worksight/common</Badge>
+          <Badge variant="outline">persistence: fixtures</Badge>
+        </div>
+        <p className="text-muted-foreground text-xs">
+          Authenticated dashboards stay on local fixtures unless{' '}
+          <code className="bg-muted rounded px-1">NEXT_PUBLIC_USE_API=true</code>. Runbook:{' '}
+          <code className="bg-muted rounded px-1">docs/mvp/DEMO.md</code>.
+        </p>
+      </header>
+
+      {loading && (
+        <Card>
+          <CardContent className="text-muted-foreground py-8 text-sm">
+            Loading users, teams, tasks, and wellness stats from the API…
+          </CardContent>
+        </Card>
+      )}
+
+      {error && (
+        <Card className="border-destructive">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <AlertTriangle className="h-4 w-4" />
+              API unreachable
+            </CardTitle>
+            <CardDescription>
+              Start the API (`pnpm demo` or `PORT=3001 pnpm --filter @worksight/api start:prod`)
+              then reload. {error}
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      )}
+
+      {snapshot && (
+        <>
+          <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm font-medium">
+                  <Users className="h-4 w-4" /> Employees
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{snapshot.users.length}</div>
+                <p className="text-muted-foreground text-xs">
+                  GET /users · stats total {snapshot.userStats.totalEmployees}
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm font-medium">
+                  <Activity className="h-4 w-4" /> Teams
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{snapshot.teams.length}</div>
+                <p className="text-muted-foreground text-xs">GET /teams</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm font-medium">
+                  <ListChecks className="h-4 w-4" /> Tasks
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{snapshot.tasks.length}</div>
+                <p className="text-muted-foreground text-xs">GET /tasks (assignments)</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm font-medium">
+                  <HeartPulse className="h-4 w-4" /> At-risk sample
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">
+                  {snapshot.wellness.filter(w => w.riskLevel !== 'low').length}
+                </div>
+                <p className="text-muted-foreground text-xs">
+                  medium/high burnout from task work-life scores
+                </p>
+              </CardContent>
+            </Card>
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-xl font-semibold">Well-being framing (fixture-derived)</h2>
+            <p className="text-muted-foreground text-sm">
+              Burnout risk is derived from each employee&apos;s{' '}
+              <code className="bg-muted rounded px-1 text-xs">GET /tasks/stats/:id</code> work-life
+              balance score — same util the API uses from common.
+            </p>
+            <div className="grid gap-3 md:grid-cols-2">
+              {snapshot.wellness.map(row => (
+                <Card key={row.employeeId}>
+                  <CardHeader className="pb-2">
+                    <div className="flex items-center justify-between gap-2">
+                      <CardTitle className="text-base">{row.name}</CardTitle>
+                      <Badge variant={riskVariant(row.riskLevel)}>{row.riskLevel} risk</Badge>
+                    </div>
+                    <CardDescription>
+                      {row.completedTasks}/{row.totalTasks} tasks completed
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="text-sm">
+                    <div className="flex justify-between">
+                      <span>Work-life balance</span>
+                      <span className="font-medium">{row.workLifeBalanceScore.toFixed(0)}%</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Burnout score (0–10)</span>
+                      <span className="font-medium">{row.burnoutScore.toFixed(1)}</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-xl font-semibold">Teams</h2>
+            <div className="overflow-x-auto rounded-md border">
+              <table className="w-full text-left text-sm">
+                <thead className="bg-muted/50">
+                  <tr>
+                    <th className="px-3 py-2 font-medium">Name</th>
+                    <th className="px-3 py-2 font-medium">Department</th>
+                    <th className="px-3 py-2 font-medium">Members</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {snapshot.teams.map(team => (
+                    <tr key={team.id} className="border-t">
+                      <td className="px-3 py-2">{team.name}</td>
+                      <td className="px-3 py-2">{team.department || '—'}</td>
+                      <td className="px-3 py-2">{team.member_ids.length}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-xl font-semibold">Sample tasks</h2>
+            <div className="overflow-x-auto rounded-md border">
+              <table className="w-full text-left text-sm">
+                <thead className="bg-muted/50">
+                  <tr>
+                    <th className="px-3 py-2 font-medium">Title</th>
+                    <th className="px-3 py-2 font-medium">Status</th>
+                    <th className="px-3 py-2 font-medium">Priority</th>
+                    <th className="px-3 py-2 font-medium">Assignee</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {snapshot.tasks.slice(0, 12).map(task => (
+                    <tr key={task.id} className="border-t">
+                      <td className="px-3 py-2">
+                        {task.title ?? task.external_id ?? task.id.slice(0, 8)}
+                      </td>
+                      <td className="px-3 py-2">{task.status}</td>
+                      <td className="px-3 py-2">{task.priority}</td>
+                      <td className="px-3 py-2 font-mono text-xs">
+                        {task.employee_id.slice(0, 8)}…
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
+        </>
+      )}
+    </main>
+  );
+}
diff --git a/apps/web/src/app/tasks/page.tsx b/apps/web/src/app/tasks/page.tsx
index c870fb4..975205a 100644
--- a/apps/web/src/app/tasks/page.tsx
+++ b/apps/web/src/app/tasks/page.tsx
@@ -6,99 +6,50 @@ import { SessionTimer } from '@/components/features';
 import { AppSidebar } from '@/components/main/sidebar';
 import { Badge } from '@/components/ui/badge';
 import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { sections } from '@/data/sections';
 import {
-    closestCenter,
-    DndContext,
-    DragEndEvent,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
 } from '@dnd-kit/core';
 import {
-    arrayMove,
-    SortableContext,
-    sortableKeyboardCoordinates,
-    useSortable,
-    verticalListSortingStrategy,
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { AlertCircle, CheckSquare, Clock, GripVertical, LogOut, Plus, Search } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { fetchMvpTasksFromApi } from '@/lib/mvp-api-bridge';
+import { getMvpTasks, type MvpTask } from '@/lib/mvp-data';
+import { isApiDataMode } from '@/lib/worksight-api';
 
-interface Task {
-  id: string;
-  title: string;
-  description: string;
-  status: 'todo' | 'in-progress' | 'completed';
-  priority: 'low' | 'medium' | 'high';
-  dueDate: string;
-  estimatedHours: number;
-  order: number;
-}
-
-const mockTasks: Task[] = [
-  {
-    id: '1',
-    title: 'Implement user authentication',
-    description: 'Set up Supabase auth with OAuth providers and offline fallback',
-    status: 'completed',
-    priority: 'high',
-    dueDate: '2025-08-20',
-    estimatedHours: 8,
-    order: 0,
-  },
-  {
-    id: '2',
-    title: 'Design task management interface',
-    description: 'Create a clean, intuitive interface for managing work tasks',
-    status: 'in-progress',
-    priority: 'medium',
-    dueDate: '2025-08-21',
-    estimatedHours: 6,
-    order: 1,
-  },
-  {
-    id: '3',
-    title: 'Add burnout tracking metrics',
-    description: 'Implement features to track and analyze work burnout patterns',
-    status: 'todo',
-    priority: 'high',
-    dueDate: '2025-08-23',
-    estimatedHours: 12,
-    order: 2,
-  },
-  {
-    id: '4',
-    title: 'Setup CI/CD pipeline',
-    description: 'Configure automated testing and deployment workflows',
-    status: 'todo',
-    priority: 'low',
-    dueDate: '2025-08-25',
-    estimatedHours: 4,
-    order: 3,
-  },
-];
+type Task = MvpTask;
 
 interface SortableTaskProps {
   task: Task;
@@ -167,8 +118,8 @@ function SortableTask({ task, onTaskUpdate }: SortableTaskProps) {
             {isEditing === 'title' ? (
               <Input
                 defaultValue={task.title}
-                onBlur={(e) => handleFieldUpdate('title', e.target.value)}
-                onKeyDown={(e) => {
+                onBlur={e => handleFieldUpdate('title', e.target.value)}
+                onKeyDown={e => {
                   if (e.key === 'Enter') {
                     handleFieldUpdate('title', e.currentTarget.value);
                   }
@@ -193,8 +144,8 @@ function SortableTask({ task, onTaskUpdate }: SortableTaskProps) {
           {isEditing === 'description' ? (
             <Input
               defaultValue={task.description}
-              onBlur={(e) => handleFieldUpdate('description', e.target.value)}
-              onKeyDown={(e) => {
+              onBlur={e => handleFieldUpdate('description', e.target.value)}
+              onKeyDown={e => {
                 if (e.key === 'Enter') {
                   handleFieldUpdate('description', e.currentTarget.value);
                 }
@@ -219,7 +170,7 @@ function SortableTask({ task, onTaskUpdate }: SortableTaskProps) {
             <div className="flex items-center gap-2">
               <Select
                 value={task.status}
-                onValueChange={(value) => handleFieldUpdate('status', value)}
+                onValueChange={value => handleFieldUpdate('status', value)}
               >
                 <SelectTrigger className="h-7 w-32 text-xs">
                   <SelectValue />
@@ -233,7 +184,7 @@ function SortableTask({ task, onTaskUpdate }: SortableTaskProps) {
 
               <Select
                 value={task.priority}
-                onValueChange={(value) => handleFieldUpdate('priority', value)}
+                onValueChange={value => handleFieldUpdate('priority', value)}
               >
                 <SelectTrigger className="h-7 w-24 text-xs">
                   <SelectValue />
@@ -260,7 +211,35 @@ function SortableTask({ task, onTaskUpdate }: SortableTaskProps) {
 function TasksContent() {
   const { user, logout } = useAuth();
   const [searchTerm, setSearchTerm] = useState('');
-  const [tasks, setTasks] = useState<Task[]>(mockTasks.sort((a, b) => a.order - b.order));
+  const [tasks, setTasks] = useState<Task[]>(() => {
+    if (isApiDataMode()) return [];
+    const fixtureTasks = getMvpTasks();
+    if (fixtureTasks.length === 0) {
+      throw new Error('Common assignment fixtures empty; refusing silent empty fallback');
+    }
+    return [...fixtureTasks].sort((a, b) => a.order - b.order);
+  });
+
+  useEffect(() => {
+    if (!isApiDataMode()) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const apiTasks = await fetchMvpTasksFromApi();
+        if (!cancelled) {
+          setTasks([...apiTasks].sort((a, b) => a.order - b.order));
+        }
+      } catch (err) {
+        console.warn('API task load failed; falling back to fixtures', err);
+        if (!cancelled) {
+          setTasks([...getMvpTasks()].sort((a, b) => a.order - b.order));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -274,16 +253,16 @@ function TasksContent() {
   };
 
   const handleTaskUpdate = useCallback((id: string, updates: Partial<Task>) => {
-    setTasks((tasks) => tasks.map((task) => (task.id === id ? { ...task, ...updates } : task)));
+    setTasks(tasks => tasks.map(task => (task.id === id ? { ...task, ...updates } : task)));
   }, []);
 
   const handleDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event;
 
     if (active.id !== over?.id) {
-      setTasks((tasks) => {
-        const oldIndex = tasks.findIndex((task) => task.id === active.id);
-        const newIndex = tasks.findIndex((task) => task.id === over?.id);
+      setTasks(tasks => {
+        const oldIndex = tasks.findIndex(task => task.id === active.id);
+        const newIndex = tasks.findIndex(task => task.id === over?.id);
 
         const newTasks = arrayMove(tasks, oldIndex, newIndex);
         // Update order property
@@ -295,7 +274,7 @@ function TasksContent() {
   const filteredTasks = useMemo(
     () =>
       tasks.filter(
-        (task) =>
+        task =>
           task.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
           task.description.toLowerCase().includes(searchTerm.toLowerCase())
       ),
@@ -304,9 +283,9 @@ function TasksContent() {
 
   const tasksByStatus = useMemo(
     () => ({
-      todo: filteredTasks.filter((t) => t.status === 'todo'),
-      'in-progress': filteredTasks.filter((t) => t.status === 'in-progress'),
-      completed: filteredTasks.filter((t) => t.status === 'completed'),
+      todo: filteredTasks.filter(t => t.status === 'todo'),
+      'in-progress': filteredTasks.filter(t => t.status === 'in-progress'),
+      completed: filteredTasks.filter(t => t.status === 'completed'),
     }),
     [filteredTasks]
   );
@@ -358,7 +337,7 @@ function TasksContent() {
             <Input
               placeholder="Search tasks..."
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={e => setSearchTerm(e.target.value)}
               className="pl-10"
             />
           </div>
@@ -415,14 +394,14 @@ function TasksContent() {
                 onDragEnd={handleDragEnd}
               >
                 <SortableContext
-                  items={filteredTasks.map((task) => task.id)}
+                  items={filteredTasks.map(task => task.id)}
                   strategy={verticalListSortingStrategy}
                 >
                   <div className="space-y-3">
                     {filteredTasks.length === 0 ? (
                       <p className="text-muted-foreground py-8 text-center">No tasks found</p>
                     ) : (
-                      filteredTasks.map((task) => (
+                      filteredTasks.map(task => (
                         <SortableTask key={task.id} task={task} onTaskUpdate={handleTaskUpdate} />
                       ))
                     )}
diff --git a/apps/web/src/components/dashboard/stats.tsx b/apps/web/src/components/dashboard/stats.tsx
index 2956dc3..d3bd1a3 100644
--- a/apps/web/src/components/dashboard/stats.tsx
+++ b/apps/web/src/components/dashboard/stats.tsx
@@ -5,14 +5,15 @@ import { isOfflineMode } from '@/auth/offline';
 import { SurveyResultsCard } from '@/components/dashboard/survey-results-card';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Employees } from '@/data/employees';
 import {
+    findEmployeeByEmail,
     getAfterHoursActivities,
     getDataSourceUsageStats,
+    getEmployeeCount,
     getEmployeeProductivityStats,
     getTeamMetaStats,
     getWeekendActivities,
-} from '@/data/work-tracking';
+} from '@/lib/mvp-data';
 import { useEffect, useState } from 'react';
 
 export function DashboardStats() {
@@ -24,12 +25,10 @@ export function DashboardStats() {
     setIsOffline(isOfflineMode());
   }, []);
 
-  // Get current user's stats if they're an employee
-  const currentEmployee = user
-    ? Object.entries(Employees).find(([_, emp]) => emp.email === user.email)
-    : null;
+  // Get current user's stats if they're an employee (common fixtures)
+  const currentEmployee = user?.email ? findEmployeeByEmail(user.email) : null;
   const currentEmployeeStats = currentEmployee
-    ? getEmployeeProductivityStats(currentEmployee[0])
+    ? getEmployeeProductivityStats(currentEmployee.id)
     : null;
 
   const teamMetaStats = getTeamMetaStats();
@@ -121,7 +120,7 @@ export function DashboardStats() {
               <CardTitle className="text-sm font-medium">Team Members</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">{Object.keys(Employees).length}</div>
+              <div className="text-2xl font-bold">{getEmployeeCount()}</div>
               <p className="text-muted-foreground text-xs">4sight employees</p>
             </CardContent>
           </Card>
diff --git a/apps/web/src/data/employees.ts b/apps/web/src/data/employees.ts
index b7c180a..69d97b9 100644
--- a/apps/web/src/data/employees.ts
+++ b/apps/web/src/data/employees.ts
@@ -1,3 +1,9 @@
+import { getEmployeesRecord } from '@/lib/mvp-data';
+
+/**
+ * Compatibility shim: employees now come from @worksight/common via mvp-data.
+ * Prefer importing from `@/lib/mvp-data` or `@worksight/common/data` directly.
+ */
 export type EmployeeProfile = {
   [key: string]: {
     internal_id: string;
@@ -12,52 +18,7 @@ export type EmployeeProfile = {
   };
 };
 
-export const Employees: EmployeeProfile = {
-  '08b6fc43-77e6-4fcf-8ed8-dafc16b4b025': {
-    internal_id: 'E001',
-    email: 'sjc.71415@gmail.com',
-    name: 'John Carlo Santos',
-    role: 'fullstack',
-    manager_id: '',
-    date_joined: new Date('2025-08-24'),
-    department: 'Infra',
-    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-  },
-  '58f36d76-f382-41b4-ad3e-f8192958d12b': {
-    internal_id: 'E002',
-    email: 'dagsmagalona@gmail.com',
-    name: 'Adriel M. Magalona',
-    role: 'frontend',
-    manager_id: '',
-    date_joined: new Date('2025-08-24'),
-    department: 'Engineering',
-    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-  },
-  '71400e28-3c2a-4694-8124-8fbb9a0b66d8': {
-    internal_id: 'E003',
-    email: 'kielethanlanzanas@gmail.com',
-    name: 'Kiel Ethan L. Lanzanas',
-    role: 'data-ml',
-    manager_id: '',
-    date_joined: new Date('2025-08-24'),
-    department: 'Data',
-    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-  },
-  '88165ccb-2c80-455a-9ace-466a30448f67': {
-    internal_id: 'E004',
-    email: 'ebenerado@gmail.com',
-    name: 'Ellah D. Benerado',
-    role: 'data-ml',
-    manager_id: '',
-    date_joined: new Date('2025-08-24'),
-    department: 'Data',
-    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
-  },
-};
+export const Employees: EmployeeProfile = getEmployeesRecord();
 
 // Also export with the old name for backward compatibility
 export const employees = Employees;
diff --git a/apps/web/src/lib/mvp-api-bridge.ts b/apps/web/src/lib/mvp-api-bridge.ts
new file mode 100644
index 0000000..27b016e
--- /dev/null
+++ b/apps/web/src/lib/mvp-api-bridge.ts
@@ -0,0 +1,205 @@
+/**
+ * Map Nest API (@worksight/common) payloads into the same view models as mvp-data.
+ */
+import { UserRole } from '@/auth/types';
+import type { UserWithMetrics } from '@/schemas/user';
+import type { MvpTask } from '@/lib/mvp-data';
+import {
+  toDate,
+  worksightApi,
+  type ApiAssignment,
+  type ApiEmployee,
+  type ApiTaskStats,
+  type ApiTeam,
+} from '@/lib/worksight-api';
+
+const ROLE_MAP: Record<string, UserRole> = {
+  employee: UserRole.EMPLOYEE,
+  team_lead: UserRole.TEAM_LEAD,
+  manager: UserRole.MANAGER,
+  admin: UserRole.ADMIN,
+  super_admin: UserRole.SUPER_ADMIN,
+};
+
+function mapRole(role: string): UserRole {
+  return ROLE_MAP[role] ?? UserRole.EMPLOYEE;
+}
+
+function departmentLabel(employee: ApiEmployee): string {
+  const first = employee.department.find(d => d && d.length > 0);
+  return first || 'unassigned';
+}
+
+function teamLabel(employee: ApiEmployee, teams: ApiTeam[]): string {
+  if (employee.team) {
+    const team = teams.find(t => t.id === employee.team);
+    if (team) return team.name;
+  }
+  const managed = teams.find(t => t.manager_id === employee.id);
+  if (managed) return managed.name;
+  const memberTeam = teams.find(t => t.member_ids.includes(employee.id));
+  return memberTeam?.name ?? departmentLabel(employee);
+}
+
+function relativeTime(date: Date): string {
+  const deltaMs = Date.now() - date.getTime();
+  const minutes = Math.max(1, Math.floor(deltaMs / 60_000));
+  if (minutes < 60) return `${minutes} minutes ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 48) return `${hours} hours ago`;
+  const days = Math.floor(hours / 24);
+  return `${days} days ago`;
+}
+
+function riskFromBurnout(score: number): 'low' | 'medium' | 'high' {
+  if (score >= 7) return 'high';
+  if (score >= 4) return 'medium';
+  return 'low';
+}
+
+function burnoutFromStats(stats: ApiTaskStats): number {
+  return Math.min(10, Math.round(((100 - stats.workLifeBalanceScore) / 10) * 10) / 10);
+}
+
+function mapAssignmentStatus(status: ApiAssignment['status']): MvpTask['status'] {
+  if (status === 'in_progress') return 'in-progress';
+  if (status === 'completed') return 'completed';
+  return 'todo';
+}
+
+function mapAssignmentPriority(priority: ApiAssignment['priority']): MvpTask['priority'] {
+  if (priority === 'critical' || priority === 'high') return 'high';
+  if (priority === 'medium') return 'medium';
+  return 'low';
+}
+
+export async function fetchUsersWithMetricsFromApi(): Promise<UserWithMetrics[]> {
+  const [employees, teams, tasks] = await Promise.all([
+    worksightApi.getUsers(),
+    worksightApi.getTeams(),
+    worksightApi.getTasks(),
+  ]);
+
+  return employees
+    .filter(e => e.role !== 'guest')
+    .map(employee => {
+      const employeeTasks = tasks.filter(t => t.employee_id === employee.id);
+      const completedTasks = employeeTasks.filter(t => t.status === 'completed').length;
+      // Approximate wellness without per-employee activity round-trips
+      const openRatio = employeeTasks.length === 0 ? 0 : 1 - completedTasks / employeeTasks.length;
+      const burnoutScore = Math.min(10, Math.round(openRatio * 8 * 10) / 10);
+
+      return {
+        id: employee.id,
+        name: employee.name,
+        email: employee.email,
+        role: mapRole(employee.role),
+        department: departmentLabel(employee),
+        team: teamLabel(employee, teams),
+        burnoutScore,
+        lastActive: relativeTime(toDate(employee.updated_at)),
+        surveyCompleted: false,
+        riskLevel: riskFromBurnout(burnoutScore),
+        tasksCompleted: completedTasks,
+      };
+    });
+}
+
+export async function fetchMvpTasksFromApi(): Promise<MvpTask[]> {
+  const assignments = await worksightApi.getTasks();
+  if (assignments.length === 0) {
+    throw new Error('API returned zero tasks; refusing silent empty fallback');
+  }
+  return assignments.map((assignment, index) => ({
+    id: assignment.id,
+    title: assignment.title ?? assignment.external_id ?? 'Untitled task',
+    description: [assignment.epic, assignment.sprint, assignment.type].filter(Boolean).join(' · '),
+    status: mapAssignmentStatus(assignment.status),
+    priority: mapAssignmentPriority(assignment.priority),
+    dueDate: toDate(assignment.updated_at).toISOString().slice(0, 10),
+    estimatedHours: Math.max(1, Math.round((assignment.points ?? 1) * 0.5)),
+    order: index,
+    assigneeId: assignment.employee_id,
+  }));
+}
+
+export async function fetchDashboardTasksFromApi(): Promise<
+  Array<{
+    id: string;
+    title: string;
+    description: string;
+    status: 'pending' | 'in-progress' | 'completed';
+    priority: 'low' | 'medium' | 'high';
+    dueDate: string;
+    storyPoints: number;
+  }>
+> {
+  const assignments = await worksightApi.getTasks();
+  if (assignments.length === 0) {
+    throw new Error('API returned zero tasks; refusing silent empty fallback');
+  }
+  return assignments.map(assignment => ({
+    id: assignment.id,
+    title: assignment.title ?? assignment.external_id ?? 'Untitled task',
+    description: [assignment.epic, assignment.sprint, assignment.type].filter(Boolean).join(' · '),
+    status:
+      assignment.status === 'completed'
+        ? 'completed'
+        : assignment.status === 'in_progress'
+          ? 'in-progress'
+          : 'pending',
+    priority:
+      assignment.priority === 'critical' || assignment.priority === 'high'
+        ? 'high'
+        : assignment.priority === 'medium'
+          ? 'medium'
+          : 'low',
+    dueDate: toDate(assignment.updated_at).toISOString().slice(0, 10),
+    storyPoints: assignment.points ?? 1,
+  }));
+}
+
+export type DemoSnapshot = {
+  users: ApiEmployee[];
+  teams: ApiTeam[];
+  tasks: ApiAssignment[];
+  userStats: Awaited<ReturnType<typeof worksightApi.getUserStats>>;
+  wellness: Array<{
+    employeeId: string;
+    name: string;
+    workLifeBalanceScore: number;
+    burnoutScore: number;
+    riskLevel: 'low' | 'medium' | 'high';
+    completedTasks: number;
+    totalTasks: number;
+  }>;
+};
+
+export async function fetchDemoSnapshot(): Promise<DemoSnapshot> {
+  const [users, teams, tasks, userStats] = await Promise.all([
+    worksightApi.getUsers(),
+    worksightApi.getTeams(),
+    worksightApi.getTasks(),
+    worksightApi.getUserStats(),
+  ]);
+
+  // Sample a few employees for wellness framing (avoid N×round-trips for everyone)
+  const sample = users.filter(u => u.role !== 'guest').slice(0, 6);
+  const wellness = await Promise.all(
+    sample.map(async employee => {
+      const stats = await worksightApi.getTaskStats(employee.id);
+      const burnoutScore = burnoutFromStats(stats);
+      return {
+        employeeId: employee.id,
+        name: employee.name,
+        workLifeBalanceScore: stats.workLifeBalanceScore,
+        burnoutScore,
+        riskLevel: riskFromBurnout(burnoutScore),
+        completedTasks: stats.completedTasks,
+        totalTasks: stats.totalTasks,
+      };
+    })
+  );
+
+  return { users, teams, tasks, userStats, wellness };
+}
diff --git a/apps/web/src/lib/mvp-data.ts b/apps/web/src/lib/mvp-data.ts
new file mode 100644
index 0000000..7fbe514
--- /dev/null
+++ b/apps/web/src/lib/mvp-data.ts
@@ -0,0 +1,323 @@
+/**
+ * MVP data bridge: map @worksight/common fixtures/utils into web view models.
+ * Keeps dashboard/admin pages free of duplicated local mocks.
+ */
+import { UserRole } from '@/auth/types';
+import type { UserWithMetrics } from '@/schemas/user';
+import {
+  Activities,
+  Assignments,
+  DataSources,
+  Employees,
+  SurveyQuestionnaire,
+  SurveyResponseList,
+  Surveys,
+  Teams,
+} from '@worksight/common/data';
+import type {
+  Activity,
+  Assignment,
+  EmployeeProfile,
+  Survey as CommonSurvey,
+} from '@worksight/common/types';
+import {
+  ActivityLookup,
+  AssignmentLookup,
+  EmployeeLookup,
+  SourceLookup,
+  SurveyMetadataLookup,
+  SurveyQuestionLookup,
+  SurveyResponsesLookup,
+  TeamLookup,
+} from '@worksight/common/utils';
+
+export const employeeLookup = new EmployeeLookup(Employees);
+export const teamLookup = new TeamLookup(Teams);
+export const assignmentLookup = new AssignmentLookup(Assignments);
+export const activityLookup = new ActivityLookup(Activities);
+export const sourceLookup = new SourceLookup(DataSources);
+export const surveyLookup = new SurveyMetadataLookup(Surveys);
+export const surveyQuestionLookup = new SurveyQuestionLookup(SurveyQuestionnaire);
+export const surveyResponseMetaLookup = new SurveyResponsesLookup(SurveyResponseList);
+
+const ROLE_MAP: Record<string, UserRole> = {
+  employee: UserRole.EMPLOYEE,
+  team_lead: UserRole.TEAM_LEAD,
+  manager: UserRole.MANAGER,
+  admin: UserRole.ADMIN,
+  super_admin: UserRole.SUPER_ADMIN,
+};
+
+function assertFixturesPopulated(): void {
+  if (Employees.length === 0) {
+    throw new Error('@worksight/common Employees fixture is empty');
+  }
+  if (Assignments.length === 0) {
+    throw new Error('@worksight/common Assignments fixture is empty');
+  }
+  if (Surveys.length === 0) {
+    throw new Error('@worksight/common Surveys fixture is empty');
+  }
+}
+
+assertFixturesPopulated();
+
+function departmentLabel(employee: EmployeeProfile): string {
+  const first = employee.department.find((d) => d && d.length > 0);
+  return first || 'unassigned';
+}
+
+function teamLabel(employee: EmployeeProfile): string {
+  if (employee.team) {
+    const team = teamLookup.getById(employee.team);
+    if (team) return team.name;
+  }
+  const managed = teamLookup.getByManager(employee.id);
+  if (managed[0]) return managed[0].name;
+  const memberTeam = Teams.find((t) => t.member_ids.includes(employee.id));
+  return memberTeam?.name ?? departmentLabel(employee);
+}
+
+function mapRole(role: string): UserRole {
+  return ROLE_MAP[role] ?? UserRole.EMPLOYEE;
+}
+
+function relativeTime(date: Date): string {
+  const deltaMs = Date.now() - date.getTime();
+  const minutes = Math.max(1, Math.floor(deltaMs / 60_000));
+  if (minutes < 60) return `${minutes} minutes ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 48) return `${hours} hours ago`;
+  const days = Math.floor(hours / 24);
+  return `${days} days ago`;
+}
+
+function riskFromBurnout(score: number): 'low' | 'medium' | 'high' {
+  if (score >= 7) return 'high';
+  if (score >= 4) return 'medium';
+  return 'low';
+}
+
+/** Admin users table rows from common employees + task/survey lookupt. */
+export function getUsersWithMetrics(): UserWithMetrics[] {
+  return employeeLookup
+    .all()
+    .filter((e) => e.role !== 'guest')
+    .map((employee) => {
+      const stats = assignmentLookup.getStats(employee.id);
+      const burnoutScore = Math.min(
+        10,
+        Math.round(((100 - stats.workLifeBalanceScore) / 10) * 10) / 10
+      );
+      const surveyCompleted = surveyResponseMetaLookup
+        .all()
+        .some((r) => r.employee_id === employee.id || r.employee_id === employee.internal_id);
+
+      return {
+        id: employee.id,
+        name: employee.name,
+        email: employee.email,
+        role: mapRole(employee.role),
+        department: departmentLabel(employee),
+        team: teamLabel(employee),
+        burnoutScore,
+        lastActive: relativeTime(employee.updated_at),
+        surveyCompleted,
+        riskLevel: riskFromBurnout(burnoutScore),
+        tasksCompleted: stats.completedTasks,
+      };
+    });
+}
+
+export type MvpTask = {
+  id: string;
+  title: string;
+  description: string;
+  status: 'todo' | 'in-progress' | 'completed';
+  priority: 'low' | 'medium' | 'high';
+  dueDate: string;
+  estimatedHours: number;
+  order: number;
+  assigneeId?: string;
+};
+
+function mapAssignmentStatus(status: Assignment['status']): MvpTask['status'] {
+  if (status === 'in_progress') return 'in-progress';
+  if (status === 'completed') return 'completed';
+  return 'todo';
+}
+
+function mapAssignmentPriority(priority: Assignment['priority']): MvpTask['priority'] {
+  if (priority === 'critical' || priority === 'high') return 'high';
+  if (priority === 'medium') return 'medium';
+  return 'low';
+}
+
+/** Task board rows from common Assignments. */
+export function getMvpTasks(): MvpTask[] {
+  return assignmentLookup.all().map((assignment, index) => ({
+    id: assignment.id,
+    title: assignment.title ?? assignment.external_id ?? 'Untitled task',
+    description: [assignment.epic, assignment.sprint, assignment.type]
+      .filter(Boolean)
+      .join(' · '),
+    status: mapAssignmentStatus(assignment.status),
+    priority: mapAssignmentPriority(assignment.priority),
+    dueDate: assignment.updated_at.toISOString().slice(0, 10),
+    estimatedHours: Math.max(1, Math.round((assignment.points ?? 1) * 0.5)),
+    order: index,
+    assigneeId: assignment.employee_id,
+  }));
+}
+
+export type MvpSurvey = {
+  id: string;
+  title: string;
+  description: string;
+  status: 'draft' | 'active' | 'paused' | 'completed';
+  questionCount: number;
+  responseCount: number;
+  createdAt: string;
+  lastModified: string;
+  createdBy: string;
+  category: 'burnout' | 'satisfaction' | 'wellness' | 'feedback';
+  targetAudience: 'all' | 'managers' | 'employees' | 'specific';
+};
+
+function surveyTitle(survey: CommonSurvey): string {
+  return `Wellness Survey (${survey.num_questions} questions)`;
+}
+
+/** Admin survey list from common Surveys + questions + response metadata. */
+export function getMvpSurveys(): MvpSurvey[] {
+  const creators = new Map(employeeLookup.all().map((e) => [e.id, e.name]));
+  const responseCounts = surveyResponseMetaLookup.getStats().submissionsPerSurvey;
+
+  return surveyLookup.all().map((survey) => {
+    const questionCount =
+      surveyQuestionLookup.getStats(survey.id).totalQuestions || survey.num_questions;
+    return {
+      id: survey.id,
+      title: surveyTitle(survey),
+      description: 'Burnout and wellness assessment from @worksight/common fixtures',
+      status: 'active' as const,
+      questionCount,
+      responseCount: responseCounts[survey.id] ?? SurveyResponseList.length,
+      createdAt: survey.created_at.toISOString().slice(0, 10),
+      lastModified: survey.created_at.toISOString().slice(0, 10),
+      createdBy: creators.get(survey.created_by) ?? survey.created_by,
+      category: 'burnout' as const,
+      targetAudience: 'all' as const,
+    };
+  });
+}
+
+export function findEmployeeByEmail(email: string): EmployeeProfile | null {
+  return employeeLookup.all().find((e) => e.email === email) ?? null;
+}
+
+export function getEmployeeProductivityStats(employeeId: string) {
+  return assignmentLookup.getStats(employeeId);
+}
+
+export function getAfterHoursActivities(): Activity[] {
+  return activityLookup.getAfterHoursActivities();
+}
+
+export function getWeekendActivities(): Activity[] {
+  return activityLookup.getWeekendActivities();
+}
+
+export function getTeamMetaStats() {
+  const allActivities = activityLookup.all();
+  const metaActivities = allActivities.filter(
+    (a) =>
+      a.description.toLowerCase().includes('meta') ||
+      a.description.toLowerCase().includes('ironic') ||
+      a.description.toLowerCase().includes('4th wall') ||
+      a.description.toLowerCase().includes('recursive')
+  );
+
+  const allAssignments = assignmentLookup.all();
+  const metaAssignments = allAssignments.filter(
+    (a) =>
+      a.epic === 'FOURTH-WALL-BREAKS' ||
+      (a.title?.toLowerCase().includes('meta') ?? false) ||
+      (a.title?.toLowerCase().includes('ironic') ?? false)
+  );
+
+  return {
+    totalMetaActivities: metaActivities.length,
+    totalMetaAssignments: metaAssignments.length,
+    metaActivityPercentage:
+      allActivities.length > 0 ? (metaActivities.length / allActivities.length) * 100 : 0,
+    selfAwarenessLevel: metaActivities.length + metaAssignments.length,
+    fourthWallIntegrity: Math.max(0, 100 - metaActivities.length * 5),
+  };
+}
+
+export function getDataSourceUsageStats() {
+  const sources = sourceLookup.all();
+  const sourceStats = {} as Record<
+    string,
+    {
+      name: string;
+      assignments: number;
+      activities: number;
+      total: number;
+      types: string[];
+    }
+  >;
+
+  for (const source of sources) {
+    const assignments = assignmentLookup.filter({ source_id: source.id }).count();
+    const activities = activityLookup.filter({ source_id: source.id }).count();
+    if (assignments === 0 && activities === 0) continue;
+    sourceStats[source.id] = {
+      name: source.name,
+      assignments,
+      activities,
+      total: assignments + activities,
+      types: source.type,
+    };
+  }
+
+  return sourceStats;
+}
+
+export function getEmployeeCount(): number {
+  return employeeLookup.count();
+}
+
+/** Legacy record shape used by offline auth / api helpers. */
+export function getEmployeesRecord(): Record<
+  string,
+  {
+    internal_id: string;
+    email: string;
+    name: string;
+    role: string;
+    manager_id: string;
+    date_joined: Date;
+    department: string;
+    created_at: Date;
+    updated_at: Date;
+  }
+> {
+  return Object.fromEntries(
+    employeeLookup.all().map((e) => [
+      e.id,
+      {
+        internal_id: e.internal_id,
+        email: e.email,
+        name: e.name,
+        role: e.role,
+        manager_id: e.manager_id ?? '',
+        date_joined: e.date_joined,
+        department: departmentLabel(e),
+        created_at: e.created_at,
+        updated_at: e.updated_at,
+      },
+    ])
+  );
+}
diff --git a/apps/web/src/lib/worksight-api.ts b/apps/web/src/lib/worksight-api.ts
new file mode 100644
index 0000000..c7fa123
--- /dev/null
+++ b/apps/web/src/lib/worksight-api.ts
@@ -0,0 +1,92 @@
+/**
+ * Client for the Nest API (@worksight/api).
+ * Responses are typed against @worksight/common; payloads are fixture-backed.
+ */
+import type { Activity, Assignment, EmployeeProfile, Team } from '@worksight/common/types';
+
+export type DataSourceMode = 'api' | 'fixtures';
+
+export function getApiBaseUrl(): string {
+  return (process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001').replace(/\/$/, '');
+}
+
+/** Prefer Nest API when NEXT_PUBLIC_USE_API=true; otherwise local common fixtures. */
+export function getDataSourceMode(): DataSourceMode {
+  return process.env.NEXT_PUBLIC_USE_API === 'true' ? 'api' : 'fixtures';
+}
+
+export function isApiDataMode(): boolean {
+  return getDataSourceMode() === 'api';
+}
+
+async function apiGet<T>(path: string): Promise<T> {
+  const url = `${getApiBaseUrl()}${path.startsWith('/') ? path : `/${path}`}`;
+  const response = await fetch(url, {
+    headers: { Accept: 'application/json' },
+    cache: 'no-store',
+  });
+  if (!response.ok) {
+    throw new Error(`API ${path} failed: ${response.status} ${response.statusText}`);
+  }
+  return response.json() as Promise<T>;
+}
+
+export type ApiEmployeeStats = {
+  totalEmployees: number;
+  roles: Array<{ role: string; count: number }>;
+  departments: Array<{ department: string; count: number }>;
+  adminCount: number;
+};
+
+export type ApiTaskStats = {
+  totalTasks: number;
+  completedTasks: number;
+  completionRate: number;
+  totalStoryPoints: number;
+  completedStoryPoints: number;
+  storyPointsCompletionRate: number;
+  totalActivities: number;
+  afterHoursActivities: number;
+  weekendActivities: number;
+  urgentActivities?: number;
+  workLifeBalanceScore: number;
+};
+
+/** JSON dates arrive as strings from Nest. */
+export type ApiEmployee = Omit<EmployeeProfile, 'date_joined' | 'created_at' | 'updated_at'> & {
+  date_joined: string | Date;
+  created_at: string | Date;
+  updated_at: string | Date;
+};
+
+export type ApiAssignment = Omit<Assignment, 'created_at' | 'updated_at'> & {
+  created_at: string | Date;
+  updated_at: string | Date;
+};
+
+export type ApiActivity = Omit<Activity, 'timestamp' | 'created_at'> & {
+  timestamp: string | Date;
+  created_at: string | Date;
+};
+
+export type ApiTeam = Team;
+
+export const worksightApi = {
+  getUsers: () => apiGet<ApiEmployee[]>('/users'),
+  getUserStats: () => apiGet<ApiEmployeeStats>('/users/stats'),
+  getTeams: () => apiGet<ApiTeam[]>('/teams'),
+  getTasks: (employeeId?: string) =>
+    apiGet<ApiAssignment[]>(
+      employeeId ? `/tasks?employee_id=${encodeURIComponent(employeeId)}` : '/tasks'
+    ),
+  getTaskStats: (employeeId: string) =>
+    apiGet<ApiTaskStats>(`/tasks/stats/${encodeURIComponent(employeeId)}`),
+  getActivities: (employeeId?: string) =>
+    apiGet<ApiActivity[]>(
+      employeeId ? `/activities?employee_id=${encodeURIComponent(employeeId)}` : '/activities'
+    ),
+};
+
+export function toDate(value: string | Date): Date {
+  return value instanceof Date ? value : new Date(value);
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 85c0b83..68b68b6 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -31,6 +31,9 @@
       "@worksight/common": [
         "../../packages/common/src"
       ],
+      "@worksight/common/*": [
+        "../../packages/common/src/*"
+      ],
       "@/*": [
         "./src/*"
       ]
diff --git a/docs/handoffs/2026-07-25-demo-path.md b/docs/handoffs/2026-07-25-demo-path.md
index 0bebc1d..c317744 100644
--- a/docs/handoffs/2026-07-25-demo-path.md
+++ b/docs/handoffs/2026-07-25-demo-path.md
@@ -1,22 +1,50 @@
 # HANDOFF — E2E demo path (#18)
 
-**Status:** Planned  
-**Branch:** `feat/mvp-demo`  
+**Status:** Done (MVP slice)  
+**Branch:** `feat/mvp-demo-18` (stacked on `feat/mvp-wire-api-17` + merge of
+`feat/mvp-wire-web`)  
 **Issue(s):** #18  
 **Last updated:** 2026-07-25
 
 ## Bottom line
-One documented happy path: start apps → open dashboard → see common-driven well-being/task widgets.
+
+One documented happy path: start API + web → open `/demo` → see common-driven
+employee/team/task + well-being widgets. Fixture-backed only (not Supabase).
 
 ## Current state
-No single demo runbook; auth/demo may be partial.
+
+- `docs/mvp/DEMO.md` runbook + `scripts/demo.sh` / `pnpm demo`
+- Public `/demo` page fetches Nest `GET /users|/teams|/tasks|/tasks/stats/:id`
+- `NEXT_PUBLIC_USE_API=true` wires `/admin/users`, `/tasks`, `/dashboard/tasks`
+  to Nest (falls back to local fixtures on API failure)
+- API defaults to port **3001** with CORS for the web origin
+- Stack depends on sibling #16 (web) and #17 (API) tips
 
 ## Hook points
-- Root README or `docs/mvp/DEMO.md`
-- Optional script `scripts/demo.sh`
+
+- `apps/web/src/app/demo/page.tsx`
+- `apps/web/src/lib/worksight-api.ts`, `mvp-api-bridge.ts`
+- `scripts/demo.sh`, `docs/mvp/DEMO.md`
 
 ## How to verify
-Follow DEMO.md from clean terminal; finish with populated UI.
+
+```bash
+pnpm --filter @worksight/common build
+pnpm --filter @worksight/api build
+pnpm --filter @worksight/web build
+PORT=3001 node apps/api/dist/main.js &
+curl -s localhost:3001/users | head -c 200
+# then: pnpm demo   OR open http://localhost:3000/demo with API up
+```
 
 ## Done means
-- [ ] Runbook exists and works on this machine
+
+- [x] Runbook exists and works on this machine
+- [x] Curl checklist documents API contract proof
+- [x] Burnout / well-being framing visible with fixture data (`/demo`)
+
+## Known gaps
+
+- Authenticated dashboard home still uses localStorage wellness history; `/demo`
+  is the honest E2E proof for API ↔ web agreement.
+- No screenshot automation in CI yet.
diff --git a/docs/handoffs/2026-07-25-wire-web-common.md b/docs/handoffs/2026-07-25-wire-web-common.md
index 2acc661..456905f 100644
--- a/docs/handoffs/2026-07-25-wire-web-common.md
+++ b/docs/handoffs/2026-07-25-wire-web-common.md
@@ -1,29 +1,29 @@
 # HANDOFF — Wire web to common (#16)
 
-**Status:** Planned  
+**Status:** In progress (MVP slice)  
 **Branch:** `feat/mvp-wire-web`  
 **Issue(s):** #16  
 **Last updated:** 2026-07-25
 
 ## Bottom line
-Dashboard/UI uses `@worksight/common` **data + types + utils** (employees, tasks, survey, burnout, datasources) instead of duplicated local mocks.
+Dashboard/UI uses `@worksight/common` **data + types + utils** (employees, tasks, survey) instead of duplicated local mocks.
 
 ## Current state
 - Package exports: `@worksight/common`, `/data`, `/types`, `/utils`
-- Fixtures in `packages/common/src/data/*.ts`
-- Web landing is marketing-only; limited common import (api uses `Roles` from types)
-
-## Hook points
-- `apps/web/src/app/**` dashboard routes
-- `apps/web/src/store(s)/**`, `data/`, `hooks/`
-- `next.config.ts` transpilePackages already aware of common
+- **Slice landed:** `apps/web/src/lib/mvp-data.ts` bridges common → dashboard stats, `/tasks`, `/dashboard/tasks`, `/admin/users`, `/admin/surveys`
+- Local `@/data/employees` re-exports common via compatibility shim
+- Managers (E001–E004) added to common `Employees` so assignments/teams resolve
 
 ## How to verify
 ```bash
+pnpm --filter @worksight/common build
+pnpm --filter @worksight/web type-check
+pnpm --filter @worksight/web build
 pnpm --filter @worksight/web dev
-# open dashboard; employees/tasks populated from common fixtures
+# open /dashboard, /dashboard/tasks, /admin/users, /admin/surveys
 ```
 
 ## Done means
-- [ ] ≥ employees + tasks + survey views import from common
-- [ ] No silent empty fallbacks when fixtures exist
+- [x] ≥ employees + tasks + survey views import from common
+- [x] No silent empty fallbacks when fixtures exist
+- [ ] Remaining local fixtures (`work-tracking`, `surveys`, survey form) fully retired
diff --git a/docs/mvp/DEMO.md b/docs/mvp/DEMO.md
new file mode 100644
index 0000000..885fed8
--- /dev/null
+++ b/docs/mvp/DEMO.md
@@ -0,0 +1,90 @@
+# MVP demo path (#18)
+
+One happy path: **start API + web → open `/demo` → see employees, teams, tasks,
+and well-being widgets** populated from the shared `@worksight/common` contract.
+
+> **Honest scope:** data is **fixture-backed** via Nest. This is not Supabase
+> persistence.
+
+## Stack dependency
+
+This demo branch stacks on:
+
+- `#16` web → common (`feat/mvp-wire-web`)
+- `#17` API → common (`feat/mvp-wire-api-17`)
+
+Base for the PR is typically `feat/mvp-stabilize`; merge/rebase after sibling
+PRs land.
+
+## One-command demo
+
+From the repo root (after `pnpm install`):
+
+```bash
+pnpm demo
+# or: bash scripts/demo.sh
+```
+
+That script:
+
+1. Builds `@worksight/common` and `@worksight/api`
+2. Starts API on **`:3001`** (CORS for `http://localhost:3000`)
+3. Curls `/users`, `/teams`, `/tasks` and prints counts
+4. Starts web on **`:3000`** with:
+   - `NEXT_PUBLIC_IS_OFFLINE=true` (no Supabase required for login)
+   - `NEXT_PUBLIC_USE_API=true`
+   - `NEXT_PUBLIC_API_URL=http://localhost:3001`
+
+Then open:
+
+| URL                                   | What you should see                                                             |
+| ------------------------------------- | ------------------------------------------------------------------------------- |
+| http://localhost:3000/demo            | Public E2E page: counts + burnout/well-being sample from `GET /tasks/stats/:id` |
+| http://localhost:3000/admin/users     | Users with burnout risk (API when toggle on; else fixtures)                     |
+| http://localhost:3000/dashboard/tasks | Assignment board from common/API                                                |
+
+## Manual (split terminals)
+
+```bash
+# Terminal A — API
+pnpm --filter @worksight/common build
+pnpm --filter @worksight/api build
+PORT=3001 CORS_ORIGINS=http://localhost:3000 pnpm --filter @worksight/api start:prod
+
+# Terminal B — Web
+NEXT_PUBLIC_IS_OFFLINE=true \
+IS_OFFLINE=true \
+NEXT_PUBLIC_USE_API=true \
+NEXT_PUBLIC_API_URL=http://localhost:3001 \
+  pnpm --filter @worksight/web dev
+```
+
+## Curl checklist
+
+```bash
+curl -s http://localhost:3001/users | head -c 240; echo
+curl -s http://localhost:3001/teams | head -c 240; echo
+curl -s http://localhost:3001/tasks | head -c 240; echo
+curl -s http://localhost:3001/users/stats; echo
+# pick an employee id from /users, then:
+# curl -s http://localhost:3001/tasks/stats/<employee-id>
+```
+
+Expect non-empty JSON arrays matching `EmployeeProfile[]`, `Team[]`,
+`Assignment[]` from `@worksight/common`.
+
+## Data-source toggle
+
+| Env                                 | Behavior                                                                          |
+| ----------------------------------- | --------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_USE_API` unset/`false` | Web uses in-process `@worksight/common` fixtures (`mvp-data.ts`)                  |
+| `NEXT_PUBLIC_USE_API=true`          | `/admin/users`, `/tasks`, `/dashboard/tasks` fetch Nest; `/demo` always hits Nest |
+| `NEXT_PUBLIC_API_URL`               | API base (default `http://localhost:3001`)                                        |
+
+## Known gaps
+
+- Survey / attendance / burnout endpoints are not on the API yet (common types
+  only).
+- `/demo` is the auth-free proof path; full dashboards still need offline login
+  when Supabase is unset.
+- Fixture employee ids are not all valid UUIDs (known from #17).
diff --git a/docs/mvp/README.md b/docs/mvp/README.md
index 57ab4b5..cabd1e3 100644
--- a/docs/mvp/README.md
+++ b/docs/mvp/README.md
@@ -5,34 +5,44 @@
 > **Local:** `/home/kaoru/work/4sight/worksight`  
 > **Status:** Plan to build (MVP)  
 > **Epic:** [#14 MVP: WorkSight running on @worksight/common data layer](https://github.com/4sightorg/worksight/issues/14)  
-> **Base tip:** `fix/restore-install-build-canary` (pnpm cutover in flight)
+> **Base
+> tip:** `fix/restore-install-build-canary` (pnpm cutover in flight)
 
 ## Problem
-`@worksight/common` already has **types / data / utils** (employees, tasks, survey, burnout, datasources), but the product surface is mostly a landing page. Web type-check fails on Jest globals in tests. Goal: **MVP that actually runs on the common data classes**.
+
+`@worksight/common` already has **types / data / utils** (employees, tasks,
+survey, burnout, datasources), but the product surface is mostly a landing page.
+Web type-check fails on Jest globals in tests. Goal: **MVP that actually runs on
+the common data classes**.
 
 ## Definition of Done
+
 - [ ] common + web + api type-check/build green
 - [ ] Web dashboards consume `@worksight/common` fixtures/utils
 - [ ] API shapes align with common types
-- [ ] Documented demo path shows populated well-being/task views
+- [x] Documented demo path shows populated well-being/task views
+      (`docs/mvp/DEMO.md`, `pnpm demo`)
 - [ ] README matches Nest + Next 15 + packages reality
 - [ ] Handoffs for each workstream
 
 ## Workstreams → issues
 
-| # | Workstream | Issue | Pri |
-|---|------------|-------|-----|
-| W1 | Stabilize install / type-check / common build | [#15](https://github.com/4sightorg/worksight/issues/15) | P0 |
-| W2 | Wire web → common data/types/utils | [#16](https://github.com/4sightorg/worksight/issues/16) | P0 |
-| W3 | Wire API → common types | [#17](https://github.com/4sightorg/worksight/issues/17) | P0 |
-| W4 | E2E demo path | [#18](https://github.com/4sightorg/worksight/issues/18) | P1 |
-| W5 | Docs sync | [#19](https://github.com/4sightorg/worksight/issues/19) | P1 |
-| W6 | Centralize deployments | [#20](https://github.com/4sightorg/worksight/issues/20) | P1 |
+| #   | Workstream                                    | Issue                                                   | Pri |
+| --- | --------------------------------------------- | ------------------------------------------------------- | --- |
+| W1  | Stabilize install / type-check / common build | [#15](https://github.com/4sightorg/worksight/issues/15) | P0  |
+| W2  | Wire web → common data/types/utils            | [#16](https://github.com/4sightorg/worksight/issues/16) | P0  |
+| W3  | Wire API → common types                       | [#17](https://github.com/4sightorg/worksight/issues/17) | P0  |
+| W4  | E2E demo path                                 | [#18](https://github.com/4sightorg/worksight/issues/18) | P1  |
+| W5  | Docs sync                                     | [#19](https://github.com/4sightorg/worksight/issues/19) | P1  |
+| W6  | Centralize deployments                        | [#20](https://github.com/4sightorg/worksight/issues/20) | P1  |
 
 **Suggested order:** W1 → W2∥W3 → W4 → W5.
 
 ## Non-goals
-Live external connectors (Jira/Trello/GitHub/Odoo/Slack); production auth hardening; docs site polish beyond honesty.
+
+Live external connectors (Jira/Trello/GitHub/Odoo/Slack); production auth
+hardening; docs site polish beyond honesty.
 
 ## Handoffs
+
 See [../handoffs/](../handoffs/).
diff --git a/package.json b/package.json
index d36a59b..9a240d7 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,12 @@
     "build": "turbo build",
     "build:web": "turbo build --filter=@worksight/web",
     "build:docs": "turbo build --filter=@worksight/docs",
+    "build:api": "turbo build --filter=@worksight/api",
     "dev": "turbo dev",
     "dev:web": "turbo dev --filter=@worksight/web",
+    "dev:api": "turbo dev --filter=@worksight/api",
     "dev:docs": "turbo dev --filter=@worksight/docs",
+    "demo": "bash scripts/demo.sh",
     "lint": "turbo lint",
     "lint:fix": "turbo lint:fix",
     "type-check": "turbo type-check",
diff --git a/packages/common/src/data/employees.ts b/packages/common/src/data/employees.ts
index 1e1a2f1..aa88e4b 100644
--- a/packages/common/src/data/employees.ts
+++ b/packages/common/src/data/employees.ts
@@ -1,6 +1,52 @@
 import { EmployeeProfile, Team } from '../types';
 
 export const Employees: EmployeeProfile[] = [
+  // Managers (referenced by Teams + Assignments)
+  {
+    id: '08b6fc43-77e6-4fcf-8ed8-dafc16b4b025',
+    internal_id: 'E001',
+    email: 'sjc.71415@gmail.com',
+    name: 'John Carlo Santos',
+    role: 'manager',
+    date_joined: new Date('2025-08-24'),
+    department: ['backend'],
+    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+  },
+  {
+    id: '58f36d76-f382-41b4-ad3e-f8192958d12b',
+    internal_id: 'E002',
+    email: 'dagsmagalona@gmail.com',
+    name: 'Adriel M. Magalona',
+    role: 'manager',
+    date_joined: new Date('2025-08-24'),
+    department: ['sysadmin'],
+    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+  },
+  {
+    id: '71400e28-3c2a-4694-8124-8fbb9a0b66d8',
+    internal_id: 'E003',
+    email: 'kielethanlanzanas@gmail.com',
+    name: 'Kiel Ethan L. Lanzanas',
+    role: 'manager',
+    date_joined: new Date('2025-08-24'),
+    department: ['data'],
+    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+  },
+  {
+    id: '88165ccb-2c80-455a-9ace-466a30448f67',
+    internal_id: 'E004',
+    email: 'ebenerado@gmail.com',
+    name: 'Ellah D. Benerado',
+    role: 'manager',
+    date_joined: new Date('2025-08-24'),
+    department: ['data'],
+    created_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+    updated_at: new Date('2025-08-24T16:51:38.176858+00:00'),
+  },
+
   // Team members under John Carlo Santos (Infra Manager)
   {
     id: 'e5a1b2c3-d4e5-f6g7-h8i9-j0k1l2m3n4o5',
diff --git a/scripts/demo.sh b/scripts/demo.sh
new file mode 100755
index 0000000..855361a
--- /dev/null
+++ b/scripts/demo.sh
@@ -0,0 +1,75 @@
+#!/usr/bin/env bash
+# Boot Nest API + Next web for the MVP E2E demo path (#18).
+# Fixture-backed only — does not start Supabase.
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$ROOT"
+
+API_PORT="${API_PORT:-3001}"
+WEB_PORT="${WEB_PORT:-3000}"
+API_URL="${NEXT_PUBLIC_API_URL:-http://localhost:${API_PORT}}"
+
+cleanup() {
+  if [[ -n "${API_PID:-}" ]] && kill -0 "$API_PID" 2>/dev/null; then
+    kill "$API_PID" 2>/dev/null || true
+  fi
+  if [[ -n "${WEB_PID:-}" ]] && kill -0 "$WEB_PID" 2>/dev/null; then
+    kill "$WEB_PID" 2>/dev/null || true
+  fi
+}
+trap cleanup EXIT INT TERM
+
+echo "==> Building @worksight/common (required before API)"
+pnpm --filter @worksight/common build
+
+echo "==> Building @worksight/api"
+pnpm --filter @worksight/api build
+
+echo "==> Starting API on :${API_PORT}"
+PORT="$API_PORT" CORS_ORIGINS="http://localhost:${WEB_PORT}" \
+  node apps/api/dist/main.js &
+API_PID=$!
+
+echo "==> Waiting for API health (GET /users)"
+for _ in $(seq 1 40); do
+  if curl -sf "${API_URL}/users" >/dev/null; then
+    break
+  fi
+  sleep 0.25
+done
+if ! curl -sf "${API_URL}/users" >/dev/null; then
+  echo "API failed to become ready at ${API_URL}" >&2
+  exit 1
+fi
+
+USER_COUNT=$(curl -sf "${API_URL}/users" | node -e "let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>console.log(JSON.parse(d).length))")
+TASK_COUNT=$(curl -sf "${API_URL}/tasks" | node -e "let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>console.log(JSON.parse(d).length))")
+TEAM_COUNT=$(curl -sf "${API_URL}/teams" | node -e "let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>console.log(JSON.parse(d).length))")
+
+echo "    /users  → ${USER_COUNT} employees"
+echo "    /teams  → ${TEAM_COUNT} teams"
+echo "    /tasks  → ${TASK_COUNT} assignments"
+
+echo "==> Starting web on :${WEB_PORT} (offline auth + API data mode)"
+NEXT_PUBLIC_IS_OFFLINE=true \
+IS_OFFLINE=true \
+NEXT_PUBLIC_USE_API=true \
+NEXT_PUBLIC_API_URL="$API_URL" \
+  pnpm --filter @worksight/web exec next dev --turbopack -p "$WEB_PORT" &
+WEB_PID=$!
+
+echo
+echo "Demo ready (fixture-backed, not Supabase):"
+echo "  API   ${API_URL}   (swagger ${API_URL}/api)"
+echo "  Web   http://localhost:${WEB_PORT}"
+echo "  Proof http://localhost:${WEB_PORT}/demo"
+echo
+echo "Curl checklist:"
+echo "  curl -s ${API_URL}/users | head -c 200"
+echo "  curl -s ${API_URL}/teams | head -c 200"
+echo "  curl -s ${API_URL}/tasks | head -c 200"
+echo
+echo "Ctrl+C to stop both processes."
+
+wait "$WEB_PID"
diff --git a/turbo.json b/turbo.json
index 3f5457a..94cac85 100644
--- a/turbo.json
+++ b/turbo.json
@@ -13,7 +13,9 @@
         "NEXT_PUBLIC_APP_DESCRIPTION",
         "NEXT_PUBLIC_APP_URL",
         "NEXT_PUBLIC_IS_OFFLINE",
-        "IS_OFFLINE"
+        "IS_OFFLINE",
+        "NEXT_PUBLIC_USE_API",
+        "NEXT_PUBLIC_API_URL"
       ]
     },
     "dev": {