diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 27ea8bdec..1ef0c7086 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -24,6 +24,38 @@ The web package is copied into the landing package during build and deployed as
 
 Do not worry about migrations (client side or backend) unless specifically instructed. This project is not in production and has no users.
 
+## Build Commands
+
+```bash
+# Development
+pnpm dev:front              # Frontend web app (port 5173 and port 3010)
+pnpm dev:workers      # Backend workers (port 8787)
+pnpm --filter web build        # Main web SPA frontend
+pnpm --filter landing build     # Landing site only
+
+# Testing
+pnpm test             # Run all tests
+pnpm --filter web test          # Frontend tests only
+pnpm --filter workers test              # Backend tests only
+pnpm --filter web vitest run path/file  # Single test file
+
+# Code Quality
+pnpm lint             # ESLint check
+pnpm lint:fix         # Auto-fix lint issues
+pnpm format           # Prettier format
+pnpm typecheck        # TypeScript check
+
+# Database (workers package)
+pnpm --filter workers db:generate    # Generate Drizzle migrations
+pnpm --filter workers db:migrate     # Apply migrations locally
+
+# Other
+pnpm build            # Build all packages
+pnpm docs             # View docs site (port 8080)
+pnpm openapi          # Generate OpenAPI schema
+pnpm logs             # View production worker logs
+```
+
 ## Critical Rules
 
 ### Coding Standards
diff --git a/.claude/settings.json b/.claude/settings.json
index 903088848..24448ed81 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,5 +1,6 @@
 {
   "enabledPlugins": {
-    "frontend-design@claude-plugins-official": true
+    "frontend-design@claude-plugins-official": true,
+    "plugin-dev@claude-plugins-official": true
   }
 }
diff --git a/.claude/skills/api-route/SKILL.md b/.claude/skills/api-route/SKILL.md
new file mode 100644
index 000000000..1228d2e77
--- /dev/null
+++ b/.claude/skills/api-route/SKILL.md
@@ -0,0 +1,368 @@
+---
+name: API Route
+description: This skill should be used when the user asks to "create an API route", "add an endpoint", "build a backend route", "create an API endpoint", "add a Hono route", or mentions creating REST endpoints, API handlers, or backend routes. Provides Hono API patterns for CoRATES workers.
+---
+
+# API Route Creation
+
+Create Hono API routes following CoRATES workers patterns.
+
+## Core Principles
+
+1. **Middleware composition** - Chain auth, permissions, validation middleware
+2. **Domain errors** - Use createDomainError from @corates/shared
+3. **Zod validation** - Define schemas centrally in config/validation.js
+4. **Drizzle ORM** - All database operations through Drizzle
+5. **Context isolation** - Attach data to Hono context, read via getters
+
+## Quick Reference
+
+### File Location
+
+```
+packages/workers/src/
+  routes/
+    [feature].js           # Standalone routes
+    [feature]/
+      index.js             # Route composition
+      [subroute].js        # Nested routes
+  config/
+    validation.js          # Zod schemas
+  middleware/
+    auth.js                # Authentication
+    requireOrg.js          # Org membership
+```
+
+### Basic Route Template
+
+```javascript
+import { Hono } from 'hono';
+import { eq, and } from 'drizzle-orm';
+import { createDb } from '@/db/client.js';
+import { items } from '@/db/schema.js';
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { validateRequest } from '@/config/validation.js';
+import { createDomainError, ITEM_ERRORS, SYSTEM_ERRORS } from '@corates/shared';
+import { itemSchemas } from '@/config/validation.js';
+
+const itemRoutes = new Hono();
+
+// Apply auth to all routes
+itemRoutes.use('*', requireAuth);
+
+// GET - List items
+itemRoutes.get('/', async c => {
+  const { user } = getAuth(c);
+  const db = createDb(c.env.DB);
+
+  try {
+    const results = await db.select().from(items).where(eq(items.userId, user.id));
+
+    return c.json(results);
+  } catch (error) {
+    console.error('Error fetching items:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_items',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+// POST - Create item
+itemRoutes.post('/', validateRequest(itemSchemas.create), async c => {
+  const { user } = getAuth(c);
+  const { name, description } = c.get('validatedBody');
+  const db = createDb(c.env.DB);
+
+  try {
+    const id = crypto.randomUUID();
+    const now = new Date();
+
+    await db.insert(items).values({
+      id,
+      name,
+      description,
+      userId: user.id,
+      createdAt: now,
+    });
+
+    return c.json({ id, name, description }, 201);
+  } catch (error) {
+    console.error('Error creating item:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'create_item',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+export { itemRoutes };
+```
+
+## Middleware Chain
+
+Apply middleware in order of specificity:
+
+```javascript
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { requireOrgMembership, getOrgContext } from '@/middleware/requireOrg.js';
+import { requireOrgWriteAccess } from '@/middleware/requireOrgWriteAccess.js';
+import { requireEntitlement } from '@/middleware/requireEntitlement.js';
+import { requireQuota } from '@/middleware/requireQuota.js';
+import { validateRequest } from '@/config/validation.js';
+
+// Full middleware chain for protected route
+routes.post(
+  '/',
+  requireOrgMembership(), // Check org membership
+  requireOrgWriteAccess(), // Check write permission
+  requireEntitlement('feature.x'), // Check feature access
+  requireQuota('items.max', getItemCount, 1), // Check quota
+  validateRequest(schema), // Validate body
+  async c => {
+    const { user } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+    const data = c.get('validatedBody');
+    // Handler code...
+  },
+);
+```
+
+### Context Getters
+
+```javascript
+// Authentication
+const { user, session } = getAuth(c);
+
+// Organization context (after requireOrgMembership)
+const { orgId, orgRole, org } = getOrgContext(c);
+
+// Validated request body (after validateRequest)
+const data = c.get('validatedBody');
+
+// Billing/entitlements (after requireEntitlement)
+const entitlements = c.get('entitlements');
+const quotas = c.get('quotas');
+```
+
+## Zod Validation
+
+### Define Schemas
+
+Add to `packages/workers/src/config/validation.js`:
+
+```javascript
+export const itemSchemas = {
+  create: z.object({
+    name: z
+      .string()
+      .min(1, 'Name is required')
+      .max(255)
+      .transform(val => val.trim()),
+    description: z
+      .string()
+      .max(2000)
+      .optional()
+      .transform(val => val?.trim() || null),
+  }),
+
+  update: z.object({
+    name: z.string().min(1).max(255).optional(),
+    description: z.string().max(2000).optional(),
+  }),
+};
+```
+
+### Common Patterns
+
+```javascript
+// Required string with trim
+name: z.string().min(1).max(255).transform(val => val.trim()),
+
+// Optional with null fallback
+description: z.string().max(2000).optional().transform(val => val?.trim() || null),
+
+// Email
+email: z.string().email('Invalid email'),
+
+// UUID
+id: z.string().uuid(),
+
+// Enum
+role: z.enum(['owner', 'admin', 'member', 'viewer']),
+
+// Boolean with default
+active: z.boolean().optional().default(true),
+```
+
+## Error Handling
+
+### Domain Errors
+
+```javascript
+import { createDomainError, PROJECT_ERRORS, AUTH_ERRORS, SYSTEM_ERRORS } from '@corates/shared';
+
+// Not found
+const error = createDomainError(PROJECT_ERRORS.NOT_FOUND, { projectId });
+return c.json(error, error.statusCode);
+
+// Forbidden with reason
+const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+  reason: 'insufficient_role',
+  required: 'admin',
+});
+return c.json(error, error.statusCode);
+
+// Database error
+const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+  operation: 'create_item',
+  originalError: error.message,
+});
+return c.json(dbError, dbError.statusCode);
+```
+
+### Try-Catch Pattern
+
+```javascript
+routes.get('/:id', async c => {
+  const { user } = getAuth(c);
+  const id = c.req.param('id');
+  const db = createDb(c.env.DB);
+
+  try {
+    const result = await db
+      .select()
+      .from(items)
+      .where(and(eq(items.id, id), eq(items.userId, user.id)))
+      .get();
+
+    if (!result) {
+      const error = createDomainError(ITEM_ERRORS.NOT_FOUND, { id });
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json(result);
+  } catch (error) {
+    console.error('Error fetching item:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_item',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+```
+
+## Database Operations
+
+### Query Patterns
+
+```javascript
+import { createDb } from '@/db/client.js';
+import { eq, and, or, like, desc, sql } from 'drizzle-orm';
+
+const db = createDb(c.env.DB);
+
+// Select with join
+const results = await db
+  .select({
+    id: projects.id,
+    name: projects.name,
+    role: projectMembers.role,
+  })
+  .from(projects)
+  .innerJoin(projectMembers, eq(projects.id, projectMembers.projectId))
+  .where(eq(projectMembers.userId, user.id))
+  .orderBy(desc(projects.updatedAt));
+
+// Single record
+const item = await db
+  .select()
+  .from(items)
+  .where(eq(items.id, id))
+  .get();
+
+// Insert
+await db.insert(items).values({ id, name, createdAt: now });
+
+// Update
+await db.update(items)
+  .set({ name, updatedAt: now })
+  .where(eq(items.id, id));
+
+// Delete
+await db.delete(items).where(eq(items.id, id));
+
+// Batch for atomic operations
+await db.batch([
+  db.insert(projects).values({ ... }),
+  db.insert(projectMembers).values({ ... }),
+]);
+```
+
+## Response Patterns
+
+```javascript
+// Success with data
+return c.json(result);
+
+// Created (201)
+return c.json(newItem, 201);
+
+// Success flag
+return c.json({ success: true, id: itemId });
+
+// Array response
+return c.json(results);
+
+// Error response
+return c.json(error, error.statusCode);
+```
+
+## Route Registration
+
+### Mount in Main App
+
+```javascript
+// packages/workers/src/index.js
+import { itemRoutes } from './routes/items.js';
+
+app.route('/api/items', itemRoutes);
+```
+
+### Nested Routes
+
+```javascript
+// In parent route file
+import { subRoutes } from './subroute.js';
+
+parentRoutes.route('/:parentId/children', subRoutes);
+
+// Creates: /api/parent/:parentId/children/...
+```
+
+## Creation Checklist
+
+When creating an API route:
+
+1. Create route file in `packages/workers/src/routes/`
+2. Define Zod schemas in `config/validation.js`
+3. Apply appropriate middleware chain
+4. Use context getters for auth/org/validated data
+5. Use Drizzle for all database operations
+6. Return domain errors with proper status codes
+7. Register route in `index.js`
+
+## Additional Resources
+
+### Reference Files
+
+For detailed patterns:
+
+- **`references/patterns.md`** - Middleware details, complex queries, nested routes
+- **`references/examples.md`** - Real route examples from the codebase
+
+### Example Files
+
+Working templates in `examples/`:
+
+- **`ExampleRoutes.js`** - Complete CRUD route template
diff --git a/.claude/skills/api-route/examples/ExampleRoutes.js b/.claude/skills/api-route/examples/ExampleRoutes.js
new file mode 100644
index 000000000..157846108
--- /dev/null
+++ b/.claude/skills/api-route/examples/ExampleRoutes.js
@@ -0,0 +1,384 @@
+/**
+ * Example API Route Template
+ *
+ * Demonstrates all key patterns for CoRATES API routes.
+ * Copy and modify for new route files.
+ */
+
+import { Hono } from 'hono';
+import { eq, and, desc, count } from 'drizzle-orm';
+import { z } from 'zod';
+
+// Database
+import { createDb } from '@/db/client.js';
+import { items, itemMembers } from '@/db/schema.js';
+
+// Middleware
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { requireOrgMembership, getOrgContext } from '@/middleware/requireOrg.js';
+import { requireOrgWriteAccess } from '@/middleware/requireOrgWriteAccess.js';
+import { requireEntitlement } from '@/middleware/requireEntitlement.js';
+import { requireQuota } from '@/middleware/requireQuota.js';
+import { validateRequest } from '@/config/validation.js';
+
+// Errors
+import {
+  createDomainError,
+  createValidationError,
+  AUTH_ERRORS,
+  SYSTEM_ERRORS,
+  VALIDATION_ERRORS,
+} from '@corates/shared';
+
+// ---------------------
+// Zod Schemas
+// ---------------------
+// Add these to packages/workers/src/config/validation.js
+
+export const itemSchemas = {
+  create: z.object({
+    name: z
+      .string()
+      .min(1, 'Name is required')
+      .max(255, 'Name must be 255 characters or less')
+      .transform(val => val.trim()),
+    description: z
+      .string()
+      .max(2000, 'Description must be 2000 characters or less')
+      .optional()
+      .transform(val => val?.trim() || null),
+    type: z.enum(['typeA', 'typeB', 'typeC']).optional().default('typeA'),
+    active: z.boolean().optional().default(true),
+  }),
+
+  update: z.object({
+    name: z
+      .string()
+      .min(1)
+      .max(255)
+      .optional()
+      .transform(val => val?.trim()),
+    description: z
+      .string()
+      .max(2000)
+      .optional()
+      .transform(val => val?.trim() || null),
+    type: z.enum(['typeA', 'typeB', 'typeC']).optional(),
+    active: z.boolean().optional(),
+  }),
+};
+
+// Define custom error codes in @corates/shared if needed
+const ITEM_ERRORS = {
+  NOT_FOUND: { code: 'ITEM_NOT_FOUND', statusCode: 404, message: 'Item not found' },
+  ALREADY_EXISTS: { code: 'ITEM_ALREADY_EXISTS', statusCode: 409, message: 'Item already exists' },
+};
+
+// ---------------------
+// Route Setup
+// ---------------------
+
+const itemRoutes = new Hono();
+
+// Apply authentication to all routes
+itemRoutes.use('*', requireAuth);
+
+// ---------------------
+// Helper Functions
+// ---------------------
+
+/**
+ * Get item count for quota check
+ */
+async function getItemCount(c, user) {
+  const { orgId } = getOrgContext(c);
+  const db = createDb(c.env.DB);
+  const [result] = await db.select({ count: count() }).from(items).where(eq(items.orgId, orgId));
+  return result?.count || 0;
+}
+
+// ---------------------
+// Routes
+// ---------------------
+
+/**
+ * GET / - List items
+ *
+ * Query params:
+ * - limit: number (default 50, max 100)
+ * - offset: number (default 0)
+ * - type: string (filter by type)
+ */
+itemRoutes.get('/', requireOrgMembership(), async c => {
+  const { user } = getAuth(c);
+  const { orgId } = getOrgContext(c);
+  const db = createDb(c.env.DB);
+
+  // Parse query params
+  const limit = Math.min(parseInt(c.req.query('limit') || '50', 10), 100);
+  const offset = parseInt(c.req.query('offset') || '0', 10);
+  const typeFilter = c.req.query('type');
+
+  try {
+    let query = db
+      .select({
+        id: items.id,
+        name: items.name,
+        description: items.description,
+        type: items.type,
+        active: items.active,
+        createdAt: items.createdAt,
+        updatedAt: items.updatedAt,
+      })
+      .from(items)
+      .where(eq(items.orgId, orgId))
+      .orderBy(desc(items.updatedAt))
+      .limit(limit)
+      .offset(offset);
+
+    // Apply type filter if provided
+    if (typeFilter) {
+      query = query.where(and(eq(items.orgId, orgId), eq(items.type, typeFilter)));
+    }
+
+    const results = await query;
+
+    // Get total count for pagination
+    const [countResult] = await db
+      .select({ count: count() })
+      .from(items)
+      .where(eq(items.orgId, orgId));
+
+    return c.json({
+      items: results,
+      pagination: {
+        total: countResult?.count || 0,
+        limit,
+        offset,
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching items:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_items',
+      originalError: error.message,
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+/**
+ * GET /:id - Get single item
+ */
+itemRoutes.get('/:id', requireOrgMembership(), async c => {
+  const { user } = getAuth(c);
+  const { orgId } = getOrgContext(c);
+  const itemId = c.req.param('id');
+  const db = createDb(c.env.DB);
+
+  try {
+    const result = await db
+      .select()
+      .from(items)
+      .where(and(eq(items.id, itemId), eq(items.orgId, orgId)))
+      .get();
+
+    if (!result) {
+      const error = createDomainError(ITEM_ERRORS.NOT_FOUND, { itemId });
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json(result);
+  } catch (error) {
+    console.error('Error fetching item:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_item',
+      originalError: error.message,
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+/**
+ * POST / - Create item
+ *
+ * Full middleware chain:
+ * 1. requireOrgMembership - Check user is org member
+ * 2. requireOrgWriteAccess - Check user has write permission
+ * 3. requireEntitlement - Check org has feature access
+ * 4. requireQuota - Check org hasn't exceeded quota
+ * 5. validateRequest - Validate request body
+ */
+itemRoutes.post(
+  '/',
+  requireOrgMembership(),
+  requireOrgWriteAccess(),
+  requireEntitlement('items.create'),
+  requireQuota('items.max', getItemCount, 1),
+  validateRequest(itemSchemas.create),
+  async c => {
+    const { user } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+    const { name, description, type, active } = c.get('validatedBody');
+    const db = createDb(c.env.DB);
+
+    const itemId = crypto.randomUUID();
+    const now = new Date();
+
+    try {
+      await db.insert(items).values({
+        id: itemId,
+        orgId,
+        name,
+        description,
+        type,
+        active,
+        createdBy: user.id,
+        createdAt: now,
+        updatedAt: now,
+      });
+
+      const newItem = {
+        id: itemId,
+        orgId,
+        name,
+        description,
+        type,
+        active,
+        createdAt: now,
+        updatedAt: now,
+      };
+
+      return c.json(newItem, 201);
+    } catch (error) {
+      console.error('Error creating item:', error);
+
+      // Handle unique constraint violation
+      if (error?.message?.includes('UNIQUE constraint failed')) {
+        const conflictError = createDomainError(ITEM_ERRORS.ALREADY_EXISTS, {
+          name,
+        });
+        return c.json(conflictError, conflictError.statusCode);
+      }
+
+      const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+        operation: 'create_item',
+        originalError: error.message,
+      });
+      return c.json(dbError, dbError.statusCode);
+    }
+  },
+);
+
+/**
+ * PATCH /:id - Update item
+ */
+itemRoutes.patch(
+  '/:id',
+  requireOrgMembership(),
+  requireOrgWriteAccess(),
+  validateRequest(itemSchemas.update),
+  async c => {
+    const { user } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+    const itemId = c.req.param('id');
+    const updates = c.get('validatedBody');
+    const db = createDb(c.env.DB);
+
+    try {
+      // Verify item exists and belongs to org
+      const existing = await db
+        .select({ id: items.id })
+        .from(items)
+        .where(and(eq(items.id, itemId), eq(items.orgId, orgId)))
+        .get();
+
+      if (!existing) {
+        const error = createDomainError(ITEM_ERRORS.NOT_FOUND, { itemId });
+        return c.json(error, error.statusCode);
+      }
+
+      // Build update object with only provided fields
+      const updateData = { updatedAt: new Date() };
+      if (updates.name !== undefined) updateData.name = updates.name;
+      if (updates.description !== undefined) updateData.description = updates.description;
+      if (updates.type !== undefined) updateData.type = updates.type;
+      if (updates.active !== undefined) updateData.active = updates.active;
+
+      await db.update(items).set(updateData).where(eq(items.id, itemId));
+
+      return c.json({ success: true, itemId });
+    } catch (error) {
+      console.error('Error updating item:', error);
+      const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+        operation: 'update_item',
+        originalError: error.message,
+      });
+      return c.json(dbError, dbError.statusCode);
+    }
+  },
+);
+
+/**
+ * DELETE /:id - Delete item
+ *
+ * Requires owner/admin role via requireOrgMembership('admin')
+ */
+itemRoutes.delete('/:id', requireOrgMembership('admin'), async c => {
+  const { user } = getAuth(c);
+  const { orgId } = getOrgContext(c);
+  const itemId = c.req.param('id');
+  const db = createDb(c.env.DB);
+
+  try {
+    // Verify item exists
+    const existing = await db
+      .select({ id: items.id })
+      .from(items)
+      .where(and(eq(items.id, itemId), eq(items.orgId, orgId)))
+      .get();
+
+    if (!existing) {
+      const error = createDomainError(ITEM_ERRORS.NOT_FOUND, { itemId });
+      return c.json(error, error.statusCode);
+    }
+
+    // Delete with cascade (if needed)
+    await db.batch([
+      // Delete related records first
+      db.delete(itemMembers).where(eq(itemMembers.itemId, itemId)),
+      // Then delete main record
+      db.delete(items).where(eq(items.id, itemId)),
+    ]);
+
+    return c.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting item:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'delete_item',
+      originalError: error.message,
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+// ---------------------
+// Nested Routes Example
+// ---------------------
+
+// Import and mount nested routes
+// import { itemMemberRoutes } from './item-members.js';
+// itemRoutes.route('/:itemId/members', itemMemberRoutes);
+
+// ---------------------
+// Export
+// ---------------------
+
+export { itemRoutes };
+
+// ---------------------
+// Registration (in index.js)
+// ---------------------
+
+// import { itemRoutes } from './routes/items.js';
+// app.route('/api/orgs/:orgId/items', itemRoutes);
diff --git a/.claude/skills/api-route/references/examples.md b/.claude/skills/api-route/references/examples.md
new file mode 100644
index 000000000..a2385c262
--- /dev/null
+++ b/.claude/skills/api-route/references/examples.md
@@ -0,0 +1,572 @@
+# Real API Route Examples
+
+Working examples from the CoRATES workers codebase.
+
+## Project Routes (Org-Scoped)
+
+Location: `packages/workers/src/routes/orgs/projects.js`
+
+Full CRUD with middleware chain:
+
+```javascript
+import { Hono } from 'hono';
+import { eq, and, desc } from 'drizzle-orm';
+import { createDb } from '@/db/client.js';
+import { projects, projectMembers, user } from '@/db/schema.js';
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { requireOrgMembership, getOrgContext } from '@/middleware/requireOrg.js';
+import { requireOrgWriteAccess } from '@/middleware/requireOrgWriteAccess.js';
+import { requireEntitlement } from '@/middleware/requireEntitlement.js';
+import { requireQuota } from '@/middleware/requireQuota.js';
+import { validateRequest, projectSchemas } from '@/config/validation.js';
+import { createDomainError, PROJECT_ERRORS, SYSTEM_ERRORS } from '@corates/shared';
+import { syncProjectToDO } from '@/lib/project-sync.js';
+
+const orgProjectRoutes = new Hono();
+
+// Auth required for all routes
+orgProjectRoutes.use('*', requireAuth);
+
+// Helper for quota check
+async function getProjectCount(c, user) {
+  const { orgId } = getOrgContext(c);
+  const db = createDb(c.env.DB);
+  const [result] = await db.select({ count: count() }).from(projects).where(eq(projects.orgId, orgId));
+  return result?.count || 0;
+}
+
+// GET /api/orgs/:orgId/projects - List org projects
+orgProjectRoutes.get('/', requireOrgMembership(), async c => {
+  const { user: authUser } = getAuth(c);
+  const { orgId } = getOrgContext(c);
+  const db = createDb(c.env.DB);
+
+  try {
+    const results = await db
+      .select({
+        id: projects.id,
+        name: projects.name,
+        description: projects.description,
+        createdAt: projects.createdAt,
+        updatedAt: projects.updatedAt,
+        role: projectMembers.role,
+      })
+      .from(projects)
+      .innerJoin(projectMembers, eq(projects.id, projectMembers.projectId))
+      .where(and(eq(projects.orgId, orgId), eq(projectMembers.userId, authUser.id)))
+      .orderBy(desc(projects.updatedAt));
+
+    return c.json(results);
+  } catch (error) {
+    console.error('Error fetching org projects:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_org_projects',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+// POST /api/orgs/:orgId/projects - Create project
+orgProjectRoutes.post(
+  '/',
+  requireOrgMembership(),
+  requireOrgWriteAccess(),
+  requireEntitlement('project.create'),
+  requireQuota('projects.max', getProjectCount, 1),
+  validateRequest(projectSchemas.create),
+  async c => {
+    const { user: authUser } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+    const { name, description } = c.get('validatedBody');
+    const db = createDb(c.env.DB);
+
+    const projectId = crypto.randomUUID();
+    const memberId = crypto.randomUUID();
+    const now = new Date();
+
+    try {
+      await db.batch([
+        db.insert(projects).values({
+          id: projectId,
+          orgId,
+          name: name.trim(),
+          description: description?.trim() || null,
+          createdBy: authUser.id,
+          createdAt: now,
+          updatedAt: now,
+        }),
+        db.insert(projectMembers).values({
+          id: memberId,
+          projectId,
+          userId: authUser.id,
+          role: 'owner',
+          joinedAt: now,
+        }),
+      ]);
+
+      // Get creator info for DO sync
+      const creator = await db
+        .select({ name: user.name, email: user.email, image: user.image })
+        .from(user)
+        .where(eq(user.id, authUser.id))
+        .get();
+
+      const newProject = {
+        id: projectId,
+        orgId,
+        name: name.trim(),
+        description: description?.trim() || null,
+        role: 'owner',
+        createdAt: now,
+        updatedAt: now,
+      };
+
+      // Sync to Durable Object (best-effort)
+      try {
+        await syncProjectToDO(
+          c.env,
+          projectId,
+          {
+            meta: { title: name.trim(), description: description?.trim() || '' },
+          },
+          [
+            {
+              odId: authUser.id,
+              name: creator?.name || '',
+              email: creator?.email || '',
+              image: creator?.image || '',
+              role: 'owner',
+            },
+          ],
+        );
+      } catch (err) {
+        console.error('Failed to sync project to DO:', err);
+      }
+
+      return c.json(newProject, 201);
+    } catch (error) {
+      console.error('Error creating project:', error);
+      const dbError = createDomainError(SYSTEM_ERRORS.DB_TRANSACTION_FAILED, {
+        operation: 'create_project',
+      });
+      return c.json(dbError, dbError.statusCode);
+    }
+  },
+);
+
+// GET /api/orgs/:orgId/projects/:projectId - Get project
+orgProjectRoutes.get('/:projectId', requireOrgMembership(), async c => {
+  const { user: authUser } = getAuth(c);
+  const projectId = c.req.param('projectId');
+  const db = createDb(c.env.DB);
+
+  try {
+    const result = await db
+      .select({
+        id: projects.id,
+        name: projects.name,
+        description: projects.description,
+        role: projectMembers.role,
+        createdAt: projects.createdAt,
+        updatedAt: projects.updatedAt,
+      })
+      .from(projects)
+      .innerJoin(projectMembers, eq(projects.id, projectMembers.projectId))
+      .where(and(eq(projects.id, projectId), eq(projectMembers.userId, authUser.id)))
+      .get();
+
+    if (!result) {
+      const error = createDomainError(PROJECT_ERRORS.NOT_FOUND, { projectId });
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json(result);
+  } catch (error) {
+    console.error('Error fetching project:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_project',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+// PATCH /api/orgs/:orgId/projects/:projectId - Update project
+orgProjectRoutes.patch(
+  '/:projectId',
+  requireOrgMembership(),
+  requireOrgWriteAccess(),
+  validateRequest(projectSchemas.update),
+  async c => {
+    const { user: authUser } = getAuth(c);
+    const projectId = c.req.param('projectId');
+    const updates = c.get('validatedBody');
+    const db = createDb(c.env.DB);
+
+    try {
+      // Check membership
+      const membership = await db
+        .select({ role: projectMembers.role })
+        .from(projectMembers)
+        .where(and(eq(projectMembers.projectId, projectId), eq(projectMembers.userId, authUser.id)))
+        .get();
+
+      if (!membership) {
+        const error = createDomainError(PROJECT_ERRORS.NOT_FOUND, { projectId });
+        return c.json(error, error.statusCode);
+      }
+
+      // Build update object
+      const updateData = { updatedAt: new Date() };
+      if (updates.name !== undefined) updateData.name = updates.name.trim();
+      if (updates.description !== undefined) {
+        updateData.description = updates.description?.trim() || null;
+      }
+
+      await db.update(projects).set(updateData).where(eq(projects.id, projectId));
+
+      return c.json({ success: true, projectId });
+    } catch (error) {
+      console.error('Error updating project:', error);
+      const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+        operation: 'update_project',
+      });
+      return c.json(dbError, dbError.statusCode);
+    }
+  },
+);
+
+// DELETE /api/orgs/:orgId/projects/:projectId - Delete project
+orgProjectRoutes.delete('/:projectId', requireOrgMembership('owner'), async c => {
+  const { user: authUser } = getAuth(c);
+  const projectId = c.req.param('projectId');
+  const db = createDb(c.env.DB);
+
+  try {
+    // Verify owner role
+    const membership = await db
+      .select({ role: projectMembers.role })
+      .from(projectMembers)
+      .where(and(eq(projectMembers.projectId, projectId), eq(projectMembers.userId, authUser.id)))
+      .get();
+
+    if (!membership || membership.role !== 'owner') {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'not_project_owner',
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    // Cascade delete
+    await db.batch([
+      db.delete(projectMembers).where(eq(projectMembers.projectId, projectId)),
+      db.delete(invitations).where(eq(invitations.projectId, projectId)),
+      db.delete(projects).where(eq(projects.id, projectId)),
+    ]);
+
+    return c.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting project:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'delete_project',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+export { orgProjectRoutes };
+```
+
+---
+
+## User Search Route
+
+Location: `packages/workers/src/routes/users.js`
+
+Search with privacy controls:
+
+```javascript
+import { Hono } from 'hono';
+import { eq, or, like, sql } from 'drizzle-orm';
+import { createDb } from '@/db/client.js';
+import { user, projectMembers } from '@/db/schema.js';
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { searchRateLimit } from '@/middleware/rateLimit.js';
+import { createDomainError, createValidationError, VALIDATION_ERRORS, SYSTEM_ERRORS } from '@corates/shared';
+
+const userRoutes = new Hono();
+
+userRoutes.use('*', requireAuth);
+
+// Helper to mask email for privacy
+function maskEmail(email) {
+  if (!email) return '';
+  const [local, domain] = email.split('@');
+  if (!domain) return email;
+  const maskedLocal = local.charAt(0) + '***';
+  return `${maskedLocal}@${domain}`;
+}
+
+// GET /api/users/search - Search users
+userRoutes.get('/search', searchRateLimit, async c => {
+  const { user: currentUser } = getAuth(c);
+  const query = c.req.query('q')?.trim();
+  const projectId = c.req.query('projectId');
+  const limit = Math.min(parseInt(c.req.query('limit') || '10', 10), 20);
+
+  // Validate query
+  if (!query || query.length < 2) {
+    const error = createValidationError('query', VALIDATION_ERRORS.FIELD_TOO_SHORT.code);
+    return c.json(error, error.statusCode);
+  }
+
+  const db = createDb(c.env.DB);
+  const searchPattern = `%${query.toLowerCase()}%`;
+
+  try {
+    // Search across multiple fields
+    let results = await db
+      .select({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        displayName: user.displayName,
+        image: user.image,
+      })
+      .from(user)
+      .where(
+        or(
+          like(sql`lower(${user.email})`, searchPattern),
+          like(sql`lower(${user.name})`, searchPattern),
+          like(sql`lower(${user.displayName})`, searchPattern),
+        ),
+      )
+      .limit(limit);
+
+    // Filter out users already in project
+    if (projectId) {
+      const existingMembers = await db
+        .select({ userId: projectMembers.userId })
+        .from(projectMembers)
+        .where(eq(projectMembers.projectId, projectId));
+
+      const existingUserIds = new Set(existingMembers.map(m => m.userId));
+      results = results.filter(u => !existingUserIds.has(u.id));
+    }
+
+    // Exclude current user
+    results = results.filter(u => u.id !== currentUser.id);
+
+    // Privacy: mask email unless exact match
+    const sanitizedResults = results.map(u => ({
+      id: u.id,
+      name: u.name || u.displayName,
+      email: query.includes('@') ? u.email : maskEmail(u.email),
+      image: u.image,
+    }));
+
+    return c.json(sanitizedResults);
+  } catch (error) {
+    console.error('Error searching users:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'search_users',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+export { userRoutes };
+```
+
+---
+
+## Contact Form Route (Public)
+
+Location: `packages/workers/src/routes/contact.js`
+
+Public endpoint with rate limiting:
+
+```javascript
+import { Hono } from 'hono';
+import { z } from 'zod';
+import { PostmarkClient } from 'postmark';
+import { contactRateLimit } from '@/middleware/rateLimit.js';
+import { createDomainError, createValidationError, SYSTEM_ERRORS, VALIDATION_ERRORS } from '@corates/shared';
+
+const contact = new Hono();
+
+// Rate limit public endpoint
+contact.use('*', contactRateLimit);
+
+const contactSchema = z.object({
+  name: z.string().trim().min(1).max(100),
+  email: z.string().email().trim().min(1).max(254),
+  subject: z.string().trim().max(150).optional().default(''),
+  message: z.string().trim().min(1).max(2000),
+});
+
+contact.post('/', async c => {
+  // Parse body
+  let body;
+  try {
+    body = await c.req.json();
+  } catch {
+    const error = createValidationError('body', VALIDATION_ERRORS.INVALID_INPUT.code);
+    return c.json(error, error.statusCode);
+  }
+
+  // Validate
+  const result = contactSchema.safeParse(body);
+  if (!result.success) {
+    const firstIssue = result.error.issues[0];
+    const fieldName = firstIssue?.path[0] || 'input';
+    const error = createValidationError(fieldName, VALIDATION_ERRORS.INVALID_INPUT.code);
+    return c.json(error, error.statusCode);
+  }
+
+  const { name, email, subject, message } = result.data;
+
+  // Check service availability
+  if (!c.env.POSTMARK_SERVER_TOKEN) {
+    const error = createDomainError(SYSTEM_ERRORS.SERVICE_UNAVAILABLE, {
+      service: 'email',
+    });
+    return c.json(error, error.statusCode);
+  }
+
+  try {
+    const postmark = new PostmarkClient(c.env.POSTMARK_SERVER_TOKEN);
+
+    const response = await postmark.sendEmail({
+      From: `CoRATES Contact <${c.env.EMAIL_FROM}>`,
+      To: c.env.CONTACT_EMAIL,
+      ReplyTo: email,
+      Subject: `[Contact Form] ${subject || 'New Inquiry'}`,
+      TextBody: `Name: ${name}\nEmail: ${email}\n\nMessage:\n${message}`,
+      HtmlBody: `
+        <h2>New Contact Form Submission</h2>
+        <p><strong>Name:</strong> ${name}</p>
+        <p><strong>Email:</strong> ${email}</p>
+        <p><strong>Subject:</strong> ${subject || 'None'}</p>
+        <hr />
+        <p>${message.replace(/\n/g, '<br />')}</p>
+      `,
+    });
+
+    if (response.ErrorCode !== 0) {
+      console.error('[Contact] Postmark error:', response);
+      const error = createDomainError(SYSTEM_ERRORS.EMAIL_SEND_FAILED);
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json({ success: true, messageId: response.MessageID });
+  } catch (err) {
+    console.error('[Contact] Exception:', err.message);
+    const error = createDomainError(SYSTEM_ERRORS.EMAIL_SEND_FAILED);
+    return c.json(error, error.statusCode);
+  }
+});
+
+export { contact as contactRoutes };
+```
+
+---
+
+## Avatar Upload Route
+
+Location: `packages/workers/src/routes/avatars.js`
+
+File upload with R2:
+
+```javascript
+import { Hono } from 'hono';
+import { eq } from 'drizzle-orm';
+import { createDb } from '@/db/client.js';
+import { user } from '@/db/schema.js';
+import { requireAuth, getAuth } from '@/middleware/auth.js';
+import { createDomainError, createValidationError, SYSTEM_ERRORS, VALIDATION_ERRORS } from '@corates/shared';
+
+const avatarRoutes = new Hono();
+
+avatarRoutes.use('*', requireAuth);
+
+// POST /api/avatars - Upload avatar
+avatarRoutes.post('/', async c => {
+  const { user: authUser } = getAuth(c);
+
+  const formData = await c.req.formData();
+  const file = formData.get('file');
+
+  // Validate file exists
+  if (!file || !(file instanceof File)) {
+    const error = createValidationError('file', VALIDATION_ERRORS.FIELD_REQUIRED.code);
+    return c.json(error, error.statusCode);
+  }
+
+  // Validate file type
+  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
+  if (!allowedTypes.includes(file.type)) {
+    const error = createValidationError('file', VALIDATION_ERRORS.FIELD_INVALID_FORMAT.code);
+    return c.json(error, error.statusCode);
+  }
+
+  // Validate file size (2MB max)
+  const maxSize = 2 * 1024 * 1024;
+  if (file.size > maxSize) {
+    const error = createValidationError('file', VALIDATION_ERRORS.FIELD_TOO_LONG.code);
+    return c.json(error, error.statusCode);
+  }
+
+  try {
+    const buffer = await file.arrayBuffer();
+    const key = `avatars/${authUser.id}`;
+
+    // Upload to R2
+    await c.env.BUCKET.put(key, buffer, {
+      httpMetadata: {
+        contentType: file.type,
+      },
+    });
+
+    // Generate public URL
+    const avatarUrl = `${c.env.R2_PUBLIC_URL}/${key}`;
+
+    // Update user record
+    const db = createDb(c.env.DB);
+    await db.update(user).set({ image: avatarUrl, updatedAt: new Date() }).where(eq(user.id, authUser.id));
+
+    return c.json({ success: true, url: avatarUrl });
+  } catch (error) {
+    console.error('Error uploading avatar:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.UPLOAD_FAILED, {
+      operation: 'upload_avatar',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+// DELETE /api/avatars - Remove avatar
+avatarRoutes.delete('/', async c => {
+  const { user: authUser } = getAuth(c);
+  const db = createDb(c.env.DB);
+
+  try {
+    const key = `avatars/${authUser.id}`;
+
+    // Delete from R2
+    await c.env.BUCKET.delete(key);
+
+    // Clear image in database
+    await db.update(user).set({ image: null, updatedAt: new Date() }).where(eq(user.id, authUser.id));
+
+    return c.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting avatar:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'delete_avatar',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+
+export { avatarRoutes };
+```
diff --git a/.claude/skills/api-route/references/patterns.md b/.claude/skills/api-route/references/patterns.md
new file mode 100644
index 000000000..788d30cf8
--- /dev/null
+++ b/.claude/skills/api-route/references/patterns.md
@@ -0,0 +1,705 @@
+# Detailed API Route Patterns
+
+Comprehensive patterns for Hono API routes in CoRATES workers.
+
+## Middleware Deep Dive
+
+### Authentication Middleware
+
+```javascript
+// File: packages/workers/src/middleware/auth.js
+
+// Attach auth to context (non-blocking)
+export async function authMiddleware(c, next) {
+  try {
+    const auth = createAuth(c.env);
+    const session = await auth.api.getSession({
+      headers: c.req.raw.headers,
+    });
+
+    c.set('user', session?.user || null);
+    c.set('session', session?.session || null);
+  } catch (error) {
+    console.error('Auth middleware error:', error);
+    c.set('user', null);
+    c.set('session', null);
+  }
+
+  await next();
+}
+
+// Require authentication (blocking)
+export async function requireAuth(c, next) {
+  try {
+    const auth = createAuth(c.env);
+    const session = await auth.api.getSession({
+      headers: c.req.raw.headers,
+    });
+
+    if (!session?.user) {
+      const error = createDomainError(AUTH_ERRORS.REQUIRED);
+      return c.json(error, error.statusCode);
+    }
+
+    c.set('user', session.user);
+    c.set('session', session.session);
+
+    await next();
+  } catch (error) {
+    console.error('Auth verification error:', error);
+    const authError = createDomainError(AUTH_ERRORS.REQUIRED);
+    return c.json(authError, authError.statusCode);
+  }
+}
+
+// Get auth from context
+export function getAuth(c) {
+  return {
+    user: c.get('user'),
+    session: c.get('session'),
+  };
+}
+```
+
+### Organization Membership Middleware
+
+```javascript
+// File: packages/workers/src/middleware/requireOrg.js
+
+export function requireOrgMembership(minRole) {
+  return async (c, next) => {
+    const { user } = getAuth(c);
+    const orgId = c.req.param('orgId');
+
+    if (!user) {
+      const error = createDomainError(AUTH_ERRORS.REQUIRED);
+      return c.json(error, error.statusCode);
+    }
+
+    if (!orgId) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'org_id_required',
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    const db = createDb(c.env.DB);
+
+    const membership = await db
+      .select({
+        id: member.id,
+        role: member.role,
+        orgName: organization.name,
+      })
+      .from(member)
+      .innerJoin(organization, eq(member.organizationId, organization.id))
+      .where(and(eq(member.organizationId, orgId), eq(member.userId, user.id)))
+      .get();
+
+    if (!membership) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'not_org_member',
+        orgId,
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    // Check minimum role if specified
+    if (minRole && !hasMinimumOrgRole(membership.role, minRole)) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'insufficient_org_role',
+        required: minRole,
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    // Attach org context
+    c.set('orgId', orgId);
+    c.set('orgRole', membership.role);
+    c.set('org', { id: orgId, name: membership.orgName });
+
+    await next();
+  };
+}
+
+export function getOrgContext(c) {
+  return {
+    orgId: c.get('orgId') || null,
+    orgRole: c.get('orgRole') || null,
+    org: c.get('org') || null,
+  };
+}
+```
+
+### Entitlement Middleware
+
+```javascript
+// File: packages/workers/src/middleware/requireEntitlement.js
+
+export function requireEntitlement(entitlement) {
+  return async (c, next) => {
+    const { user } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+
+    if (!user || !orgId) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN);
+      return c.json(error, error.statusCode);
+    }
+
+    const db = createDb(c.env.DB);
+    const orgBilling = await resolveOrgAccess(db, orgId);
+
+    if (!orgBilling.entitlements[entitlement]) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'missing_entitlement',
+        entitlement,
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    c.set('orgBilling', orgBilling);
+    c.set('entitlements', orgBilling.entitlements);
+
+    await next();
+  };
+}
+```
+
+### Quota Middleware
+
+```javascript
+// File: packages/workers/src/middleware/requireQuota.js
+
+export function requireQuota(quotaKey, getUsage, requested = 1) {
+  return async (c, next) => {
+    const { user } = getAuth(c);
+    const { orgId } = getOrgContext(c);
+
+    if (!user || !orgId) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN);
+      return c.json(error, error.statusCode);
+    }
+
+    const db = createDb(c.env.DB);
+    const orgBilling = await resolveOrgAccess(db, orgId);
+
+    // Get current usage
+    const used = await getUsage(c, user);
+
+    // Check quota
+    const limit = orgBilling.quotas[quotaKey];
+    if (!isUnlimitedQuota(limit) && used + requested > limit) {
+      const error = createDomainError(AUTH_ERRORS.FORBIDDEN, {
+        reason: 'quota_exceeded',
+        quotaKey,
+        used,
+        limit,
+      });
+      return c.json(error, error.statusCode);
+    }
+
+    c.set('orgBilling', orgBilling);
+    c.set('quotas', orgBilling.quotas);
+
+    await next();
+  };
+}
+
+// Example usage function
+async function getProjectCount(c, user) {
+  const { orgId } = getOrgContext(c);
+  const db = createDb(c.env.DB);
+  const [result] = await db.select({ count: count() }).from(projects).where(eq(projects.orgId, orgId));
+  return result?.count || 0;
+}
+```
+
+### Validation Middleware
+
+```javascript
+// File: packages/workers/src/config/validation.js
+
+export function validateRequest(schema) {
+  return async (c, next) => {
+    try {
+      const body = await c.req.json();
+      const result = validateBody(schema, body);
+
+      if (!result.success) {
+        return c.json(result.error, result.error.statusCode);
+      }
+
+      c.set('validatedBody', result.data);
+      await next();
+    } catch (error) {
+      const invalidJsonError = createValidationError('body', 'VALIDATION_INVALID_INPUT', null, 'invalid_json');
+      return c.json(invalidJsonError, invalidJsonError.statusCode);
+    }
+  };
+}
+
+function validateBody(schema, body) {
+  const result = schema.safeParse(body);
+
+  if (!result.success) {
+    const firstIssue = result.error.issues[0];
+    const fieldName = firstIssue?.path[0] || 'input';
+    const validationCode = mapZodErrorToValidationCode(firstIssue);
+
+    return {
+      success: false,
+      error: createValidationError(fieldName, validationCode),
+    };
+  }
+
+  return { success: true, data: result.data };
+}
+```
+
+## Complex Database Queries
+
+### Joins with Field Selection
+
+```javascript
+const results = await db
+  .select({
+    id: projects.id,
+    name: projects.name,
+    description: projects.description,
+    role: projectMembers.role,
+    memberCount: sql`(
+      SELECT COUNT(*) FROM ${projectMembers}
+      WHERE ${projectMembers.projectId} = ${projects.id}
+    )`.as('memberCount'),
+  })
+  .from(projects)
+  .innerJoin(projectMembers, eq(projects.id, projectMembers.projectId))
+  .where(eq(projectMembers.userId, user.id))
+  .orderBy(desc(projects.updatedAt));
+```
+
+### Search with Multiple Conditions
+
+```javascript
+const searchPattern = `%${query.toLowerCase()}%`;
+
+const results = await db
+  .select({
+    id: user.id,
+    name: user.name,
+    email: user.email,
+  })
+  .from(user)
+  .where(
+    or(
+      like(sql`lower(${user.email})`, searchPattern),
+      like(sql`lower(${user.name})`, searchPattern),
+      like(sql`lower(${user.displayName})`, searchPattern),
+    ),
+  )
+  .limit(limit);
+```
+
+### Filtering Results Post-Query
+
+```javascript
+// Get members already in project
+const existingMembers = await db
+  .select({ userId: projectMembers.userId })
+  .from(projectMembers)
+  .where(eq(projectMembers.projectId, projectId));
+
+const existingUserIds = new Set(existingMembers.map(m => m.userId));
+
+// Filter search results
+results = results.filter(u => !existingUserIds.has(u.id));
+```
+
+### Count Queries
+
+```javascript
+const [result] = await db.select({ count: count() }).from(projects).where(eq(projects.orgId, orgId));
+
+const projectCount = result?.count || 0;
+```
+
+### Batch Operations
+
+```javascript
+// D1 batch for pseudo-atomic operations
+const projectId = crypto.randomUUID();
+const memberId = crypto.randomUUID();
+const now = new Date();
+
+await db.batch([
+  db.insert(projects).values({
+    id: projectId,
+    name: name.trim(),
+    createdBy: authUser.id,
+    createdAt: now,
+    updatedAt: now,
+  }),
+  db.insert(projectMembers).values({
+    id: memberId,
+    projectId,
+    userId: authUser.id,
+    role: 'owner',
+    joinedAt: now,
+  }),
+]);
+```
+
+### Cascade Deletes
+
+```javascript
+await db.batch([
+  // Set nullable foreign keys to null
+  db.update(mediaFiles).set({ uploadedBy: null }).where(eq(mediaFiles.uploadedBy, userId)),
+
+  // Delete dependent records
+  db.delete(projectMembers).where(eq(projectMembers.userId, userId)),
+  db.delete(invitations).where(eq(invitations.invitedUserId, userId)),
+
+  // Delete main record
+  db.delete(user).where(eq(user.id, userId)),
+]);
+```
+
+## Nested Route Composition
+
+### Parent Route
+
+```javascript
+// File: packages/workers/src/routes/orgs/index.js
+import { Hono } from 'hono';
+import { requireAuth } from '@/middleware/auth.js';
+import { orgProjectRoutes } from './projects.js';
+import { orgMemberRoutes } from './members.js';
+
+const orgRoutes = new Hono();
+
+orgRoutes.use('*', requireAuth);
+
+// Org CRUD
+orgRoutes.get('/', async c => { ... });
+orgRoutes.post('/', async c => { ... });
+orgRoutes.get('/:orgId', async c => { ... });
+
+// Mount nested routes
+orgRoutes.route('/:orgId/projects', orgProjectRoutes);
+orgRoutes.route('/:orgId/members', orgMemberRoutes);
+
+export { orgRoutes };
+```
+
+### Child Route
+
+```javascript
+// File: packages/workers/src/routes/orgs/projects.js
+import { Hono } from 'hono';
+import { requireOrgMembership, getOrgContext } from '@/middleware/requireOrg.js';
+import { orgProjectMemberRoutes } from './project-members.js';
+
+const orgProjectRoutes = new Hono();
+
+// Org membership required for all project routes
+orgProjectRoutes.get('/', requireOrgMembership(), async c => {
+  const { orgId } = getOrgContext(c);
+  // List projects in org...
+});
+
+orgProjectRoutes.post('/', requireOrgMembership(), ..., async c => {
+  const { orgId } = getOrgContext(c);
+  // Create project in org...
+});
+
+// Mount deeper nested routes
+orgProjectRoutes.route('/:projectId/members', orgProjectMemberRoutes);
+
+export { orgProjectRoutes };
+```
+
+### URL Structure
+
+```
+/api/orgs                           -> orgRoutes GET /
+/api/orgs/:orgId                    -> orgRoutes GET /:orgId
+/api/orgs/:orgId/projects           -> orgProjectRoutes GET /
+/api/orgs/:orgId/projects/:projectId/members -> orgProjectMemberRoutes
+```
+
+## Rate Limiting
+
+### Configure Rate Limits
+
+```javascript
+// File: packages/workers/src/middleware/rateLimit.js
+import { createRateLimiter } from '@/lib/rateLimit.js';
+
+// Strict limit for public endpoints
+export const contactRateLimit = createRateLimiter({
+  limit: 5,
+  window: 60 * 1000, // 1 minute
+  keyPrefix: 'contact',
+});
+
+// Moderate limit for search
+export const searchRateLimit = createRateLimiter({
+  limit: 30,
+  window: 60 * 1000,
+  keyPrefix: 'search',
+});
+
+// Relaxed limit for authenticated APIs
+export const apiRateLimit = createRateLimiter({
+  limit: 100,
+  window: 60 * 1000,
+  keyPrefix: 'api',
+});
+```
+
+### Apply Rate Limits
+
+```javascript
+import { contactRateLimit } from '@/middleware/rateLimit.js';
+
+const contact = new Hono();
+contact.use('*', contactRateLimit);
+
+contact.post('/', async c => {
+  // Handler...
+});
+```
+
+## Error Handler
+
+### Global Error Handler
+
+```javascript
+// File: packages/workers/src/middleware/errorHandler.js
+
+export function errorHandler(err, c) {
+  console.error(`[${c.req.method}] ${c.req.path}:`, err);
+
+  // Domain errors
+  if (isDomainError(err)) {
+    return c.json(err, err.statusCode);
+  }
+
+  // Zod validation errors
+  if (isZodError(err)) {
+    const error = createDomainError(SYSTEM_ERRORS.VALIDATION_ERROR, {
+      message: formatZodErrors(err),
+    });
+    return c.json(error, error.statusCode);
+  }
+
+  // Hono HTTP exceptions
+  if (err?.getResponse) {
+    return err.getResponse();
+  }
+
+  // Database errors
+  if (err?.message?.includes('D1_')) {
+    const error = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'database_operation',
+    });
+    return c.json(error, error.statusCode);
+  }
+
+  // Unique constraint violation
+  if (err?.message?.includes('UNIQUE constraint failed')) {
+    const error = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'unique_constraint_violation',
+    });
+    return c.json(error, 409);
+  }
+
+  // Fallback
+  const error = createDomainError(SYSTEM_ERRORS.INTERNAL_ERROR);
+  return c.json(error, error.statusCode);
+}
+```
+
+### Register in Main App
+
+```javascript
+// File: packages/workers/src/index.js
+import { errorHandler } from './middleware/errorHandler.js';
+
+const app = new Hono();
+
+// ... routes ...
+
+app.onError(errorHandler);
+
+app.notFound(c => {
+  return c.json({ error: 'Not Found' }, 404);
+});
+
+export default app;
+```
+
+## Query Parameters
+
+### Parse and Validate
+
+```javascript
+routes.get('/search', async c => {
+  const query = c.req.query('q')?.trim();
+  const limit = Math.min(parseInt(c.req.query('limit') || '10', 10), 20);
+  const offset = parseInt(c.req.query('offset') || '0', 10);
+  const sortBy = c.req.query('sortBy') || 'createdAt';
+  const order = c.req.query('order') === 'asc' ? 'asc' : 'desc';
+
+  if (!query || query.length < 2) {
+    const error = createValidationError('query', 'VALIDATION_FIELD_TOO_SHORT');
+    return c.json(error, error.statusCode);
+  }
+
+  // Use validated params...
+});
+```
+
+### Path Parameters
+
+```javascript
+routes.get('/:id', async c => {
+  const id = c.req.param('id');
+
+  // Validate UUID format if needed
+  if (!isValidUUID(id)) {
+    const error = createValidationError('id', 'VALIDATION_FIELD_INVALID_FORMAT');
+    return c.json(error, error.statusCode);
+  }
+
+  // Use id...
+});
+
+// Multiple path params
+routes.get('/:projectId/studies/:studyId', async c => {
+  const projectId = c.req.param('projectId');
+  const studyId = c.req.param('studyId');
+  // ...
+});
+```
+
+## Response Headers
+
+```javascript
+// Rate limit headers
+return c.json(data, 200, {
+  'X-RateLimit-Limit': String(limit),
+  'X-RateLimit-Remaining': String(remaining),
+  'X-RateLimit-Reset': String(resetTime),
+});
+
+// Cache headers
+return c.json(data, 200, {
+  'Cache-Control': 'public, max-age=300',
+});
+
+// No content
+return c.body(null, 204);
+```
+
+## File Uploads
+
+### Handle Multipart Form Data
+
+```javascript
+import { z } from 'zod';
+
+routes.post('/upload', async c => {
+  const { user } = getAuth(c);
+
+  const formData = await c.req.formData();
+  const file = formData.get('file');
+
+  if (!file || !(file instanceof File)) {
+    const error = createValidationError('file', 'VALIDATION_FIELD_REQUIRED');
+    return c.json(error, error.statusCode);
+  }
+
+  // Validate file type
+  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
+  if (!allowedTypes.includes(file.type)) {
+    const error = createValidationError('file', 'VALIDATION_FIELD_INVALID_FORMAT');
+    return c.json(error, error.statusCode);
+  }
+
+  // Validate file size (e.g., 5MB)
+  if (file.size > 5 * 1024 * 1024) {
+    const error = createValidationError('file', 'VALIDATION_FIELD_TOO_LONG');
+    return c.json(error, error.statusCode);
+  }
+
+  // Process file...
+  const buffer = await file.arrayBuffer();
+
+  // Upload to R2 or process
+  await c.env.BUCKET.put(`avatars/${user.id}`, buffer, {
+    httpMetadata: { contentType: file.type },
+  });
+
+  return c.json({ success: true });
+});
+```
+
+## External Service Integration
+
+### Best-Effort External Calls
+
+```javascript
+routes.post('/', ..., async c => {
+  // Main database operation
+  await db.insert(projects).values({ ... });
+
+  // External service sync (best-effort)
+  try {
+    await syncProjectToDO(c.env, projectId, { ... });
+  } catch (err) {
+    console.error('Failed to sync to DO:', err);
+    // Continue - don't fail the request
+  }
+
+  return c.json(newProject, 201);
+});
+```
+
+### Required External Calls
+
+```javascript
+routes.post('/send-email', async c => {
+  const { email, subject, body } = c.get('validatedBody');
+
+  if (!c.env.POSTMARK_SERVER_TOKEN) {
+    const error = createDomainError(SYSTEM_ERRORS.SERVICE_UNAVAILABLE, {
+      service: 'email',
+    });
+    return c.json(error, error.statusCode);
+  }
+
+  try {
+    const postmark = new PostmarkClient(c.env.POSTMARK_SERVER_TOKEN);
+    const response = await postmark.sendEmail({
+      From: c.env.EMAIL_FROM,
+      To: email,
+      Subject: subject,
+      TextBody: body,
+    });
+
+    if (response.ErrorCode !== 0) {
+      console.error('Postmark error:', response);
+      const error = createDomainError(SYSTEM_ERRORS.EMAIL_SEND_FAILED);
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json({ success: true, messageId: response.MessageID });
+  } catch (err) {
+    console.error('Email exception:', err.message);
+    const error = createDomainError(SYSTEM_ERRORS.EMAIL_SEND_FAILED);
+    return c.json(error, error.statusCode);
+  }
+});
+```
diff --git a/.claude/skills/component/SKILL.md b/.claude/skills/component/SKILL.md
new file mode 100644
index 000000000..2b7f161ab
--- /dev/null
+++ b/.claude/skills/component/SKILL.md
@@ -0,0 +1,290 @@
+---
+name: Component
+description: This skill should be used when the user asks to "create a component", "scaffold a component", "add a new component", "build a SolidJS component", or mentions creating UI elements, views, or feature components. Provides SolidJS component patterns specific to CoRATES.
+---
+
+# SolidJS Component Creation
+
+Create SolidJS components following CoRATES patterns and conventions.
+
+## Core Principles
+
+1. **No prop destructuring** - Access props via `props.field` directly
+2. **No prop drilling** - Import stores directly where needed
+3. **Minimal props** - Components receive 1-5 local config props only
+4. **Small and focused** - Each component handles one responsibility
+5. **No emojis** - Use `solid-icons` library for all icons
+
+## Quick Reference
+
+### File Location
+
+```
+packages/web/src/components/
+  [feature]/           # Feature directory
+    ComponentName.jsx  # PascalCase naming
+    index.js           # Barrel export (optional, for lazy loading)
+```
+
+### Basic Component Template
+
+```jsx
+import { createSignal, createMemo, Show, For } from 'solid-js';
+import { FiIcon } from 'solid-icons/fi';
+import { Button, Dialog } from '@corates/ui';
+import someStore from '@/stores/someStore.js';
+
+export function ComponentName(props) {
+  // Local state only
+  const [localState, setLocalState] = createSignal(false);
+
+  // Derived values
+  const computed = createMemo(() => {
+    return props.items?.length ?? 0;
+  });
+
+  // Access props directly - NEVER destructure
+  const handleClick = () => {
+    props.onAction?.(props.itemId);
+  };
+
+  return (
+    <div class='...'>
+      <Show when={props.showHeader}>
+        <h2>{props.title}</h2>
+      </Show>
+      <span>{computed()} items</span>
+    </div>
+  );
+}
+
+export default ComponentName;
+```
+
+## Critical Rules
+
+### Props - NEVER Destructure
+
+```jsx
+// WRONG - breaks reactivity
+function Component({ title, items, onSelect }) {
+  return <h1>{title}</h1>;
+}
+
+// CORRECT - preserves reactivity
+function Component(props) {
+  return <h1>{props.title}</h1>;
+}
+```
+
+For derived values, wrap in function or createMemo:
+
+```jsx
+// Arrow function for simple access
+const isOwner = () => props.role === 'owner';
+
+// createMemo for computed values
+const progress = createMemo(() => ({
+  completed: props.completed ?? 0,
+  total: props.total ?? 0,
+  percentage: props.total ? Math.round((props.completed / props.total) * 100) : 0,
+}));
+
+// Usage
+<Show when={isOwner()}>...</Show>
+<span>{progress().percentage}%</span>
+```
+
+### Stores - Import Directly
+
+```jsx
+// WRONG - prop drilling
+function Parent() {
+  return <Child projects={projects()} user={user()} settings={settings()} />;
+}
+
+// CORRECT - import stores where needed
+import projectStore from '@/stores/projectStore.js';
+import { user } from '@/stores/authStore.js';
+
+function Component(props) {
+  // Read from store directly
+  const studies = () => projectStore.getStudies(props.projectId);
+
+  return <For each={studies()}>{study => ...}</For>;
+}
+```
+
+### Icons - Use solid-icons
+
+```jsx
+import { FiCheck, FiX, FiFolder } from 'solid-icons/fi';
+import { AiOutlineFolder } from 'solid-icons/ai';
+import { HiOutlineDocumentCheck } from 'solid-icons/hi';
+
+// Usage
+<FiCheck class="h-4 w-4 text-green-500" />
+
+// Conditional icons
+<Show when={isExpanded()} fallback={<AiOutlineFolder class="h-4 w-4" />}>
+  <AiOutlineFolderOpen class="h-4 w-4" />
+</Show>
+```
+
+### UI Components - Import from @corates/ui
+
+```jsx
+// CORRECT
+import { Dialog, Select, Toast, Avatar, Tooltip, useConfirmDialog } from '@corates/ui';
+
+// WRONG - no local wrappers
+import { Dialog } from '@/components/ark/Dialog.jsx';
+```
+
+## Import Aliases
+
+Use path aliases from jsconfig.json:
+
+```jsx
+import Component from '@components/feature/Component.jsx';
+import { useHook } from '@primitives/useHook.js';
+import store from '@/stores/store.js';
+import { config } from '@config/api.js';
+import { utility } from '@lib/utils.js';
+```
+
+## State Patterns
+
+### Local State (createSignal)
+
+For UI state within the component:
+
+```jsx
+const [isOpen, setIsOpen] = createSignal(false);
+const [search, setSearch] = createSignal('');
+```
+
+### Derived State (createMemo)
+
+For computed values that depend on props or signals:
+
+```jsx
+const stats = createMemo(() => {
+  const items = props.items ?? [];
+  return {
+    total: items.length,
+    completed: items.filter(i => i.done).length,
+  };
+});
+```
+
+### Complex Local State (createStore)
+
+For nested objects within the component:
+
+```jsx
+import { createStore, produce } from 'solid-js/store';
+
+const [form, setForm] = createStore({
+  name: '',
+  settings: { notify: true },
+});
+
+// Update nested
+setForm(
+  produce(f => {
+    f.settings.notify = false;
+  }),
+);
+```
+
+## Component Patterns
+
+### Conditional Rendering
+
+```jsx
+<Show when={props.data} fallback={<Loading />}>
+  {data => <Content data={data()} />}
+</Show>
+
+<Switch>
+  <Match when={status() === 'loading'}><Loading /></Match>
+  <Match when={status() === 'error'}><Error /></Match>
+  <Match when={status() === 'success'}><Success /></Match>
+</Switch>
+```
+
+### List Rendering
+
+```jsx
+<For each={props.items}>
+  {(item, index) => (
+    <Item
+      item={item}
+      index={index()}
+      onSelect={() => props.onSelect?.(item.id)}
+    />
+  )}
+</For>
+
+// With keyed for identity-based updates
+<Index each={items()}>
+  {(item, index) => <Item item={item()} />}
+</Index>
+```
+
+### Event Handlers
+
+```jsx
+// Call props handlers with optional chaining
+<button onClick={() => props.onDelete?.(props.id)}>
+  Delete
+</button>
+
+// Stop propagation when needed
+<button onClick={e => {
+  e.stopPropagation();
+  props.onAction?.();
+}}>
+  Action
+</button>
+```
+
+## Barrel Exports
+
+For lazy-loaded routes, create index.js:
+
+```jsx
+// packages/web/src/components/feature/index.js
+export { default } from './FeatureMain.jsx';
+export { FeatureCard } from './FeatureCard.jsx';
+export { FeatureList } from './FeatureList.jsx';
+```
+
+## Creation Checklist
+
+When creating a component:
+
+1. Determine file location under `packages/web/src/components/`
+2. Identify required props (keep to 1-5 max)
+3. Identify stores to import (no prop drilling)
+4. Choose icons from solid-icons
+5. Use Ark UI components from @corates/ui
+6. Apply proper state patterns (signal/memo/store)
+7. Ensure no prop destructuring
+8. Keep component focused and small
+
+## Additional Resources
+
+### Reference Files
+
+For detailed patterns and examples:
+
+- **`references/patterns.md`** - Comprehensive state patterns, effects, and cleanup
+- **`references/examples.md`** - Real component examples from the codebase
+
+### Example Files
+
+Working templates in `examples/`:
+
+- **`ExampleComponent.jsx`** - Complete component template with all patterns
diff --git a/.claude/skills/component/examples/ExampleComponent.jsx b/.claude/skills/component/examples/ExampleComponent.jsx
new file mode 100644
index 000000000..e9be9499b
--- /dev/null
+++ b/.claude/skills/component/examples/ExampleComponent.jsx
@@ -0,0 +1,270 @@
+/**
+ * Example SolidJS Component Template
+ *
+ * Demonstrates all key patterns for CoRATES components.
+ * Copy and modify for new components.
+ */
+
+import { createSignal, createMemo, createEffect, onMount, onCleanup, Show, For } from 'solid-js';
+import { useNavigate, useParams } from '@solidjs/router';
+
+// Icons - use solid-icons packages
+import { FiEdit, FiTrash2, FiCheck, FiX } from 'solid-icons/fi';
+
+// UI components - import from @corates/ui
+import { Dialog, Tooltip, useConfirmDialog } from '@corates/ui';
+
+// Stores - import directly, no prop drilling
+import projectStore from '@/stores/projectStore.js';
+
+// Primitives/hooks
+import { useProjectData } from '@primitives/useProjectData.js';
+
+/**
+ * ExampleComponent
+ *
+ * @param {Object} props
+ * @param {string} props.itemId - Required item identifier
+ * @param {string} [props.title] - Optional display title
+ * @param {Function} [props.onSave] - Callback when item is saved
+ * @param {Function} [props.onDelete] - Callback when item is deleted
+ */
+export function ExampleComponent(props) {
+  const navigate = useNavigate();
+  const params = useParams();
+  const confirmDialog = useConfirmDialog();
+
+  // Refs for DOM access
+  let containerRef;
+
+  // ---------------------
+  // Local State (signals)
+  // ---------------------
+
+  const [isEditing, setIsEditing] = createSignal(false);
+  const [localValue, setLocalValue] = createSignal('');
+
+  // ---------------------
+  // Store Data (no prop drilling)
+  // ---------------------
+
+  // Option 1: Direct store access
+  const item = () => projectStore.getItem(props.itemId);
+
+  // Option 2: Using a hook
+  const projectData = useProjectData(params.projectId);
+
+  // ---------------------
+  // Derived Values (createMemo)
+  // ---------------------
+
+  const displayTitle = createMemo(() => {
+    return props.title || item()?.name || 'Untitled';
+  });
+
+  const stats = createMemo(() => {
+    const data = item();
+    if (!data) return { total: 0, completed: 0, percentage: 0 };
+
+    const total = data.items?.length ?? 0;
+    const completed = data.items?.filter(i => i.done).length ?? 0;
+
+    return {
+      total,
+      completed,
+      percentage: total > 0 ? Math.round((completed / total) * 100) : 0,
+    };
+  });
+
+  // Simple derived value as arrow function
+  const canEdit = () => item()?.permissions?.includes('edit');
+  const isComplete = () => stats().percentage === 100;
+
+  // ---------------------
+  // Effects
+  // ---------------------
+
+  // Sync local state when item changes
+  createEffect(() => {
+    const currentItem = item();
+    if (currentItem) {
+      setLocalValue(currentItem.value ?? '');
+    }
+  });
+
+  // ---------------------
+  // Lifecycle
+  // ---------------------
+
+  onMount(() => {
+    // Focus container on mount
+    containerRef?.focus();
+
+    // Example: keyboard shortcut
+    const handleKeyDown = e => {
+      if (e.key === 'Escape' && isEditing()) {
+        setIsEditing(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Always clean up event listeners
+    onCleanup(() => {
+      document.removeEventListener('keydown', handleKeyDown);
+    });
+  });
+
+  // ---------------------
+  // Event Handlers
+  // ---------------------
+
+  const handleSave = async () => {
+    // Update store
+    await projectStore.updateItem(props.itemId, { value: localValue() });
+
+    // Call prop handler with optional chaining
+    props.onSave?.(props.itemId, localValue());
+
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    // Use confirm dialog from @corates/ui
+    const confirmed = await confirmDialog.confirm({
+      title: 'Delete Item?',
+      message: 'This action cannot be undone.',
+    });
+
+    if (confirmed) {
+      await projectStore.deleteItem(props.itemId);
+      props.onDelete?.(props.itemId);
+    }
+  };
+
+  const handleCancel = () => {
+    // Reset to original value
+    setLocalValue(item()?.value ?? '');
+    setIsEditing(false);
+  };
+
+  // ---------------------
+  // Render
+  // ---------------------
+
+  return (
+    <div
+      ref={containerRef}
+      class='rounded-xl border border-gray-200 bg-white p-4 shadow-sm'
+      tabIndex={0}
+    >
+      {/* Header */}
+      <div class='mb-4 flex items-center justify-between'>
+        <h3 class='font-semibold text-gray-900'>{displayTitle()}</h3>
+
+        <div class='flex items-center gap-2'>
+          {/* Edit button - only shown if user can edit */}
+          <Show when={canEdit() && !isEditing()}>
+            <Tooltip content='Edit'>
+              <button
+                onClick={() => setIsEditing(true)}
+                class='rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+              >
+                <FiEdit class='h-4 w-4' />
+              </button>
+            </Tooltip>
+          </Show>
+
+          {/* Delete button - stop propagation if inside clickable container */}
+          <Show when={props.onDelete}>
+            <Tooltip content='Delete'>
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  handleDelete();
+                }}
+                class='rounded-lg p-1.5 text-gray-500 hover:bg-red-100 hover:text-red-600'
+              >
+                <FiTrash2 class='h-4 w-4' />
+              </button>
+            </Tooltip>
+          </Show>
+        </div>
+      </div>
+
+      {/* Content - switch between view and edit modes */}
+      <Show
+        when={isEditing()}
+        fallback={
+          <div class='text-gray-700'>
+            <p>{item()?.value || 'No content'}</p>
+          </div>
+        }
+      >
+        <div class='space-y-3'>
+          <textarea
+            value={localValue()}
+            onInput={e => setLocalValue(e.target.value)}
+            class='w-full rounded-lg border border-gray-300 p-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
+            rows={3}
+          />
+
+          <div class='flex justify-end gap-2'>
+            <button
+              onClick={handleCancel}
+              class='flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100'
+            >
+              <FiX class='h-4 w-4' />
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              class='flex items-center gap-1 rounded-lg bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600'
+            >
+              <FiCheck class='h-4 w-4' />
+              Save
+            </button>
+          </div>
+        </div>
+      </Show>
+
+      {/* Stats footer */}
+      <div class='mt-4 border-t border-gray-100 pt-3'>
+        <div class='flex items-center justify-between text-sm'>
+          <span class='text-gray-500'>Progress</span>
+          <span class={isComplete() ? 'text-green-600' : 'text-gray-700'}>
+            {stats().completed} / {stats().total} ({stats().percentage}%)
+          </span>
+        </div>
+
+        {/* Progress bar */}
+        <div class='mt-2 h-1.5 w-full rounded-full bg-gray-100'>
+          <div
+            class={`h-full rounded-full transition-all ${isComplete() ? 'bg-green-500' : 'bg-blue-500'}`}
+            style={{ width: `${stats().percentage}%` }}
+          />
+        </div>
+      </div>
+
+      {/* List rendering example */}
+      <Show when={item()?.items?.length > 0}>
+        <div class='mt-4 space-y-2'>
+          <For each={item().items}>
+            {(subItem, index) => (
+              <div
+                class='flex items-center gap-2 rounded-lg bg-gray-50 p-2'
+                classList={{ 'opacity-50': subItem.done }}
+              >
+                <span class='text-sm text-gray-600'>
+                  {index() + 1}. {subItem.name}
+                </span>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export default ExampleComponent;
diff --git a/.claude/skills/component/references/examples.md b/.claude/skills/component/references/examples.md
new file mode 100644
index 000000000..bf13413cc
--- /dev/null
+++ b/.claude/skills/component/references/examples.md
@@ -0,0 +1,436 @@
+# Real Component Examples
+
+Working examples from the CoRATES codebase demonstrating best practices.
+
+## ProjectCard Component
+
+Location: `packages/web/src/components/dashboard/ProjectCard.jsx`
+
+A card component showing project info with computed stats and conditional rendering:
+
+```jsx
+import { createMemo, Show } from 'solid-js';
+import { FiTrash2, FiUsers } from 'solid-icons/fi';
+import { Tooltip } from '@corates/ui';
+import projectStore from '@/stores/projectStore.js';
+
+const ACCENT_COLORS = [
+  { bg: 'bg-blue-500', light: 'bg-blue-50', text: 'text-blue-700' },
+  { bg: 'bg-emerald-500', light: 'bg-emerald-50', text: 'text-emerald-700' },
+  // ... more colors
+];
+
+function hashToColorIndex(str) {
+  if (!str) return 0;
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash) % ACCENT_COLORS.length;
+}
+
+export function ProjectCard(props) {
+  // Computed color based on project ID
+  const colors = createMemo(() => {
+    const index = hashToColorIndex(props.project?.id);
+    return ACCENT_COLORS[index];
+  });
+
+  // Computed progress from store or props fallback
+  const progress = createMemo(() => {
+    const cachedStats = projectStore.getProjectStats(props.project?.id);
+    const completed = cachedStats?.completedCount ?? props.project?.completedCount ?? 0;
+    const total = cachedStats?.studyCount ?? props.project?.studyCount ?? 0;
+
+    if (total === 0) return { completed: 0, total: 0, percentage: 0 };
+
+    return {
+      completed,
+      total,
+      percentage: Math.round((completed / total) * 100),
+    };
+  });
+
+  // Simple derived value as arrow function
+  const isOwner = () => props.project?.role === 'owner';
+
+  return (
+    <div
+      class='group relative cursor-pointer rounded-xl border border-gray-100 bg-white p-5 shadow-sm transition-all hover:shadow-md'
+      onClick={() => props.onSelect?.(props.project)}
+    >
+      {/* Color accent bar */}
+      <div class={`absolute top-0 left-0 h-1 w-full rounded-t-xl ${colors().bg}`} />
+
+      {/* Header with title and delete button */}
+      <div class='mb-3 flex items-start justify-between'>
+        <h3 class='line-clamp-2 font-semibold text-gray-900'>{props.project?.title || 'Untitled Project'}</h3>
+
+        <Show when={isOwner() && props.onDelete}>
+          <Tooltip content='Delete project'>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                props.onDelete?.(props.project?.id);
+              }}
+              class='p-1 text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500'
+            >
+              <FiTrash2 class='h-4 w-4' />
+            </button>
+          </Tooltip>
+        </Show>
+      </div>
+
+      {/* Progress section */}
+      <div class='space-y-2'>
+        <div class='flex items-center justify-between text-sm'>
+          <span class='text-gray-500'>Progress</span>
+          <span class={colors().text}>{progress().percentage}%</span>
+        </div>
+
+        <div class='h-2 w-full rounded-full bg-gray-100'>
+          <div
+            class={`h-full rounded-full ${colors().bg} transition-all`}
+            style={{ width: `${progress().percentage}%` }}
+          />
+        </div>
+
+        <div class='flex items-center justify-between text-xs text-gray-500'>
+          <span>
+            {progress().completed} / {progress().total} studies
+          </span>
+          <Show when={props.project?.memberCount > 1}>
+            <span class='flex items-center gap-1'>
+              <FiUsers class='h-3 w-3' />
+              {props.project.memberCount}
+            </span>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+Key patterns:
+
+- Props accessed directly via `props.project`, `props.onDelete`, etc.
+- `createMemo` for computed values that derive from props
+- Arrow functions for simple boolean checks: `isOwner()`
+- Store imported directly for additional data
+- Icons from solid-icons
+- Tooltip from @corates/ui
+- Event handler stops propagation and calls prop handler
+
+---
+
+## StatsRow Component
+
+Location: `packages/web/src/components/dashboard/StatsRow.jsx`
+
+A row of stat cards using context for animations:
+
+```jsx
+import { For, useContext } from 'solid-js';
+import { FiFolder, FiCheck, FiFileText, FiUsers } from 'solid-icons/fi';
+import { AnimationContext } from './Dashboard.jsx';
+
+export function StatsRow(props) {
+  const animation = useContext(AnimationContext);
+
+  // Computed stats array with icons
+  const stats = () => [
+    {
+      label: 'Active Projects',
+      value: props.projectCount ?? 0,
+      icon: <FiFolder class='h-5 w-5 text-blue-600' />,
+      iconBg: 'bg-blue-50',
+    },
+    {
+      label: 'Studies Reviewed',
+      value: `${props.completedStudies ?? 0}/${props.totalStudies ?? 0}`,
+      icon: <FiCheck class='h-5 w-5 text-emerald-600' />,
+      iconBg: 'bg-emerald-50',
+    },
+    {
+      label: 'Local Appraisals',
+      value: props.localAppraisalCount ?? 0,
+      icon: <FiFileText class='h-5 w-5 text-purple-600' />,
+      iconBg: 'bg-purple-50',
+    },
+    {
+      label: 'Team Members',
+      value: props.teamMemberCount ?? '-',
+      icon: <FiUsers class='h-5 w-5 text-amber-600' />,
+      iconBg: 'bg-amber-50',
+    },
+  ];
+
+  return (
+    <section class='grid grid-cols-2 gap-4 lg:grid-cols-4' style={animation.fadeUp(100)}>
+      <For each={stats()}>{(stat, index) => <StatCard stat={stat} index={index()} animation={animation} />}</For>
+    </section>
+  );
+}
+
+export function StatCard(props) {
+  return (
+    <div
+      class='rounded-xl border border-gray-100 bg-white p-4 shadow-sm'
+      style={props.animation?.statRise(props.index)}
+    >
+      <div class='flex items-center gap-3'>
+        <div class={`rounded-lg p-2 ${props.stat.iconBg}`}>{props.stat.icon}</div>
+        <div>
+          <p class='text-2xl font-bold text-gray-900'>{props.stat.value}</p>
+          <p class='text-sm text-gray-500'>{props.stat.label}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+Key patterns:
+
+- Context used for animation values (not prop drilling)
+- Stats computed as array with JSX icons
+- Props accessed directly: `props.projectCount`, `props.stat.label`
+- For loop with index for staggered animations
+- Small, focused components (StatsRow + StatCard)
+
+---
+
+## Sidebar Component (Excerpt)
+
+Location: `packages/web/src/components/sidebar/Sidebar.jsx`
+
+Demonstrates local state, effects, and cleanup:
+
+```jsx
+import { createSignal, createEffect, onMount, onCleanup, Show, For } from 'solid-js';
+import { useNavigate, useParams } from '@solidjs/router';
+import { FiPlus, FiChevronLeft, FiChevronRight } from 'solid-icons/fi';
+import { useConfirmDialog, Tooltip } from '@corates/ui';
+import projectStore from '@/stores/projectStore.js';
+import localChecklistsStore from '@/stores/localChecklistsStore.js';
+
+export default function Sidebar(props) {
+  const navigate = useNavigate();
+  const params = useParams();
+  const confirmDialog = useConfirmDialog();
+
+  // Local UI state
+  const [expandedProjects, setExpandedProjects] = createSignal({});
+  const [isResizing, setIsResizing] = createSignal(false);
+  const [width, setWidth] = createSignal(280);
+
+  // Read from stores directly
+  const projects = () => projectStore.store.projectList ?? [];
+  const localChecklists = () => localChecklistsStore.checklists();
+
+  // Toggle expand state
+  const toggleProject = projectId => {
+    setExpandedProjects(prev => ({
+      ...prev,
+      [projectId]: !prev[projectId],
+    }));
+  };
+
+  // Handle resize with cleanup
+  onMount(() => {
+    const handleMouseMove = e => {
+      if (!isResizing()) return;
+      const newWidth = Math.max(200, Math.min(400, e.clientX));
+      setWidth(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    onCleanup(() => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    });
+  });
+
+  // Delete with confirmation
+  const handleDeleteChecklist = async checklistId => {
+    const confirmed = await confirmDialog.confirm({
+      title: 'Delete Checklist?',
+      message: 'This action cannot be undone.',
+    });
+
+    if (confirmed) {
+      await localChecklistsStore.deleteChecklist(checklistId);
+    }
+  };
+
+  return (
+    <aside class='flex h-full flex-col border-r border-gray-200 bg-white' style={{ width: `${width()}px` }}>
+      {/* Header */}
+      <div class='flex items-center justify-between border-b border-gray-100 p-4'>
+        <h2 class='font-semibold text-gray-900'>Projects</h2>
+        <Tooltip content='New project'>
+          <button onClick={() => navigate('/projects/new')} class='rounded-lg p-1.5 text-gray-500 hover:bg-gray-100'>
+            <FiPlus class='h-4 w-4' />
+          </button>
+        </Tooltip>
+      </div>
+
+      {/* Project list */}
+      <div class='flex-1 overflow-y-auto p-2'>
+        <For each={projects()}>
+          {project => (
+            <ProjectTreeItem
+              project={project}
+              isExpanded={expandedProjects()[project.id]}
+              onToggle={() => toggleProject(project.id)}
+              isActive={params.projectId === project.id}
+            />
+          )}
+        </For>
+      </div>
+
+      {/* Resize handle */}
+      <div
+        class='absolute top-0 right-0 h-full w-1 cursor-col-resize hover:bg-blue-500'
+        onMouseDown={() => setIsResizing(true)}
+      />
+    </aside>
+  );
+}
+```
+
+Key patterns:
+
+- Multiple local signals for UI state
+- Store imports for data (no prop drilling)
+- onMount + onCleanup for event listeners
+- useConfirmDialog hook from @corates/ui
+- Navigate with @solidjs/router
+- Props accessed directly: `params.projectId`
+
+---
+
+## Navbar Component (Excerpt)
+
+Location: `packages/web/src/components/Navbar.jsx`
+
+Shows auth integration and click-outside handling:
+
+```jsx
+import { createSignal, createEffect, onMount, onCleanup, Show } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { FiMenu, FiLogOut, FiSettings, FiChevronDown } from 'solid-icons/fi';
+import { Avatar } from '@corates/ui';
+import { user, authLoading, signOut } from '@/stores/authStore.js';
+import { isAdmin, isAdminChecked, checkAdminStatus } from '@/stores/adminStore.js';
+
+export default function Navbar(props) {
+  const navigate = useNavigate();
+  let userMenuRef;
+
+  const [showUserMenu, setShowUserMenu] = createSignal(false);
+
+  // Persist user name for faster perceived load
+  const storedName = localStorage.getItem('userName');
+
+  createEffect(() => {
+    if (user()) {
+      localStorage.setItem('userName', user().name);
+    } else if (!authLoading()) {
+      localStorage.removeItem('userName');
+    }
+  });
+
+  // Click outside to close menu
+  onMount(async () => {
+    const handleClickOutside = event => {
+      if (userMenuRef && !userMenuRef.contains(event.target)) {
+        setShowUserMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    onCleanup(() => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    await checkAdminStatus();
+  });
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/');
+  };
+
+  const showAdminMenu = () => isAdmin() && isAdminChecked();
+
+  return (
+    <nav class='flex h-14 items-center justify-between border-b border-gray-200 bg-white px-4'>
+      {/* Mobile menu toggle - only shown if prop provided */}
+      <Show when={props.toggleMobileSidebar}>
+        <button
+          onClick={() => props.toggleMobileSidebar?.()}
+          class='rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 lg:hidden'
+          aria-label={props.mobileSidebarOpen ? 'Close sidebar' : 'Open sidebar'}
+        >
+          <FiMenu class='h-5 w-5' />
+        </button>
+      </Show>
+
+      {/* User menu */}
+      <div class='relative ml-auto' ref={userMenuRef}>
+        <button
+          onClick={() => setShowUserMenu(!showUserMenu())}
+          class='flex items-center gap-2 rounded-lg p-1.5 hover:bg-gray-100'
+        >
+          <Avatar src={user()?.image} name={user()?.name || storedName} class='h-7 w-7 rounded-full' />
+          <span class='hidden text-sm font-medium text-gray-700 sm:block'>{user()?.name || storedName}</span>
+          <FiChevronDown class={`h-4 w-4 text-gray-500 transition-transform ${showUserMenu() ? 'rotate-180' : ''}`} />
+        </button>
+
+        {/* Dropdown menu */}
+        <Show when={showUserMenu()}>
+          <div class='absolute top-full right-0 mt-1 w-48 rounded-lg border border-gray-100 bg-white py-1 shadow-lg'>
+            <Show when={showAdminMenu()}>
+              <button
+                onClick={() => {
+                  navigate('/admin');
+                  setShowUserMenu(false);
+                }}
+                class='flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50'
+              >
+                <FiSettings class='h-4 w-4' />
+                Admin Panel
+              </button>
+            </Show>
+            <button
+              onClick={handleSignOut}
+              class='flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50'
+            >
+              <FiLogOut class='h-4 w-4' />
+              Sign Out
+            </button>
+          </div>
+        </Show>
+      </div>
+    </nav>
+  );
+}
+```
+
+Key patterns:
+
+- Auth store imported directly (not prop drilled)
+- Ref for click-outside detection
+- Effect for localStorage sync
+- Props accessed directly: `props.toggleMobileSidebar`, `props.mobileSidebarOpen`
+- Optional chaining when calling prop handlers: `props.toggleMobileSidebar?.()`
+- Avatar from @corates/ui
+- Icons from solid-icons/fi
diff --git a/.claude/skills/component/references/patterns.md b/.claude/skills/component/references/patterns.md
new file mode 100644
index 000000000..1ef608afa
--- /dev/null
+++ b/.claude/skills/component/references/patterns.md
@@ -0,0 +1,574 @@
+# Detailed Component Patterns
+
+Comprehensive patterns for SolidJS components in CoRATES.
+
+## Effects and Lifecycle
+
+### createEffect
+
+For side effects that run when dependencies change:
+
+```jsx
+import { createEffect, onCleanup } from 'solid-js';
+
+// Simple effect
+createEffect(() => {
+  if (user()) {
+    localStorage.setItem('userName', user().name);
+  }
+});
+
+// Effect with cleanup
+createEffect(() => {
+  const handler = e => {
+    if (!ref.contains(e.target)) {
+      setOpen(false);
+    }
+  };
+
+  document.addEventListener('mousedown', handler);
+  onCleanup(() => document.removeEventListener('mousedown', handler));
+});
+```
+
+### onMount
+
+For one-time setup when component mounts:
+
+```jsx
+import { onMount, onCleanup } from 'solid-js';
+
+onMount(async () => {
+  await loadData();
+
+  const interval = setInterval(refresh, 30000);
+  onCleanup(() => clearInterval(interval));
+});
+```
+
+### onCleanup
+
+Always clean up subscriptions, timers, and event listeners:
+
+```jsx
+onMount(() => {
+  const handleResize = () => setWidth(window.innerWidth);
+  window.addEventListener('resize', handleResize);
+
+  onCleanup(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+});
+```
+
+## Store Integration Patterns
+
+### Reading from Stores
+
+```jsx
+import projectStore from '@/stores/projectStore.js';
+
+function ProjectView(props) {
+  // Direct store access - reactive
+  const project = () => projectStore.getProject(props.projectId);
+  const studies = () => projectStore.getStudies(props.projectId);
+  const connected = () => projectStore.getConnectionState(props.projectId).connected;
+
+  return (
+    <Show when={connected()}>
+      <h1>{project()?.meta?.title}</h1>
+      <For each={studies()}>{study => <StudyItem study={study} />}</For>
+    </Show>
+  );
+}
+```
+
+### Using Custom Hooks
+
+```jsx
+import { useProjectData } from '@primitives/useProjectData.js';
+
+function ProjectView(props) {
+  // Hook provides reactive getters
+  const projectData = useProjectData(props.projectId);
+
+  return (
+    <Show when={projectData.connected()}>
+      <For each={projectData.studies()}>{study => <StudyItem study={study} />}</For>
+    </Show>
+  );
+}
+```
+
+### Store Actions
+
+```jsx
+import projectStore from '@/stores/projectStore.js';
+
+function AddStudyButton(props) {
+  const handleAdd = async () => {
+    await projectStore.addStudy(props.projectId, {
+      title: 'New Study',
+    });
+  };
+
+  return <button onClick={handleAdd}>Add Study</button>;
+}
+```
+
+## Complex State with createStore
+
+### Nested Object State
+
+```jsx
+import { createStore, produce } from 'solid-js/store';
+
+function FormComponent(props) {
+  const [form, setForm] = createStore({
+    name: '',
+    email: '',
+    preferences: {
+      notifications: true,
+      theme: 'light',
+    },
+  });
+
+  // Update top-level field
+  const updateName = value => setForm('name', value);
+
+  // Update nested field
+  const toggleNotifications = () => {
+    setForm(
+      produce(f => {
+        f.preferences.notifications = !f.preferences.notifications;
+      }),
+    );
+  };
+
+  // Or with path syntax
+  const setTheme = theme => setForm('preferences', 'theme', theme);
+
+  return (
+    <form>
+      <input value={form.name} onInput={e => updateName(e.target.value)} />
+    </form>
+  );
+}
+```
+
+### Array State
+
+```jsx
+import { createStore, produce } from 'solid-js/store';
+
+function ListComponent() {
+  const [items, setItems] = createStore([]);
+
+  // Add item
+  const addItem = item => {
+    setItems(
+      produce(arr => {
+        arr.push({ id: crypto.randomUUID(), ...item });
+      }),
+    );
+  };
+
+  // Update item
+  const updateItem = (id, updates) => {
+    setItems(
+      produce(arr => {
+        const item = arr.find(i => i.id === id);
+        if (item) Object.assign(item, updates);
+      }),
+    );
+  };
+
+  // Remove item
+  const removeItem = id => {
+    setItems(items => items.filter(i => i.id !== id));
+  };
+
+  return (
+    <For each={items}>
+      {item => (
+        <ItemRow item={item} onUpdate={updates => updateItem(item.id, updates)} onRemove={() => removeItem(item.id)} />
+      )}
+    </For>
+  );
+}
+```
+
+## Context Pattern
+
+For deeply nested component communication:
+
+```jsx
+import { createContext, useContext } from 'solid-js';
+
+// Create context with default value
+export const ThemeContext = createContext({
+  theme: () => 'light',
+  setTheme: () => {},
+});
+
+// Provider component
+function ThemeProvider(props) {
+  const [theme, setTheme] = createSignal('light');
+
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;
+}
+
+// Consumer component
+function ThemedButton(props) {
+  const { theme } = useContext(ThemeContext);
+
+  return <button class={theme() === 'dark' ? 'bg-gray-800' : 'bg-white'}>{props.children}</button>;
+}
+```
+
+## Animation Patterns
+
+### Animated Show
+
+```jsx
+function AnimatedShow(props) {
+  const [shouldRender, setShouldRender] = createSignal(false);
+  const [isVisible, setIsVisible] = createSignal(false);
+  let timeoutId;
+
+  const duration = () => props.duration ?? 200;
+
+  createEffect(() => {
+    if (props.when) {
+      clearTimeout(timeoutId);
+      setShouldRender(true);
+      requestAnimationFrame(() => setIsVisible(true));
+    } else {
+      setIsVisible(false);
+      timeoutId = setTimeout(() => setShouldRender(false), duration());
+    }
+  });
+
+  onCleanup(() => clearTimeout(timeoutId));
+
+  return (
+    <Show when={shouldRender()}>
+      <div
+        class={`transition-opacity duration-${duration()}`}
+        classList={{ 'opacity-0': !isVisible(), 'opacity-100': isVisible() }}
+      >
+        {props.children}
+      </div>
+    </Show>
+  );
+}
+```
+
+### CSS Transitions
+
+```jsx
+function Dropdown(props) {
+  return (
+    <div
+      class='transition-all duration-200 ease-out'
+      classList={{
+        'opacity-0 scale-95 pointer-events-none': !props.open,
+        'opacity-100 scale-100': props.open,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
+```
+
+## Error Boundary
+
+```jsx
+import { ErrorBoundary } from 'solid-js';
+
+function App() {
+  return (
+    <ErrorBoundary
+      fallback={(err, reset) => (
+        <div class='error-container'>
+          <h2>Something went wrong</h2>
+          <p>{err.message}</p>
+          <button onClick={reset}>Try Again</button>
+        </div>
+      )}
+    >
+      <MainContent />
+    </ErrorBoundary>
+  );
+}
+```
+
+## Refs and DOM Access
+
+```jsx
+function AutoFocusInput(props) {
+  let inputRef;
+
+  onMount(() => {
+    inputRef?.focus();
+  });
+
+  return <input ref={inputRef} {...props} />;
+}
+
+// Multiple refs
+function ResizablePanel() {
+  let containerRef;
+  let handleRef;
+
+  onMount(() => {
+    // Access both refs
+  });
+
+  return (
+    <div ref={containerRef}>
+      <div ref={handleRef} class='resize-handle' />
+    </div>
+  );
+}
+```
+
+## Async Data Patterns
+
+### With createResource
+
+```jsx
+import { createResource, Suspense } from 'solid-js';
+
+const fetchUser = async id => {
+  const res = await fetch(`/api/users/${id}`);
+  return res.json();
+};
+
+function UserProfile(props) {
+  const [user] = createResource(() => props.userId, fetchUser);
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Show when={user()}>
+        <div>
+          <h1>{user().name}</h1>
+          <p>{user().email}</p>
+        </div>
+      </Show>
+    </Suspense>
+  );
+}
+```
+
+### Manual Async with Signals
+
+```jsx
+function DataComponent(props) {
+  const [data, setData] = createSignal(null);
+  const [loading, setLoading] = createSignal(true);
+  const [error, setError] = createSignal(null);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await api.getData(props.id);
+      setData(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMount(fetchData);
+
+  // Refetch when id changes
+  createEffect(() => {
+    props.id; // Track dependency
+    fetchData();
+  });
+
+  return (
+    <Switch>
+      <Match when={loading()}>
+        <Loading />
+      </Match>
+      <Match when={error()}>
+        <Error message={error()} />
+      </Match>
+      <Match when={data()}>
+        <Content data={data()} />
+      </Match>
+    </Switch>
+  );
+}
+```
+
+## Form Patterns
+
+### Controlled Inputs
+
+```jsx
+function ContactForm() {
+  const [form, setForm] = createStore({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    await submitForm(form);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input value={form.name} onInput={e => setForm('name', e.target.value)} placeholder='Name' />
+      <input value={form.email} onInput={e => setForm('email', e.target.value)} placeholder='Email' type='email' />
+      <textarea value={form.message} onInput={e => setForm('message', e.target.value)} placeholder='Message' />
+      <button type='submit'>Send</button>
+    </form>
+  );
+}
+```
+
+### Form Validation
+
+```jsx
+function ValidatedForm() {
+  const [form, setForm] = createStore({ email: '', password: '' });
+  const [errors, setErrors] = createStore({ email: '', password: '' });
+
+  const validate = () => {
+    let valid = true;
+
+    if (!form.email.includes('@')) {
+      setErrors('email', 'Invalid email');
+      valid = false;
+    } else {
+      setErrors('email', '');
+    }
+
+    if (form.password.length < 8) {
+      setErrors('password', 'Password must be at least 8 characters');
+      valid = false;
+    } else {
+      setErrors('password', '');
+    }
+
+    return valid;
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (validate()) {
+      // Submit form
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input value={form.email} onInput={e => setForm('email', e.target.value)} />
+        <Show when={errors.email}>
+          <span class='text-red-500'>{errors.email}</span>
+        </Show>
+      </div>
+      {/* ... */}
+    </form>
+  );
+}
+```
+
+## Ark UI Component Usage
+
+### Dialog
+
+```jsx
+import { Dialog, useConfirmDialog } from '@corates/ui';
+
+function SettingsButton() {
+  const [open, setOpen] = createSignal(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Settings</button>
+      <Dialog open={open()} onOpenChange={setOpen}>
+        <Dialog.Content>
+          <Dialog.Title>Settings</Dialog.Title>
+          <Dialog.Description>Configure your preferences</Dialog.Description>
+          {/* Content */}
+          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}
+
+// Confirm dialog hook
+function DeleteButton(props) {
+  const confirmDialog = useConfirmDialog();
+
+  const handleDelete = async () => {
+    const confirmed = await confirmDialog.confirm({
+      title: 'Delete Item?',
+      message: 'This action cannot be undone.',
+    });
+    if (confirmed) {
+      props.onDelete?.();
+    }
+  };
+
+  return <button onClick={handleDelete}>Delete</button>;
+}
+```
+
+### Select
+
+```jsx
+import { Select } from '@corates/ui';
+
+function StatusSelect(props) {
+  const options = [
+    { value: 'active', label: 'Active' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'completed', label: 'Completed' },
+  ];
+
+  return <Select value={props.value} onChange={props.onChange} options={options} placeholder='Select status' />;
+}
+```
+
+### Tooltip
+
+```jsx
+import { Tooltip } from '@corates/ui';
+
+function IconButton(props) {
+  return (
+    <Tooltip content={props.tooltip}>
+      <button onClick={props.onClick}>{props.icon}</button>
+    </Tooltip>
+  );
+}
+```
+
+### Avatar
+
+```jsx
+import { Avatar } from '@corates/ui';
+
+function UserAvatar(props) {
+  return (
+    <Avatar
+      src={props.user?.image}
+      name={props.user?.name}
+      class='h-8 w-8 rounded-full'
+      fallbackClass='flex items-center justify-center bg-gray-200 text-gray-600 text-sm font-medium'
+    />
+  );
+}
+```
diff --git a/.claude/skills/review/SKILL.md b/.claude/skills/review/SKILL.md
new file mode 100644
index 000000000..2ff91eeb7
--- /dev/null
+++ b/.claude/skills/review/SKILL.md
@@ -0,0 +1,337 @@
+---
+name: Review
+description: This skill should be used when the user asks to "review code", "check for anti-patterns", "audit my code", "find issues in code", "review this file", "check this component", or mentions code review, linting, or pattern checking. Identifies CoRATES-specific anti-patterns in SolidJS components and Hono API routes.
+---
+
+# Code Review for CoRATES
+
+Review code for anti-patterns specific to this codebase.
+
+## Review Process
+
+1. Read the file(s) to review
+2. Check against anti-pattern categories below
+3. Report issues with file path, line number, and fix
+4. Summarize findings by severity
+
+## Report Format
+
+```
+## Review: [filename]
+
+### Critical Issues
+- **[file:line]** [Issue description]
+  - Problem: [What's wrong]
+  - Fix: [How to fix]
+
+### Warnings
+- **[file:line]** [Issue description]
+
+### Suggestions
+- [Optional improvements]
+
+### Summary
+- Critical: X issues
+- Warnings: Y issues
+- Overall: [PASS/NEEDS FIXES]
+```
+
+---
+
+## SolidJS Anti-Patterns
+
+### Critical: Prop Destructuring
+
+Breaks reactivity. Props must be accessed via `props.field`.
+
+```javascript
+// BAD - breaks reactivity
+function Component({ title, items, onSelect }) {
+  return <h1>{title}</h1>;
+}
+
+// GOOD
+function Component(props) {
+  return <h1>{props.title}</h1>;
+}
+```
+
+**Detection:** Function parameters with `{ }` destructuring pattern.
+
+### Critical: Prop Drilling
+
+Shared state should be imported from stores, not passed through props.
+
+```javascript
+// BAD - drilling shared state
+function Parent() {
+  return <Child user={user()} projects={projects()} settings={settings()} />;
+}
+
+// GOOD - import stores where needed
+import projectStore from '@/stores/projectStore.js';
+
+function Child(props) {
+  const projects = () => projectStore.getProjects();
+}
+```
+
+**Detection:** Components passing 5+ props, or passing stores/auth/global state as props.
+
+### Warning: Too Many Props
+
+Components should receive 1-5 props max (local config only).
+
+**Detection:** More than 5 parameters in component props.
+
+### Critical: Wrong Ark UI Import
+
+Ark UI components must come from `@corates/ui`, not local wrappers.
+
+```javascript
+// BAD
+import { Dialog } from '@/components/ark/Dialog.jsx';
+import { Dialog } from '~/components/Dialog';
+
+// GOOD
+import { Dialog, Select, Toast } from '@corates/ui';
+```
+
+**Detection:** Ark component names (Dialog, Select, Toast, Avatar, Tooltip, Collapsible) imported from paths other than `@corates/ui`.
+
+### Warning: Missing Cleanup
+
+Effects with event listeners, timers, or subscriptions need `onCleanup`.
+
+```javascript
+// BAD
+onMount(() => {
+  document.addEventListener('click', handler);
+});
+
+// GOOD
+onMount(() => {
+  document.addEventListener('click', handler);
+  onCleanup(() => document.removeEventListener('click', handler));
+});
+```
+
+**Detection:** `addEventListener`, `setInterval`, `setTimeout` without corresponding `onCleanup`.
+
+---
+
+## API Route Anti-Patterns
+
+### Critical: Missing Validation
+
+Request bodies must be validated with Zod via `validateRequest` middleware.
+
+```javascript
+// BAD
+routes.post('/', async c => {
+  const body = await c.req.json(); // Unvalidated!
+});
+
+// GOOD
+routes.post('/', validateRequest(schema), async c => {
+  const data = c.get('validatedBody');
+});
+```
+
+**Detection:** `c.req.json()` called directly in handler without `validateRequest` middleware.
+
+### Critical: Missing Auth
+
+Protected routes need `requireAuth` middleware.
+
+```javascript
+// BAD - no auth
+routes.get('/me', async c => { ... });
+
+// GOOD
+routes.use('*', requireAuth);
+routes.get('/me', async c => { ... });
+```
+
+**Detection:** Routes accessing user data without `requireAuth` in middleware chain.
+
+### Warning: Raw Error Returns
+
+Use `createDomainError` from `@corates/shared`, not raw objects.
+
+```javascript
+// BAD
+return c.json({ error: 'Not found' }, 404);
+
+// GOOD
+const error = createDomainError(PROJECT_ERRORS.NOT_FOUND, { projectId });
+return c.json(error, error.statusCode);
+```
+
+**Detection:** `c.json({ error:` patterns without using `createDomainError`.
+
+### Warning: Missing Try-Catch
+
+Database operations should be wrapped in try-catch with proper error handling.
+
+```javascript
+// BAD
+const result = await db.select().from(items);
+return c.json(result);
+
+// GOOD
+try {
+  const result = await db.select().from(items);
+  return c.json(result);
+} catch (error) {
+  console.error('Error:', error);
+  const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, { operation: 'fetch' });
+  return c.json(dbError, dbError.statusCode);
+}
+```
+
+**Detection:** `db.select/insert/update/delete` calls not within try-catch blocks.
+
+### Warning: Direct Context Access
+
+Use getter functions instead of `c.get()` for standard context.
+
+```javascript
+// BAD
+const user = c.get('user');
+
+// GOOD
+const { user } = getAuth(c);
+const { orgId } = getOrgContext(c);
+```
+
+**Detection:** `c.get('user')` or `c.get('session')` instead of `getAuth(c)`.
+
+---
+
+## General Anti-Patterns
+
+### Critical: Emojis/Unicode Symbols
+
+Never use emojis or unicode symbols anywhere in code, comments, or strings.
+
+```javascript
+// BAD
+const status = '✓ Complete';
+// Great work! 🎉
+
+// GOOD
+const status = 'Complete';
+import { FiCheck } from 'solid-icons/fi';
+```
+
+**Detection:** Any emoji or unicode symbol characters.
+
+### Warning: Wrong Import Paths
+
+Use path aliases from jsconfig.json.
+
+```javascript
+// BAD
+import store from '../../../stores/projectStore.js';
+import Component from '../../components/Feature/Component.jsx';
+
+// GOOD
+import store from '@/stores/projectStore.js';
+import Component from '@components/Feature/Component.jsx';
+```
+
+**Detection:** Relative imports with `../` that could use `@/`, `@components/`, etc.
+
+### Warning: Narrating Comments
+
+Comments should explain WHY, not WHAT.
+
+```javascript
+// BAD - narrates the code
+// Increment counter by 1
+counter += 1;
+
+// GOOD - explains why
+// Rate limit requires tracking failed attempts
+counter += 1;
+```
+
+**Detection:** Comments that repeat variable/function names or describe obvious operations.
+
+### Warning: Over-Engineering
+
+Avoid unnecessary abstractions, feature flags, and backwards-compat code.
+
+- Single-use helper functions
+- Feature flags for non-production code
+- Unused re-exports or renamed variables
+- `// removed` or `// deprecated` comments for deleted code
+
+**Detection:** Unused exports, single-call functions, compatibility shims.
+
+---
+
+## File-Specific Checks
+
+### Components (packages/web/src/components/)
+
+1. Prop destructuring in function signature
+2. Props accessed via `props.field`
+3. Stores imported directly (not prop-drilled)
+4. Icons from `solid-icons/*`
+5. UI components from `@corates/ui`
+6. Effects have cleanup when needed
+7. No emojis
+
+### API Routes (packages/workers/src/routes/)
+
+1. `requireAuth` applied to protected routes
+2. `validateRequest` for POST/PATCH/PUT bodies
+3. `createDomainError` for error responses
+4. Try-catch around database operations
+5. Context accessed via getters (`getAuth`, `getOrgContext`)
+6. Schemas defined in config/validation.js
+
+### Stores (packages/web/src/stores/)
+
+1. Exports are signals/functions, not raw values
+2. State mutations through setter functions
+3. `produce` used for nested store updates
+
+---
+
+## Quick Grep Patterns
+
+Use these to find common issues:
+
+```bash
+# Prop destructuring
+grep -rn "function.*({.*})" packages/web/src/components/
+
+# Direct c.get('user')
+grep -rn "c\.get('user')" packages/workers/src/routes/
+
+# Raw error objects
+grep -rn "c\.json({ error:" packages/workers/src/routes/
+
+# Wrong Ark imports
+grep -rn "from.*components.*Dialog\|Select\|Toast" packages/web/src/
+
+# Emojis (basic check)
+grep -rPn "[\x{1F300}-\x{1F9FF}]" packages/
+
+# Relative imports
+grep -rn "from '\.\./\.\./\.\." packages/web/src/components/
+```
+
+---
+
+## Additional Resources
+
+### Reference Files
+
+For detailed patterns and edge cases:
+
+- **`references/checklist.md`** - Complete review checklist by file type
+- **`references/fixes.md`** - Common fixes with before/after examples
diff --git a/.claude/skills/review/references/checklist.md b/.claude/skills/review/references/checklist.md
new file mode 100644
index 000000000..7741bef61
--- /dev/null
+++ b/.claude/skills/review/references/checklist.md
@@ -0,0 +1,177 @@
+# Complete Review Checklist
+
+Comprehensive checklist organized by file type.
+
+---
+
+## SolidJS Component Checklist
+
+### Props & Reactivity
+
+- [ ] **No prop destructuring** - Function uses `props` parameter, not `{ field1, field2 }`
+- [ ] **Props accessed correctly** - Uses `props.field` or `() => props.field`, never destructured
+- [ ] **Minimal props** - Component receives 1-5 props maximum
+- [ ] **No prop drilling** - Shared state imported from stores, not passed as props
+- [ ] **Derived values wrapped** - Complex prop access uses `createMemo` or arrow functions
+
+### Imports
+
+- [ ] **Ark UI from @corates/ui** - Dialog, Select, Toast, Avatar, Tooltip, Collapsible imported correctly
+- [ ] **Icons from solid-icons** - Using `solid-icons/fi`, `solid-icons/ai`, etc.
+- [ ] **Path aliases used** - Using `@/`, `@components/`, `@primitives/`, not deep relative paths
+- [ ] **Stores imported directly** - Not receiving stores via props
+
+### State & Effects
+
+- [ ] **Correct state primitive** - `createSignal` for simple, `createStore` for complex, `createMemo` for derived
+- [ ] **Effects have cleanup** - `onCleanup` called for event listeners, timers, subscriptions
+- [ ] **No side effects in render** - Side effects in `createEffect` or `onMount`, not inline
+
+### JSX & Styling
+
+- [ ] **No emojis** - No emoji characters anywhere
+- [ ] **Conditional rendering** - Using `<Show>` and `<Switch>/<Match>` correctly
+- [ ] **List rendering** - Using `<For>` with proper key handling
+- [ ] **Event handlers** - Using `onClick={() => handler()}` pattern, not `onClick={handler()}`
+
+### Structure
+
+- [ ] **Single responsibility** - Component does one thing well
+- [ ] **Reasonable size** - Under 200 lines, extract if larger
+- [ ] **Logic in stores/primitives** - Business logic not in component body
+
+---
+
+## API Route Checklist
+
+### Authentication & Authorization
+
+- [ ] **Auth middleware applied** - `requireAuth` for protected routes
+- [ ] **Org membership checked** - `requireOrgMembership()` for org-scoped routes
+- [ ] **Write access verified** - `requireOrgWriteAccess()` for mutations
+- [ ] **Entitlements checked** - `requireEntitlement()` for feature-gated operations
+- [ ] **Quotas enforced** - `requireQuota()` for resource creation
+
+### Validation
+
+- [ ] **Request body validated** - `validateRequest(schema)` middleware for POST/PATCH/PUT
+- [ ] **Schema in validation.js** - Schemas defined centrally, not inline
+- [ ] **Path params validated** - UUID format checked if needed
+- [ ] **Query params sanitized** - Limits enforced, types parsed
+
+### Database Operations
+
+- [ ] **Drizzle ORM used** - No raw SQL queries
+- [ ] **Try-catch wrapper** - Database operations wrapped in try-catch
+- [ ] **Batch for atomicity** - Related inserts/deletes use `db.batch()`
+- [ ] **Errors logged** - `console.error` with operation context
+
+### Error Handling
+
+- [ ] **Domain errors used** - `createDomainError` from `@corates/shared`
+- [ ] **Proper status codes** - Using `error.statusCode` from domain error
+- [ ] **Context included** - Error metadata includes operation name, IDs
+- [ ] **No raw error objects** - Not using `{ error: 'message' }` directly
+
+### Context & Response
+
+- [ ] **Auth via getter** - Using `getAuth(c)` not `c.get('user')`
+- [ ] **Org via getter** - Using `getOrgContext(c)` not `c.get('orgId')`
+- [ ] **Validated body via context** - Using `c.get('validatedBody')`
+- [ ] **Proper response format** - `c.json(data, statusCode)`
+
+### Structure
+
+- [ ] **Route file organization** - Hono instance, middleware, handlers, export
+- [ ] **Middleware order correct** - Auth -> Org -> Entitlement -> Quota -> Validation
+- [ ] **No business logic in handler** - Complex logic in lib/ or services/
+
+---
+
+## Store Checklist
+
+### State Definition
+
+- [ ] **Correct primitive** - `createSignal` for simple, `createStore` for complex
+- [ ] **Initial state defined** - Clear initial values
+- [ ] **Singleton pattern** - Store created once and exported
+
+### Mutations
+
+- [ ] **Setter functions exposed** - State changed via functions, not direct access
+- [ ] **Produce for nested updates** - Using `produce` from solid-js/store
+- [ ] **Immutable patterns** - Not mutating state directly
+
+### Exports
+
+- [ ] **Signals exported as getters** - Exporting `signal` not `signal()`
+- [ ] **Clear interface** - Getters and setters clearly named
+- [ ] **No internal state leaked** - Internal implementation hidden
+
+---
+
+## General Code Checklist
+
+### No Emojis/Unicode
+
+- [ ] **No emoji in code** - No emoji characters anywhere
+- [ ] **No emoji in comments** - Comments are plain text
+- [ ] **No emoji in strings** - UI text uses icons, not emojis
+- [ ] **No unicode symbols** - No special unicode characters
+
+### Comments
+
+- [ ] **Explain WHY not WHAT** - Comments provide context, not narration
+- [ ] **No stale comments** - Comments match current code
+- [ ] **No commented-out code** - Dead code removed, not commented
+- [ ] **No "removed" markers** - `// removed`, `// deprecated` cleaned up
+
+### Imports
+
+- [ ] **Path aliases used** - `@/`, `@components/`, not `../../../`
+- [ ] **No unused imports** - All imports used
+- [ ] **Grouped logically** - External, then internal, then relative
+
+### Code Quality
+
+- [ ] **No over-engineering** - No single-use abstractions
+- [ ] **No feature flags** - No flags for pre-production code
+- [ ] **No backwards compat** - No unused re-exports or renames
+- [ ] **Focused functions** - Each function does one thing
+
+---
+
+## File Size Guidelines
+
+| File Type  | Target     | Max | Action if exceeded     |
+| ---------- | ---------- | --- | ---------------------- |
+| Component  | <150 lines | 200 | Extract sub-components |
+| Route file | <200 lines | 300 | Split into sub-routes  |
+| Store      | <150 lines | 200 | Split by domain        |
+| Utility    | <100 lines | 150 | Split by function      |
+
+---
+
+## Severity Levels
+
+### Critical (Must Fix)
+
+- Prop destructuring (breaks app)
+- Missing auth on protected routes (security)
+- Emojis (codebase standard)
+- Wrong Ark UI imports (build issues)
+- Unvalidated request bodies (security)
+
+### Warning (Should Fix)
+
+- Prop drilling (maintainability)
+- Too many props (design smell)
+- Missing try-catch (error handling)
+- Raw error objects (consistency)
+- Relative imports (maintainability)
+
+### Suggestion (Nice to Have)
+
+- Comment improvements
+- Code organization
+- Minor refactoring opportunities
diff --git a/.claude/skills/review/references/fixes.md b/.claude/skills/review/references/fixes.md
new file mode 100644
index 000000000..3e3184ed0
--- /dev/null
+++ b/.claude/skills/review/references/fixes.md
@@ -0,0 +1,470 @@
+# Common Fixes
+
+Before and after examples for common anti-patterns.
+
+---
+
+## SolidJS Fixes
+
+### Fix: Prop Destructuring
+
+**Before (broken reactivity):**
+
+```jsx
+function UserCard({ user, onSelect, showAvatar }) {
+  return (
+    <div onClick={() => onSelect(user.id)}>
+      {showAvatar && <Avatar src={user.image} />}
+      <span>{user.name}</span>
+    </div>
+  );
+}
+```
+
+**After:**
+
+```jsx
+function UserCard(props) {
+  return (
+    <div onClick={() => props.onSelect?.(props.user?.id)}>
+      <Show when={props.showAvatar}>
+        <Avatar src={props.user?.image} />
+      </Show>
+      <span>{props.user?.name}</span>
+    </div>
+  );
+}
+```
+
+---
+
+### Fix: Prop Drilling
+
+**Before (drilling shared state):**
+
+```jsx
+// Parent.jsx
+function Parent() {
+  const projects = useProjects();
+  const user = useUser();
+
+  return (
+    <Layout user={user}>
+      <Sidebar projects={projects} user={user} />
+      <Content projects={projects} user={user} />
+    </Layout>
+  );
+}
+
+// Sidebar.jsx
+function Sidebar({ projects, user }) {
+  return (
+    <div>
+      <UserInfo user={user} />
+      <ProjectList projects={projects} />
+    </div>
+  );
+}
+```
+
+**After:**
+
+```jsx
+// Parent.jsx
+function Parent() {
+  return (
+    <Layout>
+      <Sidebar />
+      <Content />
+    </Layout>
+  );
+}
+
+// Sidebar.jsx
+import projectStore from '@/stores/projectStore.js';
+import { user } from '@/stores/authStore.js';
+
+function Sidebar() {
+  const projects = () => projectStore.getProjects();
+
+  return (
+    <div>
+      <UserInfo />
+      <ProjectList />
+    </div>
+  );
+}
+```
+
+---
+
+### Fix: Wrong Ark UI Import
+
+**Before:**
+
+```jsx
+import { Dialog } from '@/components/ark/Dialog.jsx';
+import { Select } from '~/components/Select';
+import { Tooltip } from '../../../components/Tooltip';
+```
+
+**After:**
+
+```jsx
+import { Dialog, Select, Tooltip } from '@corates/ui';
+```
+
+---
+
+### Fix: Missing Effect Cleanup
+
+**Before:**
+
+```jsx
+function Component() {
+  const [width, setWidth] = createSignal(window.innerWidth);
+
+  onMount(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+
+    const interval = setInterval(() => {
+      fetchData();
+    }, 5000);
+  });
+
+  return <div>Width: {width()}</div>;
+}
+```
+
+**After:**
+
+```jsx
+function Component() {
+  const [width, setWidth] = createSignal(window.innerWidth);
+
+  onMount(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+
+    const interval = setInterval(() => {
+      fetchData();
+    }, 5000);
+
+    onCleanup(() => {
+      window.removeEventListener('resize', handleResize);
+      clearInterval(interval);
+    });
+  });
+
+  return <div>Width: {width()}</div>;
+}
+```
+
+---
+
+### Fix: Derived Value Without Memo
+
+**Before:**
+
+```jsx
+function Stats(props) {
+  // Recomputes on every render
+  const percentage = (props.completed / props.total) * 100;
+  const isComplete = percentage === 100;
+
+  return <span>{percentage}%</span>;
+}
+```
+
+**After:**
+
+```jsx
+function Stats(props) {
+  const stats = createMemo(() => {
+    const total = props.total ?? 0;
+    const completed = props.completed ?? 0;
+    const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+    return { percentage, isComplete: percentage === 100 };
+  });
+
+  return <span>{stats().percentage}%</span>;
+}
+```
+
+---
+
+## API Route Fixes
+
+### Fix: Missing Validation
+
+**Before:**
+
+```javascript
+routes.post('/', requireAuth, async c => {
+  const body = await c.req.json();
+  const { name, email } = body; // Unvalidated!
+
+  await db.insert(users).values({ name, email });
+  return c.json({ success: true });
+});
+```
+
+**After:**
+
+```javascript
+// In config/validation.js
+export const userSchemas = {
+  create: z.object({
+    name: z
+      .string()
+      .min(1)
+      .max(255)
+      .transform(val => val.trim()),
+    email: z.string().email(),
+  }),
+};
+
+// In routes
+routes.post('/', requireAuth, validateRequest(userSchemas.create), async c => {
+  const { name, email } = c.get('validatedBody');
+
+  await db.insert(users).values({ name, email });
+  return c.json({ success: true });
+});
+```
+
+---
+
+### Fix: Raw Error Objects
+
+**Before:**
+
+```javascript
+routes.get('/:id', async c => {
+  const id = c.req.param('id');
+  const item = await db.select().from(items).where(eq(items.id, id)).get();
+
+  if (!item) {
+    return c.json({ error: 'Item not found' }, 404);
+  }
+
+  return c.json(item);
+});
+```
+
+**After:**
+
+```javascript
+import { createDomainError, ITEM_ERRORS, SYSTEM_ERRORS } from '@corates/shared';
+
+routes.get('/:id', async c => {
+  const id = c.req.param('id');
+
+  try {
+    const item = await db.select().from(items).where(eq(items.id, id)).get();
+
+    if (!item) {
+      const error = createDomainError(ITEM_ERRORS.NOT_FOUND, { id });
+      return c.json(error, error.statusCode);
+    }
+
+    return c.json(item);
+  } catch (error) {
+    console.error('Error fetching item:', error);
+    const dbError = createDomainError(SYSTEM_ERRORS.DB_ERROR, {
+      operation: 'fetch_item',
+    });
+    return c.json(dbError, dbError.statusCode);
+  }
+});
+```
+
+---
+
+### Fix: Direct Context Access
+
+**Before:**
+
+```javascript
+routes.get('/me', async c => {
+  const user = c.get('user');
+  const session = c.get('session');
+  const orgId = c.get('orgId');
+
+  // ...
+});
+```
+
+**After:**
+
+```javascript
+import { getAuth } from '@/middleware/auth.js';
+import { getOrgContext } from '@/middleware/requireOrg.js';
+
+routes.get('/me', async c => {
+  const { user, session } = getAuth(c);
+  const { orgId, orgRole } = getOrgContext(c);
+
+  // ...
+});
+```
+
+---
+
+### Fix: Missing Auth Middleware
+
+**Before:**
+
+```javascript
+const userRoutes = new Hono();
+
+userRoutes.get('/profile', async c => {
+  const user = c.get('user'); // Could be null!
+  return c.json(user);
+});
+```
+
+**After:**
+
+```javascript
+const userRoutes = new Hono();
+
+// Apply to all routes in this router
+userRoutes.use('*', requireAuth);
+
+userRoutes.get('/profile', async c => {
+  const { user } = getAuth(c); // Guaranteed to exist
+  return c.json(user);
+});
+```
+
+---
+
+## General Fixes
+
+### Fix: Emojis in Code
+
+**Before:**
+
+```javascript
+// ✅ User authentication complete
+const STATUS_COMPLETE = '✓';
+const STATUS_ERROR = '❌';
+
+console.log('🚀 Server starting...');
+```
+
+**After:**
+
+```javascript
+// User authentication complete
+import { FiCheck, FiX } from 'solid-icons/fi';
+
+// Use icons in JSX
+<FiCheck class="text-green-500" />
+<FiX class="text-red-500" />
+
+console.log('Server starting...');
+```
+
+---
+
+### Fix: Deep Relative Imports
+
+**Before:**
+
+```javascript
+import { helper } from '../../../lib/utils.js';
+import Component from '../../components/shared/Component.jsx';
+import store from '../../../stores/projectStore.js';
+```
+
+**After:**
+
+```javascript
+import { helper } from '@lib/utils.js';
+import Component from '@components/shared/Component.jsx';
+import store from '@/stores/projectStore.js';
+```
+
+---
+
+### Fix: Narrating Comments
+
+**Before:**
+
+```javascript
+// Get the user from the database
+const user = await db.select().from(users).where(eq(users.id, id)).get();
+
+// Check if user exists
+if (!user) {
+  // Return 404 error
+  return c.json({ error: 'Not found' }, 404);
+}
+
+// Increment the login count
+user.loginCount += 1;
+```
+
+**After:**
+
+```javascript
+const user = await db.select().from(users).where(eq(users.id, id)).get();
+
+if (!user) {
+  const error = createDomainError(USER_ERRORS.NOT_FOUND, { id });
+  return c.json(error, error.statusCode);
+}
+
+// Track login frequency for rate limiting decisions
+user.loginCount += 1;
+```
+
+---
+
+### Fix: Over-Engineering
+
+**Before:**
+
+```javascript
+// Unused feature flag
+const ENABLE_NEW_AUTH = process.env.ENABLE_NEW_AUTH ?? false;
+
+// Single-use helper
+function formatUserName(user) {
+  return user.name.trim();
+}
+
+// Backwards compat re-export
+export { oldFunction as newFunction };
+
+// Old implementation, now removed
+// function legacyAuth() { ... }
+```
+
+**After:**
+
+```javascript
+// Just use the value directly
+const userName = user.name.trim();
+
+// Remove unused exports and dead code entirely
+```
+
+---
+
+## Quick Reference Table
+
+| Anti-Pattern       | Detection                          | Fix                       |
+| ------------------ | ---------------------------------- | ------------------------- |
+| Prop destructuring | `function Comp({ x })`             | `function Comp(props)`    |
+| Prop drilling      | 5+ props, passing stores           | Import stores directly    |
+| Wrong Ark import   | `from '@/components/ark'`          | `from '@corates/ui'`      |
+| Missing cleanup    | addEventListener without onCleanup | Add onCleanup             |
+| Missing validation | `c.req.json()` in handler          | Use `validateRequest()`   |
+| Raw error          | `{ error: 'msg' }`                 | `createDomainError()`     |
+| Direct context     | `c.get('user')`                    | `getAuth(c)`              |
+| Emoji              | Any emoji character                | Remove or use solid-icons |
+| Deep relative      | `../../../`                        | `@/` or `@components/`    |
diff --git a/.claude/skills/review/scripts/quick-check.sh b/.claude/skills/review/scripts/quick-check.sh
new file mode 100755
index 000000000..1f21dca8a
--- /dev/null
+++ b/.claude/skills/review/scripts/quick-check.sh
@@ -0,0 +1,64 @@
+#!/bin/bash
+# Quick check for common anti-patterns in CoRATES codebase
+# Usage: ./quick-check.sh [path]
+
+TARGET="${1:-packages}"
+
+echo "=== CoRATES Code Review Quick Check ==="
+echo "Scanning: $TARGET"
+echo ""
+
+# Colors
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+NC='\033[0m' # No Color
+
+echo "--- CRITICAL ISSUES ---"
+echo ""
+
+# Prop destructuring in components
+echo -e "${RED}[CRITICAL] Prop Destructuring:${NC}"
+grep -rn "function.*Component.*({" "$TARGET/web/src/components/" 2>/dev/null | head -10
+grep -rn "export function.*({" "$TARGET/web/src/components/" 2>/dev/null | grep -v "export function use" | head -10
+echo ""
+
+# Wrong Ark UI imports
+echo -e "${RED}[CRITICAL] Wrong Ark UI Imports:${NC}"
+grep -rn "from.*components.*Dialog\|from.*components.*Select\|from.*components.*Toast\|from.*components.*Avatar" "$TARGET/web/src/" 2>/dev/null | grep -v "@corates/ui" | head -10
+echo ""
+
+# Unvalidated request bodies
+echo -e "${RED}[CRITICAL] Unvalidated Request Bodies:${NC}"
+grep -rn "c\.req\.json()" "$TARGET/workers/src/routes/" 2>/dev/null | head -10
+echo ""
+
+# Missing auth check
+echo -e "${RED}[CRITICAL] Direct c.get('user') without getter:${NC}"
+grep -rn "c\.get('user')" "$TARGET/workers/src/routes/" 2>/dev/null | head -10
+echo ""
+
+echo "--- WARNINGS ---"
+echo ""
+
+# Raw error objects
+echo -e "${YELLOW}[WARNING] Raw Error Objects:${NC}"
+grep -rn "c\.json({ error:" "$TARGET/workers/src/routes/" 2>/dev/null | head -10
+echo ""
+
+# Deep relative imports
+echo -e "${YELLOW}[WARNING] Deep Relative Imports:${NC}"
+grep -rn "from '\.\./\.\./\.\." "$TARGET/web/src/components/" 2>/dev/null | head -10
+echo ""
+
+# Too many props (rough check)
+echo -e "${YELLOW}[WARNING] Potential Prop Drilling (many props):${NC}"
+grep -rn "<[A-Z][a-zA-Z]*.*=.*=.*=.*=.*=" "$TARGET/web/src/components/" 2>/dev/null | head -10
+echo ""
+
+# Missing try-catch around db operations
+echo -e "${YELLOW}[WARNING] DB Operations (verify try-catch):${NC}"
+grep -rn "await db\." "$TARGET/workers/src/routes/" 2>/dev/null | head -10
+echo ""
+
+echo "=== Quick Check Complete ==="
+echo "Review flagged items manually for false positives."
diff --git a/packages/docs/plans/dashboard-redesign.md b/packages/docs/plans/dashboard-redesign.md
new file mode 100644
index 000000000..5797d74db
--- /dev/null
+++ b/packages/docs/plans/dashboard-redesign.md
@@ -0,0 +1,528 @@
+# Dashboard Redesign Plan
+
+This plan outlines the implementation of a redesigned dashboard based on the mock at `/mocks/dashboard`. The goal is to replace the existing minimal dashboard with a production-grade experience that handles all user states gracefully.
+
+## Current State Analysis
+
+### Existing Implementation
+
+The current dashboard ([Dashboard.jsx](packages/web/src/components/Dashboard.jsx)) is minimal:
+
+```jsx
+// Current structure (simplified)
+<Show when={isLoggedIn() && !authLoading()}>
+  <ProjectsPanel />
+</Show>
+<LocalAppraisalsPanel showHeader={true} showSignInPrompt={!isLoggedIn()} />
+```
+
+### Key Components to Replace/Integrate
+
+| Component              | Location                             | Purpose                           |
+| ---------------------- | ------------------------------------ | --------------------------------- |
+| `ProjectsPanel`        | `project/ProjectsPanel.jsx`          | Projects grid with create form    |
+| `LocalAppraisalsPanel` | `checklist/LocalAppraisalsPanel.jsx` | Device-local appraisals           |
+| `ProjectCard`          | `project/ProjectCard.jsx`            | Individual project card           |
+| `ContactPrompt`        | `project/ContactPrompt.jsx`          | Early access / quota limit prompt |
+| `CreateProjectForm`    | `project/CreateProjectForm.jsx`      | Project creation modal            |
+
+### State Dependencies
+
+| State                       | Source            | Used For                    |
+| --------------------------- | ----------------- | --------------------------- |
+| `isLoggedIn()`              | `useBetterAuth`   | Show projects section       |
+| `authLoading()`             | `useBetterAuth`   | Loading skeleton            |
+| `isOnline()`                | `useBetterAuth`   | Disable create when offline |
+| `hasEntitlement()`          | `useSubscription` | Project creation permission |
+| `hasQuota()`                | `useSubscription` | Project limit check         |
+| `subscriptionLoading()`     | `useSubscription` | Loading states              |
+| `subscriptionFetchFailed()` | `useSubscription` | Error banner                |
+
+---
+
+## User State Matrix
+
+The dashboard must handle these distinct states:
+
+| #   | State                   | Auth     | Subscription | UI Requirements                                    |
+| --- | ----------------------- | -------- | ------------ | -------------------------------------------------- |
+| 1   | **Logged Out**          | No       | N/A          | Local appraisals only, prominent sign-in CTA       |
+| 2   | **Loading**             | Checking | Checking     | Skeleton UI, no flickering                         |
+| 3   | **Free (No Plan)**      | Yes      | None/Free    | Show projects (if any), ContactPrompt for creation |
+| 4   | **Trial/Grant**         | Yes      | Trial        | Full features, show trial status                   |
+| 5   | **Active Subscriber**   | Yes      | Active       | Full features, usage stats                         |
+| 6   | **Quota Exceeded**      | Yes      | Active       | Show projects, ContactPrompt for more              |
+| 7   | **Subscription Error**  | Yes      | Failed       | Warning banner, retry button                       |
+| 8   | **Offline (Logged In)** | Cached   | Cached       | Read-only mode, offline indicator                  |
+
+---
+
+## Implementation Phases
+
+### Phase 1: Core Layout and Components
+
+**Goal:** Implement the new dashboard structure with proper state handling.
+
+#### 1.1 Create New Dashboard Component
+
+**File:** `packages/web/src/components/dashboard/Dashboard.jsx`
+
+Create a new dashboard module directory with:
+
+```
+components/dashboard/
+  Dashboard.jsx         # Main container with state logic
+  DashboardHeader.jsx   # Welcome section with user info
+  StatsRow.jsx          # Stats cards row
+  ProjectsSection.jsx   # Projects grid
+  LocalSection.jsx      # Local appraisals section
+  ActivityFeed.jsx      # Recent activity sidebar
+  ProgressCard.jsx      # Overall progress visualization
+  QuickActions.jsx      # Quick start actions
+  index.js              # Barrel export
+```
+
+#### 1.2 Dashboard State Machine
+
+```jsx
+// Pseudo-code for state handling
+const dashboardState = createMemo(() => {
+  if (authLoading()) return 'loading';
+  if (!isLoggedIn()) return 'logged-out';
+  if (subscriptionLoading()) return 'loading-subscription';
+  if (subscriptionFetchFailed()) return 'subscription-error';
+  if (!hasEntitlement('project.create')) return 'no-plan';
+  if (!hasQuota('projects.max', { used: projectCount(), requested: 1 })) return 'quota-exceeded';
+  return 'active';
+});
+```
+
+#### 1.3 Tasks
+
+- [ ] Create `dashboard/` directory structure
+- [ ] Implement `DashboardHeader` with user greeting and date
+- [ ] Implement `StatsRow` with computed stats from real data
+- [ ] Implement `ProgressCard` with SVG arc visualization
+- [ ] Implement `QuickActions` with navigation to appraisal creation
+- [ ] Implement `ActivityFeed` (initially with placeholder data)
+- [ ] Update main `Dashboard.jsx` to use new components
+
+---
+
+### Phase 2: Projects Integration
+
+**Goal:** Integrate real project data with the new visual design.
+
+#### 2.1 New ProjectCard Component
+
+The mock's `ProjectCard` needs to be reconciled with the existing one. Create a new enhanced version:
+
+**File:** `packages/web/src/components/dashboard/ProjectCard.jsx`
+
+Features:
+
+- Accent color based on project index or hash
+- Progress bar with gradient
+- Role badge (Lead/Reviewer)
+- Member count
+- Relative timestamp
+- Hover effects and animations
+
+#### 2.2 Projects Grid Integration
+
+```jsx
+// Key integration points
+- Use `useMyProjectsList()` for project data
+- Use `useSubscription()` for quota checks
+- Handle empty state with create prompt
+- Handle offline state (disable creation)
+- Show `ContactPrompt` when quota/entitlement blocked
+```
+
+#### 2.3 Tasks
+
+- [ ] Create enhanced `ProjectCard` component
+- [ ] Implement project color assignment (deterministic hash)
+- [ ] Add progress calculation (completed/total studies)
+- [ ] Integrate delete confirmation dialog
+- [ ] Wire up navigation on card click
+- [ ] Handle empty project state
+
+---
+
+### Phase 3: Local Appraisals Integration
+
+**Goal:** Integrate local appraisals with improved visual design.
+
+#### 3.1 LocalAppraisalCard Component
+
+**File:** `packages/web/src/components/dashboard/LocalAppraisalCard.jsx`
+
+Features:
+
+- Compact horizontal layout
+- Checklist type badge
+- Relative timestamp
+- Delete action
+- Inline rename (using Editable)
+
+#### 3.2 Tasks
+
+- [ ] Create `LocalAppraisalCard` component
+- [ ] Use `localChecklistsStore` for data
+- [ ] Implement delete with confirmation
+- [ ] Add inline rename functionality
+- [ ] Handle empty state
+
+---
+
+### Phase 4: Authentication States
+
+**Goal:** Handle logged-out and loading states gracefully.
+
+#### 4.1 Logged Out State
+
+When `!isLoggedIn()`:
+
+```
++------------------------------------------+
+|        Welcome to CoRATES                |
+|   Evidence synthesis made collaborative  |
+|                                          |
+|  [Sign In]  [Create Free Account]        |
++------------------------------------------+
+|                                          |
+|  Your Local Appraisals                   |
+|  (device-stored, no account needed)      |
+|                                          |
+|  [Local appraisal cards...]              |
+|                                          |
+|  Want to collaborate?                    |
+|  [Sign in to sync and share]             |
++------------------------------------------+
+```
+
+#### 4.2 Loading State
+
+Skeleton UI matching the final layout:
+
+- Pulsing placeholder for header
+- Skeleton cards for stats
+- Ghost cards for projects
+- Prevent layout shift
+
+#### 4.3 Tasks
+
+- [ ] Create `LoggedOutHero` component
+- [ ] Create `DashboardSkeleton` component
+- [ ] Ensure smooth transition from loading to loaded
+- [ ] Test with slow network conditions
+
+---
+
+### Phase 5: Subscription States
+
+**Goal:** Handle subscription edge cases with appropriate UI.
+
+#### 5.1 No Plan / Free Tier
+
+Show limited dashboard with `ContactPrompt`:
+
+```jsx
+<Show when={!canCreateProject()}>
+  <ContactPrompt restrictionType={restrictionType()} />
+</Show>
+```
+
+- Projects section shows existing projects (if any)
+- Create button replaced with ContactPrompt
+- Full access to local appraisals
+
+#### 5.2 Quota Exceeded
+
+Similar to no plan, but different messaging:
+
+- "You've reached your project limit (3/3)"
+- Contact for more capacity
+
+#### 5.3 Subscription Error
+
+Warning banner with retry:
+
+```jsx
+<Show when={subscriptionFetchFailed()}>
+  <div class='warning-banner'>
+    Unable to verify subscription. Some features may be restricted.
+    <button onClick={refetchSubscription}>Retry</button>
+  </div>
+</Show>
+```
+
+#### 5.4 Tasks
+
+- [ ] Integrate `ContactPrompt` into new layout
+- [ ] Style subscription error banner
+- [ ] Add subscription status to header (if trial/expiring)
+- [ ] Test all subscription states
+
+---
+
+### Phase 6: Activity and Stats
+
+**Goal:** Add real activity data and computed statistics.
+
+#### 6.1 Stats Computation
+
+```jsx
+const stats = createMemo(() => ({
+  activeProjects: projects()?.length || 0,
+  studiesReviewed: projects()?.reduce((sum, p) => sum + (p.completedCount || 0), 0) || 0,
+  totalStudies: projects()?.reduce((sum, p) => sum + (p.studyCount || 0), 0) || 0,
+  localAppraisals: checklists()?.length || 0,
+  teamMembers: computeUniqueTeamMembers(projects()),
+}));
+```
+
+#### 6.2 Activity Feed
+
+Initial implementation with local-only activity:
+
+- Track checklist opens/updates in local storage
+- Track project opens
+- Future: Real activity from API
+
+#### 6.3 Tasks
+
+- [ ] Add `studyCount` and `completedCount` to project list API
+- [ ] Implement stats computation
+- [ ] Create activity tracking utilities
+- [ ] Wire up activity feed
+
+---
+
+### Phase 7: Polish and Animations
+
+**Goal:** Add the refined animations and transitions from the mock.
+
+#### 7.1 Animation System
+
+```css
+@keyframes card-rise {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stat-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+```
+
+#### 7.2 Staggered Loading
+
+Cards appear with staggered delays based on index:
+
+```jsx
+<For each={projects()}>
+  {(project, index) => (
+    <div style={`animation-delay: ${index() * 80}ms`}>
+      <ProjectCard project={project} />
+    </div>
+  )}
+</For>
+```
+
+#### 7.3 Tasks
+
+- [ ] Extract animations to shared CSS file
+- [ ] Implement staggered card loading
+- [ ] Add hover effects to all interactive elements
+- [ ] Ensure animations respect `prefers-reduced-motion`
+
+---
+
+## File Changes Summary
+
+### New Files
+
+```
+packages/web/src/components/dashboard/
+  Dashboard.jsx
+  DashboardHeader.jsx
+  DashboardSkeleton.jsx
+  LoggedOutHero.jsx
+  StatsRow.jsx
+  StatCard.jsx
+  ProjectsSection.jsx
+  ProjectCard.jsx
+  LocalSection.jsx
+  LocalAppraisalCard.jsx
+  ActivityFeed.jsx
+  ProgressCard.jsx
+  QuickActions.jsx
+  CollaborationCTA.jsx
+  index.js
+```
+
+### Modified Files
+
+```
+packages/web/src/Routes.jsx          # Update Dashboard import
+packages/web/src/global.css          # Add dashboard animations
+packages/workers/src/routes/orgs/projects.js  # Add studyCount to response
+```
+
+### Deleted Files
+
+```
+packages/web/src/components/Dashboard.jsx  # Replaced by dashboard/Dashboard.jsx
+```
+
+---
+
+## API Changes Required
+
+### Project List Response Enhancement
+
+Current response:
+
+```json
+{
+  "id": "...",
+  "name": "...",
+  "description": "...",
+  "role": "owner|reviewer",
+  "createdAt": "..."
+}
+```
+
+Enhanced response:
+
+```json
+{
+  "id": "...",
+  "name": "...",
+  "description": "...",
+  "role": "owner|reviewer",
+  "createdAt": "...",
+  "studyCount": 24,
+  "completedCount": 16,
+  "memberCount": 4,
+  "lastActivity": "2026-01-09T..."
+}
+```
+
+---
+
+## Testing Requirements
+
+### Unit Tests
+
+- [ ] `DashboardHeader` renders user name correctly
+- [ ] `StatsRow` computes stats from project data
+- [ ] `ProgressCard` calculates percentage correctly
+- [ ] `ProjectCard` handles missing data gracefully
+- [ ] State machine returns correct state for each scenario
+
+### Integration Tests
+
+- [ ] Logged out user sees local appraisals only
+- [ ] Loading state shows skeleton
+- [ ] Projects load and display correctly
+- [ ] Create project button disabled when offline
+- [ ] ContactPrompt shows for free tier users
+- [ ] Subscription error banner shows with retry
+
+### Visual Tests
+
+- [ ] Animations play correctly
+- [ ] Responsive layout at mobile/tablet/desktop
+- [ ] Dark mode (if applicable)
+- [ ] Color contrast meets WCAG AA
+
+---
+
+## Migration Strategy
+
+### Step 1: Feature Flag
+
+Add a feature flag to toggle between old and new dashboard:
+
+```jsx
+const useNewDashboard = () => localStorage.getItem('corates-new-dashboard') === 'true';
+```
+
+### Step 2: Parallel Development
+
+Keep both dashboards working during development. Route to new dashboard when flag is enabled.
+
+### Step 3: Gradual Rollout
+
+1. Internal testing with flag enabled
+2. Enable for early access users
+3. A/B test if metrics available
+4. Full rollout
+5. Remove old dashboard
+
+---
+
+## Success Metrics
+
+- **Visual:** Dashboard matches mock design within 95% fidelity
+- **Performance:** First contentful paint under 500ms
+- **UX:** All user states handled without blank screens or errors
+- **Accessibility:** Keyboard navigable, screen reader friendly
+- **Code Quality:** Components under 200 lines, proper separation of concerns
+
+---
+
+## Timeline Estimate
+
+| Phase                        | Effort   | Dependencies |
+| ---------------------------- | -------- | ------------ |
+| Phase 1: Core Layout         | 2-3 days | None         |
+| Phase 2: Projects            | 1-2 days | Phase 1      |
+| Phase 3: Local Appraisals    | 1 day    | Phase 1      |
+| Phase 4: Auth States         | 1 day    | Phase 1      |
+| Phase 5: Subscription States | 1 day    | Phase 2      |
+| Phase 6: Activity & Stats    | 1-2 days | API changes  |
+| Phase 7: Polish              | 1 day    | All phases   |
+
+**Total: 8-12 days**
+
+---
+
+## Open Questions
+
+1. **Activity Feed Data:** Should we implement a real activity API, or start with local-only tracking?
+
+2. **Color Assignment:** Should project colors be user-configurable, or deterministically assigned?
+
+3. **Mobile Layout:** The mock is desktop-focused. Do we need a separate mobile design, or responsive adaptation?
+
+4. **Search:** The mock shows a search button. Should we implement global search now or defer?
+
+5. **Dark Mode:** Should the new dashboard support dark mode from launch?
diff --git a/packages/docs/plans/study-counts-architecture.md b/packages/docs/plans/study-counts-architecture.md
new file mode 100644
index 000000000..d4d77b40e
--- /dev/null
+++ b/packages/docs/plans/study-counts-architecture.md
@@ -0,0 +1,261 @@
+# Study Counts Architecture
+
+## Problem
+
+The dashboard shows "0/0 studies" for all projects because:
+
+1. Studies are stored in Yjs durable objects (`ProjectDoc`), not SQL
+2. The `/api/users/me/projects` endpoint only returns SQL data (no study counts)
+3. Getting accurate counts requires connecting to each ProjectDoc
+
+## Solution Overview
+
+Two-tier approach:
+
+1. **Lazy Load (Authoritative)**: Fetch true counts when user opens a project via the existing Yjs WebSocket connection
+2. **Notifications (Preview)**: Push approximate counts to dashboard for quick previews (can be stale, max 50 queued)
+
+---
+
+## Phase 1: Lazy Load (Authoritative Source)
+
+When a user opens a project, they connect to `ProjectDoc` via WebSocket. At that point, we have access to the Yjs document and can compute accurate study counts.
+
+### 1.1 Add Stats Computation to ProjectDoc
+
+**File**: `packages/workers/src/durable-objects/ProjectDoc.js`
+
+Add a method to compute stats from the Yjs document:
+
+```javascript
+getProjectStats() {
+  const reviews = this.doc.getMap('reviews');
+  const studyCount = reviews.size;
+
+  let completedCount = 0;
+  reviews.forEach((study) => {
+    // Check if study has completed status
+    // Structure depends on checklist type - need to verify
+    if (study.status === 'completed' || study.completed) {
+      completedCount++;
+    }
+  });
+
+  return { studyCount, completedCount };
+}
+```
+
+### 1.2 Send Stats on WebSocket Connect
+
+When a client connects to ProjectDoc, send stats as an initial message:
+
+```javascript
+// In WebSocket connection handler
+ws.send(
+  JSON.stringify({
+    type: 'project-stats',
+    stats: this.getProjectStats(),
+  }),
+);
+```
+
+### 1.3 Frontend: Store Stats in Project Store
+
+**File**: `packages/web/src/stores/projectStore.js`
+
+Add stats storage:
+
+```javascript
+// Add to store
+projectStats: {},  // { [projectId]: { studyCount, completedCount, lastUpdated } }
+
+setProjectStats(projectId, stats) {
+  setStore('projectStats', projectId, {
+    ...stats,
+    lastUpdated: Date.now()
+  });
+}
+```
+
+### 1.4 Frontend: Handle Stats Message in useProject
+
+**File**: `packages/web/src/primitives/useProject.js`
+
+Listen for `project-stats` message type:
+
+```javascript
+// In WebSocket message handler
+if (data.type === 'project-stats') {
+  projectStore.setProjectStats(projectId, data.stats);
+}
+```
+
+### 1.5 Frontend: Update Stats on Study Changes
+
+When studies are added/removed locally, update the cached stats:
+
+```javascript
+// After adding a study
+const currentStats = projectStore.projectStats[projectId];
+projectStore.setProjectStats(projectId, {
+  studyCount: currentStats.studyCount + 1,
+  completedCount: currentStats.completedCount,
+});
+```
+
+### 1.6 Dashboard: Display Cached Stats
+
+**File**: `packages/web/src/components/dashboard/ProjectCard.jsx`
+
+Read from projectStore for cards of previously-opened projects:
+
+```javascript
+const cachedStats = () => projectStore.projectStats[props.project.id];
+const studyCount = () => cachedStats()?.studyCount ?? props.project.studyCount ?? 0;
+const completedCount = () => cachedStats()?.completedCount ?? props.project.completedCount ?? 0;
+```
+
+Priority: `projectStore cache > props from API > 0`
+
+---
+
+## Phase 2: Notifications (Preview/Hints)
+
+Notifications provide approximate stats for the dashboard before a user opens a project. These are secondary and may be incomplete (max 50 pending notifications, can be lost).
+
+### 2.1 Emit Stats Updates from ProjectDoc
+
+**File**: `packages/workers/src/durable-objects/ProjectDoc.js`
+
+When studies change, notify project members via their UserSession:
+
+```javascript
+async broadcastStatsToMembers(env) {
+  const stats = this.getProjectStats();
+  const members = await this.getProjectMembers(env); // Need to implement
+
+  for (const member of members) {
+    const session = env.USER_SESSION.idFromName(member.userId);
+    await session.get().fetch('https://internal/notify', {
+      method: 'POST',
+      body: JSON.stringify({
+        type: 'project-stats-updated',
+        projectId: this.projectId,
+        stats,
+        timestamp: Date.now()
+      })
+    });
+  }
+}
+```
+
+### 2.2 Call Stats Broadcast on Study Changes
+
+Hook into Yjs observers to detect changes:
+
+```javascript
+this.doc.getMap('reviews').observe((event) => {
+  // Debounce to avoid spamming on bulk imports
+  this.scheduleStatsBroadcast();
+});
+
+scheduleStatsBroadcast() {
+  if (this.statsBroadcastTimer) return;
+  this.statsBroadcastTimer = setTimeout(() => {
+    this.broadcastStatsToMembers(this.env);
+    this.statsBroadcastTimer = null;
+  }, 5000); // 5 second debounce
+}
+```
+
+### 2.3 Frontend: Handle Stats Notifications
+
+**File**: `packages/web/src/primitives/useMembershipSync.js`
+
+Add handler for stats updates:
+
+```javascript
+if (notificationType === 'project-stats-updated') {
+  // Store as hint in projectStore (lower priority than lazy-loaded)
+  projectStore.setProjectStatsHint(notification.projectId, notification.stats);
+}
+```
+
+### 2.4 API Enhancement (Optional)
+
+Could add stats hints to `/api/users/me/projects` response by:
+
+1. Storing last-known stats in SQL when ProjectDoc broadcasts
+2. Joining that data in the projects query
+
+This avoids N+1 queries to ProjectDoc DOs at dashboard load time.
+
+---
+
+## Data Flow Summary
+
+```
+Dashboard Load:
+  API returns projects (no stats or stale stats from SQL cache)
+  -> Show cached stats from projectStore if available
+  -> Show notification hints if available
+  -> Show "-- studies" if no data
+
+User Opens Project:
+  WebSocket connects to ProjectDoc
+  -> ProjectDoc sends project-stats message
+  -> Frontend stores authoritative stats in projectStore
+  -> Dashboard updates to show true counts
+
+Study Added/Removed (while in project):
+  Frontend updates local stats immediately
+  ProjectDoc broadcasts to other members (5s debounce)
+  -> Other members see updated hints on dashboard
+```
+
+---
+
+## Implementation Order
+
+### Phase 1 Tasks (Lazy Load)
+
+1. [ ] Add `getProjectStats()` method to ProjectDoc
+2. [ ] Send stats on WebSocket connect in ProjectDoc
+3. [ ] Add `projectStats` to projectStore
+4. [ ] Handle `project-stats` message in useProject
+5. [ ] Update Dashboard/ProjectCard to read from projectStore
+6. [ ] Update local stats on study add/remove
+
+### Phase 2 Tasks (Notifications)
+
+1. [ ] Add `broadcastStatsToMembers()` to ProjectDoc
+2. [ ] Add Yjs observer with debounce for stats changes
+3. [ ] Add `project-stats-updated` handler to useMembershipSync
+4. [ ] Add `projectStatsHints` to projectStore (separate from authoritative)
+5. [ ] Optional: Cache stats in SQL for API response
+
+---
+
+## Files to Modify
+
+**Phase 1:**
+
+- `packages/workers/src/durable-objects/ProjectDoc.js` - Stats computation + WS message
+- `packages/web/src/stores/projectStore.js` - Stats storage
+- `packages/web/src/primitives/useProject.js` - Handle stats message
+- `packages/web/src/components/dashboard/ProjectCard.jsx` - Display cached stats
+- `packages/web/src/components/dashboard/Dashboard.jsx` - Stats aggregation
+
+**Phase 2:**
+
+- `packages/workers/src/durable-objects/ProjectDoc.js` - Stats broadcast
+- `packages/web/src/primitives/useMembershipSync.js` - Handle notification
+- `packages/web/src/stores/projectStore.js` - Stats hints storage
+
+---
+
+## Open Questions
+
+1. **Study completion criteria**: What field indicates a study is "completed"? Need to check Yjs document structure.
+2. **Member list access**: How does ProjectDoc get the list of project members? May need to query SQL or store in Yjs.
+3. **Performance**: For projects with many members, broadcasting could be expensive. May want to limit or batch.
diff --git a/packages/web/src/Layout.jsx b/packages/web/src/Layout.jsx
index 3ce0e51de..3a5ceb8a0 100644
--- a/packages/web/src/Layout.jsx
+++ b/packages/web/src/Layout.jsx
@@ -1,4 +1,4 @@
-import { createSignal, onMount, createMemo, Show, lazy } from 'solid-js';
+import { createSignal, onMount, createMemo, Show, lazy, Suspense } from 'solid-js';
 import { useLocation } from '@solidjs/router';
 import Navbar from './components/Navbar.jsx';
 import Sidebar from './components/sidebar/Sidebar.jsx';
@@ -79,7 +79,11 @@ export default function Layout(props) {
     <div
       class={`flex h-screen flex-col overflow-hidden bg-blue-50 ${isImpersonating() ? 'pt-10' : ''}`}
     >
-      <ImpersonationBanner />
+      <Show when={isImpersonating()}>
+        <Suspense>
+          <ImpersonationBanner />
+        </Suspense>
+      </Show>
       <Navbar
         mobileSidebarOpen={shouldHideSidebar() ? undefined : mobileSidebarOpen()}
         toggleMobileSidebar={shouldHideSidebar() ? undefined : toggleMobileSidebar}
diff --git a/packages/web/src/Routes.jsx b/packages/web/src/Routes.jsx
index 29fc13484..590b29a97 100644
--- a/packages/web/src/Routes.jsx
+++ b/packages/web/src/Routes.jsx
@@ -1,6 +1,6 @@
 import { Router, Route } from '@solidjs/router';
 import { lazy } from 'solid-js';
-import Dashboard from './components/Dashboard.jsx';
+import Dashboard from './components/dashboard/index.js';
 import SignIn from '@/components/auth/SignIn.jsx';
 import SignUp from '@/components/auth/SignUp.jsx';
 import CheckEmail from '@/components/auth/CheckEmail.jsx';
@@ -22,42 +22,14 @@ import {
   NotificationsSettings,
   GeneralSettings,
 } from '@/components/settings/index.js';
-import AdminLayout from '@/components/admin/AdminLayout.jsx';
 import { BASEPATH } from '@config/api.js';
 import ProtectedGuard from '@/components/auth/ProtectedGuard.jsx';
 import ProjectView from '@/components/project/ProjectView.jsx';
 import { CreateOrgPage } from '@/components/org/index.js';
-import MockIndex from '@/components/mocks/MockIndex.jsx';
 
-// Code-split mock routes - loaded only when navigating to /mock/*
-const ProjectViewEditorial = lazy(() => import('@/components/mocks/ProjectViewEditorial.jsx'));
-const ProjectViewDashboard = lazy(() => import('@/components/mocks/ProjectViewDashboard.jsx'));
-const ProjectViewKanban = lazy(() => import('@/components/mocks/ProjectViewKanban.jsx'));
-const ProjectViewComplete = lazy(() => import('@/components/mocks/ProjectViewComplete.jsx'));
-const AddStudiesWizard = lazy(() => import('@/components/mocks/AddStudiesWizard.jsx'));
-const AddStudiesPanel = lazy(() => import('@/components/mocks/AddStudiesPanel.jsx'));
-const AddStudiesInline = lazy(() => import('@/components/mocks/AddStudiesInline.jsx'));
-
-// Code-split admin routes - loaded only when navigating to /admin/*
-const AdminDashboard = lazy(() =>
-  import('@/components/admin/index.js').then(m => ({ default: m.AdminDashboard })),
-);
-const StorageManagement = lazy(() => import('@/components/admin/StorageManagement.jsx'));
-const OrgList = lazy(() => import('@/components/admin/OrgList.jsx'));
-const OrgDetail = lazy(() => import('@/components/admin/OrgDetail.jsx'));
-const AdminBillingLedgerPage = lazy(
-  () => import('@/components/admin/billing-observability/AdminBillingLedgerPage.jsx'),
-);
-const AdminBillingStuckStatesPage = lazy(
-  () => import('@/components/admin/billing-observability/AdminBillingStuckStatesPage.jsx'),
-);
-const DatabaseViewer = lazy(() => import('@/components/admin/DatabaseViewer.jsx'));
-const UserDetail = lazy(() => import('@/components/admin/UserDetail.jsx'));
-const ProjectList = lazy(() => import('@/components/admin/ProjectList.jsx'));
-const ProjectDetail = lazy(() => import('@/components/admin/ProjectDetail.jsx'));
-const StripeToolsPage = lazy(
-  () => import('@/components/admin/billing-observability/StripeToolsPage.jsx'),
-);
+// Lazy-loaded route modules (only load when path matches)
+const AdminRoutes = lazy(() => import('@/components/admin/AdminRoutes.jsx'));
+const MockRoutes = lazy(() => import('@/components/mocks/MockRoutes.jsx'));
 
 export default function AppRoutes() {
   return (
@@ -76,7 +48,6 @@ export default function AppRoutes() {
         {/* Dashboard - public home for all users */}
         <Route path='/' component={Dashboard} />
         <Route path='/dashboard' component={Dashboard} />
-
         {/* Protected routes - requires login */}
         <Route path='/' component={ProtectedGuard}>
           {/* Global user routes (no sidebar) */}
@@ -90,19 +61,8 @@ export default function AppRoutes() {
             <Route path='/notifications' component={NotificationsSettings} />
             <Route path='/general' component={GeneralSettings} />
           </Route>
-          <Route path='/admin' component={AdminLayout}>
-            <Route path='/' component={AdminDashboard} />
-            <Route path='/orgs' component={OrgList} />
-            <Route path='/orgs/:orgId' component={OrgDetail} />
-            <Route path='/users/:userId' component={UserDetail} />
-            <Route path='/projects/*' component={ProjectList} />
-            <Route path='/projects/:projectId' component={ProjectDetail} />
-            <Route path='/storage' component={StorageManagement} />
-            <Route path='/billing/ledger' component={AdminBillingLedgerPage} />
-            <Route path='/billing/stuck-states' component={AdminBillingStuckStatesPage} />
-            <Route path='/billing/stripe-tools' component={StripeToolsPage} />
-            <Route path='/database' component={DatabaseViewer} />
-          </Route>
+          {/* Admin routes - fully code-split, only loads on /admin/* */}
+          <Route path='/admin/*' component={AdminRoutes} />
           {/* Organization creation */}
           <Route path='/orgs/new' component={CreateOrgPage} />
           {/* Project-scoped routes - checklist and reconcile are children sharing YDoc connection */}
@@ -119,20 +79,11 @@ export default function AppRoutes() {
             />
           </Route>
         </Route>
-
         {/* Local checklists (not org-scoped, work offline) */}
-        <Route path='/checklist/*' component={LocalChecklistView} />
+        <Route path='/checklist' component={LocalChecklistView} />
         <Route path='/checklist/:checklistId' component={LocalChecklistView} />
-
-        {/* Mock routes - public, visual-only wireframes */}
-        <Route path='/mocks' component={MockIndex} />
-        <Route path='/mocks/project-view-editorial' component={ProjectViewEditorial} />
-        <Route path='/mocks/project-view-dashboard' component={ProjectViewDashboard} />
-        <Route path='/mocks/project-view-kanban' component={ProjectViewKanban} />
-        <Route path='/mocks/project-view-complete' component={ProjectViewComplete} />
-        <Route path='/mocks/add-studies-wizard' component={AddStudiesWizard} />
-        <Route path='/mocks/add-studies-panel' component={AddStudiesPanel} />
-        <Route path='/mocks/add-studies-inline' component={AddStudiesInline} />
+        {/* Mock routes - fully code-split, only loads on /mocks/* */}
+        <Route path='/mocks/*' component={MockRoutes} />
       </Route>
       <Route path='*' component={NotFoundPage} />
     </Router>
diff --git a/packages/web/src/api/better-auth-store.js b/packages/web/src/api/better-auth-store.js
index 4cfe1b580..266fa3197 100644
--- a/packages/web/src/api/better-auth-store.js
+++ b/packages/web/src/api/better-auth-store.js
@@ -175,6 +175,22 @@ function createBetterAuthStore() {
     });
   });
 
+  // Enhanced authLoading that accounts for cached data
+  // If we have cached user data, we're not "loading" from UI perspective
+  const isAuthLoading = () => {
+    // If offline, we're not loading - we use cached data
+    if (!isOnline()) {
+      return false;
+    }
+    // If session is pending but we have cached data, don't show loading state
+    // This prevents UI flash when we have data to show
+    if (authLoading() && cachedUser()) {
+      return false;
+    }
+    // Otherwise return the actual session pending state
+    return authLoading();
+  };
+
   // Combined signals that use cached data when offline
   const isLoggedIn = () => {
     if (isOnline()) {
@@ -852,7 +868,7 @@ function createBetterAuthStore() {
     isLoggedIn,
     isAuthenticated,
     user,
-    authLoading,
+    authLoading: isAuthLoading,
     authError,
     isOnline,
 
diff --git a/packages/web/src/components/admin/AdminRouter.jsx b/packages/web/src/components/admin/AdminRouter.jsx
new file mode 100644
index 000000000..334511651
--- /dev/null
+++ b/packages/web/src/components/admin/AdminRouter.jsx
@@ -0,0 +1,54 @@
+import { Route } from '@solidjs/router';
+import { lazy } from 'solid-js';
+
+export default function AdminRouter() {
+  // Lazy-load layout and pages only when route is matched
+  return (
+    <Route path='/admin' component={lazy(() => import('@/components/admin/AdminLayout.jsx'))}>
+      <Route path='/' component={lazy(() => import('@/components/admin/AdminDashboard.jsx'))} />
+      <Route path='/orgs' component={lazy(() => import('@/components/admin/OrgList.jsx'))} />
+      <Route
+        path='/orgs/:orgId'
+        component={lazy(() => import('@/components/admin/OrgDetail.jsx'))}
+      />
+      <Route
+        path='/users/:userId'
+        component={lazy(() => import('@/components/admin/UserDetail.jsx'))}
+      />
+      <Route
+        path='/projects/*'
+        component={lazy(() => import('@/components/admin/ProjectList.jsx'))}
+      />
+      <Route
+        path='/projects/:projectId'
+        component={lazy(() => import('@/components/admin/ProjectDetail.jsx'))}
+      />
+      <Route
+        path='/storage'
+        component={lazy(() => import('@/components/admin/StorageManagement.jsx'))}
+      />
+      <Route
+        path='/billing/ledger'
+        component={lazy(
+          () => import('@/components/admin/billing-observability/AdminBillingLedgerPage.jsx'),
+        )}
+      />
+      <Route
+        path='/billing/stuck-states'
+        component={lazy(
+          () => import('@/components/admin/billing-observability/AdminBillingStuckStatesPage.jsx'),
+        )}
+      />
+      <Route
+        path='/billing/stripe-tools'
+        component={lazy(
+          () => import('@/components/admin/billing-observability/StripeToolsPage.jsx'),
+        )}
+      />
+      <Route
+        path='/database'
+        component={lazy(() => import('@/components/admin/DatabaseViewer.jsx'))}
+      />
+    </Route>
+  );
+}
diff --git a/packages/web/src/components/admin/AdminRoutes.jsx b/packages/web/src/components/admin/AdminRoutes.jsx
new file mode 100644
index 000000000..155ac0213
--- /dev/null
+++ b/packages/web/src/components/admin/AdminRoutes.jsx
@@ -0,0 +1,44 @@
+import { lazy } from 'solid-js';
+import { Route } from '@solidjs/router';
+import AdminLayout from '@/components/admin/AdminLayout.jsx';
+
+// Lazy-load all admin page components
+const AdminDashboard = lazy(() => import('@/components/admin/AdminDashboard.jsx'));
+const StorageManagement = lazy(() => import('@/components/admin/StorageManagement.jsx'));
+const OrgList = lazy(() => import('@/components/admin/OrgList.jsx'));
+const OrgDetail = lazy(() => import('@/components/admin/OrgDetail.jsx'));
+const AdminBillingLedgerPage = lazy(
+  () => import('@/components/admin/billing-observability/AdminBillingLedgerPage.jsx'),
+);
+const AdminBillingStuckStatesPage = lazy(
+  () => import('@/components/admin/billing-observability/AdminBillingStuckStatesPage.jsx'),
+);
+const DatabaseViewer = lazy(() => import('@/components/admin/DatabaseViewer.jsx'));
+const UserDetail = lazy(() => import('@/components/admin/UserDetail.jsx'));
+const ProjectList = lazy(() => import('@/components/admin/ProjectList.jsx'));
+const ProjectDetail = lazy(() => import('@/components/admin/ProjectDetail.jsx'));
+const StripeToolsPage = lazy(
+  () => import('@/components/admin/billing-observability/StripeToolsPage.jsx'),
+);
+
+/**
+ * Admin routes - returns Route elements for the /admin/* path.
+ * This entire module is lazy-loaded when /admin/* is first visited.
+ */
+export default function AdminRoutes() {
+  return (
+    <Route path='/' component={AdminLayout}>
+      <Route path='/' component={AdminDashboard} />
+      <Route path='/orgs' component={OrgList} />
+      <Route path='/orgs/:orgId' component={OrgDetail} />
+      <Route path='/users/:userId' component={UserDetail} />
+      <Route path='/projects' component={ProjectList} />
+      <Route path='/projects/:projectId' component={ProjectDetail} />
+      <Route path='/storage' component={StorageManagement} />
+      <Route path='/billing/ledger' component={AdminBillingLedgerPage} />
+      <Route path='/billing/stuck-states' component={AdminBillingStuckStatesPage} />
+      <Route path='/billing/stripe-tools' component={StripeToolsPage} />
+      <Route path='/database' component={DatabaseViewer} />
+    </Route>
+  );
+}
diff --git a/packages/web/src/components/admin/index.js b/packages/web/src/components/admin/index.js
deleted file mode 100644
index 7a28272fc..000000000
--- a/packages/web/src/components/admin/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Only export components that are lazy-loaded in Routes.jsx
-// Other admin components are imported directly where needed to enable code splitting
-export { default as AdminDashboard } from './AdminDashboard.jsx';
diff --git a/packages/web/src/components/checklist/AMSTAR2Checklist/checklist-map.js b/packages/web/src/components/checklist/AMSTAR2Checklist/checklist-map.js
index 8f2a288fb..926b094b5 100644
--- a/packages/web/src/components/checklist/AMSTAR2Checklist/checklist-map.js
+++ b/packages/web/src/components/checklist/AMSTAR2Checklist/checklist-map.js
@@ -15,11 +15,3 @@ export const CHECKLIST_TYPES = amstar2.AMSTAR2_CHECKLIST_TYPES;
 export const AMSTAR2_QUESTION_KEYS = amstar2.AMSTAR2_QUESTION_KEYS;
 export const AMSTAR2_DATA_KEYS = amstar2.AMSTAR2_DATA_KEYS;
 export const AMSTAR2_CRITICAL_QUESTIONS = amstar2.AMSTAR2_CRITICAL_QUESTIONS;
-
-// Response type mappings
-export const RESPONSE_TYPES = {
-  TWO_OPTION: amstar2.TWO_OPTION_QUESTIONS,
-  THREE_OPTION: amstar2.THREE_OPTION_QUESTIONS,
-  THREE_OPTION_NO_MA: amstar2.THREE_OPTION_NO_MA_QUESTIONS,
-  FOUR_OPTION: amstar2.FOUR_OPTION_QUESTIONS,
-};
diff --git a/packages/web/src/components/checklist/ChecklistWithPdf.jsx b/packages/web/src/components/checklist/ChecklistWithPdf.jsx
index 35562ec81..366aaf544 100644
--- a/packages/web/src/components/checklist/ChecklistWithPdf.jsx
+++ b/packages/web/src/components/checklist/ChecklistWithPdf.jsx
@@ -6,9 +6,10 @@
  */
 
 import GenericChecklist from '@/components/checklist/GenericChecklist.jsx';
-import EmbedPdfViewer from '@pdf/embedpdf/EmbedPdfViewer.jsx';
 import SplitScreenLayout from '@/components/checklist/SplitScreenLayout.jsx';
-import { Show } from 'solid-js';
+import { Show, lazy, Suspense } from 'solid-js';
+
+const EmbedPdfViewer = lazy(() => import('@pdf/embedpdf/EmbedPdfViewer.jsx'));
 
 export default function ChecklistWithPdf(props) {
   // props.checklistType - the type of checklist ('AMSTAR2', 'ROBINS_I', etc.)
@@ -48,14 +49,22 @@ export default function ChecklistWithPdf(props) {
 
         {/* Second panel: PDF Viewer */}
         <Show when={props.pdfData}>
-          <EmbedPdfViewer
-            pdfData={props.pdfData}
-            pdfFileName={props.pdfFileName}
-            readOnly={props.readOnly}
-            pdfs={props.pdfs}
-            selectedPdfId={props.selectedPdfId}
-            onPdfSelect={props.onPdfSelect}
-          />
+          <Suspense
+            fallback={
+              <div class='flex h-full items-center justify-center'>
+                <div class='h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600' />
+              </div>
+            }
+          >
+            <EmbedPdfViewer
+              pdfData={props.pdfData}
+              pdfFileName={props.pdfFileName}
+              readOnly={props.readOnly}
+              pdfs={props.pdfs}
+              selectedPdfId={props.selectedPdfId}
+              onPdfSelect={props.onPdfSelect}
+            />
+          </Suspense>
         </Show>
       </SplitScreenLayout>
     </div>
diff --git a/packages/web/src/components/checklist/CreateLocalChecklist.jsx b/packages/web/src/components/checklist/CreateLocalChecklist.jsx
index 946b2f13d..8b53a74c6 100644
--- a/packages/web/src/components/checklist/CreateLocalChecklist.jsx
+++ b/packages/web/src/components/checklist/CreateLocalChecklist.jsx
@@ -18,7 +18,9 @@ export default function CreateLocalChecklist() {
   const { createChecklist, savePdf } = localChecklistsStore;
 
   const [name, setName] = createSignal('');
-  const [checklistType, setChecklistType] = createSignal(DEFAULT_CHECKLIST_TYPE);
+  const [checklistType, setChecklistType] = createSignal(
+    searchParams.type || DEFAULT_CHECKLIST_TYPE,
+  );
   const [pdfFile, setPdfFile] = createSignal(null);
   const [creating, setCreating] = createSignal(false);
   const [error, setError] = createSignal(null);
diff --git a/packages/web/src/components/checklist/LocalChecklistView.jsx b/packages/web/src/components/checklist/LocalChecklistView.jsx
index bffa5a724..2065a6b3e 100644
--- a/packages/web/src/components/checklist/LocalChecklistView.jsx
+++ b/packages/web/src/components/checklist/LocalChecklistView.jsx
@@ -8,7 +8,7 @@
 
 import { createSignal, createEffect, Show, onCleanup, createMemo } from 'solid-js';
 import { debounce } from '@solid-primitives/scheduled';
-import { useParams, useNavigate } from '@solidjs/router';
+import { useParams, useNavigate, useSearchParams } from '@solidjs/router';
 import ChecklistWithPdf from '@/components/checklist/ChecklistWithPdf.jsx';
 import CreateLocalChecklist from '@/components/checklist/CreateLocalChecklist.jsx';
 import localChecklistsStore from '@/stores/localChecklistsStore';
@@ -19,6 +19,7 @@ import ScoreTag from '@/components/checklist/ScoreTag.jsx';
 export default function LocalChecklistView() {
   const params = useParams();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { getChecklist, updateChecklist, getPdf, savePdf, deletePdf } = localChecklistsStore;
 
   const [checklist, setChecklist] = createSignal(null);
@@ -174,7 +175,7 @@ export default function LocalChecklistView() {
   );
 
   return (
-    <Show when={params.checklistId} fallback={<CreateLocalChecklist />}>
+    <Show when={params.checklistId} fallback={<CreateLocalChecklist type={searchParams.type} />}>
       <Show
         when={!loading()}
         fallback={
diff --git a/packages/web/src/components/checklist/ROB2Checklist/scoring/decision-diagrams/1.md b/packages/web/src/components/checklist/ROB2Checklist/scoring/decision-diagrams/1.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/web/src/components/checklist/ROB2Checklist/scoring/score.js b/packages/web/src/components/checklist/ROB2Checklist/scoring/score.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/web/src/components/checklist/ROBINSIChecklist/checklist-map.js b/packages/web/src/components/checklist/ROBINSIChecklist/checklist-map.js
index 937cd5141..663933f15 100644
--- a/packages/web/src/components/checklist/ROBINSIChecklist/checklist-map.js
+++ b/packages/web/src/components/checklist/ROBINSIChecklist/checklist-map.js
@@ -32,14 +32,7 @@ export const SECTION_A = robinsI.SECTION_A;
 export const SECTION_B = robinsI.SECTION_B;
 export const SECTION_C = robinsI.SECTION_C;
 
-// Confounding factors
-export const PREDEFINED_CONFOUNDERS = robinsI.PREDEFINED_CONFOUNDERS;
-export const CONFOUNDING_FIELDS = robinsI.CONFOUNDING_FIELDS;
-
 // Helper functions
 export const getActiveDomainKeys = robinsI.getActiveDomainKeys;
 export const getDomainQuestions = robinsI.getDomainQuestions;
-export const getDomainTitle = robinsI.getDomainTitle;
-export const getDomainDescription = robinsI.getDomainDescription;
 export const getResponseOptions = robinsI.getResponseOptions;
-export const getQuestionOptions = robinsI.getQuestionOptions;
diff --git a/packages/web/src/components/checklist/ROBINSIChecklist/scoring/robins-scoring.js b/packages/web/src/components/checklist/ROBINSIChecklist/scoring/robins-scoring.js
index 834e02006..746fc6aec 100644
--- a/packages/web/src/components/checklist/ROBINSIChecklist/scoring/robins-scoring.js
+++ b/packages/web/src/components/checklist/ROBINSIChecklist/scoring/robins-scoring.js
@@ -10,16 +10,6 @@ import { robinsI } from '@corates/shared';
 // Re-export all scoring functions and constants
 export const JUDGEMENTS = robinsI.JUDGEMENTS;
 export const OVERALL_DISPLAY = robinsI.OVERALL_DISPLAY;
-export const DOMAIN_SCORING_RULES = robinsI.DOMAIN_SCORING_RULES;
-
-// Domain scoring functions
-export const scoreDomain1A = robinsI.scoreDomain1A;
-export const scoreDomain1B = robinsI.scoreDomain1B;
-export const scoreDomain2 = robinsI.scoreDomain2;
-export const scoreDomain3 = robinsI.scoreDomain3;
-export const scoreDomain4 = robinsI.scoreDomain4;
-export const scoreDomain5 = robinsI.scoreDomain5;
-export const scoreDomain6 = robinsI.scoreDomain6;
 
 // Main scoring functions
 export const scoreRobinsDomain = robinsI.scoreRobinsDomain;
diff --git a/packages/web/src/components/dashboard/ActivityFeed.jsx b/packages/web/src/components/dashboard/ActivityFeed.jsx
new file mode 100644
index 000000000..ea2f3b0af
--- /dev/null
+++ b/packages/web/src/components/dashboard/ActivityFeed.jsx
@@ -0,0 +1,136 @@
+/**
+ * ActivityFeed - Shows recent activity across projects
+ */
+
+import { Show, For, createMemo, useContext } from 'solid-js';
+import { FiClock, FiFileText, FiFolder, FiCheck, FiUser } from 'solid-icons/fi';
+
+import { AnimationContext } from './Dashboard.jsx';
+
+/**
+ * Format a relative time string
+ * @param {Date|string} date
+ * @returns {string}
+ */
+function formatRelativeTime(date) {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now - then;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return then.toLocaleDateString();
+}
+
+/**
+ * Icon for activity type
+ */
+function ActivityIcon(props) {
+  const iconMap = {
+    study: <FiFileText class='h-4 w-4' />,
+    project: <FiFolder class='h-4 w-4' />,
+    complete: <FiCheck class='h-4 w-4' />,
+    user: <FiUser class='h-4 w-4' />,
+    default: <FiClock class='h-4 w-4' />,
+  };
+
+  const bgMap = {
+    study: 'bg-blue-100 text-blue-600',
+    project: 'bg-amber-100 text-amber-600',
+    complete: 'bg-emerald-100 text-emerald-600',
+    user: 'bg-violet-100 text-violet-600',
+    default: 'bg-stone-100 text-stone-600',
+  };
+
+  return (
+    <div
+      class={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${bgMap[props.type] || bgMap.default}`}
+    >
+      {iconMap[props.type] || iconMap.default}
+    </div>
+  );
+}
+
+/**
+ * Single activity item
+ */
+function ActivityItem(props) {
+  return (
+    <div class='flex items-start gap-3 py-3'>
+      <ActivityIcon type={props.activity.type} />
+      <div class='min-w-0 flex-1'>
+        <p class='text-sm text-stone-700'>
+          <span class='font-medium'>{props.activity.title}</span>
+          <Show when={props.activity.subtitle}>
+            <span class='text-stone-500'> {props.activity.subtitle}</span>
+          </Show>
+        </p>
+        <p class='mt-0.5 text-xs text-stone-400'>{formatRelativeTime(props.activity.timestamp)}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Empty state for no activity
+ */
+function EmptyActivity() {
+  return (
+    <div class='py-8 text-center'>
+      <div class='mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-stone-100'>
+        <FiClock class='h-5 w-5 text-stone-400' />
+      </div>
+      <p class='text-sm text-stone-500'>No recent activity</p>
+      <p class='mt-1 text-xs text-stone-400'>Your activity will appear here as you work</p>
+    </div>
+  );
+}
+
+/**
+ * Activity feed component
+ * @param {Object} props
+ * @param {Array} props.activities - Array of activity objects
+ * @param {number} [props.limit] - Maximum number of activities to show
+ * @param {() => void} [props.onViewAll] - Handler for view all link
+ */
+export function ActivityFeed(props) {
+  const animation = useContext(AnimationContext);
+
+  const displayActivities = createMemo(() => {
+    const activities = props.activities || [];
+    const limit = props.limit || 5;
+    return activities.slice(0, limit);
+  });
+
+  return (
+    <div class='rounded-xl border border-stone-200/60 bg-white p-5' style={animation.fadeUp(500)}>
+      <div class='mb-2 flex items-center justify-between'>
+        <h3 class='text-sm font-semibold tracking-wide text-stone-500 uppercase'>
+          Recent Activity
+        </h3>
+        <Show when={props.onViewAll && props.activities?.length > (props.limit || 5)}>
+          <button
+            type='button'
+            onClick={() => props.onViewAll?.()}
+            class='text-xs font-medium text-blue-600 hover:text-blue-700'
+          >
+            View all
+          </button>
+        </Show>
+      </div>
+
+      <Show when={displayActivities().length > 0} fallback={<EmptyActivity />}>
+        <div class='divide-y divide-stone-100'>
+          <For each={displayActivities()}>{activity => <ActivityItem activity={activity} />}</For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export default ActivityFeed;
diff --git a/packages/web/src/components/dashboard/Dashboard.jsx b/packages/web/src/components/dashboard/Dashboard.jsx
new file mode 100644
index 000000000..96b8f04fa
--- /dev/null
+++ b/packages/web/src/components/dashboard/Dashboard.jsx
@@ -0,0 +1,215 @@
+/**
+ * Dashboard - Main dashboard container
+ *
+ * Local-first approach: Always render content immediately, progressively
+ * enhance based on auth/subscription state. Never show loading states
+ * if we have any data to display.
+ */
+
+import { createMemo, Show, createSignal, createContext } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { useSubscription } from '@primitives/useSubscription.js';
+import { useMyProjectsList } from '@primitives/useMyProjectsList.js';
+import localChecklistsStore from '@/stores/localChecklistsStore';
+import projectStore from '@/stores/projectStore.js';
+import { LANDING_URL } from '@/config/api.js';
+
+import DashboardHeader from './DashboardHeader.jsx';
+// import { StatsRow } from './StatsRow.jsx';
+import ProgressCard from './ProgressCard.jsx';
+import QuickActions from './QuickActions.jsx';
+import ActivityFeed from './ActivityFeed.jsx';
+import { ProjectsSection } from './ProjectsSection.jsx';
+import { LocalAppraisalsSection } from './LocalAppraisalsSection.jsx';
+import { useInitialAnimation } from './useInitialAnimation.js';
+
+// Animation context - allows child components to access animation state
+export const AnimationContext = createContext({
+  shouldAnimate: () => false,
+  fadeUp: () => ({}),
+  statRise: () => ({}),
+});
+
+/**
+ * Dashboard data hook - computes derived state from auth/subscription/projects
+ * All signals are fine-grained and won't cause full re-renders
+ */
+function useDashboardData() {
+  const { isLoggedIn, user, isOnline } = useBetterAuth();
+  const { subscriptionFetchFailed, hasEntitlement, hasQuota } = useSubscription();
+  const { projects } = useMyProjectsList();
+  const { checklists } = localChecklistsStore;
+
+  const canCreateProject = createMemo(() => {
+    if (!isOnline()) return false;
+    if (!isLoggedIn()) return false;
+    if (!hasEntitlement('project.create')) return false;
+    const projectCount = projects().length;
+    return hasQuota('projects.max', { used: projectCount, requested: 1 });
+  });
+
+  // Compute stats from real data, merging cached Yjs stats
+  const stats = createMemo(() => {
+    const projectList = projects() || [];
+    const localList = checklists() || [];
+
+    let totalStudies = 0;
+    let completedStudies = 0;
+    projectList.forEach(project => {
+      // Priority: cached stats from projectStore (Yjs data) > API props > 0
+      const cachedStats = projectStore.getProjectStats(project.id);
+      totalStudies += cachedStats?.studyCount ?? project.studyCount ?? 0;
+      completedStudies += cachedStats?.completedCount ?? project.completedCount ?? 0;
+    });
+
+    const memberIds = new Set();
+    projectList.forEach(project => {
+      if (project.members) {
+        project.members.forEach(m => memberIds.add(m.userId || m.id));
+      }
+    });
+
+    return {
+      projectCount: projectList.length,
+      completedStudies,
+      totalStudies,
+      localAppraisalCount: localList.length,
+      teamMemberCount: memberIds.size || undefined,
+    };
+  });
+
+  // Generate recent activity from projects
+  const activities = createMemo(() => {
+    const projectList = projects() || [];
+    return projectList
+      .slice(0, 5)
+      .map(project => ({
+        type: 'project',
+        title: project.name,
+        subtitle: 'was updated',
+        timestamp: project.updatedAt || project.createdAt,
+      }))
+      .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
+      .slice(0, 5);
+  });
+
+  return {
+    user,
+    isOnline,
+    isLoggedIn,
+    canCreateProject,
+    stats,
+    activities,
+    subscriptionFetchFailed,
+  };
+}
+
+export function Dashboard() {
+  const navigate = useNavigate();
+  const animation = useInitialAnimation();
+  const {
+    user,
+    isOnline,
+    isLoggedIn,
+    canCreateProject,
+    stats,
+    activities,
+    subscriptionFetchFailed,
+  } = useDashboardData();
+  const [showCreateForm, setShowCreateForm] = createSignal(false);
+
+  const handleCreateProject = () => {
+    document.getElementById('projects-section')?.scrollIntoView({ behavior: 'smooth' });
+    setShowCreateForm(true);
+  };
+
+  const handleStartROBINSI = () => {
+    navigate('/checklist?type=ROBINS_I');
+  };
+
+  const handleStartAMSTAR2 = () => {
+    navigate('/checklist?type=AMSTAR2');
+  };
+
+  const handleLearnMore = () => {
+    // Redirect to landing page resources section
+    window.location.href = `${LANDING_URL}/resources`;
+  };
+
+  return (
+    <AnimationContext.Provider value={animation}>
+      <div class='mx-auto px-4 py-8 sm:px-6 lg:px-8'>
+        {/* Subscription error banner - only for logged in users */}
+        <Show when={isLoggedIn() && subscriptionFetchFailed()}>
+          <div
+            class='mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800'
+            role='alert'
+          >
+            Could not load subscription details. Some features may be limited.
+          </div>
+        </Show>
+
+        <DashboardHeader
+          user={user()}
+          canCreateProject={canCreateProject()}
+          isOnline={isOnline()}
+          onCreateProject={handleCreateProject}
+        />
+
+        {/* Stats row - only for logged in users */}
+        {/* <Show when={isLoggedIn()}>
+          <StatsRow
+            projectCount={stats().projectCount}
+            completedStudies={stats().completedStudies}
+            totalStudies={stats().totalStudies}
+            localAppraisalCount={stats().localAppraisalCount}
+            teamMemberCount={stats().teamMemberCount}
+          />
+        </Show> */}
+
+        {/* Main content grid */}
+        <div class='grid gap-6 lg:grid-cols-3'>
+          {/* Left column */}
+          <div id='projects-section' class='space-y-6 lg:col-span-2'>
+            {/* Projects - only for logged in users */}
+            <Show when={isLoggedIn()}>
+              <ProjectsSection
+                showCreateForm={showCreateForm}
+                setShowCreateForm={setShowCreateForm}
+              />
+            </Show>
+
+            {/* Local appraisals - always shown */}
+            <LocalAppraisalsSection showHeader={true} showSignInPrompt={!isLoggedIn()} />
+          </div>
+
+          {/* Right sidebar */}
+          <div class='space-y-6'>
+            {/* Progress card - only for logged in users */}
+            <Show when={isLoggedIn()}>
+              <ProgressCard
+                completed={stats().completedStudies}
+                total={stats().totalStudies}
+                subtitle='Studies across all projects'
+              />
+            </Show>
+
+            <QuickActions
+              onStartROBINSI={handleStartROBINSI}
+              onStartAMSTAR2={handleStartAMSTAR2}
+              onLearnMore={handleLearnMore}
+            />
+
+            {/* Activity feed - only for logged in users */}
+            <Show when={isLoggedIn()}>
+              <ActivityFeed activities={activities()} limit={5} />
+            </Show>
+          </div>
+        </div>
+      </div>
+    </AnimationContext.Provider>
+  );
+}
+
+export default Dashboard;
diff --git a/packages/web/src/components/dashboard/DashboardHeader.jsx b/packages/web/src/components/dashboard/DashboardHeader.jsx
new file mode 100644
index 000000000..72575355e
--- /dev/null
+++ b/packages/web/src/components/dashboard/DashboardHeader.jsx
@@ -0,0 +1,74 @@
+/**
+ * DashboardHeader - Welcome section with user info and actions
+ */
+
+import { Show, useContext } from 'solid-js';
+import { FiPlus, FiSearch } from 'solid-icons/fi';
+import { getRoleLabel } from '@/components/auth/RoleSelector.jsx';
+import { AnimationContext } from './Dashboard.jsx';
+
+/**
+ * @param {Object} props
+ * @param {Object} props.user - User object { name, email, image }
+ * @param {boolean} props.canCreateProject - Whether user can create projects
+ * @param {boolean} props.isOnline - Whether user is online
+ * @param {Function} props.onCreateProject - Called when create project button clicked
+ * @param {Function} props.onSearch - Called when search button clicked (optional)
+ */
+export function DashboardHeader(props) {
+  const animation = useContext(AnimationContext);
+  const firstName = () => {
+    const name = props.user?.name || '';
+    return name.split(' ')[0] || '';
+  };
+
+  return (
+    <header class='mb-10' style={animation.fadeUp(0)}>
+      <div class='flex items-start justify-between'>
+        <div>
+          <Show
+            when={firstName()}
+            fallback={<p class='mb-1 text-sm font-medium text-blue-600'>Welcome to CoRATES!</p>}
+          >
+            <p class='mb-1 text-sm font-medium text-blue-600'>Welcome back,</p>
+            <h1 class='text-3xl font-semibold tracking-tight text-stone-900 sm:text-4xl'>
+              {firstName()}
+            </h1>
+          </Show>
+          <Show when={props.user?.persona || props.user?.email}>
+            <p class='mt-2 text-stone-500'>
+              {props.user?.persona ? getRoleLabel(props.user.persona) : props.user.email}
+            </p>
+          </Show>
+        </div>
+        <div class='flex items-center gap-3'>
+          <Show when={props.onSearch}>
+            <button
+              onClick={() => props.onSearch?.()}
+              class='hidden items-center gap-2 rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-600 shadow-sm transition-all hover:border-stone-300 hover:shadow sm:flex'
+            >
+              <FiSearch class='h-4 w-4' />
+              <span>Search</span>
+              <kbd class='ml-2 hidden rounded bg-stone-100 px-1.5 py-0.5 text-xs text-stone-400 lg:inline'>
+                /
+              </kbd>
+            </button>
+          </Show>
+          <Show when={props.canCreateProject}>
+            <button
+              onClick={() => props.onCreateProject?.()}
+              disabled={!props.isOnline}
+              title={!props.isOnline ? 'Cannot create projects while offline' : ''}
+              class='flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/25 transition-all hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50'
+            >
+              <FiPlus class='h-4 w-4' />
+              New Project
+            </button>
+          </Show>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default DashboardHeader;
diff --git a/packages/web/src/components/dashboard/LocalAppraisalCard.jsx b/packages/web/src/components/dashboard/LocalAppraisalCard.jsx
new file mode 100644
index 000000000..121f323c6
--- /dev/null
+++ b/packages/web/src/components/dashboard/LocalAppraisalCard.jsx
@@ -0,0 +1,122 @@
+/**
+ * LocalAppraisalCard - Compact card for local appraisals
+ *
+ * Features:
+ * - Horizontal layout
+ * - Checklist type badge
+ * - Relative timestamp
+ * - Inline rename with Editable
+ * - Delete action
+ */
+
+import { Show, createMemo } from 'solid-js';
+import { FiFileText, FiChevronRight, FiTrash2 } from 'solid-icons/fi';
+import { Editable } from '@corates/ui';
+import { getChecklistMetadata } from '@/checklist-registry';
+
+/**
+ * Format a relative time string
+ * @param {Date|string|number} date
+ * @returns {string}
+ */
+function formatRelativeTime(date) {
+  if (!date) return '';
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now - then;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
+  return then.toLocaleDateString();
+}
+
+/**
+ * Local appraisal card component
+ * @param {Object} props
+ * @param {Object} props.checklist - Checklist data
+ * @param {() => void} props.onOpen - Called when card is opened
+ * @param {() => void} [props.onDelete] - Called when delete is requested
+ * @param {(name: string) => void} [props.onRename] - Called when renamed
+ * @param {Object} [props.style] - Animation style object
+ */
+export function LocalAppraisalCard(props) {
+  const typeLabel = createMemo(() => {
+    const metadata = getChecklistMetadata(props.checklist?.type || props.checklist?.checklistType);
+    return metadata?.name || props.checklist?.type || 'Checklist';
+  });
+
+  const relativeTime = createMemo(() => {
+    return formatRelativeTime(props.checklist?.updatedAt || props.checklist?.createdAt);
+  });
+
+  return (
+    <div
+      class='group flex items-center gap-4 rounded-xl border border-stone-200/60 bg-white p-4 transition-all duration-200 hover:border-stone-300 hover:shadow-md'
+      style={props.style}
+    >
+      {/* Icon */}
+      <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-stone-100 text-stone-500 transition-colors group-hover:bg-blue-50 group-hover:text-blue-600'>
+        <FiFileText class='h-5 w-5' />
+      </div>
+
+      {/* Content */}
+      <div class='min-w-0 flex-1'>
+        <Show
+          when={props.onRename}
+          fallback={
+            <h4 class='truncate text-sm font-medium text-stone-800'>{props.checklist?.name}</h4>
+          }
+        >
+          <Editable
+            activationMode='click'
+            variant='inline'
+            class='truncate text-sm font-medium text-stone-800'
+            value={props.checklist?.name || 'Untitled'}
+            showEditIcon={true}
+            onSubmit={newName => props.onRename?.(newName)}
+          />
+        </Show>
+        <div class='mt-0.5 flex items-center gap-2 text-xs text-stone-400'>
+          <span class='rounded bg-stone-100 px-1.5 py-0.5 font-medium text-stone-500'>
+            {typeLabel()}
+          </span>
+          <span>{relativeTime()}</span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div class='flex shrink-0 items-center gap-1'>
+        <Show when={props.onDelete}>
+          <button
+            type='button'
+            onClick={e => {
+              e.stopPropagation();
+              props.onDelete?.(props.checklist?.id);
+            }}
+            class='rounded-lg p-2 text-stone-300 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-50 hover:text-red-500'
+            title='Delete appraisal'
+          >
+            <FiTrash2 class='h-4 w-4' />
+          </button>
+        </Show>
+        <button
+          type='button'
+          onClick={() => props.onOpen?.(props.checklist?.id)}
+          class='flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-blue-600 transition-all hover:bg-blue-50 hover:text-blue-700'
+          title='Open appraisal'
+        >
+          Open
+          <FiChevronRight class='h-4 w-4 transition-transform group-hover:translate-x-0.5' />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default LocalAppraisalCard;
diff --git a/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx b/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx
new file mode 100644
index 000000000..e0df0c009
--- /dev/null
+++ b/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx
@@ -0,0 +1,171 @@
+/**
+ * LocalAppraisalsSection - Section for device-local appraisals
+ *
+ * Features:
+ * - Compact horizontal card layout
+ * - Create new appraisal button
+ * - Delete with confirmation
+ * - Inline rename
+ * - Sign-in prompt for logged-out users
+ */
+
+import { Show, For, useContext } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { useConfirmDialog } from '@corates/ui';
+import { FiPlus, FiFileText, FiLogIn } from 'solid-icons/fi';
+
+import { AnimationContext } from './Dashboard.jsx';
+
+import localChecklistsStore from '@/stores/localChecklistsStore';
+import { LocalAppraisalCard } from './LocalAppraisalCard.jsx';
+
+/**
+ * Empty state for no local appraisals
+ */
+function EmptyLocalState(props) {
+  return (
+    <div class='flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-stone-200 bg-stone-50/50 px-6 py-10'>
+      <div class='mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-100'>
+        <FiFileText class='h-6 w-6 text-stone-400' />
+      </div>
+      <h3 class='mb-1 text-sm font-medium text-stone-700'>No local appraisals</h3>
+      <p class='mb-4 text-center text-xs text-stone-500'>
+        Create appraisals that stay on this device
+      </p>
+      <button
+        type='button'
+        onClick={() => props.onCreateClick?.()}
+        class='flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+      >
+        <FiPlus class='h-4 w-4' />
+        Create Appraisal
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Sign-in prompt banner
+ */
+function SignInPrompt(props) {
+  return (
+    <div class='flex items-center justify-between rounded-xl border border-blue-100 bg-white/50 p-4'>
+      <div class='flex items-center gap-3'>
+        <div class='flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100'>
+          <FiLogIn class='h-5 w-5 text-blue-600' />
+        </div>
+        <div>
+          <p class='text-sm font-medium text-blue-800'>Want to collaborate?</p>
+          <p class='text-xs text-blue-600'>Sign in to create projects and sync across devices</p>
+        </div>
+      </div>
+      <button
+        type='button'
+        onClick={() => props.onSignIn?.()}
+        class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+      >
+        Sign In
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Local appraisals section component
+ * @param {Object} props
+ * @param {boolean} [props.showHeader] - Whether to show section header
+ * @param {boolean} [props.showSignInPrompt] - Whether to show sign-in prompt
+ */
+export function LocalAppraisalsSection(props) {
+  const navigate = useNavigate();
+  const confirmDialog = useConfirmDialog();
+
+  const { checklists, deleteChecklist, updateChecklist } = localChecklistsStore;
+
+  const handleOpen = checklistId => {
+    navigate(`/checklist/${checklistId}`);
+  };
+
+  const handleDelete = async checklistId => {
+    const confirmed = await confirmDialog.open({
+      title: 'Delete Appraisal',
+      description: 'Are you sure you want to delete this appraisal? This cannot be undone.',
+      confirmText: 'Delete',
+      variant: 'danger',
+    });
+    if (confirmed) {
+      await deleteChecklist(checklistId);
+    }
+  };
+
+  const handleRename = async (checklistId, newName) => {
+    await updateChecklist(checklistId, { name: newName });
+  };
+
+  const handleCreate = () => {
+    navigate('/checklist');
+  };
+
+  const handleSignIn = () => {
+    navigate('/signin');
+  };
+
+  const hasChecklists = () => checklists()?.length > 0;
+
+  const animation = useContext(AnimationContext);
+
+  return (
+    <section style={animation.fadeUp(300)}>
+      {/* Header */}
+      <Show when={props.showHeader !== false}>
+        <div class='mb-4 flex items-center justify-between'>
+          <h2 class='text-sm font-semibold tracking-wide text-stone-500 uppercase'>
+            Local Appraisals
+          </h2>
+          <Show when={hasChecklists()}>
+            <button
+              type='button'
+              onClick={handleCreate}
+              class='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-blue-600 transition-all hover:scale-105 hover:bg-blue-50 hover:shadow-sm active:scale-100'
+            >
+              <FiPlus class='h-4 w-4' />
+              New
+            </button>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Sign-in prompt */}
+      <Show when={props.showSignInPrompt}>
+        <div class='mb-4'>
+          <SignInPrompt onSignIn={handleSignIn} />
+        </div>
+      </Show>
+
+      {/* Appraisals list */}
+      <div class='space-y-3'>
+        {/* Empty state */}
+        <Show when={!hasChecklists()}>
+          <EmptyLocalState onCreateClick={handleCreate} />
+        </Show>
+
+        {/* Appraisal cards */}
+        <For each={checklists()}>
+          {(checklist, index) => (
+            <LocalAppraisalCard
+              checklist={checklist}
+              onOpen={handleOpen}
+              onDelete={handleDelete}
+              onRename={newName => handleRename(checklist.id, newName)}
+              style={animation.statRise(index() * 50)}
+            />
+          )}
+        </For>
+      </div>
+
+      <confirmDialog.ConfirmDialogComponent />
+    </section>
+  );
+}
+
+export default LocalAppraisalsSection;
diff --git a/packages/web/src/components/dashboard/ProgressCard.jsx b/packages/web/src/components/dashboard/ProgressCard.jsx
new file mode 100644
index 000000000..5c16d8d60
--- /dev/null
+++ b/packages/web/src/components/dashboard/ProgressCard.jsx
@@ -0,0 +1,85 @@
+/**
+ * ProgressCard - Shows overall progress with an SVG arc visualization
+ */
+
+import { createMemo, Show, useContext } from 'solid-js';
+
+import { AnimationContext } from './Dashboard.jsx';
+
+/**
+ * SVG arc progress indicator
+ * @param {Object} props
+ * @param {number} props.completed - Number of completed items
+ * @param {number} props.total - Total number of items
+ * @param {string} [props.title] - Card title
+ * @param {string} [props.subtitle] - Subtitle text
+ */
+export function ProgressCard(props) {
+  const animation = useContext(AnimationContext);
+
+  const percentage = createMemo(() => {
+    if (!props.total || props.total === 0) return 0;
+    return Math.round((props.completed / props.total) * 100);
+  });
+
+  // SVG arc calculations
+  const radius = 52;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = createMemo(() => {
+    return circumference - (percentage() / 100) * circumference;
+  });
+
+  return (
+    <div
+      class='flex flex-col items-center rounded-xl border border-stone-200/60 bg-white p-6 text-center'
+      style={animation.fadeUp(150)}
+    >
+      <h3 class='mb-4 text-sm font-medium text-stone-700'>{props.title || 'Overall Progress'}</h3>
+
+      {/* SVG Arc */}
+      <div class='relative mb-4'>
+        <svg width='140' height='140' viewBox='0 0 140 140'>
+          {/* Background arc */}
+          <circle cx='70' cy='70' r={radius} stroke='#f5f5f4' stroke-width='12' fill='none' />
+          {/* Progress arc */}
+          <circle
+            cx='70'
+            cy='70'
+            r={radius}
+            stroke='#3b82f6'
+            stroke-width='12'
+            fill='none'
+            stroke-linecap='round'
+            stroke-dasharray={circumference}
+            stroke-dashoffset={strokeDashoffset()}
+            transform='rotate(-90 70 70)'
+            class='transition-all duration-700 ease-out'
+          />
+        </svg>
+        {/* Center text */}
+        <div class='absolute inset-0 flex flex-col items-center justify-center'>
+          <span class='text-3xl font-bold text-stone-800 tabular-nums'>{percentage()}%</span>
+          <span class='text-xs text-stone-500'>complete</span>
+        </div>
+      </div>
+
+      {/* Stats below */}
+      <div class='flex items-center gap-4 text-sm'>
+        <div class='flex items-center gap-1.5'>
+          <span class='h-2 w-2 rounded-full bg-blue-500' />
+          <span class='text-stone-600'>{props.completed} done</span>
+        </div>
+        <div class='flex items-center gap-1.5'>
+          <span class='h-2 w-2 rounded-full bg-stone-200' />
+          <span class='text-stone-600'>{props.total - props.completed} remaining</span>
+        </div>
+      </div>
+
+      <Show when={props.subtitle}>
+        <p class='mt-3 text-xs text-stone-400'>{props.subtitle}</p>
+      </Show>
+    </div>
+  );
+}
+
+export default ProgressCard;
diff --git a/packages/web/src/components/dashboard/ProjectCard.jsx b/packages/web/src/components/dashboard/ProjectCard.jsx
new file mode 100644
index 000000000..579497b9a
--- /dev/null
+++ b/packages/web/src/components/dashboard/ProjectCard.jsx
@@ -0,0 +1,217 @@
+/**
+ * ProjectCard - Enhanced project card with accent colors and progress bar
+ *
+ * Features:
+ * - Deterministic accent color based on project ID
+ * - Progress bar with gradient
+ * - Role badge (Lead/Reviewer)
+ * - Member count
+ * - Relative timestamp
+ * - Hover effects and animations
+ */
+
+import { Show, createMemo } from 'solid-js';
+import { FiUsers, FiChevronRight, FiTrash2 } from 'solid-icons/fi';
+
+import projectStore from '@/stores/projectStore.js';
+
+/**
+ * Accent color configurations
+ */
+const ACCENT_COLORS = [
+  {
+    name: 'blue',
+    bg: 'bg-blue-50',
+    text: 'text-blue-700',
+    fill: 'bg-blue-500',
+    gradient: 'from-blue-500 to-blue-600',
+  },
+  {
+    name: 'amber',
+    bg: 'bg-amber-50',
+    text: 'text-amber-700',
+    fill: 'bg-amber-500',
+    gradient: 'from-amber-400 to-orange-500',
+  },
+  {
+    name: 'rose',
+    bg: 'bg-rose-50',
+    text: 'text-rose-700',
+    fill: 'bg-rose-500',
+    gradient: 'from-rose-400 to-pink-500',
+  },
+  {
+    name: 'emerald',
+    bg: 'bg-emerald-50',
+    text: 'text-emerald-700',
+    fill: 'bg-emerald-500',
+    gradient: 'from-emerald-400 to-teal-500',
+  },
+  {
+    name: 'violet',
+    bg: 'bg-violet-50',
+    text: 'text-violet-700',
+    fill: 'bg-violet-500',
+    gradient: 'from-violet-400 to-purple-500',
+  },
+];
+
+/**
+ * Generate a deterministic color index from a string (project ID)
+ * @param {string} id - Project ID
+ * @returns {number} - Color index
+ */
+function hashToColorIndex(id) {
+  if (!id) return 0;
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash << 5) - hash + id.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash) % ACCENT_COLORS.length;
+}
+
+/**
+ * Format a relative time string
+ * @param {Date|string|number} date
+ * @returns {string}
+ */
+function formatRelativeTime(date) {
+  if (!date) return '';
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now - then;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
+  return then.toLocaleDateString();
+}
+
+/**
+ * Enhanced project card component
+ * @param {Object} props
+ * @param {Object} props.project - Project data
+ * @param {() => void} props.onOpen - Called when project is opened
+ * @param {() => void} [props.onDelete] - Called when delete is requested
+ * @param {Object} [props.style] - Animation style object
+ */
+export function ProjectCard(props) {
+  const colors = createMemo(() => {
+    const index = hashToColorIndex(props.project?.id);
+    return ACCENT_COLORS[index];
+  });
+
+  const progress = createMemo(() => {
+    // Priority: cached stats from projectStore > props from API > 0
+    const cachedStats = projectStore.getProjectStats(props.project?.id);
+    const completed = cachedStats?.completedCount ?? props.project?.completedCount ?? 0;
+    const total = cachedStats?.studyCount ?? props.project?.studyCount ?? 0;
+    if (total === 0) return { completed: 0, total: 0, percentage: 0 };
+    return {
+      completed,
+      total,
+      percentage: Math.round((completed / total) * 100),
+    };
+  });
+
+  const relativeTime = createMemo(() => {
+    return formatRelativeTime(props.project?.updatedAt || props.project?.createdAt);
+  });
+
+  const memberCount = createMemo(() => {
+    return props.project?.memberCount || props.project?.members?.length || 1;
+  });
+
+  const isOwner = () => props.project?.role === 'owner';
+
+  return (
+    <div
+      class='group relative overflow-hidden rounded-2xl border border-stone-200/60 bg-white p-6 shadow-sm transition-all duration-300 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50'
+      style={props.style}
+    >
+      {/* Decorative corner accent */}
+      <div
+        class={`absolute -top-10 -right-10 h-24 w-24 rounded-full opacity-20 blur-2xl transition-opacity duration-300 group-hover:opacity-40 ${colors().fill}`}
+      />
+
+      {/* Header */}
+      <div class='relative mb-4 flex items-start justify-between'>
+        <div class='min-w-0 flex-1 pr-4'>
+          <div class='mb-2 flex items-center gap-2'>
+            <span
+              class={`text-2xs inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium tracking-wide uppercase ${colors().bg} ${colors().text}`}
+            >
+              {isOwner() ? 'Lead' : 'Reviewer'}
+            </span>
+            <span class='text-xs text-stone-400'>{relativeTime()}</span>
+          </div>
+          <h3 class='line-clamp-2 text-lg leading-snug font-semibold text-stone-800 transition-colors group-hover:text-blue-600'>
+            {props.project?.name}
+          </h3>
+        </div>
+
+        {/* Delete button for owners */}
+        <Show when={isOwner() && props.onDelete}>
+          <button
+            type='button'
+            onClick={e => {
+              e.stopPropagation();
+              props.onDelete?.(props.project?.id);
+            }}
+            class='z-10 shrink-0 rounded-lg p-2 text-stone-300 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-50 hover:text-red-500'
+            title='Delete Project'
+          >
+            <FiTrash2 class='h-4 w-4' />
+          </button>
+        </Show>
+      </div>
+
+      {/* Description */}
+      <p class='mb-5 line-clamp-2 text-sm leading-relaxed text-stone-500'>
+        {props.project?.description || 'No description'}
+      </p>
+
+      {/* Progress bar */}
+      <div class='mb-4'>
+        <div class='mb-1.5 flex items-center justify-between text-xs'>
+          <span class='font-medium text-stone-600'>Progress</span>
+          <span class='text-stone-500 tabular-nums'>
+            {progress().completed}/{progress().total} studies
+          </span>
+        </div>
+        <div class='h-1.5 overflow-hidden rounded-full bg-stone-100'>
+          <div
+            class={`h-full rounded-full bg-linear-to-r ${colors().gradient} transition-all duration-500`}
+            style={{ width: `${progress().percentage}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div class='flex items-center justify-between'>
+        <div class='flex items-center gap-1.5 text-xs text-stone-500'>
+          <FiUsers class='h-3.5 w-3.5' />
+          <span>
+            {memberCount()} member{memberCount() !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <button
+          type='button'
+          onClick={() => props.onOpen?.(props.project?.id)}
+          class='flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-blue-600 transition-all hover:bg-blue-50 hover:text-blue-700'
+        >
+          Open
+          <FiChevronRight class='h-4 w-4 transition-transform group-hover:translate-x-0.5' />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCard;
diff --git a/packages/web/src/components/dashboard/ProjectsSection.jsx b/packages/web/src/components/dashboard/ProjectsSection.jsx
new file mode 100644
index 000000000..a840874e8
--- /dev/null
+++ b/packages/web/src/components/dashboard/ProjectsSection.jsx
@@ -0,0 +1,233 @@
+/**
+ * ProjectsSection - Projects grid for dashboard
+ *
+ * Displays projects with the enhanced ProjectCard design,
+ * handles create form, empty states, and loading states.
+ */
+
+import { Show, For, useContext } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { useQueryClient } from '@tanstack/solid-query';
+import { useConfirmDialog, showToast } from '@corates/ui';
+import { FiPlus, FiFolder } from 'solid-icons/fi';
+
+import { AnimationContext } from './Dashboard.jsx';
+
+import { useMyProjectsList } from '@primitives/useMyProjectsList.js';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { useSubscription } from '@primitives/useSubscription.js';
+import { API_BASE } from '@config/api.js';
+import { queryKeys } from '@lib/queryKeys.js';
+import projectStore from '@/stores/projectStore.js';
+
+import { ProjectCard } from './ProjectCard.jsx';
+import CreateProjectForm from '@/components/project/CreateProjectForm.jsx';
+import ContactPrompt from '@/components/project/ContactPrompt.jsx';
+
+/**
+ * Empty state when no projects exist
+ */
+function EmptyProjectsState(props) {
+  return (
+    <div class='col-span-full flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-stone-200 bg-stone-50/50 px-6 py-16'>
+      <div class='mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-stone-100'>
+        <FiFolder class='h-8 w-8 text-stone-400' />
+      </div>
+      <h3 class='mb-2 text-lg font-semibold text-stone-700'>No projects yet</h3>
+      <p class='mb-6 max-w-sm text-center text-sm text-stone-500'>
+        Create your first project to start collaborating on evidence synthesis with your team.
+      </p>
+      <Show when={props.canCreate}>
+        <button
+          type='button'
+          onClick={() => props.onCreateClick?.()}
+          disabled={!props.isOnline}
+          class='flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/25 transition-all hover:bg-blue-700 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50'
+        >
+          <FiPlus class='h-4 w-4' />
+          Create First Project
+        </button>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Projects section component
+ * @param {Object} props
+ * @param {boolean} [props.showHeader] - Whether to show section header
+ * @param {() => void} [props.onCreateClick] - External handler for create button
+ */
+export function ProjectsSection(props) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const confirmDialog = useConfirmDialog();
+  const { isOnline } = useBetterAuth();
+
+  // Projects data
+  const projectListQuery = useMyProjectsList();
+  const projects = () => projectListQuery.projects();
+  const projectCount = () => projects()?.length || 0;
+
+  // Subscription checks
+  const { hasEntitlement, hasQuota, quotas, loading: subscriptionLoading } = useSubscription();
+
+  const showCreateForm = () => props.showCreateForm();
+  const setShowCreateForm = val => props.setShowCreateForm(val);
+
+  // Local-first: assume user can create unless we definitively know they can't
+  // Don't block UI on subscription loading - optimistically allow action
+  const canCreateProject = () => {
+    // If still loading subscription data, assume they can create
+    if (subscriptionLoading()) return true;
+    return (
+      hasEntitlement('project.create') &&
+      hasQuota('projects.max', { used: projectCount(), requested: 1 })
+    );
+  };
+
+  const restrictionType = () => {
+    // Don't show restriction prompts while loading
+    if (subscriptionLoading()) return null;
+    return !hasEntitlement('project.create') ? 'entitlement' : 'quota';
+  };
+
+  // Handlers
+  const handleProjectCreated = (
+    newProject,
+    pendingPdfs = [],
+    pendingRefs = [],
+    driveFiles = [],
+  ) => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
+
+    if (pendingPdfs.length > 0 || pendingRefs.length > 0 || driveFiles.length > 0) {
+      projectStore.setPendingProjectData(newProject.id, { pendingPdfs, pendingRefs, driveFiles });
+    }
+
+    setShowCreateForm(false);
+    navigate(`/projects/${newProject.id}`);
+  };
+
+  const openProject = projectId => {
+    navigate(`/projects/${projectId}`);
+  };
+
+  const handleDeleteProject = async targetProjectId => {
+    const confirmed = await confirmDialog.open({
+      title: 'Delete Project',
+      description:
+        'Are you sure you want to delete this entire project? This action cannot be undone.',
+      confirmText: 'Delete Project',
+      variant: 'danger',
+    });
+    if (!confirmed) return;
+
+    const project = projects()?.find(p => p.id === targetProjectId);
+    if (!project?.orgId) {
+      showToast.error('Error', 'Unable to find project organization');
+      return;
+    }
+
+    try {
+      const { apiFetch } = await import('@/lib/apiFetch.js');
+      await apiFetch(`/api/orgs/${project.orgId}/projects/${targetProjectId}`, {
+        method: 'DELETE',
+        toastMessage: 'Delete Failed',
+      });
+
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
+      showToast.success('Project Deleted', 'The project has been deleted successfully');
+    } catch (err) {
+      const { handleError } = await import('@/lib/error-utils.js');
+      await handleError(err, { toastTitle: 'Delete Failed', showToast: false });
+    }
+  };
+
+  const hasProjects = () => projects()?.length > 0;
+
+  const handleCreateClick = () => {
+    if (props.onCreateClick) {
+      props.onCreateClick();
+    } else {
+      setShowCreateForm(true);
+    }
+  };
+
+  const animation = useContext(AnimationContext);
+
+  return (
+    <section style={animation.fadeUp(200)}>
+      {/* Header */}
+      <Show when={props.showHeader !== false}>
+        <div class='mb-4 flex items-center justify-between'>
+          <h2 class='text-sm font-semibold tracking-wide text-stone-500 uppercase'>
+            Your Projects
+          </h2>
+          <Show
+            when={canCreateProject() && hasProjects()}
+            fallback={
+              <Show when={!canCreateProject() && canCreateProject() !== null}>
+                <ContactPrompt
+                  restrictionType={restrictionType()}
+                  projectCount={projectCount()}
+                  quotaLimit={quotas()?.['projects.max']}
+                  compact
+                />
+              </Show>
+            }
+          >
+            <button
+              type='button'
+              onClick={handleCreateClick}
+              disabled={!isOnline()}
+              class='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-blue-600 transition-all hover:scale-105 hover:bg-blue-50 hover:shadow-sm active:scale-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100'
+            >
+              <FiPlus class='h-4 w-4' />
+              New Project
+            </button>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Create form */}
+      <Show when={showCreateForm()}>
+        <div class='mb-6'>
+          <CreateProjectForm
+            apiBase={API_BASE}
+            onProjectCreated={handleProjectCreated}
+            onCancel={() => setShowCreateForm(false)}
+          />
+        </div>
+      </Show>
+
+      {/* Projects grid */}
+      <div class='grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
+        {/* Empty state */}
+        <Show when={!hasProjects()}>
+          <EmptyProjectsState
+            canCreate={canCreateProject()}
+            isOnline={isOnline()}
+            onCreateClick={handleCreateClick}
+          />
+        </Show>
+
+        {/* Project cards */}
+        <For each={projects()}>
+          {(project, index) => (
+            <ProjectCard
+              project={project}
+              onOpen={openProject}
+              onDelete={handleDeleteProject}
+              style={animation.statRise(index() * 50)}
+            />
+          )}
+        </For>
+      </div>
+
+      <confirmDialog.ConfirmDialogComponent />
+    </section>
+  );
+}
+
+export default ProjectsSection;
diff --git a/packages/web/src/components/dashboard/QuickActions.jsx b/packages/web/src/components/dashboard/QuickActions.jsx
new file mode 100644
index 000000000..da489eae2
--- /dev/null
+++ b/packages/web/src/components/dashboard/QuickActions.jsx
@@ -0,0 +1,104 @@
+/**
+ * QuickActions - Quick start cards for creating new appraisals
+ */
+
+import { For, useContext } from 'solid-js';
+import { FiPlayCircle, FiBook } from 'solid-icons/fi';
+
+import { AnimationContext } from './Dashboard.jsx';
+
+/**
+ * Quick action button component
+ * @param {Object} props
+ * @param {string} props.title - Action title
+ * @param {string} props.description - Action description
+ * @param {JSX.Element} props.icon - Icon element
+ * @param {string} props.iconBg - Background class for icon
+ * @param {string} props.border - Border color class
+ * @param {() => void} props.onClick - Click handler
+ * @param {boolean} [props.disabled] - Whether action is disabled
+ * @param {number} [props.delay] - Animation delay
+ */
+function QuickActionCard(props) {
+  return (
+    <button
+      type='button'
+      onClick={() => props.onClick?.()}
+      disabled={props.disabled}
+      class={`group flex items-center gap-4 rounded-xl border bg-white p-4 text-left transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 ${props.border}`}
+    >
+      <div
+        class={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl ${props.iconBg} transition-transform duration-200 group-hover:scale-105`}
+      >
+        {props.icon}
+      </div>
+      <div>
+        <h4 class='font-medium text-stone-800'>{props.title}</h4>
+        <p class='text-sm text-stone-500'>{props.description}</p>
+      </div>
+    </button>
+  );
+}
+
+/**
+ * Quick actions section
+ * @param {Object} props
+ * @param {() => void} props.onStartROBINSI - Handler for starting ROBINS-I
+ * @param {() => void} props.onStartAMSTAR2 - Handler for starting AMSTAR 2
+ * @param {() => void} props.onLearnMore - Handler for learn more action
+ */
+export function QuickActions(props) {
+  const animation = useContext(AnimationContext);
+
+  const actions = () => [
+    {
+      id: 'robins-i',
+      title: 'Start ROBINS-I',
+      description: 'Risk of bias for non-randomized studies',
+      icon: <FiPlayCircle class='h-6 w-6 text-blue-600' />,
+      iconBg: 'bg-blue-50',
+      border: 'border-blue-100 hover:border-blue-200',
+      onClick: () => props.onStartROBINSI?.(),
+    },
+    {
+      id: 'amstar-2',
+      title: 'Start AMSTAR 2',
+      description: 'Quality assessment for systematic reviews',
+      icon: <FiPlayCircle class='h-6 w-6 text-emerald-600' />,
+      iconBg: 'bg-emerald-50',
+      border: 'border-emerald-100 hover:border-emerald-200',
+      onClick: () => props.onStartAMSTAR2?.(),
+    },
+    {
+      id: 'learn-more',
+      title: 'Learn More',
+      description: 'View documentation and guides',
+      icon: <FiBook class='h-6 w-6 text-violet-600' />,
+      iconBg: 'bg-violet-50',
+      border: 'border-violet-100 hover:border-violet-200',
+      onClick: () => props.onLearnMore?.(),
+    },
+  ];
+
+  return (
+    <section class='mb-6' style={animation.fadeUp(400)}>
+      <h3 class='mb-4 text-sm font-semibold tracking-wide text-stone-500 uppercase'>Quick Start</h3>
+      <div class='grid gap-3'>
+        <For each={actions()}>
+          {action => (
+            <QuickActionCard
+              title={action.title}
+              description={action.description}
+              icon={action.icon}
+              iconBg={action.iconBg}
+              border={action.border}
+              onClick={action.onClick}
+            />
+          )}
+        </For>
+      </div>
+    </section>
+  );
+}
+
+export default QuickActions;
diff --git a/packages/web/src/components/dashboard/StatsRow.jsx b/packages/web/src/components/dashboard/StatsRow.jsx
new file mode 100644
index 000000000..29e8b6dd2
--- /dev/null
+++ b/packages/web/src/components/dashboard/StatsRow.jsx
@@ -0,0 +1,105 @@
+/**
+ * StatsRow - Row of stat cards showing key metrics
+ */
+
+import { Show, For, useContext } from 'solid-js';
+import { FiFolder, FiCheck, FiFileText, FiUsers } from 'solid-icons/fi';
+import { AnimationContext } from './Dashboard.jsx';
+
+/**
+ * Individual stat card
+ * @param {Object} props
+ * @param {string} props.label - Stat label
+ * @param {string|number} props.value - Main value to display
+ * @param {string} [props.subtext] - Optional subtext
+ * @param {JSX.Element} props.icon - Icon element
+ * @param {string} [props.iconBg] - Background class for icon container
+ * @param {number} [props.delay] - Animation delay in ms
+ * @param {Object} [props.style] - Additional style object
+ */
+export function StatCard(props) {
+  return (
+    <div
+      class='relative overflow-hidden rounded-xl border border-stone-200/60 bg-white p-5 transition-all duration-200 hover:shadow-md'
+      style={props.style}
+    >
+      <div class='flex items-start justify-between'>
+        <div>
+          <p class='text-xs font-medium tracking-wide text-stone-400 uppercase'>{props.label}</p>
+          <p class='mt-1 text-3xl font-semibold text-stone-800 tabular-nums'>{props.value}</p>
+        </div>
+        <div
+          class={`flex h-10 w-10 items-center justify-center rounded-xl ${props.iconBg || 'bg-stone-100'}`}
+        >
+          {props.icon}
+        </div>
+      </div>
+      <Show when={props.subtext}>
+        <p class='mt-2 text-xs text-stone-500'>{props.subtext}</p>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Stats row with computed metrics
+ * @param {Object} props
+ * @param {number} props.projectCount - Number of active projects
+ * @param {number} props.completedStudies - Number of completed studies
+ * @param {number} props.totalStudies - Total number of studies
+ * @param {number} props.localAppraisalCount - Number of local appraisals
+ */
+export function StatsRow(props) {
+  const animation = useContext(AnimationContext);
+  const stats = () => [
+    {
+      label: 'Active Projects',
+      value: props.projectCount,
+      icon: <FiFolder class='h-5 w-5 text-blue-600' />,
+      iconBg: 'bg-blue-50',
+      delay: 0,
+    },
+    {
+      label: 'Studies Reviewed',
+      value: props.completedStudies,
+      subtext: props.totalStudies > 0 ? `of ${props.totalStudies} total` : undefined,
+      icon: <FiCheck class='h-5 w-5 text-emerald-600' />,
+      iconBg: 'bg-emerald-50',
+      delay: 50,
+    },
+    {
+      label: 'Local Appraisals',
+      value: props.localAppraisalCount,
+      icon: <FiFileText class='h-5 w-5 text-amber-600' />,
+      iconBg: 'bg-amber-50',
+      delay: 100,
+    },
+    {
+      label: 'Team Members',
+      value: props.teamMemberCount || '-',
+      subtext: props.teamMemberCount ? 'Across all projects' : undefined,
+      icon: <FiUsers class='h-5 w-5 text-violet-600' />,
+      iconBg: 'bg-violet-50',
+      delay: 150,
+    },
+  ];
+
+  return (
+    <section class='mb-10 grid grid-cols-2 gap-4 lg:grid-cols-4' style={animation.fadeUp(100)}>
+      <For each={stats()}>
+        {stat => (
+          <StatCard
+            label={stat.label}
+            value={stat.value}
+            subtext={stat.subtext}
+            icon={stat.icon}
+            iconBg={stat.iconBg}
+            style={animation.statRise(stat.delay)}
+          />
+        )}
+      </For>
+    </section>
+  );
+}
+
+export default StatsRow;
diff --git a/packages/web/src/components/dashboard/index.js b/packages/web/src/components/dashboard/index.js
new file mode 100644
index 000000000..0ff93473d
--- /dev/null
+++ b/packages/web/src/components/dashboard/index.js
@@ -0,0 +1,17 @@
+/**
+ * Dashboard Module
+ *
+ * Modern dashboard with clean design based on Linear/Notion aesthetic.
+ * Handles all user states: logged out, loading, active, quota exceeded.
+ */
+
+export { default } from './Dashboard.jsx';
+export { DashboardHeader } from './DashboardHeader.jsx';
+export { StatsRow, StatCard } from './StatsRow.jsx';
+export { ProgressCard } from './ProgressCard.jsx';
+export { QuickActions } from './QuickActions.jsx';
+export { ActivityFeed } from './ActivityFeed.jsx';
+export { ProjectCard } from './ProjectCard.jsx';
+export { ProjectsSection } from './ProjectsSection.jsx';
+export { LocalAppraisalCard } from './LocalAppraisalCard.jsx';
+export { LocalAppraisalsSection } from './LocalAppraisalsSection.jsx';
diff --git a/packages/web/src/components/dashboard/useInitialAnimation.js b/packages/web/src/components/dashboard/useInitialAnimation.js
new file mode 100644
index 000000000..4caf369a2
--- /dev/null
+++ b/packages/web/src/components/dashboard/useInitialAnimation.js
@@ -0,0 +1,59 @@
+/**
+ * useInitialAnimation - Track whether initial animations have played
+ *
+ * Returns animation style props that only apply on first render.
+ * Uses module-level state so animations persist across re-renders
+ * but reset on page reload (new session).
+ */
+
+// Module-level flag - persists across re-renders, resets on page reload
+let hasAnimated = false;
+
+/**
+ * Hook to get animation styles for initial load only
+ * @returns {Object} Animation helpers
+ */
+export function useInitialAnimation() {
+  // Capture whether we should animate at hook creation time
+  const shouldAnimate = !hasAnimated;
+
+  // Mark as animated immediately so subsequent components don't re-animate
+  if (!hasAnimated) {
+    hasAnimated = true;
+  }
+
+  /**
+   * Get animation style for fade-up effect
+   * @param {number} delay - Delay in ms
+   * @returns {Object} Style object
+   */
+  const fadeUp = (delay = 0) => {
+    if (!shouldAnimate) return {};
+    return { animation: `fade-up 0.6s ease-out ${delay}ms backwards` };
+  };
+
+  /**
+   * Get animation style for stat-rise effect
+   * @param {number} delay - Delay in ms
+   * @returns {Object} Style object
+   */
+  const statRise = (delay = 0) => {
+    if (!shouldAnimate) return {};
+    return { animation: `stat-rise 0.4s ease-out ${delay}ms backwards` };
+  };
+
+  return {
+    shouldAnimate,
+    fadeUp,
+    statRise,
+  };
+}
+
+/**
+ * Reset animation state (for testing or forced re-animation)
+ */
+export function resetAnimationState() {
+  hasAnimated = false;
+}
+
+export default useInitialAnimation;
diff --git a/packages/web/src/components/dev/DevImportProject.jsx b/packages/web/src/components/dev/DevImportProject.jsx
index b89cf0279..bea3a1100 100644
--- a/packages/web/src/components/dev/DevImportProject.jsx
+++ b/packages/web/src/components/dev/DevImportProject.jsx
@@ -155,7 +155,7 @@ export default function DevImportProject() {
       <div class='flex-1'>
         <label class='mb-1 block text-xs text-gray-500'>Or paste JSON</label>
         <textarea
-          class='h-full min-h-[150px] w-full resize-none rounded border border-gray-300 bg-gray-50 p-2 font-mono text-xs focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none'
+          class='h-full min-h-37.5 w-full resize-none rounded border border-gray-300 bg-gray-50 p-2 font-mono text-xs focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none'
           placeholder='Paste exported project JSON here...'
           value={jsonText()}
           onInput={e => setJsonText(e.target.value)}
diff --git a/packages/web/src/components/mocks/DashboardMock.jsx b/packages/web/src/components/mocks/DashboardMock.jsx
new file mode 100644
index 000000000..b5aa23aac
--- /dev/null
+++ b/packages/web/src/components/mocks/DashboardMock.jsx
@@ -0,0 +1,609 @@
+/**
+ * Dashboard Mock - Clean Modern Style
+ *
+ * Design Direction: Clean, professional research dashboard.
+ * A refined aesthetic with:
+ * - Inter font family for clarity and readability
+ * - Blue brand accents with warm stone neutrals
+ * - Paper-like textures and layered cards
+ * - Clear data hierarchy and beautiful progress visualization
+ * - Generous whitespace with intentional asymmetry
+ *
+ * Inspired by: Linear's precision, Notion's warmth
+ */
+
+import { For, Show, createSignal, createEffect, onMount } from 'solid-js';
+import {
+  FiPlus,
+  FiFolder,
+  FiUsers,
+  FiClock,
+  FiCheck,
+  FiArrowRight,
+  FiFileText,
+  FiTrendingUp,
+  FiChevronRight,
+  FiSearch,
+  FiBook,
+  FiBarChart2,
+} from 'solid-icons/fi';
+import { BiRegularBookmark } from 'solid-icons/bi';
+import { AiOutlineExperiment } from 'solid-icons/ai';
+import { VsBeaker } from 'solid-icons/vs';
+
+// Mock Data
+const mockUser = {
+  name: 'Dr. Sarah Chen',
+  institution: 'Stanford School of Medicine',
+  avatar: null,
+};
+
+const mockProjects = [
+  {
+    id: '1',
+    name: 'Mindfulness Interventions for Chronic Pain',
+    description: 'Systematic review of RCTs examining mindfulness-based interventions',
+    role: 'owner',
+    studies: 24,
+    completed: 16,
+    members: 4,
+    updatedAt: '2 hours ago',
+    color: 'blue',
+  },
+  {
+    id: '2',
+    name: 'Digital Therapeutics for Anxiety Disorders',
+    description: 'Meta-analysis of mobile app interventions for GAD',
+    role: 'reviewer',
+    studies: 18,
+    completed: 8,
+    members: 3,
+    updatedAt: '1 day ago',
+    color: 'amber',
+  },
+  {
+    id: '3',
+    name: 'Exercise & Cognitive Function in Aging',
+    description: 'Umbrella review of physical activity interventions',
+    role: 'reviewer',
+    studies: 42,
+    completed: 38,
+    members: 6,
+    updatedAt: '3 days ago',
+    color: 'rose',
+  },
+];
+
+const mockLocalAppraisals = [
+  {
+    id: 'local-1',
+    name: 'MBSR RCT - Johnson 2023',
+    type: 'ROBINS-I',
+    updatedAt: 'Today',
+  },
+  {
+    id: 'local-2',
+    name: 'CBT Meta-analysis Quality Check',
+    type: 'AMSTAR 2',
+    updatedAt: 'Yesterday',
+  },
+];
+
+const mockActivity = [
+  {
+    action: 'completed',
+    project: 'Mindfulness Interventions',
+    study: 'MBSR for Low Back Pain',
+    time: '2h ago',
+  },
+  {
+    action: 'started',
+    project: 'Digital Therapeutics',
+    study: 'Calm App RCT',
+    time: '5h ago',
+  },
+  {
+    action: 'reconciled',
+    project: 'Exercise & Cognitive',
+    study: 'Walking Intervention Study',
+    time: '1d ago',
+  },
+];
+
+// Accent color map
+const accentColors = {
+  blue: {
+    bg: 'bg-blue-50',
+    border: 'border-blue-200',
+    text: 'text-blue-700',
+    ring: 'ring-blue-500/20',
+    fill: 'bg-blue-500',
+    gradient: 'from-blue-500 to-blue-600',
+  },
+  amber: {
+    bg: 'bg-amber-50',
+    border: 'border-amber-200',
+    text: 'text-amber-700',
+    ring: 'ring-amber-500/20',
+    fill: 'bg-amber-500',
+    gradient: 'from-amber-400 to-orange-500',
+  },
+  rose: {
+    bg: 'bg-rose-50',
+    border: 'border-rose-200',
+    text: 'text-rose-700',
+    ring: 'ring-rose-500/20',
+    fill: 'bg-rose-500',
+    gradient: 'from-rose-400 to-pink-500',
+  },
+};
+
+// Progress Arc component
+function ProgressArc(props) {
+  const percentage = () => Math.round((props.completed / props.total) * 100);
+  const circumference = 2 * Math.PI * 36;
+  const offset = () => circumference - (percentage() / 100) * circumference;
+
+  return (
+    <div class='relative h-24 w-24'>
+      <svg class='h-24 w-24 -rotate-90' viewBox='0 0 80 80'>
+        <circle
+          cx='40'
+          cy='40'
+          r='36'
+          stroke='currentColor'
+          stroke-width='4'
+          fill='none'
+          class='text-stone-100'
+        />
+        <circle
+          cx='40'
+          cy='40'
+          r='36'
+          stroke={`url(#arc-gradient-${props.id})`}
+          stroke-width='4'
+          fill='none'
+          stroke-linecap='round'
+          stroke-dasharray={circumference}
+          stroke-dashoffset={offset()}
+          class='transition-all duration-700 ease-out'
+        />
+        <defs>
+          <linearGradient id={`arc-gradient-${props.id}`} x1='0%' y1='0%' x2='100%' y2='100%'>
+            <stop offset='0%' stop-color='#3b82f6' />
+            <stop offset='100%' stop-color='#2563eb' />
+          </linearGradient>
+        </defs>
+      </svg>
+      <div class='absolute inset-0 flex flex-col items-center justify-center'>
+        <span class='text-2xl font-semibold text-stone-800'>{percentage()}%</span>
+      </div>
+    </div>
+  );
+}
+
+// Project Card component
+function ProjectCard(props) {
+  const colors = () => accentColors[props.project.color] || accentColors.blue;
+  const percentage = () => Math.round((props.project.completed / props.project.studies) * 100) || 0;
+
+  return (
+    <div
+      class='group relative overflow-hidden rounded-2xl border border-stone-200/60 bg-white p-6 shadow-sm transition-all duration-300 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50'
+      style='animation: card-rise 0.5s ease-out backwards'
+    >
+      {/* Decorative corner accent */}
+      <div
+        class={`absolute -top-10 -right-10 h-24 w-24 rounded-full opacity-20 blur-2xl transition-opacity duration-300 group-hover:opacity-40 ${colors().fill}`}
+      />
+
+      {/* Header */}
+      <div class='relative mb-4 flex items-start justify-between'>
+        <div class='flex-1 pr-4'>
+          <div class='mb-2 flex items-center gap-2'>
+            <span
+              class={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium tracking-wide uppercase ${colors().bg} ${colors().text}`}
+            >
+              {props.project.role === 'owner' ? 'Lead' : 'Reviewer'}
+            </span>
+            <span class='text-xs text-stone-400'>{props.project.updatedAt}</span>
+          </div>
+          <h3 class='line-clamp-2 text-lg leading-snug font-semibold text-stone-800 transition-colors group-hover:text-blue-600'>
+            {props.project.name}
+          </h3>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p class='mb-5 line-clamp-2 text-sm leading-relaxed text-stone-500'>
+        {props.project.description}
+      </p>
+
+      {/* Progress bar */}
+      <div class='mb-4'>
+        <div class='mb-1.5 flex items-center justify-between text-xs'>
+          <span class='font-medium text-stone-600'>Progress</span>
+          <span class='text-stone-500 tabular-nums'>
+            {props.project.completed}/{props.project.studies} studies
+          </span>
+        </div>
+        <div class='h-1.5 overflow-hidden rounded-full bg-stone-100'>
+          <div
+            class={`h-full rounded-full bg-gradient-to-r ${colors().gradient} transition-all duration-500`}
+            style={`width: ${percentage()}%`}
+          />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div class='flex items-center justify-between'>
+        <div class='flex items-center gap-1.5 text-xs text-stone-500'>
+          <FiUsers class='h-3.5 w-3.5' />
+          <span>{props.project.members} members</span>
+        </div>
+        <button class='flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-blue-600 transition-all hover:bg-blue-50 hover:text-blue-700'>
+          Open
+          <FiChevronRight class='h-4 w-4 transition-transform group-hover:translate-x-0.5' />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Local Appraisal Card
+function LocalAppraisalCard(props) {
+  return (
+    <div class='group flex items-center gap-4 rounded-xl border border-stone-200/60 bg-white p-4 transition-all duration-200 hover:border-stone-300 hover:shadow-md'>
+      <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-stone-100 text-stone-500 transition-colors group-hover:bg-blue-50 group-hover:text-blue-600'>
+        <FiFileText class='h-5 w-5' />
+      </div>
+      <div class='min-w-0 flex-1'>
+        <h4 class='truncate text-sm font-medium text-stone-800'>{props.appraisal.name}</h4>
+        <div class='flex items-center gap-2 text-xs text-stone-400'>
+          <span class='rounded bg-stone-100 px-1.5 py-0.5 font-medium'>{props.appraisal.type}</span>
+          <span>{props.appraisal.updatedAt}</span>
+        </div>
+      </div>
+      <button class='shrink-0 rounded-lg p-2 text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600'>
+        <FiArrowRight class='h-4 w-4' />
+      </button>
+    </div>
+  );
+}
+
+// Activity Item
+function ActivityItem(props) {
+  const actionColors = {
+    completed: 'bg-emerald-500',
+    started: 'bg-blue-500',
+    reconciled: 'bg-amber-500',
+  };
+
+  return (
+    <div class='flex items-start gap-3 py-2'>
+      <div class={`mt-1 h-2 w-2 shrink-0 rounded-full ${actionColors[props.activity.action]}`} />
+      <div class='min-w-0 flex-1'>
+        <p class='text-sm text-stone-600'>
+          <span class='font-medium text-stone-800 capitalize'>{props.activity.action}</span>{' '}
+          <span class='text-stone-500'>appraisal in</span>{' '}
+          <span class='font-medium text-stone-700'>{props.activity.project}</span>
+        </p>
+        <p class='mt-0.5 truncate text-xs text-stone-400'>{props.activity.study}</p>
+      </div>
+      <span class='shrink-0 text-xs text-stone-400'>{props.activity.time}</span>
+    </div>
+  );
+}
+
+// Stat Card
+function StatCard(props) {
+  return (
+    <div
+      class='relative overflow-hidden rounded-xl border border-stone-200/60 bg-white p-5 transition-all duration-200 hover:shadow-md'
+      style={`animation: stat-rise 0.4s ease-out ${props.delay || 0}ms backwards`}
+    >
+      <div class='flex items-start justify-between'>
+        <div>
+          <p class='text-xs font-medium tracking-wide text-stone-400 uppercase'>{props.label}</p>
+          <p class='mt-1 text-3xl font-semibold text-stone-800 tabular-nums'>{props.value}</p>
+        </div>
+        <div
+          class={`flex h-10 w-10 items-center justify-center rounded-xl ${props.iconBg || 'bg-stone-100'}`}
+        >
+          {props.icon}
+        </div>
+      </div>
+      <Show when={props.subtext}>
+        <p class='mt-2 text-xs text-stone-500'>{props.subtext}</p>
+      </Show>
+    </div>
+  );
+}
+
+// Main Dashboard Component
+export default function DashboardMock() {
+  const [mounted, setMounted] = createSignal(false);
+
+  onMount(() => {
+    requestAnimationFrame(() => setMounted(true));
+  });
+
+  const totalStudies = () => mockProjects.reduce((sum, p) => sum + p.studies, 0);
+  const completedStudies = () => mockProjects.reduce((sum, p) => sum + p.completed, 0);
+
+  return (
+    <div class='min-h-screen bg-stone-50/50'>
+      {/* Google Fonts */}
+      <link rel='preconnect' href='https://fonts.googleapis.com' />
+      <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='' />
+      <link
+        href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+        rel='stylesheet'
+      />
+
+      <style>{`
+        .dashboard-mock {
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        
+        @keyframes card-rise {
+          from {
+            opacity: 0;
+            transform: translateY(16px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        @keyframes stat-rise {
+          from {
+            opacity: 0;
+            transform: translateY(8px) scale(0.98);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        
+        @keyframes fade-up {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        @keyframes shimmer {
+          0% { background-position: -200% 0; }
+          100% { background-position: 200% 0; }
+        }
+        
+        .dashboard-mock .pattern-dots {
+          background-image: radial-gradient(circle, #d4d4d4 1px, transparent 1px);
+          background-size: 24px 24px;
+        }
+      `}</style>
+
+      <div class='dashboard-mock'>
+        {/* Subtle dot pattern background */}
+        <div class='pattern-dots pointer-events-none fixed inset-0 opacity-30' />
+
+        {/* Main Content */}
+        <div class='relative mx-auto max-w-6xl px-6 py-10'>
+          {/* Header */}
+          <header class='mb-12' style='animation: fade-up 0.6s ease-out backwards'>
+            <div class='flex items-start justify-between'>
+              <div>
+                <p class='mb-1 text-sm font-medium text-blue-600'>Welcome back,</p>
+                <h1 class='text-4xl font-semibold tracking-tight text-stone-900'>
+                  {mockUser.name}
+                </h1>
+                <p class='mt-2 text-stone-500'>{mockUser.institution}</p>
+              </div>
+              <div class='flex items-center gap-3'>
+                <button class='flex items-center gap-2 rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-600 shadow-sm transition-all hover:border-stone-300 hover:shadow'>
+                  <FiSearch class='h-4 w-4' />
+                  <span>Search</span>
+                  <kbd class='ml-2 hidden rounded bg-stone-100 px-1.5 py-0.5 text-xs text-stone-400 sm:inline'>
+                    /
+                  </kbd>
+                </button>
+                <button class='flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/25 transition-all hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-500/30'>
+                  <FiPlus class='h-4 w-4' />
+                  New Project
+                </button>
+              </div>
+            </div>
+          </header>
+
+          {/* Stats Row */}
+          <section
+            class='mb-10 grid grid-cols-4 gap-4'
+            style='animation: fade-up 0.6s ease-out 100ms backwards'
+          >
+            <StatCard
+              label='Active Projects'
+              value={mockProjects.length}
+              icon={<FiFolder class='h-5 w-5 text-blue-600' />}
+              iconBg='bg-blue-50'
+              delay={0}
+            />
+            <StatCard
+              label='Studies Reviewed'
+              value={completedStudies()}
+              subtext={`of ${totalStudies()} total`}
+              icon={<FiCheck class='h-5 w-5 text-emerald-600' />}
+              iconBg='bg-emerald-50'
+              delay={50}
+            />
+            <StatCard
+              label='Local Appraisals'
+              value={mockLocalAppraisals.length}
+              icon={<FiFileText class='h-5 w-5 text-amber-600' />}
+              iconBg='bg-amber-50'
+              delay={100}
+            />
+            <StatCard
+              label='Team Members'
+              value='12'
+              subtext='Across all projects'
+              icon={<FiUsers class='h-5 w-5 text-violet-600' />}
+              iconBg='bg-violet-50'
+              delay={150}
+            />
+          </section>
+
+          {/* Main Grid */}
+          <div class='grid grid-cols-12 gap-8'>
+            {/* Left Column - Projects */}
+            <div class='col-span-8'>
+              {/* Projects Section */}
+              <section style='animation: fade-up 0.6s ease-out 200ms backwards'>
+                <div class='mb-6 flex items-center justify-between'>
+                  <div>
+                    <h2 class='text-2xl font-semibold text-stone-800'>Your Projects</h2>
+                    <p class='mt-1 text-sm text-stone-500'>Systematic reviews and meta-analyses</p>
+                  </div>
+                  <button class='text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'>
+                    View all
+                  </button>
+                </div>
+
+                <div class='grid gap-5'>
+                  <For each={mockProjects}>
+                    {(project, index) => (
+                      <div
+                        style={`animation: card-rise 0.5s ease-out ${200 + index() * 80}ms backwards`}
+                      >
+                        <ProjectCard project={project} />
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </section>
+
+              {/* Local Appraisals Section */}
+              <section class='mt-10' style='animation: fade-up 0.6s ease-out 500ms backwards'>
+                <div class='mb-5 flex items-center justify-between'>
+                  <div>
+                    <h2 class='text-xl font-semibold text-stone-800'>Local Appraisals</h2>
+                    <p class='mt-0.5 text-sm text-stone-500'>Saved on this device</p>
+                  </div>
+                  <button class='flex items-center gap-1.5 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'>
+                    <FiPlus class='h-4 w-4' />
+                    New Appraisal
+                  </button>
+                </div>
+
+                <div class='space-y-3'>
+                  <For each={mockLocalAppraisals}>
+                    {appraisal => <LocalAppraisalCard appraisal={appraisal} />}
+                  </For>
+                </div>
+              </section>
+            </div>
+
+            {/* Right Column - Activity & Quick Actions */}
+            <div class='col-span-4 space-y-6'>
+              {/* Overall Progress Card */}
+              <div
+                class='rounded-2xl border border-stone-200/60 bg-white p-6'
+                style='animation: fade-up 0.6s ease-out 300ms backwards'
+              >
+                <h3 class='mb-4 text-sm font-medium tracking-wide text-stone-400 uppercase'>
+                  Overall Progress
+                </h3>
+                <div class='flex items-center justify-center'>
+                  <ProgressArc id='overall' completed={completedStudies()} total={totalStudies()} />
+                </div>
+                <div class='mt-4 text-center'>
+                  <p class='text-sm text-stone-600'>
+                    <span class='font-semibold text-stone-800'>{completedStudies()}</span>
+                    <span class='text-stone-400'> / {totalStudies()}</span> studies completed
+                  </p>
+                </div>
+              </div>
+
+              {/* Recent Activity */}
+              <div
+                class='rounded-2xl border border-stone-200/60 bg-white p-6'
+                style='animation: fade-up 0.6s ease-out 400ms backwards'
+              >
+                <h3 class='mb-4 text-sm font-medium tracking-wide text-stone-400 uppercase'>
+                  Recent Activity
+                </h3>
+                <div class='divide-y divide-stone-100'>
+                  <For each={mockActivity}>{activity => <ActivityItem activity={activity} />}</For>
+                </div>
+              </div>
+
+              {/* Quick Actions */}
+              <div
+                class='rounded-2xl border border-stone-200/60 bg-white p-6'
+                style='animation: fade-up 0.6s ease-out 500ms backwards'
+              >
+                <h3 class='mb-4 text-sm font-medium tracking-wide text-stone-400 uppercase'>
+                  Quick Start
+                </h3>
+                <div class='space-y-2'>
+                  <button class='flex w-full items-center gap-3 rounded-xl p-3 text-left transition-colors hover:bg-stone-50'>
+                    <div class='flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600'>
+                      <VsBeaker class='h-4 w-4' />
+                    </div>
+                    <div>
+                      <p class='text-sm font-medium text-stone-800'>ROBINS-I Appraisal</p>
+                      <p class='text-xs text-stone-500'>Risk of bias for non-randomized studies</p>
+                    </div>
+                  </button>
+                  <button class='flex w-full items-center gap-3 rounded-xl p-3 text-left transition-colors hover:bg-stone-50'>
+                    <div class='flex h-9 w-9 items-center justify-center rounded-lg bg-amber-50 text-amber-600'>
+                      <FiBarChart2 class='h-4 w-4' />
+                    </div>
+                    <div>
+                      <p class='text-sm font-medium text-stone-800'>AMSTAR 2 Appraisal</p>
+                      <p class='text-xs text-stone-500'>
+                        Quality assessment for systematic reviews
+                      </p>
+                    </div>
+                  </button>
+                  <button class='flex w-full items-center gap-3 rounded-xl p-3 text-left transition-colors hover:bg-stone-50'>
+                    <div class='flex h-9 w-9 items-center justify-center rounded-lg bg-violet-50 text-violet-600'>
+                      <FiBook class='h-4 w-4' />
+                    </div>
+                    <div>
+                      <p class='text-sm font-medium text-stone-800'>Learn More</p>
+                      <p class='text-xs text-stone-500'>Documentation and tutorials</p>
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              {/* Collaboration Prompt */}
+              <div
+                class='overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-6 text-white'
+                style='animation: fade-up 0.6s ease-out 600ms backwards'
+              >
+                <div class='mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-white/20'>
+                  <FiUsers class='h-5 w-5' />
+                </div>
+                <h3 class='mb-2 text-lg font-semibold'>Invite Collaborators</h3>
+                <p class='mb-4 text-sm text-blue-100'>
+                  Add team members to accelerate your systematic review process.
+                </p>
+                <button class='rounded-lg bg-white px-4 py-2 text-sm font-medium text-blue-600 transition-all hover:bg-blue-50'>
+                  Invite Team
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/mocks/MockIndex.jsx b/packages/web/src/components/mocks/MockIndex.jsx
index d0a24cddc..151e91380 100644
--- a/packages/web/src/components/mocks/MockIndex.jsx
+++ b/packages/web/src/components/mocks/MockIndex.jsx
@@ -18,39 +18,73 @@ export default function MockIndex() {
       <div class='space-y-6'>
         <h1 class='text-2xl font-bold text-gray-900'>Available Mocks</h1>
 
-        {/* Featured: Complete Workflow Mock */}
+        {/* Featured Mocks */}
         <div>
           <h2 class='mb-3 text-lg font-semibold text-gray-700'>Featured</h2>
-          <A
-            href='/mocks/project-view-complete'
-            class='block rounded-lg border-2 border-violet-200 bg-gradient-to-br from-violet-50 to-white p-6 shadow-sm transition-all hover:border-violet-300 hover:shadow-md'
-          >
-            <div class='flex items-start justify-between'>
-              <div>
-                <h3 class='mb-2 text-lg font-semibold text-gray-900'>
-                  ProjectView - Complete Workflow
-                </h3>
-                <p class='mb-3 text-sm text-gray-600'>
-                  Full workflow with tabs for Team, Studies, To Do, Reconcile, Completed, and
-                  Charts. Light-mode dashboard style with progress indicators and clear navigation.
-                </p>
-                <div class='flex flex-wrap gap-2'>
-                  <span class='inline-block rounded-full bg-violet-100 px-3 py-1 text-xs font-medium text-violet-700'>
-                    Light Theme
-                  </span>
-                  <span class='inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
-                    Full Workflow
-                  </span>
-                  <span class='inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700'>
-                    6 Tabs
-                  </span>
+          <div class='grid gap-4'>
+            <A
+              href='/mocks/dashboard'
+              class='block rounded-lg border-2 border-teal-200 bg-gradient-to-br from-teal-50 to-white p-6 shadow-sm transition-all hover:border-teal-300 hover:shadow-md'
+            >
+              <div class='flex items-start justify-between'>
+                <div>
+                  <h3 class='mb-2 text-lg font-semibold text-gray-900'>
+                    Main Dashboard - Academic Observatory
+                  </h3>
+                  <p class='mb-3 text-sm text-gray-600'>
+                    Scientific manuscript meets modern data dashboard. Warm scholarly aesthetic with
+                    Fraunces + Instrument Sans typography, paper-like textures, and teal/cyan
+                    accents. Shows projects, local appraisals, progress, and activity.
+                  </p>
+                  <div class='flex flex-wrap gap-2'>
+                    <span class='inline-block rounded-full bg-teal-100 px-3 py-1 text-xs font-medium text-teal-700'>
+                      Warm Light
+                    </span>
+                    <span class='inline-block rounded-full bg-stone-100 px-3 py-1 text-xs font-medium text-stone-700'>
+                      Academic
+                    </span>
+                    <span class='inline-block rounded-full bg-cyan-100 px-3 py-1 text-xs font-medium text-cyan-700'>
+                      Dashboard
+                    </span>
+                  </div>
                 </div>
+                <span class='rounded-full bg-teal-600 px-3 py-1 text-xs font-medium text-white'>
+                  New
+                </span>
               </div>
-              <span class='rounded-full bg-violet-600 px-3 py-1 text-xs font-medium text-white'>
-                Recommended
-              </span>
-            </div>
-          </A>
+            </A>
+            <A
+              href='/mocks/project-view-complete'
+              class='block rounded-lg border-2 border-violet-200 bg-linear-to-br from-violet-50 to-white p-6 shadow-sm transition-all hover:border-violet-300 hover:shadow-md'
+            >
+              <div class='flex items-start justify-between'>
+                <div>
+                  <h3 class='mb-2 text-lg font-semibold text-gray-900'>
+                    ProjectView - Complete Workflow
+                  </h3>
+                  <p class='mb-3 text-sm text-gray-600'>
+                    Full workflow with tabs for Team, Studies, To Do, Reconcile, Completed, and
+                    Charts. Light-mode dashboard style with progress indicators and clear
+                    navigation.
+                  </p>
+                  <div class='flex flex-wrap gap-2'>
+                    <span class='inline-block rounded-full bg-violet-100 px-3 py-1 text-xs font-medium text-violet-700'>
+                      Light Theme
+                    </span>
+                    <span class='inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                      Full Workflow
+                    </span>
+                    <span class='inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700'>
+                      6 Tabs
+                    </span>
+                  </div>
+                </div>
+                <span class='rounded-full bg-violet-600 px-3 py-1 text-xs font-medium text-white'>
+                  Recommended
+                </span>
+              </div>
+            </A>
+          </div>
         </div>
 
         {/* Add Studies Flow Mocks */}
@@ -178,6 +212,88 @@ export default function MockIndex() {
           </div>
         </div>
 
+        {/* Settings Page Mocks */}
+        <div>
+          <h2 class='mb-3 text-lg font-semibold text-gray-700'>Settings Page Mocks</h2>
+          <p class='mb-4 text-sm text-gray-500'>
+            Different approaches for the settings/preferences page layout with various visual styles
+            and information architecture.
+          </p>
+          <div class='grid gap-4'>
+            <A
+              href='/mocks/settings-combined'
+              class='block rounded-lg border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white p-6 shadow-sm transition-all hover:border-blue-300 hover:shadow-md'
+            >
+              <div class='flex items-start justify-between'>
+                <div>
+                  <h3 class='mb-2 text-lg font-semibold text-gray-900'>
+                    Settings - Combined Profile & Settings
+                  </h3>
+                  <p class='mb-3 text-sm text-gray-600'>
+                    Unified profile and settings in one place. Minimal Swiss style with app's blue
+                    color scheme. Includes profile editing, linked accounts, billing, security, 2FA,
+                    sessions, notifications, and integrations.
+                  </p>
+                  <div class='flex flex-wrap gap-2'>
+                    <span class='inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700'>
+                      App Colors
+                    </span>
+                    <span class='inline-block rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700'>
+                      Sidebar Nav
+                    </span>
+                    <span class='inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                      Profile + Settings
+                    </span>
+                  </div>
+                </div>
+                <span class='rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white'>
+                  Recommended
+                </span>
+              </div>
+            </A>
+
+            <A
+              href='/mocks/settings-bento'
+              class='block rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md'
+            >
+              <h3 class='mb-2 text-lg font-semibold text-gray-900'>Settings - Bento Box Style</h3>
+              <p class='text-sm text-gray-600'>
+                Modern dashboard-inspired bento grid layout with varied card sizes, progress rings,
+                and gradient accents. Apple-inspired aesthetics.
+              </p>
+              <div class='mt-3 flex gap-2'>
+                <span class='inline-block rounded-full bg-violet-100 px-3 py-1 text-xs font-medium text-violet-700'>
+                  Grid Layout
+                </span>
+                <span class='inline-block rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700'>
+                  Modern
+                </span>
+              </div>
+            </A>
+
+            <A
+              href='/mocks/settings-minimal'
+              class='block rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md'
+            >
+              <h3 class='mb-2 text-lg font-semibold text-gray-900'>
+                Settings - Minimal Swiss Style
+              </h3>
+              <p class='text-sm text-gray-600'>
+                Clean, typographic, understated elegance with strong hierarchy, generous whitespace,
+                and sidebar navigation. Dieter Rams-inspired.
+              </p>
+              <div class='mt-3 flex gap-2'>
+                <span class='inline-block rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-700'>
+                  Sidebar Nav
+                </span>
+                <span class='inline-block rounded-full bg-stone-100 px-3 py-1 text-xs font-medium text-stone-700'>
+                  Minimal
+                </span>
+              </div>
+            </A>
+          </div>
+        </div>
+
         {/* Other Mocks */}
         <div>
           <h2 class='mb-3 text-lg font-semibold text-gray-700'>Other Mocks</h2>
diff --git a/packages/web/src/components/mocks/MockRouter.jsx b/packages/web/src/components/mocks/MockRouter.jsx
new file mode 100644
index 000000000..010045a9a
--- /dev/null
+++ b/packages/web/src/components/mocks/MockRouter.jsx
@@ -0,0 +1,59 @@
+import { lazy } from 'solid-js';
+import { Route } from '@solidjs/router';
+
+// MockIndex loads immediately (it's the index page)
+import MockIndex from './MockIndex.jsx';
+
+export default function MockRouter() {
+  // Lazy-load pages inline so imports only execute when route matches
+  return (
+    <>
+      <Route path='/mocks' component={MockIndex} />
+      <Route
+        path='/mocks/project-view-editorial'
+        component={lazy(() => import('./ProjectViewEditorial.jsx'))}
+      />
+      <Route
+        path='/mocks/project-view-dashboard'
+        component={lazy(() => import('./ProjectViewDashboard.jsx'))}
+      />
+      <Route
+        path='/mocks/project-view-kanban'
+        component={lazy(() => import('./ProjectViewKanban.jsx'))}
+      />
+      <Route
+        path='/mocks/project-view-complete'
+        component={lazy(() => import('./ProjectViewComplete.jsx'))}
+      />
+      <Route
+        path='/mocks/add-studies-wizard'
+        component={lazy(() => import('./AddStudiesWizard.jsx'))}
+      />
+      <Route
+        path='/mocks/add-studies-panel'
+        component={lazy(() => import('./AddStudiesPanel.jsx'))}
+      />
+      <Route
+        path='/mocks/add-studies-inline'
+        component={lazy(() => import('./AddStudiesInline.jsx'))}
+      />
+      <Route
+        path='/mocks/settings-bento'
+        component={lazy(() => import('./SettingsMockBento.jsx'))}
+      />
+      <Route
+        path='/mocks/settings-minimal'
+        component={lazy(() => import('./SettingsMockMinimal.jsx'))}
+      />
+      <Route
+        path='/mocks/settings-combined'
+        component={lazy(() => import('./SettingsMockCombined.jsx'))}
+      />
+      <Route path='/mocks/dashboard' component={lazy(() => import('./DashboardMock.jsx'))} />
+      <Route
+        path='/mocks/reactivity-example'
+        component={lazy(() => import('./ReactivePropsDemo.jsx'))}
+      />
+    </>
+  );
+}
diff --git a/packages/web/src/components/mocks/MockRoutes.jsx b/packages/web/src/components/mocks/MockRoutes.jsx
new file mode 100644
index 000000000..1aaad8136
--- /dev/null
+++ b/packages/web/src/components/mocks/MockRoutes.jsx
@@ -0,0 +1,43 @@
+import { lazy } from 'solid-js';
+import { Route } from '@solidjs/router';
+
+// MockIndex loads immediately (it's the landing page for mocks)
+import MockIndex from './MockIndex.jsx';
+
+// Lazy-load all mock page components
+const ProjectViewEditorial = lazy(() => import('./ProjectViewEditorial.jsx'));
+const ProjectViewDashboard = lazy(() => import('./ProjectViewDashboard.jsx'));
+const ProjectViewKanban = lazy(() => import('./ProjectViewKanban.jsx'));
+const ProjectViewComplete = lazy(() => import('./ProjectViewComplete.jsx'));
+const AddStudiesWizard = lazy(() => import('./AddStudiesWizard.jsx'));
+const AddStudiesPanel = lazy(() => import('./AddStudiesPanel.jsx'));
+const AddStudiesInline = lazy(() => import('./AddStudiesInline.jsx'));
+const SettingsMockBento = lazy(() => import('./SettingsMockBento.jsx'));
+const SettingsMockMinimal = lazy(() => import('./SettingsMockMinimal.jsx'));
+const SettingsMockCombined = lazy(() => import('./SettingsMockCombined.jsx'));
+const DashboardMock = lazy(() => import('./DashboardMock.jsx'));
+const ReactivePropsDemo = lazy(() => import('./ReactivePropsDemo.jsx'));
+
+/**
+ * Mock routes - returns Route elements for the /mocks/* path.
+ * This entire module is lazy-loaded when /mocks/* is first visited.
+ */
+export default function MockRoutes() {
+  return (
+    <>
+      <Route path='/' component={MockIndex} />
+      <Route path='/project-view-editorial' component={ProjectViewEditorial} />
+      <Route path='/project-view-dashboard' component={ProjectViewDashboard} />
+      <Route path='/project-view-kanban' component={ProjectViewKanban} />
+      <Route path='/project-view-complete' component={ProjectViewComplete} />
+      <Route path='/add-studies-wizard' component={AddStudiesWizard} />
+      <Route path='/add-studies-panel' component={AddStudiesPanel} />
+      <Route path='/add-studies-inline' component={AddStudiesInline} />
+      <Route path='/settings-bento' component={SettingsMockBento} />
+      <Route path='/settings-minimal' component={SettingsMockMinimal} />
+      <Route path='/settings-combined' component={SettingsMockCombined} />
+      <Route path='/dashboard' component={DashboardMock} />
+      <Route path='/reactivity-example' component={ReactivePropsDemo} />
+    </>
+  );
+}
diff --git a/packages/web/src/components/mocks/ReactivePropsDemo.jsx b/packages/web/src/components/mocks/ReactivePropsDemo.jsx
new file mode 100644
index 000000000..13aa02973
--- /dev/null
+++ b/packages/web/src/components/mocks/ReactivePropsDemo.jsx
@@ -0,0 +1,185 @@
+/**
+ * Demonstrates SolidJS reactive store access pattern.
+ *
+ * Key patterns:
+ * - Import stores directly (no prop drilling)
+ * - Access store data via getter functions
+ * - Use createMemo for derived/computed values
+ * - Props are only for local config (projectId), not shared state
+ */
+
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import { createStore, produce } from 'solid-js/store';
+
+// ============================================
+// Fake store (normally in @/stores/someStore.js)
+// ============================================
+const [store, setStore] = createStore({
+  projects: {
+    'proj-1': { title: 'Project Alpha', connected: true },
+    'proj-2': { title: 'Project Beta', connected: true },
+  },
+  studies: {
+    'proj-1': [
+      { id: '1', title: 'Study A', status: 'completed' },
+      { id: '2', title: 'Study B', status: 'in-progress' },
+    ],
+    'proj-2': [{ id: '3', title: 'Study X', status: 'not-started' }],
+  },
+  counter: 0,
+});
+
+/**
+ * Get a project by ID
+ * @param {string} projectId
+ */
+function getProject(projectId) {
+  return store.projects[projectId] || null;
+}
+
+/**
+ * Get studies for a project
+ * @param {string} projectId
+ */
+function getStudies(projectId) {
+  return store.studies[projectId] ?? [];
+}
+
+/**
+ * Get connection state for a project
+ * @param {string} projectId
+ */
+function getConnectionState(projectId) {
+  return { connected: store.projects[projectId]?.connected ?? false };
+}
+
+/**
+ * Get counter value
+ */
+function getCounter() {
+  return store.counter;
+}
+
+// Actions
+function incrementCounter() {
+  setStore('counter', c => c + 1);
+}
+
+function addStudy(projectId, study) {
+  setStore(
+    produce(s => {
+      s.studies[projectId].push(study);
+    }),
+  );
+}
+
+const fakeStore = {
+  getProject,
+  getStudies,
+  getConnectionState,
+  getCounter,
+  incrementCounter,
+  addStudy,
+};
+
+// ============================================
+// Demo wrapper with controls
+// ============================================
+export default function ReactivePropsDemo() {
+  const [projectId, setProjectId] = createSignal('proj-1');
+  let intervalId;
+
+  onMount(() => {
+    // Auto-increment counter every second to show reactivity
+    intervalId = setInterval(() => fakeStore.incrementCounter(), 1000);
+  });
+
+  onCleanup(() => clearInterval(intervalId));
+
+  const handleAddStudy = () => {
+    const id = crypto.randomUUID();
+    fakeStore.addStudy(projectId(), {
+      id,
+      title: `Study ${fakeStore.getStudies(projectId()).length + 1}`,
+      status: 'not-started',
+    });
+  };
+
+  return (
+    <div class='space-y-4 p-4'>
+      <h1 class='text-lg font-bold'>Reactive Store Demo</h1>
+      <p class='text-sm text-gray-600'>
+        Counter auto-increments. Switch projects to see prop reactivity.
+      </p>
+
+      <div class='flex gap-2'>
+        <button
+          class='rounded px-3 py-1'
+          classList={{
+            'bg-blue-500 text-white': projectId() === 'proj-1',
+            'bg-gray-200': projectId() !== 'proj-1',
+          }}
+          onClick={() => setProjectId('proj-1')}
+        >
+          Project Alpha
+        </button>
+        <button
+          class='rounded px-3 py-1'
+          classList={{
+            'bg-blue-500 text-white': projectId() === 'proj-2',
+            'bg-gray-200': projectId() !== 'proj-2',
+          }}
+          onClick={() => setProjectId('proj-2')}
+        >
+          Project Beta
+        </button>
+        <button class='rounded bg-green-500 px-3 py-1 text-white' onClick={handleAddStudy}>
+          Add Study
+        </button>
+      </div>
+
+      <ProjectView projectId={projectId()} />
+    </div>
+  );
+}
+
+// ============================================
+// Component that reads from store (the pattern)
+// ============================================
+function ProjectView(props) {
+  // Read store data via getter functions - reactive
+  const project = () => fakeStore.getProject(props.projectId);
+  const studies = () => fakeStore.getStudies(props.projectId);
+  const connected = () => fakeStore.getConnectionState(props.projectId).connected;
+  const counter = () => fakeStore.getCounter();
+
+  // Derived values with createMemo (cached, recomputes when dependencies change)
+  const stats = createMemo(() => {
+    const studyList = studies();
+    const total = studyList.length;
+    const completed = studyList.filter(s => s.status === 'completed').length;
+    return { total, completed };
+  });
+
+  // Simple derived value as getter (no caching needed)
+  const hasStudies = () => stats().total > 0;
+
+  return (
+    <div class='rounded border p-4'>
+      <p class='text-sm text-gray-500'>Counter: {counter()}</p>
+
+      <Show when={connected()} fallback={<p>Connecting...</p>}>
+        <h2 class='font-semibold'>{project()?.title ?? 'Untitled'}</h2>
+        <p>
+          Studies: {stats().completed}/{stats().total}
+        </p>
+
+        <Show when={hasStudies()} fallback={<p>No studies yet</p>}>
+          <ul class='list-disc pl-4'>
+            <For each={studies()}>{study => <li>{study.title}</li>}</For>
+          </ul>
+        </Show>
+      </Show>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/mocks/SettingsMockBento.jsx b/packages/web/src/components/mocks/SettingsMockBento.jsx
new file mode 100644
index 000000000..4d3e1ea87
--- /dev/null
+++ b/packages/web/src/components/mocks/SettingsMockBento.jsx
@@ -0,0 +1,489 @@
+/**
+ * Settings Mock - Bento Box Style
+ *
+ * Design Direction: Modern dashboard-inspired bento grid layout.
+ * Uses varied card sizes, soft shadows, and gradient accents.
+ * Inspired by Apple's latest design language and modern SaaS dashboards.
+ */
+
+import { For, Show, createSignal } from 'solid-js';
+import {
+  FiUser,
+  FiCreditCard,
+  FiShield,
+  FiBell,
+  FiLink,
+  FiMonitor,
+  FiMoon,
+  FiSun,
+  FiCheck,
+  FiChevronRight,
+  FiArrowLeft,
+  FiMail,
+  FiCloud,
+  FiHardDrive,
+  FiZap,
+  FiUsers,
+  FiFolder,
+  FiLock,
+  FiSmartphone,
+  FiGlobe,
+} from 'solid-icons/fi';
+
+// Mock data
+const mockUser = {
+  name: 'Dr. Sarah Chen',
+  email: 'sarah.chen@university.edu',
+  avatar: null,
+  initials: 'SC',
+  plan: 'Professional',
+  planColor: 'from-violet-500 to-purple-600',
+};
+
+const mockSubscription = {
+  plan: 'Professional',
+  status: 'active',
+  nextBilling: 'Feb 15, 2025',
+  price: '$29/month',
+};
+
+const mockUsage = {
+  projects: { used: 8, limit: 15 },
+  collaborators: { used: 12, limit: 25 },
+  storage: { used: 2.4, limit: 10, unit: 'GB' },
+};
+
+const mockSessions = [
+  { device: 'MacBook Pro', location: 'San Francisco, US', current: true, lastActive: 'Now' },
+  { device: 'iPhone 15', location: 'San Francisco, US', current: false, lastActive: '2 hours ago' },
+  {
+    device: 'Chrome on Windows',
+    location: 'New York, US',
+    current: false,
+    lastActive: 'Yesterday',
+  },
+];
+
+const mockIntegrations = [
+  { name: 'Google Drive', icon: FiCloud, connected: true, color: 'text-blue-500' },
+  { name: 'Dropbox', icon: FiHardDrive, connected: false, color: 'text-blue-600' },
+  { name: 'Zotero', icon: FiFolder, connected: false, color: 'text-red-500' },
+];
+
+// Reusable card component
+function BentoCard(props) {
+  return (
+    <div
+      class={`group relative overflow-hidden rounded-3xl border border-slate-200/60 bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-lg hover:shadow-slate-200/50 ${props.class || ''}`}
+      style={props.style}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+// Progress ring component
+function ProgressRing(props) {
+  const percentage = () => (props.used / props.limit) * 100;
+  const circumference = 2 * Math.PI * 36;
+  const strokeDashoffset = () => circumference - (percentage() / 100) * circumference;
+
+  return (
+    <div class='relative h-24 w-24'>
+      <svg class='h-24 w-24 -rotate-90' viewBox='0 0 80 80'>
+        <circle cx='40' cy='40' r='36' stroke='#f1f5f9' stroke-width='6' fill='none' />
+        <circle
+          cx='40'
+          cy='40'
+          r='36'
+          stroke={props.color || '#8b5cf6'}
+          stroke-width='6'
+          fill='none'
+          stroke-linecap='round'
+          style={{
+            'stroke-dasharray': `${circumference}`,
+            'stroke-dashoffset': `${strokeDashoffset()}`,
+            transition: 'stroke-dashoffset 0.5s ease-out',
+          }}
+        />
+      </svg>
+      <div class='absolute inset-0 flex flex-col items-center justify-center'>
+        <span class='text-lg font-bold text-slate-900'>{props.used}</span>
+        <span class='text-xs text-slate-400'>/ {props.limit}</span>
+      </div>
+    </div>
+  );
+}
+
+// Toggle switch component
+function Toggle(props) {
+  return (
+    <button
+      onClick={() => props.onChange?.(!props.checked)}
+      class={`relative h-7 w-12 rounded-full transition-colors duration-200 ${
+        props.checked ? 'bg-violet-500' : 'bg-slate-200'
+      }`}
+    >
+      <div
+        class={`absolute top-1 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
+          props.checked ? 'translate-x-6' : 'translate-x-1'
+        }`}
+      />
+    </button>
+  );
+}
+
+export default function SettingsMockBento() {
+  const [darkMode, setDarkMode] = createSignal(false);
+  const [emailNotifications, setEmailNotifications] = createSignal(true);
+  const [projectUpdates, setProjectUpdates] = createSignal(true);
+  const [twoFactorEnabled, setTwoFactorEnabled] = createSignal(false);
+
+  return (
+    <div class='min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50/30'>
+      {/* Header */}
+      <header class='sticky top-0 z-10 border-b border-slate-200/60 bg-white/80 backdrop-blur-xl'>
+        <div class='mx-auto max-w-7xl px-6 py-4'>
+          <div class='flex items-center justify-between'>
+            <div class='flex items-center gap-4'>
+              <button class='flex h-10 w-10 items-center justify-center rounded-xl text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600'>
+                <FiArrowLeft class='h-5 w-5' />
+              </button>
+              <div>
+                <h1 class='text-xl font-semibold text-slate-900'>Settings</h1>
+                <p class='text-sm text-slate-500'>Manage your account and preferences</p>
+              </div>
+            </div>
+            <div class='flex items-center gap-3'>
+              <button
+                class='flex h-10 w-10 items-center justify-center rounded-xl text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600'
+                onClick={() => setDarkMode(!darkMode())}
+              >
+                <Show when={darkMode()} fallback={<FiMoon class='h-5 w-5' />}>
+                  <FiSun class='h-5 w-5' />
+                </Show>
+              </button>
+              <div class='flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-purple-600 text-sm font-medium text-white'>
+                {mockUser.initials}
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main class='mx-auto max-w-7xl px-6 py-8'>
+        {/* Bento Grid */}
+        <div class='grid grid-cols-12 gap-5'>
+          {/* Profile Card - Large */}
+          <BentoCard class='col-span-12 md:col-span-8'>
+            <div class='flex items-start justify-between'>
+              <div class='flex items-center gap-5'>
+                <div class='relative'>
+                  <div class='flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-2xl font-semibold text-white shadow-lg shadow-violet-500/25'>
+                    {mockUser.initials}
+                  </div>
+                  <div class='absolute -right-1 -bottom-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-emerald-500 text-white'>
+                    <FiCheck class='h-3.5 w-3.5' />
+                  </div>
+                </div>
+                <div>
+                  <h2 class='text-xl font-semibold text-slate-900'>{mockUser.name}</h2>
+                  <p class='text-sm text-slate-500'>{mockUser.email}</p>
+                  <div class='mt-2 flex items-center gap-2'>
+                    <span class='inline-flex items-center gap-1 rounded-full bg-violet-100 px-3 py-1 text-xs font-medium text-violet-700'>
+                      <FiZap class='h-3 w-3' />
+                      {mockUser.plan}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <button class='rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50'>
+                Edit Profile
+              </button>
+            </div>
+          </BentoCard>
+
+          {/* Quick Stats Card */}
+          <BentoCard class='col-span-12 md:col-span-4'>
+            <div class='flex h-full flex-col'>
+              <h3 class='mb-4 text-sm font-medium tracking-wide text-slate-400 uppercase'>
+                Quick Stats
+              </h3>
+              <div class='flex flex-1 items-center justify-around'>
+                <div class='text-center'>
+                  <p class='text-3xl font-bold text-slate-900'>{mockUsage.projects.used}</p>
+                  <p class='text-xs text-slate-500'>Projects</p>
+                </div>
+                <div class='h-12 w-px bg-slate-100' />
+                <div class='text-center'>
+                  <p class='text-3xl font-bold text-slate-900'>{mockUsage.collaborators.used}</p>
+                  <p class='text-xs text-slate-500'>Collaborators</p>
+                </div>
+              </div>
+            </div>
+          </BentoCard>
+
+          {/* Subscription Card */}
+          <BentoCard class='col-span-12 md:col-span-4'>
+            <div class='absolute inset-0 bg-gradient-to-br from-violet-500 to-purple-600 opacity-[0.03]' />
+            <div class='relative'>
+              <div class='mb-4 flex items-center justify-between'>
+                <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 text-violet-600'>
+                  <FiCreditCard class='h-5 w-5' />
+                </div>
+                <span class='rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                  Active
+                </span>
+              </div>
+              <h3 class='text-lg font-semibold text-slate-900'>{mockSubscription.plan}</h3>
+              <p class='text-2xl font-bold text-slate-900'>{mockSubscription.price}</p>
+              <p class='mt-1 text-sm text-slate-500'>
+                Next billing: {mockSubscription.nextBilling}
+              </p>
+              <button class='mt-4 w-full rounded-xl bg-slate-900 py-2.5 text-sm font-medium text-white transition-colors hover:bg-slate-800'>
+                Manage Plan
+              </button>
+            </div>
+          </BentoCard>
+
+          {/* Usage Card */}
+          <BentoCard class='col-span-12 md:col-span-4'>
+            <h3 class='mb-4 text-sm font-medium tracking-wide text-slate-400 uppercase'>Usage</h3>
+            <div class='flex items-center justify-around'>
+              <div class='text-center'>
+                <ProgressRing
+                  used={mockUsage.projects.used}
+                  limit={mockUsage.projects.limit}
+                  color='#8b5cf6'
+                />
+                <p class='mt-2 text-xs font-medium text-slate-600'>Projects</p>
+              </div>
+              <div class='text-center'>
+                <ProgressRing
+                  used={mockUsage.collaborators.used}
+                  limit={mockUsage.collaborators.limit}
+                  color='#06b6d4'
+                />
+                <p class='mt-2 text-xs font-medium text-slate-600'>Collaborators</p>
+              </div>
+            </div>
+          </BentoCard>
+
+          {/* Storage Card */}
+          <BentoCard class='col-span-12 md:col-span-4'>
+            <div class='mb-4 flex items-center justify-between'>
+              <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-100 text-cyan-600'>
+                <FiHardDrive class='h-5 w-5' />
+              </div>
+              <span class='text-sm text-slate-500'>
+                {mockUsage.storage.used} / {mockUsage.storage.limit} {mockUsage.storage.unit}
+              </span>
+            </div>
+            <h3 class='mb-3 text-sm font-medium text-slate-700'>Storage</h3>
+            <div class='h-3 overflow-hidden rounded-full bg-slate-100'>
+              <div
+                class='h-full rounded-full bg-gradient-to-r from-cyan-500 to-cyan-400 transition-all'
+                style={{
+                  width: `${(mockUsage.storage.used / mockUsage.storage.limit) * 100}%`,
+                }}
+              />
+            </div>
+            <p class='mt-2 text-xs text-slate-500'>
+              {((mockUsage.storage.used / mockUsage.storage.limit) * 100).toFixed(0)}% used
+            </p>
+          </BentoCard>
+
+          {/* Security Card - Full width */}
+          <BentoCard class='col-span-12'>
+            <div class='mb-6 flex items-center justify-between'>
+              <div class='flex items-center gap-3'>
+                <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-amber-600'>
+                  <FiShield class='h-5 w-5' />
+                </div>
+                <div>
+                  <h3 class='font-semibold text-slate-900'>Security</h3>
+                  <p class='text-sm text-slate-500'>Manage your account security settings</p>
+                </div>
+              </div>
+            </div>
+            <div class='grid gap-4 md:grid-cols-3'>
+              {/* Password */}
+              <div class='rounded-2xl border border-slate-100 bg-slate-50/50 p-5'>
+                <div class='mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-slate-600 shadow-sm'>
+                  <FiLock class='h-5 w-5' />
+                </div>
+                <h4 class='font-medium text-slate-900'>Password</h4>
+                <p class='mt-1 text-sm text-slate-500'>Last changed 30 days ago</p>
+                <button class='mt-3 text-sm font-medium text-violet-600 hover:text-violet-700'>
+                  Change Password
+                </button>
+              </div>
+
+              {/* Two-Factor */}
+              <div class='rounded-2xl border border-slate-100 bg-slate-50/50 p-5'>
+                <div class='mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-slate-600 shadow-sm'>
+                  <FiSmartphone class='h-5 w-5' />
+                </div>
+                <h4 class='font-medium text-slate-900'>Two-Factor Auth</h4>
+                <p class='mt-1 text-sm text-slate-500'>
+                  {twoFactorEnabled() ? 'Enabled' : 'Not enabled'}
+                </p>
+                <button
+                  class='mt-3 text-sm font-medium text-violet-600 hover:text-violet-700'
+                  onClick={() => setTwoFactorEnabled(!twoFactorEnabled())}
+                >
+                  {twoFactorEnabled() ? 'Manage' : 'Enable'}
+                </button>
+              </div>
+
+              {/* Sessions */}
+              <div class='rounded-2xl border border-slate-100 bg-slate-50/50 p-5'>
+                <div class='mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-slate-600 shadow-sm'>
+                  <FiMonitor class='h-5 w-5' />
+                </div>
+                <h4 class='font-medium text-slate-900'>Active Sessions</h4>
+                <p class='mt-1 text-sm text-slate-500'>{mockSessions.length} devices</p>
+                <button class='mt-3 text-sm font-medium text-violet-600 hover:text-violet-700'>
+                  View All
+                </button>
+              </div>
+            </div>
+          </BentoCard>
+
+          {/* Notifications Card */}
+          <BentoCard class='col-span-12 md:col-span-6'>
+            <div class='mb-5 flex items-center gap-3'>
+              <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-rose-100 text-rose-600'>
+                <FiBell class='h-5 w-5' />
+              </div>
+              <h3 class='font-semibold text-slate-900'>Notifications</h3>
+            </div>
+            <div class='space-y-4'>
+              <div class='flex items-center justify-between'>
+                <div>
+                  <p class='font-medium text-slate-900'>Email Notifications</p>
+                  <p class='text-sm text-slate-500'>Receive important updates via email</p>
+                </div>
+                <Toggle checked={emailNotifications()} onChange={setEmailNotifications} />
+              </div>
+              <div class='h-px bg-slate-100' />
+              <div class='flex items-center justify-between'>
+                <div>
+                  <p class='font-medium text-slate-900'>Project Updates</p>
+                  <p class='text-sm text-slate-500'>Notifications about project changes</p>
+                </div>
+                <Toggle checked={projectUpdates()} onChange={setProjectUpdates} />
+              </div>
+            </div>
+          </BentoCard>
+
+          {/* Integrations Card */}
+          <BentoCard class='col-span-12 md:col-span-6'>
+            <div class='mb-5 flex items-center justify-between'>
+              <div class='flex items-center gap-3'>
+                <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 text-blue-600'>
+                  <FiLink class='h-5 w-5' />
+                </div>
+                <h3 class='font-semibold text-slate-900'>Integrations</h3>
+              </div>
+              <button class='text-sm font-medium text-violet-600 hover:text-violet-700'>
+                See all
+              </button>
+            </div>
+            <div class='space-y-3'>
+              <For each={mockIntegrations}>
+                {integration => {
+                  const Icon = integration.icon;
+                  return (
+                    <div class='flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/50 p-4'>
+                      <div class='flex items-center gap-3'>
+                        <div
+                          class={`flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-sm ${integration.color}`}
+                        >
+                          <Icon class='h-5 w-5' />
+                        </div>
+                        <span class='font-medium text-slate-900'>{integration.name}</span>
+                      </div>
+                      <Show
+                        when={integration.connected}
+                        fallback={
+                          <button class='rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-100'>
+                            Connect
+                          </button>
+                        }
+                      >
+                        <span class='flex items-center gap-1 text-sm text-emerald-600'>
+                          <FiCheck class='h-4 w-4' />
+                          Connected
+                        </span>
+                      </Show>
+                    </div>
+                  );
+                }}
+              </For>
+            </div>
+          </BentoCard>
+
+          {/* Active Sessions Card */}
+          <BentoCard class='col-span-12'>
+            <div class='mb-5 flex items-center justify-between'>
+              <div class='flex items-center gap-3'>
+                <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600'>
+                  <FiGlobe class='h-5 w-5' />
+                </div>
+                <div>
+                  <h3 class='font-semibold text-slate-900'>Active Sessions</h3>
+                  <p class='text-sm text-slate-500'>Devices currently logged into your account</p>
+                </div>
+              </div>
+              <button class='text-sm font-medium text-red-600 hover:text-red-700'>
+                Sign out all devices
+              </button>
+            </div>
+            <div class='space-y-3'>
+              <For each={mockSessions}>
+                {session => (
+                  <div class='flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/50 p-4'>
+                    <div class='flex items-center gap-4'>
+                      <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-white text-slate-600 shadow-sm'>
+                        <FiMonitor class='h-5 w-5' />
+                      </div>
+                      <div>
+                        <div class='flex items-center gap-2'>
+                          <p class='font-medium text-slate-900'>{session.device}</p>
+                          <Show when={session.current}>
+                            <span class='rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700'>
+                              Current
+                            </span>
+                          </Show>
+                        </div>
+                        <p class='text-sm text-slate-500'>
+                          {session.location} - {session.lastActive}
+                        </p>
+                      </div>
+                    </div>
+                    <Show when={!session.current}>
+                      <button class='rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600'>
+                        Revoke
+                      </button>
+                    </Show>
+                  </div>
+                )}
+              </For>
+            </div>
+          </BentoCard>
+        </div>
+      </main>
+
+      {/* Embedded Styles */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
+
+        body {
+          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/mocks/SettingsMockCombined.jsx b/packages/web/src/components/mocks/SettingsMockCombined.jsx
new file mode 100644
index 000000000..ae55462a1
--- /dev/null
+++ b/packages/web/src/components/mocks/SettingsMockCombined.jsx
@@ -0,0 +1,807 @@
+/**
+ * Settings Mock - Combined Profile & Settings
+ *
+ * Design Direction: Clean, minimal Swiss style with app's blue color scheme.
+ * Combines Profile and Settings into one unified experience.
+ * Uses sidebar navigation with blue accents and clear hierarchy.
+ */
+
+import { For, Show, createSignal } from 'solid-js';
+import {
+  FiUser,
+  FiCreditCard,
+  FiShield,
+  FiBell,
+  FiLink,
+  FiMonitor,
+  FiCheck,
+  FiArrowRight,
+  FiCamera,
+  FiMail,
+  FiKey,
+  FiSmartphone,
+  FiLogOut,
+  FiChevronRight,
+  FiCloud,
+  FiX,
+  FiAlertCircle,
+  FiInfo,
+  FiArrowLeft,
+} from 'solid-icons/fi';
+
+// Mock data from actual app structure
+const mockUser = {
+  name: 'Dr. Sarah Chen',
+  firstName: 'Sarah',
+  lastName: 'Chen',
+  email: 'sarah.chen@university.edu',
+  emailVerified: true,
+  persona: 'researcher',
+  createdAt: '2024-12-15',
+  image: null,
+};
+
+const PERSONAS = [
+  { id: 'researcher', label: 'Researcher' },
+  { id: 'student', label: 'Student' },
+  { id: 'librarian', label: 'Librarian' },
+  { id: 'clinician', label: 'Clinician' },
+  { id: 'other', label: 'Other' },
+];
+
+const mockPlan = {
+  name: 'Professional',
+  status: 'active',
+  price: 29,
+  interval: 'month',
+  nextBilling: 'February 15, 2025',
+  features: ['15 Projects', '25 Collaborators', '10 GB Storage', 'Priority Support'],
+};
+
+const mockUsage = {
+  projects: { used: 8, limit: 15 },
+  collaborators: { used: 12, limit: 25 },
+  storage: { used: 2.4, limit: 10, unit: 'GB' },
+};
+
+const mockLinkedAccounts = [
+  { id: '1', providerId: 'google', email: 'sarah.chen@gmail.com' },
+  { id: '2', providerId: 'orcid', orcidId: '0000-0002-1234-5678' },
+];
+
+const mockSessions = [
+  { id: 1, device: 'MacBook Pro', browser: 'Safari', location: 'San Francisco, US', current: true },
+  { id: 2, device: 'iPhone 15', browser: 'Safari', location: 'San Francisco, US', current: false },
+  { id: 3, device: 'Windows PC', browser: 'Chrome', location: 'New York, US', current: false },
+];
+
+const mockNotificationSettings = [
+  {
+    id: 'email',
+    title: 'Email Notifications',
+    description: 'Receive important updates via email',
+    enabled: true,
+  },
+  {
+    id: 'projects',
+    title: 'Project Updates',
+    description: 'When collaborators make changes',
+    enabled: true,
+  },
+  {
+    id: 'mentions',
+    title: 'Mentions',
+    description: 'When someone mentions you in a comment',
+    enabled: false,
+  },
+];
+
+const navItems = [
+  { id: 'profile', label: 'Profile', icon: FiUser },
+  { id: 'billing', label: 'Billing', icon: FiCreditCard },
+  { id: 'security', label: 'Security', icon: FiShield },
+  { id: 'notifications', label: 'Notifications', icon: FiBell },
+  { id: 'integrations', label: 'Integrations', icon: FiLink },
+];
+
+// Toggle switch with blue accent
+function Toggle(props) {
+  return (
+    <button
+      onClick={() => props.onChange?.(!props.checked)}
+      class={`relative h-6 w-11 rounded-full transition-colors duration-200 ${
+        props.checked ? 'bg-blue-600' : 'bg-gray-200'
+      }`}
+    >
+      <div
+        class={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
+          props.checked ? 'left-0.5' : 'left-0.5'
+        }`}
+        style={{ transform: props.checked ? 'translateX(22px)' : 'translateX(0)' }}
+      />
+    </button>
+  );
+}
+
+// Section component
+function Section(props) {
+  return (
+    <section class='border-t border-gray-100 py-8 first:border-t-0 first:pt-0'>
+      <Show when={props.title}>
+        <h2 class='mb-1 text-xs font-medium tracking-widest text-gray-400 uppercase'>
+          {props.title}
+        </h2>
+      </Show>
+      <Show when={props.subtitle}>
+        <p class='mb-6 text-sm text-gray-500'>{props.subtitle}</p>
+      </Show>
+      {props.children}
+    </section>
+  );
+}
+
+// Setting row component
+function SettingRow(props) {
+  return (
+    <div class='flex items-center justify-between border-b border-gray-100 py-4 last:border-b-0'>
+      <div class='flex-1'>
+        <h3 class='font-medium text-gray-900'>{props.title}</h3>
+        <Show when={props.description}>
+          <p class='mt-0.5 text-sm text-gray-500'>{props.description}</p>
+        </Show>
+      </div>
+      <div class='ml-4'>{props.children}</div>
+    </div>
+  );
+}
+
+// Provider card for linked accounts
+function ProviderCard(props) {
+  const providerInfo = {
+    google: { name: 'Google', icon: '/logos/google.svg' },
+    orcid: { name: 'ORCID', icon: '/logos/orcid.svg' },
+  };
+
+  const info = providerInfo[props.account.providerId] || { name: props.account.providerId };
+
+  return (
+    <div class='flex items-center justify-between rounded-xl border border-gray-100 bg-gray-50/50 p-4'>
+      <div class='flex items-center gap-4'>
+        <div class='flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm'>
+          <Show when={info.icon} fallback={<FiMail class='h-5 w-5 text-gray-600' />}>
+            <img src={info.icon} alt={info.name} class='h-5 w-5' />
+          </Show>
+        </div>
+        <div>
+          <p class='font-medium text-gray-900'>{info.name}</p>
+          <p class='text-sm text-gray-500'>
+            {props.account.email || props.account.orcidId || 'Connected'}
+          </p>
+        </div>
+      </div>
+      <button class='text-sm font-medium text-red-600 hover:text-red-700'>Unlink</button>
+    </div>
+  );
+}
+
+export default function SettingsMockCombined() {
+  const [activeNav, setActiveNav] = createSignal('profile');
+  const [notifications, setNotifications] = createSignal(
+    mockNotificationSettings.reduce((acc, n) => ({ ...acc, [n.id]: n.enabled }), {}),
+  );
+  const [isEditingName, setIsEditingName] = createSignal(false);
+  const [isEditingPersona, setIsEditingPersona] = createSignal(false);
+  const [googleDriveConnected, setGoogleDriveConnected] = createSignal(true);
+  const [twoFactorEnabled, setTwoFactorEnabled] = createSignal(false);
+
+  const toggleNotification = id => {
+    setNotifications(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const userInitials = () => {
+    return `${mockUser.firstName.charAt(0)}${mockUser.lastName.charAt(0)}`;
+  };
+
+  const formatDate = dateString => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div class='min-h-screen bg-blue-50/30'>
+      {/* Header */}
+      <header class='border-b border-gray-200 bg-white'>
+        <div class='mx-auto flex max-w-6xl items-center justify-between px-8 py-4'>
+          <div class='flex items-center gap-4'>
+            <button class='flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
+              <FiArrowLeft class='h-5 w-5' />
+            </button>
+            <div class='flex items-center gap-3'>
+              <span class='text-xl font-semibold tracking-tight text-gray-900'>CoRATES</span>
+              <span class='text-gray-300'>/</span>
+              <span class='text-gray-600'>Settings</span>
+            </div>
+          </div>
+          <div class='flex items-center gap-4'>
+            <span class='text-sm text-gray-600'>{mockUser.email}</span>
+            <div class='flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 text-sm font-medium text-white'>
+              {userInitials()}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div class='mx-auto flex max-w-6xl'>
+        {/* Sidebar Navigation */}
+        <nav class='w-56 shrink-0 border-r border-gray-200 bg-white py-6 pr-6'>
+          <ul class='space-y-1'>
+            <For each={navItems}>
+              {item => {
+                const Icon = item.icon;
+                return (
+                  <li>
+                    <button
+                      onClick={() => setActiveNav(item.id)}
+                      class={`flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors ${
+                        activeNav() === item.id ?
+                          'bg-blue-600 text-white'
+                        : 'text-gray-600 hover:bg-gray-100'
+                      }`}
+                    >
+                      <Icon class='h-4 w-4' />
+                      {item.label}
+                    </button>
+                  </li>
+                );
+              }}
+            </For>
+          </ul>
+
+          <div class='mt-6 border-t border-gray-200 pt-6'>
+            <button class='flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50'>
+              <FiLogOut class='h-4 w-4' />
+              Sign Out
+            </button>
+          </div>
+        </nav>
+
+        {/* Main Content */}
+        <main class='flex-1 bg-white px-10 py-8'>
+          {/* Profile Section */}
+          <Show when={activeNav() === 'profile'}>
+            <div class='mb-6'>
+              <h1 class='text-2xl font-semibold text-gray-900'>Profile</h1>
+              <p class='mt-1 text-gray-500'>Manage your personal information</p>
+            </div>
+
+            <Section>
+              <div class='flex items-start gap-8'>
+                {/* Avatar */}
+                <div class='group relative'>
+                  <div class='flex h-24 w-24 items-center justify-center rounded-full bg-blue-600 text-2xl font-semibold text-white'>
+                    {userInitials()}
+                  </div>
+                  <button class='absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'>
+                    <FiCamera class='h-6 w-6 text-white' />
+                  </button>
+                </div>
+
+                {/* Info */}
+                <div class='flex-1'>
+                  <Show
+                    when={!isEditingName()}
+                    fallback={
+                      <div class='grid grid-cols-2 gap-6'>
+                        <div>
+                          <label class='mb-2 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                            First Name
+                          </label>
+                          <input
+                            type='text'
+                            value={mockUser.firstName}
+                            class='w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
+                          />
+                        </div>
+                        <div>
+                          <label class='mb-2 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                            Last Name
+                          </label>
+                          <input
+                            type='text'
+                            value={mockUser.lastName}
+                            class='w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
+                          />
+                        </div>
+                        <div class='col-span-2 flex gap-3'>
+                          <button
+                            onClick={() => setIsEditingName(false)}
+                            class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+                          >
+                            Save
+                          </button>
+                          <button
+                            onClick={() => setIsEditingName(false)}
+                            class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div class='space-y-4'>
+                      <div class='flex items-start justify-between'>
+                        <div class='grid grid-cols-2 gap-6'>
+                          <div>
+                            <label class='mb-1 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                              First Name
+                            </label>
+                            <p class='text-gray-900'>{mockUser.firstName}</p>
+                          </div>
+                          <div>
+                            <label class='mb-1 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                              Last Name
+                            </label>
+                            <p class='text-gray-900'>{mockUser.lastName}</p>
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => setIsEditingName(true)}
+                          class='text-sm font-medium text-blue-600 hover:text-blue-700'
+                        >
+                          Edit
+                        </button>
+                      </div>
+
+                      <div class='border-t border-gray-100 pt-4'>
+                        <div class='flex items-start justify-between'>
+                          <div>
+                            <label class='mb-1 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                              Persona
+                            </label>
+                            <Show
+                              when={!isEditingPersona()}
+                              fallback={
+                                <div class='flex items-center gap-3'>
+                                  <select class='rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'>
+                                    <For each={PERSONAS}>
+                                      {p => (
+                                        <option value={p.id} selected={p.id === mockUser.persona}>
+                                          {p.label}
+                                        </option>
+                                      )}
+                                    </For>
+                                  </select>
+                                  <button
+                                    onClick={() => setIsEditingPersona(false)}
+                                    class='rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700'
+                                  >
+                                    Save
+                                  </button>
+                                  <button
+                                    onClick={() => setIsEditingPersona(false)}
+                                    class='text-sm text-gray-500 hover:text-gray-700'
+                                  >
+                                    Cancel
+                                  </button>
+                                </div>
+                              }
+                            >
+                              <div class='flex items-center gap-2'>
+                                <p class='text-gray-900'>
+                                  {PERSONAS.find(p => p.id === mockUser.persona)?.label ||
+                                    'Not set'}
+                                </p>
+                                <span class='rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700'>
+                                  {PERSONAS.find(p => p.id === mockUser.persona)?.label}
+                                </span>
+                              </div>
+                            </Show>
+                          </div>
+                          <Show when={!isEditingPersona()}>
+                            <button
+                              onClick={() => setIsEditingPersona(true)}
+                              class='text-sm font-medium text-blue-600 hover:text-blue-700'
+                            >
+                              Edit
+                            </button>
+                          </Show>
+                        </div>
+                      </div>
+
+                      <div class='border-t border-gray-100 pt-4'>
+                        <label class='mb-1 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                          Email
+                        </label>
+                        <div class='flex items-center gap-2'>
+                          <p class='text-gray-900'>{mockUser.email}</p>
+                          <Show when={mockUser.emailVerified}>
+                            <span class='flex items-center gap-1 rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700'>
+                              <FiCheck class='h-3 w-3' />
+                              Verified
+                            </span>
+                          </Show>
+                        </div>
+                      </div>
+
+                      <div class='border-t border-gray-100 pt-4'>
+                        <label class='mb-1 block text-xs font-medium tracking-wide text-gray-400 uppercase'>
+                          Member Since
+                        </label>
+                        <p class='text-gray-900'>{formatDate(mockUser.createdAt)}</p>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+              </div>
+            </Section>
+
+            <Section title='Danger Zone'>
+              <div class='rounded-xl border border-red-200 bg-red-50/50 p-5'>
+                <div class='flex items-center justify-between'>
+                  <div>
+                    <h3 class='font-medium text-red-900'>Delete Account</h3>
+                    <p class='text-sm text-red-600'>
+                      Permanently delete your account and all associated data
+                    </p>
+                  </div>
+                  <button class='rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50'>
+                    Delete Account
+                  </button>
+                </div>
+              </div>
+            </Section>
+          </Show>
+
+          {/* Billing Section */}
+          <Show when={activeNav() === 'billing'}>
+            <div class='mb-6'>
+              <h1 class='text-2xl font-semibold text-gray-900'>Billing</h1>
+              <p class='mt-1 text-gray-500'>Manage your subscription and payments</p>
+            </div>
+
+            <Section>
+              <div class='flex gap-6'>
+                {/* Plan Card */}
+                <div class='flex-1 rounded-2xl border border-gray-200 p-6'>
+                  <div class='mb-4 flex items-start justify-between'>
+                    <div>
+                      <p class='text-xs font-medium tracking-widest text-gray-400 uppercase'>
+                        Current Plan
+                      </p>
+                      <h2 class='mt-1 text-2xl font-semibold text-gray-900'>{mockPlan.name}</h2>
+                    </div>
+                    <span class='rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700'>
+                      Active
+                    </span>
+                  </div>
+
+                  <div class='mb-4'>
+                    <span class='text-3xl font-bold text-gray-900'>${mockPlan.price}</span>
+                    <span class='text-gray-500'>/{mockPlan.interval}</span>
+                  </div>
+
+                  <p class='mb-4 text-sm text-gray-500'>Next billing: {mockPlan.nextBilling}</p>
+
+                  <ul class='space-y-2'>
+                    <For each={mockPlan.features}>
+                      {feature => (
+                        <li class='flex items-center gap-2 text-sm text-gray-600'>
+                          <FiCheck class='h-4 w-4 text-green-600' />
+                          {feature}
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </div>
+
+                {/* Quick Actions */}
+                <div class='flex w-56 flex-col gap-3'>
+                  <button class='flex items-center justify-between rounded-xl bg-blue-600 px-5 py-4 text-left text-white transition-colors hover:bg-blue-700'>
+                    <span class='font-medium'>Change Plan</span>
+                    <FiArrowRight class='h-4 w-4' />
+                  </button>
+                  <button class='flex items-center justify-between rounded-xl border border-gray-200 px-5 py-4 text-left text-gray-900 transition-colors hover:bg-gray-50'>
+                    <span class='font-medium'>Payment Method</span>
+                    <FiCreditCard class='h-4 w-4 text-gray-400' />
+                  </button>
+                  <button class='flex items-center justify-between rounded-xl border border-gray-200 px-5 py-4 text-left text-gray-900 transition-colors hover:bg-gray-50'>
+                    <span class='font-medium'>Billing History</span>
+                    <FiChevronRight class='h-4 w-4 text-gray-400' />
+                  </button>
+                </div>
+              </div>
+            </Section>
+
+            <Section title='Usage This Period'>
+              <div class='grid grid-cols-3 gap-4'>
+                <div class='rounded-xl border border-gray-100 bg-gray-50/50 p-5'>
+                  <p class='text-xs font-medium tracking-widest text-gray-400 uppercase'>
+                    Projects
+                  </p>
+                  <p class='mt-2 text-3xl font-bold text-gray-900'>
+                    {mockUsage.projects.used}
+                    <span class='text-lg font-normal text-gray-400'>
+                      /{mockUsage.projects.limit}
+                    </span>
+                  </p>
+                  <div class='mt-3 h-1.5 overflow-hidden rounded-full bg-gray-200'>
+                    <div
+                      class='h-full rounded-full bg-blue-600 transition-all'
+                      style={{
+                        width: `${(mockUsage.projects.used / mockUsage.projects.limit) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+                <div class='rounded-xl border border-gray-100 bg-gray-50/50 p-5'>
+                  <p class='text-xs font-medium tracking-widest text-gray-400 uppercase'>
+                    Collaborators
+                  </p>
+                  <p class='mt-2 text-3xl font-bold text-gray-900'>
+                    {mockUsage.collaborators.used}
+                    <span class='text-lg font-normal text-gray-400'>
+                      /{mockUsage.collaborators.limit}
+                    </span>
+                  </p>
+                  <div class='mt-3 h-1.5 overflow-hidden rounded-full bg-gray-200'>
+                    <div
+                      class='h-full rounded-full bg-blue-600 transition-all'
+                      style={{
+                        width: `${(mockUsage.collaborators.used / mockUsage.collaborators.limit) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+                <div class='rounded-xl border border-gray-100 bg-gray-50/50 p-5'>
+                  <p class='text-xs font-medium tracking-widest text-gray-400 uppercase'>Storage</p>
+                  <p class='mt-2 text-3xl font-bold text-gray-900'>
+                    {mockUsage.storage.used}
+                    <span class='text-lg font-normal text-gray-400'>
+                      /{mockUsage.storage.limit} {mockUsage.storage.unit}
+                    </span>
+                  </p>
+                  <div class='mt-3 h-1.5 overflow-hidden rounded-full bg-gray-200'>
+                    <div
+                      class='h-full rounded-full bg-blue-600 transition-all'
+                      style={{
+                        width: `${(mockUsage.storage.used / mockUsage.storage.limit) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Section>
+          </Show>
+
+          {/* Security Section */}
+          <Show when={activeNav() === 'security'}>
+            <div class='mb-6'>
+              <h1 class='text-2xl font-semibold text-gray-900'>Security</h1>
+              <p class='mt-1 text-gray-500'>Protect your account</p>
+            </div>
+
+            <Section title='Linked Accounts' subtitle='Manage how you sign in to CoRATES'>
+              <div class='space-y-3'>
+                <For each={mockLinkedAccounts}>{account => <ProviderCard account={account} />}</For>
+              </div>
+
+              <div class='mt-4 flex flex-wrap gap-2'>
+                <button class='inline-flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
+                  <FiMail class='h-4 w-4' />+ Email & Password
+                </button>
+              </div>
+
+              <div class='mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4'>
+                <div class='flex items-start gap-3'>
+                  <FiInfo class='mt-0.5 h-5 w-5 shrink-0 text-blue-600' />
+                  <p class='text-sm text-blue-800'>
+                    <strong>Why link accounts?</strong> Linking multiple sign-in methods gives you
+                    backup options if you lose access to one.
+                  </p>
+                </div>
+              </div>
+            </Section>
+
+            <Section title='Authentication'>
+              <SettingRow
+                title='Password'
+                description='Set a password to sign in without email links'
+              >
+                <button class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'>
+                  Add Password
+                </button>
+              </SettingRow>
+
+              <SettingRow
+                title='Two-Factor Authentication'
+                description={twoFactorEnabled() ? 'Enabled' : 'Add an extra layer of security'}
+              >
+                <Show
+                  when={twoFactorEnabled()}
+                  fallback={
+                    <button
+                      onClick={() => setTwoFactorEnabled(true)}
+                      class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+                    >
+                      Enable
+                    </button>
+                  }
+                >
+                  <div class='flex items-center gap-3'>
+                    <span class='flex items-center gap-1 text-sm text-green-600'>
+                      <FiCheck class='h-4 w-4' />
+                      Enabled
+                    </span>
+                    <button class='rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
+                      Manage
+                    </button>
+                  </div>
+                </Show>
+              </SettingRow>
+            </Section>
+
+            <Section title='Active Sessions' subtitle='Devices currently logged into your account'>
+              <div class='space-y-3'>
+                <For each={mockSessions}>
+                  {session => (
+                    <div class='flex items-center justify-between rounded-xl border border-gray-100 bg-gray-50/30 p-4'>
+                      <div class='flex items-center gap-4'>
+                        <div class='flex h-10 w-10 items-center justify-center rounded-lg bg-white text-gray-600 shadow-sm'>
+                          <FiMonitor class='h-5 w-5' />
+                        </div>
+                        <div>
+                          <p class='font-medium text-gray-900'>
+                            {session.device}
+                            <Show when={session.current}>
+                              <span class='ml-2 rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700'>
+                                Current
+                              </span>
+                            </Show>
+                          </p>
+                          <p class='text-sm text-gray-500'>
+                            {session.browser} - {session.location}
+                          </p>
+                        </div>
+                      </div>
+                      <Show when={!session.current}>
+                        <button class='text-sm font-medium text-red-600 hover:text-red-700'>
+                          Revoke
+                        </button>
+                      </Show>
+                    </div>
+                  )}
+                </For>
+              </div>
+
+              <button class='mt-4 text-sm font-medium text-red-600 hover:text-red-700'>
+                Sign out all other devices
+              </button>
+            </Section>
+          </Show>
+
+          {/* Notifications Section */}
+          <Show when={activeNav() === 'notifications'}>
+            <div class='mb-6'>
+              <h1 class='text-2xl font-semibold text-gray-900'>Notifications</h1>
+              <p class='mt-1 text-gray-500'>Control how you receive updates</p>
+            </div>
+
+            <Section title='Email Preferences'>
+              <For each={mockNotificationSettings}>
+                {setting => (
+                  <SettingRow title={setting.title} description={setting.description}>
+                    <Toggle
+                      checked={notifications()[setting.id]}
+                      onChange={() => toggleNotification(setting.id)}
+                    />
+                  </SettingRow>
+                )}
+              </For>
+            </Section>
+          </Show>
+
+          {/* Integrations Section */}
+          <Show when={activeNav() === 'integrations'}>
+            <div class='mb-6'>
+              <h1 class='text-2xl font-semibold text-gray-900'>Integrations</h1>
+              <p class='mt-1 text-gray-500'>
+                Connect third-party services to enhance your workflow
+              </p>
+            </div>
+
+            <Section>
+              {/* Google Drive */}
+              <div class='flex items-center justify-between rounded-xl border border-gray-200 p-5'>
+                <div class='flex items-center gap-4'>
+                  <div class='flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100'>
+                    <img src='/logos/drive.svg' alt='Google Drive' class='h-6 w-6' />
+                  </div>
+                  <div>
+                    <h3 class='font-medium text-gray-900'>Google Drive</h3>
+                    <p class='text-sm text-gray-500'>
+                      {googleDriveConnected() ?
+                        'Connected - You can import PDFs from your Drive'
+                      : 'Connect to import PDFs from Google Drive'}
+                    </p>
+                  </div>
+                </div>
+                <Show
+                  when={googleDriveConnected()}
+                  fallback={
+                    <button
+                      onClick={() => setGoogleDriveConnected(true)}
+                      class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+                    >
+                      Connect
+                    </button>
+                  }
+                >
+                  <div class='flex items-center gap-3'>
+                    <span class='flex items-center gap-1 text-sm text-green-600'>
+                      <FiCheck class='h-4 w-4' />
+                      Connected
+                    </span>
+                    <button
+                      onClick={() => setGoogleDriveConnected(false)}
+                      class='inline-flex items-center gap-1 rounded-lg bg-red-50 px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-100'
+                    >
+                      <FiX class='h-4 w-4' />
+                      Disconnect
+                    </button>
+                  </div>
+                </Show>
+              </div>
+
+              {/* Other integrations */}
+              <div class='mt-4 space-y-3'>
+                {[
+                  { name: 'Zotero', description: 'Sync your reference library', available: false },
+                  {
+                    name: 'Mendeley',
+                    description: 'Import references and annotations',
+                    available: false,
+                  },
+                ].map(integration => (
+                  <div class='flex items-center justify-between rounded-xl border border-gray-200 p-5 opacity-60'>
+                    <div class='flex items-center gap-4'>
+                      <div class='flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100'>
+                        <FiLink class='h-6 w-6 text-gray-400' />
+                      </div>
+                      <div>
+                        <h3 class='font-medium text-gray-900'>{integration.name}</h3>
+                        <p class='text-sm text-gray-500'>{integration.description}</p>
+                      </div>
+                    </div>
+                    <span class='rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500'>
+                      Coming Soon
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </Section>
+          </Show>
+
+          {/* Save Button */}
+          <div class='mt-8 flex justify-end border-t border-gray-100 pt-6'>
+            <button class='rounded-lg bg-blue-600 px-6 py-2.5 font-medium text-white transition-colors hover:bg-blue-700'>
+              Save Changes
+            </button>
+          </div>
+        </main>
+      </div>
+
+      {/* Embedded Styles */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
+
+        body {
+          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/mocks/SettingsMockMinimal.jsx b/packages/web/src/components/mocks/SettingsMockMinimal.jsx
new file mode 100644
index 000000000..c0f15e175
--- /dev/null
+++ b/packages/web/src/components/mocks/SettingsMockMinimal.jsx
@@ -0,0 +1,543 @@
+/**
+ * Settings Mock - Minimal Swiss Style
+ *
+ * Design Direction: Clean, typographic, understated elegance.
+ * Uses strong hierarchy, generous whitespace, and precise alignment.
+ * Inspired by Swiss design principles and Dieter Rams' aesthetic.
+ */
+
+import { For, Show, createSignal } from 'solid-js';
+import {
+  FiUser,
+  FiCreditCard,
+  FiShield,
+  FiBell,
+  FiLink,
+  FiMonitor,
+  FiCheck,
+  FiArrowRight,
+  FiExternalLink,
+  FiChevronRight,
+  FiCloud,
+  FiKey,
+  FiSmartphone,
+  FiMail,
+  FiLogOut,
+} from 'solid-icons/fi';
+
+// Mock data
+const mockUser = {
+  name: 'Dr. Sarah Chen',
+  email: 'sarah.chen@university.edu',
+  institution: 'Stanford University',
+  joined: 'December 2024',
+};
+
+const mockPlan = {
+  name: 'Professional',
+  price: 29,
+  interval: 'month',
+  features: ['15 Projects', '25 Collaborators', '10 GB Storage', 'Priority Support'],
+};
+
+const navItems = [
+  { id: 'account', label: 'Account', icon: FiUser },
+  { id: 'billing', label: 'Billing', icon: FiCreditCard },
+  { id: 'security', label: 'Security', icon: FiShield },
+  { id: 'notifications', label: 'Notifications', icon: FiBell },
+  { id: 'integrations', label: 'Integrations', icon: FiLink },
+];
+
+const mockNotificationSettings = [
+  {
+    id: 'email',
+    title: 'Email Notifications',
+    description: 'Receive important updates via email',
+    enabled: true,
+  },
+  {
+    id: 'projects',
+    title: 'Project Updates',
+    description: 'When collaborators make changes',
+    enabled: true,
+  },
+  {
+    id: 'mentions',
+    title: 'Mentions',
+    description: 'When someone mentions you in a comment',
+    enabled: false,
+  },
+  {
+    id: 'marketing',
+    title: 'Product Updates',
+    description: 'News about new features and improvements',
+    enabled: false,
+  },
+];
+
+const mockSessions = [
+  { id: 1, device: 'MacBook Pro', browser: 'Safari', location: 'San Francisco', current: true },
+  { id: 2, device: 'iPhone 15', browser: 'Safari', location: 'San Francisco', current: false },
+  { id: 3, device: 'Windows PC', browser: 'Chrome', location: 'New York', current: false },
+];
+
+// Minimal toggle component
+function MinimalToggle(props) {
+  return (
+    <button
+      onClick={() => props.onChange?.(!props.checked)}
+      class={`relative h-6 w-11 rounded-full transition-colors duration-200 ${
+        props.checked ? 'bg-black' : 'bg-neutral-200'
+      }`}
+    >
+      <div
+        class={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
+          props.checked ? 'left-0.5 translate-x-5.5' : 'left-0.5'
+        }`}
+        style={{ transform: props.checked ? 'translateX(22px)' : 'translateX(0)' }}
+      />
+    </button>
+  );
+}
+
+// Section component for consistent styling
+function Section(props) {
+  return (
+    <section class='border-t border-neutral-100 py-10 first:border-t-0 first:pt-0'>
+      <Show when={props.title}>
+        <h2 class='mb-1 text-xs font-medium tracking-widest text-neutral-400 uppercase'>
+          {props.title}
+        </h2>
+      </Show>
+      <Show when={props.subtitle}>
+        <p class='mb-8 text-sm text-neutral-500'>{props.subtitle}</p>
+      </Show>
+      {props.children}
+    </section>
+  );
+}
+
+// Row component for settings items
+function SettingRow(props) {
+  return (
+    <div class='group flex items-center justify-between border-b border-neutral-100 py-5 last:border-b-0'>
+      <div class='flex-1'>
+        <h3 class='font-medium text-neutral-900'>{props.title}</h3>
+        <Show when={props.description}>
+          <p class='mt-0.5 text-sm text-neutral-500'>{props.description}</p>
+        </Show>
+      </div>
+      <div class='ml-4'>{props.children}</div>
+    </div>
+  );
+}
+
+export default function SettingsMockMinimal() {
+  const [activeNav, setActiveNav] = createSignal('account');
+  const [notifications, setNotifications] = createSignal(
+    mockNotificationSettings.reduce((acc, n) => ({ ...acc, [n.id]: n.enabled }), {}),
+  );
+
+  const toggleNotification = id => {
+    setNotifications(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  return (
+    <div class='min-h-screen bg-white'>
+      {/* Top Bar */}
+      <header class='border-b border-neutral-100'>
+        <div class='mx-auto flex max-w-6xl items-center justify-between px-8 py-4'>
+          <div class='flex items-center gap-6'>
+            <span class='text-xl font-semibold tracking-tight text-neutral-900'>CoRATES</span>
+            <span class='text-sm text-neutral-400'>/</span>
+            <span class='text-sm text-neutral-600'>Settings</span>
+          </div>
+          <div class='flex items-center gap-4'>
+            <span class='text-sm text-neutral-600'>{mockUser.email}</span>
+            <div class='h-8 w-8 rounded-full bg-neutral-900 text-center text-xs leading-8 font-medium text-white'>
+              SC
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div class='mx-auto flex max-w-6xl'>
+        {/* Sidebar Navigation */}
+        <nav class='w-56 shrink-0 border-r border-neutral-100 py-8 pr-8'>
+          <ul class='space-y-1'>
+            <For each={navItems}>
+              {item => {
+                const Icon = item.icon;
+                return (
+                  <li>
+                    <button
+                      onClick={() => setActiveNav(item.id)}
+                      class={`flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm transition-colors ${
+                        activeNav() === item.id ?
+                          'bg-neutral-900 text-white'
+                        : 'text-neutral-600 hover:bg-neutral-50'
+                      }`}
+                    >
+                      <Icon class='h-4 w-4' />
+                      {item.label}
+                    </button>
+                  </li>
+                );
+              }}
+            </For>
+          </ul>
+
+          {/* Bottom actions */}
+          <div class='mt-8 border-t border-neutral-100 pt-8'>
+            <button class='flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm text-red-600 transition-colors hover:bg-red-50'>
+              <FiLogOut class='h-4 w-4' />
+              Sign Out
+            </button>
+          </div>
+        </nav>
+
+        {/* Main Content */}
+        <main class='flex-1 px-12 py-8'>
+          {/* Account Section */}
+          <Show when={activeNav() === 'account'}>
+            <div class='mb-8'>
+              <h1 class='text-2xl font-semibold text-neutral-900'>Account</h1>
+              <p class='mt-1 text-neutral-500'>Manage your personal information</p>
+            </div>
+
+            <Section>
+              <div class='flex items-start gap-8'>
+                {/* Avatar */}
+                <div class='relative'>
+                  <div class='flex h-24 w-24 items-center justify-center rounded-full bg-neutral-900 text-2xl font-medium text-white'>
+                    SC
+                  </div>
+                  <button class='absolute -right-1 -bottom-1 flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-neutral-100 text-neutral-600 transition-colors hover:bg-neutral-200'>
+                    <FiUser class='h-4 w-4' />
+                  </button>
+                </div>
+
+                {/* Info */}
+                <div class='flex-1 space-y-6'>
+                  <div class='grid grid-cols-2 gap-6'>
+                    <div>
+                      <label class='mb-2 block text-xs font-medium tracking-wide text-neutral-400 uppercase'>
+                        Full Name
+                      </label>
+                      <input
+                        type='text'
+                        value={mockUser.name}
+                        class='w-full border-b border-neutral-200 bg-transparent pb-2 text-neutral-900 focus:border-neutral-900 focus:outline-none'
+                      />
+                    </div>
+                    <div>
+                      <label class='mb-2 block text-xs font-medium tracking-wide text-neutral-400 uppercase'>
+                        Email
+                      </label>
+                      <input
+                        type='email'
+                        value={mockUser.email}
+                        class='w-full border-b border-neutral-200 bg-transparent pb-2 text-neutral-900 focus:border-neutral-900 focus:outline-none'
+                      />
+                    </div>
+                    <div>
+                      <label class='mb-2 block text-xs font-medium tracking-wide text-neutral-400 uppercase'>
+                        Institution
+                      </label>
+                      <input
+                        type='text'
+                        value={mockUser.institution}
+                        class='w-full border-b border-neutral-200 bg-transparent pb-2 text-neutral-900 focus:border-neutral-900 focus:outline-none'
+                      />
+                    </div>
+                    <div>
+                      <label class='mb-2 block text-xs font-medium tracking-wide text-neutral-400 uppercase'>
+                        Member Since
+                      </label>
+                      <p class='border-b border-transparent pb-2 text-neutral-500'>
+                        {mockUser.joined}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Section>
+
+            <Section title='Danger Zone'>
+              <div class='rounded-lg border border-red-200 bg-red-50/50 p-6'>
+                <div class='flex items-center justify-between'>
+                  <div>
+                    <h3 class='font-medium text-red-900'>Delete Account</h3>
+                    <p class='text-sm text-red-600'>
+                      Permanently delete your account and all associated data
+                    </p>
+                  </div>
+                  <button class='rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50'>
+                    Delete Account
+                  </button>
+                </div>
+              </div>
+            </Section>
+          </Show>
+
+          {/* Billing Section */}
+          <Show when={activeNav() === 'billing'}>
+            <div class='mb-8'>
+              <h1 class='text-2xl font-semibold text-neutral-900'>Billing</h1>
+              <p class='mt-1 text-neutral-500'>Manage your subscription and payments</p>
+            </div>
+
+            <Section>
+              {/* Current Plan */}
+              <div class='flex items-stretch gap-6'>
+                <div class='flex-1 rounded-2xl border border-neutral-200 p-8'>
+                  <div class='mb-6 flex items-start justify-between'>
+                    <div>
+                      <p class='text-xs font-medium tracking-widest text-neutral-400 uppercase'>
+                        Current Plan
+                      </p>
+                      <h2 class='mt-1 text-3xl font-semibold text-neutral-900'>{mockPlan.name}</h2>
+                    </div>
+                    <span class='rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                      Active
+                    </span>
+                  </div>
+
+                  <div class='mb-6'>
+                    <span class='text-4xl font-bold text-neutral-900'>${mockPlan.price}</span>
+                    <span class='text-neutral-500'>/{mockPlan.interval}</span>
+                  </div>
+
+                  <ul class='space-y-3'>
+                    <For each={mockPlan.features}>
+                      {feature => (
+                        <li class='flex items-center gap-3 text-sm text-neutral-600'>
+                          <FiCheck class='h-4 w-4 text-emerald-600' />
+                          {feature}
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </div>
+
+                {/* Quick Actions */}
+                <div class='flex w-64 flex-col gap-3'>
+                  <button class='flex items-center justify-between rounded-xl bg-neutral-900 px-5 py-4 text-left text-white transition-colors hover:bg-neutral-800'>
+                    <span class='font-medium'>Change Plan</span>
+                    <FiArrowRight class='h-4 w-4' />
+                  </button>
+                  <button class='flex items-center justify-between rounded-xl border border-neutral-200 px-5 py-4 text-left text-neutral-900 transition-colors hover:bg-neutral-50'>
+                    <span class='font-medium'>Payment Method</span>
+                    <FiCreditCard class='h-4 w-4 text-neutral-400' />
+                  </button>
+                  <button class='flex items-center justify-between rounded-xl border border-neutral-200 px-5 py-4 text-left text-neutral-900 transition-colors hover:bg-neutral-50'>
+                    <span class='font-medium'>Billing History</span>
+                    <FiExternalLink class='h-4 w-4 text-neutral-400' />
+                  </button>
+                </div>
+              </div>
+            </Section>
+
+            <Section title='Usage This Period'>
+              <div class='grid grid-cols-3 gap-6'>
+                {[
+                  { label: 'Projects', used: 8, limit: 15 },
+                  { label: 'Collaborators', used: 12, limit: 25 },
+                  { label: 'Storage', used: 2.4, limit: 10, suffix: 'GB' },
+                ].map(stat => (
+                  <div class='rounded-xl border border-neutral-100 bg-neutral-50/50 p-6'>
+                    <p class='text-xs font-medium tracking-widest text-neutral-400 uppercase'>
+                      {stat.label}
+                    </p>
+                    <p class='mt-2 text-3xl font-bold text-neutral-900'>
+                      {stat.used}
+                      <span class='text-lg font-normal text-neutral-400'>
+                        /{stat.limit}
+                        {stat.suffix || ''}
+                      </span>
+                    </p>
+                    <div class='mt-3 h-1.5 overflow-hidden rounded-full bg-neutral-200'>
+                      <div
+                        class='h-full rounded-full bg-neutral-900 transition-all'
+                        style={{ width: `${(stat.used / stat.limit) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Section>
+          </Show>
+
+          {/* Security Section */}
+          <Show when={activeNav() === 'security'}>
+            <div class='mb-8'>
+              <h1 class='text-2xl font-semibold text-neutral-900'>Security</h1>
+              <p class='mt-1 text-neutral-500'>Protect your account</p>
+            </div>
+
+            <Section title='Authentication'>
+              <SettingRow title='Password' description='Last changed 30 days ago'>
+                <button class='rounded-lg bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-200'>
+                  Change
+                </button>
+              </SettingRow>
+
+              <SettingRow
+                title='Two-Factor Authentication'
+                description='Add an extra layer of security to your account'
+              >
+                <button class='rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800'>
+                  Enable
+                </button>
+              </SettingRow>
+
+              <SettingRow
+                title='Recovery Codes'
+                description='Generate backup codes for account recovery'
+              >
+                <button class='rounded-lg bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-200'>
+                  Generate
+                </button>
+              </SettingRow>
+            </Section>
+
+            <Section title='Active Sessions' subtitle='Devices currently logged into your account'>
+              <div class='space-y-3'>
+                <For each={mockSessions}>
+                  {session => (
+                    <div class='flex items-center justify-between rounded-xl border border-neutral-100 bg-neutral-50/30 p-5'>
+                      <div class='flex items-center gap-4'>
+                        <div class='flex h-10 w-10 items-center justify-center rounded-lg bg-white text-neutral-600'>
+                          <FiMonitor class='h-5 w-5' />
+                        </div>
+                        <div>
+                          <p class='font-medium text-neutral-900'>
+                            {session.device}
+                            <Show when={session.current}>
+                              <span class='ml-2 rounded bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700'>
+                                Current
+                              </span>
+                            </Show>
+                          </p>
+                          <p class='text-sm text-neutral-500'>
+                            {session.browser} - {session.location}
+                          </p>
+                        </div>
+                      </div>
+                      <Show when={!session.current}>
+                        <button class='text-sm font-medium text-red-600 hover:text-red-700'>
+                          Revoke
+                        </button>
+                      </Show>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </Section>
+          </Show>
+
+          {/* Notifications Section */}
+          <Show when={activeNav() === 'notifications'}>
+            <div class='mb-8'>
+              <h1 class='text-2xl font-semibold text-neutral-900'>Notifications</h1>
+              <p class='mt-1 text-neutral-500'>Control how you receive updates</p>
+            </div>
+
+            <Section title='Email Preferences'>
+              <For each={mockNotificationSettings}>
+                {setting => (
+                  <SettingRow title={setting.title} description={setting.description}>
+                    <MinimalToggle
+                      checked={notifications()[setting.id]}
+                      onChange={() => toggleNotification(setting.id)}
+                    />
+                  </SettingRow>
+                )}
+              </For>
+            </Section>
+          </Show>
+
+          {/* Integrations Section */}
+          <Show when={activeNav() === 'integrations'}>
+            <div class='mb-8'>
+              <h1 class='text-2xl font-semibold text-neutral-900'>Integrations</h1>
+              <p class='mt-1 text-neutral-500'>Connect third-party services</p>
+            </div>
+
+            <Section>
+              {[
+                {
+                  name: 'Google Drive',
+                  description: 'Import PDFs directly from your Drive',
+                  icon: FiCloud,
+                  connected: true,
+                },
+                {
+                  name: 'Zotero',
+                  description: 'Sync your reference library',
+                  icon: FiLink,
+                  connected: false,
+                },
+                {
+                  name: 'Mendeley',
+                  description: 'Import references and annotations',
+                  icon: FiLink,
+                  connected: false,
+                },
+              ].map(integration => {
+                const Icon = integration.icon;
+                return (
+                  <div class='flex items-center justify-between border-b border-neutral-100 py-6 last:border-b-0'>
+                    <div class='flex items-center gap-4'>
+                      <div class='flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 text-neutral-600'>
+                        <Icon class='h-6 w-6' />
+                      </div>
+                      <div>
+                        <h3 class='font-medium text-neutral-900'>{integration.name}</h3>
+                        <p class='text-sm text-neutral-500'>{integration.description}</p>
+                      </div>
+                    </div>
+                    <Show
+                      when={integration.connected}
+                      fallback={
+                        <button class='rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800'>
+                          Connect
+                        </button>
+                      }
+                    >
+                      <div class='flex items-center gap-3'>
+                        <span class='flex items-center gap-2 text-sm text-emerald-600'>
+                          <FiCheck class='h-4 w-4' />
+                          Connected
+                        </span>
+                        <button class='rounded-lg border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-50'>
+                          Disconnect
+                        </button>
+                      </div>
+                    </Show>
+                  </div>
+                );
+              })}
+            </Section>
+          </Show>
+
+          {/* Save Button */}
+          <div class='mt-10 flex justify-end border-t border-neutral-100 pt-6'>
+            <button class='rounded-lg bg-neutral-900 px-8 py-3 font-medium text-white transition-colors hover:bg-neutral-800'>
+              Save Changes
+            </button>
+          </div>
+        </main>
+      </div>
+
+      {/* Embedded Styles */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
+
+        body {
+          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/pdf/index.js b/packages/web/src/components/pdf/index.js
index deb520e2f..7637da14b 100644
--- a/packages/web/src/components/pdf/index.js
+++ b/packages/web/src/components/pdf/index.js
@@ -1,10 +1,10 @@
 /**
  * PDF Components - Barrel export
+ *
+ * Note: EmbedPdfViewer is NOT exported here - it should be lazy-loaded directly
+ * to enable code splitting. Use: lazy(() => import('@pdf/embedpdf/EmbedPdfViewer.jsx'))
  */
 
 // PDF list components (for displaying PDF metadata in lists)
 export { default as PdfListItem } from './PdfListItem.jsx';
 export { default as PdfTagBadge } from './PdfTagBadge.jsx';
-
-// EmbedPDF viewer component
-export { default as EmbedPdfViewer } from './embedpdf/EmbedPdfViewer.jsx';
diff --git a/packages/web/src/components/project/PdfPreviewPanel.jsx b/packages/web/src/components/project/PdfPreviewPanel.jsx
index 03d901966..413839528 100644
--- a/packages/web/src/components/project/PdfPreviewPanel.jsx
+++ b/packages/web/src/components/project/PdfPreviewPanel.jsx
@@ -5,11 +5,12 @@
  * Used across project views to preview PDFs without leaving context.
  */
 
-import { Switch, Match, createMemo } from 'solid-js';
+import { Switch, Match, createMemo, lazy, Suspense } from 'solid-js';
 import SlidingPanel from './SlidingPanel.jsx';
-import EmbedPdfViewer from '@pdf/embedpdf/EmbedPdfViewer.jsx';
 import pdfPreviewStore from '@/stores/pdfPreviewStore.js';
 
+const EmbedPdfViewer = lazy(() => import('@pdf/embedpdf/EmbedPdfViewer.jsx'));
+
 export default function PdfPreviewPanel() {
   const handleClose = () => {
     pdfPreviewStore.closePreview();
@@ -63,11 +64,19 @@ export default function PdfPreviewPanel() {
           </Match>
 
           <Match when={viewState() === 'ready'}>
-            <EmbedPdfViewer
-              pdfData={pdfPreviewStore.pdfData()}
-              pdfFileName={pdfPreviewStore.pdf()?.fileName}
-              readOnly={true}
-            />
+            <Suspense
+              fallback={
+                <div class='flex h-full flex-1 items-center justify-center'>
+                  <div class='h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600' />
+                </div>
+              }
+            >
+              <EmbedPdfViewer
+                pdfData={pdfPreviewStore.pdfData()}
+                pdfFileName={pdfPreviewStore.pdf()?.fileName}
+                readOnly={true}
+              />
+            </Suspense>
           </Match>
 
           <Match when={viewState() === 'empty'}>
diff --git a/packages/web/src/components/project/ProjectsPanel.jsx b/packages/web/src/components/project/ProjectsPanel.jsx
index a621bf7de..4bba49bc2 100644
--- a/packages/web/src/components/project/ProjectsPanel.jsx
+++ b/packages/web/src/components/project/ProjectsPanel.jsx
@@ -34,6 +34,7 @@ export default function ProjectsPanel() {
   const {
     hasEntitlement,
     hasQuota,
+    quotas,
     loading: subscriptionLoading,
     subscriptionFetchFailed,
     refetch: refetchSubscription,
@@ -134,7 +135,13 @@ export default function ProjectsPanel() {
         {/* Create button or quota prompt */}
         <Show
           when={canCreateProject()}
-          fallback={<ContactPrompt restrictionType={restrictionType()} />}
+          fallback={
+            <ContactPrompt
+              restrictionType={restrictionType()}
+              projectCount={projectCount()}
+              quotaLimit={quotas()?.['projects.max']}
+            />
+          }
         >
           <button
             class='inline-flex transform items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white shadow-md transition-all duration-200 hover:scale-[1.02] hover:bg-blue-700 hover:shadow-lg focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100'
diff --git a/packages/web/src/components/project/reconcile-tab/ReconciliationWithPdf.jsx b/packages/web/src/components/project/reconcile-tab/ReconciliationWithPdf.jsx
index 23ae7a353..83f9f77a6 100644
--- a/packages/web/src/components/project/reconcile-tab/ReconciliationWithPdf.jsx
+++ b/packages/web/src/components/project/reconcile-tab/ReconciliationWithPdf.jsx
@@ -3,14 +3,16 @@
  * in a split-screen layout. The PDF is read-only during reconciliation.
  */
 
-import { Show, createMemo } from 'solid-js';
+import { Show, createMemo, lazy, Suspense } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { FiArrowLeft } from 'solid-icons/fi';
-import EmbedPdfViewer from '@pdf/embedpdf/EmbedPdfViewer.jsx';
 import ChecklistReconciliation from './amstar2-reconcile/ChecklistReconciliation.jsx';
+
 import Navbar from './amstar2-reconcile/Navbar.jsx';
 import SplitScreenLayout from '@/components/checklist/SplitScreenLayout.jsx';
 
+const EmbedPdfViewer = lazy(() => import('@pdf/embedpdf/EmbedPdfViewer.jsx'));
+
 /**
  * ReconciliationWithPdf - Wrapper that combines ChecklistReconciliation with a PDF viewer
  * in a split-screen layout. The PDF is read-only during reconciliation.
@@ -124,14 +126,22 @@ export default function ReconciliationWithPdf(props) {
               </div>
             }
           >
-            <EmbedPdfViewer
-              pdfData={props.pdfData}
-              pdfFileName={props.pdfFileName}
-              readOnly={true}
-              pdfs={props.pdfs}
-              selectedPdfId={props.selectedPdfId}
-              onPdfSelect={props.onPdfSelect}
-            />
+            <Suspense
+              fallback={
+                <div class='flex h-full items-center justify-center bg-gray-100'>
+                  <div class='h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600' />
+                </div>
+              }
+            >
+              <EmbedPdfViewer
+                pdfData={props.pdfData}
+                pdfFileName={props.pdfFileName}
+                readOnly={true}
+                pdfs={props.pdfs}
+                selectedPdfId={props.selectedPdfId}
+                onPdfSelect={props.onPdfSelect}
+              />
+            </Suspense>
           </Show>
         </Show>
       </SplitScreenLayout>
diff --git a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliationWithPdf.jsx b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliationWithPdf.jsx
index 31e2c1eee..5349c54b4 100644
--- a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliationWithPdf.jsx
+++ b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliationWithPdf.jsx
@@ -3,14 +3,15 @@
  * in a split-screen layout. The PDF is read-only during reconciliation.
  */
 
-import { Show, createMemo } from 'solid-js';
+import { Show, createMemo, lazy, Suspense } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { FiArrowLeft } from 'solid-icons/fi';
-import EmbedPdfViewer from '@pdf/embedpdf/EmbedPdfViewer.jsx';
 import RobinsIReconciliation from './RobinsIReconciliation.jsx';
 import RobinsINavbar from './RobinsINavbar.jsx';
 import SplitScreenLayout from '@/components/checklist/SplitScreenLayout.jsx';
 
+const EmbedPdfViewer = lazy(() => import('@pdf/embedpdf/EmbedPdfViewer.jsx'));
+
 /**
  * RobinsIReconciliationWithPdf - Wrapper that combines RobinsIReconciliation with a PDF viewer
  * in a split-screen layout. The PDF is read-only during reconciliation.
@@ -124,14 +125,22 @@ export default function RobinsIReconciliationWithPdf(props) {
               </div>
             }
           >
-            <EmbedPdfViewer
-              pdfData={props.pdfData}
-              pdfFileName={props.pdfFileName}
-              readOnly={true}
-              pdfs={props.pdfs}
-              selectedPdfId={props.selectedPdfId}
-              onPdfSelect={props.onPdfSelect}
-            />
+            <Suspense
+              fallback={
+                <div class='flex h-full items-center justify-center bg-gray-100'>
+                  <div class='h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600' />
+                </div>
+              }
+            >
+              <EmbedPdfViewer
+                pdfData={props.pdfData}
+                pdfFileName={props.pdfFileName}
+                readOnly={true}
+                pdfs={props.pdfs}
+                selectedPdfId={props.selectedPdfId}
+                onPdfSelect={props.onPdfSelect}
+              />
+            </Suspense>
           </Show>
         </Show>
       </SplitScreenLayout>
diff --git a/packages/web/src/global.css b/packages/web/src/global.css
index ff00f0330..082ebf0d5 100644
--- a/packages/web/src/global.css
+++ b/packages/web/src/global.css
@@ -214,3 +214,26 @@
   background: rgba(0, 100, 255, 0.3) !important;
   color: transparent;
 }
+
+/* Dashboard animations */
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stat-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
diff --git a/packages/web/src/primitives/useSubscription.js b/packages/web/src/primitives/useSubscription.js
index 6eefdad41..632ae9bbe 100644
--- a/packages/web/src/primitives/useSubscription.js
+++ b/packages/web/src/primitives/useSubscription.js
@@ -167,7 +167,9 @@ export function useSubscription() {
   return {
     // Query state
     subscription,
-    loading: () => query.isLoading || query.isFetching,
+    // Only show loading when no cached data exists (local-first principle)
+    loading: () => query.isPending && !query.data,
+    isFetching: () => query.isFetching,
     error: () => query.error,
     subscriptionFetchFailed,
     isUsingCachedData,
diff --git a/packages/web/src/stores/projectStore.js b/packages/web/src/stores/projectStore.js
index 7c969466e..bd6c02ce4 100644
--- a/packages/web/src/stores/projectStore.js
+++ b/packages/web/src/stores/projectStore.js
@@ -11,6 +11,32 @@ import { createStore, produce } from 'solid-js/store';
 // This avoids passing non-serializable data through router state
 const pendingProjectData = new Map();
 
+// localStorage key for persisted project stats
+const PROJECT_STATS_KEY = 'corates:projectStats';
+
+/**
+ * Load project stats from localStorage
+ */
+function loadPersistedStats() {
+  try {
+    const stored = localStorage.getItem(PROJECT_STATS_KEY);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Save project stats to localStorage
+ */
+function persistStats(stats) {
+  try {
+    localStorage.setItem(PROJECT_STATS_KEY, JSON.stringify(stats));
+  } catch {
+    // Ignore storage errors (quota exceeded, etc.)
+  }
+}
+
 function createProjectStore() {
   const [store, setStore] = createStore({
     // Cached project data by projectId (Y.js data: studies, members, meta)
@@ -19,6 +45,10 @@ function createProjectStore() {
     activeProjectId: null,
     // Connection states by projectId
     connections: {},
+    // Cached project stats by projectId (computed from Yjs data)
+    // { [projectId]: { studyCount, completedCount, lastUpdated } }
+    // Initialized from localStorage for persistence across refreshes
+    projectStats: loadPersistedStats(),
   });
 
   /**
@@ -58,11 +88,52 @@ function createProjectStore() {
         }
         if (data.meta !== undefined) s.projects[projectId].meta = data.meta;
         if (data.members !== undefined) s.projects[projectId].members = data.members;
-        if (data.studies !== undefined) s.projects[projectId].studies = data.studies;
+        if (data.studies !== undefined) {
+          s.projects[projectId].studies = data.studies;
+          // Auto-compute and cache stats when studies change
+          const stats = computeProjectStats(data.studies);
+          s.projectStats[projectId] = {
+            ...stats,
+            lastUpdated: Date.now(),
+          };
+          // Persist stats to localStorage for cross-refresh access
+          persistStats(s.projectStats);
+        }
       }),
     );
   }
 
+  /**
+   * Compute project stats from studies array
+   * @param {Array} studies - Array of study objects
+   * @returns {{ studyCount: number, completedCount: number }}
+   */
+  function computeProjectStats(studies) {
+    const studyCount = studies?.length || 0;
+    let completedCount = 0;
+
+    if (studies) {
+      for (const study of studies) {
+        // A study is "completed" if it has at least one checklist with status 'completed'
+        const hasCompletedChecklist = study.checklists?.some(c => c.status === 'completed');
+        if (hasCompletedChecklist) {
+          completedCount++;
+        }
+      }
+    }
+
+    return { studyCount, completedCount };
+  }
+
+  /**
+   * Get cached stats for a project
+   * @param {string} projectId
+   * @returns {{ studyCount: number, completedCount: number, lastUpdated: number } | null}
+   */
+  function getProjectStats(projectId) {
+    return store.projectStats[projectId] || null;
+  }
+
   /**
    * Update connection state for a project
    */
@@ -250,6 +321,7 @@ function createProjectStore() {
     getChecklist,
     getChecklistScore,
     getChecklistAnswers,
+    getProjectStats,
 
     // Getters - PDF Data
     getStudyPdfs,
diff --git a/packages/web/vite.config.js b/packages/web/vite.config.js
index 9acb89c2f..0125889b3 100644
--- a/packages/web/vite.config.js
+++ b/packages/web/vite.config.js
@@ -43,6 +43,8 @@ export default defineConfig(({ mode }) => ({
     tailwindcss(),
   ],
   build: {
+    // Disable modulepreload for lazy-loaded chunks - we want true on-demand loading
+    modulePreload: false,
     minify: mode === 'analyze' ? 'terser' : 'esbuild',
     sourcemap: mode === 'analyze',
     terserOptions: {
@@ -53,6 +55,10 @@ export default defineConfig(({ mode }) => ({
     rollupOptions: {
       output: {
         manualChunks: id => {
+          // Chart.js - large library, keep separate for lazy loading
+          if (id.includes('chart.js') || id.includes('solid-chartjs')) {
+            return 'chartjs';
+          }
           // Group all EmbedPDF plugins into a single chunk
           if (id.includes('@embedpdf/plugin-')) {
             return 'embedpdf-plugins';
@@ -70,10 +76,6 @@ export default defineConfig(({ mode }) => ({
             }
             return 'embedpdf';
           }
-          // Group all admin components into a single chunk
-          if (id.includes('/components/admin/')) {
-            return 'admin';
-          }
         },
       },
     },