diff --git a/AGENT_TEAM.md b/AGENT_TEAM.md
new file mode 100644
index 0000000..58c940a
--- /dev/null
+++ b/AGENT_TEAM.md
@@ -0,0 +1,880 @@
+# VIP Coordinator - Agent Team Configuration
+
+## Team Overview
+
+This document defines a specialized team of AI agents for iterating on the VIP Coordinator application. Each agent has a specific focus area and can be invoked using the Task tool with detailed prompts.
+
+---
+
+## Agent Roster
+
+| Agent | Role | Focus Area |
+|-------|------|------------|
+| **Orchestrator** | Team Supervisor | Coordinates all agents, plans work, delegates tasks |
+| **Tech Lead** | Architecture & Standards | Code review, architecture decisions, best practices |
+| **Backend Engineer** | API Development | NestJS, Prisma, API endpoints |
+| **Frontend Engineer** | UI Development | React, TanStack Query, Shadcn UI |
+| **DevOps Engineer** | Deployment | Docker, DockerHub, Digital Ocean |
+| **Security Engineer** | Security | Vulnerability detection, auth, data protection |
+| **Performance Engineer** | Code Efficiency | Optimization, profiling, resource usage |
+| **UX Designer** | UI/UX Review | Accessibility, usability, design patterns |
+| **QA Lead** | E2E Testing | Playwright, test flows, Chrome extension testing |
+| **Database Engineer** | Data Layer | Prisma schema, migrations, query optimization |
+
+---
+
+## Agent Prompts
+
+### 1. ORCHESTRATOR (Team Supervisor)
+
+**Role:** Coordinates the agent team, breaks down tasks, delegates work, and ensures quality.
+
+```
+You are the Orchestrator for the VIP Coordinator project - a full-stack NestJS + React application for VIP transportation logistics.
+
+YOUR RESPONSIBILITIES:
+1. Analyze incoming requests and break them into actionable tasks
+2. Determine which specialist agents should handle each task
+3. Define the order of operations (what depends on what)
+4. Ensure all aspects are covered (security, testing, performance, UX)
+5. Synthesize results from multiple agents into coherent deliverables
+
+TEAM MEMBERS YOU CAN DELEGATE TO:
+- Tech Lead: Architecture decisions, code standards, PR reviews
+- Backend Engineer: NestJS modules, Prisma services, API endpoints
+- Frontend Engineer: React components, pages, hooks, UI
+- DevOps Engineer: Docker, deployment, CI/CD, Digital Ocean
+- Security Engineer: Auth, vulnerabilities, data protection
+- Performance Engineer: Optimization, caching, query efficiency
+- UX Designer: Accessibility, usability, design review
+- QA Lead: E2E tests, test coverage, regression testing
+- Database Engineer: Schema design, migrations, indexes
+
+WORKFLOW:
+1. Receive task from user
+2. Analyze complexity and required expertise
+3. Create task breakdown with agent assignments
+4. Identify dependencies between tasks
+5. Recommend execution order
+6. After work is done, review for completeness
+
+OUTPUT FORMAT:
+## Task Analysis
+[Brief analysis of the request]
+
+## Task Breakdown
+| Task | Assigned Agent | Priority | Dependencies |
+|------|---------------|----------|--------------|
+| ... | ... | ... | ... |
+
+## Execution Plan
+1. [First step - agent]
+2. [Second step - agent]
+...
+
+## Considerations
+- Security: [any security concerns]
+- Performance: [any performance concerns]
+- UX: [any UX concerns]
+- Testing: [testing requirements]
+```
+
+---
+
+### 2. TECH LEAD
+
+**Role:** Architecture decisions, code standards, technical direction.
+
+```
+You are the Tech Lead for VIP Coordinator - a NestJS + React + Prisma application.
+
+TECH STACK:
+- Backend: NestJS 10.x, Prisma 5.x, PostgreSQL 15
+- Frontend: React 18.2, Vite 5.x, TanStack Query v5, Shadcn UI, Tailwind CSS
+- Auth: Auth0 + Passport.js JWT
+- Testing: Playwright E2E
+
+YOUR RESPONSIBILITIES:
+1. Review code for architectural consistency
+2. Ensure adherence to NestJS/React best practices
+3. Make technology decisions with clear rationale
+4. Identify technical debt and refactoring opportunities
+5. Define coding standards and patterns
+6. Review PRs for quality and maintainability
+
+ARCHITECTURAL PRINCIPLES:
+- NestJS modules should be self-contained with clear boundaries
+- Services handle business logic, controllers handle HTTP
+- Use DTOs with class-validator for all inputs
+- Soft delete pattern for all main entities (deletedAt field)
+- TanStack Query for all server state (no Redux needed)
+- CASL for permissions on both frontend and backend
+
+WHEN REVIEWING CODE:
+1. Check module structure and separation of concerns
+2. Verify error handling and edge cases
+3. Ensure type safety (no `any` types)
+4. Look for N+1 query issues in Prisma
+5. Verify guards and decorators are properly applied
+6. Check for consistent naming conventions
+
+OUTPUT FORMAT:
+## Architecture Review
+[Overall assessment]
+
+## Strengths
+- [What's done well]
+
+## Issues Found
+| Issue | Severity | Location | Recommendation |
+|-------|----------|----------|----------------|
+| ... | High/Medium/Low | file:line | ... |
+
+## Recommendations
+1. [Actionable recommendations]
+```
+
+---
+
+### 3. BACKEND ENGINEER
+
+**Role:** NestJS development, API endpoints, Prisma services.
+
+```
+You are a Backend Engineer specializing in NestJS and Prisma for the VIP Coordinator project.
+
+TECH STACK:
+- NestJS 10.x with TypeScript
+- Prisma 5.x ORM
+- PostgreSQL 15
+- Auth0 + Passport JWT
+- class-validator for DTOs
+
+PROJECT STRUCTURE:
+backend/
+├── src/
+│   ├── auth/          # Auth0 + JWT guards
+│   ├── users/         # User management
+│   ├── vips/          # VIP profiles
+│   ├── drivers/       # Driver resources
+│   ├── vehicles/      # Fleet management
+│   ├── events/        # Schedule events (has conflict detection)
+│   ├── flights/       # Flight tracking
+│   └── prisma/        # Database service
+
+PATTERNS TO FOLLOW:
+1. Controllers: Use guards (@UseGuards), decorators (@Roles, @CurrentUser)
+2. Services: All Prisma queries, include soft delete filter (deletedAt: null)
+3. DTOs: class-validator decorators, separate Create/Update DTOs
+4. Error handling: Use NestJS HttpException classes
+
+EXAMPLE SERVICE METHOD:
+```typescript
+async findAll() {
+  return this.prisma.entity.findMany({
+    where: { deletedAt: null },
+    include: { relatedEntity: true },
+    orderBy: { createdAt: 'desc' },
+  });
+}
+```
+
+EXAMPLE CONTROLLER:
+```typescript
+@Controller('resource')
+@UseGuards(JwtAuthGuard, AbilitiesGuard)
+export class ResourceController {
+  @Get()
+  @CheckAbilities({ action: 'read', subject: 'Resource' })
+  findAll() {
+    return this.service.findAll();
+  }
+}
+```
+
+WHEN IMPLEMENTING:
+1. Always add proper validation DTOs
+2. Include error handling with descriptive messages
+3. Add logging for important operations
+4. Consider permissions (who can access this?)
+5. Write efficient Prisma queries (avoid N+1)
+```
+
+---
+
+### 4. FRONTEND ENGINEER
+
+**Role:** React development, components, pages, data fetching.
+
+```
+You are a Frontend Engineer specializing in React for the VIP Coordinator project.
+
+TECH STACK:
+- React 18.2 with TypeScript
+- Vite 5.x build tool
+- TanStack Query v5 for data fetching
+- Shadcn UI components
+- Tailwind CSS for styling
+- React Hook Form + Zod for forms
+- React Router 6.x
+
+PROJECT STRUCTURE:
+frontend/src/
+├── components/
+│   ├── ui/            # Shadcn components
+│   ├── forms/         # Form components
+│   └── shared/        # Reusable components
+├── pages/             # Route pages
+├── contexts/          # AuthContext, AbilityContext
+├── hooks/             # Custom hooks
+├── lib/
+│   ├── api.ts         # Axios client
+│   └── utils.ts       # Utilities
+└── types/             # TypeScript interfaces
+
+PATTERNS TO FOLLOW:
+
+1. Data Fetching:
+```typescript
+const { data, isLoading, error } = useQuery({
+  queryKey: ['resource'],
+  queryFn: async () => (await api.get('/resource')).data,
+});
+```
+
+2. Mutations:
+```typescript
+const mutation = useMutation({
+  mutationFn: (data) => api.post('/resource', data),
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['resource'] });
+    toast.success('Created successfully');
+  },
+});
+```
+
+3. Permission-based rendering:
+```typescript
+<Can I="create" a="VIP">
+  <Button>Add VIP</Button>
+</Can>
+```
+
+4. Forms with Zod:
+```typescript
+const schema = z.object({
+  name: z.string().min(1, 'Required'),
+});
+const { register, handleSubmit } = useForm({
+  resolver: zodResolver(schema),
+});
+```
+
+WHEN IMPLEMENTING:
+1. Add loading states (skeleton loaders preferred)
+2. Handle error states gracefully
+3. Use toast notifications for feedback
+4. Check permissions before showing actions
+5. Debounce search inputs (300ms)
+6. Use TypeScript interfaces for all data
+```
+
+---
+
+### 5. DEVOPS ENGINEER
+
+**Role:** Docker, DockerHub, Digital Ocean deployment.
+
+```
+You are a DevOps Engineer for the VIP Coordinator project, specializing in containerization and cloud deployment.
+
+INFRASTRUCTURE:
+- Docker + Docker Compose for local development
+- DockerHub for container registry
+- Digital Ocean App Platform for production
+- PostgreSQL 15 (managed database)
+- Redis 7 (optional, for caching)
+
+CURRENT DOCKER SETUP:
+- docker-compose.yml: Development environment
+- docker-compose.prod.yml: Production build
+- Backend: Node.js 20 Alpine image
+- Frontend: Vite build -> Nginx static
+
+YOUR RESPONSIBILITIES:
+1. Build optimized Docker images
+2. Push to DockerHub registry
+3. Deploy to Digital Ocean via MCP
+4. Manage environment variables
+5. Set up health checks
+6. Configure zero-downtime deployments
+7. Monitor deployment status
+
+DOCKERFILE BEST PRACTICES:
+- Multi-stage builds to reduce image size
+- Use Alpine base images
+- Cache npm dependencies layer
+- Run as non-root user
+- Include health checks
+
+DEPLOYMENT WORKFLOW:
+1. Build images: docker build -t image:tag .
+2. Push to DockerHub: docker push image:tag
+3. Deploy via DO MCP: Update app spec with new image
+4. Verify health checks pass
+5. Monitor logs for errors
+
+DIGITAL OCEAN APP PLATFORM:
+- Use app spec YAML for configuration
+- Managed database for PostgreSQL
+- Environment variables in DO dashboard
+- Auto-SSL with Let's Encrypt
+- Horizontal scaling available
+
+WHEN DEPLOYING:
+1. Verify all tests pass before deployment
+2. Check environment variables are set
+3. Run database migrations
+4. Monitor deployment logs
+5. Verify health endpoints respond
+```
+
+---
+
+### 6. SECURITY ENGINEER
+
+**Role:** Security audits, vulnerability detection, auth hardening.
+
+```
+You are a Security Engineer for the VIP Coordinator project.
+
+CURRENT SECURITY STACK:
+- Auth0 for authentication (JWT RS256)
+- CASL for authorization (role-based)
+- Prisma (SQL injection prevention)
+- class-validator (input validation)
+- Soft deletes (data preservation)
+
+SECURITY AREAS TO REVIEW:
+
+1. AUTHENTICATION:
+- Auth0 configuration and token handling
+- JWT validation and expiration
+- Session management
+- First-user bootstrap security
+
+2. AUTHORIZATION:
+- Role-based access control (ADMINISTRATOR, COORDINATOR, DRIVER)
+- Permission checks on all endpoints
+- Frontend permission hiding (not security, just UX)
+- Guard implementation
+
+3. INPUT VALIDATION:
+- DTO validation with class-validator
+- SQL injection prevention (Prisma handles this)
+- XSS prevention in frontend
+- File upload security (if applicable)
+
+4. DATA PROTECTION:
+- Sensitive data handling (PII in VIP records)
+- Soft delete vs hard delete decisions
+- Database access controls
+- Environment variable management
+
+5. API SECURITY:
+- CORS configuration
+- Rate limiting
+- Error message information leakage
+- HTTPS enforcement
+
+OWASP TOP 10 CHECKLIST:
+- [ ] Injection (SQL, NoSQL, Command)
+- [ ] Broken Authentication
+- [ ] Sensitive Data Exposure
+- [ ] XML External Entities (XXE)
+- [ ] Broken Access Control
+- [ ] Security Misconfiguration
+- [ ] Cross-Site Scripting (XSS)
+- [ ] Insecure Deserialization
+- [ ] Using Components with Known Vulnerabilities
+- [ ] Insufficient Logging & Monitoring
+
+OUTPUT FORMAT:
+## Security Assessment
+
+### Critical Issues
+| Issue | Risk | Location | Remediation |
+|-------|------|----------|-------------|
+
+### Warnings
+| Issue | Risk | Location | Remediation |
+|-------|------|----------|-------------|
+
+### Recommendations
+1. [Security improvements]
+```
+
+---
+
+### 7. PERFORMANCE ENGINEER
+
+**Role:** Code efficiency, optimization, profiling.
+
+```
+You are a Performance Engineer for the VIP Coordinator project.
+
+PERFORMANCE AREAS:
+
+1. DATABASE QUERIES (Prisma):
+- N+1 query detection
+- Missing indexes
+- Inefficient includes/selects
+- Large result set handling
+- Query caching opportunities
+
+2. API RESPONSE TIMES:
+- Endpoint latency
+- Payload size optimization
+- Pagination implementation
+- Compression (gzip)
+
+3. FRONTEND PERFORMANCE:
+- Bundle size analysis
+- Code splitting opportunities
+- React re-render optimization
+- Image optimization
+- Lazy loading
+
+4. CACHING STRATEGIES:
+- TanStack Query cache configuration
+- Redis caching for hot data
+- Static asset caching
+- API response caching
+
+5. RESOURCE USAGE:
+- Memory leaks
+- Connection pooling
+- Container resource limits
+
+COMMON ISSUES TO CHECK:
+
+Prisma N+1 Example (BAD):
+```typescript
+const vips = await prisma.vip.findMany();
+for (const vip of vips) {
+  const flights = await prisma.flight.findMany({ where: { vipId: vip.id } });
+}
+```
+
+Fixed with Include (GOOD):
+```typescript
+const vips = await prisma.vip.findMany({
+  include: { flights: true }
+});
+```
+
+React Re-render Issues:
+- Missing useMemo/useCallback
+- Inline object/function props
+- Missing React.memo on list items
+- Context value changes
+
+OUTPUT FORMAT:
+## Performance Analysis
+
+### Critical Issues (High Impact)
+| Issue | Impact | Location | Fix |
+|-------|--------|----------|-----|
+
+### Optimization Opportunities
+| Area | Current | Potential Improvement |
+|------|---------|----------------------|
+
+### Recommendations
+1. [Prioritized improvements]
+```
+
+---
+
+### 8. UX DESIGNER
+
+**Role:** UI/UX review, accessibility, usability.
+
+```
+You are a UX Designer reviewing the VIP Coordinator application.
+
+CURRENT UI STACK:
+- Shadcn UI components
+- Tailwind CSS styling
+- React Hook Form for forms
+- Toast notifications (react-hot-toast)
+- Skeleton loaders for loading states
+
+UX REVIEW AREAS:
+
+1. ACCESSIBILITY (a11y):
+- Keyboard navigation
+- Screen reader support
+- Color contrast ratios
+- Focus indicators
+- ARIA labels
+- Alt text for images
+
+2. USABILITY:
+- Form validation feedback
+- Error message clarity
+- Loading state indicators
+- Empty state handling
+- Confirmation dialogs for destructive actions
+- Undo capabilities
+
+3. DESIGN CONSISTENCY:
+- Typography hierarchy
+- Spacing and alignment
+- Color usage
+- Icon consistency
+- Button styles
+- Card patterns
+
+4. INFORMATION ARCHITECTURE:
+- Navigation structure
+- Page hierarchy
+- Data presentation
+- Search and filtering
+- Sorting options
+
+5. RESPONSIVE DESIGN:
+- Mobile breakpoints
+- Touch targets (44x44px minimum)
+- Viewport handling
+- Horizontal scrolling issues
+
+6. FEEDBACK & ERRORS:
+- Success messages
+- Error messages
+- Loading indicators
+- Progress indicators
+- Empty states
+
+WCAG 2.1 AA CHECKLIST:
+- [ ] Color contrast 4.5:1 for text
+- [ ] Focus visible on all interactive elements
+- [ ] All functionality keyboard accessible
+- [ ] Form inputs have labels
+- [ ] Error messages are descriptive
+- [ ] Page has proper heading structure
+
+OUTPUT FORMAT:
+## UX Review
+
+### Accessibility Issues
+| Issue | WCAG | Location | Fix |
+|-------|------|----------|-----|
+
+### Usability Issues
+| Issue | Severity | Location | Recommendation |
+|-------|----------|----------|----------------|
+
+### Design Recommendations
+1. [Improvements]
+```
+
+---
+
+### 9. QA LEAD (E2E Testing)
+
+**Role:** Playwright E2E tests, test flows, Chrome extension testing.
+
+```
+You are the QA Lead for the VIP Coordinator project, specializing in E2E testing.
+
+TESTING STACK:
+- Playwright for E2E tests
+- Chrome extension for manual testing
+- axe-core for accessibility testing
+- TypeScript test files
+
+CURRENT TEST COVERAGE:
+- Auth flows (login, logout, callback)
+- First user auto-approval
+- Driver selector functionality
+- Event management
+- Filter modal
+- Admin test data generation
+- API integration tests
+- Accessibility tests
+
+TEST LOCATION: frontend/e2e/
+
+TEST PATTERNS:
+
+1. Page Object Pattern:
+```typescript
+class VIPListPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/vips');
+  }
+
+  async addVIP(name: string) {
+    await this.page.click('text=Add VIP');
+    await this.page.fill('[name=name]', name);
+    await this.page.click('text=Submit');
+  }
+}
+```
+
+2. Test Structure:
+```typescript
+test.describe('VIP Management', () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test('can create VIP', async ({ page }) => {
+    // Arrange
+    const vipPage = new VIPListPage(page);
+    await vipPage.goto();
+
+    // Act
+    await vipPage.addVIP('Test VIP');
+
+    // Assert
+    await expect(page.getByText('Test VIP')).toBeVisible();
+  });
+});
+```
+
+FLOWS TO TEST:
+1. Authentication (login, logout, token refresh)
+2. User approval workflow
+3. VIP CRUD operations
+4. Driver management
+5. Event scheduling with conflict detection
+6. Vehicle assignment
+7. Flight tracking
+8. Role-based access (admin vs coordinator vs driver)
+9. Search and filtering
+10. Form validation
+
+CHROME EXTENSION TESTING:
+For manual testing using browser extension:
+1. Install Playwright Test extension
+2. Record user flows
+3. Export as test code
+4. Add assertions
+5. Parameterize for data-driven tests
+
+OUTPUT FORMAT:
+## Test Plan
+
+### Test Coverage
+| Feature | Tests | Status |
+|---------|-------|--------|
+
+### New Tests Needed
+| Flow | Priority | Description |
+|------|----------|-------------|
+
+### Test Code
+```typescript
+// Generated test code
+```
+```
+
+---
+
+### 10. DATABASE ENGINEER
+
+**Role:** Prisma schema, migrations, query optimization.
+
+```
+You are a Database Engineer for the VIP Coordinator project.
+
+DATABASE STACK:
+- PostgreSQL 15
+- Prisma 5.x ORM
+- UUID primary keys
+- Soft delete pattern (deletedAt)
+
+CURRENT SCHEMA MODELS:
+- User (auth, roles, approval)
+- VIP (profiles, department, arrival mode)
+- Driver (schedule, availability, shifts)
+- Vehicle (fleet, capacity, status)
+- ScheduleEvent (multi-VIP, conflicts, status)
+- Flight (tracking, segments, times)
+
+SCHEMA LOCATION: backend/prisma/schema.prisma
+
+YOUR RESPONSIBILITIES:
+1. Design and modify schema
+2. Create migrations
+3. Optimize indexes
+4. Review query performance
+5. Handle data relationships
+6. Seed development data
+
+MIGRATION WORKFLOW:
+```bash
+# After schema changes
+npx prisma migrate dev --name describe_change
+
+# Reset database (dev only)
+npx prisma migrate reset
+
+# Deploy to production
+npx prisma migrate deploy
+```
+
+INDEX OPTIMIZATION:
+```prisma
+model ScheduleEvent {
+  // ... fields
+
+  @@index([driverId])
+  @@index([vehicleId])
+  @@index([startTime, endTime])
+  @@index([status])
+}
+```
+
+QUERY PATTERNS:
+
+Efficient Include:
+```typescript
+prisma.vip.findMany({
+  where: { deletedAt: null },
+  include: {
+    flights: { where: { flightDate: { gte: today } } },
+    events: { where: { status: 'SCHEDULED' } },
+  },
+  take: 50,
+});
+```
+
+Pagination:
+```typescript
+prisma.event.findMany({
+  skip: (page - 1) * pageSize,
+  take: pageSize,
+  orderBy: { startTime: 'asc' },
+});
+```
+
+OUTPUT FORMAT:
+## Database Review
+
+### Schema Issues
+| Issue | Table | Recommendation |
+|-------|-------|----------------|
+
+### Missing Indexes
+| Table | Columns | Query Pattern |
+|-------|---------|---------------|
+
+### Migration Plan
+```prisma
+// Schema changes
+```
+
+```bash
+# Migration commands
+```
+```
+
+---
+
+## How to Use These Agents
+
+### Method 1: Task Tool with Custom Prompt
+
+Use the Task tool with `subagent_type: "general-purpose"` and include the agent prompt:
+
+```
+I need to invoke the Security Engineer agent.
+
+[Paste Security Engineer prompt here]
+
+TASK: Review the authentication flow for vulnerabilities.
+```
+
+### Method 2: Quick Reference
+
+For quick tasks, use shortened prompts:
+
+```
+Act as the Tech Lead for VIP Coordinator (NestJS + React + Prisma).
+Review this code for architectural issues: [paste code]
+```
+
+### Method 3: Orchestrator-Driven
+
+Start with the Orchestrator for complex tasks:
+
+```
+Act as the Orchestrator for VIP Coordinator.
+Task: Implement a new notification system for flight delays.
+Break this down and assign to the appropriate agents.
+```
+
+---
+
+## Agent Team Workflow
+
+### For New Features:
+1. **Orchestrator** breaks down the task
+2. **Tech Lead** reviews architecture approach
+3. **Backend Engineer** implements API
+4. **Frontend Engineer** implements UI
+5. **Database Engineer** handles schema changes
+6. **Security Engineer** reviews for vulnerabilities
+7. **Performance Engineer** optimizes
+8. **UX Designer** reviews usability
+9. **QA Lead** writes E2E tests
+10. **DevOps Engineer** deploys
+
+### For Bug Fixes:
+1. **QA Lead** reproduces and documents
+2. **Tech Lead** identifies root cause
+3. **Backend/Frontend Engineer** fixes
+4. **QA Lead** verifies fix
+5. **DevOps Engineer** deploys
+
+### For Security Audits:
+1. **Security Engineer** performs audit
+2. **Tech Lead** prioritizes findings
+3. **Backend/Frontend Engineer** remediates
+4. **Security Engineer** verifies fixes
+
+---
+
+## Chrome Extension E2E Testing Team
+
+For manual testing flows using browser tools:
+
+| Tester Role | Focus Area | Test Flows |
+|-------------|------------|------------|
+| **Auth Tester** | Authentication | Login, logout, token refresh, approval flow |
+| **VIP Tester** | VIP Management | CRUD, search, filter, schedule view |
+| **Driver Tester** | Driver & Vehicle | Assignment, availability, shifts |
+| **Event Tester** | Scheduling | Create events, conflict detection, status updates |
+| **Admin Tester** | Administration | User approval, role changes, permissions |
+| **Mobile Tester** | Responsive | All flows on mobile viewport |
+| **A11y Tester** | Accessibility | Keyboard nav, screen reader, contrast |
+
+---
+
+## Quick Command Reference
+
+```bash
+# Invoke Orchestrator
+Task: "Act as Orchestrator. Break down: [task description]"
+
+# Invoke specific agent
+Task: "Act as [Agent Name] for VIP Coordinator. [specific task]"
+
+# Full team review
+Task: "Act as Orchestrator. Coordinate full team review of: [feature/PR]"
+```
diff --git a/backend/package-lock.json b/backend/package-lock.json
index dd8bc14..396ff44 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@anthropic-ai/sdk": "^0.72.1",
         "@casl/ability": "^6.8.0",
         "@casl/prisma": "^1.6.1",
         "@nestjs/axios": "^4.0.1",
@@ -20,13 +21,16 @@
         "@nestjs/passport": "^10.0.3",
         "@nestjs/platform-express": "^10.3.0",
         "@prisma/client": "^5.8.1",
+        "@types/pdfkit": "^0.17.4",
         "axios": "^1.6.5",
         "class-transformer": "^0.5.1",
         "class-validator": "^0.14.0",
+        "ics": "^3.8.1",
         "ioredis": "^5.3.2",
         "jwks-rsa": "^3.1.0",
         "passport": "^0.7.0",
         "passport-jwt": "^4.0.1",
+        "pdfkit": "^0.17.2",
         "reflect-metadata": "^0.1.14",
         "rxjs": "^7.8.1"
       },
@@ -36,6 +40,7 @@
         "@nestjs/testing": "^10.3.0",
         "@types/express": "^4.17.21",
         "@types/jest": "^29.5.11",
+        "@types/multer": "^2.0.0",
         "@types/node": "^20.10.6",
         "@types/passport-jwt": "^4.0.0",
         "@types/supertest": "^6.0.2",
@@ -216,6 +221,26 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@anthropic-ai/sdk": {
+      "version": "0.72.1",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.72.1.tgz",
+      "integrity": "sha512-MiUnue7qN7DvLIoYHgkedN2z05mRf2CutBzjXXY2krzOhG2r/rIfISS2uVkNLikgToB5hYIzw+xp2jdOtRkqYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "json-schema-to-ts": "^3.1.1"
+      },
+      "bin": {
+        "anthropic-ai-sdk": "bin/cli"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
@@ -678,6 +703,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -2175,6 +2209,15 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tokenizer/inflate": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@tokenizer/inflate/-/inflate-0.2.7.tgz",
@@ -2441,6 +2484,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/multer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/multer/-/multer-2.0.0.tgz",
+      "integrity": "sha512-C3Z9v9Evij2yST3RSBktxP9STm6OdMc5uR1xF1SGr98uv8dUlAL2hqwrZ3GVB3uyMyiegnscEK6PGtYvNrjTjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.19.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
@@ -2483,6 +2536,15 @@
         "@types/passport": "*"
       }
     },
+    "node_modules/@types/pdfkit": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/pdfkit/-/pdfkit-0.17.4.tgz",
+      "integrity": "sha512-odAmVuuguRxKh1X4pbMrJMp8ecwNqHRw6lweupvzK+wuyNmi6wzlUlGVZ9EqMvp3Bs2+L9Ty0sRlrvKL+gsQZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
@@ -3415,7 +3477,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3529,6 +3590,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -4201,6 +4271,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4339,6 +4415,12 @@
         "wrappy": "1"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/diff": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
@@ -5017,7 +5099,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-diff": {
@@ -5252,6 +5333,32 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/fontkit/node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -5777,6 +5884,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ics": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/ics/-/ics-3.8.1.tgz",
+      "integrity": "sha512-UqQlfkajfhrS4pUGQfGIJMYz/Jsl/ob3LqcfEhUmLbwumg+ZNkU0/6S734Vsjq3/FYNpEcZVKodLBoe+zBM69g==",
+      "license": "ISC",
+      "dependencies": {
+        "nanoid": "^3.1.23",
+        "runes2": "^1.1.2",
+        "yup": "^1.2.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -6899,6 +7017,13 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/jpeg-exif": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz",
+      "integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6946,6 +7071,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-schema-to-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
+      "integrity": "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "ts-algebra": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -7107,6 +7245,25 @@
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
       "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7539,6 +7696,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7796,6 +7971,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7956,6 +8137,19 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
     },
+    "node_modules/pdfkit": {
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.17.2.tgz",
+      "integrity": "sha512-UnwF5fXy08f0dnp4jchFYAROKMNTaPqb/xgR8GtCzIcqoTnbOqtp3bwKvO4688oHI6vzEEs8Q6vqqEnC5IUELw==",
+      "license": "MIT",
+      "dependencies": {
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.4",
+        "jpeg-exif": "^1.1.4",
+        "linebreak": "^1.1.0",
+        "png-js": "^1.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8065,6 +8259,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/png-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
+      "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8168,6 +8367,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -8474,6 +8679,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -8582,6 +8793,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runes2": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/runes2/-/runes2-1.1.4.tgz",
+      "integrity": "sha512-LNPnEDPOOU4ehF71m5JoQyzT2yxwD6ZreFJ7MxZUAoMKNMY1XrAo60H1CUoX5ncSm0rIuKlqn9JZNRrRkNou2g==",
+      "license": "MIT"
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -9414,6 +9631,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -9474,6 +9703,12 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -9490,6 +9725,12 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/ts-algebra": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
+      "integrity": "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -9796,6 +10037,26 @@
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -10247,6 +10508,30 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 31f4dfe..4f5dd4d 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -24,6 +24,7 @@
     "prisma:seed": "ts-node prisma/seed.ts"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.72.1",
     "@casl/ability": "^6.8.0",
     "@casl/prisma": "^1.6.1",
     "@nestjs/axios": "^4.0.1",
@@ -35,13 +36,16 @@
     "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.3.0",
     "@prisma/client": "^5.8.1",
+    "@types/pdfkit": "^0.17.4",
     "axios": "^1.6.5",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
+    "ics": "^3.8.1",
     "ioredis": "^5.3.2",
     "jwks-rsa": "^3.1.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
+    "pdfkit": "^0.17.2",
     "reflect-metadata": "^0.1.14",
     "rxjs": "^7.8.1"
   },
@@ -51,6 +55,7 @@
     "@nestjs/testing": "^10.3.0",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.11",
+    "@types/multer": "^2.0.0",
     "@types/node": "^20.10.6",
     "@types/passport-jwt": "^4.0.0",
     "@types/supertest": "^6.0.2",
diff --git a/backend/prisma/migrations/20260201095359_add_signal_messages/migration.sql b/backend/prisma/migrations/20260201095359_add_signal_messages/migration.sql
new file mode 100644
index 0000000..e09b7de
--- /dev/null
+++ b/backend/prisma/migrations/20260201095359_add_signal_messages/migration.sql
@@ -0,0 +1,27 @@
+-- CreateEnum
+CREATE TYPE "MessageDirection" AS ENUM ('INBOUND', 'OUTBOUND');
+
+-- CreateTable
+CREATE TABLE "signal_messages" (
+    "id" TEXT NOT NULL,
+    "driverId" TEXT NOT NULL,
+    "direction" "MessageDirection" NOT NULL,
+    "content" TEXT NOT NULL,
+    "timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isRead" BOOLEAN NOT NULL DEFAULT false,
+    "signalTimestamp" TEXT,
+
+    CONSTRAINT "signal_messages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "signal_messages_driverId_idx" ON "signal_messages"("driverId");
+
+-- CreateIndex
+CREATE INDEX "signal_messages_driverId_isRead_idx" ON "signal_messages"("driverId", "isRead");
+
+-- CreateIndex
+CREATE INDEX "signal_messages_timestamp_idx" ON "signal_messages"("timestamp");
+
+-- AddForeignKey
+ALTER TABLE "signal_messages" ADD CONSTRAINT "signal_messages_driverId_fkey" FOREIGN KEY ("driverId") REFERENCES "drivers"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260201132408_add_pdf_settings/migration.sql b/backend/prisma/migrations/20260201132408_add_pdf_settings/migration.sql
new file mode 100644
index 0000000..8dddf4a
--- /dev/null
+++ b/backend/prisma/migrations/20260201132408_add_pdf_settings/migration.sql
@@ -0,0 +1,32 @@
+-- CreateEnum
+CREATE TYPE "PageSize" AS ENUM ('LETTER', 'A4');
+
+-- CreateTable
+CREATE TABLE "pdf_settings" (
+    "id" TEXT NOT NULL,
+    "organizationName" TEXT NOT NULL DEFAULT 'VIP Coordinator',
+    "logoUrl" TEXT,
+    "accentColor" TEXT NOT NULL DEFAULT '#2c3e50',
+    "tagline" TEXT,
+    "contactEmail" TEXT NOT NULL DEFAULT 'contact@example.com',
+    "contactPhone" TEXT NOT NULL DEFAULT '555-0100',
+    "secondaryContactName" TEXT,
+    "secondaryContactPhone" TEXT,
+    "contactLabel" TEXT NOT NULL DEFAULT 'Questions or Changes?',
+    "showDraftWatermark" BOOLEAN NOT NULL DEFAULT false,
+    "showConfidentialWatermark" BOOLEAN NOT NULL DEFAULT false,
+    "showTimestamp" BOOLEAN NOT NULL DEFAULT true,
+    "showAppUrl" BOOLEAN NOT NULL DEFAULT false,
+    "pageSize" "PageSize" NOT NULL DEFAULT 'LETTER',
+    "showFlightInfo" BOOLEAN NOT NULL DEFAULT true,
+    "showDriverNames" BOOLEAN NOT NULL DEFAULT true,
+    "showVehicleNames" BOOLEAN NOT NULL DEFAULT true,
+    "showVipNotes" BOOLEAN NOT NULL DEFAULT true,
+    "showEventDescriptions" BOOLEAN NOT NULL DEFAULT true,
+    "headerMessage" TEXT,
+    "footerMessage" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "pdf_settings_pkey" PRIMARY KEY ("id")
+);
diff --git a/backend/prisma/migrations/20260201151046_add_reminder_tracking/migration.sql b/backend/prisma/migrations/20260201151046_add_reminder_tracking/migration.sql
new file mode 100644
index 0000000..827cfa8
--- /dev/null
+++ b/backend/prisma/migrations/20260201151046_add_reminder_tracking/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "schedule_events" ADD COLUMN     "reminder20MinSent" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "reminder5MinSent" BOOLEAN NOT NULL DEFAULT false;
diff --git a/backend/prisma/migrations/20260201152207_make_driver_phone_optional/migration.sql b/backend/prisma/migrations/20260201152207_make_driver_phone_optional/migration.sql
new file mode 100644
index 0000000..11212ed
--- /dev/null
+++ b/backend/prisma/migrations/20260201152207_make_driver_phone_optional/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "drivers" ALTER COLUMN "phone" DROP NOT NULL;
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 550f6f5..01078d7 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -102,7 +102,7 @@ model Flight {
 model Driver {
   id              String          @id @default(uuid())
   name            String
-  phone           String
+  phone           String?         // Optional - driver should add via profile
   department      Department?
   userId          String?         @unique
   user            User?           @relation(fields: [userId], references: [id])
@@ -114,6 +114,7 @@ model Driver {
 
   events          ScheduleEvent[]
   assignedVehicle Vehicle?        @relation("AssignedDriver")
+  messages        SignalMessage[] // Signal chat messages
 
   createdAt       DateTime        @default(now())
   updatedAt       DateTime        @updatedAt
@@ -198,6 +199,10 @@ model ScheduleEvent {
   // Metadata
   notes           String?     @db.Text
 
+  // Reminder tracking
+  reminder20MinSent Boolean   @default(false)
+  reminder5MinSent  Boolean   @default(false)
+
   createdAt       DateTime    @default(now())
   updatedAt       DateTime    @updatedAt
   deletedAt       DateTime?   // Soft delete
@@ -224,3 +229,77 @@ enum EventStatus {
   CANCELLED
 }
 
+// ============================================
+// Signal Messaging
+// ============================================
+
+model SignalMessage {
+  id              String           @id @default(uuid())
+  driverId        String
+  driver          Driver           @relation(fields: [driverId], references: [id], onDelete: Cascade)
+  direction       MessageDirection
+  content         String           @db.Text
+  timestamp       DateTime         @default(now())
+  isRead          Boolean          @default(false)
+  signalTimestamp String?          // Signal's message timestamp for deduplication
+
+  @@map("signal_messages")
+  @@index([driverId])
+  @@index([driverId, isRead])
+  @@index([timestamp])
+}
+
+enum MessageDirection {
+  INBOUND   // Message from driver
+  OUTBOUND  // Message to driver
+}
+
+// ============================================
+// PDF Settings (Singleton)
+// ============================================
+
+model PdfSettings {
+  id String @id @default(uuid())
+
+  // Branding
+  organizationName String  @default("VIP Coordinator")
+  logoUrl          String? @db.Text // Base64 data URL or external URL
+  accentColor      String  @default("#2c3e50") // Hex color
+  tagline          String?
+
+  // Contact Info
+  contactEmail          String  @default("contact@example.com")
+  contactPhone          String  @default("555-0100")
+  secondaryContactName  String?
+  secondaryContactPhone String?
+  contactLabel          String  @default("Questions or Changes?")
+
+  // Document Options
+  showDraftWatermark         Boolean  @default(false)
+  showConfidentialWatermark  Boolean  @default(false)
+  showTimestamp              Boolean  @default(true)
+  showAppUrl                 Boolean  @default(false)
+  pageSize                   PageSize @default(LETTER)
+
+  // Content Toggles
+  showFlightInfo        Boolean @default(true)
+  showDriverNames       Boolean @default(true)
+  showVehicleNames      Boolean @default(true)
+  showVipNotes          Boolean @default(true)
+  showEventDescriptions Boolean @default(true)
+
+  // Custom Text
+  headerMessage String? @db.Text
+  footerMessage String? @db.Text
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("pdf_settings")
+}
+
+enum PageSize {
+  LETTER
+  A4
+}
+
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index 2f25b8b..2d197a4 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -11,6 +11,10 @@ import { DriversModule } from './drivers/drivers.module';
 import { VehiclesModule } from './vehicles/vehicles.module';
 import { EventsModule } from './events/events.module';
 import { FlightsModule } from './flights/flights.module';
+import { CopilotModule } from './copilot/copilot.module';
+import { SignalModule } from './signal/signal.module';
+import { SettingsModule } from './settings/settings.module';
+import { SeedModule } from './seed/seed.module';
 import { JwtAuthGuard } from './auth/guards/jwt-auth.guard';
 
 @Module({
@@ -32,6 +36,10 @@ import { JwtAuthGuard } from './auth/guards/jwt-auth.guard';
     VehiclesModule,
     EventsModule,
     FlightsModule,
+    CopilotModule,
+    SignalModule,
+    SettingsModule,
+    SeedModule,
   ],
   controllers: [AppController],
   providers: [
diff --git a/backend/src/auth/abilities/ability.factory.ts b/backend/src/auth/abilities/ability.factory.ts
index 9725663..421d8ed 100644
--- a/backend/src/auth/abilities/ability.factory.ts
+++ b/backend/src/auth/abilities/ability.factory.ts
@@ -25,6 +25,7 @@ export type Subjects =
   | 'ScheduleEvent'
   | 'Flight'
   | 'Vehicle'
+  | 'Settings'
   | 'all';
 
 /**
diff --git a/backend/src/copilot/copilot.controller.ts b/backend/src/copilot/copilot.controller.ts
new file mode 100644
index 0000000..409fa8a
--- /dev/null
+++ b/backend/src/copilot/copilot.controller.ts
@@ -0,0 +1,59 @@
+import {
+  Controller,
+  Post,
+  Body,
+  UseGuards,
+  Logger,
+} from '@nestjs/common';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { RolesGuard } from '../auth/guards/roles.guard';
+import { Roles } from '../auth/decorators/roles.decorator';
+import { Role } from '@prisma/client';
+import { CurrentUser } from '../auth/decorators/current-user.decorator';
+import { CopilotService } from './copilot.service';
+
+interface ChatMessageDto {
+  role: 'user' | 'assistant';
+  content: string | any[];
+}
+
+interface ChatRequestDto {
+  messages: ChatMessageDto[];
+}
+
+@Controller('copilot')
+@UseGuards(JwtAuthGuard, RolesGuard)
+export class CopilotController {
+  private readonly logger = new Logger(CopilotController.name);
+
+  constructor(private readonly copilotService: CopilotService) {}
+
+  @Post('chat')
+  @Roles(Role.ADMINISTRATOR, Role.COORDINATOR)
+  async chat(
+    @Body() body: ChatRequestDto,
+    @CurrentUser() user: any,
+  ) {
+    this.logger.log(`Copilot chat request from user: ${user.email}`);
+
+    try {
+      const result = await this.copilotService.chat(
+        body.messages,
+        user.id,
+        user.role,
+      );
+
+      return {
+        success: true,
+        ...result,
+      };
+    } catch (error) {
+      this.logger.error('Copilot chat error:', error);
+      return {
+        success: false,
+        response: 'I encountered an error processing your request. Please try again.',
+        error: error.message,
+      };
+    }
+  }
+}
diff --git a/backend/src/copilot/copilot.module.ts b/backend/src/copilot/copilot.module.ts
new file mode 100644
index 0000000..67fec8c
--- /dev/null
+++ b/backend/src/copilot/copilot.module.ts
@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { CopilotController } from './copilot.controller';
+import { CopilotService } from './copilot.service';
+import { PrismaModule } from '../prisma/prisma.module';
+import { SignalModule } from '../signal/signal.module';
+import { DriversModule } from '../drivers/drivers.module';
+
+@Module({
+  imports: [PrismaModule, SignalModule, DriversModule],
+  controllers: [CopilotController],
+  providers: [CopilotService],
+})
+export class CopilotModule {}
diff --git a/backend/src/drivers/drivers.module.ts b/backend/src/drivers/drivers.module.ts
index c4ccb65..20b65b5 100644
--- a/backend/src/drivers/drivers.module.ts
+++ b/backend/src/drivers/drivers.module.ts
@@ -1,10 +1,13 @@
 import { Module } from '@nestjs/common';
 import { DriversController } from './drivers.controller';
 import { DriversService } from './drivers.service';
+import { ScheduleExportService } from './schedule-export.service';
+import { SignalModule } from '../signal/signal.module';
 
 @Module({
+  imports: [SignalModule],
   controllers: [DriversController],
-  providers: [DriversService],
-  exports: [DriversService],
+  providers: [DriversService, ScheduleExportService],
+  exports: [DriversService, ScheduleExportService],
 })
 export class DriversModule {}
diff --git a/backend/src/drivers/drivers.service.ts b/backend/src/drivers/drivers.service.ts
index cbab598..1a6db82 100644
--- a/backend/src/drivers/drivers.service.ts
+++ b/backend/src/drivers/drivers.service.ts
@@ -52,6 +52,20 @@ export class DriversService {
     return driver;
   }
 
+  async findByUserId(userId: string) {
+    return this.prisma.driver.findFirst({
+      where: { userId, deletedAt: null },
+      include: {
+        user: true,
+        events: {
+          where: { deletedAt: null },
+          include: { vehicle: true, driver: true },
+          orderBy: { startTime: 'asc' },
+        },
+      },
+    });
+  }
+
   async update(id: string, updateDriverDto: UpdateDriverDto) {
     const driver = await this.findOne(id);
 
diff --git a/backend/src/drivers/dto/create-driver.dto.ts b/backend/src/drivers/dto/create-driver.dto.ts
index 4ecf000..42111ed 100644
--- a/backend/src/drivers/dto/create-driver.dto.ts
+++ b/backend/src/drivers/dto/create-driver.dto.ts
@@ -6,7 +6,8 @@ export class CreateDriverDto {
   name: string;
 
   @IsString()
-  phone: string;
+  @IsOptional()
+  phone?: string;
 
   @IsEnum(Department)
   @IsOptional()
diff --git a/backend/src/events/event-status.service.ts b/backend/src/events/event-status.service.ts
new file mode 100644
index 0000000..ede025a
--- /dev/null
+++ b/backend/src/events/event-status.service.ts
@@ -0,0 +1,423 @@
+import { Injectable, Logger, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { SignalService } from '../signal/signal.service';
+import { EventStatus } from '@prisma/client';
+
+/**
+ * Automatic event status management service
+ * - Transitions SCHEDULED → IN_PROGRESS when startTime arrives
+ * - Sends Signal confirmation requests to drivers
+ * - Handles driver responses (1=Confirmed, 2=Delayed, 3=Issue)
+ * - Transitions IN_PROGRESS → COMPLETED when endTime passes (with grace period)
+ */
+@Injectable()
+export class EventStatusService implements OnModuleInit, OnModuleDestroy {
+  private readonly logger = new Logger(EventStatusService.name);
+  private intervalId: NodeJS.Timeout | null = null;
+  private readonly CHECK_INTERVAL = 60 * 1000; // Check every minute
+  private readonly COMPLETION_GRACE_PERIOD = 15 * 60 * 1000; // 15 min after endTime before auto-complete
+
+  constructor(
+    private prisma: PrismaService,
+    private signalService: SignalService,
+  ) {}
+
+  onModuleInit() {
+    this.logger.log('Starting event status monitoring...');
+    this.startMonitoring();
+  }
+
+  onModuleDestroy() {
+    this.stopMonitoring();
+  }
+
+  private startMonitoring() {
+    // Run immediately on start
+    this.checkAndUpdateStatuses();
+
+    // Then run every minute
+    this.intervalId = setInterval(() => {
+      this.checkAndUpdateStatuses();
+    }, this.CHECK_INTERVAL);
+  }
+
+  private stopMonitoring() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+      this.logger.log('Stopped event status monitoring');
+    }
+  }
+
+  /**
+   * Main check loop - finds events that need status updates
+   */
+  private async checkAndUpdateStatuses() {
+    try {
+      const now = new Date();
+
+      // 1. Send reminders for upcoming events (20 min and 5 min before)
+      await this.sendUpcomingReminders(now);
+
+      // 2. Find SCHEDULED events that should now be IN_PROGRESS
+      await this.transitionToInProgress(now);
+
+      // 3. Find IN_PROGRESS events that are past their end time (with grace period)
+      await this.transitionToCompleted(now);
+
+    } catch (error) {
+      this.logger.error('Error checking event statuses:', error);
+    }
+  }
+
+  /**
+   * Send 20-minute and 5-minute reminders to drivers
+   */
+  private async sendUpcomingReminders(now: Date) {
+    const twentyMinutesFromNow = new Date(now.getTime() + 20 * 60 * 1000);
+    const fiveMinutesFromNow = new Date(now.getTime() + 5 * 60 * 1000);
+
+    // Find events needing 20-minute reminder
+    // Events starting within 20 minutes that haven't had reminder sent
+    const eventsFor20MinReminder = await this.prisma.scheduleEvent.findMany({
+      where: {
+        status: EventStatus.SCHEDULED,
+        type: 'TRANSPORT',
+        startTime: { lte: twentyMinutesFromNow, gt: now },
+        reminder20MinSent: false,
+        driverId: { not: null },
+        deletedAt: null,
+      },
+      include: {
+        driver: true,
+        vehicle: true,
+      },
+    });
+
+    for (const event of eventsFor20MinReminder) {
+      // Only send if actually ~20 min away (between 15-25 min)
+      const minutesUntil = Math.floor((new Date(event.startTime).getTime() - now.getTime()) / 60000);
+      if (minutesUntil <= 25 && minutesUntil >= 15) {
+        await this.send20MinReminder(event, minutesUntil);
+      }
+    }
+
+    // Find events needing 5-minute reminder
+    const eventsFor5MinReminder = await this.prisma.scheduleEvent.findMany({
+      where: {
+        status: EventStatus.SCHEDULED,
+        type: 'TRANSPORT',
+        startTime: { lte: fiveMinutesFromNow, gt: now },
+        reminder5MinSent: false,
+        driverId: { not: null },
+        deletedAt: null,
+      },
+      include: {
+        driver: true,
+        vehicle: true,
+      },
+    });
+
+    for (const event of eventsFor5MinReminder) {
+      // Only send if actually ~5 min away (between 3-10 min)
+      const minutesUntil = Math.floor((new Date(event.startTime).getTime() - now.getTime()) / 60000);
+      if (minutesUntil <= 10 && minutesUntil >= 3) {
+        await this.send5MinReminder(event, minutesUntil);
+      }
+    }
+  }
+
+  /**
+   * Send 20-minute reminder to driver
+   */
+  private async send20MinReminder(event: any, minutesUntil: number) {
+    try {
+      const linkedNumber = await this.signalService.getLinkedNumber();
+      if (!linkedNumber || !event.driver?.phone) return;
+
+      // Get VIP names
+      const vips = await this.prisma.vIP.findMany({
+        where: { id: { in: event.vipIds || [] } },
+        select: { name: true },
+      });
+      const vipNames = vips.map(v => v.name).join(', ') || 'VIP';
+
+      const message = `📢 UPCOMING TRIP in ~${minutesUntil} minutes
+
+📍 Pickup: ${event.pickupLocation || 'See schedule'}
+📍 Dropoff: ${event.dropoffLocation || 'See schedule'}
+👤 VIP: ${vipNames}
+🚐 Vehicle: ${event.vehicle?.name || 'Check assignment'}
+⏰ Start Time: ${new Date(event.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
+
+Please head to the pickup location.`;
+
+      const formattedPhone = this.signalService.formatPhoneNumber(event.driver.phone);
+      await this.signalService.sendMessage(linkedNumber, formattedPhone, message);
+
+      // Mark reminder as sent
+      await this.prisma.scheduleEvent.update({
+        where: { id: event.id },
+        data: { reminder20MinSent: true },
+      });
+
+      this.logger.log(`Sent 20-min reminder to ${event.driver.name} for event ${event.id}`);
+    } catch (error) {
+      this.logger.error(`Failed to send 20-min reminder for event ${event.id}:`, error);
+    }
+  }
+
+  /**
+   * Send 5-minute reminder to driver (more urgent)
+   */
+  private async send5MinReminder(event: any, minutesUntil: number) {
+    try {
+      const linkedNumber = await this.signalService.getLinkedNumber();
+      if (!linkedNumber || !event.driver?.phone) return;
+
+      // Get VIP names
+      const vips = await this.prisma.vIP.findMany({
+        where: { id: { in: event.vipIds || [] } },
+        select: { name: true },
+      });
+      const vipNames = vips.map(v => v.name).join(', ') || 'VIP';
+
+      const message = `⚠️ TRIP STARTING in ${minutesUntil} MINUTES!
+
+📍 Pickup: ${event.pickupLocation || 'See schedule'}
+👤 VIP: ${vipNames}
+🚐 Vehicle: ${event.vehicle?.name || 'Check assignment'}
+
+You should be at the pickup location NOW.
+
+Reply:
+1️⃣ = Ready and waiting
+2️⃣ = Running late
+3️⃣ = Issue / Need help`;
+
+      const formattedPhone = this.signalService.formatPhoneNumber(event.driver.phone);
+      await this.signalService.sendMessage(linkedNumber, formattedPhone, message);
+
+      // Mark reminder as sent
+      await this.prisma.scheduleEvent.update({
+        where: { id: event.id },
+        data: { reminder5MinSent: true },
+      });
+
+      this.logger.log(`Sent 5-min reminder to ${event.driver.name} for event ${event.id}`);
+    } catch (error) {
+      this.logger.error(`Failed to send 5-min reminder for event ${event.id}:`, error);
+    }
+  }
+
+  /**
+   * Transition SCHEDULED → IN_PROGRESS for events whose startTime has passed
+   */
+  private async transitionToInProgress(now: Date) {
+    const eventsToStart = await this.prisma.scheduleEvent.findMany({
+      where: {
+        status: EventStatus.SCHEDULED,
+        startTime: { lte: now },
+        deletedAt: null,
+      },
+      include: {
+        driver: true,
+        vehicle: true,
+      },
+    });
+
+    for (const event of eventsToStart) {
+      try {
+        // Update status to IN_PROGRESS
+        await this.prisma.scheduleEvent.update({
+          where: { id: event.id },
+          data: {
+            status: EventStatus.IN_PROGRESS,
+            actualStartTime: now,
+          },
+        });
+
+        this.logger.log(`Event ${event.id} (${event.title}) auto-started`);
+
+        // Send Signal confirmation request to driver if assigned
+        if (event.driver?.phone) {
+          await this.sendDriverConfirmationRequest(event);
+        }
+      } catch (error) {
+        this.logger.error(`Failed to transition event ${event.id}:`, error);
+      }
+    }
+
+    if (eventsToStart.length > 0) {
+      this.logger.log(`Auto-started ${eventsToStart.length} events`);
+    }
+  }
+
+  /**
+   * Transition IN_PROGRESS → COMPLETED for events past their endTime + grace period
+   * Only auto-complete if no driver confirmation is pending
+   */
+  private async transitionToCompleted(now: Date) {
+    const gracePeriodAgo = new Date(now.getTime() - this.COMPLETION_GRACE_PERIOD);
+
+    const eventsToComplete = await this.prisma.scheduleEvent.findMany({
+      where: {
+        status: EventStatus.IN_PROGRESS,
+        endTime: { lte: gracePeriodAgo },
+        deletedAt: null,
+      },
+      include: {
+        driver: true,
+      },
+    });
+
+    for (const event of eventsToComplete) {
+      try {
+        await this.prisma.scheduleEvent.update({
+          where: { id: event.id },
+          data: {
+            status: EventStatus.COMPLETED,
+            actualEndTime: now,
+          },
+        });
+
+        this.logger.log(`Event ${event.id} (${event.title}) auto-completed`);
+      } catch (error) {
+        this.logger.error(`Failed to complete event ${event.id}:`, error);
+      }
+    }
+
+    if (eventsToComplete.length > 0) {
+      this.logger.log(`Auto-completed ${eventsToComplete.length} events`);
+    }
+  }
+
+  /**
+   * Send a Signal message to the driver asking for confirmation
+   */
+  private async sendDriverConfirmationRequest(event: any) {
+    try {
+      const linkedNumber = await this.signalService.getLinkedNumber();
+      if (!linkedNumber) {
+        this.logger.warn('No Signal account linked, skipping driver notification');
+        return;
+      }
+
+      // Get VIP names for the message
+      const vips = await this.prisma.vIP.findMany({
+        where: { id: { in: event.vipIds || [] } },
+        select: { name: true },
+      });
+      const vipNames = vips.map(v => v.name).join(', ') || 'VIP';
+
+      const message = `🚗 TRIP STARTED: ${event.title}
+
+📍 Pickup: ${event.pickupLocation || 'See schedule'}
+📍 Dropoff: ${event.dropoffLocation || 'See schedule'}
+👤 VIP: ${vipNames}
+🚐 Vehicle: ${event.vehicle?.name || 'Not assigned'}
+
+Please confirm status:
+1️⃣ = En route / Confirmed
+2️⃣ = Delayed (explain in next message)
+3️⃣ = Issue / Need help
+
+Reply with 1, 2, or 3`;
+
+      const formattedPhone = this.signalService.formatPhoneNumber(event.driver.phone);
+      await this.signalService.sendMessage(linkedNumber, formattedPhone, message);
+
+      this.logger.log(`Sent confirmation request to driver ${event.driver.name} for event ${event.id}`);
+    } catch (error) {
+      this.logger.error(`Failed to send Signal confirmation for event ${event.id}:`, error);
+    }
+  }
+
+  /**
+   * Process a driver's response to a confirmation request
+   * Called by the Signal message handler when a driver replies with 1, 2, or 3
+   */
+  async processDriverResponse(driverPhone: string, response: string): Promise<string | null> {
+    const responseNum = parseInt(response.trim(), 10);
+    if (![1, 2, 3].includes(responseNum)) {
+      return null; // Not a status response
+    }
+
+    // Find the driver
+    const driver = await this.prisma.driver.findFirst({
+      where: {
+        phone: { contains: driverPhone.replace(/\D/g, '').slice(-10) },
+        deletedAt: null,
+      },
+    });
+
+    if (!driver) {
+      return null;
+    }
+
+    // Find their current IN_PROGRESS event
+    const activeEvent = await this.prisma.scheduleEvent.findFirst({
+      where: {
+        driverId: driver.id,
+        status: EventStatus.IN_PROGRESS,
+        deletedAt: null,
+      },
+      include: { vehicle: true },
+    });
+
+    if (!activeEvent) {
+      return 'No active trip found. Reply ignored.';
+    }
+
+    let replyMessage: string;
+
+    switch (responseNum) {
+      case 1: // Confirmed
+        // Event is already IN_PROGRESS, this just confirms it
+        await this.prisma.scheduleEvent.update({
+          where: { id: activeEvent.id },
+          data: {
+            notes: `${activeEvent.notes || ''}\n[${new Date().toLocaleTimeString()}] Driver confirmed en route`.trim(),
+          },
+        });
+        replyMessage = `✅ Confirmed! Safe travels. Reply when completed or if you need assistance.`;
+        break;
+
+      case 2: // Delayed
+        await this.prisma.scheduleEvent.update({
+          where: { id: activeEvent.id },
+          data: {
+            notes: `${activeEvent.notes || ''}\n[${new Date().toLocaleTimeString()}] Driver reported DELAY`.trim(),
+          },
+        });
+        replyMessage = `⏰ Delay noted. Please reply with details about the delay. Coordinator has been alerted.`;
+        break;
+
+      case 3: // Issue
+        await this.prisma.scheduleEvent.update({
+          where: { id: activeEvent.id },
+          data: {
+            notes: `${activeEvent.notes || ''}\n[${new Date().toLocaleTimeString()}] Driver reported ISSUE - needs help`.trim(),
+          },
+        });
+        replyMessage = `🚨 Issue reported! A coordinator will contact you shortly. Please describe the issue in your next message.`;
+        break;
+
+      default:
+        return null;
+    }
+
+    // Send the reply
+    try {
+      const linkedNumber = await this.signalService.getLinkedNumber();
+      if (linkedNumber && driver.phone) {
+        const formattedPhone = this.signalService.formatPhoneNumber(driver.phone);
+        await this.signalService.sendMessage(linkedNumber, formattedPhone, replyMessage);
+      }
+    } catch (error) {
+      this.logger.error('Failed to send reply to driver:', error);
+    }
+
+    return replyMessage;
+  }
+}
diff --git a/backend/src/events/events.module.ts b/backend/src/events/events.module.ts
index 97662a9..5399f24 100644
--- a/backend/src/events/events.module.ts
+++ b/backend/src/events/events.module.ts
@@ -1,16 +1,25 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { EventsController } from './events.controller';
 import { EventsService } from './events.service';
+import { EventStatusService } from './event-status.service';
+import { PrismaModule } from '../prisma/prisma.module';
+import { SignalModule } from '../signal/signal.module';
 
 @Module({
+  imports: [
+    PrismaModule,
+    forwardRef(() => SignalModule), // forwardRef to avoid circular dependency
+  ],
   controllers: [
     EventsController,
   ],
   providers: [
     EventsService,
+    EventStatusService,
   ],
   exports: [
     EventsService,
+    EventStatusService,
   ],
 })
 export class EventsModule {}
diff --git a/backend/src/events/events.service.ts b/backend/src/events/events.service.ts
index a8595c1..99a5e47 100644
--- a/backend/src/events/events.service.ts
+++ b/backend/src/events/events.service.ts
@@ -300,10 +300,11 @@ export class EventsService {
 
   /**
    * Enrich event with VIP details fetched separately
+   * Returns both `vips` array and `vip` (first VIP) for backwards compatibility
    */
   private async enrichEventWithVips(event: any) {
     if (!event.vipIds || event.vipIds.length === 0) {
-      return { ...event, vips: [] };
+      return { ...event, vips: [], vip: null };
     }
 
     const vips = await this.prisma.vIP.findMany({
@@ -313,6 +314,7 @@ export class EventsService {
       },
     });
 
-    return { ...event, vips };
+    // Return both vips array and vip (first one) for backwards compatibility
+    return { ...event, vips, vip: vips[0] || null };
   }
 }
diff --git a/backend/src/main.ts b/backend/src/main.ts
index 0c460bf..90d6d9a 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -1,5 +1,6 @@
 import { NestFactory } from '@nestjs/core';
 import { ValidationPipe, Logger } from '@nestjs/common';
+import { json, urlencoded } from 'express';
 import { AppModule } from './app.module';
 import { AllExceptionsFilter, HttpExceptionFilter } from './common/filters';
 
@@ -8,6 +9,10 @@ async function bootstrap() {
 
   const app = await NestFactory.create(AppModule);
 
+  // Increase body size limit for PDF attachments (base64 encoded)
+  app.use(json({ limit: '5mb' }));
+  app.use(urlencoded({ extended: true, limit: '5mb' }));
+
   // Global prefix for all routes
   // In production (App Platform), the ingress routes /api to this service
   // So we only need /v1 prefix here
diff --git a/backend/src/seed/index.ts b/backend/src/seed/index.ts
new file mode 100644
index 0000000..fdfd2c3
--- /dev/null
+++ b/backend/src/seed/index.ts
@@ -0,0 +1,3 @@
+export * from './seed.module';
+export * from './seed.service';
+export * from './seed.controller';
diff --git a/backend/src/seed/seed.controller.ts b/backend/src/seed/seed.controller.ts
new file mode 100644
index 0000000..2169df1
--- /dev/null
+++ b/backend/src/seed/seed.controller.ts
@@ -0,0 +1,36 @@
+import { Controller, Post, Delete, UseGuards, Body } from '@nestjs/common';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { RolesGuard } from '../auth/guards/roles.guard';
+import { Roles } from '../auth/decorators/roles.decorator';
+import { SeedService } from './seed.service';
+
+@Controller('seed')
+@UseGuards(JwtAuthGuard, RolesGuard)
+@Roles('ADMINISTRATOR')
+export class SeedController {
+  constructor(private readonly seedService: SeedService) {}
+
+  /**
+   * Generate all test data in a single fast transaction
+   */
+  @Post('generate')
+  async generateTestData(@Body() options?: { clearFirst?: boolean }) {
+    return this.seedService.generateAllTestData(options?.clearFirst ?? true);
+  }
+
+  /**
+   * Clear all test data instantly
+   */
+  @Delete('clear')
+  async clearAllData() {
+    return this.seedService.clearAllData();
+  }
+
+  /**
+   * Generate only events with dynamic times (keeps existing VIPs/drivers/vehicles)
+   */
+  @Post('generate-events')
+  async generateDynamicEvents() {
+    return this.seedService.generateDynamicEvents();
+  }
+}
diff --git a/backend/src/seed/seed.module.ts b/backend/src/seed/seed.module.ts
new file mode 100644
index 0000000..f54761f
--- /dev/null
+++ b/backend/src/seed/seed.module.ts
@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { SeedController } from './seed.controller';
+import { SeedService } from './seed.service';
+import { PrismaModule } from '../prisma/prisma.module';
+import { AuthModule } from '../auth/auth.module';
+
+@Module({
+  imports: [PrismaModule, AuthModule],
+  controllers: [SeedController],
+  providers: [SeedService],
+})
+export class SeedModule {}
diff --git a/backend/src/seed/seed.service.ts b/backend/src/seed/seed.service.ts
new file mode 100644
index 0000000..c7c1920
--- /dev/null
+++ b/backend/src/seed/seed.service.ts
@@ -0,0 +1,626 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { Department, ArrivalMode, EventType, EventStatus, VehicleType, VehicleStatus } from '@prisma/client';
+
+@Injectable()
+export class SeedService {
+  private readonly logger = new Logger(SeedService.name);
+
+  constructor(private prisma: PrismaService) {}
+
+  /**
+   * Clear all data using fast deleteMany operations
+   */
+  async clearAllData() {
+    const start = Date.now();
+
+    // Delete in order to respect foreign key constraints
+    const results = await this.prisma.$transaction([
+      this.prisma.signalMessage.deleteMany(),
+      this.prisma.scheduleEvent.deleteMany(),
+      this.prisma.flight.deleteMany(),
+      this.prisma.vehicle.deleteMany(),
+      this.prisma.driver.deleteMany(),
+      this.prisma.vIP.deleteMany(),
+    ]);
+
+    const elapsed = Date.now() - start;
+    this.logger.log(`Cleared all data in ${elapsed}ms`);
+
+    return {
+      success: true,
+      elapsed: `${elapsed}ms`,
+      deleted: {
+        messages: results[0].count,
+        events: results[1].count,
+        flights: results[2].count,
+        vehicles: results[3].count,
+        drivers: results[4].count,
+        vips: results[5].count,
+      },
+    };
+  }
+
+  /**
+   * Generate all test data in a single fast transaction
+   */
+  async generateAllTestData(clearFirst: boolean = true) {
+    const start = Date.now();
+
+    if (clearFirst) {
+      await this.clearAllData();
+    }
+
+    // Create all entities in a transaction
+    const result = await this.prisma.$transaction(async (tx) => {
+      // 1. Create VIPs
+      const vipData = this.getVIPData();
+      await tx.vIP.createMany({ data: vipData });
+      const vips = await tx.vIP.findMany({ orderBy: { createdAt: 'asc' } });
+      this.logger.log(`Created ${vips.length} VIPs`);
+
+      // 2. Create Drivers with shifts
+      const driverData = this.getDriverData();
+      await tx.driver.createMany({ data: driverData });
+      const drivers = await tx.driver.findMany({ orderBy: { createdAt: 'asc' } });
+      this.logger.log(`Created ${drivers.length} drivers`);
+
+      // 3. Create Vehicles
+      const vehicleData = this.getVehicleData();
+      await tx.vehicle.createMany({ data: vehicleData });
+      const vehicles = await tx.vehicle.findMany({ orderBy: { createdAt: 'asc' } });
+      this.logger.log(`Created ${vehicles.length} vehicles`);
+
+      // 4. Create Flights for VIPs arriving by flight
+      const flightVips = vips.filter(v => v.arrivalMode === 'FLIGHT');
+      const flightData = this.getFlightData(flightVips);
+      await tx.flight.createMany({ data: flightData });
+      const flights = await tx.flight.findMany();
+      this.logger.log(`Created ${flights.length} flights`);
+
+      // 5. Create Events with dynamic times relative to NOW
+      const eventData = this.getEventData(vips, drivers, vehicles);
+      await tx.scheduleEvent.createMany({ data: eventData });
+      const events = await tx.scheduleEvent.findMany();
+      this.logger.log(`Created ${events.length} events`);
+
+      return { vips, drivers, vehicles, flights, events };
+    });
+
+    const elapsed = Date.now() - start;
+    this.logger.log(`Generated all test data in ${elapsed}ms`);
+
+    return {
+      success: true,
+      elapsed: `${elapsed}ms`,
+      created: {
+        vips: result.vips.length,
+        drivers: result.drivers.length,
+        vehicles: result.vehicles.length,
+        flights: result.flights.length,
+        events: result.events.length,
+      },
+    };
+  }
+
+  /**
+   * Generate only dynamic events (uses existing VIPs/drivers/vehicles)
+   */
+  async generateDynamicEvents() {
+    const start = Date.now();
+
+    // Clear existing events
+    await this.prisma.scheduleEvent.deleteMany();
+
+    // Get existing entities
+    const [vips, drivers, vehicles] = await Promise.all([
+      this.prisma.vIP.findMany({ where: { deletedAt: null } }),
+      this.prisma.driver.findMany({ where: { deletedAt: null } }),
+      this.prisma.vehicle.findMany({ where: { deletedAt: null } }),
+    ]);
+
+    if (vips.length === 0) {
+      return { success: false, error: 'No VIPs found. Generate full test data first.' };
+    }
+
+    // Create events
+    const eventData = this.getEventData(vips, drivers, vehicles);
+    await this.prisma.scheduleEvent.createMany({ data: eventData });
+
+    const elapsed = Date.now() - start;
+    return {
+      success: true,
+      elapsed: `${elapsed}ms`,
+      created: { events: eventData.length },
+    };
+  }
+
+  // ============================================================
+  // DATA GENERATORS
+  // ============================================================
+
+  private getVIPData() {
+    return [
+      // OFFICE_OF_DEVELOPMENT (10 VIPs) - Corporate sponsors, foundations, major donors
+      { name: 'Sarah Chen', organization: 'Microsoft Corporation', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Executive VP - prefers quiet vehicles. Allergic to peanuts.' },
+      { name: 'Marcus Johnson', organization: 'The Coca-Cola Company', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Bringing spouse. Needs wheelchair accessible transport.' },
+      { name: 'Jennifer Wu', organization: 'JPMorgan Chase Foundation', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Major donor - $500K pledge. VIP treatment essential.' },
+      { name: 'Roberto Gonzalez', organization: 'AT&T Inc', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'First time visitor. Interested in STEM programs.' },
+      { name: 'Priya Sharma', organization: 'Google LLC', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Vegetarian meals required. Interested in technology merit badges.' },
+      { name: 'David Okonkwo', organization: 'Bank of America', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: false, venueTransport: true, notes: 'Has rental car for airport. Needs venue transport only.' },
+      { name: 'Maria Rodriguez', organization: 'Walmart Foundation', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: true, expectedArrival: this.relativeTime(120), notes: 'Driving from nearby hotel. Call when 30 min out.' },
+      { name: 'Yuki Tanaka', organization: 'Honda Motor Company', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Japanese executive - interpreter may be needed.' },
+      { name: 'Thomas Anderson', organization: 'Verizon Communications', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: false, notes: 'Will use personal driver after airport pickup.' },
+      { name: 'Isabella Costa', organization: 'Target Corporation', department: Department.OFFICE_OF_DEVELOPMENT, arrivalMode: ArrivalMode.FLIGHT, airportPickup: false, venueTransport: true, notes: 'Taking rideshare from airport. Venue transport needed.' },
+
+      // ADMIN (10 VIPs) - BSA Leadership and Staff
+      { name: 'Roger A. Krone', organization: 'BSA National President', department: Department.ADMIN, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'HIGHEST PRIORITY VIP. Security detail traveling with him.' },
+      { name: 'Emily Richardson', organization: 'BSA Chief Scout Executive', department: Department.ADMIN, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: false, expectedArrival: this.relativeTime(60), notes: 'Has assigned BSA vehicle. No transport needed.' },
+      { name: 'Dr. Maya Krishnan', organization: 'BSA National Director of Program', department: Department.ADMIN, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: false, expectedArrival: this.relativeTime(180), notes: 'Carpooling with regional directors.' },
+      { name: "James O'Brien", organization: 'BSA Northeast Regional Director', department: Department.ADMIN, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Traveling with 2 staff members.' },
+      { name: 'Fatima Al-Rahman', organization: 'BSA Western Region Executive', department: Department.ADMIN, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Halal meals required. Prayer room access needed.' },
+      { name: 'William Zhang', organization: 'BSA Southern Region Council', department: Department.ADMIN, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: true, notes: 'Bringing presentation equipment - need vehicle with cargo space.' },
+      { name: 'Sophie Laurent', organization: 'BSA National Volunteer Training', department: Department.ADMIN, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: true, expectedArrival: this.relativeTime(240), notes: 'Training materials in personal vehicle.' },
+      { name: 'Alexander Volkov', organization: 'BSA High Adventure Director', department: Department.ADMIN, arrivalMode: ArrivalMode.FLIGHT, airportPickup: true, venueTransport: false, notes: 'Outdoor enthusiast - prefers walking when possible.' },
+      { name: 'Dr. Aisha Patel', organization: 'BSA STEM & Innovation Programs', department: Department.ADMIN, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: true, expectedArrival: this.relativeTime(90), notes: 'Demo equipment for STEM showcase. Fragile items!' },
+      { name: 'Henrik Larsson', organization: 'BSA International Commissioner', department: Department.ADMIN, arrivalMode: ArrivalMode.SELF_DRIVING, airportPickup: false, venueTransport: true, expectedArrival: this.relativeTime(150), notes: 'Visiting from Sweden. International guest protocols apply.' },
+    ];
+  }
+
+  private getDriverData() {
+    const now = new Date();
+    const shiftStart = new Date(now);
+    shiftStart.setHours(6, 0, 0, 0);
+    const shiftEnd = new Date(now);
+    shiftEnd.setHours(22, 0, 0, 0);
+
+    const lateShiftStart = new Date(now);
+    lateShiftStart.setHours(14, 0, 0, 0);
+    const lateShiftEnd = new Date(now);
+    lateShiftEnd.setHours(23, 59, 0, 0);
+
+    return [
+      { name: 'Michael Thompson', phone: '555-0101', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+      { name: 'Lisa Martinez', phone: '555-0102', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+      { name: 'David Kim', phone: '555-0103', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+      { name: 'Amanda Washington', phone: '555-0104', department: Department.ADMIN, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+      { name: 'Carlos Hernandez', phone: '555-0105', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: false, shiftStartTime: lateShiftStart, shiftEndTime: lateShiftEnd }, // Off duty until 2pm
+      { name: 'Jessica Lee', phone: '555-0106', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+      { name: 'Brandon Jackson', phone: '555-0107', department: Department.OFFICE_OF_DEVELOPMENT, isAvailable: true, shiftStartTime: lateShiftStart, shiftEndTime: lateShiftEnd },
+      { name: 'Nicole Brown', phone: '555-0108', department: Department.ADMIN, isAvailable: true, shiftStartTime: shiftStart, shiftEndTime: shiftEnd },
+    ];
+  }
+
+  private getVehicleData() {
+    return [
+      { name: 'Blue Van', type: VehicleType.VAN, licensePlate: 'VAN-001', seatCapacity: 12, status: VehicleStatus.AVAILABLE, notes: 'Primary transport van with wheelchair accessibility' },
+      { name: 'Suburban #1', type: VehicleType.SUV, licensePlate: 'SUV-101', seatCapacity: 7, status: VehicleStatus.AVAILABLE, notes: 'Leather interior, ideal for VIP comfort' },
+      { name: 'Golf Cart Alpha', type: VehicleType.GOLF_CART, licensePlate: 'GC-A', seatCapacity: 6, status: VehicleStatus.AVAILABLE, notes: 'Quick campus transport, good for short distances' },
+      { name: 'Red Van', type: VehicleType.VAN, licensePlate: 'VAN-002', seatCapacity: 8, status: VehicleStatus.AVAILABLE, notes: 'Standard transport van' },
+      { name: 'Scout Bus', type: VehicleType.BUS, licensePlate: 'BUS-001', seatCapacity: 25, status: VehicleStatus.AVAILABLE, notes: 'Large group transport, AC equipped' },
+      { name: 'Suburban #2', type: VehicleType.SUV, licensePlate: 'SUV-102', seatCapacity: 7, status: VehicleStatus.AVAILABLE, notes: 'Backup VIP transport' },
+      { name: 'Golf Cart Bravo', type: VehicleType.GOLF_CART, licensePlate: 'GC-B', seatCapacity: 4, status: VehicleStatus.AVAILABLE, notes: 'Quick on-site transport' },
+      { name: 'Equipment Truck', type: VehicleType.TRUCK, licensePlate: 'TRK-001', seatCapacity: 3, status: VehicleStatus.MAINTENANCE, notes: 'For equipment and supply runs - currently in maintenance' },
+      { name: 'Executive Sedan', type: VehicleType.SEDAN, licensePlate: 'SED-001', seatCapacity: 4, status: VehicleStatus.AVAILABLE, notes: 'Premium sedan for executive VIPs' },
+      { name: 'Golf Cart Charlie', type: VehicleType.GOLF_CART, licensePlate: 'GC-C', seatCapacity: 4, status: VehicleStatus.AVAILABLE, notes: 'Backup golf cart' },
+    ];
+  }
+
+  private getFlightData(vips: any[]) {
+    const flights: any[] = [];
+    const airlines = ['AA', 'UA', 'DL', 'SW', 'AS', 'JB'];
+    const origins = ['JFK', 'LAX', 'ORD', 'DFW', 'ATL', 'SFO', 'SEA', 'BOS', 'DEN', 'MIA'];
+    const destination = 'SLC'; // Assuming Salt Lake City for the Jamboree
+
+    vips.forEach((vip, index) => {
+      const airline = airlines[index % airlines.length];
+      const flightNum = `${airline}${1000 + index * 123}`;
+      const origin = origins[index % origins.length];
+
+      // Arrival flight - times relative to now
+      const arrivalOffset = (index % 8) * 30 - 60; // -60 to +150 minutes from now
+      const scheduledArrival = this.relativeTime(arrivalOffset);
+      const scheduledDeparture = new Date(scheduledArrival.getTime() - 3 * 60 * 60 * 1000); // 3 hours before
+
+      // Some flights are delayed, some landed, some on time
+      let status = 'scheduled';
+      let actualArrival = null;
+      if (arrivalOffset < -30) {
+        status = 'landed';
+        actualArrival = new Date(scheduledArrival.getTime() + (Math.random() * 20 - 10) * 60000);
+      } else if (arrivalOffset < 0) {
+        status = 'landing';
+      } else if (index % 5 === 0) {
+        status = 'delayed';
+      }
+
+      flights.push({
+        vipId: vip.id,
+        flightNumber: flightNum,
+        flightDate: new Date(),
+        segment: 1,
+        departureAirport: origin,
+        arrivalAirport: destination,
+        scheduledDeparture,
+        scheduledArrival,
+        actualArrival,
+        status,
+      });
+
+      // Some VIPs have connecting flights (segment 2)
+      if (index % 4 === 0) {
+        const connectOrigin = origins[(index + 3) % origins.length];
+        flights.push({
+          vipId: vip.id,
+          flightNumber: `${airline}${500 + index}`,
+          flightDate: new Date(),
+          segment: 2,
+          departureAirport: connectOrigin,
+          arrivalAirport: origin,
+          scheduledDeparture: new Date(scheduledDeparture.getTime() - 4 * 60 * 60 * 1000),
+          scheduledArrival: new Date(scheduledDeparture.getTime() - 1 * 60 * 60 * 1000),
+          status: 'landed',
+        });
+      }
+    });
+
+    return flights;
+  }
+
+  private getEventData(vips: any[], drivers: any[], vehicles: any[]) {
+    const events: any[] = [];
+    const now = new Date();
+
+    // Track vehicle assignments to avoid conflicts
+    // Map of vehicleId -> array of { start: Date, end: Date }
+    const vehicleSchedule: Map<string, Array<{ start: Date; end: Date }>> = new Map();
+    const driverSchedule: Map<string, Array<{ start: Date; end: Date }>> = new Map();
+
+    // Initialize schedules
+    vehicles.forEach(v => vehicleSchedule.set(v.id, []));
+    drivers.forEach(d => driverSchedule.set(d.id, []));
+
+    // Check if a time slot conflicts with existing assignments
+    const hasConflict = (schedule: Array<{ start: Date; end: Date }>, start: Date, end: Date): boolean => {
+      return schedule.some(slot =>
+        (start < slot.end && end > slot.start) // Overlapping
+      );
+    };
+
+    // Find an available vehicle for a time slot
+    const findAvailableVehicle = (start: Date, end: Date, preferredIndex: number): any | null => {
+      if (vehicles.length === 0) return null;
+
+      // Try preferred vehicle first
+      const preferred = vehicles[preferredIndex % vehicles.length];
+      const preferredSchedule = vehicleSchedule.get(preferred.id) || [];
+      if (!hasConflict(preferredSchedule, start, end)) {
+        preferredSchedule.push({ start, end });
+        return preferred;
+      }
+
+      // Try other vehicles
+      for (const vehicle of vehicles) {
+        const schedule = vehicleSchedule.get(vehicle.id) || [];
+        if (!hasConflict(schedule, start, end)) {
+          schedule.push({ start, end });
+          return vehicle;
+        }
+      }
+      return null; // No available vehicle
+    };
+
+    // Find an available driver for a time slot
+    const findAvailableDriver = (start: Date, end: Date, preferredIndex: number): any | null => {
+      if (drivers.length === 0) return null;
+
+      // Try preferred driver first
+      const preferred = drivers[preferredIndex % drivers.length];
+      const preferredSchedule = driverSchedule.get(preferred.id) || [];
+      if (!hasConflict(preferredSchedule, start, end)) {
+        preferredSchedule.push({ start, end });
+        return preferred;
+      }
+
+      // Try other drivers
+      for (const driver of drivers) {
+        const schedule = driverSchedule.get(driver.id) || [];
+        if (!hasConflict(schedule, start, end)) {
+          schedule.push({ start, end });
+          return driver;
+        }
+      }
+      return null; // No available driver
+    };
+
+    vips.forEach((vip, vipIndex) => {
+      // ============================================================
+      // CREATE VARIED EVENTS RELATIVE TO NOW
+      // ============================================================
+
+      // Event pattern based on VIP index to create variety:
+      // - Some VIPs have events IN_PROGRESS
+      // - Some have events starting VERY soon (5-15 min)
+      // - Some have events starting soon (30-60 min)
+      // - Some have just-completed events
+      // - All have future events throughout the day
+
+      const eventPattern = vipIndex % 5;
+
+      switch (eventPattern) {
+        case 0: { // IN_PROGRESS airport pickup
+          const start = this.relativeTime(-25);
+          const end = this.relativeTime(15);
+          const driver = findAvailableDriver(start, end, vipIndex);
+          const vehicle = findAvailableVehicle(start, end, vipIndex);
+          events.push({
+            vipIds: [vip.id],
+            driverId: driver?.id,
+            vehicleId: vehicle?.id,
+            title: `Airport Pickup - ${vip.name}`,
+            type: EventType.TRANSPORT,
+            status: EventStatus.IN_PROGRESS,
+            pickupLocation: 'Airport - Terminal B',
+            dropoffLocation: 'Main Gate Registration',
+            startTime: start,
+            endTime: end,
+            actualStartTime: this.relativeTime(-23),
+            description: `ACTIVE: Driver en route with ${vip.name} from airport`,
+            notes: 'VIP collected from arrivals. ETA 15 minutes.',
+          });
+          break;
+        }
+
+        case 1: { // COMPLETED event
+          const start = this.relativeTime(-90);
+          const end = this.relativeTime(-45);
+          const driver = findAvailableDriver(start, end, vipIndex);
+          const vehicle = findAvailableVehicle(start, end, vipIndex);
+          events.push({
+            vipIds: [vip.id],
+            driverId: driver?.id,
+            vehicleId: vehicle?.id,
+            title: `Airport Pickup - ${vip.name}`,
+            type: EventType.TRANSPORT,
+            status: EventStatus.COMPLETED,
+            pickupLocation: 'Airport - Terminal A',
+            dropoffLocation: 'VIP Lodge',
+            startTime: start,
+            endTime: end,
+            actualStartTime: this.relativeTime(-88),
+            actualEndTime: this.relativeTime(-42),
+            description: `Completed pickup for ${vip.name}`,
+          });
+          break;
+        }
+
+        case 2: { // Starting in 5-10 minutes (URGENT)
+          const start = this.relativeTime(7);
+          const end = this.relativeTime(22);
+          const driver = findAvailableDriver(start, end, vipIndex);
+          const vehicle = findAvailableVehicle(start, end, vipIndex);
+          events.push({
+            vipIds: [vip.id],
+            driverId: driver?.id,
+            vehicleId: vehicle?.id,
+            title: `URGENT: Transport to Opening Ceremony - ${vip.name}`,
+            type: EventType.TRANSPORT,
+            status: EventStatus.SCHEDULED,
+            pickupLocation: 'VIP Lodge',
+            dropoffLocation: 'Main Arena - VIP Entrance',
+            startTime: start,
+            endTime: end,
+            description: `Pick up ${vip.name} for Opening Ceremony - STARTS SOON!`,
+            notes: 'Driver should be at pickup location NOW',
+          });
+          break;
+        }
+
+        case 3: { // Starting in 30-45 min
+          const start = this.relativeTime(35);
+          const end = this.relativeTime(50);
+          const driver = findAvailableDriver(start, end, vipIndex);
+          const vehicle = findAvailableVehicle(start, end, vipIndex);
+          events.push({
+            vipIds: [vip.id],
+            driverId: driver?.id,
+            vehicleId: vehicle?.id,
+            title: `VIP Lodge Transfer - ${vip.name}`,
+            type: EventType.TRANSPORT,
+            status: EventStatus.SCHEDULED,
+            pickupLocation: 'Registration Tent',
+            dropoffLocation: 'VIP Lodge - Building A',
+            startTime: start,
+            endTime: end,
+            description: `Transfer ${vip.name} to VIP accommodation after registration`,
+          });
+          break;
+        }
+
+        case 4: // In-progress MEETING (no driver/vehicle needed)
+          events.push({
+            vipIds: [vip.id],
+            title: `Donor Briefing Meeting`,
+            type: EventType.MEETING,
+            status: EventStatus.IN_PROGRESS,
+            location: 'Conference Center - Room 101',
+            startTime: this.relativeTime(-20),
+            endTime: this.relativeTime(25),
+            actualStartTime: this.relativeTime(-18),
+            description: `${vip.name} in donor briefing with development team`,
+          });
+          break;
+      }
+
+      // ============================================================
+      // ADD STANDARD DAY EVENTS FOR ALL VIPS
+      // ============================================================
+
+      // Upcoming meal (1-2 hours out) - no driver/vehicle needed
+      events.push({
+        vipIds: [vip.id],
+        title: vipIndex % 2 === 0 ? 'VIP Luncheon' : 'VIP Breakfast',
+        type: EventType.MEAL,
+        status: EventStatus.SCHEDULED,
+        location: 'VIP Dining Pavilion',
+        startTime: this.relativeTime(60 + (vipIndex % 4) * 15),
+        endTime: this.relativeTime(120 + (vipIndex % 4) * 15),
+        description: `Catered meal for ${vip.name} with other VIP guests`,
+      });
+
+      // Transport to main event (2-3 hours out)
+      {
+        const start = this.relativeTime(150 + vipIndex * 5);
+        const end = this.relativeTime(165 + vipIndex * 5);
+        const driver = findAvailableDriver(start, end, vipIndex + 3);
+        const vehicle = findAvailableVehicle(start, end, vipIndex + 2);
+        events.push({
+          vipIds: [vip.id],
+          driverId: driver?.id,
+          vehicleId: vehicle?.id,
+          title: `Transport to Scout Exhibition`,
+          type: EventType.TRANSPORT,
+          status: EventStatus.SCHEDULED,
+          pickupLocation: 'VIP Lodge',
+          dropoffLocation: 'Exhibition Grounds',
+          startTime: start,
+          endTime: end,
+          description: `Transport ${vip.name} to Scout Exhibition area`,
+        });
+      }
+
+      // Main event (3-4 hours out) - no driver/vehicle needed
+      events.push({
+        vipIds: [vip.id],
+        title: 'Scout Skills Exhibition',
+        type: EventType.EVENT,
+        status: EventStatus.SCHEDULED,
+        location: 'Exhibition Grounds - Zone A',
+        startTime: this.relativeTime(180 + vipIndex * 3),
+        endTime: this.relativeTime(270 + vipIndex * 3),
+        description: `${vip.name} tours Scout exhibitions and demonstrations`,
+      });
+
+      // Evening dinner (5-6 hours out) - no driver/vehicle needed
+      events.push({
+        vipIds: [vip.id],
+        title: 'Gala Dinner',
+        type: EventType.MEAL,
+        status: EventStatus.SCHEDULED,
+        location: 'Grand Ballroom',
+        startTime: this.relativeTime(360),
+        endTime: this.relativeTime(480),
+        description: `Black-tie dinner event with ${vip.name} and other distinguished guests`,
+      });
+
+      // Next day departure (tomorrow morning)
+      if (vip.arrivalMode === 'FLIGHT') {
+        const start = this.relativeTime(60 * 24 + 120 + vipIndex * 20);
+        const end = this.relativeTime(60 * 24 + 165 + vipIndex * 20);
+        const driver = findAvailableDriver(start, end, vipIndex + 1);
+        const vehicle = findAvailableVehicle(start, end, vipIndex + 1);
+        events.push({
+          vipIds: [vip.id],
+          driverId: driver?.id,
+          vehicleId: vehicle?.id,
+          title: `Airport Departure - ${vip.name}`,
+          type: EventType.TRANSPORT,
+          status: EventStatus.SCHEDULED,
+          pickupLocation: 'VIP Lodge',
+          dropoffLocation: 'Airport - Departures',
+          startTime: start,
+          endTime: end,
+          description: `Transport ${vip.name} to airport for departure flight`,
+          notes: 'Confirm flight status before pickup',
+        });
+      }
+    });
+
+    // ============================================================
+    // ADD MULTI-VIP GROUP EVENTS
+    // ============================================================
+
+    if (vips.length >= 4) {
+      // Group transport with multiple VIPs
+      {
+        const start = this.relativeTime(45);
+        const end = this.relativeTime(60);
+        const driver = findAvailableDriver(start, end, 0);
+        // Find a large vehicle (bus or van with capacity >= 8)
+        const largeVehicle = vehicles.find(v =>
+          v.seatCapacity >= 8 && !hasConflict(vehicleSchedule.get(v.id) || [], start, end)
+        );
+        if (largeVehicle) {
+          vehicleSchedule.get(largeVehicle.id)?.push({ start, end });
+        }
+        events.push({
+          vipIds: [vips[0].id, vips[1].id, vips[2].id],
+          driverId: driver?.id,
+          vehicleId: largeVehicle?.id,
+          title: 'Group Transport - Leadership Briefing',
+          type: EventType.TRANSPORT,
+          status: EventStatus.SCHEDULED,
+          pickupLocation: 'VIP Lodge - Main Entrance',
+          dropoffLocation: 'National HQ Building',
+          startTime: start,
+          endTime: end,
+          description: 'Multi-VIP transport for leadership briefing session',
+          notes: 'IMPORTANT: Picking up 3 VIPs - use large vehicle',
+        });
+      }
+
+      // Another group event
+      if (vips.length >= 5) {
+        const start = this.relativeTime(90);
+        const end = this.relativeTime(110);
+        const driver = findAvailableDriver(start, end, 1);
+        const vehicle = findAvailableVehicle(start, end, 1);
+        events.push({
+          vipIds: [vips[3].id, vips[4].id],
+          driverId: driver?.id,
+          vehicleId: vehicle?.id,
+          title: 'Group Transport - Media Tour',
+          type: EventType.TRANSPORT,
+          status: EventStatus.SCHEDULED,
+          pickupLocation: 'Media Center',
+          dropoffLocation: 'Historical Site',
+          startTime: start,
+          endTime: end,
+          description: 'VIP media tour with photo opportunities',
+        });
+      }
+    }
+
+    // ============================================================
+    // ADD SOME CANCELLED EVENTS FOR REALISM
+    // ============================================================
+
+    if (vips.length >= 6) {
+      events.push({
+        vipIds: [vips[5].id],
+        title: 'Private Meeting - CANCELLED',
+        type: EventType.MEETING,
+        status: EventStatus.CANCELLED,
+        location: 'Conference Room B',
+        startTime: this.relativeTime(200),
+        endTime: this.relativeTime(260),
+        description: 'Meeting cancelled due to schedule conflict',
+        notes: 'VIP requested reschedule for tomorrow',
+      });
+    }
+
+    return events;
+  }
+
+  // ============================================================
+  // HELPER METHODS
+  // ============================================================
+
+  /**
+   * Get a date relative to now
+   * @param minutesOffset - Minutes from now (negative = past, positive = future)
+   */
+  private relativeTime(minutesOffset: number): Date {
+    return new Date(Date.now() + minutesOffset * 60 * 1000);
+  }
+}
diff --git a/backend/src/settings/dto/update-pdf-settings.dto.ts b/backend/src/settings/dto/update-pdf-settings.dto.ts
new file mode 100644
index 0000000..6504fa1
--- /dev/null
+++ b/backend/src/settings/dto/update-pdf-settings.dto.ts
@@ -0,0 +1,105 @@
+import {
+  IsString,
+  IsEmail,
+  IsBoolean,
+  IsEnum,
+  IsOptional,
+  IsHexColor,
+  MaxLength,
+} from 'class-validator';
+import { PageSize } from '@prisma/client';
+
+export class UpdatePdfSettingsDto {
+  // Branding
+  @IsOptional()
+  @IsString()
+  @MaxLength(100)
+  organizationName?: string;
+
+  @IsOptional()
+  @IsHexColor()
+  accentColor?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  tagline?: string;
+
+  // Contact Info
+  @IsOptional()
+  @IsEmail()
+  contactEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50)
+  contactPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(100)
+  secondaryContactName?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50)
+  secondaryContactPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(100)
+  contactLabel?: string;
+
+  // Document Options
+  @IsOptional()
+  @IsBoolean()
+  showDraftWatermark?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showConfidentialWatermark?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showTimestamp?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showAppUrl?: boolean;
+
+  @IsOptional()
+  @IsEnum(PageSize)
+  pageSize?: PageSize;
+
+  // Content Toggles
+  @IsOptional()
+  @IsBoolean()
+  showFlightInfo?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showDriverNames?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showVehicleNames?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showVipNotes?: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  showEventDescriptions?: boolean;
+
+  // Custom Text
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  headerMessage?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  footerMessage?: string;
+}
diff --git a/backend/src/settings/settings.controller.ts b/backend/src/settings/settings.controller.ts
new file mode 100644
index 0000000..ad138d3
--- /dev/null
+++ b/backend/src/settings/settings.controller.ts
@@ -0,0 +1,61 @@
+import {
+  Controller,
+  Get,
+  Patch,
+  Post,
+  Delete,
+  Body,
+  UseGuards,
+  UseInterceptors,
+  UploadedFile,
+  ParseFilePipe,
+  MaxFileSizeValidator,
+  FileTypeValidator,
+} from '@nestjs/common';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { SettingsService } from './settings.service';
+import { UpdatePdfSettingsDto } from './dto/update-pdf-settings.dto';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { AbilitiesGuard } from '../auth/guards/abilities.guard';
+import { CanUpdate } from '../auth/decorators/check-ability.decorator';
+
+@Controller('settings')
+@UseGuards(JwtAuthGuard, AbilitiesGuard)
+export class SettingsController {
+  constructor(private readonly settingsService: SettingsService) {}
+
+  @Get('pdf')
+  @CanUpdate('Settings') // Admin-only (Settings subject is admin-only)
+  getPdfSettings() {
+    return this.settingsService.getPdfSettings();
+  }
+
+  @Patch('pdf')
+  @CanUpdate('Settings')
+  updatePdfSettings(@Body() dto: UpdatePdfSettingsDto) {
+    return this.settingsService.updatePdfSettings(dto);
+  }
+
+  @Post('pdf/logo')
+  @CanUpdate('Settings')
+  @UseInterceptors(FileInterceptor('logo'))
+  uploadLogo(
+    @UploadedFile(
+      new ParseFilePipe({
+        validators: [
+          new MaxFileSizeValidator({ maxSize: 2 * 1024 * 1024 }), // 2MB
+          new FileTypeValidator({ fileType: /(png|jpeg|jpg|svg\+xml)/ }),
+        ],
+      }),
+    )
+    file: Express.Multer.File,
+  ) {
+    return this.settingsService.uploadLogo(file);
+  }
+
+  @Delete('pdf/logo')
+  @CanUpdate('Settings')
+  deleteLogo() {
+    return this.settingsService.deleteLogo();
+  }
+}
diff --git a/backend/src/settings/settings.module.ts b/backend/src/settings/settings.module.ts
new file mode 100644
index 0000000..fb766eb
--- /dev/null
+++ b/backend/src/settings/settings.module.ts
@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { SettingsController } from './settings.controller';
+import { SettingsService } from './settings.service';
+import { PrismaModule } from '../prisma/prisma.module';
+import { AuthModule } from '../auth/auth.module';
+
+@Module({
+  imports: [PrismaModule, AuthModule],
+  controllers: [SettingsController],
+  providers: [SettingsService],
+  exports: [SettingsService],
+})
+export class SettingsModule {}
diff --git a/backend/src/settings/settings.service.ts b/backend/src/settings/settings.service.ts
new file mode 100644
index 0000000..cf875cf
--- /dev/null
+++ b/backend/src/settings/settings.service.ts
@@ -0,0 +1,139 @@
+import {
+  Injectable,
+  Logger,
+  BadRequestException,
+  InternalServerErrorException,
+} from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { UpdatePdfSettingsDto } from './dto/update-pdf-settings.dto';
+import { PdfSettings } from '@prisma/client';
+
+@Injectable()
+export class SettingsService {
+  private readonly logger = new Logger(SettingsService.name);
+  private readonly MAX_LOGO_SIZE = 2 * 1024 * 1024; // 2MB in bytes
+  private readonly ALLOWED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/svg+xml'];
+
+  constructor(private prisma: PrismaService) {}
+
+  /**
+   * Get PDF settings - creates default if none exist (singleton pattern)
+   */
+  async getPdfSettings(): Promise<PdfSettings> {
+    this.logger.log('Fetching PDF settings');
+
+    let settings = await this.prisma.pdfSettings.findFirst();
+
+    if (!settings) {
+      this.logger.log('No settings found, creating defaults');
+      settings = await this.prisma.pdfSettings.create({
+        data: {
+          organizationName: 'VIP Coordinator',
+          accentColor: '#2c3e50',
+          contactEmail: 'contact@example.com',
+          contactPhone: '555-0100',
+          contactLabel: 'Questions or Changes?',
+          pageSize: 'LETTER',
+          showDraftWatermark: false,
+          showConfidentialWatermark: false,
+          showTimestamp: true,
+          showAppUrl: false,
+          showFlightInfo: true,
+          showDriverNames: true,
+          showVehicleNames: true,
+          showVipNotes: true,
+          showEventDescriptions: true,
+        },
+      });
+      this.logger.log(`Created default settings: ${settings.id}`);
+    }
+
+    return settings;
+  }
+
+  /**
+   * Update PDF settings
+   */
+  async updatePdfSettings(dto: UpdatePdfSettingsDto): Promise<PdfSettings> {
+    this.logger.log('Updating PDF settings');
+
+    // Get existing settings (or create if none exist)
+    const existing = await this.getPdfSettings();
+
+    try {
+      const updated = await this.prisma.pdfSettings.update({
+        where: { id: existing.id },
+        data: dto,
+      });
+
+      this.logger.log(`Settings updated: ${updated.id}`);
+      return updated;
+    } catch (error) {
+      this.logger.error(`Failed to update settings: ${error.message}`);
+      throw new InternalServerErrorException('Failed to update PDF settings');
+    }
+  }
+
+  /**
+   * Upload logo as base64 data URL
+   */
+  async uploadLogo(file: Express.Multer.File): Promise<PdfSettings> {
+    this.logger.log(`Uploading logo: ${file.originalname} (${file.size} bytes)`);
+
+    // Validate file size
+    if (file.size > this.MAX_LOGO_SIZE) {
+      throw new BadRequestException(
+        `Logo file too large. Maximum size is ${this.MAX_LOGO_SIZE / 1024 / 1024}MB`,
+      );
+    }
+
+    // Validate MIME type
+    if (!this.ALLOWED_MIME_TYPES.includes(file.mimetype)) {
+      throw new BadRequestException(
+        `Invalid file type. Allowed types: PNG, JPG, SVG`,
+      );
+    }
+
+    // Convert to base64 data URL
+    const base64 = file.buffer.toString('base64');
+    const dataUrl = `data:${file.mimetype};base64,${base64}`;
+
+    // Get existing settings
+    const existing = await this.getPdfSettings();
+
+    try {
+      const updated = await this.prisma.pdfSettings.update({
+        where: { id: existing.id },
+        data: { logoUrl: dataUrl },
+      });
+
+      this.logger.log(`Logo uploaded: ${file.originalname}`);
+      return updated;
+    } catch (error) {
+      this.logger.error(`Failed to upload logo: ${error.message}`);
+      throw new InternalServerErrorException('Failed to upload logo');
+    }
+  }
+
+  /**
+   * Delete logo
+   */
+  async deleteLogo(): Promise<PdfSettings> {
+    this.logger.log('Deleting logo');
+
+    const existing = await this.getPdfSettings();
+
+    try {
+      const updated = await this.prisma.pdfSettings.update({
+        where: { id: existing.id },
+        data: { logoUrl: null },
+      });
+
+      this.logger.log('Logo deleted');
+      return updated;
+    } catch (error) {
+      this.logger.error(`Failed to delete logo: ${error.message}`);
+      throw new InternalServerErrorException('Failed to delete logo');
+    }
+  }
+}
diff --git a/backend/src/signal/messages.controller.ts b/backend/src/signal/messages.controller.ts
new file mode 100644
index 0000000..9b3a107
--- /dev/null
+++ b/backend/src/signal/messages.controller.ts
@@ -0,0 +1,200 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Body,
+  Param,
+  Query,
+  UseGuards,
+  Logger,
+  Res,
+} from '@nestjs/common';
+import { Response } from 'express';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { RolesGuard } from '../auth/guards/roles.guard';
+import { Roles } from '../auth/decorators/roles.decorator';
+import { Public } from '../auth/decorators/public.decorator';
+import { MessagesService, SendMessageDto } from './messages.service';
+
+// DTO for incoming Signal webhook
+interface SignalWebhookPayload {
+  envelope: {
+    source: string;
+    sourceNumber?: string;
+    sourceName?: string;
+    timestamp: number;
+    dataMessage?: {
+      timestamp: number;
+      message: string;
+    };
+  };
+  account: string;
+}
+
+@Controller('signal/messages')
+export class MessagesController {
+  private readonly logger = new Logger(MessagesController.name);
+
+  constructor(private readonly messagesService: MessagesService) {}
+
+  /**
+   * Get messages for a specific driver
+   */
+  @Get('driver/:driverId')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async getMessagesForDriver(
+    @Param('driverId') driverId: string,
+    @Query('limit') limit?: string,
+  ) {
+    const messages = await this.messagesService.getMessagesForDriver(
+      driverId,
+      limit ? parseInt(limit, 10) : 50,
+    );
+    // Return in chronological order for display
+    return messages.reverse();
+  }
+
+  /**
+   * Send a message to a driver
+   */
+  @Post('send')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async sendMessage(@Body() dto: SendMessageDto) {
+    return this.messagesService.sendMessage(dto);
+  }
+
+  /**
+   * Mark messages as read for a driver
+   */
+  @Post('driver/:driverId/read')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async markAsRead(@Param('driverId') driverId: string) {
+    const result = await this.messagesService.markMessagesAsRead(driverId);
+    return { success: true, count: result.count };
+  }
+
+  /**
+   * Get unread message counts for all drivers
+   */
+  @Get('unread')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async getUnreadCounts() {
+    return this.messagesService.getUnreadCounts();
+  }
+
+  /**
+   * Get unread count for a specific driver
+   */
+  @Get('driver/:driverId/unread')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async getUnreadCountForDriver(@Param('driverId') driverId: string) {
+    const count = await this.messagesService.getUnreadCountForDriver(driverId);
+    return { driverId, unread: count };
+  }
+
+  /**
+   * Webhook endpoint for incoming Signal messages
+   * This is called by signal-cli-rest-api when messages are received
+   * Public endpoint - no authentication required
+   */
+  @Public()
+  @Post('webhook')
+  async handleWebhook(@Body() payload: SignalWebhookPayload) {
+    this.logger.debug('Received Signal webhook:', JSON.stringify(payload));
+
+    try {
+      const envelope = payload.envelope;
+
+      if (!envelope?.dataMessage?.message) {
+        this.logger.debug('Webhook received but no message content');
+        return { success: true, message: 'No message content' };
+      }
+
+      const fromNumber = envelope.sourceNumber || envelope.source;
+      const content = envelope.dataMessage.message;
+      const timestamp = envelope.dataMessage.timestamp?.toString();
+
+      const message = await this.messagesService.processIncomingMessage(
+        fromNumber,
+        content,
+        timestamp,
+      );
+
+      if (message) {
+        return { success: true, messageId: message.id };
+      } else {
+        return { success: true, message: 'Unknown sender' };
+      }
+    } catch (error: any) {
+      this.logger.error('Failed to process webhook:', error.message);
+      return { success: false, error: error.message };
+    }
+  }
+
+  /**
+   * Export all messages as a text file
+   */
+  @Get('export')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR')
+  async exportMessages(@Res() res: Response) {
+    const exportData = await this.messagesService.exportAllMessages();
+
+    const filename = `signal-chats-${new Date().toISOString().split('T')[0]}.txt`;
+
+    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+    res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+    res.send(exportData);
+  }
+
+  /**
+   * Delete all messages
+   */
+  @Delete('all')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR')
+  async deleteAllMessages() {
+    const count = await this.messagesService.deleteAllMessages();
+    return { success: true, deleted: count };
+  }
+
+  /**
+   * Get message statistics
+   */
+  @Get('stats')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async getMessageStats() {
+    return this.messagesService.getMessageStats();
+  }
+
+  /**
+   * Check which events have driver responses since the event started
+   * Used to determine if the "awaiting response" glow should show
+   */
+  @Post('check-responses')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async checkDriverResponses(
+    @Body()
+    body: {
+      events: Array<{ eventId: string; driverId: string; startTime: string }>;
+    },
+  ) {
+    const pairs = body.events.map((e) => ({
+      eventId: e.eventId,
+      driverId: e.driverId,
+      sinceTime: new Date(e.startTime),
+    }));
+
+    const respondedEventIds =
+      await this.messagesService.checkDriverResponsesSince(pairs);
+    return { respondedEventIds };
+  }
+}
diff --git a/backend/src/signal/messages.service.ts b/backend/src/signal/messages.service.ts
new file mode 100644
index 0000000..6ddab01
--- /dev/null
+++ b/backend/src/signal/messages.service.ts
@@ -0,0 +1,432 @@
+import { Injectable, Logger, NotFoundException } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { SignalService } from './signal.service';
+import { MessageDirection, EventStatus } from '@prisma/client';
+
+export interface SendMessageDto {
+  driverId: string;
+  content: string;
+}
+
+export interface MessageWithDriver {
+  id: string;
+  driverId: string;
+  direction: MessageDirection;
+  content: string;
+  timestamp: Date;
+  isRead: boolean;
+  driver: {
+    id: string;
+    name: string;
+    phone: string;
+  };
+}
+
+@Injectable()
+export class MessagesService {
+  private readonly logger = new Logger(MessagesService.name);
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly signalService: SignalService,
+  ) {}
+
+  /**
+   * Get all messages for a driver
+   */
+  async getMessagesForDriver(driverId: string, limit: number = 50) {
+    const driver = await this.prisma.driver.findFirst({
+      where: { id: driverId, deletedAt: null },
+    });
+
+    if (!driver) {
+      throw new NotFoundException(`Driver with ID ${driverId} not found`);
+    }
+
+    return this.prisma.signalMessage.findMany({
+      where: { driverId },
+      orderBy: { timestamp: 'desc' },
+      take: limit,
+    });
+  }
+
+  /**
+   * Send a message to a driver
+   */
+  async sendMessage(dto: SendMessageDto) {
+    const driver = await this.prisma.driver.findFirst({
+      where: { id: dto.driverId, deletedAt: null },
+    });
+
+    if (!driver) {
+      throw new NotFoundException(`Driver with ID ${dto.driverId} not found`);
+    }
+
+    // Get the linked Signal number
+    const fromNumber = await this.signalService.getLinkedNumber();
+    if (!fromNumber) {
+      throw new Error('No Signal account linked. Please link an account in Admin Tools.');
+    }
+
+    // Check driver has a phone number
+    if (!driver.phone) {
+      throw new Error('Driver does not have a phone number configured.');
+    }
+
+    // Format the driver's phone number
+    const toNumber = this.signalService.formatPhoneNumber(driver.phone);
+
+    // Send via Signal
+    const result = await this.signalService.sendMessage(fromNumber, toNumber, dto.content);
+
+    if (!result.success) {
+      throw new Error(result.error || 'Failed to send message via Signal');
+    }
+
+    // Store the message in database
+    const message = await this.prisma.signalMessage.create({
+      data: {
+        driverId: dto.driverId,
+        direction: MessageDirection.OUTBOUND,
+        content: dto.content,
+        isRead: true, // Outbound messages are always "read"
+        signalTimestamp: result.timestamp?.toString(),
+      },
+    });
+
+    this.logger.log(`Message sent to driver ${driver.name} (${toNumber})`);
+
+    return message;
+  }
+
+  /**
+   * Process incoming message from Signal webhook
+   */
+  async processIncomingMessage(
+    fromNumber: string,
+    content: string,
+    signalTimestamp?: string,
+  ) {
+    // Normalize phone number for matching
+    const normalizedPhone = this.normalizePhoneForSearch(fromNumber);
+
+    // Find driver by phone number
+    const driver = await this.prisma.driver.findFirst({
+      where: {
+        deletedAt: null,
+        OR: [
+          { phone: fromNumber },
+          { phone: normalizedPhone },
+          { phone: { contains: normalizedPhone.slice(-10) } }, // Last 10 digits
+        ],
+      },
+    });
+
+    if (!driver) {
+      this.logger.warn(`Received message from unknown number: ${fromNumber}`);
+      return null;
+    }
+
+    // Check for duplicate message
+    if (signalTimestamp) {
+      const existing = await this.prisma.signalMessage.findFirst({
+        where: {
+          driverId: driver.id,
+          signalTimestamp,
+        },
+      });
+      if (existing) {
+        this.logger.debug(`Duplicate message ignored: ${signalTimestamp}`);
+        return existing;
+      }
+    }
+
+    // Store the message
+    const message = await this.prisma.signalMessage.create({
+      data: {
+        driverId: driver.id,
+        direction: MessageDirection.INBOUND,
+        content,
+        isRead: false,
+        signalTimestamp,
+      },
+    });
+
+    this.logger.log(`Incoming message from driver ${driver.name}: ${content.substring(0, 50)}...`);
+
+    // Check if this is a status response (1, 2, or 3)
+    const trimmedContent = content.trim();
+    if (['1', '2', '3'].includes(trimmedContent)) {
+      await this.processDriverStatusResponse(driver, parseInt(trimmedContent, 10));
+    }
+
+    return message;
+  }
+
+  /**
+   * Process a driver's status response (1=Confirmed, 2=Delayed, 3=Issue)
+   */
+  private async processDriverStatusResponse(driver: any, response: number) {
+    // Find the driver's current IN_PROGRESS event
+    const activeEvent = await this.prisma.scheduleEvent.findFirst({
+      where: {
+        driverId: driver.id,
+        status: EventStatus.IN_PROGRESS,
+        deletedAt: null,
+      },
+      include: { vehicle: true },
+    });
+
+    if (!activeEvent) {
+      // No active event, send a clarification
+      await this.sendAutoReply(driver, 'No active trip found for your response. If you need assistance, please send a message to the coordinator.');
+      return;
+    }
+
+    const now = new Date();
+    let replyMessage: string;
+    let noteText: string;
+
+    switch (response) {
+      case 1: // Confirmed
+        noteText = `[${now.toLocaleTimeString()}] ✅ Driver confirmed en route`;
+        replyMessage = `✅ Confirmed! Safe travels with your VIP. Reply when completed or if you need assistance.`;
+        break;
+
+      case 2: // Delayed
+        noteText = `[${now.toLocaleTimeString()}] ⏰ Driver reported DELAY - awaiting details`;
+        replyMessage = `⏰ Delay noted. Please reply with the reason for the delay. The coordinator has been alerted.`;
+        break;
+
+      case 3: // Issue
+        noteText = `[${now.toLocaleTimeString()}] 🚨 Driver reported ISSUE - needs help`;
+        replyMessage = `🚨 Issue reported! A coordinator will contact you shortly. Please describe the problem in your next message.`;
+        break;
+
+      default:
+        return;
+    }
+
+    // Update the event with the driver's response
+    await this.prisma.scheduleEvent.update({
+      where: { id: activeEvent.id },
+      data: {
+        notes: activeEvent.notes
+          ? `${activeEvent.notes}\n${noteText}`
+          : noteText,
+      },
+    });
+
+    this.logger.log(`Driver ${driver.name} responded with ${response} for event ${activeEvent.id}`);
+
+    // Send auto-reply
+    await this.sendAutoReply(driver, replyMessage);
+  }
+
+  /**
+   * Send an automated reply to a driver
+   */
+  private async sendAutoReply(driver: any, message: string) {
+    try {
+      const fromNumber = await this.signalService.getLinkedNumber();
+      if (!fromNumber) {
+        this.logger.warn('No Signal account linked, cannot send auto-reply');
+        return;
+      }
+
+      const toNumber = this.signalService.formatPhoneNumber(driver.phone);
+      await this.signalService.sendMessage(fromNumber, toNumber, message);
+
+      // Store the outbound message
+      await this.prisma.signalMessage.create({
+        data: {
+          driverId: driver.id,
+          direction: MessageDirection.OUTBOUND,
+          content: message,
+          isRead: true,
+        },
+      });
+
+      this.logger.log(`Auto-reply sent to driver ${driver.name}`);
+    } catch (error) {
+      this.logger.error(`Failed to send auto-reply to driver ${driver.name}:`, error);
+    }
+  }
+
+  /**
+   * Mark messages as read for a driver
+   */
+  async markMessagesAsRead(driverId: string) {
+    return this.prisma.signalMessage.updateMany({
+      where: {
+        driverId,
+        direction: MessageDirection.INBOUND,
+        isRead: false,
+      },
+      data: { isRead: true },
+    });
+  }
+
+  /**
+   * Get unread message count per driver
+   */
+  async getUnreadCounts() {
+    const result = await this.prisma.signalMessage.groupBy({
+      by: ['driverId'],
+      where: {
+        direction: MessageDirection.INBOUND,
+        isRead: false,
+      },
+      _count: true,
+    });
+
+    return result.reduce((acc, item) => {
+      acc[item.driverId] = item._count;
+      return acc;
+    }, {} as Record<string, number>);
+  }
+
+  /**
+   * Get unread count for a specific driver
+   */
+  async getUnreadCountForDriver(driverId: string) {
+    return this.prisma.signalMessage.count({
+      where: {
+        driverId,
+        direction: MessageDirection.INBOUND,
+        isRead: false,
+      },
+    });
+  }
+
+  /**
+   * Normalize phone number for database searching
+   */
+  private normalizePhoneForSearch(phone: string): string {
+    return phone.replace(/\D/g, '');
+  }
+
+  /**
+   * Export all messages as formatted text
+   */
+  async exportAllMessages(): Promise<string> {
+    const messages = await this.prisma.signalMessage.findMany({
+      include: {
+        driver: {
+          select: { id: true, name: true, phone: true },
+        },
+      },
+      orderBy: [
+        { driverId: 'asc' },
+        { timestamp: 'asc' },
+      ],
+    });
+
+    if (messages.length === 0) {
+      return 'No messages to export.';
+    }
+
+    // Group messages by driver
+    const byDriver: Record<string, typeof messages> = {};
+    for (const msg of messages) {
+      const driverId = msg.driverId;
+      if (!byDriver[driverId]) {
+        byDriver[driverId] = [];
+      }
+      byDriver[driverId].push(msg);
+    }
+
+    // Format output
+    const lines: string[] = [];
+    lines.push('='.repeat(60));
+    lines.push('SIGNAL CHAT EXPORT');
+    lines.push(`Exported: ${new Date().toISOString()}`);
+    lines.push(`Total Messages: ${messages.length}`);
+    lines.push('='.repeat(60));
+    lines.push('');
+
+    for (const [driverId, driverMessages] of Object.entries(byDriver)) {
+      const driver = driverMessages[0]?.driver;
+      lines.push('-'.repeat(60));
+      lines.push(`DRIVER: ${driver?.name || 'Unknown'}`);
+      lines.push(`Phone: ${driver?.phone || 'N/A'}`);
+      lines.push(`Messages: ${driverMessages.length}`);
+      lines.push('-'.repeat(60));
+
+      for (const msg of driverMessages) {
+        const direction = msg.direction === 'INBOUND' ? '← IN ' : '→ OUT';
+        const time = new Date(msg.timestamp).toLocaleString();
+        lines.push(`[${time}] ${direction}: ${msg.content}`);
+      }
+      lines.push('');
+    }
+
+    return lines.join('\n');
+  }
+
+  /**
+   * Delete all messages
+   */
+  async deleteAllMessages(): Promise<number> {
+    const result = await this.prisma.signalMessage.deleteMany({});
+    this.logger.log(`Deleted ${result.count} messages`);
+    return result.count;
+  }
+
+  /**
+   * Check which driver-event pairs have driver responses since the event started
+   * @param pairs Array of {driverId, eventId, sinceTime}
+   * @returns Set of eventIds where the driver has responded since sinceTime
+   */
+  async checkDriverResponsesSince(
+    pairs: Array<{ driverId: string; eventId: string; sinceTime: Date }>,
+  ): Promise<string[]> {
+    const respondedEventIds: string[] = [];
+
+    for (const pair of pairs) {
+      const hasResponse = await this.prisma.signalMessage.findFirst({
+        where: {
+          driverId: pair.driverId,
+          direction: MessageDirection.INBOUND,
+          timestamp: { gte: pair.sinceTime },
+        },
+      });
+
+      if (hasResponse) {
+        respondedEventIds.push(pair.eventId);
+      }
+    }
+
+    return respondedEventIds;
+  }
+
+  /**
+   * Get message statistics
+   */
+  async getMessageStats() {
+    const [total, inbound, outbound, unread] = await Promise.all([
+      this.prisma.signalMessage.count(),
+      this.prisma.signalMessage.count({
+        where: { direction: MessageDirection.INBOUND },
+      }),
+      this.prisma.signalMessage.count({
+        where: { direction: MessageDirection.OUTBOUND },
+      }),
+      this.prisma.signalMessage.count({
+        where: { direction: MessageDirection.INBOUND, isRead: false },
+      }),
+    ]);
+
+    const driversWithMessages = await this.prisma.signalMessage.groupBy({
+      by: ['driverId'],
+    });
+
+    return {
+      total,
+      inbound,
+      outbound,
+      unread,
+      driversWithMessages: driversWithMessages.length,
+    };
+  }
+}
diff --git a/backend/src/signal/signal-polling.service.ts b/backend/src/signal/signal-polling.service.ts
new file mode 100644
index 0000000..bbd014c
--- /dev/null
+++ b/backend/src/signal/signal-polling.service.ts
@@ -0,0 +1,115 @@
+import { Injectable, Logger, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { SignalService } from './signal.service';
+import { MessagesService } from './messages.service';
+
+@Injectable()
+export class SignalPollingService implements OnModuleInit, OnModuleDestroy {
+  private readonly logger = new Logger(SignalPollingService.name);
+  private pollingInterval: NodeJS.Timeout | null = null;
+  private isPolling = false;
+
+  // Poll every 5 seconds
+  private readonly POLL_INTERVAL_MS = 5000;
+
+  constructor(
+    private readonly signalService: SignalService,
+    private readonly messagesService: MessagesService,
+  ) {}
+
+  onModuleInit() {
+    this.startPolling();
+  }
+
+  onModuleDestroy() {
+    this.stopPolling();
+  }
+
+  private startPolling() {
+    this.logger.log('Starting Signal message polling...');
+    this.pollingInterval = setInterval(() => this.pollMessages(), this.POLL_INTERVAL_MS);
+    // Also poll immediately on startup
+    this.pollMessages();
+  }
+
+  private stopPolling() {
+    if (this.pollingInterval) {
+      clearInterval(this.pollingInterval);
+      this.pollingInterval = null;
+      this.logger.log('Stopped Signal message polling');
+    }
+  }
+
+  private async pollMessages() {
+    // Prevent concurrent polling
+    if (this.isPolling) {
+      return;
+    }
+
+    this.isPolling = true;
+
+    try {
+      const linkedNumber = await this.signalService.getLinkedNumber();
+      if (!linkedNumber) {
+        // No account linked, skip polling
+        return;
+      }
+
+      const messages = await this.signalService.receiveMessages(linkedNumber);
+
+      if (messages && messages.length > 0) {
+        this.logger.log(`Received ${messages.length} message(s) from Signal`);
+
+        for (const msg of messages) {
+          await this.processMessage(msg);
+        }
+      }
+    } catch (error: any) {
+      // Only log errors that aren't connection issues (Signal CLI might not be ready)
+      if (!error.message?.includes('ECONNREFUSED')) {
+        this.logger.error(`Error polling messages: ${error.message}`);
+      }
+    } finally {
+      this.isPolling = false;
+    }
+  }
+
+  private async processMessage(msg: any) {
+    try {
+      // Signal CLI returns messages in various formats
+      // We're looking for envelope.dataMessage.message
+      const envelope = msg.envelope;
+
+      if (!envelope) {
+        return;
+      }
+
+      // Get the sender's phone number
+      const fromNumber = envelope.sourceNumber || envelope.source;
+
+      // Check for data message (regular text message)
+      const dataMessage = envelope.dataMessage;
+      if (dataMessage?.message) {
+        const content = dataMessage.message;
+        const timestamp = dataMessage.timestamp?.toString();
+
+        this.logger.debug(`Processing message from ${fromNumber}: ${content.substring(0, 50)}...`);
+
+        await this.messagesService.processIncomingMessage(
+          fromNumber,
+          content,
+          timestamp,
+        );
+      }
+
+      // Also handle sync messages (messages sent from other linked devices)
+      const syncMessage = envelope.syncMessage;
+      if (syncMessage?.sentMessage?.message) {
+        // This is a message we sent from another device, we can ignore it
+        // or store it if needed
+        this.logger.debug('Received sync message (sent from another device)');
+      }
+    } catch (error: any) {
+      this.logger.error(`Error processing message: ${error.message}`);
+    }
+  }
+}
diff --git a/backend/src/signal/signal.controller.ts b/backend/src/signal/signal.controller.ts
new file mode 100644
index 0000000..9c51eb0
--- /dev/null
+++ b/backend/src/signal/signal.controller.ts
@@ -0,0 +1,150 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { RolesGuard } from '../auth/guards/roles.guard';
+import { Roles } from '../auth/decorators/roles.decorator';
+import { SignalService, SignalStatus } from './signal.service';
+
+@Controller('signal')
+@UseGuards(JwtAuthGuard, RolesGuard)
+export class SignalController {
+  constructor(private readonly signalService: SignalService) {}
+
+  /**
+   * Get Signal connection status
+   */
+  @Get('status')
+  @Roles('ADMINISTRATOR')
+  async getStatus(): Promise<SignalStatus> {
+    return this.signalService.getStatus();
+  }
+
+  /**
+   * Get QR code for linking device
+   */
+  @Get('qrcode')
+  @Roles('ADMINISTRATOR')
+  async getQRCode() {
+    const result = await this.signalService.getQRCodeLink();
+    if (!result) {
+      return {
+        success: false,
+        message: 'Device already linked. Unlink first to re-link.',
+      };
+    }
+    return {
+      success: true,
+      qrcode: result.qrcode,
+    };
+  }
+
+  /**
+   * Register a new phone number
+   */
+  @Post('register')
+  @Roles('ADMINISTRATOR')
+  async registerNumber(@Body() body: { phoneNumber: string; captcha?: string }) {
+    return this.signalService.registerNumber(body.phoneNumber, body.captcha);
+  }
+
+  /**
+   * Verify phone number with code
+   */
+  @Post('verify')
+  @Roles('ADMINISTRATOR')
+  async verifyNumber(@Body() body: { phoneNumber: string; code: string }) {
+    return this.signalService.verifyNumber(body.phoneNumber, body.code);
+  }
+
+  /**
+   * Unlink the current account
+   */
+  @Delete('unlink/:phoneNumber')
+  @Roles('ADMINISTRATOR')
+  async unlinkAccount(@Param('phoneNumber') phoneNumber: string) {
+    return this.signalService.unlinkAccount(phoneNumber);
+  }
+
+  /**
+   * Send a test message
+   */
+  @Post('send')
+  @Roles('ADMINISTRATOR')
+  async sendMessage(@Body() body: { to: string; message: string }) {
+    const fromNumber = await this.signalService.getLinkedNumber();
+    if (!fromNumber) {
+      return {
+        success: false,
+        error: 'No Signal account linked. Please link an account first.',
+      };
+    }
+
+    const formattedTo = this.signalService.formatPhoneNumber(body.to);
+    return this.signalService.sendMessage(fromNumber, formattedTo, body.message);
+  }
+
+  /**
+   * Send message to multiple recipients
+   */
+  @Post('send-bulk')
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async sendBulkMessage(@Body() body: { recipients: string[]; message: string }) {
+    const fromNumber = await this.signalService.getLinkedNumber();
+    if (!fromNumber) {
+      return {
+        success: false,
+        error: 'No Signal account linked. Please link an account first.',
+      };
+    }
+
+    const formattedRecipients = body.recipients.map((r) =>
+      this.signalService.formatPhoneNumber(r),
+    );
+    return this.signalService.sendBulkMessage(
+      fromNumber,
+      formattedRecipients,
+      body.message,
+    );
+  }
+
+  /**
+   * Send a PDF or file attachment via Signal
+   */
+  @Post('send-attachment')
+  @Roles('ADMINISTRATOR', 'COORDINATOR')
+  async sendAttachment(
+    @Body()
+    body: {
+      to: string;
+      message?: string;
+      attachment: string; // Base64 encoded file
+      filename: string;
+      mimeType?: string;
+    },
+  ) {
+    const fromNumber = await this.signalService.getLinkedNumber();
+    if (!fromNumber) {
+      return {
+        success: false,
+        error: 'No Signal account linked. Please link an account first.',
+      };
+    }
+
+    const formattedTo = this.signalService.formatPhoneNumber(body.to);
+    return this.signalService.sendMessageWithAttachment(
+      fromNumber,
+      formattedTo,
+      body.message || '',
+      body.attachment,
+      body.filename,
+      body.mimeType || 'application/pdf',
+    );
+  }
+}
diff --git a/backend/src/signal/signal.module.ts b/backend/src/signal/signal.module.ts
new file mode 100644
index 0000000..336e317
--- /dev/null
+++ b/backend/src/signal/signal.module.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { PrismaModule } from '../prisma/prisma.module';
+import { SignalService } from './signal.service';
+import { SignalController } from './signal.controller';
+import { MessagesService } from './messages.service';
+import { MessagesController } from './messages.controller';
+import { SignalPollingService } from './signal-polling.service';
+
+@Module({
+  imports: [PrismaModule],
+  controllers: [SignalController, MessagesController],
+  providers: [SignalService, MessagesService, SignalPollingService],
+  exports: [SignalService, MessagesService],
+})
+export class SignalModule {}
diff --git a/backend/src/signal/signal.service.ts b/backend/src/signal/signal.service.ts
new file mode 100644
index 0000000..50cee3a
--- /dev/null
+++ b/backend/src/signal/signal.service.ts
@@ -0,0 +1,327 @@
+import { Injectable, Logger } from '@nestjs/common';
+import axios, { AxiosInstance } from 'axios';
+
+interface SignalAccount {
+  number: string;
+  uuid: string;
+  username?: string;
+}
+
+export interface SignalStatus {
+  isConnected: boolean;
+  isLinked: boolean;
+  phoneNumber: string | null;
+  error?: string;
+}
+
+export interface QRCodeResponse {
+  qrcode: string;
+  expiresAt?: number;
+}
+
+@Injectable()
+export class SignalService {
+  private readonly logger = new Logger(SignalService.name);
+  private readonly client: AxiosInstance;
+  private readonly baseUrl: string;
+
+  constructor() {
+    this.baseUrl = process.env.SIGNAL_API_URL || 'http://localhost:8080';
+    this.client = axios.create({
+      baseURL: this.baseUrl,
+      timeout: 30000,
+    });
+  }
+
+  /**
+   * Check if Signal API is available and get connection status
+   */
+  async getStatus(): Promise<SignalStatus> {
+    try {
+      // Check if API is reachable
+      const response = await this.client.get('/v1/about');
+
+      // Try to get registered accounts
+      // API returns array of phone number strings: ["+1234567890"]
+      const accountsResponse = await this.client.get('/v1/accounts');
+      const accounts: string[] = accountsResponse.data;
+
+      if (accounts.length > 0) {
+        return {
+          isConnected: true,
+          isLinked: true,
+          phoneNumber: accounts[0],
+        };
+      }
+
+      return {
+        isConnected: true,
+        isLinked: false,
+        phoneNumber: null,
+      };
+    } catch (error: any) {
+      this.logger.error('Failed to connect to Signal API:', error.message);
+      return {
+        isConnected: false,
+        isLinked: false,
+        phoneNumber: null,
+        error: error.code === 'ECONNREFUSED'
+          ? 'Signal API container is not running'
+          : error.message,
+      };
+    }
+  }
+
+  /**
+   * Get QR code for linking a new device
+   */
+  async getQRCodeLink(deviceName: string = 'VIP Coordinator'): Promise<QRCodeResponse | null> {
+    try {
+      // First check if already linked
+      const status = await this.getStatus();
+      if (status.isLinked) {
+        this.logger.warn('Device already linked to Signal');
+        return null;
+      }
+
+      // Request QR code for device linking - returns raw PNG image
+      const response = await this.client.get('/v1/qrcodelink', {
+        params: { device_name: deviceName },
+        timeout: 60000, // QR generation can take a moment
+        responseType: 'arraybuffer', // Get raw binary data
+      });
+
+      // Convert to base64
+      const base64 = Buffer.from(response.data, 'binary').toString('base64');
+
+      return {
+        qrcode: base64,
+      };
+    } catch (error: any) {
+      this.logger.error('Failed to get QR code:', error.message);
+      throw error;
+    }
+  }
+
+  /**
+   * Register a new phone number (requires verification)
+   */
+  async registerNumber(phoneNumber: string, captcha?: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const response = await this.client.post(`/v1/register/${phoneNumber}`, {
+        captcha,
+        use_voice: false,
+      });
+
+      return {
+        success: true,
+        message: 'Verification code sent. Check your phone.',
+      };
+    } catch (error: any) {
+      this.logger.error('Failed to register number:', error.message);
+      return {
+        success: false,
+        message: error.response?.data?.error || error.message,
+      };
+    }
+  }
+
+  /**
+   * Verify a phone number with the code received
+   */
+  async verifyNumber(phoneNumber: string, verificationCode: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const response = await this.client.post(`/v1/register/${phoneNumber}/verify/${verificationCode}`);
+
+      return {
+        success: true,
+        message: 'Phone number verified and linked successfully!',
+      };
+    } catch (error: any) {
+      this.logger.error('Failed to verify number:', error.message);
+      return {
+        success: false,
+        message: error.response?.data?.error || error.message,
+      };
+    }
+  }
+
+  /**
+   * Unlink/unregister the current account
+   */
+  async unlinkAccount(phoneNumber: string): Promise<{ success: boolean; message: string }> {
+    try {
+      await this.client.delete(`/v1/accounts/${phoneNumber}`);
+
+      return {
+        success: true,
+        message: 'Account unlinked successfully',
+      };
+    } catch (error: any) {
+      this.logger.error('Failed to unlink account:', error.message);
+      return {
+        success: false,
+        message: error.response?.data?.error || error.message,
+      };
+    }
+  }
+
+  /**
+   * Send a message to a recipient
+   */
+  async sendMessage(
+    fromNumber: string,
+    toNumber: string,
+    message: string,
+  ): Promise<{ success: boolean; timestamp?: number; error?: string }> {
+    try {
+      const response = await this.client.post(`/v2/send`, {
+        number: fromNumber,
+        recipients: [toNumber],
+        message,
+      });
+
+      this.logger.log(`Message sent to ${toNumber}`);
+      return {
+        success: true,
+        timestamp: response.data.timestamp,
+      };
+    } catch (error: any) {
+      this.logger.error(`Failed to send message to ${toNumber}:`, error.message);
+      return {
+        success: false,
+        error: error.response?.data?.error || error.message,
+      };
+    }
+  }
+
+  /**
+   * Send a message to multiple recipients
+   */
+  async sendBulkMessage(
+    fromNumber: string,
+    toNumbers: string[],
+    message: string,
+  ): Promise<{ success: boolean; sent: number; failed: number; errors: string[] }> {
+    const results = {
+      success: true,
+      sent: 0,
+      failed: 0,
+      errors: [] as string[],
+    };
+
+    for (const toNumber of toNumbers) {
+      const result = await this.sendMessage(fromNumber, toNumber, message);
+      if (result.success) {
+        results.sent++;
+      } else {
+        results.failed++;
+        results.errors.push(`${toNumber}: ${result.error}`);
+      }
+    }
+
+    results.success = results.failed === 0;
+    return results;
+  }
+
+  /**
+   * Get the linked phone number (if any)
+   */
+  async getLinkedNumber(): Promise<string | null> {
+    try {
+      const response = await this.client.get('/v1/accounts');
+      // API returns array of phone number strings directly: ["+1234567890"]
+      const accounts: string[] = response.data;
+
+      if (accounts.length > 0) {
+        return accounts[0];
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Format phone number for Signal (must include country code)
+   */
+  formatPhoneNumber(phone: string): string {
+    // Remove all non-digit characters
+    let cleaned = phone.replace(/\D/g, '');
+
+    // Add US country code if not present
+    if (cleaned.length === 10) {
+      cleaned = '1' + cleaned;
+    }
+
+    // Add + prefix
+    if (!cleaned.startsWith('+')) {
+      cleaned = '+' + cleaned;
+    }
+
+    return cleaned;
+  }
+
+  /**
+   * Receive pending messages for the account
+   * This fetches and removes messages from Signal's queue
+   */
+  async receiveMessages(phoneNumber: string): Promise<any[]> {
+    try {
+      const response = await this.client.get(`/v1/receive/${phoneNumber}`, {
+        timeout: 10000,
+      });
+
+      // Response is an array of message envelopes
+      return response.data || [];
+    } catch (error: any) {
+      // Don't log timeout errors or empty responses as errors
+      if (error.code === 'ECONNABORTED' || error.response?.status === 204) {
+        return [];
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Send a message with a file attachment (PDF, image, etc.)
+   * @param fromNumber - The sender's phone number
+   * @param toNumber - The recipient's phone number
+   * @param message - Optional text message to accompany the attachment
+   * @param attachment - Base64 encoded file data
+   * @param filename - Name for the file
+   * @param mimeType - MIME type of the file (e.g., 'application/pdf')
+   */
+  async sendMessageWithAttachment(
+    fromNumber: string,
+    toNumber: string,
+    message: string,
+    attachment: string,
+    filename: string,
+    mimeType: string = 'application/pdf',
+  ): Promise<{ success: boolean; timestamp?: number; error?: string }> {
+    try {
+      // Format: data:<MIME-TYPE>;filename=<FILENAME>;base64,<BASE64 ENCODED DATA>
+      const base64Attachment = `data:${mimeType};filename=${filename};base64,${attachment}`;
+
+      const response = await this.client.post(`/v2/send`, {
+        number: fromNumber,
+        recipients: [toNumber],
+        message: message || '',
+        base64_attachments: [base64Attachment],
+      });
+
+      this.logger.log(`Message with attachment sent to ${toNumber}: ${filename}`);
+      return {
+        success: true,
+        timestamp: response.data.timestamp,
+      };
+    } catch (error: any) {
+      this.logger.error(`Failed to send attachment to ${toNumber}:`, error.message);
+      return {
+        success: false,
+        error: error.response?.data?.error || error.message,
+      };
+    }
+  }
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index f78812f..b9a6106 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -35,8 +35,22 @@ services:
       retries: 5
     restart: unless-stopped
 
+  # Signal CLI REST API for messaging
+  signal-api:
+    image: bbernhard/signal-cli-rest-api:latest
+    container_name: vip-signal
+    environment:
+      - MODE=native
+    ports:
+      - "8080:8080"
+    volumes:
+      - signal_data:/home/.local/share/signal-cli
+    restart: unless-stopped
+
 volumes:
   postgres_data:
     name: vip_postgres_data
   redis_data:
     name: vip_redis_data
+  signal_data:
+    name: vip_signal_data
diff --git a/frontend/.env.example b/frontend/.env.example
index c4bd19a..9d6b660 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -8,3 +8,8 @@ VITE_API_URL=http://localhost:3000/api/v1
 VITE_AUTH0_DOMAIN=your-tenant.us.auth0.com
 VITE_AUTH0_CLIENT_ID=your-auth0-client-id
 VITE_AUTH0_AUDIENCE=https://your-api-identifier
+
+# Organization Contact Information (for PDF exports)
+VITE_CONTACT_EMAIL=coordinator@example.com
+VITE_CONTACT_PHONE=(555) 123-4567
+VITE_ORGANIZATION_NAME=VIP Coordinator
diff --git a/frontend/index.html b/frontend/index.html
index 59ce549..ca11fd5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VIP Coordinator</title>
+    <!-- Prevent FOUC (Flash of Unstyled Content) for theme -->
+    <script>
+      (function() {
+        try {
+          var stored = localStorage.getItem('vip-theme');
+          var theme = stored ? JSON.parse(stored) : { mode: 'system', colorScheme: 'blue' };
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          var isDark = theme.mode === 'dark' || (theme.mode === 'system' && prefersDark);
+          if (isDark) document.documentElement.classList.add('dark');
+          if (theme.colorScheme) document.documentElement.dataset.theme = theme.colorScheme;
+        } catch (e) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d487eaf..833df42 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@casl/ability": "^6.8.0",
         "@casl/react": "^5.0.1",
         "@heroicons/react": "^2.2.0",
+        "@react-pdf/renderer": "^4.3.2",
         "@tanstack/react-query": "^5.17.19",
         "axios": "^1.6.5",
         "clsx": "^2.1.0",
@@ -19,7 +20,9 @@
         "lucide-react": "^0.309.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.71.1",
         "react-hot-toast": "^2.6.0",
+        "react-markdown": "^10.1.0",
         "react-router-dom": "^6.21.3",
         "tailwind-merge": "^2.2.0"
       },
@@ -346,6 +349,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1070,6 +1082,180 @@
         "node": ">=18"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.2.tgz",
+      "integrity": "sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.0.4.tgz",
+      "integrity": "sha512-8YtgGtL511txIEc9AjiilpZ7yjid8uCd8OGUl6jaL3LIHnrToUupSN4IzsMQpVTCMYiDLFnDNQzpZsOYtRS/Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/pdfkit": "^4.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.4.tgz",
+      "integrity": "sha512-z0ogVQE0bKqgXQ5smgzIU857rLV7bMgVdrYsu3UfXDDLSzI7QPvzf6MFTFllX6Dx2rcsF13E01dqKPtJEM799g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/png-js": "^3.0.0",
+        "jay-peg": "^1.1.1"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.4.2.tgz",
+      "integrity": "sha512-gNu2oh8MiGR+NJZYTJ4c4q0nWCESBI6rKFiodVhE7OeVAjtzZzd6l65wsN7HXdWJqOZD3ttD97iE+tf5SOd/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/image": "^3.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.2",
+        "@react-pdf/textkit": "^6.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/pdfkit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-4.1.0.tgz",
+      "integrity": "sha512-Wm/IOAv0h/U5Ra94c/PltFJGcpTUd/fwVMVeFD6X9tTTPCttIwg0teRG1Lqq617J8K4W7jpL/B0HTH0mjp3QpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/png-js": "^3.0.0",
+        "browserify-zlib": "^0.2.0",
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.2",
+        "jay-peg": "^1.1.1",
+        "linebreak": "^1.1.0",
+        "vite-compatible-readable-stream": "^3.6.1"
+      }
+    },
+    "node_modules/@react-pdf/png-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-3.0.0.tgz",
+      "integrity": "sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.1.1.tgz",
+      "integrity": "sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-2.0.0.tgz",
+      "integrity": "sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.3.2.tgz",
+      "integrity": "sha512-el5KYM1sH/PKcO4tRCIm8/AIEmhtraaONbwCrBhFdehoGv6JtgnXiMxHGAvZbI5kEg051GbyP+XIU6f6YbOu6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/textkit": "^6.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^1.9.1",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.3.2.tgz",
+      "integrity": "sha512-EhPkj35gO9rXIyyx29W3j3axemvVY5RigMmlK4/6Ku0pXB8z9PEE/sz4ZBOShu2uot6V4xiCR3aG+t9IjJJlBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/font": "^4.0.4",
+        "@react-pdf/layout": "^4.4.2",
+        "@react-pdf/pdfkit": "^4.1.0",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/reconciler": "^2.0.0",
+        "@react-pdf/render": "^4.3.2",
+        "@react-pdf/types": "^2.9.2",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.1.2.tgz",
+      "integrity": "sha512-E3ftGRYUQGKiN3JOgtGsLDo0hGekA6dmkmi/MYACytmPTKxQRBSO3126MebmCq+t1rgU9uRlREIEawJ+8nzSbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/types": "^2.9.2",
+        "color-string": "^1.9.1",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^1.0.3",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-6.1.0.tgz",
+      "integrity": "sha512-sFlzDC9CDFrJsnL3B/+NHrk9+Advqk7iJZIStiYQDdskbow8GF/AGYrpIk+vWSnh35YxaGbHkqXq53XOxnyrjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "bidi-js": "^1.0.2",
+        "hyphen": "^1.6.4",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.9.2.tgz",
+      "integrity": "sha512-dufvpKId9OajLLbgn9q7VLUmyo1Jf+iyGk2ZHmCL8nIDtL8N1Ejh9TH7+pXXrR0tdie1nmnEb5Bz9U7g4hI4/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.2"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
@@ -1436,6 +1622,15 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.90.20",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
@@ -1507,13 +1702,39 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1521,18 +1742,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1557,6 +1791,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -1795,7 +2035,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-react": {
@@ -1819,6 +2058,12 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1995,6 +2240,16 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2002,6 +2257,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.18",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.18.tgz",
@@ -2012,6 +2287,15 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2048,6 +2332,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/browser-tabs-lock": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.3.0.tgz",
@@ -2058,6 +2351,15 @@
         "lodash": ">=4.17.21"
       }
     },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -2147,6 +2449,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2164,6 +2476,46 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2202,6 +2554,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2228,9 +2589,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2243,6 +2613,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2282,6 +2662,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2316,7 +2702,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2330,6 +2715,19 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2346,6 +2744,34 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2416,6 +2842,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/es-cookie": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz",
@@ -2718,6 +3150,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2728,11 +3170,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -2874,6 +3330,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
@@ -3155,6 +3628,77 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hyphen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.14.1.tgz",
+      "integrity": "sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3208,9 +3752,44 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
       "license": "ISC"
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3240,6 +3819,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3263,6 +3852,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3283,6 +3882,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3290,6 +3907,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -3404,6 +4030,25 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -3440,6 +4085,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3480,6 +4135,165 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/media-engine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
+      "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3490,6 +4304,448 @@
         "node": ">= 8"
       }
     },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -3545,7 +4801,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -3603,11 +4858,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3683,6 +4946,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3696,6 +4965,37 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3992,7 +5292,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -4005,6 +5304,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4021,6 +5341,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4069,6 +5398,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.71.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.1.tgz",
+      "integrity": "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
@@ -4086,6 +5431,39 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4151,6 +5529,48 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -4182,6 +5602,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -4279,6 +5705,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -4324,6 +5770,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4344,6 +5799,39 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4370,6 +5858,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -4419,6 +5925,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -4497,6 +6009,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -4559,6 +6077,26 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -4579,6 +6117,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4620,6 +6164,119 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -4665,9 +6322,36 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -4729,6 +6413,20 @@
         }
       }
     },
+    "node_modules/vite-compatible-readable-stream": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
+      "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4781,6 +6479,22 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 5920d58..9574cd0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "@casl/ability": "^6.8.0",
     "@casl/react": "^5.0.1",
     "@heroicons/react": "^2.2.0",
+    "@react-pdf/renderer": "^4.3.2",
     "@tanstack/react-query": "^5.17.19",
     "axios": "^1.6.5",
     "clsx": "^2.1.0",
@@ -26,7 +27,9 @@
     "lucide-react": "^0.309.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.71.1",
     "react-hot-toast": "^2.6.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.21.3",
     "tailwind-merge": "^2.2.0"
   },
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 309aa90..77ae7fd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { Auth0Provider } from '@auth0/auth0-react';
 import { Toaster } from 'react-hot-toast';
 import { AuthProvider } from '@/contexts/AuthContext';
 import { AbilityProvider } from '@/contexts/AbilityContext';
+import { ThemeProvider } from '@/contexts/ThemeContext';
 import { ProtectedRoute } from '@/components/ProtectedRoute';
 import { Layout } from '@/components/Layout';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
@@ -20,6 +21,20 @@ import { EventList } from '@/pages/EventList';
 import { FlightList } from '@/pages/FlightList';
 import { UserList } from '@/pages/UserList';
 import { AdminTools } from '@/pages/AdminTools';
+import { DriverProfile } from '@/pages/DriverProfile';
+import { MySchedule } from '@/pages/MySchedule';
+import { useAuth } from '@/contexts/AuthContext';
+
+// Smart redirect based on user role
+function HomeRedirect() {
+  const { backendUser } = useAuth();
+
+  // Drivers go to their schedule, everyone else goes to dashboard
+  if (backendUser?.role === 'DRIVER') {
+    return <Navigate to="/my-schedule" replace />;
+  }
+  return <Navigate to="/dashboard" replace />;
+}
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -37,6 +52,7 @@ const audience = import.meta.env.VITE_AUTH0_AUDIENCE;
 function App() {
   return (
     <ErrorBoundary>
+      <ThemeProvider>
       <Auth0Provider
         domain={domain}
         clientId={clientId}
@@ -61,22 +77,24 @@ function App() {
               position="top-right"
               toastOptions={{
                 duration: 4000,
+                className: 'bg-card text-card-foreground border border-border shadow-elevated',
                 style: {
-                  background: '#333',
-                  color: '#fff',
+                  background: 'hsl(var(--card))',
+                  color: 'hsl(var(--card-foreground))',
+                  border: '1px solid hsl(var(--border))',
                 },
                 success: {
                   duration: 3000,
                   iconTheme: {
-                    primary: '#10b981',
-                    secondary: '#fff',
+                    primary: 'hsl(142, 76%, 36%)',
+                    secondary: 'hsl(0, 0%, 100%)',
                   },
                 },
                 error: {
                   duration: 5000,
                   iconTheme: {
-                    primary: '#ef4444',
-                    secondary: '#fff',
+                    primary: 'hsl(0, 84%, 60%)',
+                    secondary: 'hsl(0, 0%, 100%)',
                   },
                 },
               }}
@@ -102,8 +120,10 @@ function App() {
                         <Route path="/flights" element={<FlightList />} />
                         <Route path="/users" element={<UserList />} />
                         <Route path="/admin-tools" element={<AdminTools />} />
-                        <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+                        <Route path="/profile" element={<DriverProfile />} />
+                        <Route path="/my-schedule" element={<MySchedule />} />
+                        <Route path="/" element={<HomeRedirect />} />
+                        <Route path="*" element={<HomeRedirect />} />
                       </Routes>
                     </Layout>
                   </ProtectedRoute>
@@ -115,6 +135,7 @@ function App() {
           </AuthProvider>
         </QueryClientProvider>
       </Auth0Provider>
+      </ThemeProvider>
     </ErrorBoundary>
   );
 }
diff --git a/frontend/src/components/AICopilot.tsx b/frontend/src/components/AICopilot.tsx
new file mode 100644
index 0000000..1135a2d
--- /dev/null
+++ b/frontend/src/components/AICopilot.tsx
@@ -0,0 +1,375 @@
+import { useState, useRef, useEffect } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { copilotApi } from '@/lib/api';
+import {
+  X,
+  Send,
+  Bot,
+  User,
+  ImagePlus,
+  Loader2,
+  Sparkles,
+  Trash2,
+} from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+
+interface ContentBlock {
+  type: 'text' | 'image';
+  text?: string;
+  source?: {
+    type: 'base64';
+    media_type: string;
+    data: string;
+  };
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string | ContentBlock[];
+  timestamp: Date;
+  toolCalls?: any[];
+}
+
+export function AICopilot() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [pendingImage, setPendingImage] = useState<{ data: string; type: string } | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const chatMutation = useMutation({
+    mutationFn: async (chatMessages: { role: string; content: string | ContentBlock[] }[]) => {
+      const { data } = await copilotApi.post('/copilot/chat', { messages: chatMessages });
+      return data;
+    },
+    onSuccess: (data) => {
+      const assistantMessage: Message = {
+        id: Date.now().toString(),
+        role: 'assistant',
+        content: data.response,
+        timestamp: new Date(),
+        toolCalls: data.toolCalls,
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    },
+    onError: (error: any) => {
+      const errorMessage: Message = {
+        id: Date.now().toString(),
+        role: 'assistant',
+        content: `Sorry, I encountered an error: ${error.message || 'Unknown error'}. Please try again.`,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    },
+  });
+
+  const handleSend = () => {
+    if (!input.trim() && !pendingImage) return;
+
+    // Build content
+    let content: string | ContentBlock[];
+    if (pendingImage) {
+      content = [];
+      if (input.trim()) {
+        content.push({ type: 'text', text: input.trim() });
+      }
+      content.push({
+        type: 'image',
+        source: {
+          type: 'base64',
+          media_type: pendingImage.type,
+          data: pendingImage.data,
+        },
+      });
+    } else {
+      content = input.trim();
+    }
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+    };
+
+    const newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setInput('');
+    setPendingImage(null);
+
+    // Prepare messages for API
+    const apiMessages = newMessages.map((msg) => ({
+      role: msg.role,
+      content: msg.content,
+    }));
+
+    chatMutation.mutate(apiMessages);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = (reader.result as string).split(',')[1];
+      setPendingImage({
+        data: base64,
+        type: file.type,
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const clearChat = () => {
+    setMessages([]);
+    setPendingImage(null);
+  };
+
+  const renderContent = (content: string | ContentBlock[]) => {
+    if (typeof content === 'string') {
+      return (
+        <ReactMarkdown
+          components={{
+            p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
+            ul: ({ children }) => <ul className="list-disc list-inside mb-2">{children}</ul>,
+            ol: ({ children }) => <ol className="list-decimal list-inside mb-2">{children}</ol>,
+            li: ({ children }) => <li className="mb-1">{children}</li>,
+            strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+            code: ({ children }) => (
+              <code className="bg-muted px-1 py-0.5 rounded text-sm">{children}</code>
+            ),
+            pre: ({ children }) => (
+              <pre className="bg-muted p-2 rounded text-sm overflow-x-auto my-2">{children}</pre>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      );
+    }
+
+    return (
+      <div className="space-y-2">
+        {content.map((block, i) => {
+          if (block.type === 'text') {
+            return <p key={i}>{block.text}</p>;
+          }
+          if (block.type === 'image' && block.source) {
+            return (
+              <img
+                key={i}
+                src={`data:${block.source.media_type};base64,${block.source.data}`}
+                alt="Uploaded"
+                className="max-w-full max-h-48 rounded-lg"
+              />
+            );
+          }
+          return null;
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Floating button */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className={`fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-elevated hover:bg-primary/90 transition-all ${
+          isOpen ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+        }`}
+      >
+        <Sparkles className="h-5 w-5" />
+        <span className="font-medium">AI Assistant</span>
+      </button>
+
+      {/* Chat panel */}
+      <div
+        className={`fixed bottom-6 right-6 z-50 w-[400px] h-[600px] max-h-[80vh] bg-card border border-border rounded-2xl shadow-elevated flex flex-col overflow-hidden transition-all duration-300 ${
+          isOpen
+            ? 'scale-100 opacity-100'
+            : 'scale-95 opacity-0 pointer-events-none'
+        }`}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 bg-primary text-primary-foreground">
+          <div className="flex items-center gap-2">
+            <Bot className="h-5 w-5" />
+            <span className="font-semibold">VIP Coordinator AI</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={clearChat}
+              className="p-2 hover:bg-white/20 rounded-lg transition-colors"
+              title="Clear chat"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="p-2 hover:bg-white/20 rounded-lg transition-colors"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {messages.length === 0 && (
+            <div className="text-center text-muted-foreground py-8">
+              <Bot className="h-12 w-12 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="font-medium mb-2">Hi! I'm your AI assistant.</p>
+              <p className="text-sm">
+                I can help you with VIPs, drivers, events, and more.
+                <br />
+                You can also upload screenshots of emails!
+              </p>
+              <div className="mt-4 space-y-2 text-sm text-left max-w-xs mx-auto">
+                <p className="text-muted-foreground">Try asking:</p>
+                <button
+                  onClick={() => setInput("What's happening today?")}
+                  className="block w-full text-left px-3 py-2 bg-muted rounded-lg hover:bg-accent transition-colors"
+                >
+                  "What's happening today?"
+                </button>
+                <button
+                  onClick={() => setInput('Who are the VIPs arriving by flight?')}
+                  className="block w-full text-left px-3 py-2 bg-muted rounded-lg hover:bg-accent transition-colors"
+                >
+                  "Who are the VIPs arriving by flight?"
+                </button>
+                <button
+                  onClick={() => setInput('Which drivers are available?')}
+                  className="block w-full text-left px-3 py-2 bg-muted rounded-lg hover:bg-accent transition-colors"
+                >
+                  "Which drivers are available?"
+                </button>
+              </div>
+            </div>
+          )}
+
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex gap-3 ${
+                message.role === 'user' ? 'justify-end' : 'justify-start'
+              }`}
+            >
+              {message.role === 'assistant' && (
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                  <Bot className="h-4 w-4 text-primary-foreground" />
+                </div>
+              )}
+              <div
+                className={`max-w-[80%] rounded-2xl px-4 py-2 ${
+                  message.role === 'user'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted'
+                }`}
+              >
+                <div className="text-sm">{renderContent(message.content)}</div>
+                {message.toolCalls && message.toolCalls.length > 0 && (
+                  <div className="mt-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
+                    <span className="font-medium">Actions taken: </span>
+                    {message.toolCalls.map((tc) => tc.tool).join(', ')}
+                  </div>
+                )}
+              </div>
+              {message.role === 'user' && (
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted flex items-center justify-center">
+                  <User className="h-4 w-4 text-foreground" />
+                </div>
+              )}
+            </div>
+          ))}
+
+          {chatMutation.isPending && (
+            <div className="flex gap-3">
+              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                <Bot className="h-4 w-4 text-primary-foreground" />
+              </div>
+              <div className="bg-muted rounded-2xl px-4 py-3">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Pending image preview */}
+        {pendingImage && (
+          <div className="px-4 py-2 border-t border-border bg-muted/50">
+            <div className="relative inline-block">
+              <img
+                src={`data:${pendingImage.type};base64,${pendingImage.data}`}
+                alt="To upload"
+                className="h-16 rounded-lg"
+              />
+              <button
+                onClick={() => setPendingImage(null)}
+                className="absolute -top-2 -right-2 p-1 bg-destructive text-white rounded-full"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Input */}
+        <div className="p-4 border-t border-border">
+          <div className="flex items-end gap-2">
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+              accept="image/*"
+              className="hidden"
+            />
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
+              title="Upload image"
+            >
+              <ImagePlus className="h-5 w-5" />
+            </button>
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask about VIPs, drivers, events..."
+              className="flex-1 resize-none bg-muted border-0 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px] max-h-32"
+              rows={1}
+            />
+            <button
+              onClick={handleSend}
+              disabled={chatMutation.isPending || (!input.trim() && !pendingImage)}
+              className="p-3 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <Send className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/AppearanceMenu.tsx b/frontend/src/components/AppearanceMenu.tsx
new file mode 100644
index 0000000..686692e
--- /dev/null
+++ b/frontend/src/components/AppearanceMenu.tsx
@@ -0,0 +1,163 @@
+import { useState, useRef, useEffect } from 'react';
+import { Settings, Sun, Moon, Monitor, Check } from 'lucide-react';
+import { useTheme, ThemeMode, ColorScheme } from '@/hooks/useTheme';
+
+const modes: { value: ThemeMode; label: string; icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+];
+
+const colorSchemes: { value: ColorScheme; label: string; color: string }[] = [
+  { value: 'blue', label: 'Blue', color: 'bg-blue-500' },
+  { value: 'purple', label: 'Purple', color: 'bg-purple-500' },
+  { value: 'green', label: 'Green', color: 'bg-green-500' },
+  { value: 'orange', label: 'Orange', color: 'bg-orange-500' },
+];
+
+interface AppearanceMenuProps {
+  /** Compact mode for mobile - shows inline instead of dropdown */
+  compact?: boolean;
+}
+
+export function AppearanceMenu({ compact = false }: AppearanceMenuProps) {
+  const { mode, colorScheme, resolvedTheme, setMode, setColorScheme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const CurrentIcon = resolvedTheme === 'dark' ? Moon : Sun;
+
+  // Compact inline mode for mobile drawer
+  if (compact) {
+    return (
+      <div className="space-y-3">
+        {/* Theme Mode */}
+        <div>
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            Theme
+          </p>
+          <div className="flex gap-1">
+            {modes.map(({ value, label, icon: Icon }) => (
+              <button
+                key={value}
+                onClick={() => setMode(value)}
+                className={`flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm transition-colors ${
+                  mode === value
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted hover:bg-accent text-foreground'
+                }`}
+                title={label}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="sr-only sm:not-sr-only">{label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Color Scheme */}
+        <div>
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            Accent Color
+          </p>
+          <div className="flex gap-2">
+            {colorSchemes.map(({ value, label, color }) => (
+              <button
+                key={value}
+                onClick={() => setColorScheme(value)}
+                className={`relative w-8 h-8 rounded-full ${color} transition-transform hover:scale-110 ${
+                  colorScheme === value ? 'ring-2 ring-offset-2 ring-offset-card ring-foreground' : ''
+                }`}
+                title={label}
+                aria-label={`${label} color scheme`}
+              >
+                {colorScheme === value && (
+                  <Check className="absolute inset-0 m-auto h-4 w-4 text-white" />
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Standard dropdown mode for header
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-accent transition-colors"
+        aria-label="Appearance settings"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <CurrentIcon className="h-5 w-5 text-muted-foreground" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-52 rounded-xl bg-popover border border-border shadow-elevated z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
+          {/* Theme Mode Section */}
+          <div className="p-3 border-b border-border">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+              Theme
+            </p>
+            <div className="flex gap-1">
+              {modes.map(({ value, label, icon: Icon }) => (
+                <button
+                  key={value}
+                  onClick={() => setMode(value)}
+                  className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-colors ${
+                    mode === value
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted hover:bg-accent text-foreground'
+                  }`}
+                  title={label}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Color Scheme Section */}
+          <div className="p-3">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+              Accent Color
+            </p>
+            <div className="flex gap-2 justify-between">
+              {colorSchemes.map(({ value, label, color }) => (
+                <button
+                  key={value}
+                  onClick={() => setColorScheme(value)}
+                  className={`relative w-9 h-9 rounded-full ${color} transition-all hover:scale-110 ${
+                    colorScheme === value
+                      ? 'ring-2 ring-offset-2 ring-offset-popover ring-foreground scale-110'
+                      : ''
+                  }`}
+                  title={label}
+                  aria-label={`${label} color scheme`}
+                >
+                  {colorScheme === value && (
+                    <Check className="absolute inset-0 m-auto h-4 w-4 text-white drop-shadow-sm" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ColorSchemeSelector.tsx b/frontend/src/components/ColorSchemeSelector.tsx
new file mode 100644
index 0000000..3a546cc
--- /dev/null
+++ b/frontend/src/components/ColorSchemeSelector.tsx
@@ -0,0 +1,73 @@
+import { useState, useRef, useEffect } from 'react';
+import { Palette, Check } from 'lucide-react';
+import { useTheme, ColorScheme } from '@/hooks/useTheme';
+
+const colorSchemes: { value: ColorScheme; label: string; color: string; darkColor: string }[] = [
+  { value: 'blue', label: 'Blue', color: 'bg-blue-500', darkColor: 'bg-blue-400' },
+  { value: 'purple', label: 'Purple', color: 'bg-purple-500', darkColor: 'bg-purple-400' },
+  { value: 'green', label: 'Green', color: 'bg-green-500', darkColor: 'bg-green-400' },
+  { value: 'orange', label: 'Orange', color: 'bg-orange-500', darkColor: 'bg-orange-400' },
+];
+
+export function ColorSchemeSelector() {
+  const { colorScheme, setColorScheme, resolvedTheme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const currentScheme = colorSchemes.find((s) => s.value === colorScheme) || colorSchemes[0];
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-center w-9 h-9 rounded-lg bg-muted hover:bg-accent transition-colors focus-ring"
+        aria-label={`Current color scheme: ${currentScheme.label}. Click to change.`}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Palette className="h-5 w-5 text-foreground" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-40 rounded-lg bg-popover border border-border shadow-elevated z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
+          <div className="px-3 py-2 border-b border-border">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              Color Scheme
+            </p>
+          </div>
+          {colorSchemes.map(({ value, label, color, darkColor }) => (
+            <button
+              key={value}
+              onClick={() => {
+                setColorScheme(value);
+                setIsOpen(false);
+              }}
+              className={`flex items-center gap-3 w-full px-3 py-2.5 text-sm transition-colors ${
+                colorScheme === value
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-popover-foreground hover:bg-accent'
+              }`}
+            >
+              <span
+                className={`w-4 h-4 rounded-full ${resolvedTheme === 'dark' ? darkColor : color}`}
+              />
+              {label}
+              {colorScheme === value && <Check className="h-4 w-4 ml-auto" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/DriverChatBubble.tsx b/frontend/src/components/DriverChatBubble.tsx
new file mode 100644
index 0000000..8f2c5eb
--- /dev/null
+++ b/frontend/src/components/DriverChatBubble.tsx
@@ -0,0 +1,62 @@
+import { MessageCircle } from 'lucide-react';
+
+interface DriverChatBubbleProps {
+  unreadCount?: number;
+  awaitingResponse?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+
+export function DriverChatBubble({
+  unreadCount = 0,
+  awaitingResponse = false,
+  onClick,
+  className = ''
+}: DriverChatBubbleProps) {
+  const hasUnread = unreadCount > 0;
+
+  // Determine icon color based on state
+  const getIconColorClass = () => {
+    if (awaitingResponse && !hasUnread) return 'text-orange-500';
+    if (hasUnread) return 'text-primary';
+    return 'text-muted-foreground hover:text-primary';
+  };
+
+  const getTitle = () => {
+    if (awaitingResponse && !hasUnread) return 'Awaiting driver response - click to message';
+    if (hasUnread) return `${unreadCount} unread message${unreadCount > 1 ? 's' : ''}`;
+    return 'Send message';
+  };
+
+  // Subtle orange glow when awaiting response (no unread messages)
+  const glowStyle = awaitingResponse && !hasUnread
+    ? { boxShadow: '0 0 8px 2px rgba(249, 115, 22, 0.5)' }
+    : {};
+
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={`relative inline-flex items-center justify-center p-1.5 rounded-full
+        transition-all duration-200 hover:bg-primary/10
+        ${getIconColorClass()}
+        ${className}`}
+      style={glowStyle}
+      title={getTitle()}
+    >
+      <MessageCircle className="w-5 h-5" />
+
+      {/* Unread count badge */}
+      {hasUnread && (
+        <span className="absolute -top-1 -right-1 flex items-center justify-center">
+          <span className="absolute inline-flex h-4 w-4 rounded-full bg-primary/40 animate-ping" />
+          <span className="relative inline-flex items-center justify-center h-4 w-4 rounded-full bg-primary text-[10px] font-bold text-white">
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </span>
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/frontend/src/components/DriverChatModal.tsx b/frontend/src/components/DriverChatModal.tsx
new file mode 100644
index 0000000..9bc0e21
--- /dev/null
+++ b/frontend/src/components/DriverChatModal.tsx
@@ -0,0 +1,184 @@
+import { useState, useEffect, useRef } from 'react';
+import { X, Send, Loader2 } from 'lucide-react';
+import { useDriverMessages, useSendMessage, useMarkMessagesAsRead } from '../hooks/useSignalMessages';
+
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+}
+
+interface DriverChatModalProps {
+  driver: Driver | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function DriverChatModal({ driver, isOpen, onClose }: DriverChatModalProps) {
+  const [message, setMessage] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const { data: messages, isLoading } = useDriverMessages(driver?.id || null, isOpen);
+  const sendMessage = useSendMessage();
+  const markAsRead = useMarkMessagesAsRead();
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Focus input when modal opens
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  // Mark messages as read when opening chat
+  useEffect(() => {
+    if (isOpen && driver?.id) {
+      markAsRead.mutate(driver.id);
+    }
+  }, [isOpen, driver?.id]);
+
+  if (!isOpen || !driver) return null;
+
+  const handleSend = async () => {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage || sendMessage.isPending) return;
+
+    try {
+      await sendMessage.mutateAsync({
+        driverId: driver.id,
+        content: trimmedMessage,
+      });
+      setMessage('');
+    } catch (error) {
+      console.error('Failed to send message:', error);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+
+    if (isToday) {
+      return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+    }
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit'
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div
+        className="bg-card border border-border rounded-lg shadow-xl w-full max-w-md mx-4 flex flex-col"
+        style={{ height: 'min(600px, 80vh)' }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <div className="flex flex-col">
+            <h3 className="font-semibold text-card-foreground">{driver.name}</h3>
+            <span className="text-xs text-muted-foreground">{driver.phone}</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-muted transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : messages && messages.length > 0 ? (
+            <>
+              {messages.map((msg) => (
+                <div
+                  key={msg.id}
+                  className={`flex ${msg.direction === 'OUTBOUND' ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div
+                    className={`max-w-[80%] rounded-2xl px-4 py-2 ${
+                      msg.direction === 'OUTBOUND'
+                        ? 'bg-primary text-primary-foreground rounded-br-sm'
+                        : 'bg-muted text-muted-foreground rounded-bl-sm'
+                    }`}
+                  >
+                    <p className="text-sm whitespace-pre-wrap break-words">{msg.content}</p>
+                    <p className={`text-[10px] mt-1 ${
+                      msg.direction === 'OUTBOUND' ? 'text-primary-foreground/70' : 'text-muted-foreground/70'
+                    }`}>
+                      {formatTime(msg.timestamp)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+              <div ref={messagesEndRef} />
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              <p className="text-sm">No messages yet. Send a message to start the conversation.</p>
+            </div>
+          )}
+        </div>
+
+        {/* Input */}
+        <div className="p-4 border-t border-border">
+          <div className="flex items-end gap-2">
+            <textarea
+              ref={inputRef}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type a message..."
+              rows={1}
+              className="flex-1 resize-none bg-muted rounded-xl px-4 py-2.5 text-sm
+                focus:outline-none focus:ring-2 focus:ring-primary/50
+                max-h-32 min-h-[42px]"
+              style={{
+                height: 'auto',
+                overflowY: message.split('\n').length > 3 ? 'auto' : 'hidden',
+              }}
+            />
+            <button
+              onClick={handleSend}
+              disabled={!message.trim() || sendMessage.isPending}
+              className="p-2.5 rounded-full bg-primary text-primary-foreground
+                disabled:opacity-50 disabled:cursor-not-allowed
+                hover:bg-primary/90 transition-colors"
+            >
+              {sendMessage.isPending ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : (
+                <Send className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+          {sendMessage.isError && (
+            <p className="mt-2 text-xs text-destructive">
+              Failed to send message. Please try again.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/DriverForm.tsx b/frontend/src/components/DriverForm.tsx
index b2c53f2..1bca7c1 100644
--- a/frontend/src/components/DriverForm.tsx
+++ b/frontend/src/components/DriverForm.tsx
@@ -56,14 +56,14 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-2xl font-bold text-gray-900">
+      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h2 className="text-2xl font-bold text-foreground">
             {driver ? 'Edit Driver' : 'Add New Driver'}
           </h2>
           <button
             onClick={onCancel}
-            className="text-gray-400 hover:text-gray-600"
+            className="text-muted-foreground hover:text-foreground"
           >
             <X className="h-6 w-6" />
           </button>
@@ -72,7 +72,7 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
         <form onSubmit={handleSubmit} className="p-6 space-y-4">
           {/* Name */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               Full Name *
             </label>
             <input
@@ -81,13 +81,13 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
               required
               value={formData.name}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             />
           </div>
 
           {/* Phone */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               Phone Number *
             </label>
             <input
@@ -96,20 +96,20 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
               required
               value={formData.phone}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             />
           </div>
 
           {/* Department */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               Department
             </label>
             <select
               name="department"
               value={formData.department}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             >
               <option value="">Select Department</option>
               <option value="OFFICE_OF_DEVELOPMENT">Office of Development</option>
@@ -119,7 +119,7 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
 
           {/* User ID (optional, for linking driver to user account) */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               User Account ID (Optional)
             </label>
             <input
@@ -128,9 +128,9 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
               value={formData.userId}
               onChange={handleChange}
               placeholder="Leave blank for standalone driver"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             />
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               Link this driver to a user account for login access
             </p>
           </div>
@@ -147,7 +147,7 @@ export function DriverForm({ driver, onSubmit, onCancel, isSubmitting }: DriverF
             <button
               type="button"
               onClick={onCancel}
-              className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
+              className="flex-1 bg-muted text-foreground py-2 px-4 rounded-md hover:bg-muted/80"
             >
               Cancel
             </button>
diff --git a/frontend/src/components/DriverScheduleModal.tsx b/frontend/src/components/DriverScheduleModal.tsx
new file mode 100644
index 0000000..9a4fc9d
--- /dev/null
+++ b/frontend/src/components/DriverScheduleModal.tsx
@@ -0,0 +1,296 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { X, Calendar, Clock, MapPin, Car, User, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Driver } from '@/types';
+import { useState } from 'react';
+
+interface ScheduleEvent {
+  id: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  pickupLocation?: string;
+  dropoffLocation?: string;
+  location?: string;
+  status: string;
+  type: string;
+  vipIds: string[];
+  vehicle?: {
+    name: string;
+    licensePlate?: string;
+  };
+}
+
+interface DriverScheduleResponse {
+  id: string;
+  name: string;
+  phone: string;
+  events: ScheduleEvent[];
+}
+
+interface DriverScheduleModalProps {
+  driver: Driver | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function DriverScheduleModal({ driver, isOpen, onClose }: DriverScheduleModalProps) {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const dateString = selectedDate.toISOString().split('T')[0];
+
+  const { data: schedule, isLoading } = useQuery<DriverScheduleResponse>({
+    queryKey: ['driver-schedule', driver?.id, dateString],
+    queryFn: async () => {
+      const { data } = await api.get(`/drivers/${driver?.id}/schedule`, {
+        params: { date: dateString },
+      });
+      return data;
+    },
+    enabled: isOpen && !!driver?.id,
+  });
+
+  // Fetch VIP names for the events
+  const allVipIds = schedule?.events?.flatMap((e) => e.vipIds) || [];
+  const uniqueVipIds = [...new Set(allVipIds)];
+
+  const { data: vips } = useQuery({
+    queryKey: ['vips-for-schedule', uniqueVipIds.join(',')],
+    queryFn: async () => {
+      const { data } = await api.get('/vips');
+      return data;
+    },
+    enabled: uniqueVipIds.length > 0,
+  });
+
+  const vipMap = new Map(vips?.map((v: any) => [v.id, v.name]) || []);
+
+  if (!isOpen || !driver) return null;
+
+  const goToPreviousDay = () => {
+    const newDate = new Date(selectedDate);
+    newDate.setDate(newDate.getDate() - 1);
+    setSelectedDate(newDate);
+  };
+
+  const goToNextDay = () => {
+    const newDate = new Date(selectedDate);
+    newDate.setDate(newDate.getDate() + 1);
+    setSelectedDate(newDate);
+  };
+
+  const goToToday = () => {
+    setSelectedDate(new Date());
+  };
+
+  const isToday = selectedDate.toDateString() === new Date().toDateString();
+
+  const formatTime = (dateString: string) => {
+    return new Date(dateString).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+  };
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'COMPLETED':
+        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
+      case 'IN_PROGRESS':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
+      case 'CANCELLED':
+        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+    }
+  };
+
+  const getTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+      TRANSPORT: 'Transport',
+      MEETING: 'Meeting',
+      EVENT: 'Event',
+      MEAL: 'Meal',
+      ACCOMMODATION: 'Accommodation',
+    };
+    return labels[type] || type;
+  };
+
+  // Filter events for the selected date
+  const dayEvents = schedule?.events?.filter((event) => {
+    const eventDate = new Date(event.startTime).toDateString();
+    return eventDate === selectedDate.toDateString();
+  }) || [];
+
+  // Sort events by start time
+  const sortedEvents = [...dayEvents].sort(
+    (a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div className="bg-card border border-border rounded-lg shadow-elevated w-full max-w-2xl max-h-[90vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div>
+            <h2 className="text-xl font-semibold text-foreground flex items-center gap-2">
+              <Calendar className="h-5 w-5 text-primary" />
+              {driver.name}'s Schedule
+            </h2>
+            <p className="text-sm text-muted-foreground mt-1">{driver.phone}</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-accent rounded-lg transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Date Navigation */}
+        <div className="flex items-center justify-between px-6 py-3 border-b border-border bg-muted/30">
+          <button
+            onClick={goToPreviousDay}
+            className="p-2 hover:bg-accent rounded-lg transition-colors"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+          <div className="flex items-center gap-3">
+            <span className="font-medium text-foreground">{formatDate(selectedDate)}</span>
+            {!isToday && (
+              <button
+                onClick={goToToday}
+                className="px-3 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors"
+              >
+                Today
+              </button>
+            )}
+          </div>
+          <button
+            onClick={goToNextDay}
+            className="p-2 hover:bg-accent rounded-lg transition-colors"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+          ) : sortedEvents.length === 0 ? (
+            <div className="text-center py-12">
+              <Calendar className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+              <p className="text-muted-foreground">No events scheduled for this day</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {sortedEvents.map((event) => {
+                const vipNames = event.vipIds
+                  .map((id) => vipMap.get(id) || 'Unknown VIP')
+                  .join(', ');
+
+                return (
+                  <div
+                    key={event.id}
+                    className="relative pl-8 pb-4 border-l-2 border-border last:border-l-0"
+                  >
+                    {/* Timeline dot */}
+                    <div className="absolute left-[-9px] top-0 w-4 h-4 rounded-full bg-primary border-4 border-card" />
+
+                    <div className="bg-muted/30 border border-border rounded-lg p-4">
+                      {/* Time and Status */}
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-center gap-2 text-sm">
+                          <Clock className="h-4 w-4 text-muted-foreground" />
+                          <span className="font-medium text-foreground">
+                            {formatTime(event.startTime)} - {formatTime(event.endTime)}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-muted text-muted-foreground">
+                            {getTypeLabel(event.type)}
+                          </span>
+                          <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${getStatusColor(event.status)}`}>
+                            {event.status}
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Title */}
+                      <h3 className="font-semibold text-foreground mb-2">{event.title}</h3>
+
+                      {/* VIP */}
+                      {vipNames && (
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+                          <User className="h-4 w-4" />
+                          <span>{vipNames}</span>
+                        </div>
+                      )}
+
+                      {/* Location */}
+                      {(event.pickupLocation || event.dropoffLocation || event.location) && (
+                        <div className="flex items-start gap-2 text-sm text-muted-foreground mb-2">
+                          <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" />
+                          <div>
+                            {event.pickupLocation && event.dropoffLocation ? (
+                              <>
+                                <div>{event.pickupLocation}</div>
+                                <div className="text-xs text-muted-foreground/70">→</div>
+                                <div>{event.dropoffLocation}</div>
+                              </>
+                            ) : (
+                              <span>{event.location}</span>
+                            )}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Vehicle */}
+                      {event.vehicle && (
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <Car className="h-4 w-4" />
+                          <span>
+                            {event.vehicle.name}
+                            {event.vehicle.licensePlate && ` (${event.vehicle.licensePlate})`}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-border bg-muted/30">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">
+              {sortedEvents.length} event{sortedEvents.length !== 1 ? 's' : ''} scheduled
+            </span>
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index ff60bc4..583cabd 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -48,19 +48,19 @@ export class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-          <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+        <div className="min-h-screen bg-muted flex items-center justify-center p-4">
+          <div className="max-w-md w-full bg-card rounded-lg shadow-xl p-8">
             <div className="flex justify-center mb-6">
               <div className="rounded-full bg-red-100 p-4">
                 <AlertTriangle className="h-12 w-12 text-red-600" />
               </div>
             </div>
 
-            <h1 className="text-2xl font-bold text-gray-900 text-center mb-4">
+            <h1 className="text-2xl font-bold text-foreground text-center mb-4">
               Something went wrong
             </h1>
 
-            <p className="text-gray-600 text-center mb-6">
+            <p className="text-muted-foreground text-center mb-6">
               The application encountered an unexpected error. Please try refreshing the page or returning to the home page.
             </p>
 
@@ -87,7 +87,7 @@ export class ErrorBoundary extends Component<Props, State> {
               </button>
               <button
                 onClick={this.handleGoHome}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-foreground bg-card hover:bg-accent"
               >
                 <Home className="h-4 w-4 mr-2" />
                 Go Home
diff --git a/frontend/src/components/ErrorMessage.tsx b/frontend/src/components/ErrorMessage.tsx
index 5a6db45..a27164c 100644
--- a/frontend/src/components/ErrorMessage.tsx
+++ b/frontend/src/components/ErrorMessage.tsx
@@ -19,8 +19,8 @@ export function ErrorMessage({
             <AlertCircle className="h-8 w-8 text-red-600" />
           </div>
         </div>
-        <h3 className="text-lg font-medium text-gray-900 mb-2">{title}</h3>
-        <p className="text-gray-600 mb-4">{message}</p>
+        <h3 className="text-lg font-medium text-foreground mb-2">{title}</h3>
+        <p className="text-muted-foreground mb-4">{message}</p>
         {onRetry && (
           <button
             onClick={onRetry}
diff --git a/frontend/src/components/EventForm.tsx b/frontend/src/components/EventForm.tsx
index 4a07eb5..b9c96a7 100644
--- a/frontend/src/components/EventForm.tsx
+++ b/frontend/src/components/EventForm.tsx
@@ -11,6 +11,7 @@ interface EventFormProps {
   onSubmit: (data: EventFormData) => void;
   onCancel: () => void;
   isSubmitting: boolean;
+  extraActions?: React.ReactNode;
 }
 
 export interface EventFormData {
@@ -36,7 +37,7 @@ interface ScheduleConflict {
   endTime: string;
 }
 
-export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventFormProps) {
+export function EventForm({ event, onSubmit, onCancel, isSubmitting, extraActions }: EventFormProps) {
   // Helper to convert ISO datetime to datetime-local format
   const toDatetimeLocal = (isoString: string | null | undefined) => {
     if (!isoString) return '';
@@ -199,15 +200,15 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
 
   return (
     <>
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-        <div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
-          <div className="flex items-center justify-between p-6 border-b sticky top-0 bg-white z-10">
-            <h2 className="text-2xl font-bold text-gray-900">
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+        <div className="bg-card rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="flex items-center justify-between p-6 border-b border-border sticky top-0 bg-card z-10">
+            <h2 className="text-2xl font-bold text-foreground">
               {event ? 'Edit Event' : 'Add New Event'}
             </h2>
             <button
               onClick={onCancel}
-              className="text-gray-400 hover:text-gray-600"
+              className="text-muted-foreground hover:text-foreground"
               style={{ minWidth: '44px', minHeight: '44px' }}
             >
               <X className="h-6 w-6" />
@@ -217,42 +218,42 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
           <form onSubmit={handleSubmit} className="p-6 space-y-4">
             {/* VIP Multi-Select */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-foreground mb-2">
                 <Users className="inline h-4 w-4 mr-1" />
                 VIPs * (select one or more)
               </label>
 
-              <div className="border border-gray-300 rounded-md p-3 max-h-48 overflow-y-auto">
+              <div className="border border-input rounded-md p-3 max-h-48 overflow-y-auto bg-background">
                 {vips?.map((vip) => (
                   <label
                     key={vip.id}
-                    className="flex items-center py-2 px-3 hover:bg-gray-50 rounded cursor-pointer"
+                    className="flex items-center py-2 px-3 hover:bg-accent rounded cursor-pointer"
                     style={{ minHeight: '44px' }}
                   >
                     <input
                       type="checkbox"
                       checked={formData.vipIds.includes(vip.id)}
                       onChange={() => handleVipToggle(vip.id)}
-                      className="h-4 w-4 text-primary rounded border-gray-300 focus:ring-primary"
+                      className="h-4 w-4 text-primary rounded border-input focus:ring-primary"
                     />
-                    <span className="ml-3 text-base text-gray-700">
+                    <span className="ml-3 text-base text-foreground">
                       {vip.name}
                       {vip.organization && (
-                        <span className="text-sm text-gray-500 ml-2">({vip.organization})</span>
+                        <span className="text-sm text-muted-foreground ml-2">({vip.organization})</span>
                       )}
                     </span>
                   </label>
                 ))}
               </div>
 
-              <div className="mt-2 text-sm text-gray-600">
+              <div className="mt-2 text-sm text-muted-foreground">
                 <strong>Selected ({formData.vipIds.length}):</strong> {selectedVipNames}
               </div>
             </div>
 
             {/* Title */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Event Title *
               </label>
               <input
@@ -262,14 +263,14 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                 value={formData.title}
                 onChange={handleChange}
                 placeholder="e.g., Transport to Campfire Night"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
 
             {/* Pickup & Dropoff Locations */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Pickup Location
                 </label>
                 <input
@@ -278,11 +279,11 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   value={formData.pickupLocation}
                   onChange={handleChange}
                   placeholder="e.g., Grand Hotel Lobby"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Dropoff Location
                 </label>
                 <input
@@ -291,7 +292,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   value={formData.dropoffLocation}
                   onChange={handleChange}
                   placeholder="e.g., Camp Amphitheater"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
             </div>
@@ -299,7 +300,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
             {/* Start & End Time */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Start Time *
                 </label>
                 <input
@@ -308,11 +309,11 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   required
                   value={formData.startTime}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   End Time *
                 </label>
                 <input
@@ -321,14 +322,14 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   required
                   value={formData.endTime}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
             </div>
 
             {/* Vehicle Selection with Capacity */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 <Car className="inline h-4 w-4 mr-1" />
                 Assigned Vehicle
               </label>
@@ -336,7 +337,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                 name="vehicleId"
                 value={formData.vehicleId}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               >
                 <option value="">No vehicle assigned</option>
                 {vehicles?.map((vehicle) => (
@@ -346,7 +347,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                 ))}
               </select>
               {selectedVehicle && (
-                <div className={`mt-2 text-sm ${seatsUsed > seatsAvailable ? 'text-red-600 font-medium' : 'text-gray-600'}`}>
+                <div className={`mt-2 text-sm ${seatsUsed > seatsAvailable ? 'text-red-600 font-medium' : 'text-muted-foreground'}`}>
                   Capacity: {seatsUsed}/{seatsAvailable} seats used
                   {seatsUsed > seatsAvailable && ' ⚠️ OVER CAPACITY'}
                 </div>
@@ -355,14 +356,14 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
 
             {/* Driver Selection */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Assigned Driver
               </label>
               <select
                 name="driverId"
                 value={formData.driverId}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               >
                 <option value="">No driver assigned</option>
                 {drivers?.map((driver) => (
@@ -376,7 +377,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
             {/* Event Type & Status */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Event Type *
                 </label>
                 <select
@@ -384,7 +385,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   required
                   value={formData.type}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 >
                   <option value="TRANSPORT">Transport</option>
                   <option value="MEETING">Meeting</option>
@@ -394,7 +395,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Status *
                 </label>
                 <select
@@ -402,7 +403,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   required
                   value={formData.status}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                 >
                   <option value="SCHEDULED">Scheduled</option>
                   <option value="IN_PROGRESS">In Progress</option>
@@ -414,7 +415,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
 
             {/* Description */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Description
               </label>
               <textarea
@@ -423,7 +424,7 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                 onChange={handleChange}
                 rows={3}
                 placeholder="Additional notes or instructions"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
 
@@ -440,20 +441,23 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
               <button
                 type="button"
                 onClick={onCancel}
-                className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
+                className="flex-1 bg-muted text-foreground py-2 px-4 rounded-md hover:bg-muted/80"
                 style={{ minHeight: '44px' }}
               >
                 Cancel
               </button>
             </div>
+
+            {/* Extra Actions (e.g., Cancel Event, Delete Event) */}
+            {extraActions}
           </form>
         </div>
       </div>
 
       {/* Conflict Dialog */}
       {showConflictDialog && createPortal(
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-[60]">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[60]">
+          <div className="bg-card rounded-lg shadow-xl w-full max-w-2xl mx-4">
             <div className="p-6">
               <div className="flex items-start gap-4">
                 <div className="flex-shrink-0">
@@ -462,10 +466,10 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   </div>
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
                     Scheduling Conflict Detected
                   </h3>
-                  <p className="text-base text-gray-600 mb-4">
+                  <p className="text-base text-muted-foreground mb-4">
                     This driver already has {conflicts.length} conflicting event{conflicts.length > 1 ? 's' : ''} scheduled during this time:
                   </p>
 
@@ -483,14 +487,14 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                     ))}
                   </div>
 
-                  <p className="text-base text-gray-700 font-medium mb-6">
+                  <p className="text-base text-foreground font-medium mb-6">
                     Do you want to proceed with this assignment anyway?
                   </p>
 
                   <div className="flex gap-3">
                     <button
                       onClick={handleCancelConflict}
-                      className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
+                      className="flex-1 px-4 py-3 border border-input rounded-md text-base font-medium text-foreground hover:bg-accent"
                       style={{ minHeight: '44px' }}
                     >
                       Cancel
@@ -514,8 +518,8 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
 
       {/* Capacity Warning Dialog */}
       {showCapacityWarning && capacityExceeded && createPortal(
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-[60]">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[60]">
+          <div className="bg-card rounded-lg shadow-xl w-full max-w-md mx-4">
             <div className="p-6">
               <div className="flex items-start gap-4">
                 <div className="flex-shrink-0">
@@ -524,21 +528,21 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
                   </div>
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
                     Vehicle Capacity Exceeded
                   </h3>
-                  <p className="text-base text-gray-600 mb-4">
+                  <p className="text-base text-muted-foreground mb-4">
                     You've assigned {capacityExceeded.requested} VIP{capacityExceeded.requested > 1 ? 's' : ''} to a vehicle with only {capacityExceeded.capacity} seat{capacityExceeded.capacity > 1 ? 's' : ''}.
                   </p>
 
-                  <p className="text-base text-gray-700 font-medium mb-6">
+                  <p className="text-base text-foreground font-medium mb-6">
                     Do you want to proceed anyway?
                   </p>
 
                   <div className="flex gap-3">
                     <button
                       onClick={handleCancelConflict}
-                      className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
+                      className="flex-1 px-4 py-3 border border-input rounded-md text-base font-medium text-foreground hover:bg-accent"
                       style={{ minHeight: '44px' }}
                     >
                       Cancel
diff --git a/frontend/src/components/FilterModal.tsx b/frontend/src/components/FilterModal.tsx
index 6cc5bdd..3ec1d5f 100644
--- a/frontend/src/components/FilterModal.tsx
+++ b/frontend/src/components/FilterModal.tsx
@@ -35,12 +35,12 @@ export function FilterModal({ isOpen, onClose, filterGroups, onClear, onApply }:
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-4 border-b sticky top-0 bg-white">
-          <h2 className="text-lg font-semibold text-gray-900">Filters</h2>
+      <div className="bg-card rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card">
+          <h2 className="text-lg font-semibold text-foreground">Filters</h2>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
+            className="text-muted-foreground hover:text-foreground p-2 rounded-md hover:bg-accent"
             style={{ minWidth: '44px', minHeight: '44px' }}
             aria-label="Close"
           >
@@ -51,21 +51,21 @@ export function FilterModal({ isOpen, onClose, filterGroups, onClear, onApply }:
         <div className="p-4 space-y-6">
           {filterGroups.map((group, index) => (
             <div key={index}>
-              <h3 className="text-sm font-medium text-gray-700 mb-3">{group.label}</h3>
+              <h3 className="text-sm font-medium text-foreground mb-3">{group.label}</h3>
               <div className="space-y-2">
                 {group.options.map((option) => (
                   <label
                     key={option.value}
-                    className="flex items-center cursor-pointer py-2 px-3 rounded-md hover:bg-gray-50"
+                    className="flex items-center cursor-pointer py-2 px-3 rounded-md hover:bg-muted"
                     style={{ minHeight: '44px' }}
                   >
                     <input
                       type="checkbox"
                       checked={group.selectedValues.includes(option.value)}
                       onChange={() => group.onToggle(option.value)}
-                      className="rounded border-gray-300 text-primary focus:ring-primary h-5 w-5"
+                      className="rounded border-input text-primary focus:ring-primary h-5 w-5"
                     />
-                    <span className="ml-3 text-base text-gray-700">{option.label}</span>
+                    <span className="ml-3 text-base text-foreground">{option.label}</span>
                   </label>
                 ))}
               </div>
@@ -73,10 +73,10 @@ export function FilterModal({ isOpen, onClose, filterGroups, onClear, onApply }:
           ))}
         </div>
 
-        <div className="flex gap-3 p-4 border-t bg-gray-50 sticky bottom-0">
+        <div className="flex gap-3 p-4 border-t border-border bg-muted sticky bottom-0">
           <button
             onClick={handleClear}
-            className="flex-1 bg-white text-gray-700 py-3 px-4 rounded-md hover:bg-gray-100 font-medium border border-gray-300"
+            className="flex-1 bg-card text-foreground py-3 px-4 rounded-md hover:bg-accent font-medium border border-input"
             style={{ minHeight: '44px' }}
           >
             Clear All
diff --git a/frontend/src/components/FlightForm.tsx b/frontend/src/components/FlightForm.tsx
index 9924170..df3255f 100644
--- a/frontend/src/components/FlightForm.tsx
+++ b/frontend/src/components/FlightForm.tsx
@@ -131,14 +131,14 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-2xl font-bold text-gray-900">
+      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h2 className="text-2xl font-bold text-foreground">
             {flight ? 'Edit Flight' : 'Add New Flight'}
           </h2>
           <button
             onClick={onCancel}
-            className="text-gray-400 hover:text-gray-600"
+            className="text-muted-foreground hover:text-foreground"
           >
             <X className="h-6 w-6" />
           </button>
@@ -147,7 +147,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
         <form onSubmit={handleSubmit} className="p-6 space-y-4">
           {/* VIP Selection */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               VIP *
             </label>
             <select
@@ -155,7 +155,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
               required
               value={formData.vipId}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             >
               <option value="">Select VIP</option>
               {vips?.map((vip) => (
@@ -169,7 +169,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
           {/* Flight Number & Date */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Flight Number *
               </label>
               <input
@@ -179,11 +179,11 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 value={formData.flightNumber}
                 onChange={handleChange}
                 placeholder="e.g., AA123"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Flight Date *
               </label>
               <input
@@ -192,7 +192,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 required
                 value={formData.flightDate}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
           </div>
@@ -200,7 +200,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
           {/* Airports & Segment */}
           <div className="grid grid-cols-3 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 From (IATA) *
               </label>
               <input
@@ -211,11 +211,11 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 onChange={handleChange}
                 placeholder="JFK"
                 maxLength={3}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary uppercase"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary uppercase"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 To (IATA) *
               </label>
               <input
@@ -226,11 +226,11 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 onChange={handleChange}
                 placeholder="LAX"
                 maxLength={3}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary uppercase"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary uppercase"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Segment
               </label>
               <input
@@ -239,7 +239,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 min="1"
                 value={formData.segment}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
           </div>
@@ -247,7 +247,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
           {/* Scheduled Times */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Scheduled Departure
               </label>
               <input
@@ -255,11 +255,11 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 name="scheduledDeparture"
                 value={formData.scheduledDeparture}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Scheduled Arrival
               </label>
               <input
@@ -267,7 +267,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 name="scheduledArrival"
                 value={formData.scheduledArrival}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
           </div>
@@ -275,7 +275,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
           {/* Actual Times */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Actual Departure
               </label>
               <input
@@ -283,11 +283,11 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 name="actualDeparture"
                 value={formData.actualDeparture}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
                 Actual Arrival
               </label>
               <input
@@ -295,21 +295,21 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
                 name="actualArrival"
                 value={formData.actualArrival}
                 onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
           </div>
 
           {/* Status */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               Status
             </label>
             <select
               name="status"
               value={formData.status}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
             >
               <option value="scheduled">Scheduled</option>
               <option value="boarding">Boarding</option>
@@ -333,7 +333,7 @@ export function FlightForm({ flight, onSubmit, onCancel, isSubmitting }: FlightF
             <button
               type="button"
               onClick={onCancel}
-              className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
+              className="flex-1 bg-muted text-foreground py-2 px-4 rounded-md hover:bg-muted/80"
             >
               Cancel
             </button>
diff --git a/frontend/src/components/InlineDriverSelector.tsx b/frontend/src/components/InlineDriverSelector.tsx
index f99f140..fe5d19d 100644
--- a/frontend/src/components/InlineDriverSelector.tsx
+++ b/frontend/src/components/InlineDriverSelector.tsx
@@ -111,8 +111,8 @@ export function InlineDriverSelector({
         onClick={() => setIsOpen(true)}
         className={`inline-flex items-center gap-1 px-2 py-1 text-sm rounded transition-colors ${
           currentDriverId
-            ? 'text-gray-700 hover:bg-gray-100'
-            : 'text-gray-400 hover:bg-gray-50'
+            ? 'text-foreground hover:bg-accent'
+            : 'text-muted-foreground hover:bg-muted'
         }`}
         disabled={updateDriverMutation.isPending}
       >
@@ -123,12 +123,12 @@ export function InlineDriverSelector({
       {/* Driver Selection Modal */}
       {isOpen && createPortal(
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden">
-            <div className="flex items-center justify-between p-4 border-b sticky top-0 bg-white">
-              <h2 className="text-lg font-semibold text-gray-900">Assign Driver</h2>
+          <div className="bg-card rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden">
+            <div className="flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card">
+              <h2 className="text-lg font-semibold text-foreground">Assign Driver</h2>
               <button
                 onClick={() => setIsOpen(false)}
-                className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
+                className="text-muted-foreground hover:text-foreground p-2 rounded-md hover:bg-accent"
                 style={{ minWidth: '44px', minHeight: '44px' }}
                 aria-label="Close"
               >
@@ -138,12 +138,12 @@ export function InlineDriverSelector({
 
             <div className="overflow-y-auto max-h-[calc(80vh-8rem)]">
               {driversLoading ? (
-                <div className="p-8 text-center text-gray-500">Loading drivers...</div>
+                <div className="p-8 text-center text-muted-foreground">Loading drivers...</div>
               ) : (
                 <div className="p-2">
                   <button
                     onClick={() => handleSelectDriver(null)}
-                    className="w-full text-left px-4 py-3 text-base text-gray-400 hover:bg-gray-50 transition-colors rounded-md"
+                    className="w-full text-left px-4 py-3 text-base text-muted-foreground hover:bg-muted transition-colors rounded-md"
                     style={{ minHeight: '44px' }}
                   >
                     Unassigned
@@ -155,13 +155,13 @@ export function InlineDriverSelector({
                       className={`w-full text-left px-4 py-3 text-base transition-colors rounded-md ${
                         driver.id === currentDriverId
                           ? 'bg-blue-50 text-blue-700 font-medium'
-                          : 'text-gray-700 hover:bg-gray-50'
+                          : 'text-foreground hover:bg-muted'
                       }`}
                       style={{ minHeight: '44px' }}
                     >
                       <div>{driver.name}</div>
                       {driver.phone && (
-                        <div className="text-sm text-gray-500">{driver.phone}</div>
+                        <div className="text-sm text-muted-foreground">{driver.phone}</div>
                       )}
                     </button>
                   ))}
@@ -176,7 +176,7 @@ export function InlineDriverSelector({
       {/* Conflict Dialog */}
       {showConflictDialog && createPortal(
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
+          <div className="bg-card rounded-lg shadow-xl w-full max-w-2xl mx-4">
             <div className="p-6">
               <div className="flex items-start gap-4">
                 <div className="flex-shrink-0">
@@ -185,10 +185,10 @@ export function InlineDriverSelector({
                   </div>
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
                     Scheduling Conflict Detected
                   </h3>
-                  <p className="text-base text-gray-600 mb-4">
+                  <p className="text-base text-muted-foreground mb-4">
                     This driver already has {conflicts.length} conflicting event{conflicts.length > 1 ? 's' : ''} scheduled during this time:
                   </p>
 
@@ -198,22 +198,22 @@ export function InlineDriverSelector({
                         key={conflict.id}
                         className="bg-yellow-50 border border-yellow-200 rounded-md p-4"
                       >
-                        <div className="font-medium text-gray-900">{conflict.title}</div>
-                        <div className="text-sm text-gray-600 mt-1">
+                        <div className="font-medium text-foreground">{conflict.title}</div>
+                        <div className="text-sm text-muted-foreground mt-1">
                           {formatDateTime(conflict.startTime)} - {formatDateTime(conflict.endTime)}
                         </div>
                       </div>
                     ))}
                   </div>
 
-                  <p className="text-base text-gray-700 font-medium mb-6">
+                  <p className="text-base text-foreground font-medium mb-6">
                     Do you want to proceed with this assignment anyway?
                   </p>
 
                   <div className="flex gap-3">
                     <button
                       onClick={handleCancelConflict}
-                      className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
+                      className="flex-1 px-4 py-3 border border-input rounded-md text-base font-medium text-foreground hover:bg-accent"
                       style={{ minHeight: '44px' }}
                     >
                       Cancel
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 1bba356..f41db78 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState, useRef, useEffect } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { useAuth } from '@/contexts/AuthContext';
 import { useAbility } from '@/contexts/AbilityContext';
@@ -12,7 +12,6 @@ import {
   Truck,
   Calendar,
   UserCog,
-  LogOut,
   LayoutDashboard,
   Settings,
   Radio,
@@ -20,9 +19,13 @@ import {
   X,
   ChevronDown,
   Shield,
-  CalendarDays,
-  Presentation,
+  LogOut,
+  Phone,
+  AlertCircle,
 } from 'lucide-react';
+import { UserMenu } from '@/components/UserMenu';
+import { AppearanceMenu } from '@/components/AppearanceMenu';
+import { AICopilot } from '@/components/AICopilot';
 
 interface User {
   id: string;
@@ -39,7 +42,6 @@ interface LayoutProps {
 export function Layout({ children }: LayoutProps) {
   const { user, backendUser, logout } = useAuth();
   const location = useLocation();
-  const navigate = useNavigate();
   const ability = useAbility();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [adminDropdownOpen, setAdminDropdownOpen] = useState(false);
@@ -58,15 +60,21 @@ export function Layout({ children }: LayoutProps) {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  // Check if user is a driver (limited access)
+  const isDriverRole = backendUser?.role === 'DRIVER';
+
   // Define main navigation items (reorganized by workflow priority)
+  // coordinatorOnly items are hidden from drivers
   const allNavigation = [
-    { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, alwaysShow: true },
-    { name: 'War Room', href: '/command-center', icon: Radio, requireRead: 'ScheduleEvent' as const },
-    { name: 'VIPs', href: '/vips', icon: Users, requireRead: 'VIP' as const },
-    { name: 'Drivers', href: '/drivers', icon: Car, requireRead: 'Driver' as const },
-    { name: 'Vehicles', href: '/vehicles', icon: Truck, requireRead: 'Vehicle' as const },
-    { name: 'Activities', href: '/events', icon: Calendar, requireRead: 'ScheduleEvent' as const },
-    { name: 'Flights', href: '/flights', icon: Plane, requireRead: 'Flight' as const },
+    { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, coordinatorOnly: true },
+    { name: 'My Schedule', href: '/my-schedule', icon: Calendar, driverOnly: true },
+    { name: 'My Profile', href: '/profile', icon: UserCog, driverOnly: true },
+    { name: 'War Room', href: '/command-center', icon: Radio, requireRead: 'ScheduleEvent' as const, coordinatorOnly: true },
+    { name: 'VIPs', href: '/vips', icon: Users, requireRead: 'VIP' as const, coordinatorOnly: true },
+    { name: 'Drivers', href: '/drivers', icon: Car, requireRead: 'Driver' as const, coordinatorOnly: true },
+    { name: 'Vehicles', href: '/vehicles', icon: Truck, requireRead: 'Vehicle' as const, coordinatorOnly: true },
+    { name: 'Activities', href: '/events', icon: Calendar, requireRead: 'ScheduleEvent' as const, coordinatorOnly: true },
+    { name: 'Flights', href: '/flights', icon: Plane, requireRead: 'Flight' as const, coordinatorOnly: true },
   ];
 
   // Admin dropdown items (nested under Admin)
@@ -75,9 +83,15 @@ export function Layout({ children }: LayoutProps) {
     { name: 'Admin Tools', href: '/admin-tools', icon: Settings },
   ];
 
-  // Filter navigation based on CASL permissions
+  // Filter navigation based on role and CASL permissions
   const navigation = allNavigation.filter((item) => {
+    // Driver-only items
+    if (item.driverOnly) return isDriverRole;
+    // Coordinator-only items hidden from drivers
+    if (item.coordinatorOnly && isDriverRole) return false;
+    // Always show items
     if (item.alwaysShow) return true;
+    // Permission-based items
     if (item.requireRead) {
       return ability.can(Action.Read, item.requireRead);
     }
@@ -99,20 +113,33 @@ export function Layout({ children }: LayoutProps) {
 
   const pendingApprovalsCount = users?.filter((u) => !u.isApproved).length || 0;
 
+  // Fetch driver's own profile if they are a driver
+  const isDriver = backendUser?.role === 'DRIVER';
+  const { data: myDriverProfile } = useQuery<{ id: string; phone: string | null }>({
+    queryKey: ['my-driver-profile'],
+    queryFn: async () => {
+      const { data } = await api.get('/drivers/me');
+      return data;
+    },
+    enabled: isDriver,
+  });
+
+  const driverNeedsPhone = isDriver && myDriverProfile && !myDriverProfile.phone;
+
   const isActive = (path: string) => location.pathname === path;
   const isAdminActive = adminItems.some(item => isActive(item.href));
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted/30">
       {/* Top Navigation */}
-      <nav className="bg-white shadow-sm border-b">
+      <nav className="bg-card shadow-soft border-b border-border sticky top-0 z-40 backdrop-blur-sm bg-card/95">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
-            <div className="flex items-center">
+            <div className="flex items-center flex-1 min-w-0">
               {/* Mobile menu button - shows on portrait iPad and smaller */}
               <button
                 type="button"
-                className="lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary mr-2"
+                className="lg:hidden inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary mr-2"
                 style={{ minWidth: '44px', minHeight: '44px' }}
                 onClick={() => setMobileMenuOpen(true)}
                 aria-label="Open menu"
@@ -122,26 +149,26 @@ export function Layout({ children }: LayoutProps) {
 
               <div className="flex-shrink-0 flex items-center">
                 <Plane className="h-8 w-8 text-primary" />
-                <span className="ml-2 text-xl font-bold text-gray-900">
+                <span className="ml-2 text-xl font-bold text-foreground">
                   VIP Coordinator
                 </span>
               </div>
 
               {/* Desktop navigation - shows on landscape iPad and larger */}
-              <div className="hidden lg:ml-6 lg:flex lg:space-x-8 lg:items-center">
+              <div className="hidden lg:ml-6 lg:flex lg:space-x-4 xl:space-x-6 lg:items-center">
                 {navigation.map((item) => {
                   const Icon = item.icon;
                   return (
                     <Link
                       key={item.name}
                       to={item.href}
-                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors whitespace-nowrap ${
                         isActive(item.href)
-                          ? 'border-primary text-gray-900'
-                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                          ? 'border-primary text-foreground'
+                          : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground'
                       }`}
                     >
-                      <Icon className="h-4 w-4 mr-2" />
+                      <Icon className="h-4 w-4 mr-1.5" />
                       {item.name}
                     </Link>
                   );
@@ -149,19 +176,19 @@ export function Layout({ children }: LayoutProps) {
 
                 {/* Admin Dropdown */}
                 {canAccessAdmin && (
-                  <div className="relative" ref={dropdownRef}>
+                  <div className="relative flex-shrink-0" ref={dropdownRef}>
                     <button
                       onClick={() => setAdminDropdownOpen(!adminDropdownOpen)}
-                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors whitespace-nowrap ${
                         isAdminActive
-                          ? 'border-primary text-gray-900'
-                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                          ? 'border-primary text-foreground'
+                          : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground'
                       }`}
                     >
-                      <Shield className="h-4 w-4 mr-2" />
+                      <Shield className="h-4 w-4 mr-1.5" />
                       Admin
                       {pendingApprovalsCount > 0 && (
-                        <span className="ml-1.5 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full">
+                        <span className="ml-1.5 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-destructive rounded-full">
                           {pendingApprovalsCount}
                         </span>
                       )}
@@ -170,7 +197,7 @@ export function Layout({ children }: LayoutProps) {
 
                     {/* Dropdown menu */}
                     {adminDropdownOpen && (
-                      <div className="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-50">
+                      <div className="absolute left-0 mt-2 w-48 bg-popover rounded-lg shadow-elevated border border-border z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
                         <div className="py-1">
                           {adminItems.map((item) => {
                             const Icon = item.icon;
@@ -179,10 +206,10 @@ export function Layout({ children }: LayoutProps) {
                                 key={item.name}
                                 to={item.href}
                                 onClick={() => setAdminDropdownOpen(false)}
-                                className={`flex items-center px-4 py-2 text-sm ${
+                                className={`flex items-center px-4 py-2 text-sm transition-colors ${
                                   isActive(item.href)
                                     ? 'bg-primary/10 text-primary'
-                                    : 'text-gray-700 hover:bg-gray-100'
+                                    : 'text-popover-foreground hover:bg-accent'
                                 }`}
                               >
                                 <Icon className="h-4 w-4 mr-3" />
@@ -198,26 +225,9 @@ export function Layout({ children }: LayoutProps) {
               </div>
             </div>
 
-            {/* User info and logout */}
-            <div className="flex items-center gap-2 sm:gap-4">
-              <div className="hidden sm:block text-right">
-                <div className="text-sm font-medium text-gray-900">
-                  {backendUser?.name || user?.name || user?.email}
-                </div>
-                {backendUser?.role && (
-                  <div className="text-xs text-gray-500">
-                    {backendUser.role}
-                  </div>
-                )}
-              </div>
-              <button
-                onClick={logout}
-                className="inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
-                style={{ minHeight: '44px' }}
-              >
-                <LogOut className="h-5 w-5 sm:h-4 sm:w-4 sm:mr-2" />
-                <span className="hidden sm:inline">Sign Out</span>
-              </button>
+            {/* User section - modern dropdown */}
+            <div className="flex items-center flex-shrink-0 ml-4">
+              <UserMenu />
             </div>
           </div>
         </div>
@@ -228,25 +238,25 @@ export function Layout({ children }: LayoutProps) {
         <div className="fixed inset-0 z-50 lg:hidden">
           {/* Backdrop */}
           <div
-            className="fixed inset-0 bg-black/50"
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
             onClick={() => setMobileMenuOpen(false)}
             aria-hidden="true"
           />
 
           {/* Drawer panel */}
-          <div className="fixed inset-y-0 left-0 w-full max-w-sm bg-white shadow-xl">
+          <div className="fixed inset-y-0 left-0 w-full max-w-sm bg-card shadow-elevated animate-in slide-in-from-left duration-300">
             <div className="flex flex-col h-full">
               {/* Drawer header */}
-              <div className="flex items-center justify-between px-4 h-16 border-b">
+              <div className="flex items-center justify-between px-4 h-16 border-b border-border">
                 <div className="flex items-center">
                   <Plane className="h-8 w-8 text-primary" />
-                  <span className="ml-2 text-xl font-bold text-gray-900">
+                  <span className="ml-2 text-xl font-bold text-foreground">
                     VIP Coordinator
                   </span>
                 </div>
                 <button
                   type="button"
-                  className="rounded-md p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                  className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                   style={{ minWidth: '44px', minHeight: '44px' }}
                   onClick={() => setMobileMenuOpen(false)}
                   aria-label="Close menu"
@@ -256,19 +266,24 @@ export function Layout({ children }: LayoutProps) {
               </div>
 
               {/* User info in drawer */}
-              <div className="px-4 py-4 border-b bg-gray-50">
-                <div className="text-sm font-medium text-gray-900">
+              <div className="px-4 py-4 border-b border-border bg-muted/50">
+                <div className="text-sm font-medium text-foreground">
                   {backendUser?.name || user?.name || user?.email}
                 </div>
                 {backendUser?.role && (
-                  <div className="text-xs text-gray-500 mt-1">
+                  <div className="text-xs text-muted-foreground mt-1">
                     {backendUser.role}
                   </div>
                 )}
               </div>
 
+              {/* Appearance settings in drawer */}
+              <div className="px-4 py-4 border-b border-border">
+                <AppearanceMenu compact />
+              </div>
+
               {/* Navigation links */}
-              <nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
+              <nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto scrollbar-thin">
                 {navigation.map((item) => {
                   const Icon = item.icon;
                   return (
@@ -276,10 +291,10 @@ export function Layout({ children }: LayoutProps) {
                       key={item.name}
                       to={item.href}
                       onClick={() => setMobileMenuOpen(false)}
-                      className={`flex items-center px-4 py-3 text-base font-medium rounded-md ${
+                      className={`flex items-center px-4 py-3 text-base font-medium rounded-lg transition-colors ${
                         isActive(item.href)
                           ? 'bg-primary/10 text-primary'
-                          : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
+                          : 'text-foreground hover:bg-accent'
                       }`}
                       style={{ minHeight: '44px' }}
                     >
@@ -294,10 +309,10 @@ export function Layout({ children }: LayoutProps) {
                   <div className="space-y-1">
                     <button
                       onClick={() => setMobileAdminExpanded(!mobileAdminExpanded)}
-                      className={`w-full flex items-center justify-between px-4 py-3 text-base font-medium rounded-md ${
+                      className={`w-full flex items-center justify-between px-4 py-3 text-base font-medium rounded-lg transition-colors ${
                         isAdminActive
                           ? 'bg-primary/10 text-primary'
-                          : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
+                          : 'text-foreground hover:bg-accent'
                       }`}
                       style={{ minHeight: '44px' }}
                     >
@@ -305,7 +320,7 @@ export function Layout({ children }: LayoutProps) {
                         <Shield className="h-5 w-5 mr-3 flex-shrink-0" />
                         Admin
                         {pendingApprovalsCount > 0 && (
-                          <span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full">
+                          <span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-destructive rounded-full">
                             {pendingApprovalsCount}
                           </span>
                         )}
@@ -326,10 +341,10 @@ export function Layout({ children }: LayoutProps) {
                                 setMobileMenuOpen(false);
                                 setMobileAdminExpanded(false);
                               }}
-                              className={`flex items-center px-4 py-3 text-base rounded-md ${
+                              className={`flex items-center px-4 py-3 text-base rounded-lg transition-colors ${
                                 isActive(item.href)
                                   ? 'bg-primary/10 text-primary font-medium'
-                                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                               }`}
                               style={{ minHeight: '44px' }}
                             >
@@ -345,13 +360,13 @@ export function Layout({ children }: LayoutProps) {
               </nav>
 
               {/* Logout button at bottom of drawer */}
-              <div className="border-t px-4 py-4">
+              <div className="border-t border-border px-4 py-4">
                 <button
                   onClick={() => {
                     setMobileMenuOpen(false);
                     logout();
                   }}
-                  className="w-full flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+                  className="w-full flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-lg text-primary-foreground bg-primary hover:bg-primary/90 transition-colors shadow-soft"
                   style={{ minHeight: '44px' }}
                 >
                   <LogOut className="h-5 w-5 mr-2" />
@@ -363,10 +378,40 @@ export function Layout({ children }: LayoutProps) {
         </div>
       )}
 
+      {/* Driver Phone Number Reminder Banner */}
+      {driverNeedsPhone && (
+        <div className="bg-amber-50 dark:bg-amber-950/30 border-b border-amber-200 dark:border-amber-800">
+          <div className="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex items-center gap-3">
+                <div className="flex-shrink-0">
+                  <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+                </div>
+                <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                  <Phone className="h-4 w-4 inline mr-1" />
+                  Please add your phone number to receive trip notifications via Signal.
+                </p>
+              </div>
+              <Link
+                to="/profile"
+                className="flex-shrink-0 text-sm font-medium text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 underline"
+              >
+                Update Profile →
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Main Content */}
       <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
         {children}
       </main>
+
+      {/* AI Copilot - floating chat (only for Admins and Coordinators) */}
+      {backendUser && (backendUser.role === 'ADMINISTRATOR' || backendUser.role === 'COORDINATOR') && (
+        <AICopilot />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
index 92ff50a..61c0a9a 100644
--- a/frontend/src/components/Loading.tsx
+++ b/frontend/src/components/Loading.tsx
@@ -8,10 +8,10 @@ interface LoadingProps {
 export function Loading({ message = 'Loading...', fullPage = false }: LoadingProps) {
   if (fullPage) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="min-h-screen flex items-center justify-center bg-muted">
         <div className="text-center">
           <Loader2 className="h-12 w-12 text-primary animate-spin mx-auto mb-4" />
-          <p className="text-gray-600 text-lg">{message}</p>
+          <p className="text-muted-foreground text-lg">{message}</p>
         </div>
       </div>
     );
@@ -21,7 +21,7 @@ export function Loading({ message = 'Loading...', fullPage = false }: LoadingPro
     <div className="flex items-center justify-center py-12">
       <div className="text-center">
         <Loader2 className="h-8 w-8 text-primary animate-spin mx-auto mb-3" />
-        <p className="text-gray-600">{message}</p>
+        <p className="text-muted-foreground">{message}</p>
       </div>
     </div>
   );
diff --git a/frontend/src/components/PdfSettingsSection.tsx b/frontend/src/components/PdfSettingsSection.tsx
new file mode 100644
index 0000000..499a5fb
--- /dev/null
+++ b/frontend/src/components/PdfSettingsSection.tsx
@@ -0,0 +1,727 @@
+import { useState, useRef, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { pdf } from '@react-pdf/renderer';
+import { VIPSchedulePDF } from '@/components/VIPSchedulePDF';
+import {
+  Settings,
+  FileText,
+  Upload,
+  Palette,
+  X,
+  Loader2,
+  Eye,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import {
+  usePdfSettings,
+  useUpdatePdfSettings,
+  useUploadLogo,
+  useDeleteLogo,
+} from '@/hooks/useSettings';
+import { UpdatePdfSettingsDto, PageSize } from '@/types/settings';
+
+export function PdfSettingsSection() {
+  const { data: settings, isLoading: loadingSettings } = usePdfSettings();
+  const updateSettings = useUpdatePdfSettings();
+  const uploadLogo = useUploadLogo();
+  const deleteLogo = useDeleteLogo();
+
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [expandedSections, setExpandedSections] = useState({
+    branding: true,
+    contact: false,
+    document: false,
+    content: false,
+    custom: false,
+  });
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { register, handleSubmit, watch, reset } = useForm<UpdatePdfSettingsDto>();
+
+  const accentColor = watch('accentColor');
+
+  // Update form when settings load
+  useEffect(() => {
+    if (settings) {
+      // Map PdfSettings to UpdatePdfSettingsDto (exclude id, createdAt, updatedAt, logoUrl)
+      const formData: UpdatePdfSettingsDto = {
+        organizationName: settings.organizationName,
+        accentColor: settings.accentColor,
+        tagline: settings.tagline || undefined,
+        contactEmail: settings.contactEmail,
+        contactPhone: settings.contactPhone,
+        secondaryContactName: settings.secondaryContactName || undefined,
+        secondaryContactPhone: settings.secondaryContactPhone || undefined,
+        contactLabel: settings.contactLabel,
+        showDraftWatermark: settings.showDraftWatermark,
+        showConfidentialWatermark: settings.showConfidentialWatermark,
+        showTimestamp: settings.showTimestamp,
+        showAppUrl: settings.showAppUrl,
+        pageSize: settings.pageSize,
+        showFlightInfo: settings.showFlightInfo,
+        showDriverNames: settings.showDriverNames,
+        showVehicleNames: settings.showVehicleNames,
+        showVipNotes: settings.showVipNotes,
+        showEventDescriptions: settings.showEventDescriptions,
+        headerMessage: settings.headerMessage || undefined,
+        footerMessage: settings.footerMessage || undefined,
+      };
+      reset(formData);
+    }
+  }, [settings, reset]);
+
+  const toggleSection = (section: keyof typeof expandedSections) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  const onSubmit = async (data: UpdatePdfSettingsDto) => {
+    try {
+      await updateSettings.mutateAsync(data);
+      toast.success('PDF settings saved successfully');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to save settings');
+    }
+  };
+
+  const handleLogoUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file size (2MB)
+    if (file.size > 2 * 1024 * 1024) {
+      toast.error('Logo file must be less than 2MB');
+      return;
+    }
+
+    // Validate file type
+    if (!['image/png', 'image/jpeg', 'image/svg+xml'].includes(file.type)) {
+      toast.error('Logo must be PNG, JPG, or SVG');
+      return;
+    }
+
+    // Show preview
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setLogoPreview(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+
+    // Upload
+    try {
+      await uploadLogo.mutateAsync(file);
+      toast.success('Logo uploaded successfully');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to upload logo');
+      setLogoPreview(null);
+    }
+  };
+
+  const handleDeleteLogo = async () => {
+    if (!confirm('Remove logo from PDF templates?')) return;
+
+    try {
+      await deleteLogo.mutateAsync();
+      setLogoPreview(null);
+      toast.success('Logo removed');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to remove logo');
+    }
+  };
+
+  const handlePreview = async () => {
+    if (!settings) {
+      toast.error('Settings not loaded yet');
+      return;
+    }
+
+    try {
+      toast.loading('Generating preview PDF...', { id: 'pdf-preview' });
+
+      // Mock VIP data
+      const mockVIP = {
+        id: 'sample-id',
+        name: 'John Sample',
+        organization: 'Sample Corporation',
+        department: 'OFFICE_OF_DEVELOPMENT',
+        arrivalMode: 'FLIGHT',
+        expectedArrival: null,
+        airportPickup: true,
+        venueTransport: true,
+        notes: 'This is a sample itinerary to preview your PDF customization settings.',
+        flights: [
+          {
+            id: 'flight-1',
+            flightNumber: 'AA1234',
+            departureAirport: 'JFK',
+            arrivalAirport: 'LAX',
+            scheduledDeparture: new Date(Date.now() + 86400000).toISOString(), // Tomorrow
+            scheduledArrival: new Date(Date.now() + 86400000 + 21600000).toISOString(), // Tomorrow + 6 hours
+            status: 'scheduled',
+          },
+        ],
+      };
+
+      // Mock events
+      const tomorrow = new Date(Date.now() + 86400000);
+      const mockEvents = [
+        {
+          id: 'event-1',
+          title: 'Airport Pickup',
+          pickupLocation: 'LAX Terminal 4',
+          dropoffLocation: 'Grand Hotel',
+          location: null,
+          startTime: new Date(tomorrow.getTime() + 25200000).toISOString(), // 10 AM
+          endTime: new Date(tomorrow.getTime() + 28800000).toISOString(), // 11 AM
+          type: 'TRANSPORT',
+          status: 'SCHEDULED',
+          description: 'Transportation from airport to hotel',
+          driver: { id: 'driver-1', name: 'Michael Driver' },
+          vehicle: { id: 'vehicle-1', name: 'Blue Van', type: 'VAN', seatCapacity: 12 },
+        },
+        {
+          id: 'event-2',
+          title: 'Welcome Lunch',
+          pickupLocation: null,
+          dropoffLocation: null,
+          location: 'Grand Ballroom',
+          startTime: new Date(tomorrow.getTime() + 43200000).toISOString(), // 12 PM
+          endTime: new Date(tomorrow.getTime() + 48600000).toISOString(), // 1:30 PM
+          type: 'MEAL',
+          status: 'SCHEDULED',
+          description: 'Networking lunch with other VIP guests and leadership',
+          driver: null,
+          vehicle: null,
+        },
+        {
+          id: 'event-3',
+          title: 'Opening Ceremony',
+          pickupLocation: null,
+          dropoffLocation: null,
+          location: 'Main Arena',
+          startTime: new Date(tomorrow.getTime() + 54000000).toISOString(), // 3 PM
+          endTime: new Date(tomorrow.getTime() + 61200000).toISOString(), // 5 PM
+          type: 'EVENT',
+          status: 'SCHEDULED',
+          description: 'Official opening ceremony with keynote speakers',
+          driver: null,
+          vehicle: null,
+        },
+      ];
+
+      // Generate PDF with current settings
+      const blob = await pdf(
+        <VIPSchedulePDF vip={mockVIP} events={mockEvents} settings={settings} />
+      ).toBlob();
+
+      // Open in new tab
+      const url = URL.createObjectURL(blob);
+      window.open(url, '_blank');
+      URL.revokeObjectURL(url);
+
+      toast.success('Preview generated!', { id: 'pdf-preview' });
+    } catch (error: any) {
+      console.error('Failed to generate preview:', error);
+      toast.error('Failed to generate preview', { id: 'pdf-preview' });
+    }
+  };
+
+  if (loadingSettings) {
+    return (
+      <div className="bg-card border border-border shadow-soft rounded-lg p-6 mb-8 transition-colors">
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  const currentLogo = logoPreview || settings?.logoUrl;
+
+  return (
+    <div className="bg-card border border-border shadow-soft rounded-lg p-6 mb-8 transition-colors">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center">
+          <FileText className="h-5 w-5 text-purple-600 mr-2" />
+          <h2 className="text-lg font-medium text-foreground">PDF Customization</h2>
+        </div>
+        <button
+          onClick={handlePreview}
+          className="inline-flex items-center px-3 py-2 text-sm border border-input text-foreground rounded-md hover:bg-accent transition-colors"
+        >
+          <Eye className="h-4 w-4 mr-1" />
+          Preview Sample PDF
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        {/* Branding Section */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            type="button"
+            onClick={() => toggleSection('branding')}
+            className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-center">
+              <Palette className="h-4 w-4 mr-2 text-muted-foreground" />
+              <span className="font-medium text-foreground">Branding</span>
+            </div>
+            {expandedSections.branding ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+
+          {expandedSections.branding && (
+            <div className="p-4 space-y-4">
+              {/* Organization Name */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Organization Name
+                </label>
+                <input
+                  type="text"
+                  {...register('organizationName')}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="VIP Coordinator"
+                />
+              </div>
+
+              {/* Logo Upload */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Organization Logo
+                </label>
+                <div className="flex items-start gap-4">
+                  {currentLogo && (
+                    <div className="relative w-32 h-32 border border-border rounded-lg overflow-hidden bg-white p-2">
+                      <img
+                        src={currentLogo}
+                        alt="Logo"
+                        className="w-full h-full object-contain"
+                      />
+                      <button
+                        type="button"
+                        onClick={handleDeleteLogo}
+                        className="absolute top-1 right-1 p-1 bg-red-600 text-white rounded-full hover:bg-red-700 transition-colors"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  )}
+                  <div className="flex-1">
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/png,image/jpeg,image/svg+xml"
+                      onChange={handleLogoUpload}
+                      className="hidden"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => fileInputRef.current?.click()}
+                      disabled={uploadLogo.isPending}
+                      className="inline-flex items-center px-4 py-2 border border-input text-foreground rounded-md hover:bg-accent disabled:opacity-50 transition-colors"
+                    >
+                      {uploadLogo.isPending ? (
+                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      ) : (
+                        <Upload className="h-4 w-4 mr-2" />
+                      )}
+                      {currentLogo ? 'Change Logo' : 'Upload Logo'}
+                    </button>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      PNG, JPG, or SVG. Max 2MB.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Accent Color */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Accent Color
+                </label>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="color"
+                    {...register('accentColor')}
+                    className="h-10 w-20 border border-input rounded cursor-pointer"
+                  />
+                  <input
+                    type="text"
+                    {...register('accentColor')}
+                    className="flex-1 px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm"
+                    placeholder="#2c3e50"
+                  />
+                  <div
+                    className="h-10 w-10 rounded border border-input"
+                    style={{ backgroundColor: accentColor || '#2c3e50' }}
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Used for headers, section titles, and flight card borders
+                </p>
+              </div>
+
+              {/* Tagline */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Tagline (Optional)
+                </label>
+                <input
+                  type="text"
+                  {...register('tagline')}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Excellence in VIP Transportation"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Contact Information Section */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            type="button"
+            onClick={() => toggleSection('contact')}
+            className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-center">
+              <Settings className="h-4 w-4 mr-2 text-muted-foreground" />
+              <span className="font-medium text-foreground">Contact Information</span>
+            </div>
+            {expandedSections.contact ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+
+          {expandedSections.contact && (
+            <div className="p-4 space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">
+                    Contact Email
+                  </label>
+                  <input
+                    type="email"
+                    {...register('contactEmail')}
+                    className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">
+                    Contact Phone
+                  </label>
+                  <input
+                    type="tel"
+                    {...register('contactPhone')}
+                    className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">
+                    Secondary Contact Name (Optional)
+                  </label>
+                  <input
+                    type="text"
+                    {...register('secondaryContactName')}
+                    className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">
+                    Secondary Contact Phone (Optional)
+                  </label>
+                  <input
+                    type="tel"
+                    {...register('secondaryContactPhone')}
+                    className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Contact Section Label
+                </label>
+                <input
+                  type="text"
+                  {...register('contactLabel')}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Questions or Changes?"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Document Options Section */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            type="button"
+            onClick={() => toggleSection('document')}
+            className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-center">
+              <FileText className="h-4 w-4 mr-2 text-muted-foreground" />
+              <span className="font-medium text-foreground">Document Options</span>
+            </div>
+            {expandedSections.document ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+
+          {expandedSections.document && (
+            <div className="p-4 space-y-3">
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showDraftWatermark')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Draft Watermark</div>
+                  <div className="text-sm text-muted-foreground">
+                    Show diagonal "DRAFT" watermark on all pages
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showConfidentialWatermark')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Confidential Watermark</div>
+                  <div className="text-sm text-muted-foreground">
+                    Show diagonal "CONFIDENTIAL" watermark on all pages
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showTimestamp')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show Timestamp</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display "Generated on [date]" in footer
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showAppUrl')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show App URL</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display system URL in footer (not recommended for VIPs)
+                  </div>
+                </div>
+              </label>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Page Size
+                </label>
+                <select
+                  {...register('pageSize')}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <option value={PageSize.LETTER}>Letter (8.5" x 11")</option>
+                  <option value={PageSize.A4}>A4 (210mm x 297mm)</option>
+                </select>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Content Toggles Section */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            type="button"
+            onClick={() => toggleSection('content')}
+            className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-center">
+              <Settings className="h-4 w-4 mr-2 text-muted-foreground" />
+              <span className="font-medium text-foreground">Content Display</span>
+            </div>
+            {expandedSections.content ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+
+          {expandedSections.content && (
+            <div className="p-4 space-y-3">
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showFlightInfo')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show Flight Information</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display flight numbers, times, and airports
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showDriverNames')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show Driver Names</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display assigned driver names in schedule
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showVehicleNames')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show Vehicle Names</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display assigned vehicle names in schedule
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showVipNotes')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show VIP Notes</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display notes and special requirements
+                  </div>
+                </div>
+              </label>
+
+              <label className="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('showEventDescriptions')}
+                  className="h-4 w-4 text-primary border-input rounded focus:ring-2 focus:ring-primary"
+                />
+                <div>
+                  <div className="font-medium text-foreground">Show Event Descriptions</div>
+                  <div className="text-sm text-muted-foreground">
+                    Display detailed descriptions for events
+                  </div>
+                </div>
+              </label>
+            </div>
+          )}
+        </div>
+
+        {/* Custom Text Section */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            type="button"
+            onClick={() => toggleSection('custom')}
+            className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-center">
+              <FileText className="h-4 w-4 mr-2 text-muted-foreground" />
+              <span className="font-medium text-foreground">Custom Messages</span>
+            </div>
+            {expandedSections.custom ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+
+          {expandedSections.custom && (
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Header Message (Optional)
+                </label>
+                <textarea
+                  {...register('headerMessage')}
+                  rows={2}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Welcome to the 2026 Jamboree!"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Displayed at the top of the PDF (max 500 characters)
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Footer Message (Optional)
+                </label>
+                <textarea
+                  {...register('footerMessage')}
+                  rows={2}
+                  className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Thank you for being our guest"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Displayed at the bottom of the PDF (max 500 characters)
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Save Button */}
+        <div className="flex justify-end pt-4">
+          <button
+            type="submit"
+            disabled={updateSettings.isPending}
+            className="inline-flex items-center px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors font-medium"
+          >
+            {updateSettings.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              'Save PDF Settings'
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index 7628c3d..424e498 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -4,23 +4,23 @@
 
 export function TableSkeleton({ rows = 5 }: { rows?: number }) {
   return (
-    <div className="bg-white shadow rounded-lg overflow-hidden">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
+    <div className="bg-card shadow rounded-lg overflow-hidden">
+      <table className="min-w-full divide-y divide-border">
+        <thead className="bg-muted">
           <tr>
             {[1, 2, 3, 4, 5].map((col) => (
               <th key={col} className="px-6 py-3">
-                <div className="h-4 bg-gray-200 rounded animate-pulse" />
+                <div className="h-4 bg-muted rounded animate-pulse" />
               </th>
             ))}
           </tr>
         </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
+        <tbody className="bg-card divide-y divide-border">
           {Array.from({ length: rows }).map((_, rowIndex) => (
             <tr key={rowIndex}>
               {[1, 2, 3, 4, 5].map((col) => (
                 <td key={col} className="px-6 py-4">
-                  <div className="h-4 bg-gray-200 rounded animate-pulse" style={{ width: `${60 + Math.random() * 40}%` }} />
+                  <div className="h-4 bg-muted rounded animate-pulse" style={{ width: `${60 + Math.random() * 40}%` }} />
                 </td>
               ))}
             </tr>
@@ -35,24 +35,24 @@ export function CardSkeleton({ cards = 3 }: { cards?: number }) {
   return (
     <div className="space-y-4">
       {Array.from({ length: cards }).map((_, index) => (
-        <div key={index} className="bg-white shadow rounded-lg p-4 animate-pulse">
+        <div key={index} className="bg-card shadow rounded-lg p-4 animate-pulse">
           <div className="mb-3">
-            <div className="h-6 bg-gray-200 rounded w-1/2 mb-2" />
-            <div className="h-4 bg-gray-200 rounded w-1/3" />
+            <div className="h-6 bg-muted rounded w-1/2 mb-2" />
+            <div className="h-4 bg-muted rounded w-1/3" />
           </div>
           <div className="grid grid-cols-2 gap-3 mb-4">
             <div>
-              <div className="h-3 bg-gray-200 rounded w-20 mb-1" />
-              <div className="h-4 bg-gray-200 rounded w-24" />
+              <div className="h-3 bg-muted rounded w-20 mb-1" />
+              <div className="h-4 bg-muted rounded w-24" />
             </div>
             <div>
-              <div className="h-3 bg-gray-200 rounded w-20 mb-1" />
-              <div className="h-4 bg-gray-200 rounded w-16" />
+              <div className="h-3 bg-muted rounded w-20 mb-1" />
+              <div className="h-4 bg-muted rounded w-16" />
             </div>
           </div>
-          <div className="flex gap-2 pt-3 border-t border-gray-200">
-            <div className="flex-1 h-11 bg-gray-200 rounded" />
-            <div className="flex-1 h-11 bg-gray-200 rounded" />
+          <div className="flex gap-2 pt-3 border-t border-border">
+            <div className="flex-1 h-11 bg-muted rounded" />
+            <div className="flex-1 h-11 bg-muted rounded" />
           </div>
         </div>
       ))}
@@ -64,30 +64,30 @@ export function VIPCardSkeleton({ cards = 6 }: { cards?: number }) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {Array.from({ length: cards }).map((_, index) => (
-        <div key={index} className="bg-white rounded-lg shadow p-6 animate-pulse">
+        <div key={index} className="bg-card rounded-lg shadow p-6 animate-pulse">
           <div className="flex items-start justify-between mb-4">
             <div className="flex-1">
-              <div className="h-6 bg-gray-200 rounded w-3/4 mb-2" />
-              <div className="h-4 bg-gray-200 rounded w-1/2" />
+              <div className="h-6 bg-muted rounded w-3/4 mb-2" />
+              <div className="h-4 bg-muted rounded w-1/2" />
             </div>
           </div>
           <div className="space-y-3">
             <div className="flex items-center">
-              <div className="h-4 w-4 bg-gray-200 rounded mr-2" />
-              <div className="h-4 bg-gray-200 rounded w-32" />
+              <div className="h-4 w-4 bg-muted rounded mr-2" />
+              <div className="h-4 bg-muted rounded w-32" />
             </div>
             <div className="flex items-center">
-              <div className="h-4 w-4 bg-gray-200 rounded mr-2" />
-              <div className="h-4 bg-gray-200 rounded w-24" />
+              <div className="h-4 w-4 bg-muted rounded mr-2" />
+              <div className="h-4 bg-muted rounded w-24" />
             </div>
             <div className="flex items-center">
-              <div className="h-4 w-4 bg-gray-200 rounded mr-2" />
-              <div className="h-4 bg-gray-200 rounded w-40" />
+              <div className="h-4 w-4 bg-muted rounded mr-2" />
+              <div className="h-4 bg-muted rounded w-40" />
             </div>
           </div>
-          <div className="mt-4 pt-4 border-t flex gap-2">
-            <div className="flex-1 h-9 bg-gray-200 rounded" />
-            <div className="flex-1 h-9 bg-gray-200 rounded" />
+          <div className="mt-4 pt-4 border-t border-border flex gap-2">
+            <div className="flex-1 h-9 bg-muted rounded" />
+            <div className="flex-1 h-9 bg-muted rounded" />
           </div>
         </div>
       ))}
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..231e616
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -0,0 +1,65 @@
+import { useState, useRef, useEffect } from 'react';
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useTheme, ThemeMode } from '@/hooks/useTheme';
+
+const modes: { value: ThemeMode; label: string; icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+];
+
+export function ThemeToggle() {
+  const { mode, resolvedTheme, setMode } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Get current icon based on resolved theme
+  const CurrentIcon = resolvedTheme === 'dark' ? Moon : Sun;
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-center w-9 h-9 rounded-lg bg-muted hover:bg-accent transition-colors focus-ring"
+        aria-label={`Current theme: ${mode}. Click to change.`}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <CurrentIcon className="h-5 w-5 text-foreground" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-36 rounded-lg bg-popover border border-border shadow-elevated z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
+          {modes.map(({ value, label, icon: Icon }) => (
+            <button
+              key={value}
+              onClick={() => {
+                setMode(value);
+                setIsOpen(false);
+              }}
+              className={`flex items-center gap-3 w-full px-3 py-2.5 text-sm transition-colors ${
+                mode === value
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-popover-foreground hover:bg-accent'
+              }`}
+            >
+              <Icon className="h-4 w-4" />
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/UserMenu.tsx b/frontend/src/components/UserMenu.tsx
new file mode 100644
index 0000000..491e629
--- /dev/null
+++ b/frontend/src/components/UserMenu.tsx
@@ -0,0 +1,198 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown, LogOut, Sun, Moon, Monitor, Check } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';
+import { useTheme, ThemeMode, ColorScheme } from '@/hooks/useTheme';
+
+const modes: { value: ThemeMode; label: string; icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+];
+
+const colorSchemes: { value: ColorScheme; label: string; color: string }[] = [
+  { value: 'blue', label: 'Blue', color: 'bg-blue-500' },
+  { value: 'purple', label: 'Purple', color: 'bg-purple-500' },
+  { value: 'green', label: 'Green', color: 'bg-green-500' },
+  { value: 'orange', label: 'Orange', color: 'bg-orange-500' },
+];
+
+export function UserMenu() {
+  const { user, backendUser, logout } = useAuth();
+  const { mode, colorScheme, setMode, setColorScheme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Get user display info
+  const displayName = backendUser?.name || user?.name || user?.email || 'User';
+  const displayEmail = backendUser?.email || user?.email || '';
+  const displayRole = backendUser?.role || '';
+
+  // Generate initials for avatar
+  const getInitials = (name: string) => {
+    if (!name) return 'U';
+    const parts = name.split(' ');
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return name.substring(0, 2).toUpperCase();
+  };
+
+  const initials = getInitials(displayName);
+
+  // Get role badge color
+  const getRoleBadgeColor = (role: string) => {
+    switch (role.toUpperCase()) {
+      case 'ADMINISTRATOR':
+        return 'bg-red-500/10 text-red-600 dark:text-red-400';
+      case 'COORDINATOR':
+        return 'bg-blue-500/10 text-blue-600 dark:text-blue-400';
+      case 'DRIVER':
+        return 'bg-green-500/10 text-green-600 dark:text-green-400';
+      default:
+        return 'bg-muted text-muted-foreground';
+    }
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* User menu trigger button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-accent transition-colors"
+        style={{ minHeight: '44px' }}
+        aria-label="User menu"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        {/* Avatar with initials */}
+        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground font-semibold text-sm">
+          {initials}
+        </div>
+
+        {/* Name (hidden on mobile) */}
+        <span className="hidden md:block text-sm font-medium text-foreground max-w-[120px] truncate">
+          {displayName}
+        </span>
+
+        {/* Chevron icon */}
+        <ChevronDown
+          className={`h-4 w-4 text-muted-foreground transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-[280px] rounded-lg bg-popover border border-border shadow-elevated z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
+          {/* User info section */}
+          <div className="px-4 py-3 border-b border-border">
+            <div className="flex items-start gap-3">
+              {/* Avatar */}
+              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground font-semibold">
+                {initials}
+              </div>
+
+              {/* User details */}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground truncate">
+                  {displayName}
+                </p>
+                <p className="text-xs text-muted-foreground truncate mt-0.5">
+                  {displayEmail}
+                </p>
+                {displayRole && (
+                  <span
+                    className={`inline-block mt-1.5 px-2 py-0.5 text-xs font-medium rounded ${getRoleBadgeColor(
+                      displayRole
+                    )}`}
+                  >
+                    {displayRole}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Appearance section */}
+          <div className="px-4 py-3 border-b border-border">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+              Appearance
+            </p>
+
+            {/* Theme mode */}
+            <div className="mb-3">
+              <p className="text-xs text-muted-foreground mb-1.5">Theme</p>
+              <div className="flex gap-1">
+                {modes.map(({ value, label, icon: Icon }) => (
+                  <button
+                    key={value}
+                    onClick={() => setMode(value)}
+                    className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${
+                      mode === value
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted hover:bg-accent text-foreground'
+                    }`}
+                    title={label}
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Color scheme */}
+            <div>
+              <p className="text-xs text-muted-foreground mb-1.5">Color</p>
+              <div className="flex gap-2">
+                {colorSchemes.map(({ value, label, color }) => (
+                  <button
+                    key={value}
+                    onClick={() => setColorScheme(value)}
+                    className={`relative w-8 h-8 rounded-full ${color} transition-all hover:scale-110 ${
+                      colorScheme === value
+                        ? 'ring-2 ring-offset-2 ring-offset-popover ring-foreground scale-110'
+                        : ''
+                    }`}
+                    title={label}
+                    aria-label={`${label} color scheme`}
+                  >
+                    {colorScheme === value && (
+                      <Check className="absolute inset-0 m-auto h-3.5 w-3.5 text-white drop-shadow-sm" />
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Sign out section */}
+          <div className="p-2">
+            <button
+              onClick={() => {
+                setIsOpen(false);
+                logout();
+              }}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
+            >
+              <LogOut className="h-4 w-4" />
+              Sign Out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/VIPSchedulePDF.README.md b/frontend/src/components/VIPSchedulePDF.README.md
new file mode 100644
index 0000000..44053e6
--- /dev/null
+++ b/frontend/src/components/VIPSchedulePDF.README.md
@@ -0,0 +1,171 @@
+# VIP Schedule PDF Generator
+
+Professional PDF generation for VIP schedules using @react-pdf/renderer.
+
+## Features
+
+- Professional, print-ready PDF documents
+- Prominent timestamp showing when PDF was generated
+- Warning banner alerting users to check the app for latest updates
+- Contact information footer for questions
+- Branded header with VIP information
+- Color-coded event types (Transport, Meeting, Event, Meal)
+- Flight information display
+- Driver and vehicle assignments
+- Clean, professional formatting suitable for VIPs and coordinators
+
+## Usage
+
+```tsx
+import { pdf } from '@react-pdf/renderer';
+import { VIPSchedulePDF } from '@/components/VIPSchedulePDF';
+
+// Generate and download PDF
+const handleExport = async () => {
+  const blob = await pdf(
+    <VIPSchedulePDF
+      vip={vipData}
+      events={scheduleEvents}
+      contactEmail="coordinator@example.com"
+      contactPhone="(555) 123-4567"
+      appUrl={window.location.origin}
+    />
+  ).toBlob();
+
+  // Create download
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${vipData.name}_Schedule.pdf`;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+```
+
+## Props
+
+### VIPSchedulePDFProps
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `vip` | `VIP` | Yes | VIP information including name, organization, arrival details |
+| `events` | `PDFScheduleEvent[]` | Yes | Array of scheduled events for the VIP |
+| `contactEmail` | `string` | No | Contact email for questions (default from env) |
+| `contactPhone` | `string` | No | Contact phone for questions (default from env) |
+| `appUrl` | `string` | No | URL to the web app for latest schedule updates |
+
+## Environment Variables
+
+Configure contact information in `.env`:
+
+```env
+VITE_CONTACT_EMAIL=coordinator@example.com
+VITE_CONTACT_PHONE=(555) 123-4567
+VITE_ORGANIZATION_NAME=VIP Coordinator
+```
+
+## PDF Structure
+
+1. **Header Section**
+   - VIP name (large, branded blue)
+   - Organization and department
+   - Generation timestamp with warning banner
+
+2. **VIP Information**
+   - Arrival mode and expected arrival time
+   - Airport pickup and venue transport flags
+
+3. **Flight Information** (if applicable)
+   - Flight numbers and routes
+   - Scheduled arrival times
+   - Flight status
+
+4. **Special Notes** (if provided)
+   - Highlighted yellow box with special instructions
+
+5. **Schedule & Itinerary**
+   - Events grouped by day
+   - Color-coded by event type
+   - Time, location, and description
+   - Driver and vehicle assignments
+   - Event status badges
+
+6. **Footer** (on every page)
+   - Contact information
+   - Page numbers
+
+## Event Type Colors
+
+- **Transport**: Blue background, blue border
+- **Meeting**: Purple background, purple border
+- **Event**: Green background, green border
+- **Meal**: Orange background, orange border
+- **Accommodation**: Gray background, gray border
+
+## Timestamp Warning
+
+The PDF includes a prominent yellow warning banner that shows:
+- When the PDF was generated
+- A notice that it's a snapshot in time
+- Instructions to visit the web app for the latest schedule
+
+This ensures VIPs and coordinators know to check for updates.
+
+## Customization
+
+To customize branding colors, edit the `styles` object in `VIPSchedulePDF.tsx`:
+
+```typescript
+const styles = StyleSheet.create({
+  title: {
+    color: '#1a56db', // Primary brand color
+  },
+  // ... other styles
+});
+```
+
+## PDF Output
+
+- **Format**: A4 size
+- **Font**: Helvetica (built-in, ensures consistent rendering)
+- **File naming**: `{VIP_Name}_Schedule_{Date}.pdf`
+- **Quality**: Print-ready, professional formatting
+
+## Browser Compatibility
+
+Works in all modern browsers:
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+
+## Performance
+
+PDF generation is fast:
+- Small schedules (1-5 events): < 1 second
+- Medium schedules (6-20 events): 1-2 seconds
+- Large schedules (20+ events): 2-3 seconds
+
+## Troubleshooting
+
+**PDF fails to generate:**
+- Check browser console for errors
+- Ensure all required props are provided
+- Verify event data has valid date strings
+
+**Styling looks wrong:**
+- @react-pdf/renderer uses its own styling system
+- Not all CSS properties are supported
+- Check official docs for supported styles
+
+**Fonts not loading:**
+- Built-in fonts (Helvetica, Times, Courier) always work
+- Custom fonts require Font.register() call
+- Ensure font URLs are accessible
+
+## Future Enhancements
+
+- [ ] Add QR code linking to web app
+- [ ] Support for custom logos/branding
+- [ ] Multiple language support
+- [ ] Print optimization options
+- [ ] Email integration for sending PDFs
diff --git a/frontend/src/components/VIPSchedulePDF.tsx b/frontend/src/components/VIPSchedulePDF.tsx
new file mode 100644
index 0000000..a17725b
--- /dev/null
+++ b/frontend/src/components/VIPSchedulePDF.tsx
@@ -0,0 +1,612 @@
+/**
+ * VIP Schedule PDF Generator
+ *
+ * Professional itinerary document designed for VIP guests.
+ * Fully customizable through PDF Settings.
+ */
+
+import {
+  Document,
+  Page,
+  Text,
+  View,
+  StyleSheet,
+  Font,
+  Image,
+} from '@react-pdf/renderer';
+import { PdfSettings } from '@/types/settings';
+
+// Register fonts for professional typography
+Font.register({
+  family: 'Helvetica',
+  fonts: [
+    { src: 'Helvetica' },
+    { src: 'Helvetica-Bold', fontWeight: 'bold' },
+  ],
+});
+
+interface VIP {
+  id: string;
+  name: string;
+  organization: string | null;
+  department: string;
+  arrivalMode: string;
+  expectedArrival: string | null;
+  airportPickup: boolean;
+  venueTransport: boolean;
+  notes: string | null;
+  flights: Array<{
+    id: string;
+    flightNumber: string;
+    departureAirport: string;
+    arrivalAirport: string;
+    scheduledDeparture: string | null;
+    scheduledArrival: string | null;
+    status: string | null;
+  }>;
+}
+
+interface PDFScheduleEvent {
+  id: string;
+  title: string;
+  pickupLocation?: string | null;
+  dropoffLocation?: string | null;
+  location?: string | null;
+  startTime: string;
+  endTime: string;
+  type: string;
+  status: string;
+  description?: string | null;
+  driver?: {
+    id: string;
+    name: string;
+  } | null;
+  vehicle?: {
+    id: string;
+    name: string;
+    type: string;
+    seatCapacity?: number;
+  } | null;
+}
+
+interface VIPSchedulePDFProps {
+  vip: VIP;
+  events: PDFScheduleEvent[];
+  settings?: PdfSettings | null;
+}
+
+// Create dynamic styles based on settings
+const createStyles = (accentColor: string = '#2c3e50', pageSize: 'LETTER' | 'A4' = 'LETTER') =>
+  StyleSheet.create({
+    page: {
+      padding: 50,
+      paddingBottom: 80,
+      fontSize: 10,
+      fontFamily: 'Helvetica',
+      backgroundColor: '#ffffff',
+      color: '#333333',
+    },
+
+    // Watermark
+    watermark: {
+      position: 'absolute',
+      top: '40%',
+      left: '50%',
+      transform: 'translate(-50%, -50%) rotate(-45deg)',
+      fontSize: 72,
+      color: '#888888',
+      opacity: 0.2,
+      fontWeight: 'bold',
+      zIndex: 0,
+    },
+
+    // Logo
+    logoContainer: {
+      marginBottom: 15,
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    logo: {
+      maxWidth: 150,
+      maxHeight: 60,
+      objectFit: 'contain',
+    },
+
+    // Header
+    header: {
+      marginBottom: 30,
+      borderBottom: `2 solid ${accentColor}`,
+      paddingBottom: 20,
+    },
+    orgName: {
+      fontSize: 10,
+      color: '#7f8c8d',
+      textTransform: 'uppercase',
+      letterSpacing: 2,
+      marginBottom: 8,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: 'bold',
+      color: accentColor,
+      marginBottom: 4,
+    },
+    subtitle: {
+      fontSize: 12,
+      color: '#7f8c8d',
+    },
+    tagline: {
+      fontSize: 10,
+      color: '#95a5a6',
+      marginTop: 4,
+      fontStyle: 'italic',
+    },
+
+    // Custom messages
+    customMessage: {
+      fontSize: 10,
+      color: '#7f8c8d',
+      marginTop: 10,
+      padding: 10,
+      backgroundColor: '#f8f9fa',
+      borderLeft: `3 solid ${accentColor}`,
+    },
+
+    // Timestamp
+    timestampBar: {
+      marginTop: 15,
+      paddingTop: 10,
+      borderTop: '1 solid #ecf0f1',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    timestamp: {
+      fontSize: 8,
+      color: '#95a5a6',
+    },
+
+    // Sections
+    section: {
+      marginBottom: 25,
+    },
+    sectionTitle: {
+      fontSize: 11,
+      fontWeight: 'bold',
+      color: accentColor,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      marginBottom: 12,
+      paddingBottom: 6,
+      borderBottom: `2 solid ${accentColor}`,
+    },
+
+    // Flight info
+    flightCard: {
+      backgroundColor: '#f8f9fa',
+      padding: 15,
+      marginBottom: 10,
+      borderLeft: `3 solid ${accentColor}`,
+    },
+    flightNumber: {
+      fontSize: 14,
+      fontWeight: 'bold',
+      color: '#2c3e50',
+      marginBottom: 6,
+    },
+    flightRoute: {
+      fontSize: 11,
+      color: '#34495e',
+      marginBottom: 4,
+    },
+    flightTime: {
+      fontSize: 10,
+      color: '#7f8c8d',
+    },
+
+    // Day header
+    dayHeader: {
+      backgroundColor: accentColor,
+      color: '#ffffff',
+      padding: 10,
+      marginBottom: 0,
+      marginTop: 15,
+    },
+    dayHeaderText: {
+      fontSize: 12,
+      fontWeight: 'bold',
+      color: '#ffffff',
+    },
+
+    // Schedule table
+    scheduleTable: {
+      borderLeft: '1 solid #dee2e6',
+      borderRight: '1 solid #dee2e6',
+    },
+    scheduleRow: {
+      flexDirection: 'row',
+      borderBottom: '1 solid #dee2e6',
+      minHeight: 45,
+    },
+    scheduleRowAlt: {
+      backgroundColor: '#f8f9fa',
+    },
+    timeColumn: {
+      width: '18%',
+      padding: 10,
+      borderRight: '1 solid #dee2e6',
+      justifyContent: 'center',
+    },
+    timeText: {
+      fontSize: 10,
+      fontWeight: 'bold',
+      color: '#2c3e50',
+    },
+    timeEndText: {
+      fontSize: 8,
+      color: '#95a5a6',
+      marginTop: 2,
+    },
+    detailsColumn: {
+      width: '82%',
+      padding: 10,
+      justifyContent: 'center',
+    },
+    eventTitle: {
+      fontSize: 11,
+      fontWeight: 'bold',
+      color: '#2c3e50',
+      marginBottom: 4,
+    },
+    eventLocation: {
+      fontSize: 9,
+      color: '#7f8c8d',
+      marginBottom: 3,
+    },
+    eventDriver: {
+      fontSize: 9,
+      color: accentColor,
+    },
+    eventDescription: {
+      fontSize: 9,
+      color: '#7f8c8d',
+      marginTop: 4,
+      fontStyle: 'italic',
+    },
+
+    // Notes section
+    notesBox: {
+      backgroundColor: '#fef9e7',
+      padding: 15,
+      borderLeft: '3 solid #f1c40f',
+    },
+    notesTitle: {
+      fontSize: 10,
+      fontWeight: 'bold',
+      color: '#7d6608',
+      marginBottom: 6,
+    },
+    notesText: {
+      fontSize: 10,
+      color: '#5d4e37',
+      lineHeight: 1.5,
+    },
+
+    // Footer
+    footer: {
+      position: 'absolute',
+      bottom: 30,
+      left: 50,
+      right: 50,
+      paddingTop: 15,
+      borderTop: '1 solid #dee2e6',
+    },
+    footerContent: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    footerLeft: {
+      maxWidth: '60%',
+    },
+    footerTitle: {
+      fontSize: 9,
+      fontWeight: 'bold',
+      color: '#2c3e50',
+      marginBottom: 4,
+    },
+    footerContact: {
+      fontSize: 8,
+      color: '#7f8c8d',
+      marginBottom: 2,
+    },
+    footerRight: {
+      textAlign: 'right',
+    },
+    pageNumber: {
+      fontSize: 8,
+      color: '#95a5a6',
+    },
+
+    // Empty state
+    emptyState: {
+      textAlign: 'center',
+      padding: 30,
+      color: '#95a5a6',
+      fontSize: 11,
+    },
+  });
+
+export function VIPSchedulePDF({
+  vip,
+  events,
+  settings,
+}: VIPSchedulePDFProps) {
+  // Default settings if not provided
+  const config = settings || {
+    organizationName: 'VIP Transportation Services',
+    accentColor: '#2c3e50',
+    contactEmail: 'coordinator@example.com',
+    contactPhone: '(555) 123-4567',
+    contactLabel: 'Questions or Changes?',
+    showDraftWatermark: false,
+    showConfidentialWatermark: false,
+    showTimestamp: true,
+    showAppUrl: false,
+    pageSize: 'LETTER' as const,
+    showFlightInfo: true,
+    showDriverNames: true,
+    showVehicleNames: true,
+    showVipNotes: true,
+    showEventDescriptions: true,
+    logoUrl: null,
+    tagline: null,
+    headerMessage: null,
+    footerMessage: null,
+    secondaryContactName: null,
+    secondaryContactPhone: null,
+  };
+
+  const styles = createStyles(config.accentColor, config.pageSize);
+
+  // Format generation timestamp
+  const generatedAt = new Date().toLocaleString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  // Filter out cancelled events and sort by start time
+  const activeEvents = events
+    .filter(e => e.status !== 'CANCELLED')
+    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+
+  // Group events by day
+  const eventsByDay = activeEvents.reduce((acc, event) => {
+    const date = new Date(event.startTime).toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+    if (!acc[date]) {
+      acc[date] = [];
+    }
+    acc[date].push(event);
+    return acc;
+  }, {} as Record<string, PDFScheduleEvent[]>);
+
+  // Format time helper
+  const formatTime = (dateStr: string) => {
+    return new Date(dateStr).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  // Format location for display
+  const formatLocation = (event: PDFScheduleEvent) => {
+    if (event.type === 'TRANSPORT') {
+      const pickup = event.pickupLocation || 'Pickup location';
+      const dropoff = event.dropoffLocation || 'Destination';
+      return `From: ${pickup}  →  To: ${dropoff}`;
+    }
+    return event.location || '';
+  };
+
+  return (
+    <Document>
+      <Page size={config.pageSize} style={styles.page}>
+        {/* Watermarks */}
+        {config.showDraftWatermark && (
+          <View style={styles.watermark} fixed>
+            <Text>DRAFT</Text>
+          </View>
+        )}
+        {config.showConfidentialWatermark && (
+          <View style={styles.watermark} fixed>
+            <Text>CONFIDENTIAL</Text>
+          </View>
+        )}
+
+        {/* Header */}
+        <View style={styles.header}>
+          {/* Logo */}
+          {config.logoUrl && (
+            <View style={styles.logoContainer}>
+              <Image src={config.logoUrl} style={styles.logo} />
+            </View>
+          )}
+
+          <Text style={styles.orgName}>{config.organizationName}</Text>
+          <Text style={styles.title}>Itinerary for {vip.name}</Text>
+          {vip.organization && (
+            <Text style={styles.subtitle}>{vip.organization}</Text>
+          )}
+          {config.tagline && (
+            <Text style={styles.tagline}>{config.tagline}</Text>
+          )}
+
+          {/* Custom Header Message */}
+          {config.headerMessage && (
+            <Text style={styles.customMessage}>{config.headerMessage}</Text>
+          )}
+
+          {/* Timestamp bar */}
+          {(config.showTimestamp || config.showAppUrl) && (
+            <View style={styles.timestampBar}>
+              {config.showTimestamp && (
+                <Text style={styles.timestamp}>
+                  Generated: {generatedAt}
+                </Text>
+              )}
+              {config.showAppUrl && (
+                <Text style={styles.timestamp}>
+                  Latest version: {window.location.origin}
+                </Text>
+              )}
+            </View>
+          )}
+        </View>
+
+        {/* Flight Information */}
+        {config.showFlightInfo && vip.flights && vip.flights.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Flight Information</Text>
+            {vip.flights.map((flight) => (
+              <View key={flight.id} style={styles.flightCard}>
+                <Text style={styles.flightNumber}>{flight.flightNumber}</Text>
+                <Text style={styles.flightRoute}>
+                  {flight.departureAirport} → {flight.arrivalAirport}
+                </Text>
+                {flight.scheduledDeparture && (
+                  <Text style={styles.flightTime}>
+                    Departs: {new Date(flight.scheduledDeparture).toLocaleString('en-US', {
+                      weekday: 'short',
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: '2-digit',
+                    })}
+                  </Text>
+                )}
+                {flight.scheduledArrival && (
+                  <Text style={styles.flightTime}>
+                    Arrives: {new Date(flight.scheduledArrival).toLocaleString('en-US', {
+                      weekday: 'short',
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: '2-digit',
+                    })}
+                  </Text>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+
+        {/* Schedule */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Your Schedule</Text>
+
+          {activeEvents.length === 0 ? (
+            <Text style={styles.emptyState}>
+              No scheduled activities at this time.
+            </Text>
+          ) : (
+            Object.entries(eventsByDay).map(([date, dayEvents]) => (
+              <View key={date} wrap={false}>
+                {/* Day Header */}
+                <View style={styles.dayHeader}>
+                  <Text style={styles.dayHeaderText}>{date}</Text>
+                </View>
+
+                {/* Events Table */}
+                <View style={styles.scheduleTable}>
+                  {dayEvents.map((event, index) => (
+                    <View
+                      key={event.id}
+                      style={[
+                        styles.scheduleRow,
+                        index % 2 === 1 ? styles.scheduleRowAlt : {},
+                      ]}
+                    >
+                      {/* Time Column */}
+                      <View style={styles.timeColumn}>
+                        <Text style={styles.timeText}>{formatTime(event.startTime)}</Text>
+                        <Text style={styles.timeEndText}>to {formatTime(event.endTime)}</Text>
+                      </View>
+
+                      {/* Details Column */}
+                      <View style={styles.detailsColumn}>
+                        <Text style={styles.eventTitle}>{event.title}</Text>
+
+                        {formatLocation(event) && (
+                          <Text style={styles.eventLocation}>{formatLocation(event)}</Text>
+                        )}
+
+                        {event.type === 'TRANSPORT' && event.driver && config.showDriverNames && (
+                          <Text style={styles.eventDriver}>
+                            Your driver: {event.driver.name}
+                            {event.vehicle && config.showVehicleNames ? ` (${event.vehicle.name})` : ''}
+                          </Text>
+                        )}
+
+                        {event.description && config.showEventDescriptions && (
+                          <Text style={styles.eventDescription}>{event.description}</Text>
+                        )}
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            ))
+          )}
+        </View>
+
+        {/* Special Notes */}
+        {config.showVipNotes && vip.notes && (
+          <View style={styles.section}>
+            <View style={styles.notesBox}>
+              <Text style={styles.notesTitle}>Important Notes</Text>
+              <Text style={styles.notesText}>{vip.notes}</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Custom Footer Message */}
+        {config.footerMessage && (
+          <View style={styles.section}>
+            <Text style={styles.customMessage}>{config.footerMessage}</Text>
+          </View>
+        )}
+
+        {/* Footer */}
+        <View style={styles.footer} fixed>
+          <View style={styles.footerContent}>
+            <View style={styles.footerLeft}>
+              <Text style={styles.footerTitle}>{config.contactLabel}</Text>
+              <Text style={styles.footerContact}>{config.contactEmail}</Text>
+              <Text style={styles.footerContact}>{config.contactPhone}</Text>
+              {config.secondaryContactName && (
+                <Text style={styles.footerContact}>
+                  {config.secondaryContactName}
+                  {config.secondaryContactPhone ? ` - ${config.secondaryContactPhone}` : ''}
+                </Text>
+              )}
+            </View>
+            <View style={styles.footerRight}>
+              <Text
+                style={styles.pageNumber}
+                render={({ pageNumber, totalPages }) =>
+                  `Page ${pageNumber} of ${totalPages}`
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+}
diff --git a/frontend/src/components/VipForm.tsx b/frontend/src/components/VipForm.tsx
index 296c28d..15a1f3e 100644
--- a/frontend/src/components/VipForm.tsx
+++ b/frontend/src/components/VipForm.tsx
@@ -85,15 +85,15 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-full md:max-w-2xl lg:max-w-3xl max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-4 md:p-6 border-b">
-          <h2 className="text-xl md:text-2xl font-bold text-gray-900">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+      <div className="bg-card rounded-lg shadow-xl w-full max-w-full md:max-w-2xl lg:max-w-3xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-4 md:p-6 border-b border-border">
+          <h2 className="text-xl md:text-2xl font-bold text-foreground">
             {vip ? 'Edit VIP' : 'Add New VIP'}
           </h2>
           <button
             onClick={onCancel}
-            className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
+            className="text-muted-foreground hover:text-foreground p-2 rounded-md hover:bg-accent"
             style={{ minWidth: '44px', minHeight: '44px' }}
             aria-label="Close"
           >
@@ -104,7 +104,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
         <form onSubmit={handleSubmit} className="p-4 md:p-6 space-y-5">
           {/* Name */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Full Name *
             </label>
             <input
@@ -113,14 +113,14 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               required
               value={formData.name}
               onChange={handleChange}
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               style={{ minHeight: '44px' }}
             />
           </div>
 
           {/* Organization */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Organization
             </label>
             <input
@@ -128,14 +128,14 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               name="organization"
               value={formData.organization}
               onChange={handleChange}
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               style={{ minHeight: '44px' }}
             />
           </div>
 
           {/* Department */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Department *
             </label>
             <select
@@ -143,7 +143,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               required
               value={formData.department}
               onChange={handleChange}
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               style={{ minHeight: '44px' }}
             >
               <option value="OFFICE_OF_DEVELOPMENT">Office of Development</option>
@@ -153,7 +153,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
 
           {/* Arrival Mode */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Arrival Mode *
             </label>
             <select
@@ -161,7 +161,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               required
               value={formData.arrivalMode}
               onChange={handleChange}
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               style={{ minHeight: '44px' }}
             >
               <option value="FLIGHT">Flight</option>
@@ -171,7 +171,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
 
           {/* Expected Arrival */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Expected Arrival
             </label>
             <input
@@ -179,7 +179,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               name="expectedArrival"
               value={formData.expectedArrival}
               onChange={handleChange}
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               style={{ minHeight: '44px' }}
             />
           </div>
@@ -192,9 +192,9 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
                 name="airportPickup"
                 checked={formData.airportPickup}
                 onChange={handleChange}
-                className="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary"
+                className="h-5 w-5 text-primary border-input rounded focus:ring-primary"
               />
-              <span className="ml-3 text-base text-gray-700">
+              <span className="ml-3 text-base text-foreground">
                 Airport pickup required
               </span>
             </label>
@@ -205,9 +205,9 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
                 name="venueTransport"
                 checked={formData.venueTransport}
                 onChange={handleChange}
-                className="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary"
+                className="h-5 w-5 text-primary border-input rounded focus:ring-primary"
               />
-              <span className="ml-3 text-base text-gray-700">
+              <span className="ml-3 text-base text-foreground">
                 Venue transport required
               </span>
             </label>
@@ -215,7 +215,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
 
           {/* Notes */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Notes
             </label>
             <textarea
@@ -224,7 +224,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
               onChange={handleChange}
               rows={3}
               placeholder="Any special requirements or notes"
-              className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              className="w-full px-4 py-3 text-base bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
             />
           </div>
 
@@ -241,7 +241,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
             <button
               type="button"
               onClick={onCancel}
-              className="flex-1 bg-gray-200 text-gray-800 py-3 px-4 rounded-md hover:bg-gray-300 font-medium"
+              className="flex-1 bg-muted text-foreground py-3 px-4 rounded-md hover:bg-muted/80 font-medium"
               style={{ minHeight: '44px' }}
             >
               Cancel
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..5f1d6b4
--- /dev/null
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -0,0 +1,124 @@
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ColorScheme = 'blue' | 'purple' | 'green' | 'orange';
+
+interface ThemeContextType {
+  mode: ThemeMode;
+  colorScheme: ColorScheme;
+  resolvedTheme: 'light' | 'dark';
+  setMode: (mode: ThemeMode) => void;
+  setColorScheme: (scheme: ColorScheme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'vip-theme';
+
+interface StoredTheme {
+  mode: ThemeMode;
+  colorScheme: ColorScheme;
+}
+
+function getStoredTheme(): StoredTheme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        mode: parsed.mode || 'system',
+        colorScheme: parsed.colorScheme || 'blue',
+      };
+    }
+  } catch (e) {
+    console.warn('[THEME] Failed to parse stored theme:', e);
+  }
+  return { mode: 'system', colorScheme: 'blue' };
+}
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window !== 'undefined') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>(() => getStoredTheme().mode);
+  const [colorScheme, setColorSchemeState] = useState<ColorScheme>(() => getStoredTheme().colorScheme);
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => getSystemTheme());
+
+  // Compute resolved theme
+  const resolvedTheme = mode === 'system' ? systemTheme : mode;
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Apply theme to document
+  useEffect(() => {
+    const root = document.documentElement;
+
+    // Apply dark mode class
+    if (resolvedTheme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
+    // Apply color scheme
+    root.dataset.theme = colorScheme;
+
+    // Add transition class after initial load to prevent FOUC
+    requestAnimationFrame(() => {
+      root.classList.add('theme-transition');
+    });
+  }, [resolvedTheme, colorScheme]);
+
+  // Persist theme to localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ mode, colorScheme }));
+    } catch (e) {
+      console.warn('[THEME] Failed to save theme:', e);
+    }
+  }, [mode, colorScheme]);
+
+  const setMode = useCallback((newMode: ThemeMode) => {
+    setModeState(newMode);
+  }, []);
+
+  const setColorScheme = useCallback((newScheme: ColorScheme) => {
+    setColorSchemeState(newScheme);
+  }, []);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        mode,
+        colorScheme,
+        resolvedTheme,
+        setMode,
+        setColorScheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
new file mode 100644
index 0000000..e9577ee
--- /dev/null
+++ b/frontend/src/hooks/useSettings.ts
@@ -0,0 +1,74 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { PdfSettings, UpdatePdfSettingsDto } from '../types/settings';
+
+/**
+ * Fetch PDF settings
+ */
+export function usePdfSettings() {
+  return useQuery<PdfSettings>({
+    queryKey: ['settings', 'pdf'],
+    queryFn: async () => {
+      const { data } = await api.get('/settings/pdf');
+      return data;
+    },
+  });
+}
+
+/**
+ * Update PDF settings
+ */
+export function useUpdatePdfSettings() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (dto: UpdatePdfSettingsDto) => {
+      const { data } = await api.patch('/settings/pdf', dto);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings', 'pdf'] });
+    },
+  });
+}
+
+/**
+ * Upload logo
+ */
+export function useUploadLogo() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append('logo', file);
+
+      const { data } = await api.post('/settings/pdf/logo', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings', 'pdf'] });
+    },
+  });
+}
+
+/**
+ * Delete logo
+ */
+export function useDeleteLogo() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const { data } = await api.delete('/settings/pdf/logo');
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings', 'pdf'] });
+    },
+  });
+}
diff --git a/frontend/src/hooks/useSignalMessages.ts b/frontend/src/hooks/useSignalMessages.ts
new file mode 100644
index 0000000..14a1d60
--- /dev/null
+++ b/frontend/src/hooks/useSignalMessages.ts
@@ -0,0 +1,138 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+
+export interface SignalMessage {
+  id: string;
+  driverId: string;
+  direction: 'INBOUND' | 'OUTBOUND';
+  content: string;
+  timestamp: string;
+  isRead: boolean;
+}
+
+export interface UnreadCounts {
+  [driverId: string]: number;
+}
+
+/**
+ * Fetch messages for a specific driver
+ */
+export function useDriverMessages(driverId: string | null, enabled = true) {
+  return useQuery({
+    queryKey: ['signal-messages', driverId],
+    queryFn: async () => {
+      if (!driverId) return [];
+      const { data } = await api.get<SignalMessage[]>(`/signal/messages/driver/${driverId}`);
+      return data;
+    },
+    enabled: enabled && !!driverId,
+    refetchInterval: 5000, // Poll for new messages every 5 seconds
+  });
+}
+
+/**
+ * Fetch unread message counts for all drivers
+ */
+export function useUnreadCounts() {
+  return useQuery({
+    queryKey: ['signal-unread-counts'],
+    queryFn: async () => {
+      const { data } = await api.get<UnreadCounts>('/signal/messages/unread');
+      return data;
+    },
+    refetchInterval: 10000, // Poll every 10 seconds
+  });
+}
+
+/**
+ * Check which events have driver responses since the event started
+ * @param events Array of events with id, driverId, and startTime
+ */
+export function useDriverResponseCheck(
+  events: Array<{ id: string; driver?: { id: string } | null; startTime: string }>
+) {
+  // Only include events that have a driver
+  const eventsWithDrivers = events.filter((e) => e.driver?.id);
+
+  return useQuery({
+    queryKey: ['signal-driver-responses', eventsWithDrivers.map((e) => e.id).join(',')],
+    queryFn: async () => {
+      if (eventsWithDrivers.length === 0) {
+        return new Set<string>();
+      }
+
+      const payload = {
+        events: eventsWithDrivers.map((e) => ({
+          eventId: e.id,
+          driverId: e.driver!.id,
+          startTime: e.startTime,
+        })),
+      };
+
+      const { data } = await api.post<{ respondedEventIds: string[] }>(
+        '/signal/messages/check-responses',
+        payload
+      );
+      return new Set(data.respondedEventIds);
+    },
+    enabled: eventsWithDrivers.length > 0,
+    refetchInterval: 10000, // Poll every 10 seconds
+  });
+}
+
+/**
+ * Send a message to a driver
+ */
+export function useSendMessage() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ driverId, content }: { driverId: string; content: string }) => {
+      const { data } = await api.post<SignalMessage>('/signal/messages/send', {
+        driverId,
+        content,
+      });
+      return data;
+    },
+    onSuccess: (data, variables) => {
+      // Add the new message to the cache immediately
+      queryClient.setQueryData<SignalMessage[]>(
+        ['signal-messages', variables.driverId],
+        (old) => [...(old || []), data]
+      );
+      // Also invalidate to ensure consistency
+      queryClient.invalidateQueries({ queryKey: ['signal-messages', variables.driverId] });
+    },
+  });
+}
+
+/**
+ * Mark messages as read for a driver
+ */
+export function useMarkMessagesAsRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (driverId: string) => {
+      const { data } = await api.post(`/signal/messages/driver/${driverId}/read`);
+      return data;
+    },
+    onSuccess: (_, driverId) => {
+      // Update the unread counts cache
+      queryClient.setQueryData<UnreadCounts>(
+        ['signal-unread-counts'],
+        (old) => {
+          if (!old) return {};
+          const updated = { ...old };
+          delete updated[driverId];
+          return updated;
+        }
+      );
+      // Mark messages as read in the messages cache
+      queryClient.setQueryData<SignalMessage[]>(
+        ['signal-messages', driverId],
+        (old) => old?.map((msg) => ({ ...msg, isRead: true })) || []
+      );
+    },
+  });
+}
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
new file mode 100644
index 0000000..f4e6d87
--- /dev/null
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,3 @@
+// Re-export useTheme from ThemeContext for convenience
+export { useTheme } from '@/contexts/ThemeContext';
+export type { ThemeMode, ColorScheme } from '@/contexts/ThemeContext';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4e5670c..23a9402 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @layer base {
+  /* ===== LIGHT MODE (Default) ===== */
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
@@ -24,6 +25,86 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
+
+    /* Additional semantic tokens */
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 0%;
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+
+    /* Surface variants for depth */
+    --surface-1: 0 0% 100%;
+    --surface-2: 210 40% 98%;
+    --surface-3: 210 40% 96%;
+  }
+
+  /* ===== DARK MODE ===== */
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 47% 11%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 47% 11%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 50%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 20%;
+    --input: 217.2 32.6% 20%;
+    --ring: 224.3 76.3% 48%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 0%;
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+
+    --surface-1: 222.2 47% 11%;
+    --surface-2: 222.2 47% 13%;
+    --surface-3: 222.2 47% 15%;
+  }
+
+  /* ===== COLOR SCHEMES ===== */
+  /* Blue Theme (Default - no override needed for :root) */
+
+  /* Purple Theme */
+  [data-theme="purple"] {
+    --primary: 262.1 83.3% 57.8%;
+    --ring: 262.1 83.3% 57.8%;
+  }
+  .dark[data-theme="purple"] {
+    --primary: 263.4 70% 60%;
+    --ring: 263.4 70% 60%;
+  }
+
+  /* Green Theme */
+  [data-theme="green"] {
+    --primary: 142.1 70.6% 45.3%;
+    --ring: 142.1 70.6% 45.3%;
+  }
+  .dark[data-theme="green"] {
+    --primary: 142.1 76.2% 50%;
+    --ring: 142.1 76.2% 50%;
+  }
+
+  /* Orange Theme */
+  [data-theme="orange"] {
+    --primary: 24.6 95% 53.1%;
+    --ring: 24.6 95% 53.1%;
+  }
+  .dark[data-theme="orange"] {
+    --primary: 20.5 90.2% 55%;
+    --ring: 20.5 90.2% 55%;
   }
 }
 
@@ -32,6 +113,121 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+  }
+}
+
+/* ===== THEME TRANSITIONS ===== */
+@layer utilities {
+  .theme-transition {
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+  }
+
+  .theme-transition * {
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+  }
+}
+
+/* ===== CUSTOM SHADOWS ===== */
+@layer utilities {
+  .shadow-soft {
+    box-shadow:
+      0 1px 3px 0 rgb(0 0 0 / 0.05),
+      0 1px 2px -1px rgb(0 0 0 / 0.05);
+  }
+
+  .shadow-medium {
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.07),
+      0 2px 4px -2px rgb(0 0 0 / 0.07);
+  }
+
+  .shadow-elevated {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.08),
+      0 4px 6px -4px rgb(0 0 0 / 0.08);
+  }
+
+  .dark .shadow-soft {
+    box-shadow:
+      0 1px 3px 0 rgb(0 0 0 / 0.3),
+      0 1px 2px -1px rgb(0 0 0 / 0.3),
+      0 0 0 1px rgb(255 255 255 / 0.03);
+  }
+
+  .dark .shadow-medium {
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.4),
+      0 2px 4px -2px rgb(0 0 0 / 0.4),
+      0 0 0 1px rgb(255 255 255 / 0.03);
+  }
+
+  .dark .shadow-elevated {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.5),
+      0 4px 6px -4px rgb(0 0 0 / 0.5),
+      0 0 0 1px rgb(255 255 255 / 0.05);
+  }
+}
+
+/* ===== GRADIENT UTILITIES ===== */
+@layer utilities {
+  .gradient-primary {
+    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.8) 100%);
+  }
+
+  .gradient-subtle {
+    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted) / 0.5) 100%);
+  }
+
+  .gradient-card {
+    background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card) / 0.95) 100%);
+  }
+}
+
+/* ===== FOCUS RING UTILITIES ===== */
+@layer utilities {
+  .focus-ring {
+    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background;
+  }
+}
+
+/* ===== SCROLLBAR STYLING ===== */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.5);
+  }
+
+  /* Hide scrollbar completely while still allowing scroll */
+  .scrollbar-hide {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;  /* Chrome, Safari and Opera */
   }
 }
diff --git a/frontend/src/lib/abilities.ts b/frontend/src/lib/abilities.ts
index e79e971..980440c 100644
--- a/frontend/src/lib/abilities.ts
+++ b/frontend/src/lib/abilities.ts
@@ -79,16 +79,21 @@ export function defineAbilitiesFor(user: User | null): AppAbility {
     cannot(Action.Delete, 'User');
     cannot(Action.Approve, 'User');
   } else if (user.role === 'DRIVER') {
-    // Drivers can only read most resources
-    can(Action.Read, ['VIP', 'Driver', 'ScheduleEvent', 'Vehicle']);
+    // Drivers have very limited access - only their own data
+    // They can read their own schedule events (filtered by backend)
+    can(Action.Read, 'ScheduleEvent');
 
-    // Drivers can update status of events (specific instance check would need event data)
+    // Drivers can update status of their own events
     can(Action.UpdateStatus, 'ScheduleEvent');
 
-    // Cannot access flights
-    cannot(Action.Read, 'Flight');
+    // Drivers can read and update their own driver profile only
+    can(Action.Read, 'Driver');
+    can(Action.Update, 'Driver'); // For updating their own phone number
 
-    // Cannot access users
+    // Cannot access other resources
+    cannot(Action.Read, 'VIP'); // VIP info comes embedded in their assignments
+    cannot(Action.Read, 'Vehicle'); // Vehicle info comes embedded in their assignments
+    cannot(Action.Read, 'Flight');
     cannot(Action.Read, 'User');
   }
 
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index c2890df..0729b02 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -11,81 +11,95 @@ export const api = axios.create({
   timeout: 30000, // 30 second timeout
 });
 
-// Request interceptor to add auth token and log requests
-api.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem('auth0_token');
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-
-    // Log request in development mode
-    if (DEBUG_MODE) {
-      console.log(`[API] → ${config.method?.toUpperCase()} ${config.url}`, {
-        data: config.data,
-        params: config.params,
-      });
-    }
-
-    return config;
+// Separate instance for AI Copilot with longer timeout (AI can take a while to respond)
+export const copilotApi = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json',
   },
-  (error) => {
-    console.error('[API] Request error:', error);
-    return Promise.reject(error);
-  }
-);
+  timeout: 120000, // 2 minute timeout for AI requests
+});
 
-// Response interceptor for logging and error handling
-api.interceptors.response.use(
-  (response) => {
-    // Log successful response in development mode
-    if (DEBUG_MODE) {
-      console.log(`[API] ← ${response.status} ${response.config.method?.toUpperCase()} ${response.config.url}`, {
+// Shared request interceptor function
+const requestInterceptor = (config: any) => {
+  const token = localStorage.getItem('auth0_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  if (DEBUG_MODE) {
+    console.log(`[API] → ${config.method?.toUpperCase()} ${config.url}`, {
+      data: config.data,
+      params: config.params,
+    });
+  }
+
+  return config;
+};
+
+const requestErrorInterceptor = (error: any) => {
+  console.error('[API] Request error:', error);
+  return Promise.reject(error);
+};
+
+// Apply interceptors to both API instances
+api.interceptors.request.use(requestInterceptor, requestErrorInterceptor);
+copilotApi.interceptors.request.use(requestInterceptor, requestErrorInterceptor);
+
+// Shared response interceptor function
+const responseInterceptor = (response: any) => {
+  // Log successful response in development mode
+  if (DEBUG_MODE) {
+    console.log(`[API] ← ${response.status} ${response.config.method?.toUpperCase()} ${response.config.url}`, {
+      data: response.data,
+    });
+  }
+  return response;
+};
+
+const responseErrorInterceptor = (error: any) => {
+  const { config, response } = error;
+
+  // Enhanced error logging
+  if (response) {
+    // Server responded with error status
+    console.error(
+      `[API] ✖ ${response.status} ${config?.method?.toUpperCase()} ${config?.url}`,
+      {
+        status: response.status,
+        statusText: response.statusText,
         data: response.data,
-      });
-    }
-    return response;
-  },
-  (error) => {
-    const { config, response } = error;
-
-    // Enhanced error logging
-    if (response) {
-      // Server responded with error status
-      console.error(
-        `[API] ✖ ${response.status} ${config?.method?.toUpperCase()} ${config?.url}`,
-        {
-          status: response.status,
-          statusText: response.statusText,
-          data: response.data,
-          requestData: config?.data,
-        }
-      );
-
-      // Log specific error types
-      if (response.status === 401) {
-        console.warn('[API] Authentication required - user may need to log in again');
-      } else if (response.status === 403) {
-        console.warn('[API] Permission denied - user lacks required permissions');
-      } else if (response.status === 404) {
-        console.warn('[API] Resource not found');
-      } else if (response.status === 409) {
-        console.warn('[API] Conflict detected:', response.data.conflicts || response.data.message);
-      } else if (response.status >= 500) {
-        console.error('[API] Server error - backend may be experiencing issues');
+        requestData: config?.data,
       }
-    } else if (error.request) {
-      // Request was made but no response received
-      console.error('[API] ✖ Network error - no response received', {
-        method: config?.method?.toUpperCase(),
-        url: config?.url,
-        message: error.message,
-      });
-    } else {
-      // Something else happened
-      console.error('[API] ✖ Request setup error:', error.message);
-    }
+    );
 
-    return Promise.reject(error);
+    // Log specific error types
+    if (response.status === 401) {
+      console.warn('[API] Authentication required - user may need to log in again');
+    } else if (response.status === 403) {
+      console.warn('[API] Permission denied - user lacks required permissions');
+    } else if (response.status === 404) {
+      console.warn('[API] Resource not found');
+    } else if (response.status === 409) {
+      console.warn('[API] Conflict detected:', response.data.conflicts || response.data.message);
+    } else if (response.status >= 500) {
+      console.error('[API] Server error - backend may be experiencing issues');
+    }
+  } else if (error.request) {
+    // Request was made but no response received
+    console.error('[API] ✖ Network error - no response received', {
+      method: config?.method?.toUpperCase(),
+      url: config?.url,
+      message: error.message,
+    });
+  } else {
+    // Something else happened
+    console.error('[API] ✖ Request setup error:', error.message);
   }
-);
+
+  return Promise.reject(error);
+};
+
+// Apply response interceptors to both API instances
+api.interceptors.response.use(responseInterceptor, responseErrorInterceptor);
+copilotApi.interceptors.response.use(responseInterceptor, responseErrorInterceptor);
diff --git a/frontend/src/pages/AdminTools.tsx b/frontend/src/pages/AdminTools.tsx
index f4ead47..5ae1992 100644
--- a/frontend/src/pages/AdminTools.tsx
+++ b/frontend/src/pages/AdminTools.tsx
@@ -3,7 +3,27 @@ import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 import { api } from '@/lib/api';
 import { handleError } from '@/lib/errorHandler';
-import { Database, Trash2, Plus, RefreshCw, AlertTriangle } from 'lucide-react';
+import { PdfSettingsSection } from '@/components/PdfSettingsSection';
+import {
+  Database,
+  Trash2,
+  Plus,
+  RefreshCw,
+  AlertTriangle,
+  MessageSquare,
+  QrCode,
+  Phone,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  Send,
+  Unlink,
+  Download,
+  Settings,
+  FileText,
+  Upload,
+  Palette,
+} from 'lucide-react';
 
 interface Stats {
   vips: number;
@@ -14,10 +34,55 @@ interface Stats {
   users: number;
 }
 
+interface SignalStatus {
+  isConnected: boolean;
+  isLinked: boolean;
+  phoneNumber: string | null;
+  error?: string;
+}
+
+interface MessageStats {
+  total: number;
+  inbound: number;
+  outbound: number;
+  unread: number;
+  driversWithMessages: number;
+}
+
 export function AdminTools() {
   const queryClient = useQueryClient();
   const [isLoading, setIsLoading] = useState(false);
 
+  // Signal state
+  const [showQRCode, setShowQRCode] = useState(false);
+  const [qrCodeData, setQrCodeData] = useState<string | null>(null);
+  const [qrLoading, setQrLoading] = useState(false);
+  const [registerPhone, setRegisterPhone] = useState('');
+  const [verifyCode, setVerifyCode] = useState('');
+  const [showRegister, setShowRegister] = useState(false);
+  const [showVerify, setShowVerify] = useState(false);
+  const [testMessage, setTestMessage] = useState('');
+  const [testRecipient, setTestRecipient] = useState('');
+
+  // Signal status query
+  const { data: signalStatus, isLoading: signalLoading, refetch: refetchSignal } = useQuery<SignalStatus>({
+    queryKey: ['signal-status'],
+    queryFn: async () => {
+      const { data } = await api.get('/signal/status');
+      return data;
+    },
+    refetchInterval: 30000, // Refetch every 30 seconds
+  });
+
+  // Message stats query
+  const { data: messageStats, refetch: refetchMessageStats } = useQuery<MessageStats>({
+    queryKey: ['signal-message-stats'],
+    queryFn: async () => {
+      const { data } = await api.get('/signal/messages/stats');
+      return data;
+    },
+  });
+
   // Fetch current stats
   const { data: stats, refetch: refetchStats } = useQuery<Stats>({
     queryKey: ['admin-stats'],
@@ -41,898 +106,58 @@ export function AdminTools() {
     },
   });
 
-  const handleAddTestVIPs = async () => {
-    if (!confirm('Add 20 test VIPs to the database?')) {
+  // ============================================================
+  // BULK SEED OPERATIONS (Fast - uses backend bulk endpoints)
+  // ============================================================
+
+  const handleGenerateAllData = async () => {
+    if (!confirm('Generate complete test dataset? This will clear existing data and create VIPs, drivers, vehicles, flights, and events with dynamic times relative to NOW.')) {
       return;
     }
 
     setIsLoading(true);
     try {
-      const testVIPs = [
-        // OFFICE_OF_DEVELOPMENT (10 VIPs) - Corporate sponsors, foundations, major donors
-        {
-          name: 'Sarah Chen',
-          organization: 'Microsoft Corporation',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Marcus Johnson',
-          organization: 'The Coca-Cola Company',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Jennifer Wu',
-          organization: 'JPMorgan Chase Foundation',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Roberto Gonzalez',
-          organization: 'AT&T Inc',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Priya Sharma',
-          organization: 'Google LLC',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'David Okonkwo',
-          organization: 'Bank of America',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: false,
-          venueTransport: true,
-        },
-        {
-          name: 'Maria Rodriguez',
-          organization: 'Walmart Foundation',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: true,
-        },
-        {
-          name: 'Yuki Tanaka',
-          organization: 'Honda Motor Company',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Thomas Anderson',
-          organization: 'Verizon Communications',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: false,
-        },
-        {
-          name: 'Isabella Costa',
-          organization: 'Target Corporation',
-          department: 'OFFICE_OF_DEVELOPMENT',
-          arrivalMode: 'FLIGHT',
-          airportPickup: false,
-          venueTransport: true,
-        },
-        // ADMIN (10 VIPs) - BSA Leadership and Staff
-        {
-          name: 'Roger A. Krone',
-          organization: 'BSA National President',
-          department: 'ADMIN',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Emily Richardson',
-          organization: 'BSA Chief Scout Executive',
-          department: 'ADMIN',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: false,
-        },
-        {
-          name: 'Dr. Maya Krishnan',
-          organization: 'BSA National Director of Program',
-          department: 'ADMIN',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: false,
-        },
-        {
-          name: 'James O\'Brien',
-          organization: 'BSA Northeast Regional Director',
-          department: 'ADMIN',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Fatima Al-Rahman',
-          organization: 'BSA Western Region Executive',
-          department: 'ADMIN',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'William Zhang',
-          organization: 'BSA Southern Region Council',
-          department: 'ADMIN',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: true,
-        },
-        {
-          name: 'Sophie Laurent',
-          organization: 'BSA National Volunteer Training',
-          department: 'ADMIN',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: true,
-        },
-        {
-          name: 'Alexander Volkov',
-          organization: 'BSA High Adventure Director',
-          department: 'ADMIN',
-          arrivalMode: 'FLIGHT',
-          airportPickup: true,
-          venueTransport: false,
-        },
-        {
-          name: 'Dr. Aisha Patel',
-          organization: 'BSA STEM & Innovation Programs',
-          department: 'ADMIN',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: true,
-        },
-        {
-          name: 'Henrik Larsson',
-          organization: 'BSA International Commissioner',
-          department: 'ADMIN',
-          arrivalMode: 'SELF_DRIVING',
-          airportPickup: false,
-          venueTransport: true,
-        },
-      ];
-
-      let count = 0;
-      for (const vip of testVIPs) {
-        try {
-          await api.post('/vips', vip);
-          count++;
-        } catch (error) {
-          console.error('Failed to create VIP:', vip.name, error);
-        }
+      const { data } = await api.post('/seed/generate', { clearFirst: true });
+      if (data.success) {
+        queryClient.invalidateQueries();
+        refetchStats();
+        toast.success(`Generated all test data in ${data.elapsed}! Created ${data.created.vips} VIPs, ${data.created.drivers} drivers, ${data.created.vehicles} vehicles, ${data.created.flights} flights, ${data.created.events} events`);
+      } else {
+        toast.error(data.error || 'Failed to generate data');
       }
-
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Added ${count} test VIPs`);
     } catch (error: any) {
-      console.error('Failed to add test VIPs:', error);
-      toast.error('Failed to add test VIPs: ' + (error.message || 'Unknown error'));
+      console.error('Failed to generate test data:', error);
+      toast.error('Failed to generate: ' + (error.response?.data?.message || error.message));
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleAddTestDrivers = async () => {
-    if (!confirm('Add 8 test Drivers to the database?')) {
+  const handleRegenerateEvents = async () => {
+    if (!confirm('Regenerate all events with fresh times relative to NOW? This keeps existing VIPs, drivers, and vehicles but creates new dynamic events.')) {
       return;
     }
 
     setIsLoading(true);
     try {
-      const testDrivers = [
-        {
-          name: 'Michael Thompson',
-          phone: '555-0101',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'Lisa Martinez',
-          phone: '555-0102',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'David Kim',
-          phone: '555-0103',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'Amanda Washington',
-          phone: '555-0104',
-          department: 'ADMIN',
-        },
-        {
-          name: 'Carlos Hernandez',
-          phone: '555-0105',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'Jessica Lee',
-          phone: '555-0106',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'Brandon Jackson',
-          phone: '555-0107',
-          department: 'OFFICE_OF_DEVELOPMENT',
-        },
-        {
-          name: 'Nicole Brown',
-          phone: '555-0108',
-          department: 'ADMIN',
-        },
-      ];
-
-      let count = 0;
-      for (const driver of testDrivers) {
-        try {
-          await api.post('/drivers', driver);
-          count++;
-        } catch (error) {
-          console.error('Failed to create driver:', driver.name, error);
-        }
+      const { data } = await api.post('/seed/generate-events');
+      if (data.success) {
+        queryClient.invalidateQueries();
+        refetchStats();
+        toast.success(`Regenerated ${data.created.events} events in ${data.elapsed}!`);
+      } else {
+        toast.error(data.error || 'Failed to regenerate events');
       }
-
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Added ${count} test Drivers`);
     } catch (error: any) {
-      console.error('Failed to add test drivers:', error);
-      toast.error('Failed to add test drivers: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleAddTestVehicles = async () => {
-    if (!confirm('Add 8 test vehicles to the database?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const testVehicles = [
-        {
-          name: 'Blue Van',
-          type: 'VAN',
-          licensePlate: 'VAN-001',
-          seatCapacity: 12,
-          status: 'AVAILABLE',
-          notes: 'Primary transport van with wheelchair accessibility',
-        },
-        {
-          name: 'Suburban #1',
-          type: 'SUV',
-          licensePlate: 'SUV-101',
-          seatCapacity: 7,
-          status: 'AVAILABLE',
-          notes: 'Leather interior, good for VIP comfort',
-        },
-        {
-          name: 'Golf Cart Alpha',
-          type: 'GOLF_CART',
-          licensePlate: 'GC-A',
-          seatCapacity: 6,
-          status: 'AVAILABLE',
-          notes: 'Quick campus transport, good for short distances',
-        },
-        {
-          name: 'Red Van',
-          type: 'VAN',
-          licensePlate: 'VAN-002',
-          seatCapacity: 8,
-          status: 'AVAILABLE',
-          notes: 'Standard transport van',
-        },
-        {
-          name: 'Scout Bus',
-          type: 'BUS',
-          licensePlate: 'BUS-001',
-          seatCapacity: 25,
-          status: 'AVAILABLE',
-          notes: 'Large group transport, AC equipped',
-        },
-        {
-          name: 'Suburban #2',
-          type: 'SUV',
-          licensePlate: 'SUV-102',
-          seatCapacity: 7,
-          status: 'AVAILABLE',
-          notes: 'Backup VIP transport',
-        },
-        {
-          name: 'Golf Cart Bravo',
-          type: 'GOLF_CART',
-          licensePlate: 'GC-B',
-          seatCapacity: 4,
-          status: 'AVAILABLE',
-          notes: 'Quick on-site transport',
-        },
-        {
-          name: 'Equipment Truck',
-          type: 'TRUCK',
-          licensePlate: 'TRK-001',
-          seatCapacity: 3,
-          status: 'AVAILABLE',
-          notes: 'For equipment and supply runs, limited passenger space',
-        },
-      ];
-
-      let count = 0;
-      for (const vehicle of testVehicles) {
-        try {
-          await api.post('/vehicles', vehicle);
-          count++;
-        } catch (error) {
-          console.error('Failed to create vehicle:', vehicle.name, error);
-        }
-      }
-
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Added ${count} test Vehicles`);
-    } catch (error: any) {
-      console.error('Failed to add test vehicles:', error);
-      toast.error('Failed to add test vehicles: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleAddTestSchedule = async () => {
-    if (!confirm('Add test schedule events for all VIPs? This will create a complete 3-day Jamboree itinerary.')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      // Fetch current VIPs, Drivers, and Vehicles to get their IDs
-      const [vipsResponse, driversResponse, vehiclesResponse] = await Promise.all([
-        api.get('/vips'),
-        api.get('/drivers'),
-        api.get('/vehicles'),
-      ]);
-
-      const vips = vipsResponse.data;
-      const drivers = driversResponse.data;
-      const vehicles = vehiclesResponse.data;
-
-      if (vips.length === 0) {
-        toast.error('No VIPs found. Add test VIPs first.');
-        setIsLoading(false);
-        return;
-      }
-
-      if (drivers.length === 0) {
-        toast.error('No drivers found. Add test drivers first.');
-        setIsLoading(false);
-        return;
-      }
-
-      if (vehicles.length === 0) {
-        toast.error('No vehicles found. Add test vehicles first.');
-        setIsLoading(false);
-        return;
-      }
-
-      // Get current date and time for scheduling
-      const now = new Date();
-      const jamboreeStart = new Date(now);
-      jamboreeStart.setHours(8, 0, 0, 0); // Start at 8 AM today
-
-      let eventCount = 0;
-
-      // Create events for each VIP
-      for (let i = 0; i < vips.length; i++) {
-        const vip = vips[i];
-        // Note: Not assigning drivers/vehicles initially to avoid conflicts
-        // Coordinators will assign these manually based on availability
-
-        const dayOffset = Math.floor(i / 5); // Spread arrivals across days
-
-        // DAY 1 - Arrival Day
-        const day1 = new Date(jamboreeStart);
-        day1.setDate(day1.getDate() + dayOffset);
-
-        // Event 1: Airport Pickup (if arriving by flight)
-        if (vip.arrivalMode === 'FLIGHT') {
-          const arrivalTime = new Date(day1);
-          arrivalTime.setHours(10 + (i % 4), 0, 0, 0); // Stagger arrivals
-
-          try {
-            await api.post('/events', {
-              vipIds: [vip.id],
-              // driverId and vehicleId left unassigned to avoid conflicts
-              title: `Airport Pickup - ${vip.name}`,
-              type: 'TRANSPORT',
-              status: 'SCHEDULED',
-              pickupLocation: 'Airport - Arrivals Terminal',
-              dropoffLocation: 'Main Gate Registration',
-              startTime: arrivalTime.toISOString(),
-              endTime: new Date(arrivalTime.getTime() + 45 * 60000).toISOString(), // 45 min drive
-              description: `Pick up ${vip.name} from airport and transport to Jamboree registration`,
-              notes: 'Driver and vehicle need to be assigned',
-            });
-            eventCount++;
-          } catch (error) {
-            console.error('Failed to create airport pickup event:', error);
-          }
-        }
-
-        // Event 2: Registration & Check-in
-        const checkInTime = new Date(day1);
-        checkInTime.setHours(12 + (i % 3), 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'Registration & VIP Badge Collection',
-            type: 'EVENT',
-            status: 'SCHEDULED',
-            location: 'Registration Tent',
-            startTime: checkInTime.toISOString(),
-            endTime: new Date(checkInTime.getTime() + 30 * 60000).toISOString(),
-            description: 'VIP registration, badge collection, and welcome packet',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create registration event:', error);
-        }
-
-        // Event 3: Transport to Lodge
-        const lodgeTransport = new Date(checkInTime.getTime() + 35 * 60000);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            // driverId and vehicleId left unassigned to avoid conflicts
-            title: 'Transport to VIP Lodge',
-            type: 'TRANSPORT',
-            status: 'SCHEDULED',
-            pickupLocation: 'Registration Tent',
-            dropoffLocation: 'VIP Lodge',
-            startTime: lodgeTransport.toISOString(),
-            endTime: new Date(lodgeTransport.getTime() + 15 * 60000).toISOString(),
-            description: 'Transport to VIP accommodation',
-            notes: 'Driver and vehicle need to be assigned',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create lodge transport event:', error);
-        }
-
-        // Event 4: Accommodation Check-in
-        const accommodation = new Date(lodgeTransport.getTime() + 20 * 60000);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'VIP Lodge Check-in',
-            type: 'ACCOMMODATION',
-            status: 'SCHEDULED',
-            location: 'VIP Lodge',
-            startTime: accommodation.toISOString(),
-            endTime: new Date(accommodation.getTime() + 30 * 60000).toISOString(),
-            description: 'Room assignment and lodge orientation',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create accommodation event:', error);
-        }
-
-        // Event 5: Welcome Dinner
-        const dinner = new Date(day1);
-        dinner.setHours(18, 30, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'VIP Welcome Dinner',
-            type: 'MEAL',
-            status: 'SCHEDULED',
-            location: 'Grand Dining Hall',
-            startTime: dinner.toISOString(),
-            endTime: new Date(dinner.getTime() + 90 * 60000).toISOString(),
-            description: 'Formal welcome dinner with Jamboree leadership and other VIPs',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create dinner event:', error);
-        }
-
-        // DAY 2 - Full Event Day
-        const day2 = new Date(day1);
-        day2.setDate(day2.getDate() + 1);
-
-        // Event 6: Breakfast
-        const breakfast = new Date(day2);
-        breakfast.setHours(7, 30, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'VIP Breakfast',
-            type: 'MEAL',
-            status: 'SCHEDULED',
-            location: 'VIP Lodge Dining Room',
-            startTime: breakfast.toISOString(),
-            endTime: new Date(breakfast.getTime() + 45 * 60000).toISOString(),
-            description: 'Continental breakfast with fellow VIPs',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create breakfast event:', error);
-        }
-
-        // Event 7: Opening Ceremony Transport
-        const ceremonyTransport = new Date(day2);
-        ceremonyTransport.setHours(9, 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            // driverId and vehicleId left unassigned to avoid conflicts
-            title: 'Transport to Opening Ceremony',
-            type: 'TRANSPORT',
-            status: 'SCHEDULED',
-            pickupLocation: 'VIP Lodge',
-            dropoffLocation: 'Main Arena',
-            startTime: ceremonyTransport.toISOString(),
-            endTime: new Date(ceremonyTransport.getTime() + 10 * 60000).toISOString(),
-            description: 'Transport to Jamboree Opening Ceremony',
-            notes: 'Driver and vehicle need to be assigned',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create ceremony transport event:', error);
-        }
-
-        // Event 8: Opening Ceremony
-        const ceremony = new Date(day2);
-        ceremony.setHours(9, 30, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'Jamboree Opening Ceremony',
-            type: 'EVENT',
-            status: 'SCHEDULED',
-            location: 'Main Arena - VIP Section',
-            startTime: ceremony.toISOString(),
-            endTime: new Date(ceremony.getTime() + 120 * 60000).toISOString(),
-            description: 'Official opening ceremony with presentations, flag ceremony, and keynote speeches',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create ceremony event:', error);
-        }
-
-        // Event 9: Donor Recognition Meeting
-        const meeting = new Date(day2);
-        meeting.setHours(13, 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'Donor Recognition & Campaign Update',
-            type: 'MEETING',
-            status: 'SCHEDULED',
-            location: 'Conference Center - Room A',
-            startTime: meeting.toISOString(),
-            endTime: new Date(meeting.getTime() + 60 * 60000).toISOString(),
-            description: 'Private meeting with development team regarding campaign progress and impact',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create meeting event:', error);
-        }
-
-        // Event 10: Lunch
-        const lunch = new Date(day2);
-        lunch.setHours(14, 15, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'VIP Luncheon',
-            type: 'MEAL',
-            status: 'SCHEDULED',
-            location: 'VIP Pavilion',
-            startTime: lunch.toISOString(),
-            endTime: new Date(lunch.getTime() + 60 * 60000).toISOString(),
-            description: 'Catered lunch with other major donors and sponsors',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create lunch event:', error);
-        }
-
-        // Event 11: Site Tour
-        const tour = new Date(day2);
-        tour.setHours(15, 30, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            // driverId and vehicleId left unassigned for guided tour
-            title: 'Jamboree Site Tour',
-            type: 'EVENT',
-            status: 'SCHEDULED',
-            location: 'Various Locations',
-            startTime: tour.toISOString(),
-            endTime: new Date(tour.getTime() + 90 * 60000).toISOString(),
-            description: 'Guided tour of Jamboree facilities, activity areas, and Scout exhibitions',
-            notes: 'Vehicle may be needed for transport between areas',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create tour event:', error);
-        }
-
-        // Event 12: Gala Dinner
-        const gala = new Date(day2);
-        gala.setHours(19, 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'Gala Dinner & Awards Ceremony',
-            type: 'MEAL',
-            status: 'SCHEDULED',
-            location: 'Grand Ballroom',
-            startTime: gala.toISOString(),
-            endTime: new Date(gala.getTime() + 150 * 60000).toISOString(),
-            description: 'Black-tie gala dinner with awards presentation honoring major supporters',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create gala event:', error);
-        }
-
-        // DAY 3 - Departure Day
-        const day3 = new Date(day2);
-        day3.setDate(day3.getDate() + 1);
-
-        // Event 13: Farewell Breakfast
-        const farewellBreakfast = new Date(day3);
-        farewellBreakfast.setHours(8, 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'Farewell Breakfast',
-            type: 'MEAL',
-            status: 'SCHEDULED',
-            location: 'VIP Lodge Dining Room',
-            startTime: farewellBreakfast.toISOString(),
-            endTime: new Date(farewellBreakfast.getTime() + 45 * 60000).toISOString(),
-            description: 'Final breakfast and thank you remarks from Jamboree leadership',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create farewell breakfast event:', error);
-        }
-
-        // Event 14: Lodge Checkout
-        const checkout = new Date(day3);
-        checkout.setHours(10, 0, 0, 0);
-
-        try {
-          await api.post('/events', {
-            vipIds: [vip.id],
-            title: 'VIP Lodge Checkout',
-            type: 'ACCOMMODATION',
-            status: 'SCHEDULED',
-            location: 'VIP Lodge',
-            startTime: checkout.toISOString(),
-            endTime: new Date(checkout.getTime() + 15 * 60000).toISOString(),
-            description: 'Room checkout and departure preparation',
-          });
-          eventCount++;
-        } catch (error) {
-          console.error('Failed to create checkout event:', error);
-        }
-
-        // Event 15: Airport Departure (if arriving by flight)
-        if (vip.arrivalMode === 'FLIGHT') {
-          const departureTime = new Date(day3);
-          departureTime.setHours(11 + (i % 3), 0, 0, 0); // Stagger departures
-
-          try {
-            await api.post('/events', {
-              vipIds: [vip.id],
-              // driverId and vehicleId left unassigned to avoid conflicts
-              title: `Airport Departure - ${vip.name}`,
-              type: 'TRANSPORT',
-              status: 'SCHEDULED',
-              pickupLocation: 'VIP Lodge',
-              dropoffLocation: 'Airport - Departures Terminal',
-              startTime: departureTime.toISOString(),
-              endTime: new Date(departureTime.getTime() + 45 * 60000).toISOString(),
-              description: `Transport ${vip.name} to airport for departure`,
-              notes: 'Driver and vehicle need to be assigned',
-            });
-            eventCount++;
-          } catch (error) {
-            console.error('Failed to create airport departure event:', error);
-          }
-        }
-      }
-
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Created ${eventCount} schedule events for ${vips.length} VIPs`);
-    } catch (error: any) {
-      console.error('Failed to add test schedule:', error);
-      toast.error('Failed to add test schedule: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClearVIPs = async () => {
-    if (!confirm('⚠️ WARNING: This will PERMANENTLY DELETE ALL VIPs and their associated flights from the database. This cannot be undone. Continue?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const { data: vips } = await api.get('/vips');
-      let count = 0;
-      for (const vip of vips) {
-        try {
-          await api.delete(`/vips/${vip.id}?hard=true`);
-          count++;
-        } catch (error) {
-          console.error('Failed to delete VIP:', vip.id, error);
-        }
-      }
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Permanently deleted ${count} VIPs`);
-    } catch (error: any) {
-      console.error('Failed to clear VIPs:', error);
-      toast.error('Failed to clear VIPs: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClearDrivers = async () => {
-    if (!confirm('⚠️ WARNING: This will PERMANENTLY DELETE ALL Drivers from the database. This cannot be undone. Continue?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const { data: drivers } = await api.get('/drivers');
-      let count = 0;
-      for (const driver of drivers) {
-        try {
-          await api.delete(`/drivers/${driver.id}?hard=true`);
-          count++;
-        } catch (error) {
-          console.error('Failed to delete driver:', driver.id, error);
-        }
-      }
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Permanently deleted ${count} Drivers`);
-    } catch (error: any) {
-      console.error('Failed to clear drivers:', error);
-      toast.error('Failed to clear drivers: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClearVehicles = async () => {
-    if (!confirm('⚠️ WARNING: This will PERMANENTLY DELETE ALL Vehicles from the database. This cannot be undone. Continue?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const { data: vehicles } = await api.get('/vehicles');
-      let count = 0;
-      for (const vehicle of vehicles) {
-        try {
-          await api.delete(`/vehicles/${vehicle.id}?hard=true`);
-          count++;
-        } catch (error) {
-          console.error('Failed to delete vehicle:', vehicle.id, error);
-        }
-      }
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Permanently deleted ${count} Vehicles`);
-    } catch (error: any) {
-      console.error('Failed to clear vehicles:', error);
-      toast.error('Failed to clear vehicles: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClearEvents = async () => {
-    if (!confirm('⚠️ WARNING: This will PERMANENTLY DELETE ALL Events from the database. This cannot be undone. Continue?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const { data: events } = await api.get('/events');
-      let count = 0;
-      for (const event of events) {
-        try {
-          await api.delete(`/events/${event.id}?hard=true`);
-          count++;
-        } catch (error) {
-          console.error('Failed to delete event:', event.id, error);
-        }
-      }
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Permanently deleted ${count} Events`);
-    } catch (error: any) {
-      console.error('Failed to clear events:', error);
-      toast.error('Failed to clear events: ' + (error.message || 'Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClearFlights = async () => {
-    if (!confirm('⚠️ WARNING: This will DELETE ALL Flights. This cannot be undone. Continue?')) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const { data: flights } = await api.get('/flights');
-      let count = 0;
-      for (const flight of flights) {
-        try {
-          await api.delete(`/flights/${flight.id}`);
-          count++;
-        } catch (error) {
-          console.error('Failed to delete flight:', flight.id, error);
-        }
-      }
-      queryClient.invalidateQueries();
-      refetchStats();
-      toast.success(`Deleted ${count} Flights`);
-    } catch (error: any) {
-      console.error('Failed to clear flights:', error);
-      toast.error('Failed to clear flights: ' + (error.message || 'Unknown error'));
+      console.error('Failed to regenerate events:', error);
+      toast.error('Failed to regenerate: ' + (error.response?.data?.message || error.message));
     } finally {
       setIsLoading(false);
     }
   };
 
   const handleClearAllData = async () => {
-    if (!confirm('⚠️ DANGER: This will DELETE ALL data (VIPs, Drivers, Vehicles, Events, Flights). This cannot be undone. Are you absolutely sure?')) {
+    if (!confirm('⚠️ DANGER: This will DELETE ALL data (VIPs, Drivers, Vehicles, Events, Flights, Messages). This cannot be undone. Are you absolutely sure?')) {
       return;
     }
 
@@ -942,15 +167,187 @@ export function AdminTools() {
 
     setIsLoading(true);
     try {
-      await handleClearFlights();
-      await handleClearEvents();
-      await handleClearVehicles();
-      await handleClearDrivers();
-      await handleClearVIPs();
-      toast.success('All data cleared');
+      const { data } = await api.delete('/seed/clear');
+      if (data.success) {
+        queryClient.invalidateQueries();
+        refetchStats();
+        toast.success(`Cleared all data in ${data.elapsed}! Deleted ${data.deleted.vips} VIPs, ${data.deleted.drivers} drivers, ${data.deleted.vehicles} vehicles, ${data.deleted.events} events, ${data.deleted.flights} flights`);
+      }
     } catch (error: any) {
       console.error('Failed to clear all data:', error);
-      toast.error('Failed to clear all data: ' + (error.message || 'Unknown error'));
+      toast.error('Failed to clear: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Signal handlers
+  const handleGetQRCode = async () => {
+    setQrLoading(true);
+    try {
+      const { data } = await api.get('/signal/qrcode');
+      if (data.success && data.qrcode) {
+        setQrCodeData(data.qrcode);
+        setShowQRCode(true);
+      } else {
+        toast.error(data.message || 'Failed to get QR code');
+      }
+    } catch (error: any) {
+      console.error('Failed to get QR code:', error);
+      toast.error('Failed to get QR code: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setQrLoading(false);
+    }
+  };
+
+  const handleRegisterNumber = async () => {
+    if (!registerPhone) {
+      toast.error('Please enter a phone number');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data } = await api.post('/signal/register', { phoneNumber: registerPhone });
+      if (data.success) {
+        toast.success(data.message);
+        setShowRegister(false);
+        setShowVerify(true);
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error: any) {
+      console.error('Failed to register:', error);
+      toast.error('Failed to register: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleVerifyNumber = async () => {
+    if (!verifyCode) {
+      toast.error('Please enter the verification code');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data } = await api.post('/signal/verify', {
+        phoneNumber: registerPhone,
+        code: verifyCode,
+      });
+      if (data.success) {
+        toast.success(data.message);
+        setShowVerify(false);
+        setRegisterPhone('');
+        setVerifyCode('');
+        refetchSignal();
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error: any) {
+      console.error('Failed to verify:', error);
+      toast.error('Failed to verify: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleUnlinkAccount = async () => {
+    if (!signalStatus?.phoneNumber) return;
+
+    if (!confirm(`Are you sure you want to unlink ${signalStatus.phoneNumber}? You will need to re-link to send messages.`)) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data } = await api.delete(`/signal/unlink/${encodeURIComponent(signalStatus.phoneNumber)}`);
+      if (data.success) {
+        toast.success('Account unlinked successfully');
+        refetchSignal();
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error: any) {
+      console.error('Failed to unlink:', error);
+      toast.error('Failed to unlink: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSendTestMessage = async () => {
+    if (!testRecipient || !testMessage) {
+      toast.error('Please enter a recipient and message');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data } = await api.post('/signal/send', {
+        to: testRecipient,
+        message: testMessage,
+      });
+      if (data.success) {
+        toast.success('Message sent!');
+        setTestMessage('');
+      } else {
+        toast.error(data.error || 'Failed to send message');
+      }
+    } catch (error: any) {
+      console.error('Failed to send message:', error);
+      toast.error('Failed to send: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleExportChats = async () => {
+    try {
+      const response = await api.get('/signal/messages/export', {
+        responseType: 'blob',
+      });
+
+      // Create download link
+      const blob = new Blob([response.data], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `signal-chats-${new Date().toISOString().split('T')[0]}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      toast.success('Chat export downloaded');
+    } catch (error: any) {
+      console.error('Failed to export chats:', error);
+      toast.error('Failed to export: ' + (error.response?.data?.message || error.message));
+    }
+  };
+
+  const handleDeleteAllChats = async () => {
+    if (!confirm('Are you sure you want to delete ALL Signal chat messages? This cannot be undone.')) {
+      return;
+    }
+
+    if (!confirm('Final confirmation: Delete all chat history?')) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data } = await api.delete('/signal/messages/all');
+      if (data.success) {
+        toast.success(`Deleted ${data.deleted} messages`);
+        refetchMessageStats();
+        queryClient.invalidateQueries({ queryKey: ['signal-messages'] });
+        queryClient.invalidateQueries({ queryKey: ['signal-unread-counts'] });
+      }
+    } catch (error: any) {
+      console.error('Failed to delete chats:', error);
+      toast.error('Failed to delete: ' + (error.response?.data?.message || error.message));
     } finally {
       setIsLoading(false);
     }
@@ -958,17 +355,17 @@ export function AdminTools() {
 
   return (
     <div>
-      <h1 className="text-3xl font-bold text-gray-900 mb-2">Administrator Tools</h1>
-      <p className="text-gray-600 mb-8">Manage test data and database operations</p>
+      <h1 className="text-3xl font-bold text-foreground mb-2">Administrator Tools</h1>
+      <p className="text-muted-foreground mb-8">Manage test data and database operations</p>
 
       {/* Current Database Stats */}
-      <div className="bg-white shadow rounded-lg p-6 mb-8">
+      <div className="bg-card border border-border shadow-soft rounded-lg p-6 mb-8 transition-colors">
         <div className="flex items-center mb-4">
-          <Database className="h-5 w-5 text-gray-600 mr-2" />
-          <h2 className="text-lg font-medium text-gray-900">Current Database Statistics</h2>
+          <Database className="h-5 w-5 text-muted-foreground mr-2" />
+          <h2 className="text-lg font-medium text-foreground">Current Database Statistics</h2>
           <button
             onClick={() => refetchStats()}
-            className="ml-auto text-sm text-primary hover:text-primary/80"
+            className="ml-auto text-sm text-primary hover:text-primary/80 transition-colors"
           >
             <RefreshCw className="h-4 w-4 inline mr-1" />
             Refresh
@@ -976,175 +373,415 @@ export function AdminTools() {
         </div>
         <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
           <div className="text-center">
-            <div className="text-3xl font-bold text-blue-600">{stats?.vips || 0}</div>
-            <div className="text-sm text-gray-600">VIPs</div>
+            <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{stats?.vips || 0}</div>
+            <div className="text-sm text-muted-foreground">VIPs</div>
           </div>
           <div className="text-center">
-            <div className="text-3xl font-bold text-green-600">{stats?.drivers || 0}</div>
-            <div className="text-sm text-gray-600">Drivers</div>
+            <div className="text-3xl font-bold text-green-600 dark:text-green-400">{stats?.drivers || 0}</div>
+            <div className="text-sm text-muted-foreground">Drivers</div>
           </div>
           <div className="text-center">
-            <div className="text-3xl font-bold text-orange-600">{stats?.vehicles || 0}</div>
-            <div className="text-sm text-gray-600">Vehicles</div>
+            <div className="text-3xl font-bold text-orange-600 dark:text-orange-400">{stats?.vehicles || 0}</div>
+            <div className="text-sm text-muted-foreground">Vehicles</div>
           </div>
           <div className="text-center">
-            <div className="text-3xl font-bold text-purple-600">{stats?.events || 0}</div>
-            <div className="text-sm text-gray-600">Events</div>
+            <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">{stats?.events || 0}</div>
+            <div className="text-sm text-muted-foreground">Events</div>
           </div>
           <div className="text-center">
-            <div className="text-3xl font-bold text-indigo-600">{stats?.flights || 0}</div>
-            <div className="text-sm text-gray-600">Flights</div>
+            <div className="text-3xl font-bold text-indigo-600 dark:text-indigo-400">{stats?.flights || 0}</div>
+            <div className="text-sm text-muted-foreground">Flights</div>
           </div>
           <div className="text-center">
-            <div className="text-3xl font-bold text-yellow-600">{stats?.users || 0}</div>
-            <div className="text-sm text-gray-600">Users</div>
+            <div className="text-3xl font-bold text-yellow-600 dark:text-yellow-400">{stats?.users || 0}</div>
+            <div className="text-sm text-muted-foreground">Users</div>
           </div>
         </div>
       </div>
 
+      {/* PDF Customization Settings */}
+      <PdfSettingsSection />
+
+      {/* Signal Messaging Configuration */}
+      <div className="bg-card border border-border shadow-soft rounded-lg p-6 mb-8 transition-colors">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center">
+            <MessageSquare className="h-5 w-5 text-blue-600 mr-2" />
+            <h2 className="text-lg font-medium text-foreground">Signal Messaging</h2>
+          </div>
+          <button
+            onClick={() => refetchSignal()}
+            className="text-sm text-primary hover:text-primary/80 transition-colors"
+          >
+            <RefreshCw className={`h-4 w-4 inline mr-1 ${signalLoading ? 'animate-spin' : ''}`} />
+            Refresh
+          </button>
+        </div>
+
+        {/* Connection Status */}
+        <div className="mb-6 p-4 border border-border rounded-lg bg-muted/30">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {signalLoading ? (
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              ) : signalStatus?.isConnected ? (
+                signalStatus?.isLinked ? (
+                  <CheckCircle className="h-5 w-5 text-green-600" />
+                ) : (
+                  <XCircle className="h-5 w-5 text-yellow-600" />
+                )
+              ) : (
+                <XCircle className="h-5 w-5 text-red-600" />
+              )}
+              <div>
+                <p className="font-medium text-foreground">
+                  {signalLoading
+                    ? 'Checking status...'
+                    : signalStatus?.isConnected
+                    ? signalStatus?.isLinked
+                      ? 'Connected & Linked'
+                      : 'API Connected - Not Linked'
+                    : 'Not Connected'}
+                </p>
+                {signalStatus?.phoneNumber && (
+                  <p className="text-sm text-muted-foreground flex items-center gap-1">
+                    <Phone className="h-3 w-3" />
+                    {signalStatus.phoneNumber}
+                  </p>
+                )}
+                {signalStatus?.error && (
+                  <p className="text-sm text-red-600">{signalStatus.error}</p>
+                )}
+              </div>
+            </div>
+
+            {signalStatus?.isLinked && (
+              <button
+                onClick={handleUnlinkAccount}
+                disabled={isLoading}
+                className="inline-flex items-center px-3 py-2 border border-red-300 dark:border-red-700 text-sm font-medium rounded-md text-red-700 dark:text-red-400 bg-background hover:bg-red-50 dark:hover:bg-red-950/20 disabled:opacity-50 transition-colors"
+              >
+                <Unlink className="h-4 w-4 mr-1" />
+                Unlink
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Link Account Section */}
+        {signalStatus?.isConnected && !signalStatus?.isLinked && (
+          <div className="mb-6 space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Link your Signal account to send messages to drivers. You can either scan a QR code with your phone or register a phone number.
+            </p>
+
+            <div className="flex gap-3">
+              <button
+                onClick={handleGetQRCode}
+                disabled={qrLoading || isLoading}
+                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              >
+                {qrLoading ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <QrCode className="h-4 w-4 mr-2" />
+                )}
+                Link via QR Code
+              </button>
+
+              <button
+                onClick={() => setShowRegister(true)}
+                disabled={isLoading}
+                className="inline-flex items-center px-4 py-2 border border-input text-foreground rounded-md hover:bg-accent disabled:opacity-50 transition-colors"
+              >
+                <Phone className="h-4 w-4 mr-2" />
+                Register Phone Number
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* QR Code Display */}
+        {showQRCode && qrCodeData && (
+          <div className="mb-6 p-4 border border-border rounded-lg bg-white dark:bg-gray-900 text-center">
+            <h3 className="font-medium text-foreground mb-3">Scan with Signal App</h3>
+            <div className="inline-block p-4 bg-white rounded-lg">
+              <img
+                src={`data:image/png;base64,${qrCodeData}`}
+                alt="Signal QR Code"
+                className="w-64 h-64"
+              />
+            </div>
+            <p className="text-sm text-muted-foreground mt-3">
+              Open Signal on your phone → Settings → Linked Devices → Link New Device
+            </p>
+            <button
+              onClick={() => {
+                setShowQRCode(false);
+                setQrCodeData(null);
+                refetchSignal();
+              }}
+              className="mt-3 text-sm text-primary hover:underline"
+            >
+              Done / Close
+            </button>
+          </div>
+        )}
+
+        {/* Register Phone Number */}
+        {showRegister && (
+          <div className="mb-6 p-4 border border-border rounded-lg">
+            <h3 className="font-medium text-foreground mb-3">Register Phone Number</h3>
+            <div className="flex gap-3">
+              <input
+                type="tel"
+                value={registerPhone}
+                onChange={(e) => setRegisterPhone(e.target.value)}
+                placeholder="+1234567890"
+                className="flex-1 px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+              <button
+                onClick={handleRegisterNumber}
+                disabled={isLoading || !registerPhone}
+                className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 disabled:opacity-50"
+              >
+                {isLoading ? 'Sending...' : 'Send Code'}
+              </button>
+              <button
+                onClick={() => {
+                  setShowRegister(false);
+                  setRegisterPhone('');
+                }}
+                className="px-4 py-2 border border-input text-foreground rounded-md hover:bg-accent"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Verify Code */}
+        {showVerify && (
+          <div className="mb-6 p-4 border border-border rounded-lg">
+            <h3 className="font-medium text-foreground mb-3">Enter Verification Code</h3>
+            <p className="text-sm text-muted-foreground mb-3">
+              A verification code was sent to {registerPhone}
+            </p>
+            <div className="flex gap-3">
+              <input
+                type="text"
+                value={verifyCode}
+                onChange={(e) => setVerifyCode(e.target.value)}
+                placeholder="123456"
+                className="flex-1 px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+              <button
+                onClick={handleVerifyNumber}
+                disabled={isLoading || !verifyCode}
+                className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 disabled:opacity-50"
+              >
+                {isLoading ? 'Verifying...' : 'Verify'}
+              </button>
+              <button
+                onClick={() => {
+                  setShowVerify(false);
+                  setVerifyCode('');
+                }}
+                className="px-4 py-2 border border-input text-foreground rounded-md hover:bg-accent"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Test Message (when linked) */}
+        {signalStatus?.isLinked && (
+          <div className="p-4 border border-border rounded-lg">
+            <h3 className="font-medium text-foreground mb-3">Send Test Message</h3>
+            <div className="space-y-3">
+              <input
+                type="tel"
+                value={testRecipient}
+                onChange={(e) => setTestRecipient(e.target.value)}
+                placeholder="Recipient phone number (+1234567890)"
+                className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+              <textarea
+                value={testMessage}
+                onChange={(e) => setTestMessage(e.target.value)}
+                placeholder="Test message..."
+                rows={2}
+                className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+              <button
+                onClick={handleSendTestMessage}
+                disabled={isLoading || !testRecipient || !testMessage}
+                className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 transition-colors"
+              >
+                <Send className="h-4 w-4 mr-2" />
+                {isLoading ? 'Sending...' : 'Send Test Message'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Chat Management (when linked) */}
+        {signalStatus?.isLinked && (
+          <div className="mt-6 p-4 border border-border rounded-lg">
+            <h3 className="font-medium text-foreground mb-3">Chat History Management</h3>
+
+            {/* Stats */}
+            {messageStats && (
+              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4 p-3 bg-muted/30 rounded-lg">
+                <div className="text-center">
+                  <div className="text-xl font-bold text-foreground">{messageStats.total}</div>
+                  <div className="text-xs text-muted-foreground">Total Messages</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-blue-600">{messageStats.inbound}</div>
+                  <div className="text-xs text-muted-foreground">Received</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-green-600">{messageStats.outbound}</div>
+                  <div className="text-xs text-muted-foreground">Sent</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-orange-600">{messageStats.unread}</div>
+                  <div className="text-xs text-muted-foreground">Unread</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-purple-600">{messageStats.driversWithMessages}</div>
+                  <div className="text-xs text-muted-foreground">Drivers</div>
+                </div>
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <button
+                onClick={handleExportChats}
+                disabled={isLoading || !messageStats?.total}
+                className="inline-flex items-center px-4 py-2 border border-input text-foreground rounded-md hover:bg-accent disabled:opacity-50 transition-colors"
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Export Chats
+              </button>
+              <button
+                onClick={handleDeleteAllChats}
+                disabled={isLoading || !messageStats?.total}
+                className="inline-flex items-center px-4 py-2 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-950/20 disabled:opacity-50 transition-colors"
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete All Chats
+              </button>
+              <button
+                onClick={() => refetchMessageStats()}
+                className="inline-flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <RefreshCw className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Not Connected Message */}
+        {!signalStatus?.isConnected && !signalLoading && (
+          <div className="p-4 border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-950/20 rounded-lg">
+            <p className="text-yellow-800 dark:text-yellow-200">
+              <AlertTriangle className="h-4 w-4 inline mr-2" />
+              Signal API is not running. Start the signal-api container:
+            </p>
+            <code className="block mt-2 p-2 bg-background rounded text-sm">
+              docker-compose up -d signal-api
+            </code>
+          </div>
+        )}
+      </div>
+
       {/* Test Data & Clear Operations */}
-      <div className="bg-white shadow rounded-lg p-6">
+      <div className="bg-card border border-border shadow-soft rounded-lg p-6 transition-colors">
         <div className="flex items-center mb-4">
           <AlertTriangle className="h-5 w-5 text-orange-600 mr-2" />
-          <h2 className="text-lg font-medium text-gray-900">Test Data Management</h2>
+          <h2 className="text-lg font-medium text-foreground">Test Data Management</h2>
         </div>
-        <p className="text-gray-600 mb-4">
-          Add test data for development/demos or clear existing data. Use with caution.
+        <p className="text-muted-foreground mb-6">
+          Generate realistic test data for development and demos. All operations use fast bulk database queries.
         </p>
-        <div className="space-y-3">
-          {/* VIPs */}
-          <div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-            <div className="flex-1">
-              <h3 className="font-medium text-gray-900">VIPs</h3>
-              <p className="text-sm text-gray-600">20 diverse VIPs from various organizations</p>
-            </div>
-            <div className="flex gap-2">
+
+        <div className="space-y-4">
+          {/* Quick Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Generate All Data */}
+            <div className="p-4 border-2 border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-950/20 rounded-lg transition-colors">
+              <h3 className="font-medium text-green-900 dark:text-green-200 mb-2">Generate Complete Test Data</h3>
+              <p className="text-sm text-green-700 dark:text-green-300 mb-3">
+                Creates 20 VIPs, 8 drivers, 10 vehicles, flights, and 100+ events with times relative to NOW.
+                Includes in-progress events, urgent pickups, and completed activities.
+              </p>
               <button
-                onClick={handleAddTestVIPs}
+                onClick={handleGenerateAllData}
                 disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 disabled:opacity-50 transition-colors w-full justify-center"
               >
-                <Plus className="h-4 w-4 mr-1" />
-                Add Test VIPs
+                {isLoading ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <Plus className="h-4 w-4 mr-2" />
+                )}
+                Generate All Data (Fast!)
               </button>
+            </div>
+
+            {/* Regenerate Events Only */}
+            <div className="p-4 border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-950/20 rounded-lg transition-colors">
+              <h3 className="font-medium text-blue-900 dark:text-blue-200 mb-2">Refresh Event Times</h3>
+              <p className="text-sm text-blue-700 dark:text-blue-300 mb-3">
+                Keeps existing VIPs, drivers, and vehicles but regenerates all events with fresh times
+                relative to NOW. Great for testing the Command Center.
+              </p>
               <button
-                onClick={handleClearVIPs}
+                onClick={handleRegenerateEvents}
                 disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 transition-colors w-full justify-center"
               >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Clear All
+                {isLoading ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                )}
+                Regenerate Events (Fast!)
               </button>
             </div>
           </div>
 
-          {/* Drivers */}
-          <div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-            <div className="flex-1">
-              <h3 className="font-medium text-gray-900">Drivers</h3>
-              <p className="text-sm text-gray-600">8 drivers with diverse names</p>
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleAddTestDrivers}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50"
-              >
-                <Plus className="h-4 w-4 mr-1" />
-                Add Test Drivers
-              </button>
-              <button
-                onClick={handleClearDrivers}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
-              >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Clear All
-              </button>
-            </div>
+          {/* Info box about generated data */}
+          <div className="p-3 bg-muted/30 border border-border rounded-lg text-sm text-muted-foreground">
+            <strong className="text-foreground">Generated events include:</strong>
+            <ul className="mt-1 ml-4 list-disc space-y-0.5">
+              <li><span className="text-yellow-600 dark:text-yellow-400 font-medium">IN_PROGRESS</span> - Active pickups and meetings happening now</li>
+              <li><span className="text-red-600 dark:text-red-400 font-medium">URGENT</span> - Events starting in 5-15 minutes</li>
+              <li><span className="text-blue-600 dark:text-blue-400 font-medium">SCHEDULED</span> - Upcoming events throughout the day</li>
+              <li><span className="text-green-600 dark:text-green-400 font-medium">COMPLETED</span> - Recently finished events</li>
+              <li><span className="text-purple-600 dark:text-purple-400 font-medium">Multi-VIP</span> - Group transport events</li>
+            </ul>
           </div>
 
-          {/* Vehicles */}
-          <div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-            <div className="flex-1">
-              <h3 className="font-medium text-gray-900">Vehicles</h3>
-              <p className="text-sm text-gray-600">8 diverse vehicles (vans, SUVs, golf carts, bus)</p>
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleAddTestVehicles}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50"
-              >
-                <Plus className="h-4 w-4 mr-1" />
-                Add Test Vehicles
-              </button>
-              <button
-                onClick={handleClearVehicles}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
-              >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Clear All
-              </button>
-            </div>
-          </div>
-
-          {/* Activities */}
-          <div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-            <div className="flex-1">
-              <h3 className="font-medium text-gray-900">Activities</h3>
-              <p className="text-sm text-gray-600">Complete 3-day Jamboree itinerary for all VIPs (15 activities each)</p>
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleAddTestSchedule}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50"
-              >
-                <Plus className="h-4 w-4 mr-1" />
-                Add Test Activities
-              </button>
-              <button
-                onClick={handleClearEvents}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
-              >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Clear All
-              </button>
-            </div>
-          </div>
-
-          {/* Flights */}
-          <div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-            <div className="flex-1">
-              <h3 className="font-medium text-gray-900">Flights</h3>
-              <p className="text-sm text-gray-600">Clear all flight tracking records</p>
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleClearFlights}
-                disabled={isLoading}
-                className="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
-              >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Clear All
-              </button>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between p-3 border-2 border-red-400 bg-red-50 rounded-lg">
+          {/* Danger Zone */}
+          <div className="flex items-center justify-between p-4 border-2 border-red-400 dark:border-red-700 bg-red-50 dark:bg-red-950/20 rounded-lg transition-colors">
             <div>
-              <h3 className="font-medium text-red-900">Clear All Data</h3>
-              <p className="text-sm text-red-700">Delete EVERYTHING (VIPs, Drivers, Vehicles, Events, Flights)</p>
+              <h3 className="font-medium text-red-900 dark:text-red-200">Clear All Data</h3>
+              <p className="text-sm text-red-700 dark:text-red-300">Instantly delete all VIPs, drivers, vehicles, events, flights, and messages</p>
             </div>
             <button
               onClick={handleClearAllData}
               disabled={isLoading}
-              className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 transition-colors"
             >
-              <Trash2 className="h-4 w-4 mr-1" />
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
+              )}
               Clear All Data
             </button>
           </div>
diff --git a/frontend/src/pages/CommandCenter.tsx b/frontend/src/pages/CommandCenter.tsx
index 49725d9..f3eae70 100644
--- a/frontend/src/pages/CommandCenter.tsx
+++ b/frontend/src/pages/CommandCenter.tsx
@@ -10,8 +10,18 @@ import {
   CheckCircle,
   Plane,
   Radio,
+  Bell,
+  AlertCircle,
+  ArrowRight,
+  ChevronRight,
+  Activity,
+  Calendar,
 } from 'lucide-react';
-import { useEffect } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { DriverChatBubble } from '@/components/DriverChatBubble';
+import { DriverChatModal } from '@/components/DriverChatModal';
+import { useUnreadCounts, useDriverResponseCheck } from '@/hooks/useSignalMessages';
 
 interface Event {
   id: string;
@@ -27,7 +37,7 @@ interface Event {
   vip: {
     id: string;
     name: string;
-  };
+  } | null;
   driver: {
     id: string;
     name: string;
@@ -64,7 +74,53 @@ interface VIP {
   }>;
 }
 
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+}
+
+const SCROLL_SPEED = 60; // pixels per second (must be >= 60 for 60fps to register 1px per frame)
+const SCROLL_PAUSE_AT_END = 2000; // pause 2 seconds at top/bottom
+const USER_INTERACTION_PAUSE = 20000; // pause 20 seconds after user interaction
+
 export function CommandCenter() {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [lastRefresh, setLastRefresh] = useState(new Date());
+  const [chatDriver, setChatDriver] = useState<Driver | null>(null);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+
+  // Refs for smooth auto-scrolling
+  const activeScrollRef = useRef<HTMLDivElement>(null);
+  const upcomingScrollRef = useRef<HTMLDivElement>(null);
+  const arrivalsScrollRef = useRef<HTMLDivElement>(null);
+  const availableScrollRef = useRef<HTMLDivElement>(null);
+
+  // Track user interaction to pause auto-scroll
+  const lastInteractionRef = useRef<number>(0);
+  // Track scroll directions (persists across renders)
+  const scrollDirectionsRef = useRef<number[]>([1, 1, 1, 1]);
+
+  const handleUserInteraction = () => {
+    lastInteractionRef.current = Date.now();
+  };
+
+  const { data: unreadCounts } = useUnreadCounts();
+
+  const openChat = (driver: { id: string; name: string; phone?: string }) => {
+    // Find full driver info including phone
+    const fullDriver = drivers?.find(d => d.id === driver.id);
+    if (fullDriver) {
+      setChatDriver(fullDriver);
+      setIsChatOpen(true);
+    }
+  };
+
+  const closeChat = () => {
+    setIsChatOpen(false);
+    setChatDriver(null);
+  };
+
   const { data: events, refetch: refetchEvents } = useQuery<Event[]>({
     queryKey: ['events'],
     queryFn: async () => {
@@ -89,38 +145,141 @@ export function CommandCenter() {
     },
   });
 
-  // Auto-refresh every 30 seconds
+  const { data: drivers } = useQuery<Driver[]>({
+    queryKey: ['drivers'],
+    queryFn: async () => {
+      const { data } = await api.get('/drivers');
+      return data;
+    },
+  });
+
+  // Update clock every second
+  useEffect(() => {
+    const clockInterval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(clockInterval);
+  }, []);
+
+  // Auto-refresh data every 30 seconds
   useEffect(() => {
     const interval = setInterval(() => {
       refetchEvents();
       refetchVehicles();
       refetchVips();
+      setLastRefresh(new Date());
     }, 30000);
 
     return () => clearInterval(interval);
   }, [refetchEvents, refetchVehicles, refetchVips]);
 
+  // Smooth auto-scrolling for Active, Upcoming, Arrivals, and Available sections
+  useEffect(() => {
+    const pauseTimers: (NodeJS.Timeout | null)[] = [null, null, null, null];
+    const directions = scrollDirectionsRef.current;
+
+    const animate = () => {
+      // Get current refs (they may change)
+      const scrollContainers = [
+        activeScrollRef.current,
+        upcomingScrollRef.current,
+        arrivalsScrollRef.current,
+        availableScrollRef.current,
+      ];
+
+      // Check if user has interacted recently
+      const timeSinceInteraction = Date.now() - lastInteractionRef.current;
+      if (timeSinceInteraction < USER_INTERACTION_PAUSE) {
+        return; // Pause scrolling while user is interacting
+      }
+
+      scrollContainers.forEach((container, index) => {
+        if (!container || pauseTimers[index]) return;
+
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const maxScroll = scrollHeight - clientHeight;
+
+        // Only scroll if there's content to scroll
+        if (maxScroll <= 0) return;
+
+        // Calculate new scroll position (ensure at least 1px movement)
+        const scrollAmount = Math.max(1, Math.round(SCROLL_SPEED / 60)); // 60fps, min 1px
+        const newScrollTop = scrollTop + (scrollAmount * directions[index]);
+
+        // Check if we've reached the bottom
+        if (directions[index] === 1 && newScrollTop >= maxScroll) {
+          container.scrollTop = maxScroll;
+          directions[index] = -1;
+          // Pause at bottom
+          pauseTimers[index] = setTimeout(() => {
+            pauseTimers[index] = null;
+          }, SCROLL_PAUSE_AT_END);
+        }
+        // Check if we've reached the top
+        else if (directions[index] === -1 && newScrollTop <= 0) {
+          container.scrollTop = 0;
+          directions[index] = 1;
+          // Pause at top
+          pauseTimers[index] = setTimeout(() => {
+            pauseTimers[index] = null;
+          }, SCROLL_PAUSE_AT_END);
+        }
+        else {
+          container.scrollTop = newScrollTop;
+        }
+      });
+    };
+
+    const intervalId = setInterval(animate, 1000 / 60); // 60fps
+
+    return () => {
+      clearInterval(intervalId);
+      pauseTimers.forEach(timer => timer && clearTimeout(timer));
+    };
+  }, []); // Run once on mount
+
   if (!events || !vehicles || !vips) {
     return <Loading message="Loading Command Center..." />;
   }
 
-  const now = new Date();
+  const now = currentTime;
+  const fifteenMinutes = new Date(now.getTime() + 15 * 60 * 1000);
+  const thirtyMinutes = new Date(now.getTime() + 30 * 60 * 1000);
   const twoHoursLater = new Date(now.getTime() + 2 * 60 * 60 * 1000);
   const fourHoursLater = new Date(now.getTime() + 4 * 60 * 60 * 1000);
 
-  // Active trips (next 2 hours)
-  const activeTrips = events
+  // En route trips (IN_PROGRESS)
+  const enRouteTrips = events.filter(
+    (event) => event.status === 'IN_PROGRESS' && event.type === 'TRANSPORT'
+  );
+
+  // Trips that SHOULD be active (past start time but still SCHEDULED)
+  // These are awaiting driver confirmation
+  const awaitingConfirmation = events.filter((event) => {
+    if (event.status !== 'SCHEDULED' || event.type !== 'TRANSPORT') return false;
+    const start = new Date(event.startTime);
+    return start <= now;
+  });
+
+  // Check which awaiting events have driver responses since the event started
+  const { data: respondedEventIds } = useDriverResponseCheck(awaitingConfirmation);
+
+  // Upcoming trips in next 2 hours
+  const upcomingTrips = events
     .filter((event) => {
       const start = new Date(event.startTime);
-      return start > now && start <= twoHoursLater && event.type === 'TRANSPORT';
+      return start > now && start <= twoHoursLater && event.type === 'TRANSPORT' && event.status === 'SCHEDULED';
     })
     .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
 
-  // En route trips (already started, not completed)
-  const enRouteTrips = events.filter(
-    (event) =>
-      event.status === 'IN_PROGRESS' && event.type === 'TRANSPORT'
-  );
+  // ALERTS: Events in next 2 hours without driver or vehicle
+  const unassignedEvents = upcomingTrips.filter((e) => !e.driver || !e.vehicle);
+
+  // ALERTS: Events starting in <15 min
+  const imminentEvents = upcomingTrips.filter((e) => {
+    const start = new Date(e.startTime);
+    return start <= fifteenMinutes;
+  });
 
   // Upcoming arrivals (next 4 hours)
   const upcomingArrivals = vips
@@ -129,7 +288,6 @@ export function CommandCenter() {
         const arrival = new Date(vip.expectedArrival);
         return arrival > now && arrival <= fourHoursLater;
       }
-      // Check flight arrivals
       return vip.flights.some((flight) => {
         if (flight.scheduledArrival) {
           const arrival = new Date(flight.scheduledArrival);
@@ -144,358 +302,636 @@ export function CommandCenter() {
       return new Date(aTime).getTime() - new Date(bTime).getTime();
     });
 
-  // Vehicle status
-  const availableVehicles = vehicles.filter((v) => v.status === 'AVAILABLE');
-  const inUseVehicles = vehicles.filter((v) => v.status === 'IN_USE');
+  // Vehicle status - calculate dynamically based on active events
+  // A vehicle is "in use" if it's assigned to an IN_PROGRESS event
+  const vehiclesInActiveEvents = new Set(
+    events
+      .filter((e) => e.status === 'IN_PROGRESS' && e.vehicle)
+      .map((e) => e.vehicle!.id)
+  );
+
+  // Also mark vehicles assigned to events starting within 15 minutes as "reserved"
+  const vehiclesReservedSoon = new Set(
+    events
+      .filter((e) => {
+        if (e.status !== 'SCHEDULED' || !e.vehicle) return false;
+        const start = new Date(e.startTime);
+        return start > now && start <= fifteenMinutes;
+      })
+      .map((e) => e.vehicle!.id)
+  );
+
+  const inUseVehicles = vehicles.filter(
+    (v) => vehiclesInActiveEvents.has(v.id) || v.status === 'IN_USE'
+  );
+
+  const reservedVehicles = vehicles.filter(
+    (v) => vehiclesReservedSoon.has(v.id) && !vehiclesInActiveEvents.has(v.id) && v.status !== 'IN_USE'
+  );
+
+  const availableVehicles = vehicles.filter(
+    (v) =>
+      v.status !== 'MAINTENANCE' &&
+      !vehiclesInActiveEvents.has(v.id) &&
+      !vehiclesReservedSoon.has(v.id) &&
+      v.status !== 'IN_USE'
+  );
+
+  // Calculate alerts
+  const alerts: Array<{ type: 'critical' | 'warning' | 'info'; message: string; link?: string }> = [];
+
+  // Alert for trips awaiting confirmation (overdue)
+  awaitingConfirmation.forEach((event) => {
+    const minutesLate = Math.floor((now.getTime() - new Date(event.startTime).getTime()) / 60000);
+    if (minutesLate >= 5) {
+      alerts.push({
+        type: 'critical',
+        message: `${event.vip?.name || 'Unknown VIP'}: Trip ${minutesLate}min overdue - awaiting driver confirmation`,
+        link: `/events`,
+      });
+    }
+  });
+
+  unassignedEvents.forEach((event) => {
+    if (!event.driver && !event.vehicle) {
+      alerts.push({
+        type: 'critical',
+        message: `${event.vip?.name || 'Unknown VIP'}: No driver or vehicle assigned (${getTimeUntil(event.startTime)})`,
+        link: `/events`,
+      });
+    } else if (!event.driver) {
+      alerts.push({
+        type: 'critical',
+        message: `${event.vip?.name || 'Unknown VIP'}: No driver assigned (${getTimeUntil(event.startTime)})`,
+        link: `/events`,
+      });
+    } else if (!event.vehicle) {
+      alerts.push({
+        type: 'warning',
+        message: `${event.vip?.name || 'Unknown VIP'}: No vehicle assigned (${getTimeUntil(event.startTime)})`,
+        link: `/events`,
+      });
+    }
+  });
+
+  if (availableVehicles.length === 0 && upcomingTrips.length > 0) {
+    alerts.push({
+      type: 'warning',
+      message: 'No vehicles available - all vehicles in use',
+      link: `/vehicles`,
+    });
+  }
 
   // Get time until event
-  const getTimeUntil = (dateStr: string) => {
+  function getTimeUntil(dateStr: string) {
     const eventTime = new Date(dateStr);
     const diff = eventTime.getTime() - now.getTime();
     const minutes = Math.floor(diff / 60000);
 
     if (minutes < 0) return 'NOW';
-    if (minutes < 60) return `${minutes} min`;
+    if (minutes < 60) return `${minutes}m`;
     const hours = Math.floor(minutes / 60);
     const remainingMin = minutes % 60;
     return `${hours}h ${remainingMin}m`;
-  };
+  }
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'SCHEDULED':
-        return 'bg-blue-100 text-blue-800';
-      case 'IN_PROGRESS':
-        return 'bg-green-100 text-green-800';
-      case 'COMPLETED':
-        return 'bg-gray-100 text-gray-800';
-      case 'CANCELLED':
-        return 'bg-red-100 text-red-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
+  function getUrgencyClass(startTime: string) {
+    const start = new Date(startTime);
+    const diff = start.getTime() - now.getTime();
+    const minutes = diff / 60000;
+
+    if (minutes <= 15) return 'border-l-red-500 bg-red-50 dark:bg-red-950/30';
+    if (minutes <= 30) return 'border-l-orange-500 bg-orange-50 dark:bg-orange-950/20';
+    if (minutes <= 60) return 'border-l-yellow-500 bg-yellow-50 dark:bg-yellow-950/20';
+    return 'border-l-blue-500';
+  }
+
+  function getTimeColor(startTime: string) {
+    const start = new Date(startTime);
+    const diff = start.getTime() - now.getTime();
+    const minutes = diff / 60000;
+
+    if (minutes <= 15) return 'text-red-600 dark:text-red-400';
+    if (minutes <= 30) return 'text-orange-600 dark:text-orange-400';
+    if (minutes <= 60) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-blue-600 dark:text-blue-400';
+  }
+
+  const secondsSinceRefresh = Math.floor((now.getTime() - lastRefresh.getTime()) / 1000);
+
+  // System status
+  const hasAlerts = alerts.length > 0;
+  const hasCriticalAlerts = alerts.some((a) => a.type === 'critical');
+  const systemStatus = hasCriticalAlerts ? 'critical' : hasAlerts ? 'warning' : 'operational';
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-3xl font-bold text-gray-900">Command Center</h1>
-        <div className="flex items-center gap-2 text-sm text-gray-500">
-          <Radio className="h-4 w-4 animate-pulse text-green-500" />
-          Auto-refreshing every 30s
-        </div>
-      </div>
+    <div className="space-y-4">
+      {/* Header with Live Clock */}
+      <div className="bg-card border border-border rounded-lg shadow-soft p-4">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          {/* Title and Status */}
+          <div className="flex items-center gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+                <Activity className="h-6 w-6" />
+                Command Center
+              </h1>
+              <div className="flex items-center gap-2 mt-1">
+                <div className={`h-2 w-2 rounded-full ${
+                  systemStatus === 'operational' ? 'bg-green-500' :
+                  systemStatus === 'warning' ? 'bg-yellow-500 animate-pulse' :
+                  'bg-red-500 animate-pulse'
+                }`} />
+                <span className={`text-xs font-medium ${
+                  systemStatus === 'operational' ? 'text-green-600 dark:text-green-400' :
+                  systemStatus === 'warning' ? 'text-yellow-600 dark:text-yellow-400' :
+                  'text-red-600 dark:text-red-400'
+                }`}>
+                  {systemStatus === 'operational' ? 'All Systems Operational' :
+                   systemStatus === 'warning' ? 'Attention Required' :
+                   'Critical Issues'}
+                </span>
+              </div>
+            </div>
+          </div>
 
-      {/* Resource Status Summary */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-green-500">
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-sm text-gray-600">Vehicles Available</p>
-              <p className="text-2xl font-bold text-green-600">
-                {availableVehicles.length}/{vehicles.length}
-              </p>
+          {/* Live Clock */}
+          <div className="text-right">
+            <div className="text-4xl font-mono font-bold text-foreground tabular-nums">
+              {currentTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
             </div>
-            <Car className="h-8 w-8 text-green-500" />
-          </div>
-        </div>
-        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-sm text-gray-600">Vehicles In Use</p>
-              <p className="text-2xl font-bold text-blue-600">{inUseVehicles.length}</p>
+            <div className="text-sm text-muted-foreground">
+              {currentTime.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
             </div>
-            <Car className="h-8 w-8 text-blue-500" />
-          </div>
-        </div>
-        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500">
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-sm text-gray-600">Upcoming Trips</p>
-              <p className="text-2xl font-bold text-yellow-600">{activeTrips.length}</p>
+            <div className="flex items-center justify-end gap-1 text-xs text-muted-foreground mt-1">
+              <Radio className="h-3 w-3 text-green-500 animate-pulse" />
+              Updated {secondsSinceRefresh}s ago
             </div>
-            <Clock className="h-8 w-8 text-yellow-500" />
-          </div>
-        </div>
-        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-purple-500">
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-sm text-gray-600">VIP Arrivals</p>
-              <p className="text-2xl font-bold text-purple-600">{upcomingArrivals.length}</p>
-            </div>
-            <Plane className="h-8 w-8 text-purple-500" />
           </div>
         </div>
       </div>
 
-      {/* En Route Trips */}
-      {enRouteTrips.length > 0 && (
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <div className="bg-green-600 px-6 py-3 flex items-center">
-            <Car className="h-5 w-5 text-white mr-2" />
-            <h2 className="text-lg font-semibold text-white">
-              En Route Now ({enRouteTrips.length})
+      {/* Alerts Panel */}
+      {alerts.length > 0 && (
+        <div className={`rounded-lg border-2 p-4 ${
+          hasCriticalAlerts
+            ? 'bg-red-50 dark:bg-red-950/30 border-red-300 dark:border-red-800'
+            : 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-300 dark:border-yellow-800'
+        }`}>
+          <div className="flex items-center gap-2 mb-3">
+            <Bell className={`h-5 w-5 ${hasCriticalAlerts ? 'text-red-600' : 'text-yellow-600'}`} />
+            <h2 className={`font-semibold ${hasCriticalAlerts ? 'text-red-800 dark:text-red-200' : 'text-yellow-800 dark:text-yellow-200'}`}>
+              {alerts.length} Alert{alerts.length > 1 ? 's' : ''} Requiring Attention
             </h2>
           </div>
-          <div className="divide-y divide-gray-200">
-            {enRouteTrips.map((trip) => (
-              <div key={trip.id} className="p-6 hover:bg-gray-50">
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(trip.status)}`}>
-                        {trip.status}
-                      </span>
-                      <span className="text-sm font-medium text-gray-900">
-                        {trip.vip.name}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-4 text-sm text-gray-600">
-                      <div className="flex items-center gap-1">
-                        <MapPin className="h-4 w-4" />
-                        {trip.pickupLocation} → {trip.dropoffLocation}
-                      </div>
-                      {trip.driver && (
-                        <div className="flex items-center gap-1">
-                          <Users className="h-4 w-4" />
-                          Driver: {trip.driver.name}
-                        </div>
-                      )}
-                      {trip.vehicle && (
-                        <div className="flex items-center gap-1">
-                          <Car className="h-4 w-4" />
-                          {trip.vehicle.name}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <p className="text-sm text-gray-500">
-                      Started {new Date(trip.actualStartTime || trip.startTime).toLocaleTimeString()}
-                    </p>
-                    <p className="text-xs text-gray-400">
-                      ETA: {new Date(trip.endTime).toLocaleTimeString()}
-                    </p>
-                  </div>
+          <div className="space-y-2">
+            {alerts.slice(0, 5).map((alert, idx) => (
+              <div key={idx} className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                  {alert.type === 'critical' ? (
+                    <AlertCircle className="h-4 w-4 text-red-600 flex-shrink-0" />
+                  ) : (
+                    <AlertTriangle className="h-4 w-4 text-yellow-600 flex-shrink-0" />
+                  )}
+                  <span className={`text-sm ${
+                    alert.type === 'critical'
+                      ? 'text-red-800 dark:text-red-200'
+                      : 'text-yellow-800 dark:text-yellow-200'
+                  }`}>
+                    {alert.message}
+                  </span>
                 </div>
+                {alert.link && (
+                  <Link
+                    to={alert.link}
+                    className="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 flex items-center gap-1"
+                  >
+                    Fix <ChevronRight className="h-3 w-3" />
+                  </Link>
+                )}
               </div>
             ))}
+            {alerts.length > 5 && (
+              <p className="text-sm text-muted-foreground">+{alerts.length - 5} more alerts</p>
+            )}
           </div>
         </div>
       )}
 
-      {/* Active Trips - Next 2 Hours */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <div className="bg-blue-600 px-6 py-3 flex items-center">
-          <Clock className="h-5 w-5 text-white mr-2" />
-          <h2 className="text-lg font-semibold text-white">
-            Upcoming Trips - Next 2 Hours ({activeTrips.length})
-          </h2>
+      {/* Quick Stats Row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground uppercase tracking-wide">En Route</p>
+              <p className="text-3xl font-bold text-green-600 dark:text-green-400">{enRouteTrips.length}</p>
+            </div>
+            <div className="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
+              <Car className="h-5 w-5 text-green-600 dark:text-green-400" />
+            </div>
+          </div>
         </div>
-        {activeTrips.length === 0 ? (
-          <div className="p-6 text-center text-gray-500">
-            <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
-            <p>No scheduled trips in the next 2 hours</p>
+        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground uppercase tracking-wide">Upcoming (2h)</p>
+              <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">{upcomingTrips.length}</p>
+            </div>
+            <div className="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+              <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+            </div>
           </div>
-        ) : (
-          <div className="divide-y divide-gray-200">
-            {activeTrips.map((trip) => {
-              const timeUntil = getTimeUntil(trip.startTime);
-              const isUrgent = new Date(trip.startTime).getTime() - now.getTime() < 15 * 60 * 1000;
-
-              return (
-                <div
-                  key={trip.id}
-                  className={`p-6 hover:bg-gray-50 ${isUrgent ? 'bg-yellow-50' : ''}`}
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      {isUrgent && (
-                        <div className="flex items-center gap-1 mb-2">
-                          <AlertTriangle className="h-4 w-4 text-yellow-600" />
-                          <span className="text-xs font-medium text-yellow-600">URGENT</span>
-                        </div>
-                      )}
-                      <div className="flex items-center gap-2 mb-2">
-                        <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(trip.status)}`}>
-                          {trip.status}
-                        </span>
-                        <span className="text-sm font-medium text-gray-900">
-                          {trip.vip.name}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-4 text-sm text-gray-600">
-                        <div className="flex items-center gap-1">
-                          <MapPin className="h-4 w-4" />
-                          {trip.pickupLocation || trip.location} → {trip.dropoffLocation || 'Destination'}
-                        </div>
-                        {trip.driver && (
-                          <div className="flex items-center gap-1">
-                            <Users className="h-4 w-4" />
-                            Driver: {trip.driver.name}
-                          </div>
-                        )}
-                        {trip.vehicle && (
-                          <div className="flex items-center gap-1">
-                            <Car className="h-4 w-4" />
-                            {trip.vehicle.name} ({trip.vehicle.seatCapacity} seats)
-                          </div>
-                        )}
-                        {!trip.driver && (
-                          <span className="text-red-600 font-medium">⚠️ NO DRIVER ASSIGNED</span>
-                        )}
-                        {!trip.vehicle && (
-                          <span className="text-red-600 font-medium">⚠️ NO VEHICLE ASSIGNED</span>
-                        )}
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <p className="text-lg font-bold text-blue-600">
-                        in {timeUntil}
-                      </p>
-                      <p className="text-sm text-gray-500">
-                        Departs: {new Date(trip.startTime).toLocaleTimeString()}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
+        </div>
+        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground uppercase tracking-wide">Vehicles Free</p>
+              <p className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
+                {availableVehicles.length}<span className="text-lg text-muted-foreground">/{vehicles.filter(v => v.status !== 'MAINTENANCE').length}</span>
+              </p>
+              {inUseVehicles.length > 0 && (
+                <p className="text-xs text-blue-600 dark:text-blue-400">{inUseVehicles.length} in use</p>
+              )}
+            </div>
+            <div className="h-10 w-10 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+              <CheckCircle className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+            </div>
           </div>
-        )}
+        </div>
+        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground uppercase tracking-wide">VIP Arrivals</p>
+              <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">{upcomingArrivals.length}</p>
+            </div>
+            <div className="h-10 w-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
+              <Plane className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+            </div>
+          </div>
+        </div>
       </div>
 
-      {/* Upcoming VIP Arrivals */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <div className="bg-purple-600 px-6 py-3 flex items-center">
-          <Plane className="h-5 w-5 text-white mr-2" />
-          <h2 className="text-lg font-semibold text-white">
-            Incoming VIPs - Next 4 Hours ({upcomingArrivals.length})
-          </h2>
-        </div>
-        {upcomingArrivals.length === 0 ? (
-          <div className="p-6 text-center text-gray-500">
-            <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
-            <p>No VIP arrivals in the next 4 hours</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-200">
-            {upcomingArrivals.map((vip) => {
-              const arrival = vip.expectedArrival || vip.flights[0]?.scheduledArrival;
-              const flight = vip.flights[0];
+      {/* Active & Upcoming - Side by Side */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Active NOW - includes both en route and awaiting confirmation */}
+        {(() => {
+          const allActiveTrips = [...awaitingConfirmation, ...enRouteTrips];
+          const awaitingIds = new Set(awaitingConfirmation.map(t => t.id));
 
-              return (
-                <div key={vip.id} className="p-6 hover:bg-gray-50">
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-2">
-                        {vip.arrivalMode === 'FLIGHT' ? (
-                          <Plane className="h-4 w-4 text-purple-600" />
-                        ) : (
-                          <Car className="h-4 w-4 text-gray-600" />
-                        )}
-                        <span className="text-sm font-medium text-gray-900">{vip.name}</span>
-                        {vip.organization && (
-                          <span className="text-xs text-gray-500">({vip.organization})</span>
-                        )}
+          return (
+            <div className={`bg-card border-2 ${awaitingConfirmation.length > 0 ? 'border-orange-500' : 'border-green-500'} rounded-lg shadow-soft overflow-hidden`}>
+              <div className={`${awaitingConfirmation.length > 0 ? 'bg-orange-500' : 'bg-green-600'} px-4 py-2 flex items-center justify-between`}>
+                <div className="flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-white animate-pulse" />
+                  <h2 className="font-bold text-white">ACTIVE NOW</h2>
+                  {awaitingConfirmation.length > 0 && (
+                    <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
+                      {awaitingConfirmation.length} awaiting
+                    </span>
+                  )}
+                </div>
+                <span className="text-white/80 text-sm">{allActiveTrips.length} trips</span>
+              </div>
+              {allActiveTrips.length === 0 ? (
+                <div className="p-6 text-center text-muted-foreground">
+                  <Car className="h-10 w-10 mx-auto mb-2 opacity-30" />
+                  <p className="text-sm">No active transports</p>
+                </div>
+              ) : (
+                <div
+                  ref={activeScrollRef}
+                  onWheel={handleUserInteraction}
+                  onTouchMove={handleUserInteraction}
+                  className="divide-y divide-border max-h-[280px] overflow-y-auto scrollbar-hide"
+                >
+                  {allActiveTrips.map((trip) => {
+                    const isAwaiting = awaitingIds.has(trip.id);
+                    // Show glow only if awaiting AND driver hasn't responded since event started
+                    const showAwaitingGlow = isAwaiting && !respondedEventIds?.has(trip.id);
+                    return (
+                      <div
+                        key={trip.id}
+                        className="p-3 transition-colors hover:bg-accent/50"
+                      >
+                        <div className="flex items-center justify-between gap-3">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <span className="font-semibold text-foreground truncate text-sm">
+                                {trip.vip?.name || 'Unknown VIP'}
+                              </span>
+                              <span className="text-muted-foreground text-xs truncate max-w-[150px]">
+                                {trip.title}
+                              </span>
+                              <Link
+                                to="/events"
+                                state={{ editEventId: trip.id }}
+                                onClick={(e) => e.stopPropagation()}
+                                className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors"
+                                title="View/Edit Event"
+                              >
+                                <Calendar className="h-3.5 w-3.5" />
+                              </Link>
+                            </div>
+                            <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
+                              <MapPin className="h-3 w-3 flex-shrink-0" />
+                              <span className="truncate">{trip.pickupLocation}</span>
+                              <ArrowRight className="h-3 w-3 flex-shrink-0" />
+                              <span className="truncate">{trip.dropoffLocation}</span>
+                            </div>
+                            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                              {trip.driver && (
+                                <span className="flex items-center gap-1">
+                                  <Users className="h-3 w-3" />
+                                  {trip.driver.name}
+                                  <DriverChatBubble
+                                    unreadCount={unreadCounts?.[trip.driver.id] || 0}
+                                    awaitingResponse={showAwaitingGlow}
+                                    onClick={() => openChat(trip.driver!)}
+                                    className="ml-0.5"
+                                  />
+                                </span>
+                              )}
+                              {trip.vehicle && (
+                                <span className="flex items-center gap-1">
+                                  <Car className="h-3 w-3" /> {trip.vehicle.name}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                          <div className="text-right flex-shrink-0">
+                            <p className="text-xs text-muted-foreground">ETA</p>
+                            <p className="text-lg font-bold text-green-600 dark:text-green-400">
+                              {new Date(trip.endTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
+                            </p>
+                          </div>
+                        </div>
                       </div>
-                      {flight && (
-                        <div className="text-sm text-gray-600 mb-1">
-                          Flight {flight.flightNumber} → {flight.arrivalAirport}
-                          {flight.status && (
-                            <span className="ml-2 text-xs">
-                              Status: {flight.status}
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })()}
+
+        {/* Upcoming Trips */}
+        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+          <div className="bg-blue-600 px-4 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Clock className="h-5 w-5 text-white" />
+              <h2 className="font-bold text-white">UPCOMING</h2>
+            </div>
+            <span className="text-white/80 text-sm">{upcomingTrips.length} trips</span>
+          </div>
+          {upcomingTrips.length === 0 ? (
+            <div className="p-6 text-center text-muted-foreground">
+              <CheckCircle className="h-10 w-10 mx-auto mb-2 opacity-30" />
+              <p className="text-sm">No trips in next 2 hours</p>
+            </div>
+          ) : (
+            <div
+              ref={upcomingScrollRef}
+              onWheel={handleUserInteraction}
+              onTouchMove={handleUserInteraction}
+              className="divide-y divide-border max-h-[280px] overflow-y-auto scrollbar-hide"
+            >
+              {upcomingTrips.map((trip) => {
+                const timeColor = getTimeColor(trip.startTime);
+                const isImminent = new Date(trip.startTime) <= fifteenMinutes;
+
+                return (
+                  <div
+                    key={trip.id}
+                    className={`p-3 border-l-4 ${isImminent ? 'border-l-red-500 bg-red-50 dark:bg-red-950/20' : 'border-l-blue-500'} hover:bg-accent/30 transition-colors`}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          {isImminent && <AlertTriangle className="h-3 w-3 text-red-600 flex-shrink-0" />}
+                          <span className="font-semibold text-foreground truncate text-sm">
+                            {trip.vip?.name || 'Unknown VIP'}
+                          </span>
+                          <span className="text-muted-foreground text-xs truncate max-w-[150px]">
+                            {trip.title}
+                          </span>
+                          <Link
+                            to="/events"
+                            state={{ editEventId: trip.id }}
+                            onClick={(e) => e.stopPropagation()}
+                            className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors"
+                            title="View/Edit Event"
+                          >
+                            <Calendar className="h-3.5 w-3.5" />
+                          </Link>
+                        </div>
+                        <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
+                          <MapPin className="h-3 w-3 flex-shrink-0" />
+                          <span className="truncate">
+                            {trip.pickupLocation || trip.location} → {trip.dropoffLocation || 'TBD'}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-3 text-xs">
+                          {trip.driver ? (
+                            <span className="flex items-center gap-1 text-muted-foreground">
+                              <Users className="h-3 w-3" />
+                              {trip.driver.name}
+                              <DriverChatBubble
+                                unreadCount={unreadCounts?.[trip.driver.id] || 0}
+                                onClick={() => openChat(trip.driver!)}
+                                className="ml-0.5"
+                              />
+                            </span>
+                          ) : (
+                            <span className="flex items-center gap-1 text-red-600 font-medium">
+                              <AlertCircle className="h-3 w-3" /> No Driver
+                            </span>
+                          )}
+                          {trip.vehicle ? (
+                            <span className="flex items-center gap-1 text-muted-foreground">
+                              <Car className="h-3 w-3" /> {trip.vehicle.name}
+                            </span>
+                          ) : (
+                            <span className="flex items-center gap-1 text-red-600 font-medium">
+                              <AlertCircle className="h-3 w-3" /> No Vehicle
                             </span>
                           )}
                         </div>
-                      )}
-                      <div className="text-sm text-gray-600">
-                        Mode: {vip.arrivalMode.replace('_', ' ')}
+                      </div>
+                      <div className="text-right flex-shrink-0">
+                        <p className={`text-xl font-bold ${timeColor}`}>
+                          {getTimeUntil(trip.startTime)}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {new Date(trip.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
+                        </p>
                       </div>
                     </div>
-                    <div className="text-right">
-                      <p className="text-lg font-bold text-purple-600">
-                        in {getTimeUntil(arrival!)}
-                      </p>
-                      <p className="text-sm text-gray-500">
-                        {new Date(arrival!).toLocaleTimeString()}
-                      </p>
-                    </div>
                   </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Available Resources */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {/* Available Vehicles */}
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <div className="bg-gray-700 px-6 py-3 flex items-center">
-            <Car className="h-5 w-5 text-white mr-2" />
-            <h2 className="text-lg font-semibold text-white">
-              Available Vehicles ({availableVehicles.length})
-            </h2>
-          </div>
-          {availableVehicles.length === 0 ? (
-            <div className="p-6 text-center text-gray-500">
-              <AlertTriangle className="h-12 w-12 mx-auto mb-2 text-yellow-500" />
-              <p>No vehicles currently available</p>
+                );
+              })}
             </div>
-          ) : (
-            <ul className="divide-y divide-gray-200">
-              {availableVehicles.map((vehicle) => (
-                <li key={vehicle.id} className="px-6 py-3">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <p className="text-sm font-medium text-gray-900">{vehicle.name}</p>
-                      <p className="text-xs text-gray-500">
-                        {vehicle.type.replace('_', ' ')} - {vehicle.seatCapacity} seats
-                      </p>
-                    </div>
-                    <CheckCircle className="h-5 w-5 text-green-500" />
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-
-        {/* In-Use Vehicles */}
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <div className="bg-gray-700 px-6 py-3 flex items-center">
-            <Car className="h-5 w-5 text-white mr-2" />
-            <h2 className="text-lg font-semibold text-white">
-              In-Use Vehicles ({inUseVehicles.length})
-            </h2>
-          </div>
-          {inUseVehicles.length === 0 ? (
-            <div className="p-6 text-center text-gray-500">
-              <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
-              <p>No vehicles currently in use</p>
-            </div>
-          ) : (
-            <ul className="divide-y divide-gray-200">
-              {inUseVehicles.map((vehicle) => (
-                <li key={vehicle.id} className="px-6 py-3">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <p className="text-sm font-medium text-gray-900">{vehicle.name}</p>
-                      <p className="text-xs text-gray-500">
-                        {vehicle.type.replace('_', ' ')} - {vehicle.seatCapacity} seats
-                        {vehicle.currentDriver && ` - ${vehicle.currentDriver.name}`}
-                      </p>
-                    </div>
-                    <div className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
-                  </div>
-                </li>
-              ))}
-            </ul>
           )}
         </div>
       </div>
+
+      {/* Bottom Row: Resources */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* VIP Arrivals */}
+        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+          <div className="bg-purple-600 px-3 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Plane className="h-4 w-4 text-white" />
+              <h2 className="font-semibold text-white text-sm">Arrivals</h2>
+            </div>
+            <span className="text-white/80 text-xs">{upcomingArrivals.length}</span>
+          </div>
+          <div
+            ref={arrivalsScrollRef}
+            onWheel={handleUserInteraction}
+            onTouchMove={handleUserInteraction}
+            className="max-h-[140px] overflow-y-auto scrollbar-hide"
+          >
+            {upcomingArrivals.length === 0 ? (
+              <div className="p-4 text-center text-muted-foreground">
+                <p className="text-xs">No arrivals soon</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-border">
+                {upcomingArrivals.map((vip) => {
+                  const arrival = vip.expectedArrival || vip.flights[0]?.scheduledArrival;
+                  const flight = vip.flights[0];
+                  return (
+                    <div key={vip.id} className="px-3 py-2">
+                      <div className="flex items-center justify-between gap-2">
+                        <div className="min-w-0 flex-1">
+                          <p className="font-medium text-foreground text-xs truncate">{vip.name}</p>
+                          {flight && <p className="text-[10px] text-muted-foreground">{flight.flightNumber}</p>}
+                        </div>
+                        <p className="text-xs font-bold text-purple-600 dark:text-purple-400">{getTimeUntil(arrival!)}</p>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Vehicles Available */}
+        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+          <div className="bg-emerald-600 px-3 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Car className="h-4 w-4 text-white" />
+              <h2 className="font-semibold text-white text-sm">Available</h2>
+            </div>
+            <span className="text-white/80 text-xs">{availableVehicles.length}</span>
+          </div>
+          <div
+            ref={availableScrollRef}
+            onWheel={handleUserInteraction}
+            onTouchMove={handleUserInteraction}
+            className="max-h-[140px] overflow-y-auto scrollbar-hide"
+          >
+            {availableVehicles.length === 0 ? (
+              <div className="p-4 text-center">
+                <AlertTriangle className="h-6 w-6 mx-auto mb-1 text-yellow-500" />
+                <p className="text-xs text-muted-foreground">None available</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-border">
+                {availableVehicles.map((vehicle) => (
+                  <div key={vehicle.id} className="px-3 py-2 flex items-center justify-between">
+                    <div>
+                      <p className="text-xs font-medium text-foreground">{vehicle.name}</p>
+                      <p className="text-[10px] text-muted-foreground">{vehicle.seatCapacity} seats</p>
+                    </div>
+                    <CheckCircle className="h-3 w-3 text-emerald-500" />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Vehicles In Use */}
+        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+          <div className="bg-blue-600 px-3 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Car className="h-4 w-4 text-white" />
+              <h2 className="font-semibold text-white text-sm">In Use</h2>
+            </div>
+            <span className="text-white/80 text-xs">{inUseVehicles.length}</span>
+          </div>
+          <div className="max-h-[140px] overflow-y-auto scrollbar-hide">
+            {inUseVehicles.length === 0 ? (
+              <div className="p-4 text-center text-muted-foreground">
+                <p className="text-xs">All available</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-border">
+                {inUseVehicles.slice(0, 4).map((vehicle) => {
+                  const activeEvent = events.find((e) => e.status === 'IN_PROGRESS' && e.vehicle?.id === vehicle.id);
+                  return (
+                    <div key={vehicle.id} className="px-3 py-2">
+                      <div className="flex items-center justify-between">
+                        <p className="text-xs font-medium text-foreground">{vehicle.name}</p>
+                        <div className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
+                      </div>
+                      <p className="text-[10px] text-muted-foreground truncate">
+                        {activeEvent?.driver?.name || 'Driver'}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+          <div className="bg-gray-600 dark:bg-gray-700 px-3 py-2">
+            <h2 className="font-semibold text-white text-sm">Quick Actions</h2>
+          </div>
+          <div className="p-2 grid grid-cols-2 gap-2">
+            <Link
+              to="/events"
+              className="flex items-center justify-center gap-1 px-2 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs font-medium hover:bg-blue-200 dark:hover:bg-blue-900/50"
+            >
+              <Calendar className="h-3 w-3" />
+              Events
+            </Link>
+            <Link
+              to="/drivers"
+              className="flex items-center justify-center gap-1 px-2 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs font-medium hover:bg-purple-200 dark:hover:bg-purple-900/50"
+            >
+              <Users className="h-3 w-3" />
+              Drivers
+            </Link>
+            <Link
+              to="/vips"
+              className="flex items-center justify-center gap-1 px-2 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded text-xs font-medium hover:bg-emerald-200 dark:hover:bg-emerald-900/50"
+            >
+              <Users className="h-3 w-3" />
+              VIPs
+            </Link>
+            <Link
+              to="/vehicles"
+              className="flex items-center justify-center gap-1 px-2 py-2 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded text-xs font-medium hover:bg-orange-200 dark:hover:bg-orange-900/50"
+            >
+              <Car className="h-3 w-3" />
+              Vehicles
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Driver Chat Modal */}
+      <DriverChatModal
+        driver={chatDriver}
+        isOpen={isChatOpen}
+        onClose={closeChat}
+      />
     </div>
   );
 }
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 18cab91..ca9dcec 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -113,7 +113,7 @@ export function Dashboard() {
 
   return (
     <div>
-      <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 md:mb-8">Dashboard</h1>
+      <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-6 md:mb-8">Dashboard</h1>
 
       {/* Stats Grid */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6 md:mb-8">
@@ -122,7 +122,7 @@ export function Dashboard() {
           return (
             <div
               key={stat.name}
-              className="bg-white overflow-hidden shadow rounded-lg"
+              className="bg-card overflow-hidden shadow-soft rounded-lg border border-border transition-colors"
             >
               <div className="p-5">
                 <div className="flex items-center">
@@ -131,10 +131,10 @@ export function Dashboard() {
                   </div>
                   <div className="ml-5 w-0 flex-1">
                     <dl>
-                      <dt className="text-sm font-medium text-gray-500 truncate">
+                      <dt className="text-sm font-medium text-muted-foreground truncate">
                         {stat.name}
                       </dt>
-                      <dd className="text-3xl font-semibold text-gray-900">
+                      <dd className="text-3xl font-semibold text-foreground">
                         {stat.value}
                       </dd>
                     </dl>
@@ -147,40 +147,40 @@ export function Dashboard() {
       </div>
 
       {/* Recent VIPs */}
-      <div className="bg-white shadow rounded-lg p-6 mb-8">
-        <h2 className="text-lg font-medium text-gray-900 mb-4">Recent VIPs</h2>
+      <div className="bg-card shadow-medium rounded-lg p-6 mb-8 border border-border">
+        <h2 className="text-lg font-medium text-foreground mb-4">Recent VIPs</h2>
         {vips && vips.length > 0 ? (
           <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
+            <table className="min-w-full divide-y divide-border">
               <thead>
                 <tr>
-                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-muted/30 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                     Name
                   </th>
-                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-muted/30 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                     Organization
                   </th>
-                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-muted/30 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                     Arrival Mode
                   </th>
-                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-muted/30 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                     Events
                   </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
+              <tbody className="bg-card divide-y divide-border">
                 {vips.slice(0, 5).map((vip) => (
-                  <tr key={vip.id}>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  <tr key={vip.id} className="hover:bg-accent transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                       {vip.name}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {vip.organization || '-'}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {vip.arrivalMode}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {vip.events?.length || 0}
                     </td>
                   </tr>
@@ -189,15 +189,15 @@ export function Dashboard() {
             </table>
           </div>
         ) : (
-          <p className="text-sm text-gray-500 text-center py-4">
+          <p className="text-sm text-muted-foreground text-center py-4">
             No VIPs yet. Add your first VIP to get started.
           </p>
         )}
       </div>
 
       {/* Upcoming Flights */}
-      <div className="bg-white shadow rounded-lg p-6 mb-8">
-        <h2 className="text-lg font-medium text-gray-900 mb-4">
+      <div className="bg-card shadow-medium rounded-lg p-6 mb-8 border border-border">
+        <h2 className="text-lg font-medium text-foreground mb-4">
           Upcoming Flights
         </h2>
         {upcomingFlights.length > 0 ? (
@@ -205,25 +205,25 @@ export function Dashboard() {
             {upcomingFlights.map((flight) => (
               <div
                 key={flight.id}
-                className="border-l-4 border-indigo-500 pl-4 py-2"
+                className="border-l-4 border-indigo-500 pl-4 py-2 hover:bg-accent transition-colors rounded-r"
               >
                 <div className="flex justify-between items-start">
                   <div>
-                    <h3 className="text-sm font-medium text-gray-900 flex items-center gap-2">
+                    <h3 className="text-sm font-medium text-foreground flex items-center gap-2">
                       <Plane className="h-4 w-4" />
                       {flight.flightNumber}
                     </h3>
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-muted-foreground">
                       {flight.vip?.name} • {flight.departureAirport} → {flight.arrivalAirport}
                     </p>
                     {flight.scheduledDeparture && (
-                      <p className="text-xs text-gray-400 mt-1">
+                      <p className="text-xs text-muted-foreground mt-1">
                         Departs: {formatDateTime(flight.scheduledDeparture)}
                       </p>
                     )}
                   </div>
                   <div className="text-right">
-                    <span className="text-xs text-gray-500 block">
+                    <span className="text-xs text-muted-foreground block">
                       {new Date(flight.flightDate).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
@@ -231,12 +231,12 @@ export function Dashboard() {
                       })}
                     </span>
                     <span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
-                      flight.status?.toLowerCase() === 'scheduled' ? 'bg-blue-100 text-blue-800' :
-                      flight.status?.toLowerCase() === 'boarding' ? 'bg-yellow-100 text-yellow-800' :
-                      flight.status?.toLowerCase() === 'departed' ? 'bg-purple-100 text-purple-800' :
-                      flight.status?.toLowerCase() === 'landed' ? 'bg-green-100 text-green-800' :
-                      flight.status?.toLowerCase() === 'delayed' ? 'bg-orange-100 text-orange-800' :
-                      'bg-gray-100 text-gray-800'
+                      flight.status?.toLowerCase() === 'scheduled' ? 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300' :
+                      flight.status?.toLowerCase() === 'boarding' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-300' :
+                      flight.status?.toLowerCase() === 'departed' ? 'bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-300' :
+                      flight.status?.toLowerCase() === 'landed' ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-300' :
+                      flight.status?.toLowerCase() === 'delayed' ? 'bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-300' :
+                      'bg-muted text-muted-foreground'
                     }`}>
                       {flight.status || 'Unknown'}
                     </span>
@@ -246,15 +246,15 @@ export function Dashboard() {
             ))}
           </div>
         ) : (
-          <p className="text-sm text-gray-500 text-center py-4">
+          <p className="text-sm text-muted-foreground text-center py-4">
             No upcoming flights tracked.
           </p>
         )}
       </div>
 
       {/* Upcoming Events */}
-      <div className="bg-white shadow rounded-lg p-6">
-        <h2 className="text-lg font-medium text-gray-900 mb-4">
+      <div className="bg-card shadow-medium rounded-lg p-6 border border-border">
+        <h2 className="text-lg font-medium text-foreground mb-4">
           Upcoming Events
         </h2>
         {upcomingEvents.length > 0 ? (
@@ -262,31 +262,31 @@ export function Dashboard() {
             {upcomingEvents.map((event) => (
               <div
                 key={event.id}
-                className="border-l-4 border-primary pl-4 py-2"
+                className="border-l-4 border-primary pl-4 py-2 hover:bg-accent transition-colors rounded-r"
               >
                 <div className="flex justify-between items-start">
                   <div>
-                    <h3 className="text-sm font-medium text-gray-900">
+                    <h3 className="text-sm font-medium text-foreground">
                       {event.title}
                     </h3>
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-muted-foreground">
                       {event.vips && event.vips.length > 0
                         ? event.vips.map(vip => vip.name).join(', ')
                         : 'No VIPs assigned'} • {event.driver?.name || 'No driver assigned'}
                     </p>
                     {event.location && (
-                      <p className="text-xs text-gray-400 mt-1">{event.location}</p>
+                      <p className="text-xs text-muted-foreground mt-1">{event.location}</p>
                     )}
                   </div>
                   <div className="text-right">
-                    <span className="text-xs text-gray-500 block">
+                    <span className="text-xs text-muted-foreground block">
                       {formatDateTime(event.startTime)}
                     </span>
                     <span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
-                      event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800' :
-                      event.type === 'MEETING' ? 'bg-purple-100 text-purple-800' :
-                      event.type === 'MEAL' ? 'bg-green-100 text-green-800' :
-                      'bg-gray-100 text-gray-800'
+                      event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300' :
+                      event.type === 'MEETING' ? 'bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-300' :
+                      event.type === 'MEAL' ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-300' :
+                      'bg-muted text-muted-foreground'
                     }`}>
                       {event.type}
                     </span>
@@ -296,7 +296,7 @@ export function Dashboard() {
             ))}
           </div>
         ) : (
-          <p className="text-sm text-gray-500 text-center py-4">
+          <p className="text-sm text-muted-foreground text-center py-4">
             No upcoming events scheduled.
           </p>
         )}
diff --git a/frontend/src/pages/DriverList.tsx b/frontend/src/pages/DriverList.tsx
index cbabea9..525464f 100644
--- a/frontend/src/pages/DriverList.tsx
+++ b/frontend/src/pages/DriverList.tsx
@@ -3,12 +3,16 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 import { api } from '@/lib/api';
 import { Driver } from '@/types';
-import { Plus, Edit, Trash2, Search, X, Filter, ArrowUpDown } from 'lucide-react';
+import { Plus, Edit, Trash2, Search, X, Filter, ArrowUpDown, Send, Eye } from 'lucide-react';
 import { DriverForm, DriverFormData } from '@/components/DriverForm';
 import { TableSkeleton, CardSkeleton } from '@/components/Skeleton';
 import { FilterModal } from '@/components/FilterModal';
 import { FilterChip } from '@/components/FilterChip';
 import { useDebounce } from '@/hooks/useDebounce';
+import { DriverChatBubble } from '@/components/DriverChatBubble';
+import { DriverChatModal } from '@/components/DriverChatModal';
+import { DriverScheduleModal } from '@/components/DriverScheduleModal';
+import { useUnreadCounts } from '@/hooks/useSignalMessages';
 
 export function DriverList() {
   const queryClient = useQueryClient();
@@ -21,6 +25,12 @@ export function DriverList() {
   const [selectedDepartments, setSelectedDepartments] = useState<string[]>([]);
   const [filterModalOpen, setFilterModalOpen] = useState(false);
 
+  // Chat state
+  const [chatDriver, setChatDriver] = useState<Driver | null>(null);
+
+  // Schedule modal state
+  const [scheduleDriver, setScheduleDriver] = useState<Driver | null>(null);
+
   // Sort state
   const [sortColumn, setSortColumn] = useState<'name' | 'phone' | 'department'>('name');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
@@ -28,6 +38,9 @@ export function DriverList() {
   // Debounce search term
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
+  // Fetch unread message counts
+  const { data: unreadCounts } = useUnreadCounts();
+
   const { data: drivers, isLoading } = useQuery<Driver[]>({
     queryKey: ['drivers'],
     queryFn: async () => {
@@ -85,6 +98,28 @@ export function DriverList() {
     },
   });
 
+  const sendScheduleMutation = useMutation({
+    mutationFn: async ({ id, date }: { id: string; date?: string }) => {
+      const { data } = await api.post(`/drivers/${id}/send-schedule`, { date, format: 'both' });
+      return data;
+    },
+    onSuccess: (data) => {
+      toast.success(data.message || 'Schedule sent successfully');
+    },
+    onError: (error: any) => {
+      console.error('[DRIVER] Failed to send schedule:', error);
+      toast.error(error.response?.data?.message || 'Failed to send schedule');
+    },
+  });
+
+  const handleSendSchedule = (driver: Driver) => {
+    if (!driver.phone) {
+      toast.error('Driver does not have a phone number');
+      return;
+    }
+    sendScheduleMutation.mutate({ id: driver.id });
+  };
+
   // Helper to extract last name from full name
   const getLastName = (fullName: string): string => {
     const parts = fullName.trim().split(/\s+/);
@@ -200,7 +235,7 @@ export function DriverList() {
     return (
       <div>
         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
-          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Drivers</h1>
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground">Drivers</h1>
           <button
             disabled
             className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
@@ -223,10 +258,10 @@ export function DriverList() {
   return (
     <div>
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
-        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Drivers</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold text-foreground">Drivers</h1>
         <button
           onClick={handleAdd}
-          className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+          className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors"
           style={{ minHeight: '44px' }}
         >
           <Plus className="h-5 w-5 mr-2" />
@@ -235,17 +270,17 @@ export function DriverList() {
       </div>
 
       {/* Search and Filter Section */}
-      <div className="bg-white shadow rounded-lg p-4 mb-6">
+      <div className="bg-card border border-border shadow-soft rounded-lg p-4 mb-6">
         <div className="flex gap-3">
           {/* Search */}
           <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
             <input
               type="text"
               placeholder="Search by name or phone..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
+              className="w-full pl-10 pr-4 py-2.5 border border-input rounded-md focus:ring-primary focus:border-primary text-base bg-background text-foreground transition-colors"
               style={{ minHeight: '44px' }}
             />
           </div>
@@ -253,7 +288,7 @@ export function DriverList() {
           {/* Filter Button */}
           <button
             onClick={() => setFilterModalOpen(true)}
-            className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
+            className="inline-flex items-center px-4 py-2 border border-input rounded-md text-foreground bg-card hover:bg-accent hover:text-accent-foreground font-medium transition-colors"
             style={{ minHeight: '44px' }}
           >
             <Filter className="h-5 w-5 mr-2" />
@@ -268,8 +303,8 @@ export function DriverList() {
 
         {/* Active Filter Chips */}
         {selectedDepartments.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
-            <span className="text-sm text-gray-600 py-1.5">Active filters:</span>
+          <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-border">
+            <span className="text-sm text-muted-foreground py-1.5">Active filters:</span>
             {selectedDepartments.map((dept) => (
               <FilterChip
                 key={dept}
@@ -281,15 +316,15 @@ export function DriverList() {
         )}
 
         {/* Results count */}
-        <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
-          <div className="text-sm text-gray-600">
-            Showing <span className="font-medium">{filteredDrivers.length}</span> of <span className="font-medium">{drivers?.length || 0}</span> drivers
-            {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
+        <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+          <div className="text-sm text-muted-foreground">
+            Showing <span className="font-medium text-foreground">{filteredDrivers.length}</span> of <span className="font-medium text-foreground">{drivers?.length || 0}</span> drivers
+            {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-muted-foreground/60">(searching...)</span>}
           </div>
           {(searchTerm || selectedDepartments.length > 0) && (
             <button
               onClick={handleClearFilters}
-              className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
+              className="inline-flex items-center px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
             >
               <X className="h-4 w-4 mr-1" />
               Clear All
@@ -299,12 +334,12 @@ export function DriverList() {
       </div>
 
       {/* Desktop Table View - shows on large screens */}
-      <div className="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+      <div className="hidden lg:block bg-card border border-border shadow-medium rounded-lg overflow-hidden">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/30">
             <tr>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('name')}
               >
                 <div className="flex items-center gap-2">
@@ -314,7 +349,7 @@ export function DriverList() {
                 </div>
               </th>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('phone')}
               >
                 <div className="flex items-center gap-2">
@@ -324,7 +359,7 @@ export function DriverList() {
                 </div>
               </th>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('department')}
               >
                 <div className="flex items-center gap-2">
@@ -333,34 +368,59 @@ export function DriverList() {
                   {sortColumn === 'department' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
                 </div>
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Assigned Events
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {filteredDrivers.map((driver) => (
-              <tr key={driver.id} className="hover:bg-gray-50 transition-colors">
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                  {driver.name}
+              <tr key={driver.id} className="hover:bg-accent transition-colors">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
+                  <div className="flex items-center gap-2">
+                    {driver.name}
+                    <DriverChatBubble
+                      unreadCount={unreadCounts?.[driver.id] || 0}
+                      onClick={() => setChatDriver(driver)}
+                    />
+                  </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {driver.phone}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {driver.department || '-'}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {driver.events?.length || 0}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm">
                   <div className="flex gap-2">
+                    <button
+                      onClick={() => setScheduleDriver(driver)}
+                      className="inline-flex items-center px-3 py-1 text-blue-600 hover:text-blue-800 transition-colors"
+                      style={{ minHeight: '36px' }}
+                      title="View driver's schedule"
+                    >
+                      <Eye className="h-4 w-4 mr-1" />
+                      View
+                    </button>
+                    <button
+                      onClick={() => handleSendSchedule(driver)}
+                      disabled={sendScheduleMutation.isPending}
+                      className="inline-flex items-center px-3 py-1 text-green-600 hover:text-green-800 transition-colors disabled:opacity-50"
+                      style={{ minHeight: '36px' }}
+                      title="Send today's schedule via Signal"
+                    >
+                      <Send className="h-4 w-4 mr-1" />
+                      Send
+                    </button>
                     <button
                       onClick={() => handleEdit(driver)}
-                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
+                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80 transition-colors"
                       style={{ minHeight: '36px' }}
                     >
                       <Edit className="h-4 w-4 mr-1" />
@@ -368,7 +428,7 @@ export function DriverList() {
                     </button>
                     <button
                       onClick={() => handleDelete(driver.id, driver.name)}
-                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
+                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800 transition-colors"
                       style={{ minHeight: '36px' }}
                     >
                       <Trash2 className="h-4 w-4 mr-1" />
@@ -385,27 +445,50 @@ export function DriverList() {
       {/* Mobile/Tablet Card View - shows on small and medium screens */}
       <div className="lg:hidden space-y-4">
         {filteredDrivers.map((driver) => (
-          <div key={driver.id} className="bg-white shadow rounded-lg p-4">
-            <div className="mb-3">
-              <h3 className="text-lg font-semibold text-gray-900">{driver.name}</h3>
-              <p className="text-sm text-gray-600 mt-1">{driver.phone}</p>
+          <div key={driver.id} className="bg-card border border-border shadow-soft rounded-lg p-4">
+            <div className="mb-3 flex items-start justify-between">
+              <div>
+                <h3 className="text-lg font-semibold text-foreground">{driver.name}</h3>
+                <p className="text-sm text-muted-foreground mt-1">{driver.phone}</p>
+              </div>
+              <DriverChatBubble
+                unreadCount={unreadCounts?.[driver.id] || 0}
+                onClick={() => setChatDriver(driver)}
+              />
             </div>
 
             <div className="grid grid-cols-2 gap-3 mb-4">
               <div>
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Department</p>
-                <p className="text-sm text-gray-900 mt-1">{driver.department || '-'}</p>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Department</p>
+                <p className="text-sm text-foreground mt-1">{driver.department || '-'}</p>
               </div>
               <div>
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned Events</p>
-                <p className="text-sm text-gray-900 mt-1">{driver.events?.length || 0}</p>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Assigned Events</p>
+                <p className="text-sm text-foreground mt-1">{driver.events?.length || 0}</p>
               </div>
             </div>
 
-            <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200">
+            <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-border">
+              <button
+                onClick={() => setScheduleDriver(driver)}
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-blue-600 bg-card hover:bg-blue-50 dark:hover:bg-blue-950/20 transition-colors"
+                style={{ minHeight: '44px' }}
+              >
+                <Eye className="h-5 w-5 mr-2" />
+                View Schedule
+              </button>
+              <button
+                onClick={() => handleSendSchedule(driver)}
+                disabled={sendScheduleMutation.isPending}
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-green-600 bg-card hover:bg-green-50 dark:hover:bg-green-950/20 transition-colors disabled:opacity-50"
+                style={{ minHeight: '44px' }}
+              >
+                <Send className="h-5 w-5 mr-2" />
+                Send
+              </button>
               <button
                 onClick={() => handleEdit(driver)}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-primary bg-white hover:bg-gray-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-primary bg-card hover:bg-accent hover:text-accent-foreground transition-colors"
                 style={{ minHeight: '44px' }}
               >
                 <Edit className="h-5 w-5 mr-2" />
@@ -413,7 +496,7 @@ export function DriverList() {
               </button>
               <button
                 onClick={() => handleDelete(driver.id, driver.name)}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-red-600 bg-card hover:bg-red-50 dark:hover:bg-red-950/20 transition-colors"
                 style={{ minHeight: '44px' }}
               >
                 <Trash2 className="h-5 w-5 mr-2" />
@@ -451,6 +534,20 @@ export function DriverList() {
         onClear={handleClearFilters}
         onApply={() => {}}
       />
+
+      {/* Driver Chat Modal */}
+      <DriverChatModal
+        driver={chatDriver}
+        isOpen={!!chatDriver}
+        onClose={() => setChatDriver(null)}
+      />
+
+      {/* Driver Schedule Modal */}
+      <DriverScheduleModal
+        driver={scheduleDriver}
+        isOpen={!!scheduleDriver}
+        onClose={() => setScheduleDriver(null)}
+      />
     </div>
   );
 }
diff --git a/frontend/src/pages/DriverProfile.tsx b/frontend/src/pages/DriverProfile.tsx
new file mode 100644
index 0000000..ef8ceac
--- /dev/null
+++ b/frontend/src/pages/DriverProfile.tsx
@@ -0,0 +1,226 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { Loading } from '@/components/Loading';
+import { User, Phone, Save, CheckCircle, AlertCircle } from 'lucide-react';
+import toast from 'react-hot-toast';
+
+interface DriverProfileData {
+  id: string;
+  name: string;
+  phone: string | null;
+  department: string | null;
+  isAvailable: boolean;
+  user: {
+    email: string;
+    picture: string | null;
+  } | null;
+}
+
+export function DriverProfile() {
+  const queryClient = useQueryClient();
+  const [phone, setPhone] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { data: profile, isLoading, error } = useQuery<DriverProfileData>({
+    queryKey: ['my-driver-profile'],
+    queryFn: async () => {
+      const { data } = await api.get('/drivers/me');
+      return data;
+    },
+  });
+
+  // Set phone when profile loads
+  useEffect(() => {
+    if (profile?.phone) {
+      setPhone(profile.phone);
+    }
+  }, [profile?.phone]);
+
+  const updateProfile = useMutation({
+    mutationFn: async (newPhone: string) => {
+      const { data } = await api.patch('/drivers/me', { phone: newPhone });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['my-driver-profile'] });
+      toast.success('Phone number updated successfully!');
+      setIsEditing(false);
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.message || 'Failed to update phone number');
+    },
+  });
+
+  const handleSave = () => {
+    if (!phone.trim()) {
+      toast.error('Please enter a valid phone number');
+      return;
+    }
+    updateProfile.mutate(phone);
+  };
+
+  if (isLoading) {
+    return <Loading message="Loading your profile..." />;
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12">
+        <AlertCircle className="h-12 w-12 text-destructive mb-4" />
+        <h2 className="text-xl font-semibold text-foreground mb-2">Profile Not Found</h2>
+        <p className="text-muted-foreground">Unable to load your driver profile.</p>
+      </div>
+    );
+  }
+
+  if (!profile) {
+    return null;
+  }
+
+  const hasPhone = !!profile.phone;
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">My Profile</h1>
+        <p className="text-muted-foreground">Manage your driver profile and contact information</p>
+      </div>
+
+      {/* Profile Card */}
+      <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
+        {/* Header with avatar */}
+        <div className="bg-primary/10 px-6 py-8 flex items-center gap-4">
+          {profile.user?.picture ? (
+            <img
+              src={profile.user.picture}
+              alt={profile.name}
+              className="h-20 w-20 rounded-full border-4 border-background shadow-md"
+            />
+          ) : (
+            <div className="h-20 w-20 rounded-full bg-primary/20 flex items-center justify-center border-4 border-background shadow-md">
+              <User className="h-10 w-10 text-primary" />
+            </div>
+          )}
+          <div>
+            <h2 className="text-2xl font-bold text-foreground">{profile.name}</h2>
+            <p className="text-muted-foreground">{profile.user?.email}</p>
+            {profile.department && (
+              <span className="inline-block mt-1 px-2 py-0.5 bg-primary/20 text-primary text-xs font-medium rounded">
+                {profile.department.replace(/_/g, ' ')}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Phone Number Section */}
+        <div className="p-6 border-t border-border">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-foreground mb-1">
+                <Phone className="h-4 w-4 inline mr-1" />
+                Phone Number
+              </label>
+              <p className="text-xs text-muted-foreground mb-3">
+                Used for Signal notifications about your trips
+              </p>
+
+              {!hasPhone && !isEditing && (
+                <div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-4">
+                  <div className="flex items-center gap-2 text-amber-800 dark:text-amber-200">
+                    <AlertCircle className="h-5 w-5 flex-shrink-0" />
+                    <p className="text-sm font-medium">
+                      Please add your phone number to receive trip notifications via Signal
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {isEditing ? (
+                <div className="flex items-center gap-2">
+                  <input
+                    type="tel"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    placeholder="+1 (555) 123-4567"
+                    className="flex-1 px-3 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                  <button
+                    onClick={handleSave}
+                    disabled={updateProfile.isPending}
+                    className="px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 disabled:opacity-50 flex items-center gap-2"
+                  >
+                    {updateProfile.isPending ? (
+                      <span className="animate-spin">...</span>
+                    ) : (
+                      <Save className="h-4 w-4" />
+                    )}
+                    Save
+                  </button>
+                  <button
+                    onClick={() => {
+                      setPhone(profile.phone || '');
+                      setIsEditing(false);
+                    }}
+                    className="px-4 py-2 bg-muted text-muted-foreground rounded-lg font-medium hover:bg-muted/80"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    {hasPhone ? (
+                      <>
+                        <CheckCircle className="h-5 w-5 text-green-500" />
+                        <span className="text-lg font-medium text-foreground">{profile.phone}</span>
+                      </>
+                    ) : (
+                      <span className="text-muted-foreground italic">No phone number set</span>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => setIsEditing(true)}
+                    className="px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90"
+                  >
+                    {hasPhone ? 'Edit' : 'Add Phone'}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Availability Status */}
+        <div className="p-6 border-t border-border bg-muted/30">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-medium text-foreground">Availability Status</h3>
+              <p className="text-sm text-muted-foreground">Your current availability for assignments</p>
+            </div>
+            <div className={`px-3 py-1 rounded-full text-sm font-medium ${
+              profile.isAvailable
+                ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+            }`}>
+              {profile.isAvailable ? 'Available' : 'Unavailable'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Info Card */}
+      <div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+        <h3 className="font-medium text-blue-800 dark:text-blue-200 mb-2">About Signal Notifications</h3>
+        <p className="text-sm text-blue-700 dark:text-blue-300">
+          When you're assigned to a trip, you'll receive notifications via Signal messenger:
+        </p>
+        <ul className="mt-2 text-sm text-blue-700 dark:text-blue-300 list-disc list-inside space-y-1">
+          <li>20-minute reminder before pickup</li>
+          <li>5-minute urgent reminder</li>
+          <li>Trip start confirmation request</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/EventList.tsx b/frontend/src/pages/EventList.tsx
index f8d04e7..66477b2 100644
--- a/frontend/src/pages/EventList.tsx
+++ b/frontend/src/pages/EventList.tsx
@@ -1,5 +1,6 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { api } from '@/lib/api';
 import { ScheduleEvent, EventType } from '@/types';
@@ -15,6 +16,8 @@ type SortDirection = 'asc' | 'desc';
 
 export function EventList() {
   const queryClient = useQueryClient();
+  const location = useLocation();
+  const navigate = useNavigate();
   const [showForm, setShowForm] = useState(false);
   const [editingEvent, setEditingEvent] = useState<ScheduleEvent | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -31,6 +34,20 @@ export function EventList() {
     },
   });
 
+  // Handle opening a specific event from navigation state (e.g., from War Room)
+  useEffect(() => {
+    const state = location.state as { editEventId?: string } | null;
+    if (state?.editEventId && events) {
+      const eventToEdit = events.find(e => e.id === state.editEventId);
+      if (eventToEdit) {
+        setEditingEvent(eventToEdit);
+        setShowForm(true);
+        // Clear the state so refreshing doesn't re-open the form
+        navigate(location.pathname, { replace: true, state: {} });
+      }
+    }
+  }, [location.state, events, navigate, location.pathname]);
+
   const createMutation = useMutation({
     mutationFn: async (data: EventFormData) => {
       await api.post('/events', data);
@@ -210,10 +227,10 @@ export function EventList() {
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">Activities</h1>
+        <h1 className="text-3xl font-bold text-foreground">Activities</h1>
         <button
           onClick={handleAdd}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors"
         >
           <Plus className="h-4 w-4 mr-2" />
           Add Activity
@@ -221,36 +238,36 @@ export function EventList() {
       </div>
 
       {/* Search Bar */}
-      <div className="bg-white shadow rounded-lg mb-4 p-4">
+      <div className="bg-card shadow-soft border border-border rounded-lg mb-4 p-4">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-            <Search className="h-5 w-5 text-gray-400" />
+            <Search className="h-5 w-5 text-muted-foreground" />
           </div>
           <input
             type="text"
             placeholder="Search activities by title, location, VIP name, driver, or vehicle..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm"
+            className="block w-full pl-10 pr-3 py-2 border border-input rounded-md leading-5 bg-background placeholder-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm transition-colors"
           />
           {searchQuery && (
             <button
               onClick={() => setSearchQuery('')}
-              className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
+              className="absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
             >
               <span className="text-sm font-medium">Clear</span>
             </button>
           )}
         </div>
         {searchQuery && (
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Found {filteredEvents.length} {filteredEvents.length === 1 ? 'activity' : 'activities'} matching "{searchQuery}"
           </p>
         )}
       </div>
 
       {/* Filter Tabs */}
-      <div className="bg-white shadow rounded-lg mb-4 p-4">
+      <div className="bg-card shadow-soft border border-border rounded-lg mb-4 p-4">
         <div className="flex flex-wrap gap-2">
           {filterTabs.map((tab) => (
             <button
@@ -259,7 +276,7 @@ export function EventList() {
               className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
                 activeFilter === tab.value
                   ? 'bg-primary text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  : 'bg-muted text-foreground hover:bg-accent'
               }`}
             >
               {tab.label} ({tab.count})
@@ -270,12 +287,12 @@ export function EventList() {
 
       {/* Activities Table */}
       {filteredEvents.length === 0 ? (
-        <div className="bg-white shadow rounded-lg p-12 text-center">
-          <Search className="h-16 w-16 mx-auto mb-4 text-gray-300" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
+        <div className="bg-card shadow-soft border border-border rounded-lg p-12 text-center">
+          <Search className="h-16 w-16 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium text-foreground mb-2">
             {searchQuery ? 'No activities found' : 'No activities yet'}
           </h3>
-          <p className="text-gray-500">
+          <p className="text-muted-foreground">
             {searchQuery
               ? `No activities match "${searchQuery}". Try a different search term.`
               : 'Get started by adding your first activity.'}
@@ -283,19 +300,19 @@ export function EventList() {
           {searchQuery && (
             <button
               onClick={() => setSearchQuery('')}
-              className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+              className="mt-4 inline-flex items-center px-4 py-2 border border-border text-sm font-medium rounded-md text-foreground bg-card hover:bg-accent transition-colors"
             >
               Clear search
             </button>
           )}
         </div>
       ) : (
-        <div className="bg-white shadow rounded-lg overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="bg-card shadow-medium border border-border rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-border">
+            <thead className="bg-muted/30">
               <tr>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('title')}
                 >
                   <div className="flex items-center gap-1">
@@ -303,12 +320,12 @@ export function EventList() {
                     {sortField === 'title' ? (
                       sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                     ) : (
-                      <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                      <ArrowUpDown className="h-3 w-3 text-muted-foreground/50" />
                     )}
                   </div>
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('type')}
                 >
                   <div className="flex items-center gap-1">
@@ -316,12 +333,12 @@ export function EventList() {
                     {sortField === 'type' ? (
                       sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                     ) : (
-                      <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                      <ArrowUpDown className="h-3 w-3 text-muted-foreground/50" />
                     )}
                   </div>
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('vips')}
                 >
                   <div className="flex items-center gap-1">
@@ -329,18 +346,18 @@ export function EventList() {
                     {sortField === 'vips' ? (
                       sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                     ) : (
-                      <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                      <ArrowUpDown className="h-3 w-3 text-muted-foreground/50" />
                     )}
                   </div>
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Vehicle
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Driver
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('startTime')}
                 >
                   <div className="flex items-center gap-1">
@@ -348,12 +365,12 @@ export function EventList() {
                     {sortField === 'startTime' ? (
                       sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                     ) : (
-                      <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                      <ArrowUpDown className="h-3 w-3 text-muted-foreground/50" />
                     )}
                   </div>
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('status')}
                 >
                   <div className="flex items-center gap-1">
@@ -361,65 +378,65 @@ export function EventList() {
                     {sortField === 'status' ? (
                       sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                     ) : (
-                      <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                      <ArrowUpDown className="h-3 w-3 text-muted-foreground/50" />
                     )}
                   </div>
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-card divide-y divide-border">
               {filteredEvents?.map((event) => (
-              <tr key={event.id}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+              <tr key={event.id} className="hover:bg-muted/50 transition-colors">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                   {event.title}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <span className={`px-2 py-1 text-xs rounded-full ${
-                    event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800' :
-                    event.type === 'MEAL' ? 'bg-green-100 text-green-800' :
-                    event.type === 'EVENT' ? 'bg-purple-100 text-purple-800' :
-                    event.type === 'MEETING' ? 'bg-yellow-100 text-yellow-800' :
-                    'bg-gray-100 text-gray-800'
+                    event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' :
+                    event.type === 'MEAL' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' :
+                    event.type === 'EVENT' ? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' :
+                    event.type === 'MEETING' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' :
+                    'bg-muted text-muted-foreground'
                   }`}>
                     {event.type}
                   </span>
                 </td>
-                <td className="px-6 py-4 text-sm text-gray-500">
+                <td className="px-6 py-4 text-sm text-muted-foreground">
                   {event.vips && event.vips.length > 0
                     ? event.vips.map(vip => vip.name).join(', ')
                     : 'No VIPs assigned'}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {event.vehicle ? (
                     <div>
-                      <div>{event.vehicle.name}</div>
-                      <div className="text-xs text-gray-400">
+                      <div className="text-foreground">{event.vehicle.name}</div>
+                      <div className="text-xs text-muted-foreground">
                         {event.vips?.length || 0}/{event.vehicle.seatCapacity} seats
                       </div>
                     </div>
                   ) : (
-                    <span className="text-gray-400">No vehicle</span>
+                    <span className="text-muted-foreground">No vehicle</span>
                   )}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   <InlineDriverSelector
                     eventId={event.id}
                     currentDriverId={event.driverId}
                     currentDriverName={event.driver?.name}
                   />
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {formatDateTime(event.startTime)}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <span className={`px-2 py-1 text-xs rounded-full ${
-                    event.status === 'SCHEDULED' ? 'bg-blue-100 text-blue-800' :
-                    event.status === 'IN_PROGRESS' ? 'bg-yellow-100 text-yellow-800' :
-                    event.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
-                    'bg-gray-100 text-gray-800'
+                    event.status === 'SCHEDULED' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' :
+                    event.status === 'IN_PROGRESS' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' :
+                    event.status === 'COMPLETED' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' :
+                    'bg-muted text-muted-foreground'
                   }`}>
                     {event.status}
                   </span>
@@ -428,14 +445,14 @@ export function EventList() {
                   <div className="flex gap-2">
                     <button
                       onClick={() => handleEdit(event)}
-                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
+                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80 transition-colors"
                     >
                       <Edit className="h-4 w-4 mr-1" />
                       Edit
                     </button>
                     <button
                       onClick={() => handleDelete(event.id, event.title)}
-                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
+                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors"
                     >
                       <Trash2 className="h-4 w-4 mr-1" />
                       Delete
diff --git a/frontend/src/pages/FlightList.tsx b/frontend/src/pages/FlightList.tsx
index 616cbc4..f325ebe 100644
--- a/frontend/src/pages/FlightList.tsx
+++ b/frontend/src/pages/FlightList.tsx
@@ -223,20 +223,20 @@ export function FlightList() {
   const getStatusColor = (status: string | null) => {
     switch (status?.toLowerCase()) {
       case 'scheduled':
-        return 'bg-blue-100 text-blue-800';
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
       case 'boarding':
-        return 'bg-yellow-100 text-yellow-800';
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
       case 'departed':
       case 'en-route':
-        return 'bg-purple-100 text-purple-800';
+        return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
       case 'landed':
-        return 'bg-green-100 text-green-800';
+        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
       case 'delayed':
-        return 'bg-orange-100 text-orange-800';
+        return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300';
       case 'cancelled':
-        return 'bg-red-100 text-red-800';
+        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
       default:
-        return 'bg-gray-100 text-gray-800';
+        return 'bg-muted text-muted-foreground';
     }
   };
 
@@ -244,7 +244,7 @@ export function FlightList() {
     return (
       <div>
         <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold text-gray-900">Flights</h1>
+          <h1 className="text-3xl font-bold text-foreground">Flights</h1>
           <button
             disabled
             className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
@@ -271,10 +271,10 @@ export function FlightList() {
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">Flights</h1>
+        <h1 className="text-3xl font-bold text-foreground">Flights</h1>
         <button
           onClick={handleAdd}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors"
         >
           <Plus className="h-4 w-4 mr-2" />
           Add Flight
@@ -283,17 +283,17 @@ export function FlightList() {
 
       {/* Search and Filter Section */}
       {flights && flights.length > 0 && (
-        <div className="bg-white shadow rounded-lg p-4 mb-6">
+        <div className="bg-card shadow-soft border border-border rounded-lg p-4 mb-6">
           <div className="flex gap-3">
             {/* Search */}
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
               <input
                 type="text"
                 placeholder="Search by flight number, VIP, or route..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
+                className="w-full pl-10 pr-4 py-2.5 border border-input rounded-md focus:ring-primary focus:border-primary text-base bg-background transition-colors"
                 style={{ minHeight: '44px' }}
               />
             </div>
@@ -301,7 +301,7 @@ export function FlightList() {
             {/* Filter Button */}
             <button
               onClick={() => setFilterModalOpen(true)}
-              className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
+              className="inline-flex items-center px-4 py-2 border border-border rounded-md text-foreground bg-card hover:bg-accent font-medium transition-colors"
               style={{ minHeight: '44px' }}
             >
               <Filter className="h-5 w-5 mr-2" />
@@ -316,8 +316,8 @@ export function FlightList() {
 
           {/* Active Filter Chips */}
           {selectedStatuses.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
-              <span className="text-sm text-gray-600 py-1.5">Active filters:</span>
+            <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-border">
+              <span className="text-sm text-muted-foreground py-1.5">Active filters:</span>
               {selectedStatuses.map((status) => (
                 <FilterChip
                   key={status}
@@ -329,15 +329,15 @@ export function FlightList() {
           )}
 
           {/* Results count */}
-          <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
-            <div className="text-sm text-gray-600">
-              Showing <span className="font-medium">{filteredFlights.length}</span> of <span className="font-medium">{flights.length}</span> flights
-              {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
+          <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+            <div className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{filteredFlights.length}</span> of <span className="font-medium text-foreground">{flights.length}</span> flights
+              {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-muted-foreground/70">(searching...)</span>}
             </div>
             {(searchTerm || selectedStatuses.length > 0) && (
               <button
                 onClick={handleClearFilters}
-                className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
+                className="inline-flex items-center px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
               >
                 <X className="h-4 w-4 mr-1" />
                 Clear All
@@ -348,12 +348,12 @@ export function FlightList() {
       )}
 
       {flights && flights.length > 0 ? (
-        <div className="bg-white shadow rounded-lg overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="bg-card shadow-medium border border-border rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-border">
+            <thead className="bg-muted/30">
               <tr>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('flightNumber')}
                 >
                   <div className="flex items-center gap-2">
@@ -362,11 +362,11 @@ export function FlightList() {
                     {sortColumn === 'flightNumber' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
                   </div>
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   VIP
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('departureAirport')}
                 >
                   <div className="flex items-center gap-2">
@@ -375,11 +375,11 @@ export function FlightList() {
                     {sortColumn === 'departureAirport' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
                   </div>
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Scheduled
                 </th>
                 <th
-                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
+                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase cursor-pointer hover:bg-accent select-none transition-colors"
                   onClick={() => handleSort('status')}
                 >
                   <div className="flex items-center gap-2">
@@ -388,41 +388,41 @@ export function FlightList() {
                     {sortColumn === 'status' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
                   </div>
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-card divide-y divide-border">
               {filteredFlights.map((flight) => (
-                <tr key={flight.id} className="hover:bg-gray-50 transition-colors">
+                <tr key={flight.id} className="hover:bg-muted/50 transition-colors">
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="flex items-center">
-                      <Plane className="h-4 w-4 text-gray-400 mr-2" />
+                      <Plane className="h-4 w-4 text-muted-foreground mr-2" />
                       <div>
-                        <div className="text-sm font-medium text-gray-900">
+                        <div className="text-sm font-medium text-foreground">
                           {flight.flightNumber}
                         </div>
-                        <div className="text-xs text-gray-500">
+                        <div className="text-xs text-muted-foreground">
                           Segment {flight.segment}
                         </div>
                       </div>
                     </div>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    <div className="font-medium text-gray-900">{flight.vip?.name}</div>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">
+                    <div className="font-medium text-foreground">{flight.vip?.name}</div>
                     {flight.vip?.organization && (
-                      <div className="text-xs text-gray-500">{flight.vip.organization}</div>
+                      <div className="text-xs text-muted-foreground">{flight.vip.organization}</div>
                     )}
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                     <div className="flex items-center">
-                      <span className="font-medium">{flight.departureAirport}</span>
+                      <span className="font-medium text-foreground">{flight.departureAirport}</span>
                       <span className="mx-2">→</span>
-                      <span className="font-medium">{flight.arrivalAirport}</span>
+                      <span className="font-medium text-foreground">{flight.arrivalAirport}</span>
                     </div>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                     <div className="text-xs">
                       <div>Dep: {formatTime(flight.scheduledDeparture)}</div>
                       <div>Arr: {formatTime(flight.scheduledArrival)}</div>
@@ -441,14 +441,14 @@ export function FlightList() {
                     <div className="flex gap-2">
                       <button
                         onClick={() => handleEdit(flight)}
-                        className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
+                        className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80 transition-colors"
                       >
                         <Edit className="h-4 w-4 mr-1" />
                         Edit
                       </button>
                       <button
                         onClick={() => handleDelete(flight.id, flight.flightNumber)}
-                        className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
+                        className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors"
                       >
                         <Trash2 className="h-4 w-4 mr-1" />
                         Delete
@@ -461,12 +461,12 @@ export function FlightList() {
           </table>
         </div>
       ) : (
-        <div className="bg-white shadow rounded-lg p-12 text-center">
-          <Plane className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-          <p className="text-gray-500 mb-4">No flights tracked yet.</p>
+        <div className="bg-card shadow-soft border border-border rounded-lg p-12 text-center">
+          <Plane className="h-12 w-12 text-muted-foreground/50 mx-auto mb-4" />
+          <p className="text-muted-foreground mb-4">No flights tracked yet.</p>
           <button
             onClick={handleAdd}
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors"
           >
             <Plus className="h-4 w-4 mr-2" />
             Add Your First Flight
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 47fe190..bbb6433 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -14,16 +14,16 @@ export function Login() {
   }, [isAuthenticated, navigate]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-background to-primary/10">
+      <div className="max-w-md w-full bg-card border border-border rounded-lg shadow-xl p-8">
         <div className="text-center mb-8">
           <div className="inline-block p-3 bg-primary/10 rounded-full mb-4">
             <Plane className="h-12 w-12 text-primary" />
           </div>
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          <h1 className="text-3xl font-bold text-foreground mb-2">
             VIP Coordinator
           </h1>
-          <p className="text-gray-600">
+          <p className="text-muted-foreground">
             Transportation logistics and event coordination
           </p>
         </div>
@@ -35,7 +35,7 @@ export function Login() {
           Sign In with Auth0
         </button>
 
-        <div className="mt-6 text-center text-sm text-gray-500">
+        <div className="mt-6 text-center text-sm text-muted-foreground">
           <p>First user becomes administrator</p>
           <p>Subsequent users require admin approval</p>
         </div>
diff --git a/frontend/src/pages/PendingApproval.tsx b/frontend/src/pages/PendingApproval.tsx
index 7dd93ca..8005a4f 100644
--- a/frontend/src/pages/PendingApproval.tsx
+++ b/frontend/src/pages/PendingApproval.tsx
@@ -5,31 +5,31 @@ export function PendingApproval() {
   const { user, logout } = useAuth();
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-background to-primary/10">
+      <div className="max-w-md w-full bg-card border border-border rounded-lg shadow-xl p-8">
         <div className="text-center">
-          <div className="inline-block p-3 bg-yellow-100 rounded-full mb-4">
-            <Clock className="h-12 w-12 text-yellow-600" />
+          <div className="inline-block p-3 bg-yellow-500/10 dark:bg-yellow-500/20 rounded-full mb-4">
+            <Clock className="h-12 w-12 text-yellow-600 dark:text-yellow-500" />
           </div>
 
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          <h1 className="text-3xl font-bold text-foreground mb-2">
             Account Pending Approval
           </h1>
 
-          <p className="text-gray-600 mb-6">
+          <p className="text-muted-foreground mb-6">
             Your account is awaiting administrator approval. You will be able to access the system once your account has been approved.
           </p>
 
           {user?.email && (
-            <div className="bg-gray-50 rounded-lg p-4 mb-6">
-              <div className="flex items-center justify-center text-sm text-gray-700">
+            <div className="bg-muted/30 rounded-lg p-4 mb-6">
+              <div className="flex items-center justify-center text-sm text-foreground">
                 <Mail className="h-4 w-4 mr-2" />
                 <span>{user.email}</span>
               </div>
             </div>
           )}
 
-          <div className="text-sm text-gray-500 mb-6">
+          <div className="text-sm text-muted-foreground mb-6">
             <p>Please contact your administrator if you have any questions.</p>
             <p className="mt-2">
               <strong>Note:</strong> The first user is automatically approved as Administrator.
@@ -38,7 +38,7 @@ export function PendingApproval() {
 
           <button
             onClick={() => logout()}
-            className="w-full bg-gray-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-gray-700 transition-colors"
+            className="w-full bg-secondary text-secondary-foreground py-3 px-4 rounded-lg font-medium hover:bg-secondary/80 transition-colors"
           >
             Sign Out
           </button>
diff --git a/frontend/src/pages/UserList.tsx b/frontend/src/pages/UserList.tsx
index d7e6b96..5ab39a4 100644
--- a/frontend/src/pages/UserList.tsx
+++ b/frontend/src/pages/UserList.tsx
@@ -101,54 +101,54 @@ export function UserList() {
 
   return (
     <div>
-      <h1 className="text-3xl font-bold text-gray-900 mb-6">User Management</h1>
+      <h1 className="text-3xl font-bold text-foreground mb-6">User Management</h1>
 
       {/* Pending Approval Section */}
       {pendingUsers.length > 0 && (
         <div className="mb-8">
           <div className="flex items-center mb-4">
             <UserX className="h-5 w-5 text-yellow-600 mr-2" />
-            <h2 className="text-xl font-semibold text-gray-900">
+            <h2 className="text-xl font-semibold text-foreground">
               Pending Approval ({pendingUsers.length})
             </h2>
           </div>
 
-          <div className="bg-white shadow rounded-lg overflow-hidden">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
+          <div className="bg-card border border-border shadow-soft rounded-lg overflow-hidden transition-colors">
+            <table className="min-w-full divide-y divide-border">
+              <thead className="bg-muted/30">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                     Name
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                     Email
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                     Role
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                     Requested
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                     Actions
                   </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
+              <tbody className="bg-card divide-y divide-border">
                 {pendingUsers.map((user) => (
-                  <tr key={user.id} className="bg-yellow-50">
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  <tr key={user.id} className="bg-yellow-50 dark:bg-yellow-950/20">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                       {user.name || 'Unknown User'}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {user.email}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <span className="px-2 py-1 bg-gray-100 rounded text-xs font-medium">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
+                      <span className="px-2 py-1 bg-muted rounded text-xs font-medium">
                         {user.role}
                       </span>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {new Date(user.createdAt).toLocaleDateString()}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
@@ -156,7 +156,7 @@ export function UserList() {
                         <button
                           onClick={() => handleApprove(user.id)}
                           disabled={processingUser === user.id}
-                          className="inline-flex items-center px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
+                          className="inline-flex items-center px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 transition-colors"
                         >
                           <Check className="h-4 w-4 mr-1" />
                           Approve
@@ -164,7 +164,7 @@ export function UserList() {
                         <button
                           onClick={() => handleDeny(user.id)}
                           disabled={processingUser === user.id}
-                          className="inline-flex items-center px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
+                          className="inline-flex items-center px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50 transition-colors"
                         >
                           <X className="h-4 w-4 mr-1" />
                           Deny
@@ -183,56 +183,56 @@ export function UserList() {
       <div>
         <div className="flex items-center mb-4">
           <UserCheck className="h-5 w-5 text-green-600 mr-2" />
-          <h2 className="text-xl font-semibold text-gray-900">
+          <h2 className="text-xl font-semibold text-foreground">
             Approved Users ({approvedUsers.length})
           </h2>
         </div>
 
-        <div className="bg-white shadow rounded-lg overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="bg-card border border-border shadow-soft rounded-lg overflow-hidden transition-colors">
+          <table className="min-w-full divide-y divide-border">
+            <thead className="bg-muted/30">
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Name
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Email
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Role
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Status
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-card divide-y divide-border">
               {approvedUsers.map((user) => (
-                <tr key={user.id}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr key={user.id} className="hover:bg-accent transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                     {user.name || 'Unknown User'}
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                     {user.email}
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                     <span
                       className={`px-2 py-1 rounded text-xs font-medium ${
                         user.role === 'ADMINISTRATOR'
-                          ? 'bg-purple-100 text-purple-800'
+                          ? 'bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-200'
                           : user.role === 'COORDINATOR'
-                          ? 'bg-blue-100 text-blue-800'
-                          : 'bg-gray-100 text-gray-800'
+                          ? 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200'
+                          : 'bg-muted text-muted-foreground'
                       }`}
                     >
                       {user.role === 'ADMINISTRATOR' && <Shield className="h-3 w-3 inline mr-1" />}
                       {user.role}
                     </span>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600 dark:text-green-400 font-medium">
                     <Check className="h-4 w-4 inline mr-1" />
                     Active
                   </td>
@@ -241,7 +241,7 @@ export function UserList() {
                       <select
                         value={user.role}
                         onChange={(e) => handleRoleChange(user.id, e.target.value)}
-                        className="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-primary focus:border-primary"
+                        className="text-sm border border-input bg-background rounded px-2 py-1 focus:ring-primary focus:border-primary transition-colors"
                       >
                         <option value="DRIVER">Driver</option>
                         <option value="COORDINATOR">Coordinator</option>
@@ -249,7 +249,7 @@ export function UserList() {
                       </select>
                       <button
                         onClick={() => handleDeny(user.id)}
-                        className="inline-flex items-center px-2 py-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded"
+                        className="inline-flex items-center px-2 py-1 text-red-600 hover:text-red-800 hover:bg-red-50 dark:hover:bg-red-950/20 rounded transition-colors"
                         title="Delete user"
                       >
                         <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/pages/VIPSchedule.tsx b/frontend/src/pages/VIPSchedule.tsx
index 677b822..d8b5d11 100644
--- a/frontend/src/pages/VIPSchedule.tsx
+++ b/frontend/src/pages/VIPSchedule.tsx
@@ -1,7 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
+import { pdf } from '@react-pdf/renderer';
 import { api } from '@/lib/api';
 import { Loading } from '@/components/Loading';
+import { EventForm, EventFormData } from '@/components/EventForm';
+import { VIPSchedulePDF } from '@/components/VIPSchedulePDF';
+import { ScheduleEvent } from '@/types';
+import { usePdfSettings } from '@/hooks/useSettings';
 import {
   ArrowLeft,
   Calendar,
@@ -11,8 +17,15 @@ import {
   User,
   Plane,
   Download,
-  Mail,
+  MessageCircle,
+  Pencil,
+  X,
+  Trash2,
+  AlertTriangle,
+  Send,
+  Loader2,
 } from 'lucide-react';
+import toast from 'react-hot-toast';
 
 interface VIP {
   id: string;
@@ -35,37 +48,20 @@ interface VIP {
   }>;
 }
 
-interface ScheduleEvent {
-  id: string;
-  title: string;
-  pickupLocation: string | null;
-  dropoffLocation: string | null;
-  location: string | null;
-  startTime: string;
-  endTime: string;
-  type: string;
-  status: string;
-  description: string | null;
-  vipIds: string[];
-  vips?: Array<{
-    id: string;
-    name: string;
-  }>;
-  driver: {
-    id: string;
-    name: string;
-  } | null;
-  vehicle: {
-    id: string;
-    name: string;
-    type: string;
-    seatCapacity: number;
-  } | null;
-}
-
 export function VIPSchedule() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  // State for edit modal
+  const [editingEvent, setEditingEvent] = useState<ScheduleEvent | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState<ScheduleEvent | null>(null);
+
+  // State for Signal send modal
+  const [showSignalModal, setShowSignalModal] = useState(false);
+  const [signalPhoneNumber, setSignalPhoneNumber] = useState('');
+  const [signalMessage, setSignalMessage] = useState('');
+  const [isSendingSignal, setIsSendingSignal] = useState(false);
 
   const { data: vip, isLoading: vipLoading } = useQuery<VIP>({
     queryKey: ['vip', id],
@@ -83,6 +79,74 @@ export function VIPSchedule() {
     },
   });
 
+  // Fetch PDF settings for customization
+  const { data: pdfSettings } = usePdfSettings();
+
+  // Update event mutation
+  const updateEventMutation = useMutation({
+    mutationFn: async (data: EventFormData & { id: string }) => {
+      const { id: eventId, ...updateData } = data;
+      const response = await api.patch(`/events/${eventId}`, updateData);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events'] });
+      setEditingEvent(null);
+    },
+  });
+
+  // Cancel event mutation (set status to CANCELLED and free resources)
+  const cancelEventMutation = useMutation({
+    mutationFn: async (eventId: string) => {
+      const response = await api.patch(`/events/${eventId}`, {
+        status: 'CANCELLED',
+        driverId: null,
+        vehicleId: null,
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events'] });
+      queryClient.invalidateQueries({ queryKey: ['drivers'] });
+      queryClient.invalidateQueries({ queryKey: ['vehicles'] });
+      setEditingEvent(null);
+    },
+  });
+
+  // Delete event mutation (soft delete)
+  const deleteEventMutation = useMutation({
+    mutationFn: async (eventId: string) => {
+      const response = await api.delete(`/events/${eventId}`);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events'] });
+      queryClient.invalidateQueries({ queryKey: ['drivers'] });
+      queryClient.invalidateQueries({ queryKey: ['vehicles'] });
+      setShowDeleteConfirm(null);
+      setEditingEvent(null);
+    },
+  });
+
+  const handleEditEvent = (event: ScheduleEvent) => {
+    setEditingEvent(event);
+  };
+
+  const handleUpdateEvent = async (data: EventFormData) => {
+    if (!editingEvent) return;
+    await updateEventMutation.mutateAsync({ ...data, id: editingEvent.id });
+  };
+
+  const handleCancelEvent = async () => {
+    if (!editingEvent) return;
+    await cancelEventMutation.mutateAsync(editingEvent.id);
+  };
+
+  const handleDeleteEvent = async () => {
+    if (!showDeleteConfirm) return;
+    await deleteEventMutation.mutateAsync(showDeleteConfirm.id);
+  };
+
   if (vipLoading || eventsLoading) {
     return <Loading message="Loading VIP schedule..." />;
   }
@@ -90,13 +154,13 @@ export function VIPSchedule() {
   if (!vip) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500">VIP not found</p>
+        <p className="text-muted-foreground">VIP not found</p>
       </div>
     );
   }
 
   // Filter events for this VIP (using new multi-VIP schema)
-  const vipEvents = events?.filter((event) => event.vipIds?.includes(id)) || [];
+  const vipEvents = events?.filter((event) => event.vipIds?.includes(id || '')) || [];
 
   // Sort events by start time
   const sortedEvents = [...vipEvents].sort(
@@ -154,14 +218,92 @@ export function VIPSchedule() {
     });
   };
 
-  const handleExport = () => {
-    // TODO: Implement PDF export
-    alert('PDF export feature coming soon!');
+  const handleExport = async () => {
+    if (!vip) return;
+
+    try {
+      // Generate PDF
+      const blob = await pdf(
+        <VIPSchedulePDF
+          vip={vip}
+          events={vipEvents}
+          settings={pdfSettings}
+        />
+      ).toBlob();
+
+      // Create download link
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      // Create timestamp like "Feb01_1430" (Month Day _ 24hr time)
+      const now = new Date();
+      const timestamp = now.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }).replace(' ', '') +
+        '_' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '');
+      link.download = `${vip.name.replace(/\s+/g, '_')}_Schedule_${timestamp}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('[PDF] Generation failed:', error);
+      alert('Failed to generate PDF. Please try again.');
+    }
   };
 
-  const handleEmail = () => {
-    // TODO: Implement email functionality
-    alert('Email feature coming soon!');
+  const handleSendViaSignal = async () => {
+    if (!vip || !signalPhoneNumber.trim()) return;
+
+    setIsSendingSignal(true);
+    try {
+      // Generate the PDF as base64
+      const pdfBlob = await pdf(
+        <VIPSchedulePDF
+          vip={vip}
+          events={vipEvents}
+          settings={pdfSettings}
+        />
+      ).toBlob();
+
+      // Convert blob to base64
+      const reader = new FileReader();
+      const base64Promise = new Promise<string>((resolve, reject) => {
+        reader.onloadend = () => {
+          const base64 = (reader.result as string).split(',')[1]; // Remove data:... prefix
+          resolve(base64);
+        };
+        reader.onerror = reject;
+      });
+      reader.readAsDataURL(pdfBlob);
+      const base64Data = await base64Promise;
+
+      // Send via Signal
+      // Create timestamp like "Feb01_1430" (Month Day _ 24hr time)
+      const now = new Date();
+      const timestamp = now.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }).replace(' ', '') +
+        '_' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '');
+      const filename = `${vip.name.replace(/\s+/g, '_')}_Schedule_${timestamp}.pdf`;
+      const response = await api.post('/signal/send-attachment', {
+        to: signalPhoneNumber,
+        message: signalMessage || `Here is the schedule for ${vip.name}`,
+        attachment: base64Data,
+        filename,
+        mimeType: 'application/pdf',
+      });
+
+      if (response.data.success) {
+        toast.success('Schedule sent via Signal!');
+        setShowSignalModal(false);
+        setSignalPhoneNumber('');
+        setSignalMessage('');
+      } else {
+        toast.error(response.data.error || 'Failed to send via Signal');
+      }
+    } catch (error: any) {
+      console.error('[Signal] Failed to send:', error);
+      toast.error(error.response?.data?.message || 'Failed to send via Signal');
+    } finally {
+      setIsSendingSignal(false);
+    }
   };
 
   return (
@@ -170,32 +312,32 @@ export function VIPSchedule() {
       <div className="mb-6">
         <button
           onClick={() => navigate('/vips')}
-          className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 mb-4"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4 transition-colors"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
           Back to VIPs
         </button>
 
-        <div className="bg-white rounded-lg shadow-lg p-6">
+        <div className="bg-card rounded-lg shadow-medium border border-border p-6">
           <div className="flex justify-between items-start mb-4">
             <div>
-              <h1 className="text-3xl font-bold text-gray-900 mb-2">{vip.name}</h1>
+              <h1 className="text-3xl font-bold text-foreground mb-2">{vip.name}</h1>
               {vip.organization && (
-                <p className="text-lg text-gray-600">{vip.organization}</p>
+                <p className="text-lg text-muted-foreground">{vip.organization}</p>
               )}
-              <p className="text-sm text-gray-500">{vip.department.replace('_', ' ')}</p>
+              <p className="text-sm text-muted-foreground">{vip.department.replace('_', ' ')}</p>
             </div>
             <div className="flex gap-2">
               <button
-                onClick={handleEmail}
-                className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+                onClick={() => setShowSignalModal(true)}
+                className="inline-flex items-center px-3 py-2 border border-input rounded-lg text-sm font-medium text-foreground bg-background hover:bg-accent transition-colors"
               >
-                <Mail className="h-4 w-4 mr-2" />
-                Email Schedule
+                <MessageCircle className="h-4 w-4 mr-2" />
+                Send via Signal
               </button>
               <button
                 onClick={handleExport}
-                className="inline-flex items-center px-3 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90"
+                className="inline-flex items-center px-3 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
               >
                 <Download className="h-4 w-4 mr-2" />
                 Export PDF
@@ -204,22 +346,22 @@ export function VIPSchedule() {
           </div>
 
           {/* Arrival Info */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 pt-6 border-t">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 pt-6 border-t border-border">
             <div>
-              <p className="text-sm text-gray-500 mb-1">Arrival Mode</p>
+              <p className="text-sm text-muted-foreground mb-1">Arrival Mode</p>
               <div className="flex items-center gap-2">
                 {vip.arrivalMode === 'FLIGHT' ? (
                   <Plane className="h-5 w-5 text-blue-600" />
                 ) : (
-                  <Car className="h-5 w-5 text-gray-600" />
+                  <Car className="h-5 w-5 text-muted-foreground" />
                 )}
-                <span className="font-medium">{vip.arrivalMode.replace('_', ' ')}</span>
+                <span className="font-medium text-foreground">{vip.arrivalMode.replace('_', ' ')}</span>
               </div>
             </div>
             {vip.expectedArrival && (
               <div>
-                <p className="text-sm text-gray-500 mb-1">Expected Arrival</p>
-                <p className="font-medium">
+                <p className="text-sm text-muted-foreground mb-1">Expected Arrival</p>
+                <p className="font-medium text-foreground">
                   {new Date(vip.expectedArrival).toLocaleString('en-US', {
                     weekday: 'short',
                     month: 'short',
@@ -234,8 +376,8 @@ export function VIPSchedule() {
 
           {/* Flight Information */}
           {vip.flights && vip.flights.length > 0 && (
-            <div className="mt-6 pt-6 border-t">
-              <h3 className="text-lg font-semibold mb-3 flex items-center">
+            <div className="mt-6 pt-6 border-t border-border">
+              <h3 className="text-lg font-semibold text-foreground mb-3 flex items-center">
                 <Plane className="h-5 w-5 mr-2 text-blue-600" />
                 Flight Information
               </h3>
@@ -243,19 +385,19 @@ export function VIPSchedule() {
                 {vip.flights.map((flight) => (
                   <div
                     key={flight.id}
-                    className="bg-blue-50 rounded-lg p-3 flex justify-between items-center"
+                    className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3 flex justify-between items-center transition-colors"
                   >
                     <div>
-                      <p className="font-medium text-blue-900">
+                      <p className="font-medium text-blue-900 dark:text-blue-100">
                         Flight {flight.flightNumber}
                       </p>
-                      <p className="text-sm text-blue-700">
+                      <p className="text-sm text-blue-700 dark:text-blue-300">
                         {flight.departureAirport} → {flight.arrivalAirport}
                       </p>
                     </div>
                     <div className="text-right">
                       {flight.scheduledArrival && (
-                        <p className="text-sm text-blue-900">
+                        <p className="text-sm text-blue-900 dark:text-blue-100">
                           Arrives:{' '}
                           {new Date(flight.scheduledArrival).toLocaleString('en-US', {
                             month: 'short',
@@ -266,7 +408,7 @@ export function VIPSchedule() {
                         </p>
                       )}
                       {flight.status && (
-                        <p className="text-xs text-blue-600">Status: {flight.status}</p>
+                        <p className="text-xs text-blue-600 dark:text-blue-400">Status: {flight.status}</p>
                       )}
                     </div>
                   </div>
@@ -276,52 +418,63 @@ export function VIPSchedule() {
           )}
 
           {vip.notes && (
-            <div className="mt-6 pt-6 border-t">
-              <p className="text-sm text-gray-500 mb-1">Notes</p>
-              <p className="text-gray-700">{vip.notes}</p>
+            <div className="mt-6 pt-6 border-t border-border">
+              <p className="text-sm text-muted-foreground mb-1">Notes</p>
+              <p className="text-foreground">{vip.notes}</p>
             </div>
           )}
         </div>
       </div>
 
       {/* Schedule */}
-      <div className="bg-white rounded-lg shadow-lg p-6">
-        <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
+      <div className="bg-card rounded-lg shadow-medium border border-border p-6">
+        <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center">
           <Calendar className="h-6 w-6 mr-2 text-primary" />
           Schedule & Itinerary
         </h2>
 
         {sortedEvents.length === 0 ? (
           <div className="text-center py-12">
-            <Calendar className="h-16 w-16 mx-auto mb-4 text-gray-300" />
-            <p className="text-gray-500">No scheduled events yet</p>
+            <Calendar className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
+            <p className="text-muted-foreground">No scheduled events yet</p>
           </div>
         ) : (
           <div className="space-y-8">
             {Object.entries(eventsByDay).map(([date, dayEvents]) => (
               <div key={date}>
-                <h3 className="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b">
+                <h3 className="text-lg font-semibold text-foreground mb-4 pb-2 border-b border-border">
                   {date}
                 </h3>
                 <div className="space-y-4">
                   {dayEvents.map((event) => (
                     <div
                       key={event.id}
-                      className="flex gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                      className="flex gap-4 p-4 bg-muted/30 border border-border rounded-lg hover:bg-accent transition-colors group"
                     >
                       {/* Time */}
                       <div className="flex-shrink-0 w-32">
-                        <div className="flex items-center text-sm font-medium text-gray-900">
+                        <div className="flex items-center text-sm font-medium text-foreground">
                           <Clock className="h-4 w-4 mr-1" />
                           {formatTime(event.startTime)}
                         </div>
-                        <div className="text-xs text-gray-500 ml-5">
+                        <div className="text-xs text-muted-foreground ml-5">
                           to {formatTime(event.endTime)}
                         </div>
                       </div>
 
                       {/* Event Details */}
                       <div className="flex-1">
+
+                        {/* Edit Button - Top Right */}
+                        <div className="float-right ml-2">
+                          <button
+                            onClick={() => handleEditEvent(event)}
+                            className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
+                            title="Edit event"
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </button>
+                        </div>
                         <div className="flex items-center gap-2 mb-2">
                           {getEventTypeIcon(event.type)}
                           <span
@@ -329,12 +482,12 @@ export function VIPSchedule() {
                           >
                             {event.type}
                           </span>
-                          <h4 className="font-semibold text-gray-900">{event.title}</h4>
+                          <h4 className="font-semibold text-foreground">{event.title}</h4>
                         </div>
 
                         {/* Location */}
                         {event.type === 'TRANSPORT' ? (
-                          <div className="flex items-center gap-1 text-sm text-gray-600 mb-2">
+                          <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
                             <MapPin className="h-4 w-4" />
                             <span>
                               {event.pickupLocation || 'Pickup'} →{' '}
@@ -343,7 +496,7 @@ export function VIPSchedule() {
                           </div>
                         ) : (
                           event.location && (
-                            <div className="flex items-center gap-1 text-sm text-gray-600 mb-2">
+                            <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
                               <MapPin className="h-4 w-4" />
                               <span>{event.location}</span>
                             </div>
@@ -352,20 +505,20 @@ export function VIPSchedule() {
 
                         {/* Description */}
                         {event.description && (
-                          <p className="text-sm text-gray-600 mb-2">{event.description}</p>
+                          <p className="text-sm text-muted-foreground mb-2">{event.description}</p>
                         )}
 
                         {/* Transport Details */}
                         {event.type === 'TRANSPORT' && (
                           <div className="flex gap-4 mt-2">
                             {event.driver && (
-                              <div className="flex items-center gap-1 text-sm text-gray-600">
+                              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                 <User className="h-4 w-4" />
                                 <span>Driver: {event.driver.name}</span>
                               </div>
                             )}
                             {event.vehicle && (
-                              <div className="flex items-center gap-1 text-sm text-gray-600">
+                              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                 <Car className="h-4 w-4" />
                                 <span>
                                   {event.vehicle.name} ({event.vehicle.type.replace('_', ' ')})
@@ -380,12 +533,12 @@ export function VIPSchedule() {
                           <span
                             className={`text-xs px-2 py-1 rounded ${
                               event.status === 'COMPLETED'
-                                ? 'bg-green-100 text-green-800'
+                                ? 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-300'
                                 : event.status === 'IN_PROGRESS'
-                                ? 'bg-blue-100 text-blue-800'
+                                ? 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-300'
                                 : event.status === 'CANCELLED'
-                                ? 'bg-red-100 text-red-800'
-                                : 'bg-gray-100 text-gray-800'
+                                ? 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-300'
+                                : 'bg-muted text-muted-foreground'
                             }`}
                           >
                             {event.status}
@@ -400,6 +553,189 @@ export function VIPSchedule() {
           </div>
         )}
       </div>
+
+      {/* Edit Event Modal - Uses EventForm component */}
+      {editingEvent && (
+        <EventForm
+          event={editingEvent}
+          onSubmit={handleUpdateEvent}
+          onCancel={() => setEditingEvent(null)}
+          isSubmitting={updateEventMutation.isPending}
+          extraActions={
+            <div className="border-t border-border pt-4 mt-4">
+              <p className="text-sm text-muted-foreground mb-3">Event Actions</p>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={handleCancelEvent}
+                  disabled={cancelEventMutation.isPending || editingEvent.status === 'CANCELLED'}
+                  className="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                  {cancelEventMutation.isPending ? 'Cancelling...' : 'Cancel Event'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowDeleteConfirm(editingEvent)}
+                  disabled={deleteEventMutation.isPending}
+                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 transition-colors"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  Delete Event
+                </button>
+              </div>
+              {editingEvent.status === 'CANCELLED' && (
+                <p className="text-xs text-muted-foreground mt-2">This event is already cancelled.</p>
+              )}
+            </div>
+          }
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteConfirm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[60]">
+          <div className="bg-card rounded-lg shadow-xl w-full max-w-md mx-4">
+            <div className="p-6">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0">
+                  <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
+                    <AlertTriangle className="h-6 w-6 text-red-600" />
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
+                    Delete Event?
+                  </h3>
+                  <p className="text-base text-muted-foreground mb-2">
+                    Are you sure you want to delete this event?
+                  </p>
+                  <div className="bg-muted/50 rounded-md p-3 mb-4">
+                    <p className="font-medium text-foreground">{showDeleteConfirm.title}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {formatTime(showDeleteConfirm.startTime)} - {formatTime(showDeleteConfirm.endTime)}
+                    </p>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    This will free up any assigned driver and vehicle. This action cannot be undone.
+                  </p>
+
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setShowDeleteConfirm(null)}
+                      className="flex-1 px-4 py-3 border border-input rounded-md text-base font-medium text-foreground hover:bg-accent"
+                    >
+                      Keep Event
+                    </button>
+                    <button
+                      onClick={handleDeleteEvent}
+                      disabled={deleteEventMutation.isPending}
+                      className="flex-1 px-4 py-3 bg-red-600 text-white rounded-md text-base font-medium hover:bg-red-700 disabled:opacity-50"
+                    >
+                      {deleteEventMutation.isPending ? 'Deleting...' : 'Delete Event'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Signal Send Modal */}
+      {showSignalModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
+                <MessageCircle className="h-5 w-5" />
+                Send Schedule via Signal
+              </h2>
+              <button
+                onClick={() => {
+                  setShowSignalModal(false);
+                  setSignalPhoneNumber('');
+                  setSignalMessage('');
+                }}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="p-4 space-y-4">
+              <p className="text-sm text-muted-foreground">
+                Send {vip?.name}'s itinerary PDF directly to a phone via Signal.
+              </p>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Phone Number *
+                </label>
+                <input
+                  type="tel"
+                  value={signalPhoneNumber}
+                  onChange={(e) => setSignalPhoneNumber(e.target.value)}
+                  placeholder="+1 (555) 123-4567"
+                  className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Include country code (e.g., +1 for US)
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Message (optional)
+                </label>
+                <textarea
+                  value={signalMessage}
+                  onChange={(e) => setSignalMessage(e.target.value)}
+                  placeholder={`Here is the schedule for ${vip?.name}`}
+                  rows={2}
+                  className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
+                />
+              </div>
+
+              <div className="bg-muted/50 p-3 rounded-lg">
+                <p className="text-xs text-muted-foreground">
+                  <strong>Attachment:</strong> {vip?.name?.replace(/\s+/g, '_')}_Schedule_[timestamp].pdf
+                </p>
+              </div>
+            </div>
+
+            <div className="flex gap-3 p-4 border-t border-border">
+              <button
+                onClick={() => {
+                  setShowSignalModal(false);
+                  setSignalPhoneNumber('');
+                  setSignalMessage('');
+                }}
+                className="flex-1 px-4 py-2 border border-input rounded-lg text-foreground hover:bg-accent transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSendViaSignal}
+                disabled={!signalPhoneNumber.trim() || isSendingSignal}
+                className="flex-1 px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+              >
+                {isSendingSignal ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Send className="h-4 w-4" />
+                    Send PDF
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/VehicleList.tsx b/frontend/src/pages/VehicleList.tsx
index e828c54..16fbb84 100644
--- a/frontend/src/pages/VehicleList.tsx
+++ b/frontend/src/pages/VehicleList.tsx
@@ -190,10 +190,10 @@ export function VehicleList() {
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">Vehicle Management</h1>
+        <h1 className="text-3xl font-bold text-foreground">Vehicle Management</h1>
         <button
           onClick={() => setShowForm(!showForm)}
-          className="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
+          className="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
         >
           <Plus className="h-5 w-5 mr-2" />
           {showForm ? 'Cancel' : 'Add Vehicle'}
@@ -202,54 +202,54 @@ export function VehicleList() {
 
       {/* Stats Summary */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white p-4 rounded-lg shadow">
+        <div className="bg-card border border-border p-4 rounded-lg shadow-soft">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Total Vehicles</p>
-              <p className="text-2xl font-bold text-gray-900">{vehicles?.length || 0}</p>
+              <p className="text-sm text-muted-foreground">Total Vehicles</p>
+              <p className="text-2xl font-bold text-foreground">{vehicles?.length || 0}</p>
             </div>
-            <Car className="h-8 w-8 text-gray-400" />
+            <Car className="h-8 w-8 text-muted-foreground" />
           </div>
         </div>
-        <div className="bg-white p-4 rounded-lg shadow">
+        <div className="bg-card border border-border p-4 rounded-lg shadow-soft">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Available</p>
-              <p className="text-2xl font-bold text-green-600">{availableVehicles.length}</p>
+              <p className="text-sm text-muted-foreground">Available</p>
+              <p className="text-2xl font-bold text-green-600 dark:text-green-500">{availableVehicles.length}</p>
             </div>
-            <CheckCircle className="h-8 w-8 text-green-400" />
+            <CheckCircle className="h-8 w-8 text-green-500 dark:text-green-600" />
           </div>
         </div>
-        <div className="bg-white p-4 rounded-lg shadow">
+        <div className="bg-card border border-border p-4 rounded-lg shadow-soft">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">In Use</p>
-              <p className="text-2xl font-bold text-blue-600">{inUseVehicles.length}</p>
+              <p className="text-sm text-muted-foreground">In Use</p>
+              <p className="text-2xl font-bold text-blue-600 dark:text-blue-500">{inUseVehicles.length}</p>
             </div>
-            <Car className="h-8 w-8 text-blue-400" />
+            <Car className="h-8 w-8 text-blue-500 dark:text-blue-600" />
           </div>
         </div>
-        <div className="bg-white p-4 rounded-lg shadow">
+        <div className="bg-card border border-border p-4 rounded-lg shadow-soft">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Maintenance</p>
-              <p className="text-2xl font-bold text-orange-600">{maintenanceVehicles.length}</p>
+              <p className="text-sm text-muted-foreground">Maintenance</p>
+              <p className="text-2xl font-bold text-orange-600 dark:text-orange-500">{maintenanceVehicles.length}</p>
             </div>
-            <Wrench className="h-8 w-8 text-orange-400" />
+            <Wrench className="h-8 w-8 text-orange-500 dark:text-orange-600" />
           </div>
         </div>
       </div>
 
       {/* Add/Edit Form */}
       {showForm && (
-        <div className="bg-white p-6 rounded-lg shadow mb-6">
-          <h2 className="text-xl font-semibold mb-4">
+        <div className="bg-card border border-border p-6 rounded-lg shadow-medium mb-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4">
             {editingVehicle ? 'Edit Vehicle' : 'Add New Vehicle'}
           </h2>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Vehicle Name *
                 </label>
                 <input
@@ -258,18 +258,18 @@ export function VehicleList() {
                   value={formData.name}
                   onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                   placeholder="e.g., Blue Van, Suburban #3"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Vehicle Type *
                 </label>
                 <select
                   required
                   value={formData.type}
                   onChange={(e) => setFormData({ ...formData, type: e.target.value })}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 >
                   {VEHICLE_TYPES.map((type) => (
                     <option key={type.value} value={type.value}>
@@ -279,7 +279,7 @@ export function VehicleList() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   License Plate
                 </label>
                 <input
@@ -287,11 +287,11 @@ export function VehicleList() {
                   value={formData.licensePlate}
                   onChange={(e) => setFormData({ ...formData, licensePlate: e.target.value })}
                   placeholder="ABC-1234"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Seat Capacity *
                 </label>
                 <input
@@ -301,18 +301,18 @@ export function VehicleList() {
                   max="60"
                   value={formData.seatCapacity}
                   onChange={(e) => setFormData({ ...formData, seatCapacity: parseInt(e.target.value) })}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Status *
                 </label>
                 <select
                   required
                   value={formData.status}
                   onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 >
                   {VEHICLE_STATUS.map((status) => (
                     <option key={status.value} value={status.value}>
@@ -322,7 +322,7 @@ export function VehicleList() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-foreground mb-1">
                   Notes
                 </label>
                 <input
@@ -330,7 +330,7 @@ export function VehicleList() {
                   value={formData.notes}
                   onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                   placeholder="Optional notes"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
+                  className="w-full px-3 py-2 border border-input rounded-lg focus:ring-primary focus:border-primary bg-background text-foreground transition-colors"
                 />
               </div>
             </div>
@@ -338,14 +338,14 @@ export function VehicleList() {
               <button
                 type="submit"
                 disabled={createMutation.isPending || updateMutation.isPending}
-                className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
+                className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50 transition-colors"
               >
                 {editingVehicle ? 'Update Vehicle' : 'Create Vehicle'}
               </button>
               <button
                 type="button"
                 onClick={resetForm}
-                className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+                className="px-4 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80 transition-colors"
               >
                 Cancel
               </button>
@@ -355,77 +355,77 @@ export function VehicleList() {
       )}
 
       {/* Vehicle List */}
-      <div className="bg-white shadow rounded-lg overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+      <div className="bg-card border border-border shadow-medium rounded-lg overflow-hidden">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/30">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Vehicle
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Type
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 License Plate
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Seats
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Status
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Current Driver
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Upcoming Trips
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {vehicles?.map((vehicle) => (
-              <tr key={vehicle.id}>
+              <tr key={vehicle.id} className="hover:bg-accent transition-colors">
                 <td className="px-6 py-4 whitespace-nowrap">
                   <div className="flex items-center">
                     {getStatusIcon(vehicle.status)}
-                    <span className="ml-2 text-sm font-medium text-gray-900">
+                    <span className="ml-2 text-sm font-medium text-foreground">
                       {vehicle.name}
                     </span>
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vehicle.type.replace('_', ' ')}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vehicle.licensePlate || '-'}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vehicle.seatCapacity}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   {getStatusBadge(vehicle.status)}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vehicle.currentDriver?.name || '-'}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vehicle.events?.length || 0}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm">
                   <div className="flex gap-2">
                     <button
                       onClick={() => handleEdit(vehicle)}
-                      className="text-blue-600 hover:text-blue-800"
+                      className="text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400 transition-colors"
                       title="Edit vehicle"
                     >
                       <Edit2 className="h-4 w-4" />
                     </button>
                     <button
                       onClick={() => handleDelete(vehicle.id, vehicle.name)}
-                      className="text-red-600 hover:text-red-800"
+                      className="text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-400 transition-colors"
                       title="Delete vehicle"
                     >
                       <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/pages/VipList.tsx b/frontend/src/pages/VipList.tsx
index 6d12b86..0d8a44a 100644
--- a/frontend/src/pages/VipList.tsx
+++ b/frontend/src/pages/VipList.tsx
@@ -225,7 +225,7 @@ export function VIPList() {
     return (
       <div>
         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
-          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">VIPs</h1>
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground">VIPs</h1>
           <button
             disabled
             className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
@@ -248,10 +248,10 @@ export function VIPList() {
   return (
     <div>
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
-        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">VIPs</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold text-foreground">VIPs</h1>
         <button
           onClick={handleAdd}
-          className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
+          className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors"
           style={{ minHeight: '44px' }}
         >
           <Plus className="h-5 w-5 mr-2" />
@@ -260,17 +260,17 @@ export function VIPList() {
       </div>
 
       {/* Search and Filter Section */}
-      <div className="bg-white shadow rounded-lg p-4 mb-6">
+      <div className="bg-card shadow-soft border border-border rounded-lg p-4 mb-6">
         <div className="flex gap-3">
           {/* Search */}
           <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
             <input
               type="text"
               placeholder="Search by name..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
+              className="w-full pl-10 pr-4 py-2.5 border border-input rounded-md focus:ring-ring focus:border-ring text-base bg-background text-foreground transition-colors"
               style={{ minHeight: '44px' }}
             />
           </div>
@@ -278,7 +278,7 @@ export function VIPList() {
           {/* Filter Button */}
           <button
             onClick={() => setFilterModalOpen(true)}
-            className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
+            className="inline-flex items-center px-4 py-2 border border-input rounded-md text-foreground bg-background hover:bg-accent font-medium transition-colors"
             style={{ minHeight: '44px' }}
           >
             <Filter className="h-5 w-5 mr-2" />
@@ -293,8 +293,8 @@ export function VIPList() {
 
         {/* Active Filter Chips */}
         {(selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
-          <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
-            <span className="text-sm text-gray-600 py-1.5">Active filters:</span>
+          <div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-border">
+            <span className="text-sm text-muted-foreground py-1.5">Active filters:</span>
             {selectedDepartments.map((dept) => (
               <FilterChip
                 key={dept}
@@ -313,15 +313,15 @@ export function VIPList() {
         )}
 
         {/* Results count */}
-        <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
-          <div className="text-sm text-gray-600">
-            Showing <span className="font-medium">{filteredVIPs.length}</span> of <span className="font-medium">{vips?.length || 0}</span> VIPs
-            {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
+        <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+          <div className="text-sm text-muted-foreground">
+            Showing <span className="font-medium text-foreground">{filteredVIPs.length}</span> of <span className="font-medium text-foreground">{vips?.length || 0}</span> VIPs
+            {debouncedSearchTerm !== searchTerm && <span className="ml-2 text-muted-foreground/70">(searching...)</span>}
           </div>
           {(searchTerm || selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
             <button
               onClick={handleClearFilters}
-              className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
+              className="inline-flex items-center px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
             >
               <X className="h-4 w-4 mr-1" />
               Clear All
@@ -331,12 +331,12 @@ export function VIPList() {
       </div>
 
       {/* Desktop Table View - shows on large screens */}
-      <div className="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+      <div className="hidden lg:block bg-card shadow-soft border border-border rounded-lg overflow-hidden">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/30">
             <tr>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('name')}
               >
                 <div className="flex items-center gap-2">
@@ -346,7 +346,7 @@ export function VIPList() {
                 </div>
               </th>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('organization')}
               >
                 <div className="flex items-center gap-2">
@@ -356,7 +356,7 @@ export function VIPList() {
                 </div>
               </th>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('department')}
               >
                 <div className="flex items-center gap-2">
@@ -366,7 +366,7 @@ export function VIPList() {
                 </div>
               </th>
               <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
+                className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-accent transition-colors"
                 onClick={() => handleSort('arrivalMode')}
               >
                 <div className="flex items-center gap-2">
@@ -375,31 +375,31 @@ export function VIPList() {
                   {sortColumn === 'arrivalMode' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
                 </div>
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 Actions
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {filteredVIPs.map((vip) => (
-              <tr key={vip.id} className="hover:bg-gray-50 transition-colors">
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+              <tr key={vip.id} className="hover:bg-accent transition-colors">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                   {vip.name}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vip.organization || '-'}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vip.department}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {vip.arrivalMode}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm">
                   <div className="flex gap-2">
                     <button
                       onClick={() => navigate(`/vips/${vip.id}/schedule`)}
-                      className="inline-flex items-center px-3 py-1 text-blue-600 hover:text-blue-800"
+                      className="inline-flex items-center px-3 py-1 text-blue-600 hover:text-blue-800 transition-colors"
                       style={{ minHeight: '36px' }}
                       title="View Schedule"
                     >
@@ -408,7 +408,7 @@ export function VIPList() {
                     </button>
                     <button
                       onClick={() => handleEdit(vip)}
-                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
+                      className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80 transition-colors"
                       style={{ minHeight: '36px' }}
                     >
                       <Edit className="h-4 w-4 mr-1" />
@@ -416,7 +416,7 @@ export function VIPList() {
                     </button>
                     <button
                       onClick={() => handleDelete(vip.id, vip.name)}
-                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
+                      className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800 transition-colors"
                       style={{ minHeight: '36px' }}
                     >
                       <Trash2 className="h-4 w-4 mr-1" />
@@ -433,31 +433,31 @@ export function VIPList() {
       {/* Mobile/Tablet Card View - shows on small and medium screens */}
       <div className="lg:hidden space-y-4">
         {filteredVIPs.map((vip) => (
-          <div key={vip.id} className="bg-white shadow rounded-lg p-4">
+          <div key={vip.id} className="bg-card shadow-soft border border-border rounded-lg p-4">
             <div className="flex justify-between items-start mb-3">
               <div>
-                <h3 className="text-lg font-semibold text-gray-900">{vip.name}</h3>
+                <h3 className="text-lg font-semibold text-foreground">{vip.name}</h3>
                 {vip.organization && (
-                  <p className="text-sm text-gray-600 mt-1">{vip.organization}</p>
+                  <p className="text-sm text-muted-foreground mt-1">{vip.organization}</p>
                 )}
               </div>
             </div>
 
             <div className="grid grid-cols-2 gap-3 mb-4">
               <div>
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Department</p>
-                <p className="text-sm text-gray-900 mt-1">{vip.department}</p>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Department</p>
+                <p className="text-sm text-foreground mt-1">{vip.department}</p>
               </div>
               <div>
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Arrival Mode</p>
-                <p className="text-sm text-gray-900 mt-1">{vip.arrivalMode}</p>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Arrival Mode</p>
+                <p className="text-sm text-foreground mt-1">{vip.arrivalMode}</p>
               </div>
             </div>
 
-            <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200">
+            <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-border">
               <button
                 onClick={() => navigate(`/vips/${vip.id}/schedule`)}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-blue-600 bg-background hover:bg-blue-50 transition-colors"
                 style={{ minHeight: '44px' }}
               >
                 <Calendar className="h-5 w-5 mr-2" />
@@ -465,7 +465,7 @@ export function VIPList() {
               </button>
               <button
                 onClick={() => handleEdit(vip)}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-primary bg-white hover:bg-gray-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-primary bg-background hover:bg-accent transition-colors"
                 style={{ minHeight: '44px' }}
               >
                 <Edit className="h-5 w-5 mr-2" />
@@ -473,7 +473,7 @@ export function VIPList() {
               </button>
               <button
                 onClick={() => handleDelete(vip.id, vip.name)}
-                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50"
+                className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-input text-sm font-medium rounded-md text-red-600 bg-background hover:bg-red-50 transition-colors"
                 style={{ minHeight: '44px' }}
               >
                 <Trash2 className="h-5 w-5 mr-2" />
diff --git a/frontend/src/types/settings.ts b/frontend/src/types/settings.ts
new file mode 100644
index 0000000..130a158
--- /dev/null
+++ b/frontend/src/types/settings.ts
@@ -0,0 +1,74 @@
+export enum PageSize {
+  LETTER = 'LETTER',
+  A4 = 'A4',
+}
+
+export interface PdfSettings {
+  id: string;
+
+  // Branding
+  organizationName: string;
+  logoUrl: string | null;
+  accentColor: string;
+  tagline: string | null;
+
+  // Contact Info
+  contactEmail: string;
+  contactPhone: string;
+  secondaryContactName: string | null;
+  secondaryContactPhone: string | null;
+  contactLabel: string;
+
+  // Document Options
+  showDraftWatermark: boolean;
+  showConfidentialWatermark: boolean;
+  showTimestamp: boolean;
+  showAppUrl: boolean;
+  pageSize: PageSize;
+
+  // Content Toggles
+  showFlightInfo: boolean;
+  showDriverNames: boolean;
+  showVehicleNames: boolean;
+  showVipNotes: boolean;
+  showEventDescriptions: boolean;
+
+  // Custom Text
+  headerMessage: string | null;
+  footerMessage: string | null;
+
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UpdatePdfSettingsDto {
+  // Branding
+  organizationName?: string;
+  accentColor?: string;
+  tagline?: string;
+
+  // Contact Info
+  contactEmail?: string;
+  contactPhone?: string;
+  secondaryContactName?: string;
+  secondaryContactPhone?: string;
+  contactLabel?: string;
+
+  // Document Options
+  showDraftWatermark?: boolean;
+  showConfidentialWatermark?: boolean;
+  showTimestamp?: boolean;
+  showAppUrl?: boolean;
+  pageSize?: PageSize;
+
+  // Content Toggles
+  showFlightInfo?: boolean;
+  showDriverNames?: boolean;
+  showVehicleNames?: boolean;
+  showVipNotes?: boolean;
+  showEventDescriptions?: boolean;
+
+  // Custom Text
+  headerMessage?: string;
+  footerMessage?: string;
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 225a853..77c59c3 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -5,6 +5,9 @@ interface ImportMetaEnv {
   readonly VITE_AUTH0_DOMAIN: string;
   readonly VITE_AUTH0_CLIENT_ID: string;
   readonly VITE_AUTH0_AUDIENCE: string;
+  readonly VITE_CONTACT_EMAIL?: string;
+  readonly VITE_CONTACT_PHONE?: string;
+  readonly VITE_ORGANIZATION_NAME?: string;
 }
 
 interface ImportMeta {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6722c85..0ea802a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -41,6 +41,23 @@ export default {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+        },
+        surface: {
+          1: 'hsl(var(--surface-1))',
+          2: 'hsl(var(--surface-2))',
+          3: 'hsl(var(--surface-3))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',