diff --git a/.cursor/plans/lesson_ai_features_8bcf8cf2.plan.md b/.cursor/plans/lesson_ai_features_8bcf8cf2.plan.md
new file mode 100644
index 00000000..cdd27984
--- /dev/null
+++ b/.cursor/plans/lesson_ai_features_8bcf8cf2.plan.md
@@ -0,0 +1,531 @@
+---
+name: Lesson AI Features
+overview: Add credit-based "Listen to Lesson" (TTS) and "Summarize" (LLM) features to lessons, with a dedicated AI credit system, Polar.sh credit purchases, and a teacher-managed AI tab in edit mode.
+todos:
+  - id: openai-dep
+    content: Install openai package in apps/api and add OPENAI_API_KEY to env schema
+    status: pending
+  - id: db-tables
+    content: Add lesson_ai_cache, organization_ai_usage, organization_ai_credit_purchase tables to schema.ts and generate migration
+    status: pending
+  - id: db-queries
+    content: Create query functions for AI cache, AI usage tracking, and AI credit balance computation
+    status: pending
+  - id: ai-credits-constants
+    content: Create AI credit costs and per-plan limits in packages/utils/src/plans/ai-credits.ts
+    status: pending
+  - id: error-codes
+    content: Add AI-related error codes to ErrorCodes
+    status: pending
+  - id: ai-credit-service
+    content: Create ai-credits.ts service for balance checks, deduction, and Polar purchase handling
+    status: pending
+  - id: ai-service
+    content: Create lesson-ai.ts service with summarizeLesson and generateLessonAudio
+    status: pending
+  - id: validation
+    content: Add Zod schemas for AI endpoints (summarize, audio, cost-estimate, credit-balance)
+    status: pending
+  - id: api-routes
+    content: Add AI lesson routes and AI credit routes to the API
+    status: pending
+  - id: polar-webhook
+    content: Extend Polar webhook to handle AI credit pack purchases
+    status: pending
+  - id: api-build
+    content: Build API and verify RPC types propagate
+    status: pending
+  - id: fe-types
+    content: Add request/response types to course/utils/types.ts
+    status: pending
+  - id: fe-api-methods
+    content: Add AI methods to LessonApi class and create AiCreditsApi class
+    status: pending
+  - id: fe-ai-tab
+    content: Create lesson AI tab component for edit mode (generate/regenerate TTS and summaries)
+    status: pending
+  - id: fe-student-view
+    content: Create student-facing Listen and Summary components for view mode
+    status: pending
+  - id: fe-credit-ui
+    content: Add AI credit balance display and buy-credits flow in settings
+    status: pending
+  - id: fe-translations
+    content: Add translation keys for all AI feature strings
+    status: pending
+  - id: fe-integrate
+    content: Wire everything into lesson.svelte, export from barrels, final integration
+    status: pending
+isProject: false
+---
+
+# Lesson AI Features: Listen to Lesson and Summarize
+
+## Architecture
+
+```mermaid
+flowchart TD
+  subgraph teacherView [Teacher - Edit Mode]
+    AITab["AI tab in lesson editor"]
+    CostPreview["Credit cost per lesson"]
+    GenerateBtn["Generate / Regenerate buttons"]
+  end
+
+  subgraph studentView [Student - View Mode]
+    ListenBtn["Listen to lesson button"]
+    SummaryPanel["AI Summary panel"]
+    AudioPlayer["Audio player"]
+  end
+
+  subgraph creditSystem [AI Credit System]
+    BalanceCheck["Balance check"]
+    PlanCredits["Plan monthly credits"]
+    PurchasedCredits["Purchased credit packs"]
+    PolarCheckout["Polar.sh checkout"]
+  end
+
+  subgraph api [API - Hono]
+    SummarizeRoute["POST lesson/:id/summarize"]
+    AudioRoute["POST lesson/:id/audio"]
+    CostRoute["GET lesson/:id/ai-cost"]
+    BalanceRoute["GET org/ai-credits"]
+    PurchaseRoute["Polar webhook"]
+    AIService["lesson-ai.ts"]
+    CreditService["ai-credits.ts"]
+  end
+
+  subgraph storage [Storage]
+    Cache["lesson_ai_cache"]
+    UsageTable["organization_ai_usage"]
+    PurchaseTable["organization_ai_credit_purchase"]
+    S3["S3 audio files"]
+  end
+
+  subgraph openai [OpenAI]
+    ChatAPI["GPT-4o-mini"]
+    TTSAPI["tts-1"]
+  end
+
+  AITab --> CostPreview
+  AITab --> GenerateBtn
+  GenerateBtn -->|RPC| SummarizeRoute
+  GenerateBtn -->|RPC| AudioRoute
+  ListenBtn --> AudioPlayer
+  studentView -->|"reads cached"| Cache
+
+  SummarizeRoute --> CreditService
+  AudioRoute --> CreditService
+  CreditService --> BalanceCheck
+  BalanceCheck --> PlanCredits
+  BalanceCheck --> PurchasedCredits
+  PolarCheckout -->|webhook| PurchaseRoute
+  PurchaseRoute --> PurchaseTable
+
+  CreditService --> AIService
+  AIService --> Cache
+  AIService --> UsageTable
+  AIService -->|summary| ChatAPI
+  AIService -->|audio| TTSAPI
+  AIService -->|upload| S3
+```
+
+## Credit System Design
+
+### Credit Costs
+
+| Action | Credits | Approx. OpenAI cost |
+|--------|---------|---------------------|
+| Generate summary | 1 | ~$0.0003 |
+| Generate TTS audio | 5 | ~$0.05-0.08 |
+| Regenerate (same costs) | same | same |
+
+### Per-Plan Monthly AI Credits
+
+| Plan | Monthly AI Credits |
+|------|-------------------|
+| BASIC (Free) | 5 |
+| EARLY_ADOPTER | 50 |
+| ENTERPRISE | 500 |
+
+### Purchased Credits
+
+- One-time credit packs via Polar.sh (e.g., 50 credits, 200 credits)
+- Purchased credits never expire
+- Plan credits are consumed first each month; purchased credits are used only when plan credits run out
+- New Polar products need to be created for credit packs
+
+### Balance Computation
+
+```
+planCreditsRemaining = planMonthlyLimit - SUM(ai_usage WHERE source='plan' AND this billing month)
+purchasedCreditsRemaining = SUM(ai_credit_purchase.credits) - SUM(ai_usage WHERE source='purchased')
+totalAvailable = planCreditsRemaining + purchasedCreditsRemaining
+```
+
+When consuming credits: deduct from plan credits first. If plan credits are exhausted, deduct from purchased pool. The `source` column on `organization_ai_usage` tracks which pool was charged.
+
+---
+
+## Phase 1: Backend Infrastructure
+
+### 1a. OpenAI dependency and env config
+
+- Install `openai` (latest) in [apps/api/package.json](apps/api/package.json)
+- Add `OPENAI_API_KEY` (optional string) to the Zod env schema in [apps/api/src/config/env.ts](apps/api/src/config/env.ts)
+
+### 1b. Database tables
+
+Add to [packages/db/src/schema.ts](packages/db/src/schema.ts) and generate a migration.
+
+**Enum:**
+
+```typescript
+export const lessonAiFeatureType = pgEnum('LESSON_AI_FEATURE_TYPE', ['summary', 'audio']);
+export const aiCreditSource = pgEnum('AI_CREDIT_SOURCE', ['plan', 'purchased']);
+```
+
+**`lesson_ai_cache`** -- stores generated summaries and audio per lesson+locale:
+
+```typescript
+export const lessonAiCache = pgTable('lesson_ai_cache', {
+  id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
+  lessonId: uuid('lesson_id').notNull().references(() => lesson.id, { onDelete: 'cascade' }),
+  locale: locale().default('en').notNull(),
+  featureType: lessonAiFeatureType('feature_type').notNull(),
+  content: text(),                              // markdown summary
+  audioAssetKey: text('audio_asset_key'),        // S3 key for TTS audio
+  contentHash: text('content_hash').notNull(),   // hash of source lesson HTML
+  createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+  updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+}, (table) => [
+  unique('unique_lesson_locale_feature').on(table.lessonId, table.locale, table.featureType)
+]);
+```
+
+**`organization_ai_usage`** -- tracks each AI generation event:
+
+```typescript
+export const organizationAiUsage = pgTable('organization_ai_usage', {
+  id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
+  organizationId: uuid('organization_id').notNull().references(() => organization.id),
+  lessonId: uuid('lesson_id').notNull().references(() => lesson.id, { onDelete: 'cascade' }),
+  featureType: lessonAiFeatureType('feature_type').notNull(),
+  creditsConsumed: integer('credits_consumed').default(0).notNull(),
+  source: aiCreditSource('source').notNull(),    // 'plan' or 'purchased'
+  metadata: jsonb('metadata').default({}).$type<Record<string, unknown>>().notNull(),
+  createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' })
+    .default(sql`timezone('utc'::text, now())`).notNull()
+}, (table) => [
+  index('idx_org_ai_usage_org_created').on(table.organizationId, table.createdAt)
+]);
+```
+
+**`organization_ai_credit_purchase`** -- tracks Polar credit pack purchases:
+
+```typescript
+export const organizationAiCreditPurchase = pgTable('organization_ai_credit_purchase', {
+  id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
+  organizationId: uuid('organization_id').notNull().references(() => organization.id),
+  credits: integer('credits').notNull(),
+  polarOrderId: text('polar_order_id'),
+  metadata: jsonb('metadata').default({}).$type<Record<string, unknown>>().notNull(),
+  createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' })
+    .default(sql`timezone('utc'::text, now())`).notNull()
+});
+```
+
+### 1c. Database queries
+
+New file: `packages/db/src/queries/organization/ai-credits.ts`
+
+- `getAiCreditsUsedThisMonth(orgId, source)` -- SUM of `credits_consumed` from `organization_ai_usage` WHERE `source='plan'` AND `createdAt >= billingPeriodStart`
+- `getTotalPurchasedCredits(orgId)` -- SUM of `credits` from `organization_ai_credit_purchase`
+- `getTotalPurchasedCreditsUsed(orgId)` -- SUM of `credits_consumed` from `organization_ai_usage` WHERE `source='purchased'`
+- `recordAiUsage(data)` -- insert into `organization_ai_usage`
+- `recordAiCreditPurchase(data)` -- insert into `organization_ai_credit_purchase`
+
+New file: `packages/db/src/queries/lesson/ai-cache.ts`
+
+- `getLessonAiCache(lessonId, locale, featureType)` -- get cached entry
+- `upsertLessonAiCache(data)` -- insert or update on conflict
+
+### 1d. AI credit constants
+
+New file: [packages/utils/src/plans/ai-credits.ts](packages/utils/src/plans/ai-credits.ts)
+
+```typescript
+export const AI_FEATURE_CREDIT_COST = {
+  summary: 1,
+  audio: 5,
+} as const;
+
+export const AI_CREDITS_BY_PLAN: Record<string, { monthlyCredits: number }> = {
+  [PLAN.BASIC]: { monthlyCredits: 5 },
+  [PLAN.EARLY_ADOPTER]: { monthlyCredits: 50 },
+  [PLAN.ENTERPRISE]: { monthlyCredits: 500 },
+};
+```
+
+Re-export from `packages/utils/src/plans/index.ts`.
+
+### 1e. Error codes
+
+Add to [packages/utils/src/constants/error-codes.ts](packages/utils/src/constants/error-codes.ts):
+
+```typescript
+AI_CREDITS_EXHAUSTED: 'AI_CREDITS_EXHAUSTED',
+AI_FEATURE_UNAVAILABLE: 'AI_FEATURE_UNAVAILABLE',
+AI_GENERATION_FAILED: 'AI_GENERATION_FAILED',
+```
+
+### 1f. AI credit service
+
+New file: `apps/api/src/services/organization/ai-credits.ts`
+
+- `getAiCreditBalance(orgId)` -- computes `planCreditsRemaining`, `purchasedCreditsRemaining`, `totalAvailable`, `monthlyLimit`, and returns the full balance object
+- `assertAiCreditsAvailable(orgId, featureType)` -- checks totalAvailable >= cost, throws `AI_CREDITS_EXHAUSTED` (429) if insufficient
+- `deductAiCredits(orgId, lessonId, featureType)` -- determines source (plan first, then purchased), inserts usage row
+- `addPurchasedCredits(orgId, credits, polarOrderId)` -- inserts into `organization_ai_credit_purchase`
+
+### 1g. Lesson AI service
+
+New file: `apps/api/src/services/lesson/lesson-ai.ts`
+
+**`summarizeLesson(lessonId, locale, orgId)`**
+1. Fetch lesson content from `lesson_language` for locale
+2. Strip HTML to plain text, compute content hash
+3. Check `lesson_ai_cache` -- if hash matches, return cached summary
+4. Call `assertAiCreditsAvailable(orgId, 'summary')`
+5. Call OpenAI Chat Completions (`gpt-4o-mini`) with summarization prompt
+6. Upsert `lesson_ai_cache` with summary + hash
+7. Call `deductAiCredits(orgId, lessonId, 'summary')`
+8. Return summary
+
+**`generateLessonAudio(lessonId, locale, orgId)`**
+1. Fetch lesson content, strip HTML, compute hash
+2. Check cache -- if hash matches and audio key exists, return presigned URL
+3. Call `assertAiCreditsAvailable(orgId, 'audio')`
+4. Chunk text into segments under 4096 chars
+5. Call OpenAI TTS (`tts-1`, voice `alloy`) for each chunk
+6. Concatenate audio buffers, upload to S3
+7. Upsert cache with audio key + hash
+8. Call `deductAiCredits(orgId, lessonId, 'audio')`
+9. Return presigned URL
+
+**`estimateLessonAiCost(lessonId, locale)`**
+1. Fetch lesson content, check what's already cached
+2. Return `{ summaryCost, audioCost, totalCost, isStale }` -- 0 if already cached and fresh
+
+**`getLessonAiStatus(lessonId, locale)`**
+1. Check cache for both summary and audio
+2. Return `{ hasSummary, hasAudio, isSummaryStale, isAudioStale, summary?, audioUrl? }`
+
+Shared util: `stripHtmlToText(html)` using regex or a lightweight lib.
+
+### 1h. API routes
+
+**Extend lesson router** in [apps/api/src/routes/course/lesson.ts](apps/api/src/routes/course/lesson.ts):
+
+- `POST /:lessonId/summarize` -- auth + courseMember, role 1/2 only (teacher/admin), calls `summarizeLesson`
+- `POST /:lessonId/audio` -- auth + courseMember, role 1/2 only, calls `generateLessonAudio`
+- `GET /:lessonId/ai-status` -- auth + courseMember, calls `getLessonAiStatus` (used by both edit and view mode)
+- `GET /:lessonId/ai-cost` -- auth + courseMember, role 1/2 only, calls `estimateLessonAiCost`
+
+**New org AI credit routes** (add to [apps/api/src/routes/organization/organization.ts](apps/api/src/routes/organization/organization.ts) or a new `ai-credits` sub-router):
+
+- `GET /ai-credits` -- auth, returns `getAiCreditBalance(orgId)`
+
+### 1i. Validation schemas
+
+Add to `packages/utils/src/validation/lesson/`:
+
+- `ZLessonAiParam` -- `{ lessonId: z.string().uuid() }`
+- `ZLessonAiQuery` -- `{ locale: z.enum([...]).optional().default('en') }`
+
+---
+
+## Phase 2: Polar Credit Purchases
+
+### 2a. Create Polar products
+
+Create credit pack products in Polar dashboard (not code -- manual setup):
+- "50 AI Credits" -- one-time purchase
+- "200 AI Credits" -- one-time purchase
+
+### 2b. Credit pack constants
+
+Add product IDs to [packages/utils/src/plans/ai-credits.ts](packages/utils/src/plans/ai-credits.ts):
+
+```typescript
+export const AI_CREDIT_PACKS = {
+  SMALL: { credits: 50, productId: '<polar-product-id>' },
+  LARGE: { credits: 200, productId: '<polar-product-id>' },
+};
+```
+
+### 2c. Polar webhook extension
+
+Extend [apps/dashboard/src/routes/api/polar/webhook/+server.ts](apps/dashboard/src/routes/api/polar/webhook/+server.ts):
+
+- Add a new `order.created` (or `checkout.updated` with `status === 'succeeded'`) handler
+- Match product ID against `AI_CREDIT_PACKS` to determine credits
+- Call a new API route to add credits: `POST /organization/ai-credits/purchase`
+- That route calls `addPurchasedCredits(orgId, credits, polarOrderId)`
+
+### 2d. Checkout flow
+
+Reuse the existing Polar checkout pattern from [apps/dashboard/src/routes/api/polar/subscribe/+server.ts](apps/dashboard/src/routes/api/polar/subscribe/+server.ts) -- create a similar `GET /api/polar/ai-credits` endpoint that creates a one-time checkout (not subscription) with `metadata: { orgId, type: 'ai-credits', credits: N }`.
+
+---
+
+## Phase 3: Frontend -- Teacher Edit Mode
+
+### 3a. Types
+
+Add to [apps/dashboard/src/lib/features/course/utils/types.ts](apps/dashboard/src/lib/features/course/utils/types.ts):
+
+```typescript
+export type SummarizeLessonRequest = typeof classroomio.course[':courseId'].lesson[':lessonId'].summarize.$post;
+export type GenerateLessonAudioRequest = typeof classroomio.course[':courseId'].lesson[':lessonId'].audio.$post;
+export type GetLessonAiStatusRequest = typeof classroomio.course[':courseId'].lesson[':lessonId']['ai-status']['$get'];
+export type GetLessonAiCostRequest = typeof classroomio.course[':courseId'].lesson[':lessonId']['ai-cost']['$get'];
+```
+
+### 3b. LessonApi extensions
+
+Add to [apps/dashboard/src/lib/features/course/api/lesson.svelte.ts](apps/dashboard/src/lib/features/course/api/lesson.svelte.ts):
+
+- State: `aiStatus`, `aiCost`, `isSummarizing`, `isGeneratingAudio`
+- Methods: `getAiStatus(courseId, lessonId, locale)`, `getAiCost(courseId, lessonId, locale)`, `summarize(courseId, lessonId, locale)`, `generateAudio(courseId, lessonId, locale)`
+
+### 3c. AI credit API class
+
+New file: `apps/dashboard/src/lib/features/course/api/ai-credits.svelte.ts`
+
+- State: `balance` (plan remaining, purchased remaining, total)
+- Methods: `getBalance()`, `purchaseCredits(packId)` (redirects to Polar checkout)
+
+### 3d. Lesson AI tab (edit mode)
+
+New component: `apps/dashboard/src/lib/features/course/components/lesson/ai/ai-tab.svelte`
+
+This is a new tab (value `5`) added to the lesson edit tabs in [constants.ts](apps/dashboard/src/lib/features/course/components/lesson/constants.ts) alongside Note, Slide, Video, Document. Uses a sparkle/wand icon.
+
+Layout:
+- **Credit balance bar** at top: "AI Credits: 42 remaining (plan: 35, purchased: 7)" with a "Buy more" link to settings
+- **Summary section:**
+  - Status: "Not generated" / "Generated" / "Stale (content changed)"
+  - "Generate Summary" button showing cost (e.g., "1 credit")
+  - If generated: preview of the summary text, "Regenerate" button
+- **Audio section:**
+  - Status: same pattern
+  - "Generate Audio" button showing cost (e.g., "5 credits")
+  - If generated: inline audio player, "Regenerate" button
+  - If stale: warning that content has changed since last generation
+
+### 3e. Integrate AI tab
+
+In [lesson.svelte](apps/dashboard/src/lib/features/course/pages/lesson.svelte):
+- Add AI tab to the `UnderlineTabs` in edit mode
+- Load `aiStatus` and `aiCost` when entering the AI tab (lazy load)
+- Load `aiCredits.balance` when entering the AI tab
+
+In [constants.ts](apps/dashboard/src/lib/features/course/components/lesson/constants.ts):
+- Add `{ label: 'course.navItem.lessons.materials.tabs.ai.title', icon: SparklesIcon, value: 5, badgeValue: 0 }`
+
+---
+
+## Phase 4: Frontend -- Student View Mode
+
+### 4a. Student toolbar
+
+New component: `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-ai-toolbar.svelte`
+
+Placed in the lesson view mode block in [lesson.svelte](apps/dashboard/src/lib/features/course/pages/lesson.svelte), between the note content and the Comments section. Shown only when `aiStatus` has generated content.
+
+- **"Listen to lesson"** button (headphones icon, dark bg) -- shown only when `aiStatus.hasAudio` is true. Toggles an inline audio player.
+- **"Summarize"** button (zap icon, outline) -- shown only when `aiStatus.hasSummary` is true. Toggles the summary panel below.
+
+### 4b. Audio player
+
+New component: `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-audio-player.svelte`
+
+- Native `<audio>` with custom play/pause/progress controls
+- Receives `audioUrl` from `lessonApi.aiStatus`
+
+### 4c. Summary panel
+
+New component: `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-summary-panel.svelte`
+
+- Styled card matching the screenshot: rounded corners, "AI SUMMARY" heading in gold/amber, bullet-point list
+- Renders markdown bullet points from the cached summary
+- Collapsible (toggled by the Summarize button)
+
+### 4d. Auto-load AI status
+
+In [lesson.svelte](apps/dashboard/src/lib/features/course/pages/lesson.svelte), when in view mode and lesson is loaded, call `lessonApi.getAiStatus(courseId, lessonId, locale)` to determine which buttons to show.
+
+---
+
+## Phase 5: Settings -- AI Credits Management
+
+### 5a. AI credits settings section
+
+Either add a section to the existing billing page at [billing.svelte](apps/dashboard/src/lib/features/settings/pages/billing.svelte), or create a new settings tab. Shows:
+
+- Current AI credit balance (plan + purchased breakdown)
+- Monthly plan allowance and usage bar
+- "Buy Credits" section with credit pack cards (50 / 200) linking to Polar checkout
+- Usage history (recent AI generations with lesson name, type, credits, date)
+
+---
+
+## Phase 6: Translations and Polish
+
+Add keys to [en.json](apps/dashboard/src/lib/utils/translations/en.json):
+
+- `course.navItem.lessons.materials.tabs.ai.title` -- "AI"
+- `course.navItem.lessons.ai.summary_status_*` -- not generated / generated / stale
+- `course.navItem.lessons.ai.audio_status_*` -- same
+- `course.navItem.lessons.ai.generate_summary` -- "Generate Summary"
+- `course.navItem.lessons.ai.generate_audio` -- "Generate Audio"
+- `course.navItem.lessons.ai.regenerate` -- "Regenerate"
+- `course.navItem.lessons.ai.credits_remaining` -- "{count} credits remaining"
+- `course.navItem.lessons.ai.buy_more` -- "Buy more credits"
+- `course.navItem.lessons.ai.credit_cost` -- "{count} credit(s)"
+- `course.navItem.lessons.ai.content_stale` -- "Content has changed since last generation"
+- `course.navItem.lessons.ai.listen_to_lesson` -- "Listen to lesson"
+- `course.navItem.lessons.ai.summarize` -- "Summarize"
+- `course.navItem.lessons.ai.summary_heading` -- "AI Summary"
+- `settings.billing.ai_credits.*` -- balance, purchase, usage history strings
+
+---
+
+## Key Files to Modify
+
+**New files:**
+- `packages/utils/src/plans/ai-credits.ts`
+- `packages/db/src/queries/organization/ai-credits.ts`
+- `packages/db/src/queries/lesson/ai-cache.ts`
+- `apps/api/src/services/organization/ai-credits.ts`
+- `apps/api/src/services/lesson/lesson-ai.ts`
+- `apps/dashboard/src/lib/features/course/api/ai-credits.svelte.ts`
+- `apps/dashboard/src/lib/features/course/components/lesson/ai/ai-tab.svelte`
+- `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-ai-toolbar.svelte`
+- `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-audio-player.svelte`
+- `apps/dashboard/src/lib/features/course/components/lesson/ai/lesson-summary-panel.svelte`
+
+**Modified files:**
+- `packages/db/src/schema.ts` -- 3 new tables, 2 new enums
+- `packages/utils/src/constants/error-codes.ts` -- new error codes
+- `packages/utils/src/plans/index.ts` -- re-export ai-credits
+- `apps/api/src/config/env.ts` -- OPENAI_API_KEY
+- `apps/api/src/routes/course/lesson.ts` -- 4 new routes
+- `apps/api/src/routes/organization/organization.ts` -- AI credit balance route
+- `apps/dashboard/src/routes/api/polar/webhook/+server.ts` -- credit purchase handler
+- `apps/dashboard/src/lib/features/course/pages/lesson.svelte` -- AI tab + student toolbar
+- `apps/dashboard/src/lib/features/course/components/lesson/constants.ts` -- new tab entry
+- `apps/dashboard/src/lib/features/course/components/lesson/index.ts` -- new exports
+- `apps/dashboard/src/lib/features/course/api/lesson.svelte.ts` -- AI methods
+- `apps/dashboard/src/lib/features/course/utils/types.ts` -- new request types
+- `apps/dashboard/src/lib/utils/translations/en.json` -- new keys
diff --git a/.cursor/plans/public_api_tests_89047418.plan.md b/.cursor/plans/public_api_tests_89047418.plan.md
new file mode 100644
index 00000000..b2c8f15b
--- /dev/null
+++ b/.cursor/plans/public_api_tests_89047418.plan.md
@@ -0,0 +1,219 @@
+---
+name: Public API Tests
+overview: Add a Vitest suite for `/public-api/v1` with explicit tests that Bearer API keys, scopes, and org context are enforced, plus strict JSON assertions on success and error responses. DB and external I/O stay mocked; one small Hono app uses real middleware with a mocked auth service to prove the full chain.
+todos:
+  - id: vitest-config
+    content: Update vitest.config.ts with @api path alias
+    status: pending
+  - id: courses-routes
+    content: Create courses route tests with strict response body assertions
+    status: pending
+  - id: audience-routes
+    content: Create audience route tests with strict response body assertions
+    status: pending
+  - id: auth-chain
+    content: Add public-api-auth-chain tests (real middleware + mocked authenticate + mocked services)
+    status: pending
+  - id: automation-key-mw
+    content: Create automation-key middleware tests (Bearer + touch + JSON error shape)
+    status: pending
+  - id: automation-scopes-mw
+    content: Create automation-key-scopes tests (403 without public_api:*, JSON shape)
+    status: pending
+  - id: course-service
+    content: Create v1 course service unit tests (returns + mock call args)
+    status: pending
+  - id: audience-service
+    content: Create v1 audience service unit tests (returns + mock call args)
+    status: pending
+isProject: false
+---
+
+# Public API Test Suite
+
+## Architecture
+
+Three layers of tests, each mocking only the layer below it.
+
+```mermaid
+flowchart TD
+    RouteTests["Route Tests\n(mock middleware + services)"]
+    MiddlewareTests["Middleware Tests\n(mock DB/auth-key service)"]
+    ServiceTests["Service Tests\n(mock DB queries)"]
+
+    RouteTests --> MiddlewareTests
+    RouteTests --> ServiceTests
+    MiddlewareTests --> ServiceTests
+```
+
+
+
+## Coverage vs codebase (audit)
+
+In this repository, **public API** means the org automation key surface at `/public-api/v1` ([apps/api/src/app.ts](apps/api/src/app.ts)). Nothing else is mounted there; [apps/api/src/routes/v1/index.ts](apps/api/src/routes/v1/index.ts) only wires `/audience` and `/courses`. Other Hono routes (for example `/organization`, `/course`) use session or dashboard flows and are out of scope for this plan.
+
+Full endpoint inventory the plan must exercise (paths relative to `/public-api/v1`):
+
+- `GET /courses`, `POST /courses`
+- `GET /courses/:courseId/students`, `GET /courses/:courseId/export`, `GET /courses/:courseId/structure`, `PUT /courses/:courseId/structure`
+- `GET /courses/:courseId`, `PUT /courses/:courseId`, `DELETE /courses/:courseId`
+- `GET /audience`, `POST /audience`, `POST /audience/assign-courses`
+- `GET /audience/:memberId`, `PUT /audience/:memberId`, `DELETE /audience/:memberId`
+
+Validation for these lives under [packages/utils/src/validation/public-api/](packages/utils/src/validation/public-api/) (`course.ts`, `audience.ts` only). If new routers are added under `v1/`, extend this inventory and add matching test files.
+
+## Auth, API keys, and middleware enforcement
+
+Public endpoints must never rely on “trust the client.” Tests must prove the following, aligned with [apps/api/src/middlewares/automation-key.ts](apps/api/src/middlewares/automation-key.ts) and [apps/api/src/middlewares/automation-key-scopes.ts](apps/api/src/middlewares/automation-key-scopes.ts).
+
+**Bearer and API key validation (`automationKeyMiddleware`)**
+
+- Missing `Authorization` → **401**, body `success: false`, stable `code` (e.g. `UNAUTHORIZED`).
+- Header present but not `Bearer <token>` → **401** (same shape).
+- Empty or whitespace-only token after `Bearer` → **401** (authenticate fails).
+- `authenticateOrganizationApiKeyService` throws (invalid / unknown key) → **401**, message surfaced from middleware catch path.
+- Successful auth → `c.set('orgId', …)`, `c.set('actorId', …)`, `c.set('automationKey', …)`; assert `touchOrganizationApiKeyLastUsedService` is invoked with the resolved key (proves real keys go through the “touch” path). Expiry is enforced inside `authenticateOrganizationApiKeyService` ([apps/api/src/services/organization/automation-key.ts](apps/api/src/services/organization/automation-key.ts)) — add a mock case where the service throws for an expired key and expect **401**.
+
+**Scope enforcement (`automationKeyScopesMiddleware(['public_api:*'])`)**
+
+- No `automationKey` in context (simulating a bug or bypass) → **401**.
+- Key present but `scopes` omit `public_api:*` (e.g. only MCP scopes) → **403**, body includes `code: FORBIDDEN` and a clear error string.
+- Key includes `public_api:*` → `next()` runs and the handler can execute.
+
+**Full chain (no mocked middleware on the router)**
+
+Route files that mock middleware cannot prove enforcement by themselves. Add **[apps/api/src/routes/v1/__tests__/public-api-auth-chain.test.ts](apps/api/src/routes/v1/__tests__/public-api-auth-chain.test.ts)**:
+
+- Build a small Hono app that mounts a real v1 router (e.g. `v1CoursesRouter` under `/courses`) with **unmocked** `automationKeyMiddleware` and `automationKeyScopesMiddleware`.
+- Mock only `@api/services/organization/automation-key` (`authenticateOrganizationApiKeyService`, `touchOrganizationApiKeyLastUsedService`) and the v1 service module.
+- Cases: no `Authorization` → 401; `Bearer` + key that authenticates to a record **without** `public_api:*` → 403; `Bearer` + key with `public_api:*` → 200 and JSON matches the mocked service return (see next section).
+- Optionally repeat one path on `v1AudienceRouter` so audience is covered by the same guarantees.
+
+**Service-level actor rules**
+
+Several handlers require `actorId` from the key’s `createdByProfileId`. With middleware mocked to `actorId: null`, assert **401** and `AppError` / `handleError` shape for: `POST /courses`, `PUT /courses/:courseId/structure`, `POST /audience`, `PUT /audience/:memberId`. This documents that automation keys without a creator profile cannot perform those mutations.
+
+## Response contracts (data must match expectations)
+
+Do not only assert HTTP status. Parse `await response.json()` and validate **shape and values**.
+
+**Success responses**
+
+- Every happy path: `expect(body.success).toBe(true)`.
+- `GET/POST` course list/detail: `data` must **deep-equal** (or `toMatchObject` with explicit fields) the object/array returned by the mocked service — proves the handler forwards the service result, not an accidental empty object or wrong key.
+- `GET /audience`: assert `data`, `pagination`, and `query` exist and match the mocked `listAudienceService` return (same values the service produced).
+- `POST` create paths: assert **201** where applicable and `data` matches the created entity mock.
+- Where services return nested structures (course export / structure), assert at least stable top-level keys and one nested field so refactors do not silently change the contract.
+
+**Error responses**
+
+- Middleware errors: `success: false`, string `error`, string `code` — match actual payloads from middleware (401/403).
+- `handleError` / `AppError` paths: `success: false`, `error` message, `code` matching `ErrorCodes.*`, optional `field` when the route sets it. Assert status equals `AppError.statusCode` (404, 401, etc.).
+- Validation failures (Zod / hono-openapi): assert **4xx** and that the body documents validation failure in the form the stack returns (status + JSON); do not hand-wave as “400” without reading the response.
+
+**Service unit tests**
+
+- When a function maps or merges arguments (e.g. `createPublicApiCourseService` adds `organizationId`), assert the **exact** arguments passed into the downstream mock (`toHaveBeenCalledWith`).
+
+## Files to Change
+
+### 1. `[apps/api/vitest.config.ts](apps/api/vitest.config.ts)`
+
+Add `resolve.alias` so Vitest resolves `@api/*` without needing `tsc-alias` at runtime:
+
+```ts
+import { resolve } from 'path';
+
+export default defineConfig({
+  resolve: { alias: { '@api': resolve(__dirname, 'src') } },
+  test: { globals: true, environment: 'node', ... }
+});
+```
+
+(`@cio/*` packages already resolve from `node_modules` at test time.)
+
+### 2. Route tests (mocked middleware — fast handler + validation coverage)
+
+These files focus on **validators**, **handler wiring**, and **error mapping** with middleware stubbed so `orgId` / `actorId` are deterministic.
+
+`**[apps/api/src/routes/v1/__tests__/courses.test.ts](apps/api/src/routes/v1/__tests__/courses.test.ts)**`
+
+- `vi.mock` both middleware modules to inject `orgId`/`actorId` and call `next()`.
+- `vi.mock('@api/services/v1/course')` — all service functions as `vi.fn()`.
+- One `describe` block per endpoint. For **each** success case: set the mock return to a **concrete** object/array, perform the request, `const body = await res.json()`, then `expect(body).toEqual({ success: true, data: … })` (or `toMatchObject` only where the payload is huge and you document which fields are guaranteed).
+- Cases (plus response assertions as above):
+  - `GET /` — 200; service throws `AppError` → assert status + `{ success: false, code, error }`
+  - `POST /` — 201 + body matches mock; invalid body → validation status + body; middleware mock with `actorId` undefined/null → 401 + error contract
+  - `GET /:courseId` — 200 + `data` equals `getCourseService` mock; non-UUID param → 4xx; `AppError` 404 → 404 + `COURSE_NOT_FOUND` (or whatever the service throws)
+  - `PUT /:courseId`, `DELETE /:courseId` — same pattern
+  - `GET …/students`, `export`, `structure` — 200 + `data` equals mock; structure route shares export service — assert same mock used if both tested
+  - `PUT …/structure` — 200 + merged result shape; no `actorId` → 401; invalid JSON → validation error
+- Use `v1CoursesRouter.request('/path', { headers, body })`.
+
+`**[apps/api/src/routes/v1/__tests__/audience.test.ts](apps/api/src/routes/v1/__tests__/audience.test.ts)**`
+
+- Same middleware mocks as courses; mock `@api/services/v1/audience`.
+- Assert full list payload: `success`, `data`, `pagination`, `query` **equal** mocked `listAudienceService` output fields.
+- Other endpoints: same success/error JSON rules as courses.
+
+### 2b. Auth chain tests (real middleware)
+
+`**[apps/api/src/routes/v1/__tests__/public-api-auth-chain.test.ts](apps/api/src/routes/v1/__tests__/public-api-auth-chain.test.ts)**`
+
+- Do **not** mock `automationKeyMiddleware` / `automationKeyScopesMiddleware`.
+- Mock `authenticateOrganizationApiKeyService` to return a full key-shaped object (`organizationId`, `createdByProfileId`, `scopes`, `id`, etc. — whatever the middleware reads).
+- Mount router under a prefix so paths match production (`/courses` + `GET /` → list).
+- Prove **401** without header, **403** when `scopes` is `[]` or MCP-only, **200** when `scopes` includes `public_api:*` and `data` matches mocked `listCoursesService` (or one audience list call).
+
+### 3. Middleware tests
+
+`**[apps/api/src/middlewares/__tests__/automation-key.test.ts](apps/api/src/middlewares/__tests__/automation-key.test.ts)**`
+
+- `vi.mock('@api/services/organization/automation-key')` — mock `authenticateOrganizationApiKeyService` and `touchOrganizationApiKeyLastUsedService`.
+- Create a minimal Hono app that mounts the real `automationKeyMiddleware` + a `GET /` handler that returns context values.
+- Cases (each: `await res.json()` and assert `success`, `code`, `error` where applicable):
+  - No `Authorization` header → 401 + `success: false` + `code: UNAUTHORIZED`
+  - Header not `Bearer …` → 401 + same JSON shape
+  - `authenticateOrganizationApiKeyService` throws (invalid or expired key; service throws before returning) → 401 + body matches middleware catch behavior
+  - Valid key → 200; response reflects `orgId`, `actorId`, `automationKey` from context (echo in test handler)
+  - `touchOrganizationApiKeyLastUsedService` called exactly once with the authenticated key
+
+`**[apps/api/src/middlewares/__tests__/automation-key-scopes.test.ts](apps/api/src/middlewares/__tests__/automation-key-scopes.test.ts)**`
+
+- No DB mocking needed; test `organizationApiKeyHasScopes` logic via the scope middleware itself.
+- Cases (parse JSON on 401/403):
+  - `automationKey` not set in context → 401 + `success: false`
+  - Key with `scopes: []` or without `public_api:*` → 403 + `code: FORBIDDEN` + error message string
+  - Key with `public_api:*` → handler runs; response body proves `next()` was reached
+
+### 4. Service unit tests
+
+For every exported function, assert **return value** equals the expected object (or key fields) after the mocked dependency returns — not only “did not throw.” Use `expect(fn).toHaveBeenCalledWith(...)` for argument contracts.
+
+`**[apps/api/src/services/v1/__tests__/course.test.ts](apps/api/src/services/v1/__tests__/course.test.ts)**`
+
+Mock: `@cio/db/queries/tag` (`getCourseOrganizationId`), `@api/services/organization` (`getOrganizationCourses`), `@api/services/course/course` (`getCourse`, `updateCourse`, `deleteCourse`, `createCourse`), `@api/services/course/people` (`listCourseMembers`), course-import services.
+
+- `assertCourseBelongsToOrg` helper: course not found → throws `AppError(404, COURSE_NOT_FOUND)`; org mismatch → same
+- `listCoursesService` — returns `items` from `getOrganizationCourses`
+- `getCourseService` — happy path; unauthorized org
+- `listCourseStudentsService` — filters by `ROLE.STUDENT`
+- `exportCourseService` — delegates to `getCourseImportStructureService`
+- `createPublicApiCourseService` — no `actorId` → 401; calls `createCourse` with `organizationId` merged in
+- `updatePublicApiCourseService` — calls `updateCourseService`
+- `deletePublicApiCourseService` — calls `deleteCourseService`
+- `updatePublicApiCourseStructureService` — no `actorId` → 401; creates draft then publishes
+
+`**[apps/api/src/services/v1/__tests__/audience.test.ts](apps/api/src/services/v1/__tests__/audience.test.ts)**`
+
+Mock: `@api/services/organization` (`getOrgAudience`, `getOrgAudienceMember`, `removeAudienceMember`), `@api/services/organization/audience` (`assignAudienceToCourses`, `importAudienceMembers`, `updatePendingAudienceMemberEmail`).
+
+- `listAudienceService` — delegates to `getOrgAudience`
+- `createAudienceService` — no `actorId` → 401; maps payload fields correctly
+- `getAudienceMemberService` — passes through
+- `assignAudienceCoursesService` — passes through
+- `removeAudienceService` — passes through; `actorId` null defaults to `undefined`
+- `updateAudienceService` — no `actorId` → 401; calls update then re-fetches member
+
+## Total: 8 new files, 1 updated file
+
diff --git a/.env.example b/.env.example
index bfa8d638..2cb4f7da 100644
--- a/.env.example
+++ b/.env.example
@@ -92,6 +92,10 @@ OBJECT_STORAGE_MEDIA_PUBLIC_BASE_URL=http://localhost:9000/media
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# Dashboard: Google Drive video picker (optional). Web OAuth client ID + browser API key; enable Picker API and Drive API on the same GCP project.
+# PUBLIC_GOOGLE_PICKER_CLIENT_ID=
+# PUBLIC_GOOGLE_PICKER_API_KEY=
+
 # Cookie domain for auth. Set to your root domain (e.g. .yourdomain.com) when API and dashboard use different subdomains.
 # Without this, auth cookies may not be set and login will fail.
 AUTH_COOKIE_DOMAIN=
diff --git a/.github/workflows/deploy-embeds.yml b/.github/workflows/deploy-embeds.yml
new file mode 100644
index 00000000..67ff0b33
--- /dev/null
+++ b/.github/workflows/deploy-embeds.yml
@@ -0,0 +1,61 @@
+name: Deploy embeds to R2
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/ui/**"
+      - "packages/question-types/**"
+      - "apps/embeds/**"
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: "20"
+  PNPM_VERSION: "8"
+
+jobs:
+  build-and-deploy-embeds:
+    runs-on: ubuntu-latest
+    environment: production
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build and upload embeds to R2
+        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
+        run: pnpm --filter @cio/embeds run embeds:publish
+        env:
+          CLOUDFLARE_ACCESS_KEY: ${{ secrets.CLOUDFLARE_ACCESS_KEY }}
+          CLOUDFLARE_SECRET_ACCESS_KEY: ${{ secrets.CLOUDFLARE_SECRET_ACCESS_KEY }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          # Optional: purges Cloudflare edge cache for EMBED_CDN_BASE_URL (R2 has no HTTP cache). Token needs Zone → Cache Purge → Purge.
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+          EMBED_CDN_BASE_URL: ${{ vars.EMBED_CDN_BASE_URL }}
diff --git a/PRD-TRACKER.md b/PRD-TRACKER.md
index e90a80fb..f1d21f04 100644
--- a/PRD-TRACKER.md
+++ b/PRD-TRACKER.md
@@ -24,6 +24,7 @@ Use this file to keep a single prioritized view of all PRDs.
 | - | 10 | `prd/pricing-improvements` | todo |
 | - | 11 | `prd/public-api` | todo |
 | - | 12 | `prd/public-courses` | todo |
+| - | - | `prd/customer-course-documentation` | todo |
 | - | 15 | `prd/webhooks` | todo |
 
 ## DONE (Completed PRDs)
diff --git a/apps/api/scripts/README.md b/apps/api/scripts/README.md
index 9bf60375..e6076d7a 100644
--- a/apps/api/scripts/README.md
+++ b/apps/api/scripts/README.md
@@ -1,6 +1,6 @@
 # OpenAPI Spec Generator Script
 
-This script generates the OpenAPI specification from your Hono application and optionally uploads it to a Cloudflare R2 bucket.
+This script generates the OpenAPI specification for the public API routes only and optionally uploads it to a Cloudflare R2 bucket.
 
 ## Usage
 
@@ -38,10 +38,11 @@ CLOUDFLARE_ACCOUNT_ID=your_account_id
 The script will:
 
 1. **Generate** the OpenAPI specification from your Hono app routes
-2. **Save locally** to `dist/openapi/openapi.json`
-3. **Upload to R2** (if credentials provided):
-   - `openapi/openapi-YYYY-MM-DD.json` (dated version)
-   - `openapi/openapi-latest.json` (latest version)
+2. **Filter** the output to `/public-api/v1/*`
+3. **Save locally** to `dist/openapi/public-api/openapi.json`
+4. **Upload to R2** (if credentials provided):
+   - `openapi/public-api/openapi-YYYY-MM-DD.json` (dated version)
+   - `openapi/public-api/openapi-latest.json` (latest version)
 
 ## GitHub Action Integration
 
diff --git a/apps/api/scripts/upload-openapi-spec.ts b/apps/api/scripts/upload-openapi-spec.ts
index 4d04f6cd..fdbb3ecf 100644
--- a/apps/api/scripts/upload-openapi-spec.ts
+++ b/apps/api/scripts/upload-openapi-spec.ts
@@ -16,6 +16,35 @@ interface UploadOptions {
   contentType?: string;
 }
 
+function filterPublicApiSpec(spec: Record<string, unknown>) {
+  const paths = (spec.paths ?? {}) as Record<string, unknown>;
+  const publicApiPaths = Object.fromEntries(
+    Object.entries(paths).filter(([path]) => path.startsWith('/public-api/v1/'))
+  );
+
+  const tags = Array.isArray(spec.tags)
+    ? spec.tags.filter((tag) => {
+        if (!tag || typeof tag !== 'object' || !('name' in tag)) {
+          return false;
+        }
+
+        return typeof tag.name === 'string' && tag.name.startsWith('Public API');
+      })
+    : undefined;
+
+  return {
+    ...spec,
+    openapi: spec.openapi ?? '3.1.0',
+    info: {
+      title: 'ClassroomIO Public API',
+      version: '1.0.0',
+      description: 'Public API for managing organizations, audience members, and courses in ClassroomIO.'
+    },
+    paths: publicApiPaths,
+    tags
+  };
+}
+
 class OpenAPISpecGenerator {
   private s3Client: S3Client | null = null;
 
@@ -68,7 +97,8 @@ class OpenAPISpecGenerator {
         }
       });
 
-      const specString = JSON.stringify(spec, null, 2);
+      const publicApiSpec = filterPublicApiSpec(spec as Record<string, unknown>);
+      const specString = JSON.stringify(publicApiSpec, null, 2);
       console.log('✅ OpenAPI specification generated successfully');
 
       return specString;
@@ -80,7 +110,7 @@ class OpenAPISpecGenerator {
 
   async saveLocalSpec(spec: string): Promise<string> {
     try {
-      const outputDir = join(process.cwd(), 'dist', 'openapi');
+      const outputDir = join(process.cwd(), 'dist', 'openapi', 'public-api');
       mkdirSync(outputDir, { recursive: true });
 
       const filePath = join(outputDir, 'openapi.json');
@@ -122,10 +152,10 @@ class OpenAPISpecGenerator {
     try {
       const spec = await this.generateSpec();
 
-      // await this.saveLocalSpec(spec);
+      await this.saveLocalSpec(spec);
 
       if (this.s3Client) {
-        const uploadKey = `openapi/openapi-${new Date().toISOString().split('T')[0]}.json`;
+        const uploadKey = `openapi/public-api/openapi-${new Date().toISOString().split('T')[0]}.json`;
         await this.uploadToR2({
           key: uploadKey,
           content: spec,
@@ -134,7 +164,7 @@ class OpenAPISpecGenerator {
 
         // Also upload as latest version
         await this.uploadToR2({
-          key: 'openapi/openapi-latest.json',
+          key: 'openapi/public-api/openapi-latest.json',
           content: spec,
           contentType: 'application/json'
         });
diff --git a/apps/api/src/app.ts b/apps/api/src/app.ts
index 9822311e..76b310dc 100644
--- a/apps/api/src/app.ts
+++ b/apps/api/src/app.ts
@@ -20,11 +20,13 @@ import { organizationRouter } from '@api/routes/organization';
 import { licenseRouter } from '@api/routes/license';
 import { organizationSsoRouter } from '@api/routes/organization/sso';
 import { organizationTokenAuthRouter } from '@api/routes/organization/token-auth';
+import { v1Router } from '@api/routes/v1';
 import { ssoDiscoveryRouter } from '@api/routes/sso/discovery';
 import { prettyJSON } from 'hono/pretty-json';
 import rateLimiter from '@api/middlewares/rate-limiter';
 import { secureHeaders } from 'hono/secure-headers';
 import { signupGuard } from '@api/middlewares/signup-guard';
+import { programRouter } from '@api/routes/program';
 import { unsplashRouter } from '@api/routes/unsplash/unsplash';
 
 // Create Hono app with chaining for RPC support
@@ -94,6 +96,8 @@ export const app = new Hono()
   .route('/dash', dashAnalyticsRouter)
   .route('/community', communityRouter)
   .route('/invite', inviteRouter)
+  .route('/public-api/v1', v1Router)
+  .route('/program', programRouter)
   .route('/unsplash', unsplashRouter)
 
   // Error handling
diff --git a/apps/api/src/middlewares/automation-key-scopes.ts b/apps/api/src/middlewares/automation-key-scopes.ts
new file mode 100644
index 00000000..4ce71334
--- /dev/null
+++ b/apps/api/src/middlewares/automation-key-scopes.ts
@@ -0,0 +1,35 @@
+import { Context, Next } from 'hono';
+import type { TOrganizationApiKeyScope } from '@cio/utils/validation/organization';
+
+import { ErrorCodes } from '@api/utils/errors';
+import { organizationApiKeyHasScopes } from '@api/services/organization/automation-key';
+
+export const automationKeyScopesMiddleware =
+  (requiredScopes: readonly TOrganizationApiKeyScope[] = []) =>
+  async (c: Context, next: Next) => {
+    const automationKey = c.get('automationKey');
+
+    if (!automationKey) {
+      return c.json(
+        {
+          success: false,
+          error: 'Unauthorized',
+          code: ErrorCodes.UNAUTHORIZED
+        },
+        401
+      );
+    }
+
+    if (!organizationApiKeyHasScopes(automationKey.scopes ?? [], requiredScopes)) {
+      return c.json(
+        {
+          success: false,
+          error: 'Automation key is missing required scopes',
+          code: ErrorCodes.FORBIDDEN
+        },
+        403
+      );
+    }
+
+    return next();
+  };
diff --git a/apps/api/src/middlewares/course-member.ts b/apps/api/src/middlewares/course-member.ts
index d7e7f389..aa406a0e 100644
--- a/apps/api/src/middlewares/course-member.ts
+++ b/apps/api/src/middlewares/course-member.ts
@@ -2,6 +2,7 @@ import { Context, Next } from 'hono';
 
 import { ErrorCodes } from '@api/utils/errors';
 import { isUserCourseMemberOrOrgAdmin } from '@cio/db/queries/group';
+import { ensureProgramCourseAccess } from '@api/services/course/course';
 
 /**
  * Middleware to check if the authenticated user is a member of a course's group
@@ -39,6 +40,11 @@ export const courseMemberMiddleware = async (c: Context, next: Next) => {
       return next();
     }
 
+    const backfilledFromProgram = await ensureProgramCourseAccess(courseId, user.id);
+    if (backfilledFromProgram) {
+      return next();
+    }
+
     return c.json(
       {
         success: false,
diff --git a/apps/api/src/middlewares/program-member.ts b/apps/api/src/middlewares/program-member.ts
new file mode 100644
index 00000000..8002f250
--- /dev/null
+++ b/apps/api/src/middlewares/program-member.ts
@@ -0,0 +1,64 @@
+import { Context, Next } from 'hono';
+
+import { ErrorCodes } from '@api/utils/errors';
+import { isOrgAdminByProgramId, isProgramMember } from '@cio/db/queries/program';
+
+/**
+ * Middleware to check if the authenticated user is a member of the program
+ * or an org admin for the program's organization.
+ */
+export const programMemberMiddleware = async (c: Context, next: Next) => {
+  try {
+    const user = c.get('user');
+    if (!user) {
+      return c.json(
+        {
+          success: false,
+          error: 'Unauthorized',
+          code: 'UNAUTHORIZED'
+        },
+        401
+      );
+    }
+
+    const programId = c.req.param('programId');
+    if (!programId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Program ID is required',
+          code: 'PROGRAM_ID_REQUIRED'
+        },
+        400
+      );
+    }
+
+    const [member, isOrgAdmin] = await Promise.all([
+      isProgramMember(programId, user.id),
+      isOrgAdminByProgramId(programId, user.id)
+    ]);
+
+    if (member || isOrgAdmin) {
+      return next();
+    }
+
+    return c.json(
+      {
+        success: false,
+        error: 'You must be a member of this program to perform this action',
+        code: ErrorCodes.PROGRAM_FORBIDDEN
+      },
+      403
+    );
+  } catch (error) {
+    console.error('Error in programMemberMiddleware:', error);
+    return c.json(
+      {
+        success: false,
+        error: 'Failed to verify program membership',
+        code: ErrorCodes.PROGRAM_MEMBER_CHECK_FAILED
+      },
+      500
+    );
+  }
+};
diff --git a/apps/api/src/middlewares/program-newsfeed-comment-author-or-team.ts b/apps/api/src/middlewares/program-newsfeed-comment-author-or-team.ts
new file mode 100644
index 00000000..0465a2e1
--- /dev/null
+++ b/apps/api/src/middlewares/program-newsfeed-comment-author-or-team.ts
@@ -0,0 +1,101 @@
+import { Context, Next } from 'hono';
+import { ErrorCodes } from '@api/utils/errors';
+import {
+  getProgramMemberByProfileId,
+  getProgramMemberRole,
+  getProgramNewsfeedById,
+  getProgramNewsfeedCommentById,
+  isOrgAdminByProgramId
+} from '@cio/db/queries/program';
+import { ROLE } from '@cio/utils/constants';
+
+export const programNewsfeedCommentAuthorOrTeamMiddleware = async (c: Context, next: Next) => {
+  try {
+    const user = c.get('user');
+    if (!user) {
+      return c.json(
+        {
+          success: false,
+          error: 'Unauthorized',
+          code: 'UNAUTHORIZED'
+        },
+        401
+      );
+    }
+
+    const commentId = c.req.param('commentId');
+    if (!commentId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Comment ID is required',
+          code: 'COMMENT_ID_REQUIRED'
+        },
+        400
+      );
+    }
+
+    const comment = await getProgramNewsfeedCommentById(Number(commentId));
+    if (!comment?.programNewsfeedId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Comment not found',
+          code: ErrorCodes.PROGRAM_NEWSFEED_COMMENT_NOT_FOUND
+        },
+        404
+      );
+    }
+
+    const feed = await getProgramNewsfeedById(comment.programNewsfeedId);
+    if (!feed?.programId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Program newsfeed item not found',
+          code: ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND
+        },
+        404
+      );
+    }
+
+    const member = await getProgramMemberByProfileId(feed.programId, user.id);
+    const isAuthor = comment.authorId === member?.id;
+    if (isAuthor) {
+      await next();
+      return;
+    }
+
+    const isOrgAdmin = await isOrgAdminByProgramId(feed.programId, user.id);
+    if (isOrgAdmin) {
+      await next();
+      return;
+    }
+
+    const roleId = await getProgramMemberRole(feed.programId, user.id);
+    const isTeamMember = roleId === ROLE.ADMIN || roleId === ROLE.TUTOR;
+    if (isTeamMember) {
+      await next();
+      return;
+    }
+
+    return c.json(
+      {
+        success: false,
+        error: 'Only the author or program team members can perform this action',
+        code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
+      },
+      403
+    );
+  } catch (error) {
+    console.error('Error in programNewsfeedCommentAuthorOrTeamMiddleware:', error);
+    return c.json(
+      {
+        success: false,
+        error: 'Failed to verify comment authorization',
+        code: 'COMMENT_AUTH_CHECK_FAILED'
+      },
+      500
+    );
+  }
+};
diff --git a/apps/api/src/middlewares/program-team-member.ts b/apps/api/src/middlewares/program-team-member.ts
new file mode 100644
index 00000000..6e88af5e
--- /dev/null
+++ b/apps/api/src/middlewares/program-team-member.ts
@@ -0,0 +1,65 @@
+import { Context, Next } from 'hono';
+
+import { ErrorCodes } from '@api/utils/errors';
+import { getProgramMemberRole, isOrgAdminByProgramId } from '@cio/db/queries/program';
+import { ROLE } from '@cio/utils/constants';
+
+/**
+ * Middleware to check if the authenticated user is a program teacher or org admin.
+ * Mirrors the course-team-member pattern for program routes.
+ */
+export const programTeamMemberMiddleware = async (c: Context, next: Next) => {
+  try {
+    const user = c.get('user');
+    if (!user) {
+      return c.json(
+        {
+          success: false,
+          error: 'Unauthorized',
+          code: 'UNAUTHORIZED'
+        },
+        401
+      );
+    }
+
+    const programId = c.req.param('programId');
+    if (!programId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Program ID is required',
+          code: 'PROGRAM_ID_REQUIRED'
+        },
+        400
+      );
+    }
+
+    const [roleId, isOrgAdmin] = await Promise.all([
+      getProgramMemberRole(programId, user.id),
+      isOrgAdminByProgramId(programId, user.id)
+    ]);
+
+    if (roleId === ROLE.TUTOR || roleId === ROLE.ADMIN || isOrgAdmin) {
+      return next();
+    }
+
+    return c.json(
+      {
+        success: false,
+        error: 'Unauthorized',
+        code: ErrorCodes.UNAUTHORIZED
+      },
+      403
+    );
+  } catch (error) {
+    console.error('Error in programTeamMemberMiddleware:', error);
+    return c.json(
+      {
+        success: false,
+        error: 'Failed to verify program team membership',
+        code: 'PROGRAM_TEAM_MEMBER_CHECK_FAILED'
+      },
+      500
+    );
+  }
+};
diff --git a/apps/api/src/middlewares/rate-limiter.ts b/apps/api/src/middlewares/rate-limiter.ts
index c921ac87..fba69161 100644
--- a/apps/api/src/middlewares/rate-limiter.ts
+++ b/apps/api/src/middlewares/rate-limiter.ts
@@ -88,8 +88,5 @@ export const createRateLimiter = (options: RateLimiterOptions = {}): MiddlewareH
 
 // Default rate limiter middleware with standard configuration
 export default createRateLimiter({
-  maxRequests: (c) =>
-    c.req.path === '/api/auth/get-session'
-      ? DEFAULT_RATE_LIMITER_OPTIONS.maxRequests * 3
-      : DEFAULT_RATE_LIMITER_OPTIONS.maxRequests
+  maxRequests: (c) => (c.req.path === '/api/auth/get-session' ? 1000 : DEFAULT_RATE_LIMITER_OPTIONS.maxRequests)
 });
diff --git a/apps/api/src/routes/invite/invite.ts b/apps/api/src/routes/invite/invite.ts
index e50b57f5..625bf143 100644
--- a/apps/api/src/routes/invite/invite.ts
+++ b/apps/api/src/routes/invite/invite.ts
@@ -1,7 +1,12 @@
 import { ZCourseInviteTokenParam } from '@cio/utils/validation/course/invite';
 import { previewStudentInvite } from '@api/services/course/invite';
 import { ZOrganizationInviteTokenParam } from '@cio/utils/validation/organization/invite';
-import { acceptOrganizationInvite, previewOrganizationInvite } from '@api/services/organization/invite';
+import {
+  acceptOrganizationInvite,
+  acceptOrganizationInviteById,
+  getPendingOrgInviteForUser,
+  previewOrganizationInvite
+} from '@api/services/organization/invite';
 
 import { Hono } from '@api/utils/hono';
 import { apiKeyMiddleware } from '@api/middlewares/api-key';
@@ -10,6 +15,7 @@ import { createRateLimiter } from '@api/middlewares/rate-limiter';
 import { handleError } from '@api/utils/errors';
 import { extractClientIp } from '@api/utils/redis/key-generators';
 import { zValidator } from '@hono/zod-validator';
+import * as z from 'zod';
 
 const previewInviteRateLimit = createRateLimiter({
   windowMs: 60 * 1000,
@@ -36,7 +42,73 @@ const acceptOrganizationInviteRateLimit = createRateLimiter({
   }
 });
 
+const pendingInviteRateLimit = createRateLimiter({
+  windowMs: 60 * 1000,
+  maxRequests: 30,
+  message: 'Too many pending invite requests. Please try again later.',
+  keyGenerator: (c) => {
+    const user = c.get('user');
+    return `invite_pending:${user?.id ?? extractClientIp(c)}`;
+  }
+});
+
+const acceptByIdRateLimit = createRateLimiter({
+  windowMs: 60 * 60 * 1000,
+  maxRequests: 20,
+  message: 'Too many invite accept attempts. Please try again later.',
+  keyGenerator: (c) => {
+    const user = c.get('user');
+    const actor = user?.id ? `user:${user.id}` : `ip:${extractClientIp(c)}`;
+    return `org_invite_accept_by_id:${actor}:${c.req.param('inviteId')}`;
+  }
+});
+
 export const inviteRouter = new Hono()
+  /**
+   * GET /invite/organization/pending
+   * Returns the active pending org invite for the currently logged-in user.
+   */
+  .get('/organization/pending', authMiddleware, pendingInviteRateLimit, async (c) => {
+    try {
+      const user = c.get('user')!;
+      const orgId = c.req.header('cio-org-id');
+
+      if (!orgId || !user.email) {
+        return c.json({ success: true, data: null }, 200);
+      }
+
+      const pendingInvite = await getPendingOrgInviteForUser(orgId, user.email);
+
+      return c.json({ success: true, data: pendingInvite }, 200);
+    } catch (error) {
+      return handleError(c, error, 'Failed to load pending invite');
+    }
+  })
+  /**
+   * POST /invite/organization/:inviteId/accept-by-id
+   * Accepts an org invite by invite ID (for logged-in users with a pending invite surfaced by /pending).
+   */
+  .post(
+    '/organization/:inviteId/accept-by-id',
+    authMiddleware,
+    acceptByIdRateLimit,
+    zValidator('param', z.object({ inviteId: z.string().uuid() })),
+    async (c) => {
+      try {
+        const { inviteId } = c.req.valid('param');
+        const user = c.get('user')!;
+        const result = await acceptOrganizationInviteById(
+          inviteId,
+          { id: user.id, email: user.email },
+          { ipAddress: extractClientIp(c), userAgent: c.req.header('user-agent') || null }
+        );
+
+        return c.json({ success: true, data: result }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to accept organization invite');
+      }
+    }
+  )
   /**
    * GET /invite/student/:token
    * Server-only preview for secure invite links (API key). Returns course, org, invite for enroll page.
diff --git a/apps/api/src/routes/organization/organization.ts b/apps/api/src/routes/organization/organization.ts
index 558050af..16782513 100644
--- a/apps/api/src/routes/organization/organization.ts
+++ b/apps/api/src/routes/organization/organization.ts
@@ -386,7 +386,7 @@ export const organizationRouter = new Hono()
         const orgId = c.get('orgId');
         const userRole = c.get('userRole');
         const automationKey = c.get('automationKey');
-        const { tags } = c.req.valid('query');
+        const query = c.req.valid('query');
 
         if (!orgId) {
           return c.json(
@@ -403,25 +403,28 @@ export const organizationRouter = new Hono()
           await assertMcpAutomationUsageAllowed(automationKey, 'list_org_courses');
         }
 
-        const tagSlugs = tags
-          ?.split(',')
-          .map((value) => value.trim())
-          .filter(Boolean);
         const result = await getOrganizationCourses(
           orgId,
           user?.id ?? automationKey?.createdByProfileId ?? '',
           userRole ?? ROLE.ADMIN,
-          tagSlugs && tagSlugs.length > 0 ? tagSlugs : undefined
+          query
         );
 
         if (automationKey?.type === 'mcp') {
-          await recordMcpAutomationUsage(automationKey, 'list_org_courses', { tags: tagSlugs });
+          await recordMcpAutomationUsage(automationKey, 'list_org_courses', {
+            tags: query.tags,
+            search: query.search,
+            page: query.page,
+            limit: query.limit
+          });
         }
 
         return c.json(
           {
             success: true,
-            data: result
+            data: result.items,
+            pagination: result.pagination,
+            query: result.query
           },
           200
         );
diff --git a/apps/api/src/routes/program/index.ts b/apps/api/src/routes/program/index.ts
new file mode 100644
index 00000000..3e5fdab7
--- /dev/null
+++ b/apps/api/src/routes/program/index.ts
@@ -0,0 +1 @@
+export { programRouter } from './program';
diff --git a/apps/api/src/routes/program/program.ts b/apps/api/src/routes/program/program.ts
new file mode 100644
index 00000000..e8ffc288
--- /dev/null
+++ b/apps/api/src/routes/program/program.ts
@@ -0,0 +1,487 @@
+import * as z from 'zod';
+
+import {
+  ZAddCourseToProgram,
+  ZAddProgramMembers,
+  ZCreateProgram,
+  ZCreateProgramNewsfeed,
+  ZCreateProgramNewsfeedComment,
+  ZUpdateProgram,
+  ZUpdateProgramMember,
+  ZUpdateProgramNewsfeed,
+  ZUpdateProgramReaction
+} from '@cio/utils/validation/program';
+import {
+  addCourseToProgramService,
+  addProgramMembers,
+  createProgram,
+  createProgramNewsfeedCommentService,
+  createProgramNewsfeedService,
+  deleteProgram,
+  removeProgramMemberService,
+  deleteProgramNewsfeedCommentService,
+  deleteProgramNewsfeedService,
+  getEnrolledPrograms,
+  getProgram,
+  listOrgPrograms,
+  listProgramCourses,
+  listProgramMembers,
+  listProgramNewsfeed,
+  listProgramNewsfeedComments,
+  removeCourseFromProgramService,
+  updateProgram,
+  updateProgramMemberService,
+  updateProgramNewsfeedReactionService,
+  updateProgramNewsfeedService
+} from '@api/services/program/program';
+
+import { Hono } from '@api/utils/hono';
+import { authMiddleware } from '@api/middlewares/auth';
+import { programMemberMiddleware } from '@api/middlewares/program-member';
+import { programTeamMemberMiddleware } from '@api/middlewares/program-team-member';
+import { programNewsfeedCommentAuthorOrTeamMiddleware } from '@api/middlewares/program-newsfeed-comment-author-or-team';
+import { handleError } from '@api/utils/errors';
+import { zValidator } from '@hono/zod-validator';
+
+const ZProgramParam = z.object({ programId: z.string().uuid() });
+const ZMemberParam = z.object({ programId: z.string().uuid(), memberId: z.string().uuid() });
+const ZCourseParam = z.object({ programId: z.string().uuid(), courseId: z.string().uuid() });
+const ZFeedParam = z.object({ programId: z.string().uuid(), feedId: z.string().uuid() });
+const ZCommentParam = z.object({
+  programId: z.string().uuid(),
+  feedId: z.string().uuid(),
+  commentId: z.coerce.number().int()
+});
+const ZListQuery = z.object({
+  cursor: z.string().optional(),
+  limit: z.coerce.number().int().min(1).max(50).default(10)
+});
+const ZOrgQuery = z.object({ organizationId: z.string().uuid() });
+
+export const programRouter = new Hono()
+  // ── Enrolled Programs (LMS) ─── must be before /:programId ───────────────
+
+  /**
+   * GET /program/enrolled
+   * Get programs the current user is enrolled in
+   */
+  .get('/enrolled', authMiddleware, async (c) => {
+    try {
+      const user = c.get('user')!;
+      const programs = await getEnrolledPrograms(user.id);
+      return c.json({ success: true, data: programs }, 200);
+    } catch (error) {
+      return handleError(c, error, 'Failed to get enrolled programs');
+    }
+  })
+
+  // ── Programs ──────────────────────────────────────────────────────────────
+
+  /**
+   * GET /program?organizationId=...
+   * List all programs for an org
+   */
+  .get('/', authMiddleware, zValidator('query', ZOrgQuery), async (c) => {
+    try {
+      const { organizationId } = c.req.valid('query');
+      const programs = await listOrgPrograms(organizationId);
+      return c.json({ success: true, data: programs }, 200);
+    } catch (error) {
+      return handleError(c, error, 'Failed to list programs');
+    }
+  })
+
+  /**
+   * POST /program
+   * Create a new program
+   */
+  .post(
+    '/',
+    authMiddleware,
+    zValidator('json', ZCreateProgram.extend({ organizationId: z.string().uuid() })),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const { organizationId, ...data } = c.req.valid('json');
+        const program = await createProgram(organizationId, user.id, data);
+        return c.json({ success: true, data: program }, 201);
+      } catch (error) {
+        return handleError(c, error, 'Failed to create program');
+      }
+    }
+  )
+
+  /**
+   * GET /program/:programId
+   * Get a program by ID
+   */
+  .get('/:programId', authMiddleware, programMemberMiddleware, zValidator('param', ZProgramParam), async (c) => {
+    try {
+      const { programId } = c.req.valid('param');
+      const program = await getProgram(programId);
+      return c.json({ success: true, data: program }, 200);
+    } catch (error) {
+      return handleError(c, error, 'Failed to get program');
+    }
+  })
+
+  /**
+   * PUT /program/:programId
+   * Update a program
+   */
+  .put(
+    '/:programId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    zValidator('json', ZUpdateProgram),
+    async (c) => {
+      try {
+        const { programId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const program = await updateProgram(programId, data);
+        return c.json({ success: true, data: program }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to update program');
+      }
+    }
+  )
+
+  /**
+   * DELETE /program/:programId
+   * Delete a program
+   */
+  .delete('/:programId', authMiddleware, programTeamMemberMiddleware, zValidator('param', ZProgramParam), async (c) => {
+    try {
+      const { programId } = c.req.valid('param');
+      const program = await deleteProgram(programId);
+      return c.json({ success: true, data: program }, 200);
+    } catch (error) {
+      return handleError(c, error, 'Failed to delete program');
+    }
+  })
+
+  // ── Members ───────────────────────────────────────────────────────────────
+
+  /**
+   * GET /program/:programId/members
+   * List program members
+   */
+  .get(
+    '/:programId/members',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    async (c) => {
+      try {
+        const { programId } = c.req.valid('param');
+        const members = await listProgramMembers(programId);
+        return c.json({ success: true, data: members }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to list program members');
+      }
+    }
+  )
+
+  /**
+   * POST /program/:programId/members
+   * Add members to a program
+   */
+  .post(
+    '/:programId/members',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    zValidator('json', ZAddProgramMembers),
+    async (c) => {
+      try {
+        const { programId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const result = await addProgramMembers(programId, data);
+        return c.json({ success: true, data: result }, 201);
+      } catch (error) {
+        return handleError(c, error, 'Failed to add program members');
+      }
+    }
+  )
+
+  /**
+   * PUT /program/:programId/members/:memberId
+   * Update a program member's role
+   */
+  .put(
+    '/:programId/members/:memberId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZMemberParam),
+    zValidator('json', ZUpdateProgramMember),
+    async (c) => {
+      try {
+        const { programId, memberId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const member = await updateProgramMemberService(programId, memberId, data);
+        return c.json({ success: true, data: member }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to update program member');
+      }
+    }
+  )
+
+  /**
+   * DELETE /program/:programId/members/:memberId
+   * Remove a member from a program
+   */
+  .delete(
+    '/:programId/members/:memberId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZMemberParam),
+    async (c) => {
+      try {
+        const { programId, memberId } = c.req.valid('param');
+        const member = await removeProgramMemberService(programId, memberId);
+        return c.json({ success: true, data: member }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to remove program member');
+      }
+    }
+  )
+
+  // ── Courses ───────────────────────────────────────────────────────────────
+
+  /**
+   * GET /program/:programId/courses
+   * List courses in a program
+   */
+  .get(
+    '/:programId/courses',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const { programId } = c.req.valid('param');
+        const courses = await listProgramCourses(programId, user.id);
+        return c.json({ success: true, data: courses }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to list program courses');
+      }
+    }
+  )
+
+  /**
+   * POST /program/:programId/courses
+   * Add a course to a program
+   */
+  .post(
+    '/:programId/courses',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    zValidator('json', ZAddCourseToProgram),
+    async (c) => {
+      try {
+        const { programId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const result = await addCourseToProgramService(programId, data);
+        return c.json({ success: true, data: result }, 201);
+      } catch (error) {
+        return handleError(c, error, 'Failed to add course to program');
+      }
+    }
+  )
+
+  /**
+   * DELETE /program/:programId/courses/:courseId
+   * Remove a course from a program
+   */
+  .delete(
+    '/:programId/courses/:courseId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZCourseParam),
+    async (c) => {
+      try {
+        const { programId, courseId } = c.req.valid('param');
+        const result = await removeCourseFromProgramService(programId, courseId);
+        return c.json({ success: true, data: result }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to remove course from program');
+      }
+    }
+  )
+
+  // ── Newsfeed ──────────────────────────────────────────────────────────────
+
+  /**
+   * GET /program/:programId/newsfeed
+   * List newsfeed for a program (paginated)
+   */
+  .get(
+    '/:programId/newsfeed',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    zValidator('query', ZListQuery),
+    async (c) => {
+      try {
+        const { programId } = c.req.valid('param');
+        const { cursor, limit } = c.req.valid('query');
+        const result = await listProgramNewsfeed(programId, { cursor, limit });
+        return c.json({ success: true, data: result }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to list program newsfeed');
+      }
+    }
+  )
+
+  /**
+   * POST /program/:programId/newsfeed
+   * Create a newsfeed post
+   */
+  .post(
+    '/:programId/newsfeed',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZProgramParam),
+    zValidator('json', ZCreateProgramNewsfeed),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const { programId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const feed = await createProgramNewsfeedService(programId, user.id, data);
+        return c.json({ success: true, data: feed }, 201);
+      } catch (error) {
+        return handleError(c, error, 'Failed to create program newsfeed post');
+      }
+    }
+  )
+
+  /**
+   * PUT /program/:programId/newsfeed/:feedId
+   * Update a newsfeed post
+   */
+  .put(
+    '/:programId/newsfeed/:feedId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZFeedParam),
+    zValidator('json', ZUpdateProgramNewsfeed),
+    async (c) => {
+      try {
+        const { feedId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const feed = await updateProgramNewsfeedService(feedId, data);
+        return c.json({ success: true, data: feed }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to update program newsfeed post');
+      }
+    }
+  )
+
+  /**
+   * PUT /program/:programId/newsfeed/:feedId/react
+   * Update reaction on a newsfeed post
+   */
+  .put(
+    '/:programId/newsfeed/:feedId/react',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZFeedParam),
+    zValidator('json', ZUpdateProgramReaction),
+    async (c) => {
+      try {
+        const { feedId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const feed = await updateProgramNewsfeedReactionService(feedId, data);
+        return c.json({ success: true, data: feed }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to update program newsfeed reaction');
+      }
+    }
+  )
+
+  /**
+   * DELETE /program/:programId/newsfeed/:feedId
+   * Delete a newsfeed post
+   */
+  .delete(
+    '/:programId/newsfeed/:feedId',
+    authMiddleware,
+    programTeamMemberMiddleware,
+    zValidator('param', ZFeedParam),
+    async (c) => {
+      try {
+        const { feedId } = c.req.valid('param');
+        const feed = await deleteProgramNewsfeedService(feedId);
+        return c.json({ success: true, data: feed }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to delete program newsfeed post');
+      }
+    }
+  )
+
+  /**
+   * GET /program/:programId/newsfeed/:feedId/comments
+   * List comments on a newsfeed post
+   */
+  .get(
+    '/:programId/newsfeed/:feedId/comments',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZFeedParam),
+    async (c) => {
+      try {
+        const { feedId } = c.req.valid('param');
+        const comments = await listProgramNewsfeedComments(feedId);
+        return c.json({ success: true, data: comments }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to list program newsfeed comments');
+      }
+    }
+  )
+
+  /**
+   * POST /program/:programId/newsfeed/:feedId/comment
+   * Create a comment on a newsfeed post
+   */
+  .post(
+    '/:programId/newsfeed/:feedId/comment',
+    authMiddleware,
+    programMemberMiddleware,
+    zValidator('param', ZFeedParam),
+    zValidator('json', ZCreateProgramNewsfeedComment),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const { feedId } = c.req.valid('param');
+        const data = c.req.valid('json');
+        const comment = await createProgramNewsfeedCommentService(feedId, user.id, data);
+        return c.json({ success: true, data: comment }, 201);
+      } catch (error) {
+        return handleError(c, error, 'Failed to create program newsfeed comment');
+      }
+    }
+  )
+
+  /**
+   * DELETE /program/:programId/newsfeed/:feedId/comment/:commentId
+   * Delete a comment on a newsfeed post
+   */
+  .delete(
+    '/:programId/newsfeed/:feedId/comment/:commentId',
+    authMiddleware,
+    programNewsfeedCommentAuthorOrTeamMiddleware,
+    zValidator('param', ZCommentParam),
+    async (c) => {
+      try {
+        const { commentId } = c.req.valid('param');
+        const comment = await deleteProgramNewsfeedCommentService(commentId);
+        return c.json({ success: true, data: comment }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to delete program newsfeed comment');
+      }
+    }
+  );
diff --git a/apps/api/src/routes/v1/audience.ts b/apps/api/src/routes/v1/audience.ts
new file mode 100644
index 00000000..6263a796
--- /dev/null
+++ b/apps/api/src/routes/v1/audience.ts
@@ -0,0 +1,299 @@
+import {
+  ZPublicApiAssignAudienceCourses,
+  ZPublicApiAudienceMemberParam,
+  ZPublicApiAudienceQuery,
+  ZPublicApiCreateAudience,
+  ZPublicApiUpdateAudience
+} from '@cio/utils/validation/public-api';
+import {
+  assignAudienceCoursesService,
+  createAudienceService,
+  getAudienceMemberService,
+  listAudienceService,
+  removeAudienceService,
+  updateAudienceService
+} from '@api/services/v1/audience';
+
+import { Hono } from '@api/utils/hono';
+import { automationKeyMiddleware } from '@api/middlewares/automation-key';
+import { automationKeyScopesMiddleware } from '@api/middlewares/automation-key-scopes';
+import { handleError } from '@api/utils/errors';
+import { describeRoute, validator } from 'hono-openapi';
+
+const AudienceListResponse = {
+  type: 'object' as const,
+  properties: {
+    success: { type: 'boolean' as const },
+    data: { type: 'array' as const, items: { type: 'object' as const } },
+    pagination: { type: 'object' as const },
+    query: { type: 'object' as const }
+  },
+  required: ['success', 'data', 'pagination', 'query']
+};
+
+const AudienceMutationResponse = {
+  type: 'object' as const,
+  properties: {
+    success: { type: 'boolean' as const },
+    data: { type: 'object' as const }
+  },
+  required: ['success', 'data']
+};
+
+const AudienceDetailResponse = {
+  type: 'object' as const,
+  properties: {
+    success: { type: 'boolean' as const },
+    data: { type: 'object' as const }
+  },
+  required: ['success', 'data']
+};
+
+export const v1AudienceRouter = new Hono()
+  .get(
+    '/',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'List audience members for the authenticated organization',
+      tags: ['Public API Audience'],
+      responses: {
+        200: {
+          description: 'Audience members returned successfully',
+          content: {
+            'application/json': {
+              schema: AudienceListResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' }
+      }
+    }),
+    validator('query', ZPublicApiAudienceQuery),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const query = c.req.valid('query');
+        const audience = await listAudienceService(orgId, query);
+
+        return c.json(
+          {
+            success: true,
+            data: audience.items,
+            pagination: audience.pagination,
+            query: audience.query
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to list audience members');
+      }
+    }
+  )
+  .post(
+    '/',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Create an audience member invitation for the authenticated organization',
+      tags: ['Public API Audience'],
+      responses: {
+        201: {
+          description: 'Audience member created successfully',
+          content: {
+            'application/json': {
+              schema: AudienceMutationResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' }
+      }
+    }),
+    validator('json', ZPublicApiCreateAudience),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const actorId = c.get('actorId');
+        const payload = c.req.valid('json');
+        const result = await createAudienceService(orgId, actorId, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: result
+          },
+          201
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to create audience member');
+      }
+    }
+  )
+  .post(
+    '/assign-courses',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Assign one or more audience members to one or more courses',
+      tags: ['Public API Audience'],
+      responses: {
+        200: {
+          description: 'Audience members assigned to courses successfully',
+          content: {
+            'application/json': {
+              schema: AudienceMutationResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' }
+      }
+    }),
+    validator('json', ZPublicApiAssignAudienceCourses),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const payload = c.req.valid('json');
+        const result = await assignAudienceCoursesService(orgId, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: result
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to assign audience to courses');
+      }
+    }
+  )
+  .get(
+    '/:memberId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Get a single audience member by id',
+      tags: ['Public API Audience'],
+      responses: {
+        200: {
+          description: 'Audience member returned successfully',
+          content: {
+            'application/json': {
+              schema: AudienceDetailResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Audience member not found' }
+      }
+    }),
+    validator('param', ZPublicApiAudienceMemberParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const audienceMember = await getAudienceMemberService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: audienceMember
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to fetch audience member');
+      }
+    }
+  )
+  .delete(
+    '/:memberId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Remove an audience member by id',
+      tags: ['Public API Audience'],
+      responses: {
+        200: {
+          description: 'Audience member removed successfully',
+          content: {
+            'application/json': {
+              schema: AudienceMutationResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Audience member not found' }
+      }
+    }),
+    validator('param', ZPublicApiAudienceMemberParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const actorId = c.get('actorId');
+        const { memberId } = c.req.valid('param');
+        const result = await removeAudienceService(orgId, memberId, actorId);
+
+        return c.json(
+          {
+            success: true,
+            data: result
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to remove audience member');
+      }
+    }
+  )
+  .put(
+    '/:memberId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Update a pending audience member email address',
+      tags: ['Public API Audience'],
+      responses: {
+        200: {
+          description: 'Audience member updated successfully',
+          content: {
+            'application/json': {
+              schema: AudienceDetailResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Audience member not found' }
+      }
+    }),
+    validator('param', ZPublicApiAudienceMemberParam),
+    validator('json', ZPublicApiUpdateAudience),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const actorId = c.get('actorId');
+        const { memberId } = c.req.valid('param');
+        const payload = c.req.valid('json');
+        const result = await updateAudienceService(orgId, memberId, actorId, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: result
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to update audience member');
+      }
+    }
+  );
diff --git a/apps/api/src/routes/v1/courses.ts b/apps/api/src/routes/v1/courses.ts
new file mode 100644
index 00000000..ec71bd25
--- /dev/null
+++ b/apps/api/src/routes/v1/courses.ts
@@ -0,0 +1,410 @@
+import {
+  ZPublicApiCourseParam,
+  ZPublicApiCoursesQuery,
+  ZPublicApiCreateCourse,
+  ZPublicApiUpdateCourse,
+  ZPublicApiUpdateCourseStructure
+} from '@cio/utils/validation/public-api';
+import {
+  createPublicApiCourseService,
+  deletePublicApiCourseService,
+  exportCourseService,
+  getCourseService,
+  listCoursesService,
+  listCourseStudentsService,
+  updatePublicApiCourseService,
+  updatePublicApiCourseStructureService
+} from '@api/services/v1/course';
+
+import { Hono } from '@api/utils/hono';
+import { automationKeyMiddleware } from '@api/middlewares/automation-key';
+import { automationKeyScopesMiddleware } from '@api/middlewares/automation-key-scopes';
+import { handleError } from '@api/utils/errors';
+import { describeRoute, validator } from 'hono-openapi';
+
+const CoursesListResponse = {
+  type: 'object' as const,
+  properties: {
+    success: { type: 'boolean' as const },
+    data: { type: 'array' as const, items: { type: 'object' as const } }
+  },
+  required: ['success', 'data']
+};
+
+const CourseDetailResponse = {
+  type: 'object' as const,
+  properties: {
+    success: { type: 'boolean' as const },
+    data: { type: 'object' as const }
+  },
+  required: ['success', 'data']
+};
+
+export const v1CoursesRouter = new Hono()
+  .get(
+    '/',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'List courses for the authenticated organization',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Courses returned successfully',
+          content: {
+            'application/json': {
+              schema: CoursesListResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' }
+      }
+    }),
+    validator('query', ZPublicApiCoursesQuery),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const query = c.req.valid('query');
+        const courses = await listCoursesService(orgId, query);
+
+        return c.json(
+          {
+            success: true,
+            data: courses
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to list courses');
+      }
+    }
+  )
+  .post(
+    '/',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Create a course for the authenticated organization',
+      tags: ['Public API Courses'],
+      responses: {
+        201: {
+          description: 'Course created successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' }
+      }
+    }),
+    validator('json', ZPublicApiCreateCourse),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const actorId = c.get('actorId');
+        const payload = c.req.valid('json');
+        const course = await createPublicApiCourseService(orgId, actorId, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: course
+          },
+          201
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to create course');
+      }
+    }
+  )
+  .get(
+    '/:courseId/students',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'List enrolled students for a course',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course students returned successfully',
+          content: {
+            'application/json': {
+              schema: CoursesListResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const students = await listCourseStudentsService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: students
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to list course students');
+      }
+    }
+  )
+  .get(
+    '/:courseId/export',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Export a course structure snapshot',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course export returned successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const courseExport = await exportCourseService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: courseExport
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to export course');
+      }
+    }
+  )
+  .get(
+    '/:courseId/structure',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Get a course structure snapshot',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course structure returned successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const courseStructure = await exportCourseService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: courseStructure
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to fetch course structure');
+      }
+    }
+  )
+  .put(
+    '/:courseId/structure',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Synchronize a course structure using the draft payload shape',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course structure updated successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    validator('json', ZPublicApiUpdateCourseStructure),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const actorId = c.get('actorId');
+        const params = c.req.valid('param');
+        const payload = c.req.valid('json');
+        const result = await updatePublicApiCourseStructureService(orgId, actorId, params, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: result
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to update course structure');
+      }
+    }
+  )
+  .get(
+    '/:courseId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Get a single course by id',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course returned successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const course = await getCourseService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: course
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to fetch course');
+      }
+    }
+  )
+  .put(
+    '/:courseId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Update a course by id',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course updated successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        400: { description: 'Invalid request body' },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    validator('json', ZPublicApiUpdateCourse),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const payload = c.req.valid('json');
+        const course = await updatePublicApiCourseService(orgId, params, payload);
+
+        return c.json(
+          {
+            success: true,
+            data: course
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to update course');
+      }
+    }
+  )
+  .delete(
+    '/:courseId',
+    automationKeyMiddleware,
+    automationKeyScopesMiddleware(['public_api:*']),
+    describeRoute({
+      description: 'Delete a course by id',
+      tags: ['Public API Courses'],
+      responses: {
+        200: {
+          description: 'Course deleted successfully',
+          content: {
+            'application/json': {
+              schema: CourseDetailResponse
+            }
+          }
+        },
+        401: { description: 'Unauthorized' },
+        403: { description: 'Forbidden' },
+        404: { description: 'Course not found' }
+      }
+    }),
+    validator('param', ZPublicApiCourseParam),
+    async (c) => {
+      try {
+        const orgId = c.get('orgId')!;
+        const params = c.req.valid('param');
+        const course = await deletePublicApiCourseService(orgId, params);
+
+        return c.json(
+          {
+            success: true,
+            data: course
+          },
+          200
+        );
+      } catch (error) {
+        return handleError(c, error, 'Failed to delete course');
+      }
+    }
+  );
diff --git a/apps/api/src/routes/v1/index.ts b/apps/api/src/routes/v1/index.ts
new file mode 100644
index 00000000..9f06aa5a
--- /dev/null
+++ b/apps/api/src/routes/v1/index.ts
@@ -0,0 +1,5 @@
+import { Hono } from '@api/utils/hono';
+import { v1AudienceRouter } from './audience';
+import { v1CoursesRouter } from './courses';
+
+export const v1Router = new Hono().route('/audience', v1AudienceRouter).route('/courses', v1CoursesRouter);
diff --git a/apps/api/src/services/community.ts b/apps/api/src/services/community.ts
index 9326f187..36d49891 100644
--- a/apps/api/src/services/community.ts
+++ b/apps/api/src/services/community.ts
@@ -45,7 +45,7 @@ export async function fetchCommunityQuestions(
       case ROLE.TUTOR:
         // Tutors can see questions in courses they have access to
         const tutorCourses = await getOrgCourses({ orgId, profileId: userId });
-        const tutorCourseIds = tutorCourses.map((course) => course.id);
+        const tutorCourseIds = tutorCourses.items.map((course) => course.id);
         discussions = await getCommunityQuestions({ courseIds: tutorCourseIds });
         break;
       case ROLE.STUDENT:
diff --git a/apps/api/src/services/course-import/course-import.ts b/apps/api/src/services/course-import/course-import.ts
index 6481180b..1e1c222f 100644
--- a/apps/api/src/services/course-import/course-import.ts
+++ b/apps/api/src/services/course-import/course-import.ts
@@ -16,7 +16,11 @@ import {
   updateCourseSectionService
 } from '@api/services/course/section';
 import { createLesson, listLessons, updateLessonService, deleteLessonService } from '@api/services/lesson';
-import { upsertLessonLanguageService, updateLessonLanguageService } from '@api/services/lesson-language';
+import {
+  deleteLessonLanguageService,
+  upsertLessonLanguageService,
+  updateLessonLanguageService
+} from '@api/services/lesson-language';
 import {
   createCourseImportDraft,
   getCourseImportDraftById,
@@ -76,6 +80,10 @@ type PublishDraftToExistingCourseResult = PublishDraftResult & {
   updatedExercises: number;
   createdLessonLanguages: number;
   updatedLessonLanguages: number;
+  deletedSections: number;
+  deletedLessons: number;
+  deletedExercises: number;
+  deletedLessonLanguages: number;
   untouchedSections: number;
   untouchedLessons: number;
   untouchedExercises: number;
@@ -579,7 +587,7 @@ export async function createCourseImportDraftFromCourseService(
 
 export async function getCourseImportStructureService(orgId: string, courseId: string) {
   try {
-    return await buildCourseStructureSnapshot(orgId, courseId);
+    return buildCourseStructureSnapshot(orgId, courseId);
   } catch (error) {
     if (error instanceof AppError) {
       throw error;
@@ -863,6 +871,7 @@ export async function publishCourseImportDraftToExistingCourseService(
     const existingDraft = await getCourseImportDraftService(orgId, draftId);
     const draft = parseStoredDraft(existingDraft);
     const course = await getCourseRecord(orgId, overrides.courseId);
+    const syncMode = overrides.syncMode ?? 'merge';
     const courseTitle = overrides.title ?? draft.course.title;
     const courseDescription = overrides.description ?? draft.course.description;
     const courseType = overrides.type ?? draft.course.type;
@@ -1003,10 +1012,10 @@ export async function publishCourseImportDraftToExistingCourseService(
     }
 
     const appliedTagNames = normalizeDraftTagNames(draft.tags);
-    if (appliedTagNames.length > 0) {
+    if (appliedTagNames.length > 0 || syncMode === 'replace') {
       await assignCourseTagsByName(orgId, course.id, {
         tagNames: appliedTagNames,
-        mode: 'merge'
+        mode: syncMode
       });
     }
 
@@ -1015,6 +1024,72 @@ export async function publishCourseImportDraftToExistingCourseService(
     const referencedExerciseIds = new Set(
       (draft.exercises ?? []).map((exercise) => exercise.externalId).filter((id) => existingExerciseIds.has(id))
     );
+    let deletedLessonLanguages = 0;
+    let deletedExercises = 0;
+    let deletedLessons = 0;
+    let deletedSections = 0;
+
+    if (syncMode === 'replace') {
+      const referencedLanguageKeys = new Set(
+        draft.lessonLanguages
+          .map((lessonLanguage) => {
+            const lessonId = lessonIdMap.get(lessonLanguage.lessonExternalId);
+            if (!lessonId || !referencedLessonIds.has(lessonId)) {
+              return null;
+            }
+
+            return `${lessonId}:${lessonLanguage.locale}`;
+          })
+          .filter((languageKey): languageKey is string => Boolean(languageKey))
+      );
+
+      for (const lessonLanguage of existingLessonLanguages) {
+        const lessonId = lessonLanguage.lessonId;
+        if (!lessonId) {
+          continue;
+        }
+
+        if (!referencedLessonIds.has(lessonId)) {
+          continue;
+        }
+
+        const languageKey = `${lessonId}:${lessonLanguage.locale}`;
+        if (referencedLanguageKeys.has(languageKey)) {
+          continue;
+        }
+
+        await deleteLessonLanguageService(lessonId, lessonLanguage.locale as TLocale);
+        deletedLessonLanguages += 1;
+      }
+
+      for (const existingExercise of existingExercises) {
+        if (referencedExerciseIds.has(existingExercise.id)) {
+          continue;
+        }
+
+        await deleteExerciseService(existingExercise.id);
+        deletedExercises += 1;
+      }
+
+      for (const existingLesson of existingLessons) {
+        if (referencedLessonIds.has(existingLesson.id)) {
+          continue;
+        }
+
+        await deleteLessonService(existingLesson.id);
+        deletedLessons += 1;
+      }
+
+      for (const existingSection of existingSections) {
+        if (referencedSectionIds.has(existingSection.id)) {
+          continue;
+        }
+
+        await deleteCourseSectionService(existingSection.id);
+        deletedSections += 1;
+      }
+    }
+
     const courseUrl = await resolveCourseUrl(orgId, course.id, courseTitle);
 
     await updateCourseImportDraft(orgId, draftId, {
@@ -1026,8 +1101,14 @@ export async function publishCourseImportDraftToExistingCourseService(
         publishedCourseId: course.id,
         updatedSections,
         updatedLessons,
+        updatedExercises,
         createdLessonLanguages,
-        updatedLessonLanguages
+        updatedLessonLanguages,
+        deletedSections,
+        deletedLessons,
+        deletedExercises,
+        deletedLessonLanguages,
+        syncMode
       }
     });
 
@@ -1044,9 +1125,13 @@ export async function publishCourseImportDraftToExistingCourseService(
       updatedExercises,
       createdLessonLanguages,
       updatedLessonLanguages,
-      untouchedSections: existingSections.length - referencedSectionIds.size,
-      untouchedLessons: existingLessons.length - referencedLessonIds.size,
-      untouchedExercises: existingExercises.length - referencedExerciseIds.size,
+      deletedSections,
+      deletedLessons,
+      deletedExercises,
+      deletedLessonLanguages,
+      untouchedSections: Math.max(existingSections.length - referencedSectionIds.size - deletedSections, 0),
+      untouchedLessons: Math.max(existingLessons.length - referencedLessonIds.size - deletedLessons, 0),
+      untouchedExercises: Math.max(existingExercises.length - referencedExerciseIds.size - deletedExercises, 0),
       localeCount: new Set(draft.lessonLanguages.map((item) => item.locale)).size
     };
   } catch (error) {
diff --git a/apps/api/src/services/course/course.ts b/apps/api/src/services/course/course.ts
index fd10ff2d..443974ee 100644
--- a/apps/api/src/services/course/course.ts
+++ b/apps/api/src/services/course/course.ts
@@ -1,6 +1,6 @@
 import { AppError, ErrorCodes } from '@api/utils/errors';
 import { sanitizeHtml, sanitizeOptionalHtml, sanitizeUnknownStrings } from '@api/utils/sanitize-html';
-import { addGroupMember, createGroup } from '@cio/db/queries/group';
+import { addGroupMember, createGroup, getCourseProgramAccess } from '@cio/db/queries/group';
 import {
   createCourseNewsfeed,
   createCourse as createCourseQuery,
@@ -21,6 +21,7 @@ import {
 import { ContentType, ROLE } from '@cio/utils/constants';
 import type { TCourse } from '@cio/db/types';
 import { db } from '@cio/db/drizzle';
+import * as schema from '@db/schema';
 import { exerciseBelongsToCourse } from '@cio/db/queries/course/certification-exercise';
 import { updateExercisesSectionId } from '@cio/db/queries/exercise/exercise';
 import { getProfileById } from '@cio/db/queries/auth';
@@ -29,6 +30,45 @@ import { buildCourseContent, calcPercentageWithRounding, formatLastSeen, type Co
 const DEFAULT_CONTENT_GROUPING = true;
 const DEFAULT_SECTION_TITLE = 'First Section [edit me]';
 
+export async function ensureProgramCourseAccess(courseId: string, profileId: string) {
+  const access = await getCourseProgramAccess(courseId, profileId);
+  if (!access) {
+    return false;
+  }
+
+  const organizationId = access.organizationId;
+  if (!organizationId) {
+    return false;
+  }
+
+  const normalizedEmail = access.profileEmail?.trim() || undefined;
+
+  await db.transaction(async (tx) => {
+    await tx
+      .insert(schema.organizationmember)
+      .values({
+        organizationId,
+        roleId: access.roleId,
+        profileId,
+        email: normalizedEmail,
+        verified: true
+      })
+      .onConflictDoNothing();
+
+    await tx
+      .insert(schema.groupmember)
+      .values({
+        groupId: access.courseGroupId,
+        roleId: access.roleId,
+        profileId,
+        email: normalizedEmail
+      })
+      .onConflictDoNothing();
+  });
+
+  return true;
+}
+
 function sanitizeCourseMetadata(metadata: TCourse['metadata'] | undefined) {
   if (!metadata) return metadata;
 
@@ -133,49 +173,57 @@ export async function createCourse(
   try {
     const description = sanitizeHtml(data.description);
 
-    const result = await db.transaction(async () => {
-      // 1. Create group
-      const [newGroup] = await createGroup({
-        name: data.title,
-        description,
-        organizationId: data.organizationId
-      });
+    const result = await db.transaction(async (tx) => {
+      const [newGroup] = await createGroup(
+        {
+          name: data.title,
+          description,
+          organizationId: data.organizationId
+        },
+        tx
+      );
 
       if (!newGroup) {
         throw new AppError('Failed to create group', ErrorCodes.INTERNAL_ERROR, 500);
       }
 
-      // 2. Create course with group_id
-      const [newCourse] = await createCourseQuery({
-        title: data.title,
-        description,
-        type: data.type,
-        groupId: newGroup.id
-      });
+      const [newCourse] = await createCourseQuery(
+        {
+          title: data.title,
+          description,
+          type: data.type,
+          groupId: newGroup.id
+        },
+        tx
+      );
 
       if (!newCourse) {
         throw new AppError('Failed to create course', ErrorCodes.INTERNAL_ERROR, 500);
       }
 
-      // 3. Add group member (creator as TUTOR)
-      const [newMember] = await addGroupMember({
-        profileId,
-        groupId: newGroup.id,
-        roleId: ROLE.TUTOR
-      });
+      const [newMember] = await addGroupMember(
+        {
+          profileId,
+          groupId: newGroup.id,
+          roleId: ROLE.TUTOR
+        },
+        tx
+      );
 
       if (!newMember) {
         throw new AppError('Failed to add group member', ErrorCodes.INTERNAL_ERROR, 500);
       }
 
-      // 4. Add default news feed
-      await createCourseNewsfeed({
-        content: sanitizeHtml(`<h2>Welcome to this course 🎉&nbsp;</h2>
+      await createCourseNewsfeed(
+        {
+          content: sanitizeHtml(`<h2>Welcome to this course 🎉&nbsp;</h2>
 <p>Thank you for joining this course and I hope you get the best out of it.</p>`),
-        courseId: newCourse.id,
-        isPinned: true,
-        authorId: newMember.id
-      });
+          courseId: newCourse.id,
+          isPinned: true,
+          authorId: newMember.id
+        },
+        tx
+      );
 
       return {
         course: newCourse,
diff --git a/apps/api/src/services/dash.ts b/apps/api/src/services/dash.ts
index 371bec61..a911661f 100644
--- a/apps/api/src/services/dash.ts
+++ b/apps/api/src/services/dash.ts
@@ -1,16 +1,21 @@
 import { AppError, ErrorCodes } from '@api/utils/errors';
-import { getCourseStats, getDashOrgStats, getRecentEnrollments } from '@cio/db/queries/dash';
+import {
+  getCourseStats,
+  getDashOrgStats,
+  getRecentCertifications,
+  getTotalCertificatesIssued
+} from '@cio/db/queries/dash';
 
 import { OrganisationAnalytics } from '@api/types';
 import { getOrgIdBySiteName } from '@cio/db/queries';
 
 export async function getOrganisationAnalytics(orgId?: string, siteName?: string): Promise<OrganisationAnalytics> {
   const analytics: OrganisationAnalytics = {
-    revenue: 0,
+    totalCertificates: 0,
     numberOfCourses: 0,
     totalStudents: 0,
     topCourses: [],
-    enrollments: []
+    recentCertifications: []
   };
 
   let resolvedOrgId = orgId;
@@ -26,13 +31,14 @@ export async function getOrganisationAnalytics(orgId?: string, siteName?: string
   }
 
   try {
-    const [stats, topCourses, enrollments] = await Promise.all([
+    const [stats, topCourses, recentCertificationRows, certificateCountRows] = await Promise.all([
       getDashOrgStats(resolvedOrgId!),
       getCourseStats(resolvedOrgId!),
-      getRecentEnrollments(resolvedOrgId!)
+      getRecentCertifications(resolvedOrgId!),
+      getTotalCertificatesIssued(resolvedOrgId!)
     ]);
 
-    analytics.revenue = 0;
+    analytics.totalCertificates = certificateCountRows[0]?.count ?? 0;
     analytics.numberOfCourses = stats?.[0]?.noOfCourses ?? 0;
     analytics.totalStudents = stats?.[0]?.enrolledStudents ?? 0;
 
@@ -40,16 +46,17 @@ export async function getOrganisationAnalytics(orgId?: string, siteName?: string
       id: c.courseId,
       title: c.courseTitle,
       enrollments: c.totalStudents,
-      completion: c.completionPercentage
+      completion: c.completionPercentage,
+      certification: c.certificationPercentage
     }));
 
-    analytics.enrollments = enrollments.map((e) => ({
-      id: e.profileId,
-      avatarUrl: e.avatarUrl,
-      name: e.fullname,
-      courseId: e.courseId,
-      course: e.courseTitle,
-      date: e.enrolledAt ?? ''
+    analytics.recentCertifications = recentCertificationRows.map((row) => ({
+      id: row.profileId,
+      avatarUrl: row.avatarUrl,
+      name: row.fullname,
+      courseId: row.courseId,
+      course: row.courseTitle,
+      date: row.earnedAt ?? ''
     }));
 
     return analytics;
diff --git a/apps/api/src/services/exercise/exercise.ts b/apps/api/src/services/exercise/exercise.ts
index 424f90dc..27b4041b 100644
--- a/apps/api/src/services/exercise/exercise.ts
+++ b/apps/api/src/services/exercise/exercise.ts
@@ -20,6 +20,7 @@ import {
   updateOptions,
   updateQuestions
 } from '@cio/db/queries/exercise';
+import { touchCourseUpdatedAt } from '@cio/db/queries/course';
 
 import { db } from '@cio/db/drizzle';
 import type { DbOrTxClient } from '@cio/db/drizzle';
@@ -123,7 +124,13 @@ export async function createExercise(data: TExerciseCreate): Promise<TExercise>
     }
 
     // Fetch the complete exercise with questions and options
-    return await getExercise(exercise.id);
+    const result = await getExercise(exercise.id);
+
+    if (sanitizedData.courseId) {
+      await touchCourseUpdatedAt(sanitizedData.courseId);
+    }
+
+    return result;
   } catch (error) {
     console.error('createExercise error:', error);
     if (error instanceof AppError) {
@@ -193,7 +200,9 @@ export async function updateExerciseService(exerciseId: string, data: TExerciseU
   try {
     const sanitizedData = sanitizeExercisePayload(data);
 
-    return await db.transaction(async (tx) => {
+    const existing = await getExerciseById(exerciseId);
+
+    const result = await db.transaction(async (tx) => {
       const txClient = tx as DbOrTxClient;
 
       // Update exercise basic fields only if they changed
@@ -252,6 +261,13 @@ export async function updateExerciseService(exerciseId: string, data: TExerciseU
       // Return the updated exercise
       return await getExercise(exerciseId, txClient);
     });
+
+    const courseId = existing?.courseId;
+    if (courseId) {
+      await touchCourseUpdatedAt(courseId);
+    }
+
+    return result;
   } catch (error) {
     console.error('updateExerciseService error:', error);
     if (error instanceof AppError) {
@@ -270,7 +286,9 @@ export async function replaceExerciseService(exerciseId: string, data: TExercise
   try {
     const sanitizedData = sanitizeExercisePayload(data);
 
-    return await db.transaction(async (tx) => {
+    const existing = await getExerciseById(exerciseId);
+
+    const result = await db.transaction(async (tx) => {
       const txClient = tx as DbOrTxClient;
 
       const exerciseUpdate = buildExerciseUpdateFields(sanitizedData);
@@ -303,6 +321,13 @@ export async function replaceExerciseService(exerciseId: string, data: TExercise
 
       return await getExercise(exerciseId, txClient);
     });
+
+    const courseId = existing?.courseId;
+    if (courseId) {
+      await touchCourseUpdatedAt(courseId);
+    }
+
+    return result;
   } catch (error) {
     console.error('replaceExerciseService error:', error);
     if (error instanceof AppError) {
@@ -330,6 +355,10 @@ export async function deleteExerciseService(exerciseId: string): Promise<TExerci
       throw new AppError('Failed to delete exercise', ErrorCodes.INTERNAL_ERROR, 500);
     }
 
+    if (exercise.courseId) {
+      await touchCourseUpdatedAt(exercise.courseId);
+    }
+
     return deleted;
   } catch (error) {
     if (error instanceof AppError) {
diff --git a/apps/api/src/services/lesson-language.ts b/apps/api/src/services/lesson-language.ts
index 6ff5b9d3..a94d822d 100644
--- a/apps/api/src/services/lesson-language.ts
+++ b/apps/api/src/services/lesson-language.ts
@@ -2,6 +2,7 @@ import { AppError, ErrorCodes } from '@api/utils/errors';
 import { sanitizeOptionalHtml } from '@api/utils/sanitize-html';
 import type { TLessonLanguage, TLocale, TNewLessonLanguage } from '@db/types';
 import {
+  deleteLessonLanguage,
   getLessonLanguageByLessonIdAndLocale,
   getLessonLanguagesByLessonId,
   updateLessonLanguage,
@@ -9,6 +10,7 @@ import {
 } from '@cio/db/queries/lesson/language';
 
 import { getLessonById } from '@cio/db/queries/lesson/lesson';
+import { touchCourseUpdatedAt } from '@cio/db/queries/course';
 
 /**
  * Gets all language translations for a lesson
@@ -70,6 +72,10 @@ export async function upsertLessonLanguageService(
       lessonId
     });
 
+    if (lesson.courseId) {
+      await touchCourseUpdatedAt(lesson.courseId);
+    }
+
     return language;
   } catch (error) {
     if (error instanceof AppError) {
@@ -111,6 +117,11 @@ export async function updateLessonLanguageService(
       ...data,
       content: sanitizeOptionalHtml(data.content)
     });
+
+    if (lesson.courseId) {
+      await touchCourseUpdatedAt(lesson.courseId);
+    }
+
     return language;
   } catch (error) {
     if (error instanceof AppError) {
@@ -123,3 +134,38 @@ export async function updateLessonLanguageService(
     );
   }
 }
+
+export async function deleteLessonLanguageService(lessonId: string, locale: TLocale): Promise<TLessonLanguage> {
+  try {
+    const lesson = await getLessonById(lessonId);
+    if (!lesson) {
+      throw new AppError('Lesson not found', ErrorCodes.LESSON_NOT_FOUND, 404);
+    }
+
+    const existing = await getLessonLanguageByLessonIdAndLocale(lessonId, locale);
+    if (!existing) {
+      throw new AppError('Lesson language not found', ErrorCodes.LESSON_LANGUAGE_NOT_FOUND, 404);
+    }
+
+    const deleted = await deleteLessonLanguage(lessonId, locale);
+    if (!deleted) {
+      throw new AppError('Lesson language not found', ErrorCodes.LESSON_LANGUAGE_NOT_FOUND, 404);
+    }
+
+    if (lesson.courseId) {
+      await touchCourseUpdatedAt(lesson.courseId);
+    }
+
+    return deleted;
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to delete lesson language',
+      ErrorCodes.LESSON_LANGUAGE_DELETE_FAILED,
+      500
+    );
+  }
+}
diff --git a/apps/api/src/services/lesson/lesson.ts b/apps/api/src/services/lesson/lesson.ts
index 78099787..a4deda17 100644
--- a/apps/api/src/services/lesson/lesson.ts
+++ b/apps/api/src/services/lesson/lesson.ts
@@ -18,6 +18,7 @@ import {
   upsertLessonCompletion,
   type LessonById
 } from '@cio/db/queries/lesson';
+import { touchCourseUpdatedAt } from '@cio/db/queries/course';
 import { enrichLessonWithPresignedUrls } from '@api/utils/lesson-media';
 
 /**
@@ -38,6 +39,8 @@ export async function createLesson(courseId: string, data: TLessonCreate): Promi
       throw new AppError('Failed to create lesson', ErrorCodes.INTERNAL_ERROR, 500);
     }
 
+    await touchCourseUpdatedAt(courseId);
+
     return lesson;
   } catch (error) {
     if (error instanceof AppError) {
@@ -91,6 +94,10 @@ export async function updateLessonService(lessonId: string, data: TLessonUpdate)
       throw new AppError('Failed to update lesson', ErrorCodes.INTERNAL_ERROR, 500);
     }
 
+    if (updated.courseId) {
+      await touchCourseUpdatedAt(updated.courseId);
+    }
+
     return updated;
   } catch (error) {
     if (error instanceof AppError) {
@@ -117,6 +124,10 @@ export async function deleteLessonService(lessonId: string): Promise<TLesson> {
       throw new AppError('Failed to delete lesson', ErrorCodes.INTERNAL_ERROR, 500);
     }
 
+    if (deleted.courseId) {
+      await touchCourseUpdatedAt(deleted.courseId);
+    }
+
     return deleted;
   } catch (error) {
     if (error instanceof AppError) {
@@ -168,7 +179,14 @@ export async function reorderLessons(lessons: TLessonReorder['lessons']): Promis
     );
 
     const updated = await Promise.all(updatePromises);
-    return updated.filter((l): l is TLesson => l !== null);
+    const validLessons = updated.filter((l): l is TLesson => l !== null);
+
+    const courseId = validLessons[0]?.courseId;
+    if (courseId) {
+      await touchCourseUpdatedAt(courseId);
+    }
+
+    return validLessons;
   } catch (error) {
     throw new AppError(
       error instanceof Error ? error.message : 'Failed to reorder lessons',
diff --git a/apps/api/src/services/organization.ts b/apps/api/src/services/organization.ts
index 55131237..09d1c65d 100644
--- a/apps/api/src/services/organization.ts
+++ b/apps/api/src/services/organization.ts
@@ -1,14 +1,18 @@
 import { AppError, ErrorCodes } from '@api/utils/errors';
+import type { OrgAudienceMember, OrgAudiencePagination, OrgAudienceQuery } from '@api/types/org';
+import type { TGetAudienceQuery, TGetOrganizationCoursesQuery } from '@cio/utils/validation/organization';
 import type { TNewOrganizationPlan, TOrganization, TOrganizationPlan } from '@db/types';
 import {
-  deleteOrganizationAudienceMember,
   cancelOrganizationPlan,
   createOrganizationPlan,
+  deleteOrganizationAudienceMember,
   deleteOrganizationMember,
-  getOrgIdBySiteName,
+  getActiveOrganizationPlan,
   getFirstOrganizationWithPlans,
   getLatestOrgInvitesByEmails,
+  getOrgIdBySiteName,
   getOrganizationAudience,
+  getOrganizationAudienceMember,
   getOrganizationBySiteName,
   getOrganizationTeam,
   getOrganizations,
@@ -16,8 +20,8 @@ import {
   updateOrganization,
   updateOrganizationPlan
 } from '@cio/db/queries/organization';
-import { getCourseIdsByTagSlugs, getCourseTagsByCourseIdsForOrganization } from '@cio/db/queries/tag';
 import {
+  countPublishedCoursesBySiteName,
   getCoursesById,
   getCoursesBySiteNameForSetup,
   getEnrolledCourses,
@@ -27,16 +31,18 @@ import {
   getOrgCourses,
   getPublishedCoursesBySiteName
 } from '@cio/db/queries/course';
+import { getCourseIdsByTagSlugs, getCourseTagsByCourseIdsForOrganization } from '@cio/db/queries/tag';
 import { getLastLogin, getProfileCourseProgress, getUserExercisesStats } from '@cio/db/queries/analytics';
 
 import type { OrganizationWithPlans } from '@cio/db/queries/organization/types';
+import { PLAN } from '@cio/utils/plans';
 import { ROLE } from '@cio/utils/constants';
 import { createOrganizationWithOwner } from '@api/services/onboarding';
+import { deriveAudienceMemberStatus } from '@api/utils/audience-member-status';
 import { getProfileById } from '@cio/db/queries/auth';
 import { inviteTeamMembers as inviteTeamMembersSecure } from './organization/invite';
-import { deriveAudienceMemberStatus } from '@api/utils/audience-member-status';
-import type { OrgAudienceMember, OrgAudiencePagination, OrgAudienceQuery } from '@api/types/org';
-import type { TGetAudienceQuery } from '@cio/utils/validation/organization';
+
+const PUBLIC_ORG_LANDING_PAGE_COURSE_LIMIT = 4;
 
 /**
  * Creates a new organization with the current user as owner
@@ -169,6 +175,41 @@ export async function getOrgAudience(
   }
 }
 
+export async function getOrgAudienceMember(orgId: string, memberId: number): Promise<OrgAudienceMember> {
+  try {
+    const member = await getOrganizationAudienceMember(orgId, memberId);
+
+    if (!member) {
+      throw new AppError('Audience member not found', ErrorCodes.NOT_FOUND, 404);
+    }
+
+    if (!member.profileId && member.email) {
+      const invites = await getLatestOrgInvitesByEmails(orgId, [member.email.toLowerCase()]);
+      const invite = invites[0];
+
+      return {
+        ...member,
+        status: deriveAudienceMemberStatus(member.profileId, invite)
+      };
+    }
+
+    return {
+      ...member,
+      status: deriveAudienceMemberStatus(member.profileId, undefined)
+    };
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to fetch audience member',
+      ErrorCodes.ORG_AUDIENCE_FETCH_FAILED,
+      500
+    );
+  }
+}
+
 /**
  * Removes a student audience member from an organization
  * @param orgId - The organization ID
@@ -218,20 +259,31 @@ export async function getPublicCourses(siteName: string, tagSlugs?: string[]) {
     if (tagSlugs && tagSlugs.length > 0) {
       filteredCourseIds = await getCourseIdsByTagSlugs(org.id, tagSlugs);
       if (filteredCourseIds.length === 0) {
-        return [];
+        return {
+          courses: [],
+          hasMoreCourses: false
+        };
       }
     }
 
-    const courses = await getPublishedCoursesBySiteName(siteName, filteredCourseIds);
+    const totalCourses = await countPublishedCoursesBySiteName(siteName, filteredCourseIds);
+    const courses = await getPublishedCoursesBySiteName(
+      siteName,
+      filteredCourseIds,
+      PUBLIC_ORG_LANDING_PAGE_COURSE_LIMIT
+    );
     const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
       org.id,
       courses.map((course) => course.id)
     );
 
-    return courses.map((course) => ({
-      ...course,
-      tags: tagsByCourseId[course.id] ?? []
-    }));
+    return {
+      courses: courses.map((course) => ({
+        ...course,
+        tags: tagsByCourseId[course.id] ?? []
+      })),
+      hasMoreCourses: totalCourses > courses.length
+    };
   } catch (error) {
     if (error instanceof AppError) throw error;
     throw new AppError(
@@ -251,44 +303,110 @@ export async function getPublicCourses(siteName: string, tagSlugs?: string[]) {
  * - Admins: all courses with totalStudents
  * - Tutors: assigned courses with totalStudents
  */
-export async function getOrganizationCourses(orgId: string, userId: string, userRole: number, tagSlugs?: string[]) {
+export async function getOrganizationCourses(
+  orgId: string,
+  userId: string,
+  userRole: number,
+  query: TGetOrganizationCoursesQuery
+) {
   try {
     if (!userRole) {
       throw new AppError('Invalid permissions', ErrorCodes.UNAUTHORIZED, 403);
     }
 
+    const { page, limit, search } = query;
+    const tagSlugs = query.tags
+      ?.split(',')
+      .map((value) => value.trim())
+      .filter(Boolean);
+
     let filteredCourseIds: string[] | undefined = undefined;
     if (tagSlugs && tagSlugs.length > 0) {
       filteredCourseIds = await getCourseIdsByTagSlugs(orgId, tagSlugs);
       if (filteredCourseIds.length === 0) {
-        return [];
+        return {
+          items: [],
+          pagination: {
+            page,
+            limit,
+            total: 0,
+            totalPages: 0
+          },
+          query: {
+            page,
+            limit,
+            search,
+            tags: query.tags
+          }
+        };
       }
     }
 
     switch (userRole) {
       case ROLE.ADMIN: {
-        const courses = await getOrgCourses({ orgId, courseIds: filteredCourseIds });
+        const courses = await getOrgCourses({
+          orgId,
+          courseIds: filteredCourseIds,
+          page,
+          limit,
+          search
+        });
         const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
           orgId,
-          courses.map((course) => course.id)
+          courses.items.map((course) => course.id)
         );
 
-        return courses.map((course) => ({
-          ...course,
-          tags: tagsByCourseId[course.id] ?? []
-        }));
+        return {
+          items: courses.items.map((course) => ({
+            ...course,
+            tags: tagsByCourseId[course.id] ?? []
+          })),
+          pagination: {
+            page: courses.page,
+            limit: courses.limit,
+            total: courses.total,
+            totalPages: courses.totalPages
+          },
+          query: {
+            page,
+            limit,
+            search,
+            tags: query.tags
+          }
+        };
       }
       case ROLE.TUTOR: {
-        const courses = await getOrgCourses({ orgId, profileId: userId, courseIds: filteredCourseIds });
+        const courses = await getOrgCourses({
+          orgId,
+          profileId: userId,
+          courseIds: filteredCourseIds,
+          page,
+          limit,
+          search
+        });
         const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
           orgId,
-          courses.map((course) => course.id)
+          courses.items.map((course) => course.id)
         );
 
-        return courses.map((course) => ({
-          ...course,
-          tags: tagsByCourseId[course.id] ?? []
-        }));
+        return {
+          items: courses.items.map((course) => ({
+            ...course,
+            tags: tagsByCourseId[course.id] ?? []
+          })),
+          pagination: {
+            page: courses.page,
+            limit: courses.limit,
+            total: courses.total,
+            totalPages: courses.totalPages
+          },
+          query: {
+            page,
+            limit,
+            search,
+            tags: query.tags
+          }
+        };
       }
       default:
         throw new AppError('Invalid permissions', ErrorCodes.UNAUTHORIZED, 403);
@@ -433,6 +551,21 @@ export async function createOrgPlan(data: TNewOrganizationPlan) {
  */
 export async function updateOrg(orgId: string, data: Partial<TOrganization>) {
   try {
+    // Enforce plan restriction: only paid plans can use non-minimal landing page themes
+    if (data.landingpage && typeof data.landingpage === 'object') {
+      const landingpage = data.landingpage as Record<string, unknown>;
+      const theme = landingpage.theme;
+
+      if (typeof theme === 'string' && theme !== 'minimal') {
+        const activePlan = await getActiveOrganizationPlan(orgId);
+        const planName = activePlan?.planName ?? PLAN.BASIC;
+
+        if (planName === PLAN.BASIC) {
+          throw new AppError('Landing page themes require a paid plan', ErrorCodes.UPGRADE_REQUIRED, 403);
+        }
+      }
+    }
+
     const organization = await updateOrganization(orgId, data);
     if (!organization) {
       throw new AppError('Organization not found', ErrorCodes.ORGANIZATION_NOT_FOUND, 404);
diff --git a/apps/api/src/services/organization/audience.ts b/apps/api/src/services/organization/audience.ts
index 8ed5bf1d..4731a891 100644
--- a/apps/api/src/services/organization/audience.ts
+++ b/apps/api/src/services/organization/audience.ts
@@ -6,11 +6,13 @@ import type {
 } from '@cio/utils/validation/organization';
 import { addGroupMembers, enrollUsersInCourseGroups, getExistingGroupMembers } from '@cio/db/queries/group';
 import { buildEmailFromName, sendEmail } from '@cio/email';
+import { addProgramMember, getExistingProgramMembers, getProgramsByOrg } from '@cio/db/queries/program';
 import {
   createOrganizationInvite,
   createOrganizationInviteAudits,
   createOrganizationInvites,
   createOrganizationMembers,
+  getOrganizationAudienceMember,
   getLatestOrganizationInviteRowByOrgAndEmail,
   getOrgMembersByProfileIds,
   getOrganizationById,
@@ -20,6 +22,7 @@ import {
   revokeActiveOrganizationInvitesByEmails
 } from '@cio/db/queries/organization';
 import { getCourseGroupIds, getOrgCourseGroups, getOrgCourses } from '@cio/db/queries/course';
+import { updateOrganizationAudienceMember } from '@cio/db/queries/organization';
 
 import { ROLE } from '@cio/utils/constants';
 import crypto from 'node:crypto';
@@ -113,16 +116,33 @@ async function resolveCourseIdsAndNamesForImport(orgId: string, data: TImportAud
   let courseNames: string[] = [];
   if (data.allCourses) {
     const courses = await getOrgCourses({ orgId });
-    courseIds = courses.map((c) => c.id);
-    courseNames = courses.map((c) => c.title).filter(Boolean);
+    courseIds = courses.items.map((c) => c.id);
+    courseNames = courses.items.map((c) => c.title).filter(Boolean);
   } else if (data.courseIds && data.courseIds.length > 0) {
     const courses = await getOrgCourses({ orgId, courseIds: data.courseIds });
-    courseIds = courses.map((c) => c.id);
-    courseNames = courses.map((c) => c.title).filter(Boolean);
+    courseIds = courses.items.map((c) => c.id);
+    courseNames = courses.items.map((c) => c.title).filter(Boolean);
   }
   return { courseIds, courseNames };
 }
 
+async function resolveProgramIdsAndNamesForImport(orgId: string, data: TImportAudienceMembers) {
+  let programIds: string[] = [];
+  let programNames: string[] = [];
+
+  if (data.allPrograms) {
+    const programs = await getProgramsByOrg(orgId);
+    programIds = programs.map((program) => program.id);
+    programNames = programs.map((program) => program.name).filter(Boolean);
+  } else if (data.programIds && data.programIds.length > 0) {
+    const programs = await getProgramsByOrg(orgId, data.programIds);
+    programIds = programs.map((program) => program.id);
+    programNames = programs.map((program) => program.name).filter(Boolean);
+  }
+
+  return { programIds, programNames };
+}
+
 async function enrollAudienceStudentProfilesInCourses(
   orgId: string,
   organization: NonNullable<Awaited<ReturnType<typeof getOrganizationById>>>,
@@ -202,16 +222,98 @@ async function enrollAudienceStudentProfilesInCourses(
   };
 }
 
+async function enrollAudienceStudentProfilesInPrograms(
+  organization: NonNullable<Awaited<ReturnType<typeof getOrganizationById>>>,
+  orgId: string,
+  profileIds: string[],
+  programIds: string[],
+  shouldSendEmail: boolean
+): Promise<{ assigned: number; alreadyEnrolled: number; emailsSent: number }> {
+  if (programIds.length === 0 || profileIds.length === 0) {
+    return { assigned: 0, alreadyEnrolled: 0, emailsSent: 0 };
+  }
+
+  const uniqueProfileIds = [...new Set(profileIds)];
+  const orgMembers = await getOrgMembersByProfileIds(orgId, uniqueProfileIds);
+  const studentMembers = orgMembers.filter((member) => member.profileId && member.roleId === ROLE.STUDENT);
+  const validProfileIds = new Set(studentMembers.map((member) => member.profileId!));
+  const profileEmailMap = new Map(
+    studentMembers.filter((member) => member.profileId).map((member) => [member.profileId!, member.email ?? ''])
+  );
+
+  const programs = await getProgramsByOrg(orgId, programIds);
+  if (programs.length === 0) {
+    return { assigned: 0, alreadyEnrolled: 0, emailsSent: 0 };
+  }
+
+  const programNameById = new Map(programs.map((program) => [program.id, program.name || 'Program']));
+  const loginUrl = getDashboardBaseUrl(organization.siteName ?? undefined);
+  const validProgramIds = programs.map((program) => program.id);
+  const validProfiles = uniqueProfileIds.filter((profileId) => validProfileIds.has(profileId));
+  const pairs = validProfiles.flatMap((profileId) => validProgramIds.map((programId) => ({ programId, profileId })));
+  const existingSet = await getExistingProgramMembers(pairs);
+  const toInsert = pairs.filter((pair) => !existingSet.has(`${pair.programId}:${pair.profileId}`));
+  const alreadyEnrolled = pairs.length - toInsert.length;
+
+  if (toInsert.length > 0) {
+    await Promise.all(
+      toInsert.map((pair) =>
+        addProgramMember({
+          programId: pair.programId,
+          roleId: ROLE.STUDENT,
+          profileId: pair.profileId,
+          email: profileEmailMap.get(pair.profileId) || undefined
+        })
+      )
+    );
+  }
+
+  let emailsSent = 0;
+
+  if (shouldSendEmail && toInsert.length > 0) {
+    await Promise.all(
+      toInsert
+        .filter((pair) => profileEmailMap.get(pair.profileId))
+        .map(async (pair) => {
+          const email = profileEmailMap.get(pair.profileId)!;
+
+          try {
+            await sendEmail('studentProgramWelcome', {
+              to: email,
+              fields: {
+                orgName: organization.name,
+                programName: programNameById.get(pair.programId) || 'Program',
+                loginUrl
+              },
+              from: buildEmailFromName(`${organization.name} (via ClassroomIO.com)`)
+            });
+            emailsSent++;
+          } catch (emailError) {
+            console.error(`enrollAudienceStudentProfilesInPrograms email error for ${email}:`, emailError);
+          }
+        })
+    );
+  }
+
+  return {
+    assigned: toInsert.length,
+    alreadyEnrolled,
+    emailsSent
+  };
+}
+
 async function createStudentOrgInvitesAndSendEmails(input: {
   orgId: string;
   organization: NonNullable<Awaited<ReturnType<typeof getOrganizationById>>>;
   emails: string[];
   courseIds: string[];
-  courseNamesLabel: string | undefined;
+  programIds: string[];
+  accessNamesLabel: string | undefined;
   invitedByProfileId: string;
   shouldSendEmail: boolean;
 }): Promise<{ created: number; emailsSent: number; emailsFailed: number }> {
-  const { orgId, organization, emails, courseIds, courseNamesLabel, invitedByProfileId, shouldSendEmail } = input;
+  const { orgId, organization, emails, courseIds, programIds, accessNamesLabel, invitedByProfileId, shouldSendEmail } =
+    input;
 
   if (emails.length === 0) {
     return { created: 0, emailsSent: 0, emailsFailed: 0 };
@@ -236,7 +338,8 @@ async function createStudentOrgInvitesAndSendEmails(input: {
         isRevoked: false,
         metadata: {
           source: 'AUDIENCE_IMPORT',
-          courseIds: courseIds.length > 0 ? courseIds : undefined
+          courseIds: courseIds.length > 0 ? courseIds : undefined,
+          programIds: programIds.length > 0 ? programIds : undefined
         }
       }
     };
@@ -261,7 +364,8 @@ async function createStudentOrgInvitesAndSendEmails(input: {
           roleId: ROLE.STUDENT,
           roleName: 'Student',
           expiresAt,
-          courseIds
+          courseIds,
+          programIds
         }
       };
     })
@@ -283,7 +387,7 @@ async function createStudentOrgInvitesAndSendEmails(input: {
             orgName: organization.name,
             inviteLink,
             expiresAt: getExpiryLabel(expiresAt),
-            courseNames: courseNamesLabel
+            courseNames: accessNamesLabel
           },
           from: buildEmailFromName(`${organization.name} (via ClassroomIO.com)`)
         });
@@ -388,15 +492,24 @@ export async function importAudienceMembers(orgId: string, data: TImportAudience
   }
 
   const { courseIds, courseNames } = await resolveCourseIdsAndNamesForImport(orgId, data);
-  const courseNamesLabel = courseNames.length > 0 ? courseNames.join(', ') : undefined;
+  const { programIds, programNames } = await resolveProgramIdsAndNamesForImport(orgId, data);
+  const accessNames = [...courseNames, ...programNames];
+  const accessNamesLabel = accessNames.length > 0 ? accessNames.join(', ') : undefined;
 
-  const assignResult = await enrollAudienceStudentProfilesInCourses(
+  const assignedToCourses = await enrollAudienceStudentProfilesInCourses(
     orgId,
     organization,
     existingStudentProfileIds,
     courseIds,
     data.sendEmail
   );
+  const assignedToPrograms = await enrollAudienceStudentProfilesInPrograms(
+    organization,
+    orgId,
+    existingStudentProfileIds,
+    programIds,
+    data.sendEmail
+  );
 
   let imported = 0;
   let importEmailsSent = 0;
@@ -425,12 +538,26 @@ export async function importAudienceMembers(orgId: string, data: TImportAudience
       }
     }
 
+    if (programIds.length > 0) {
+      const profiles = await getProfilesByEmails(newEmails);
+      if (profiles.length > 0) {
+        await enrollAudienceStudentProfilesInPrograms(
+          organization,
+          orgId,
+          profiles.map((profile) => profile.id),
+          programIds,
+          false
+        );
+      }
+    }
+
     const inviteOutcome = await createStudentOrgInvitesAndSendEmails({
       orgId,
       organization,
       emails: newEmails,
       courseIds,
-      courseNamesLabel,
+      programIds,
+      accessNamesLabel,
       invitedByProfileId,
       shouldSendEmail: data.sendEmail
     });
@@ -447,7 +574,8 @@ export async function importAudienceMembers(orgId: string, data: TImportAudience
       organization,
       emails: pendingStudentEmails,
       courseIds,
-      courseNamesLabel,
+      programIds,
+      accessNamesLabel,
       invitedByProfileId,
       shouldSendEmail: data.sendEmail
     });
@@ -457,11 +585,12 @@ export async function importAudienceMembers(orgId: string, data: TImportAudience
 
   return {
     imported,
-    assigned: assignResult.assigned,
-    alreadyEnrolledInCourses: assignResult.alreadyEnrolled,
+    assigned: assignedToCourses.assigned + assignedToPrograms.assigned,
+    alreadyEnrolledInCourses: assignedToCourses.alreadyEnrolled,
+    alreadyEnrolledInPrograms: assignedToPrograms.alreadyEnrolled,
     pendingInvitesRenewed: pendingStudentEmails.length,
     duplicates: recipients.duplicates.length,
-    emailsSent: assignResult.emailsSent + importEmailsSent + pendingEmailsSent,
+    emailsSent: assignedToCourses.emailsSent + assignedToPrograms.emailsSent + importEmailsSent + pendingEmailsSent,
     emailsFailed: importEmailsFailed + pendingEmailsFailed
   };
 }
@@ -483,22 +612,32 @@ export async function resendAudienceInvite(orgId: string, data: TAudienceInviteB
   const emailToUse = member.email.toLowerCase().trim();
 
   const latestInvite = await getLatestOrganizationInviteRowByOrgAndEmail(orgId, emailToUse);
-  const meta = latestInvite?.metadata as { courseIds?: string[] } | undefined;
-  const courseIdsFromMetadata = meta?.courseIds?.filter(Boolean) ?? [];
+  const meta = (latestInvite?.metadata as { courseIds?: string[]; programIds?: string[] } | undefined) ?? {};
+  const courseIdsFromMetadata = meta.courseIds?.filter(Boolean) ?? [];
+  const programIdsFromMetadata = meta.programIds?.filter(Boolean) ?? [];
 
   let courseIds: string[] = [];
   let courseNames: string[] = [];
   if (courseIdsFromMetadata.length > 0) {
     const courses = await getOrgCourses({ orgId, courseIds: courseIdsFromMetadata });
-    courseIds = courses.map((c) => c.id);
-    courseNames = courses.map((c) => c.title).filter(Boolean);
+    courseIds = courses.items.map((c) => c.id);
+    courseNames = courses.items.map((c) => c.title).filter(Boolean);
+  }
+
+  let programIds: string[] = [];
+  let programNames: string[] = [];
+  if (programIdsFromMetadata.length > 0) {
+    const programs = await getProgramsByOrg(orgId, programIdsFromMetadata);
+    programIds = programs.map((program) => program.id);
+    programNames = programs.map((program) => program.name).filter(Boolean);
   }
 
   await revokeActiveOrganizationInvitesByEmails(orgId, [emailToUse], invitedByProfileId);
 
   const expiresAt = new Date(Date.now() + ORG_INVITE_EXPIRY_MS).toISOString();
   const token = generateToken();
-  const courseNamesLabel = courseNames.length > 0 ? courseNames.join(', ') : undefined;
+  const accessNames = [...courseNames, ...programNames];
+  const accessNamesLabel = accessNames.length > 0 ? accessNames.join(', ') : undefined;
 
   const invite = await createOrganizationInvite({
     organizationId: orgId,
@@ -510,7 +649,8 @@ export async function resendAudienceInvite(orgId: string, data: TAudienceInviteB
     isRevoked: false,
     metadata: {
       source: 'AUDIENCE_RESEND',
-      courseIds: courseIds.length > 0 ? courseIds : undefined
+      courseIds: courseIds.length > 0 ? courseIds : undefined,
+      programIds: programIds.length > 0 ? programIds : undefined
     }
   });
 
@@ -527,7 +667,8 @@ export async function resendAudienceInvite(orgId: string, data: TAudienceInviteB
         roleId: ROLE.STUDENT,
         roleName: 'Student',
         expiresAt,
-        courseIds
+        courseIds,
+        programIds
       }
     }
   ]);
@@ -542,7 +683,7 @@ export async function resendAudienceInvite(orgId: string, data: TAudienceInviteB
         orgName: organization.name,
         inviteLink,
         expiresAt: getExpiryLabel(expiresAt),
-        courseNames: courseNamesLabel
+        courseNames: accessNamesLabel
       },
       from: buildEmailFromName(`${organization.name} (via ClassroomIO.com)`)
     });
@@ -633,10 +774,113 @@ export async function assignAudienceToCourses(orgId: string, data: TAssignAudien
     throw new AppError('Organization not found', ErrorCodes.ORGANIZATION_NOT_FOUND, 404);
   }
 
-  const courseGroups = await getOrgCourseGroups(orgId, data.courseIds);
-  if (courseGroups.length === 0) {
-    throw new AppError('No valid courses found', ErrorCodes.VALIDATION_ERROR, 400, 'courseIds');
+  const courseIds = data.courseIds ?? [];
+  const programIds = data.programIds ?? [];
+
+  let assignedToCourses = { assigned: 0, alreadyEnrolled: 0, emailsSent: 0 };
+  let assignedToPrograms = { assigned: 0, alreadyEnrolled: 0, emailsSent: 0 };
+
+  if (courseIds.length > 0) {
+    const courseGroups = await getOrgCourseGroups(orgId, courseIds);
+    if (courseGroups.length === 0) {
+      throw new AppError('No valid courses found', ErrorCodes.VALIDATION_ERROR, 400, 'courseIds');
+    }
+
+    assignedToCourses = await enrollAudienceStudentProfilesInCourses(
+      orgId,
+      organization,
+      data.profileIds,
+      courseIds,
+      data.sendEmail
+    );
   }
 
-  return enrollAudienceStudentProfilesInCourses(orgId, organization, data.profileIds, data.courseIds, data.sendEmail);
+  if (programIds.length > 0) {
+    const programs = await getProgramsByOrg(orgId, programIds);
+    if (programs.length === 0) {
+      throw new AppError('No valid programs found', ErrorCodes.VALIDATION_ERROR, 400, 'programIds');
+    }
+
+    assignedToPrograms = await enrollAudienceStudentProfilesInPrograms(
+      organization,
+      orgId,
+      data.profileIds,
+      programIds,
+      data.sendEmail
+    );
+  }
+
+  return {
+    assigned: assignedToCourses.assigned + assignedToPrograms.assigned,
+    alreadyEnrolled: assignedToCourses.alreadyEnrolled + assignedToPrograms.alreadyEnrolled,
+    emailsSent: assignedToCourses.emailsSent + assignedToPrograms.emailsSent
+  };
+}
+
+export async function updatePendingAudienceMemberEmail(
+  orgId: string,
+  memberId: number,
+  data: { email: string; sendEmail: boolean },
+  invitedByProfileId: string
+) {
+  const organization = await getOrganizationById(orgId);
+  if (!organization) {
+    throw new AppError('Organization not found', ErrorCodes.ORGANIZATION_NOT_FOUND, 404);
+  }
+
+  const existingMember = await getOrganizationAudienceMember(orgId, memberId);
+  if (!existingMember) {
+    throw new AppError('Audience member not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  if (existingMember.profileId) {
+    throw new AppError(
+      'Only pending audience members can be updated through this endpoint',
+      ErrorCodes.VALIDATION_ERROR,
+      400,
+      'memberId'
+    );
+  }
+
+  const normalizedEmail = data.email.toLowerCase().trim();
+  const currentEmail = existingMember.email.toLowerCase().trim();
+
+  if (!normalizedEmail) {
+    throw new AppError('Email is required', ErrorCodes.VALIDATION_ERROR, 400, 'email');
+  }
+
+  if (normalizedEmail !== currentEmail) {
+    const matchingMembers = await getOrganizationMembersByNormalizedEmails(orgId, [normalizedEmail]);
+
+    if (matchingMembers.length > 0) {
+      throw new AppError('An audience member with this email already exists', ErrorCodes.CONFLICT, 409, 'email');
+    }
+  }
+
+  await revokeActiveOrganizationInvitesByEmails(orgId, [currentEmail, normalizedEmail], invitedByProfileId);
+
+  const updatedMember = await updateOrganizationAudienceMember(orgId, memberId, {
+    email: normalizedEmail,
+    verified: false
+  });
+
+  if (!updatedMember) {
+    throw new AppError('Audience member not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  const latestInvite = await getLatestOrganizationInviteRowByOrgAndEmail(orgId, currentEmail);
+  const meta = (latestInvite?.metadata as { courseIds?: string[]; programIds?: string[] } | undefined) ?? {};
+
+  await createStudentOrgInvitesAndSendEmails({
+    orgId,
+    organization,
+    emails: [normalizedEmail],
+    courseIds: meta.courseIds?.filter(Boolean) ?? [],
+    programIds: meta.programIds?.filter(Boolean) ?? [],
+    accessNamesLabel: undefined,
+    invitedByProfileId,
+    shouldSendEmail: data.sendEmail
+  });
+
+  return updatedMember;
 }
diff --git a/apps/api/src/services/organization/automation-usage.ts b/apps/api/src/services/organization/automation-usage.ts
index a3d3e2d4..f4fdbea7 100644
--- a/apps/api/src/services/organization/automation-usage.ts
+++ b/apps/api/src/services/organization/automation-usage.ts
@@ -16,6 +16,7 @@ import {
   MCP_TOOL_CREDIT_COST,
   type TMcpToolName
 } from '@cio/utils/plans';
+import { PLAN } from '@cio/utils/plans/constants';
 
 export type OrganizationAutomationUsageSummary = {
   type: TOrganizationApiKeyType;
@@ -56,11 +57,16 @@ export async function assertOrganizationAutomationKeyCreationAllowed(
   organizationId: string,
   type: TOrganizationApiKeyType
 ): Promise<void> {
+  const planName = await getOrganizationPlanName(organizationId);
+
+  if (type === AUTOMATION_TYPE.API && planName === PLAN.BASIC) {
+    throw new AppError('Public API keys require an Early Adopter or Enterprise plan', ErrorCodes.UPGRADE_REQUIRED, 403);
+  }
+
   if (type !== AUTOMATION_TYPE.MCP) {
     return;
   }
 
-  const planName = await getOrganizationPlanName(organizationId);
   const limits = getMcpAutomationLimits(planName);
   const activeKeys = await countActiveOrganizationApiKeys(organizationId, type);
 
diff --git a/apps/api/src/services/organization/invite.ts b/apps/api/src/services/organization/invite.ts
index c639ccce..8fed5cb4 100644
--- a/apps/api/src/services/organization/invite.ts
+++ b/apps/api/src/services/organization/invite.ts
@@ -7,18 +7,20 @@ import {
   createOrganizationInvite,
   createOrganizationInviteAudit,
   createOrganizationMembers,
+  getActivePendingOrgInviteForEmail,
   getOrganizationById,
   getOrganizationInviteByTokenHash,
   revokeActiveOrganizationInvitesByEmails
 } from '@cio/db/queries/organization';
 import { getCourseGroupIds } from '@cio/db/queries/course';
 import { enrollUsersInCourseGroups } from '@cio/db/queries/group';
+import { addProgramMember, getExistingProgramMembers } from '@cio/db/queries/program';
 
 import { ROLE } from '@cio/utils/constants';
 import crypto from 'node:crypto';
 import { db } from '@cio/db/drizzle';
 import { getDashboardBaseUrl } from '@api/config/dashboard-url';
-import { parseCourseIdsFromInviteMetadata } from '@api/utils/org';
+import { parseCourseIdsFromInviteMetadata, parseProgramIdsFromInviteMetadata } from '@api/utils/org';
 import { markUserAndProfileEmailVerified } from '@cio/db/queries/auth/profile';
 import { sendEmail } from '@cio/email';
 
@@ -426,6 +428,7 @@ export async function acceptOrganizationInvite(token: string, user: TAuthUser, c
   if (invite) {
     const metadata = invite.invite.metadata;
     const courseIds = parseCourseIdsFromInviteMetadata(metadata);
+    const programIds = parseProgramIdsFromInviteMetadata(metadata);
 
     if (courseIds.length > 0) {
       try {
@@ -441,6 +444,30 @@ export async function acceptOrganizationInvite(token: string, user: TAuthUser, c
         console.error('acceptOrganizationInvite course enrollment error:', error);
       }
     }
+
+    if (programIds.length > 0) {
+      try {
+        const existingProgramMemberships = await getExistingProgramMembers(
+          programIds.map((programId) => ({ programId, profileId: user.id }))
+        );
+        const programIdsToInsert = programIds.filter(
+          (programId) => !existingProgramMemberships.has(`${programId}:${user.id}`)
+        );
+
+        await Promise.all(
+          programIdsToInsert.map((programId) =>
+            addProgramMember({
+              programId,
+              roleId: invite.invite.roleId,
+              profileId: user.id,
+              email: normalizedEmail
+            })
+          )
+        );
+      } catch (error) {
+        console.error('acceptOrganizationInvite program enrollment error:', error);
+      }
+    }
   }
 
   const redirectTo = result.roleId === ROLE.STUDENT ? '/lms' : siteName ? `/org/${siteName}` : '/org';
@@ -452,3 +479,210 @@ export async function acceptOrganizationInvite(token: string, user: TAuthUser, c
     redirectTo
   };
 }
+
+/**
+ * Returns the pending org invite for the currently logged-in user, if one exists.
+ * Used by the LMS dashboard to prompt the student to accept on first load.
+ */
+export async function getPendingOrgInviteForUser(orgId: string, email: string) {
+  if (!orgId || !email) {
+    return null;
+  }
+
+  const data = await getActivePendingOrgInviteForEmail(orgId, email);
+
+  if (!data) {
+    return null;
+  }
+
+  return {
+    id: data.invite.id,
+    email: data.invite.email,
+    roleId: data.invite.roleId,
+    roleLabel: getRoleLabel(data.invite.roleId),
+    expiresAt: data.invite.expiresAt,
+    organization: data.organization
+  };
+}
+
+/**
+ * Accepts an organization invite by invite ID (for logged-in students with a pending invite).
+ * Replicates the acceptance logic of acceptOrganizationInvite but looks up by invite ID instead of token.
+ */
+export async function acceptOrganizationInviteById(
+  inviteId: string,
+  user: TAuthUser,
+  context: TInviteRequestContext = {}
+) {
+  if (!user.id || !user.email) {
+    throw new AppError('Authenticated user email is required', ErrorCodes.UNAUTHORIZED, 401);
+  }
+
+  const normalizedEmail = user.email.toLowerCase().trim();
+
+  const result = await db.transaction(async (tx) => {
+    const [row] = await tx
+      .select({
+        invite: schema.organizationInvite,
+        organization: {
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName
+        }
+      })
+      .from(schema.organizationInvite)
+      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
+      .where(eq(schema.organizationInvite.id, inviteId))
+      .limit(1);
+
+    if (!row) {
+      throw new AppError('Invalid invite', ErrorCodes.NOT_FOUND, 404);
+    }
+
+    const status = getInviteStatus(row.invite);
+    if (status === 'REVOKED') {
+      throw new AppError('This invite has been revoked', ErrorCodes.UNAUTHORIZED, 403);
+    }
+
+    if (status === 'EXPIRED') {
+      throw new AppError('This invite has expired', ErrorCodes.VALIDATION_ERROR, 400);
+    }
+
+    if (row.invite.email.toLowerCase().trim() !== normalizedEmail) {
+      throw new AppError('This invite is for a different email address', ErrorCodes.UNAUTHORIZED, 403);
+    }
+
+    if (status === 'ACCEPTED') {
+      await markUserAndProfileEmailVerified(user.id, tx);
+
+      return { organization: row.organization, invite: row.invite, roleId: row.invite.roleId, alreadyAccepted: true };
+    }
+
+    const [orgMemberByEmail] = await tx
+      .select()
+      .from(schema.organizationmember)
+      .where(
+        and(
+          eq(schema.organizationmember.organizationId, row.invite.organizationId),
+          eq(schema.organizationmember.email, normalizedEmail)
+        )
+      )
+      .limit(1);
+
+    if (orgMemberByEmail) {
+      if (orgMemberByEmail.profileId && orgMemberByEmail.profileId !== user.id) {
+        throw new AppError('This invite is linked to another account', ErrorCodes.UNAUTHORIZED, 403);
+      }
+
+      await tx
+        .update(schema.organizationmember)
+        .set({ profileId: user.id, roleId: row.invite.roleId, email: normalizedEmail, verified: true })
+        .where(eq(schema.organizationmember.id, orgMemberByEmail.id));
+    } else {
+      const [orgMemberByProfile] = await tx
+        .select()
+        .from(schema.organizationmember)
+        .where(
+          and(
+            eq(schema.organizationmember.organizationId, row.invite.organizationId),
+            eq(schema.organizationmember.profileId, user.id)
+          )
+        )
+        .limit(1);
+
+      if (orgMemberByProfile) {
+        await tx
+          .update(schema.organizationmember)
+          .set({ roleId: row.invite.roleId, email: normalizedEmail, verified: true })
+          .where(eq(schema.organizationmember.id, orgMemberByProfile.id));
+      } else {
+        await tx.insert(schema.organizationmember).values({
+          organizationId: row.invite.organizationId,
+          roleId: row.invite.roleId,
+          profileId: user.id,
+          email: normalizedEmail,
+          verified: true
+        });
+      }
+    }
+
+    await markUserAndProfileEmailVerified(user.id, tx);
+
+    const [acceptedInvite] = await tx
+      .update(schema.organizationInvite)
+      .set({
+        acceptedAt: new Date().toISOString(),
+        acceptedByProfileId: user.id,
+        updatedAt: new Date().toISOString()
+      })
+      .where(
+        and(
+          eq(schema.organizationInvite.id, row.invite.id),
+          eq(schema.organizationInvite.isRevoked, false),
+          isNull(schema.organizationInvite.acceptedAt)
+        )
+      )
+      .returning({ id: schema.organizationInvite.id });
+
+    if (!acceptedInvite) {
+      throw new AppError('Invite is no longer available', ErrorCodes.VALIDATION_ERROR, 409);
+    }
+
+    return { organization: row.organization, invite: row.invite, roleId: row.invite.roleId, alreadyAccepted: false };
+  });
+
+  await recordOrganizationInviteAudit(result.invite.id, result.invite.organizationId, 'ACCEPTED', {
+    actorProfileId: user.id,
+    targetEmail: normalizedEmail,
+    ipAddress: context.ipAddress,
+    userAgent: context.userAgent,
+    metadata: { alreadyAccepted: result.alreadyAccepted }
+  });
+
+  const metadata = result.invite.metadata;
+  const courseIds = parseCourseIdsFromInviteMetadata(metadata);
+  const programIds = parseProgramIdsFromInviteMetadata(metadata);
+
+  if (courseIds.length > 0) {
+    try {
+      const courseGroupMappings = await getCourseGroupIds(courseIds);
+      const validGroupIds = courseGroupMappings.map((m) => m.groupId).filter(Boolean) as string[];
+      await enrollUsersInCourseGroups(
+        validGroupIds,
+        [{ profileId: user.id, email: normalizedEmail }],
+        result.invite.roleId
+      );
+    } catch (error) {
+      console.error('acceptOrganizationInviteById course enrollment error:', error);
+    }
+  }
+
+  if (programIds.length > 0) {
+    try {
+      const existingProgramMemberships = await getExistingProgramMembers(
+        programIds.map((programId) => ({ programId, profileId: user.id }))
+      );
+      const programIdsToInsert = programIds.filter(
+        (programId) => !existingProgramMemberships.has(`${programId}:${user.id}`)
+      );
+
+      await Promise.all(
+        programIdsToInsert.map((programId) =>
+          addProgramMember({ programId, roleId: result.invite.roleId, profileId: user.id, email: normalizedEmail })
+        )
+      );
+    } catch (error) {
+      console.error('acceptOrganizationInviteById program enrollment error:', error);
+    }
+  }
+
+  const siteName = result.organization.siteName || '';
+  const redirectTo = result.roleId === ROLE.STUDENT ? '/lms' : siteName ? `/org/${siteName}` : '/org';
+
+  return {
+    organizationId: result.organization.id,
+    roleId: result.roleId,
+    alreadyAccepted: result.alreadyAccepted,
+    redirectTo
+  };
+}
diff --git a/apps/api/src/services/program/program.ts b/apps/api/src/services/program/program.ts
new file mode 100644
index 00000000..17cabe2c
--- /dev/null
+++ b/apps/api/src/services/program/program.ts
@@ -0,0 +1,580 @@
+import { AppError, ErrorCodes } from '@api/utils/errors';
+import {
+  type TCreateProgram,
+  type TUpdateProgram,
+  type TAddCourseToProgram,
+  type TAddProgramMembers,
+  type TUpdateProgramMember,
+  type TCreateProgramNewsfeed,
+  type TUpdateProgramNewsfeed,
+  type TUpdateProgramReaction,
+  type TCreateProgramNewsfeedComment
+} from '@cio/utils/validation/program';
+import {
+  addCourseToProgram,
+  createProgramWithCreatorMembership,
+  createProgramNewsfeed as createProgramNewsfeedQuery,
+  createProgramNewsfeedComment as createProgramNewsfeedCommentQuery,
+  deleteProgram as deleteProgramQuery,
+  deleteProgramNewsfeed as deleteProgramNewsfeedQuery,
+  deleteProgramNewsfeedComment as deleteProgramNewsfeedCommentQuery,
+  getEnrolledProgramsByProfile,
+  getProgramById,
+  getProgramMemberByProfileId,
+  getProgramMembers,
+  getProgramNewsfeed,
+  getProgramNewsfeedById,
+  getProgramNewsfeedCommentById,
+  getProgramNewsfeedComments,
+  getProgramsByOrg,
+  getCoursesByProgram,
+  getProgramMemberRole,
+  isProgramCourse,
+  isProgramMember,
+  removeCourseFromProgram,
+  removeProgramMember,
+  updateProgram as updateProgramQuery,
+  updateProgramMember as updateProgramMemberQuery,
+  updateProgramNewsfeed as updateProgramNewsfeedQuery,
+  updateProgramNewsfeedReaction
+} from '@cio/db/queries/program';
+import { getCourseGroupIds } from '@cio/db/queries/course';
+import { getProfileByEmail } from '@cio/db/queries/auth';
+import { ROLE } from '@cio/utils/constants';
+import { db } from '@cio/db/drizzle';
+import * as schema from '@db/schema';
+
+type ProgramMemberEnrollment = {
+  profileId: string;
+  email: string | null;
+  roleId: number;
+};
+
+async function enrollProgramStudentsInGroups(
+  organizationId: string,
+  groupIds: string[],
+  members: ProgramMemberEnrollment[]
+) {
+  const studentMembers = members.filter((member) => member.profileId && member.roleId === ROLE.STUDENT);
+  const uniqueGroupIds = [...new Set(groupIds)];
+
+  if (studentMembers.length === 0 || uniqueGroupIds.length === 0) {
+    return 0;
+  }
+
+  const organizationMemberRows = studentMembers.map((member) => ({
+    organizationId,
+    roleId: ROLE.STUDENT,
+    profileId: member.profileId,
+    email: member.email?.trim() || undefined,
+    verified: true
+  }));
+
+  const groupMemberRows = uniqueGroupIds.flatMap((groupId) =>
+    studentMembers.map((member) => ({
+      groupId,
+      roleId: ROLE.STUDENT,
+      profileId: member.profileId,
+      email: member.email?.trim() || undefined
+    }))
+  );
+
+  await db.transaction(async (tx) => {
+    await tx.insert(schema.organizationmember).values(organizationMemberRows).onConflictDoNothing();
+    await tx.insert(schema.groupmember).values(groupMemberRows).onConflictDoNothing();
+  });
+
+  return groupMemberRows.length;
+}
+
+// ─── Program CRUD ────────────────────────────────────────────────────────────
+
+export async function createProgram(organizationId: string, profileId: string, data: TCreateProgram) {
+  try {
+    const description = data.description?.trim() || `A program for ${data.name}`;
+
+    return createProgramWithCreatorMembership(
+      {
+        organizationId,
+        createdByProfileId: profileId,
+        name: data.name,
+        description,
+        coverImage: data.coverImage
+      },
+      profileId
+    );
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to create program',
+      ErrorCodes.PROGRAM_CREATE_FAILED,
+      500
+    );
+  }
+}
+
+export async function getProgram(programId: string) {
+  try {
+    const program = await getProgramById(programId);
+    if (!program) {
+      throw new AppError('Program not found', ErrorCodes.PROGRAM_NOT_FOUND, 404);
+    }
+    return program;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to get program',
+      ErrorCodes.PROGRAM_NOT_FOUND,
+      500
+    );
+  }
+}
+
+export async function listOrgPrograms(organizationId: string) {
+  try {
+    return getProgramsByOrg(organizationId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to list programs',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function updateProgram(programId: string, data: TUpdateProgram) {
+  try {
+    const updated = await updateProgramQuery(programId, data);
+    if (!updated) {
+      throw new AppError('Program not found', ErrorCodes.PROGRAM_NOT_FOUND, 404);
+    }
+    return updated;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update program',
+      ErrorCodes.PROGRAM_UPDATE_FAILED,
+      500
+    );
+  }
+}
+
+export async function deleteProgram(programId: string) {
+  try {
+    const deleted = await deleteProgramQuery(programId);
+    if (!deleted) {
+      throw new AppError('Program not found', ErrorCodes.PROGRAM_NOT_FOUND, 404);
+    }
+    return deleted;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to delete program',
+      ErrorCodes.PROGRAM_DELETE_FAILED,
+      500
+    );
+  }
+}
+
+// ─── Program Members ─────────────────────────────────────────────────────────
+
+export async function listProgramMembers(programId: string) {
+  try {
+    return getProgramMembers(programId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to list program members',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function addProgramMembers(programId: string, data: TAddProgramMembers) {
+  try {
+    const program = await getProgramById(programId);
+    if (!program) {
+      throw new AppError('Program not found', ErrorCodes.PROGRAM_NOT_FOUND, 404);
+    }
+
+    const programCourses = await getCoursesByProgram(programId);
+    const courseGroupIds = (await getCourseGroupIds(programCourses.map((course) => course.course.id))).map(
+      (courseGroup) => courseGroup.groupId
+    );
+
+    const results = await Promise.allSettled(
+      data.members.map(async ({ profileId: providedProfileId, email, roleId }) => {
+        const profile = !providedProfileId && email ? await getProfileByEmail(email) : null;
+        const profileId = providedProfileId ?? profile?.id ?? null;
+        const normalizedEmail = email?.toLowerCase().trim() ?? profile?.email ?? null;
+
+        if (profileId) {
+          const existing = await getProgramMemberByProfileId(programId, profileId);
+          if (existing) {
+            throw new AppError(
+              `${email} is already a member of this program`,
+              ErrorCodes.MEMBER_ALREADY_IN_PROGRAM,
+              409
+            );
+          }
+        }
+
+        if (!profileId && !email) {
+          throw new AppError(
+            'Either profileId or email must be provided for each member',
+            ErrorCodes.VALIDATION_ERROR,
+            400
+          );
+        }
+
+        return db.transaction(async (tx) => {
+          const [member] = await tx
+            .insert(schema.programMember)
+            .values({
+              programId,
+              profileId,
+              roleId,
+              email: normalizedEmail ?? undefined
+            })
+            .returning();
+
+          if (member && member.roleId === ROLE.STUDENT && member.profileId && courseGroupIds.length > 0) {
+            const validCourseGroupIds = courseGroupIds.filter((groupId): groupId is string => Boolean(groupId));
+
+            await tx
+              .insert(schema.organizationmember)
+              .values({
+                organizationId: program.organizationId,
+                roleId: ROLE.STUDENT,
+                profileId: member.profileId,
+                email: normalizedEmail ?? undefined,
+                verified: true
+              })
+              .onConflictDoNothing();
+
+            await tx
+              .insert(schema.groupmember)
+              .values(
+                validCourseGroupIds.map((groupId) => ({
+                  groupId,
+                  roleId: ROLE.STUDENT,
+                  profileId: member.profileId,
+                  email: normalizedEmail ?? undefined
+                }))
+              )
+              .onConflictDoNothing();
+          }
+
+          return member;
+        });
+      })
+    );
+
+    const added = results
+      .filter((r) => r.status === 'fulfilled')
+      .map((r) => (r as PromiseFulfilledResult<unknown>).value);
+    const errors = results
+      .filter((r) => r.status === 'rejected')
+      .map((r) => (r as PromiseRejectedResult).reason?.message || 'Unknown error');
+
+    return { added, errors };
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to add program members',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function removeProgramMemberService(_programId: string, memberId: string) {
+  try {
+    const deleted = await removeProgramMember(memberId);
+    if (!deleted) {
+      throw new AppError('Program member not found', ErrorCodes.PROGRAM_MEMBER_NOT_FOUND, 404);
+    }
+    return deleted;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to remove program member',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function updateProgramMemberService(_programId: string, memberId: string, data: TUpdateProgramMember) {
+  try {
+    const updated = await updateProgramMemberQuery(memberId, { roleId: data.roleId });
+    if (!updated) {
+      throw new AppError('Program member not found', ErrorCodes.PROGRAM_MEMBER_NOT_FOUND, 404);
+    }
+    return updated;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update program member',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function getEnrolledPrograms(profileId: string) {
+  try {
+    return getEnrolledProgramsByProfile(profileId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to get enrolled programs',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+// ─── Program Courses ─────────────────────────────────────────────────────────
+
+export async function listProgramCourses(programId: string, profileId: string) {
+  try {
+    const roleId = await getProgramMemberRole(programId, profileId);
+    const onlyPublished = roleId === ROLE.STUDENT;
+
+    return getCoursesByProgram(programId, onlyPublished);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to list program courses',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function addCourseToProgramService(programId: string, data: TAddCourseToProgram) {
+  try {
+    const program = await getProgramById(programId);
+    if (!program) {
+      throw new AppError('Program not found', ErrorCodes.PROGRAM_NOT_FOUND, 404);
+    }
+
+    const alreadyAdded = await isProgramCourse(programId, data.courseId);
+    if (alreadyAdded) {
+      throw new AppError('Course is already in this program', ErrorCodes.COURSE_ALREADY_IN_PROGRAM, 409);
+    }
+
+    const result = await addCourseToProgram(programId, data.courseId);
+    const students = (await getProgramMembers(programId))
+      .filter((member) => member.roleId === ROLE.STUDENT && member.profileId)
+      .map((member) => ({
+        profileId: member.profileId!,
+        email: member.email ?? null,
+        roleId: member.roleId
+      }));
+
+    const courseGroupIds = (await getCourseGroupIds([data.courseId]))
+      .map((courseGroup) => courseGroup.groupId)
+      .filter((groupId): groupId is string => Boolean(groupId));
+
+    if (students.length > 0 && courseGroupIds.length > 0) {
+      await enrollProgramStudentsInGroups(program.organizationId, courseGroupIds, students);
+    }
+
+    return result;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to add course to program',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function removeCourseFromProgramService(programId: string, courseId: string) {
+  try {
+    const deleted = await removeCourseFromProgram(programId, courseId);
+    if (!deleted) {
+      throw new AppError('Course not found in program', ErrorCodes.NOT_FOUND, 404);
+    }
+    return deleted;
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to remove course from program',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+// ─── Program Newsfeed ────────────────────────────────────────────────────────
+
+export async function listProgramNewsfeed(programId: string, options: { cursor?: string; limit: number }) {
+  try {
+    return getProgramNewsfeed(programId, options);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to list program newsfeed',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function createProgramNewsfeedService(programId: string, profileId: string, data: TCreateProgramNewsfeed) {
+  try {
+    const member = await getProgramMemberByProfileId(programId, profileId);
+    if (!member) {
+      throw new AppError('User is not a member of this program', ErrorCodes.PROGRAM_FORBIDDEN, 403);
+    }
+
+    return createProgramNewsfeedQuery({
+      programId,
+      authorId: member.id,
+      content: data.content,
+      isPinned: data.isPinned ?? false
+    });
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to create program newsfeed',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function updateProgramNewsfeedService(feedId: string, data: TUpdateProgramNewsfeed) {
+  try {
+    const feed = await getProgramNewsfeedById(feedId);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    return updateProgramNewsfeedQuery(feedId, data);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update program newsfeed',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function updateProgramNewsfeedReactionService(feedId: string, data: TUpdateProgramReaction) {
+  try {
+    const feed = await getProgramNewsfeedById(feedId);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    return updateProgramNewsfeedReaction(feedId, data.reaction);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update program newsfeed reaction',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function deleteProgramNewsfeedService(feedId: string) {
+  try {
+    const feed = await getProgramNewsfeedById(feedId);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    return deleteProgramNewsfeedQuery(feedId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to delete program newsfeed',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+// ─── Program Newsfeed Comments ────────────────────────────────────────────────
+
+export async function listProgramNewsfeedComments(feedId: string) {
+  try {
+    const feed = await getProgramNewsfeedById(feedId);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    return getProgramNewsfeedComments(feedId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to list program newsfeed comments',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function createProgramNewsfeedCommentService(
+  feedId: string,
+  profileId: string,
+  data: TCreateProgramNewsfeedComment
+) {
+  try {
+    const feed = await getProgramNewsfeedById(feedId);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    const member = await getProgramMemberByProfileId(feed.programId!, profileId);
+    if (!member) {
+      throw new AppError('User is not a member of this program', ErrorCodes.PROGRAM_FORBIDDEN, 403);
+    }
+    return createProgramNewsfeedCommentQuery({
+      programNewsfeedId: feedId,
+      authorId: member.id,
+      content: data.content
+    });
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to create program newsfeed comment',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function deleteProgramNewsfeedCommentService(commentId: number) {
+  try {
+    const comment = await getProgramNewsfeedCommentById(commentId);
+    if (!comment) {
+      throw new AppError('Comment not found', ErrorCodes.PROGRAM_NEWSFEED_COMMENT_NOT_FOUND, 404);
+    }
+    const feed = await getProgramNewsfeedById(comment.programNewsfeedId!);
+    if (!feed) {
+      throw new AppError('Program newsfeed item not found', ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND, 404);
+    }
+    return deleteProgramNewsfeedCommentQuery(commentId);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to delete program newsfeed comment',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+// ─── Auth Helpers ────────────────────────────────────────────────────────────
+
+async function assertProgramMember(programId: string, profileId: string) {
+  const member = await isProgramMember(programId, profileId);
+  if (!member) {
+    throw new AppError('You are not a member of this program', ErrorCodes.PROGRAM_FORBIDDEN, 403);
+  }
+}
diff --git a/apps/api/src/services/v1/audience.ts b/apps/api/src/services/v1/audience.ts
new file mode 100644
index 00000000..8f2c7758
--- /dev/null
+++ b/apps/api/src/services/v1/audience.ts
@@ -0,0 +1,64 @@
+import type {
+  TPublicApiAssignAudienceCourses,
+  TPublicApiAudienceMemberParam,
+  TPublicApiAudienceQuery,
+  TPublicApiCreateAudience,
+  TPublicApiUpdateAudience
+} from '@cio/utils/validation/public-api';
+
+import {
+  assignAudienceToCourses,
+  importAudienceMembers,
+  updatePendingAudienceMemberEmail
+} from '@api/services/organization/audience';
+import { getOrgAudience, getOrgAudienceMember, removeAudienceMember } from '@api/services/organization';
+import { AppError, ErrorCodes } from '@api/utils/errors';
+
+export async function listAudienceService(orgId: string, query: TPublicApiAudienceQuery) {
+  return getOrgAudience(orgId, query);
+}
+
+export async function createAudienceService(orgId: string, actorId: string | null, payload: TPublicApiCreateAudience) {
+  if (!actorId) {
+    throw new AppError('Automation actor is required', ErrorCodes.UNAUTHORIZED, 401);
+  }
+
+  return importAudienceMembers(
+    orgId,
+    {
+      recipientCsv: payload.email,
+      courseIds: payload.courseIds,
+      allCourses: false,
+      allPrograms: false,
+      sendEmail: payload.sendEmail
+    },
+    actorId
+  );
+}
+
+export async function getAudienceMemberService(orgId: string, params: TPublicApiAudienceMemberParam) {
+  return getOrgAudienceMember(orgId, params.memberId);
+}
+
+export async function assignAudienceCoursesService(orgId: string, payload: TPublicApiAssignAudienceCourses) {
+  return assignAudienceToCourses(orgId, payload);
+}
+
+export async function removeAudienceService(orgId: string, memberId: number, actorId?: string | null) {
+  return removeAudienceMember(orgId, memberId, actorId ?? undefined);
+}
+
+export async function updateAudienceService(
+  orgId: string,
+  memberId: number,
+  actorId: string | null,
+  payload: TPublicApiUpdateAudience
+) {
+  if (!actorId) {
+    throw new AppError('Automation actor is required', ErrorCodes.UNAUTHORIZED, 401);
+  }
+
+  await updatePendingAudienceMemberEmail(orgId, memberId, payload, actorId);
+
+  return getOrgAudienceMember(orgId, memberId);
+}
diff --git a/apps/api/src/services/v1/course.ts b/apps/api/src/services/v1/course.ts
new file mode 100644
index 00000000..a9d25749
--- /dev/null
+++ b/apps/api/src/services/v1/course.ts
@@ -0,0 +1,135 @@
+import type {
+  TPublicApiCourseParam,
+  TPublicApiCoursesQuery,
+  TPublicApiCreateCourse,
+  TPublicApiUpdateCourse,
+  TPublicApiUpdateCourseStructure
+} from '@cio/utils/validation/public-api';
+
+import { ROLE } from '@cio/utils/constants';
+import {
+  createCourse as createCourseService,
+  deleteCourse as deleteCourseService,
+  getCourse,
+  updateCourse as updateCourseService
+} from '@api/services/course/course';
+import {
+  createCourseImportDraftService,
+  getCourseImportStructureService,
+  publishCourseImportDraftToExistingCourseService
+} from '@api/services/course-import/course-import';
+import { getCourseOrganizationId } from '@cio/db/queries/tag';
+import { getOrganizationCourses } from '@api/services/organization';
+import { listCourseMembers } from '@api/services/course/people';
+import { AppError, ErrorCodes } from '@api/utils/errors';
+
+async function assertCourseBelongsToOrganization(orgId: string, courseId: string): Promise<void> {
+  const courseOrganizationId = await getCourseOrganizationId(courseId);
+  if (!courseOrganizationId || courseOrganizationId !== orgId) {
+    throw new AppError('Course not found', ErrorCodes.COURSE_NOT_FOUND, 404);
+  }
+}
+
+export async function listCoursesService(orgId: string, query: TPublicApiCoursesQuery) {
+  const result = await getOrganizationCourses(orgId, '', ROLE.ADMIN, {
+    page: 1,
+    limit: 100,
+    search: undefined,
+    tags: query.tags
+  });
+
+  return result.items;
+}
+
+export async function getCourseService(orgId: string, params: TPublicApiCourseParam) {
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  return getCourse(params.courseId);
+}
+
+export async function listCourseStudentsService(orgId: string, params: TPublicApiCourseParam) {
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  const members = await listCourseMembers(params.courseId);
+  return members.filter((member) => member.roleId === ROLE.STUDENT);
+}
+
+export async function exportCourseService(orgId: string, params: TPublicApiCourseParam) {
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  return getCourseImportStructureService(orgId, params.courseId);
+}
+
+export async function createPublicApiCourseService(
+  orgId: string,
+  actorId: string | null,
+  payload: TPublicApiCreateCourse
+) {
+  if (!actorId) {
+    throw new AppError('Automation actor is required', ErrorCodes.UNAUTHORIZED, 401);
+  }
+
+  return createCourseService(actorId, {
+    ...payload,
+    organizationId: orgId
+  });
+}
+
+export async function updatePublicApiCourseService(
+  orgId: string,
+  params: TPublicApiCourseParam,
+  payload: TPublicApiUpdateCourse
+) {
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  return updateCourseService(params.courseId, payload);
+}
+
+export async function deletePublicApiCourseService(orgId: string, params: TPublicApiCourseParam) {
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  return deleteCourseService(params.courseId);
+}
+
+export async function updatePublicApiCourseStructureService(
+  orgId: string,
+  actorId: string | null,
+  params: TPublicApiCourseParam,
+  payload: TPublicApiUpdateCourseStructure
+) {
+  if (!actorId) {
+    throw new AppError('Automation actor is required', ErrorCodes.UNAUTHORIZED, 401);
+  }
+
+  await assertCourseBelongsToOrganization(orgId, params.courseId);
+
+  const draft = await createCourseImportDraftService(orgId, actorId, {
+    sourceType: 'course',
+    idempotencyKey: payload.idempotencyKey,
+    summary: {
+      sourceCourseId: params.courseId,
+      syncMode: payload.mode,
+      ...(payload.summary ?? {})
+    },
+    sourceArtifacts: [
+      {
+        type: 'course',
+        courseId: params.courseId,
+        label: payload.draft.course.title
+      },
+      ...(payload.sourceArtifacts ?? [])
+    ],
+    draft: payload.draft
+  });
+
+  const result = await publishCourseImportDraftToExistingCourseService(orgId, draft.id, {
+    courseId: params.courseId,
+    syncMode: payload.mode
+  });
+
+  return {
+    draftId: draft.id,
+    syncMode: payload.mode,
+    ...result
+  };
+}
diff --git a/apps/api/src/types/dash.ts b/apps/api/src/types/dash.ts
index 309aee72..96662a36 100644
--- a/apps/api/src/types/dash.ts
+++ b/apps/api/src/types/dash.ts
@@ -3,9 +3,10 @@ export interface TopCourse {
   title: string;
   enrollments: number;
   completion: number;
+  certification: number;
 }
 
-export interface Enrollment {
+export interface RecentCertification {
   id: string;
   avatarUrl: string | null;
   name: string;
@@ -15,9 +16,9 @@ export interface Enrollment {
 }
 
 export interface OrganisationAnalytics {
-  revenue: number;
+  totalCertificates: number;
   numberOfCourses: number;
   totalStudents: number;
   topCourses: TopCourse[];
-  enrollments: Enrollment[];
+  recentCertifications: RecentCertification[];
 }
diff --git a/apps/api/src/utils/errors.ts b/apps/api/src/utils/errors.ts
index 736e1779..b85d11ec 100644
--- a/apps/api/src/utils/errors.ts
+++ b/apps/api/src/utils/errors.ts
@@ -1,6 +1,10 @@
 import type { ContentfulStatusCode } from 'hono/utils/http-status';
 import type { Context } from 'hono';
 
+import { ErrorCodes, type ErrorCode } from '@cio/utils/constants';
+
+export { ErrorCodes, type ErrorCode };
+
 /**
  * Standard application error with code for easy identification
  */
@@ -26,146 +30,6 @@ export interface ErrorResponse {
   field?: string;
 }
 
-// Error codes constants for consistency
-export const ErrorCodes = {
-  // Common errors
-  NOT_FOUND: 'NOT_FOUND',
-  UNAUTHORIZED: 'UNAUTHORIZED',
-
-  // Dashboard Analytics errors
-  ORG_ANALYTICS_FETCH_FAILED: 'ORG_ANALYTICS_FETCH_FAILED',
-  NO_ORG_ID_PROVIDED: 'NO_ORG_ID_PROVIDED',
-
-  // Community errors
-  UPDATE_COMMUNITY_QUESTION_FAILED: 'UPDATE_COMMUNITY_QUESTION_FAILED',
-  ADD_COMMUNITY_QUESTION_FAILED: 'ADD_COMMUNITY_QUESTION_FAILED',
-  COMMUNITY_QUESTIONS_FETCH_FAILED: 'COMMUNITY_QUESTIONS_FETCH_FAILED',
-  COMMUNITY_QUESTION_NOT_FOUND: 'COMMUNITY_QUESTION_NOT_FOUND',
-  COMMENT_SUBMISSION_FAILED: 'COMMENT_SUBMISSION_FAILED',
-  UPVOTE_FAILED: 'UPVOTE_FAILED',
-  DELETE_COMMENT_FAILED: 'DELETE_COMMENT_FAILED',
-  DELETE_QUESTION_FAILED: 'DELETE_QUESTION_FAILED',
-
-  // Organization errors
-  SITENAME_EXISTS: 'SITENAME_EXISTS',
-  ORG_CREATE_FAILED: 'ORG_CREATE_FAILED',
-  ORG_NOT_FOUND: 'ORG_NOT_FOUND',
-  ORGANIZATION_NOT_FOUND: 'ORGANIZATION_NOT_FOUND',
-  ORG_TEAM_FETCH_FAILED: 'ORG_TEAM_FETCH_FAILED',
-  ORG_AUDIENCE_FETCH_FAILED: 'ORG_AUDIENCE_FETCH_FAILED',
-  COURSES_FETCH_FAILED: 'COURSES_FETCH_FAILED',
-  ORG_PLAN_CREATE_FAILED: 'ORG_PLAN_CREATE_FAILED',
-  ORG_PLAN_UPDATE_FAILED: 'ORG_PLAN_UPDATE_FAILED',
-  ORG_PLAN_CANCEL_FAILED: 'ORG_PLAN_CANCEL_FAILED',
-  ORG_PLAN_NOT_FOUND: 'ORG_PLAN_NOT_FOUND',
-  ORG_TEAM_INVITE_FAILED: 'ORG_TEAM_INVITE_FAILED',
-  ORG_TEAM_REMOVE_FAILED: 'ORG_TEAM_REMOVE_FAILED',
-  ORG_AUDIENCE_REMOVE_FAILED: 'ORG_AUDIENCE_REMOVE_FAILED',
-  ORG_TEAM_EMAIL_EXISTS: 'ORG_TEAM_EMAIL_EXISTS',
-  ORG_TEAM_NOT_AUTHORIZED: 'ORG_TEAM_NOT_AUTHORIZED',
-  ORGANIZATION_API_KEY_NOT_FOUND: 'ORGANIZATION_API_KEY_NOT_FOUND',
-  ORGANIZATION_API_KEY_CREATE_FAILED: 'ORGANIZATION_API_KEY_CREATE_FAILED',
-  ORGANIZATION_API_KEY_FETCH_FAILED: 'ORGANIZATION_API_KEY_FETCH_FAILED',
-  ORGANIZATION_API_KEY_REVOKE_FAILED: 'ORGANIZATION_API_KEY_REVOKE_FAILED',
-  ORGANIZATION_API_KEY_ROTATE_FAILED: 'ORGANIZATION_API_KEY_ROTATE_FAILED',
-  AUTOMATION_KEY_LIMIT_EXCEEDED: 'AUTOMATION_KEY_LIMIT_EXCEEDED',
-  AUTOMATION_CREDIT_LIMIT_EXCEEDED: 'AUTOMATION_CREDIT_LIMIT_EXCEEDED',
-  AUTOMATION_RATE_LIMIT_EXCEEDED: 'AUTOMATION_RATE_LIMIT_EXCEEDED',
-  TAG_GROUP_NOT_FOUND: 'TAG_GROUP_NOT_FOUND',
-  TAG_NOT_FOUND: 'TAG_NOT_FOUND',
-  TAG_FETCH_FAILED: 'TAG_FETCH_FAILED',
-  TAG_CREATE_FAILED: 'TAG_CREATE_FAILED',
-  TAG_UPDATE_FAILED: 'TAG_UPDATE_FAILED',
-  TAG_ASSIGNMENT_FAILED: 'TAG_ASSIGNMENT_FAILED',
-
-  // Asset errors
-  ASSET_NOT_FOUND: 'ASSET_NOT_FOUND',
-  ASSET_IN_USE: 'ASSET_IN_USE',
-  ASSET_USAGE_NOT_FOUND: 'ASSET_USAGE_NOT_FOUND',
-  ASSET_CREATE_FAILED: 'ASSET_CREATE_FAILED',
-  ASSET_FETCH_FAILED: 'ASSET_FETCH_FAILED',
-  ASSET_LIST_FAILED: 'ASSET_LIST_FAILED',
-  ASSET_UPDATE_FAILED: 'ASSET_UPDATE_FAILED',
-  ASSET_DELETE_FAILED: 'ASSET_DELETE_FAILED',
-  ASSET_ATTACH_FAILED: 'ASSET_ATTACH_FAILED',
-  ASSET_DETACH_FAILED: 'ASSET_DETACH_FAILED',
-  ASSET_USAGE_FETCH_FAILED: 'ASSET_USAGE_FETCH_FAILED',
-  ASSET_EXPORT_FAILED: 'ASSET_EXPORT_FAILED',
-  ASSET_STORAGE_FETCH_FAILED: 'ASSET_STORAGE_FETCH_FAILED',
-
-  // Profile errors
-  PROFILE_UPDATE_FAILED: 'PROFILE_UPDATE_FAILED',
-  PROFILE_NOT_FOUND: 'PROFILE_NOT_FOUND',
-
-  // Account errors
-  ACCOUNT_NOT_FOUND: 'ACCOUNT_NOT_FOUND',
-
-  // Auth errors
-  FORBIDDEN: 'FORBIDDEN',
-
-  // Course errors
-  COURSE_NOT_FOUND: 'COURSE_NOT_FOUND',
-  COURSE_FETCH_FAILED: 'COURSE_FETCH_FAILED',
-  COURSE_IMPORT_DRAFT_NOT_FOUND: 'COURSE_IMPORT_DRAFT_NOT_FOUND',
-  COURSE_IMPORT_CREATE_FAILED: 'COURSE_IMPORT_CREATE_FAILED',
-  COURSE_IMPORT_FETCH_FAILED: 'COURSE_IMPORT_FETCH_FAILED',
-  COURSE_IMPORT_UPDATE_FAILED: 'COURSE_IMPORT_UPDATE_FAILED',
-  COURSE_IMPORT_PUBLISH_FAILED: 'COURSE_IMPORT_PUBLISH_FAILED',
-
-  // Lesson errors
-  LESSON_NOT_FOUND: 'LESSON_NOT_FOUND',
-  LESSON_FETCH_FAILED: 'LESSON_FETCH_FAILED',
-  COURSE_SECTION_NOT_FOUND: 'COURSE_SECTION_NOT_FOUND',
-
-  // Exercise errors
-  EXERCISE_NOT_FOUND: 'EXERCISE_NOT_FOUND',
-  EXERCISE_FETCH_FAILED: 'EXERCISE_FETCH_FAILED',
-
-  // Submission errors
-  SUBMISSION_NOT_FOUND: 'SUBMISSION_NOT_FOUND',
-  SUBMISSION_FETCH_FAILED: 'SUBMISSION_FETCH_FAILED',
-
-  // Comment errors
-  COMMENT_NOT_FOUND: 'COMMENT_NOT_FOUND',
-  LESSON_COMMENT_UPDATE_FAILED: 'LESSON_COMMENT_UPDATE_FAILED',
-  NEWSFEED_COMMENT_UPDATE_FAILED: 'NEWSFEED_COMMENT_UPDATE_FAILED',
-
-  // Quiz errors
-  QUIZ_NOT_FOUND: 'QUIZ_NOT_FOUND',
-  QUIZ_FETCH_FAILED: 'QUIZ_FETCH_FAILED',
-  QUIZ_CREATE_FAILED: 'QUIZ_CREATE_FAILED',
-  QUIZ_UPDATE_FAILED: 'QUIZ_UPDATE_FAILED',
-  QUIZ_DELETE_FAILED: 'QUIZ_DELETE_FAILED',
-
-  // Lesson Language errors
-  LESSON_LANGUAGE_NOT_FOUND: 'LESSON_LANGUAGE_NOT_FOUND',
-  LESSON_LANGUAGE_FETCH_FAILED: 'LESSON_LANGUAGE_FETCH_FAILED',
-  LESSON_LANGUAGE_CREATE_FAILED: 'LESSON_LANGUAGE_CREATE_FAILED',
-  LESSON_LANGUAGE_UPDATE_FAILED: 'LESSON_LANGUAGE_UPDATE_FAILED',
-
-  // SSO errors
-  SSO_REGISTRATION_FAILED: 'SSO_REGISTRATION_FAILED',
-  SSO_NOT_FOUND: 'SSO_NOT_FOUND',
-  SSO_NOT_ENABLED: 'SSO_NOT_ENABLED',
-  UPGRADE_REQUIRED: 'UPGRADE_REQUIRED',
-  CONFLICT: 'CONFLICT',
-
-  // Token exchange errors
-  TOKEN_EXCHANGE_INVALID_TOKEN: 'TOKEN_EXCHANGE_INVALID_TOKEN',
-  TOKEN_EXCHANGE_EXPIRED: 'TOKEN_EXCHANGE_EXPIRED',
-  TOKEN_EXCHANGE_ORG_NOT_FOUND: 'TOKEN_EXCHANGE_ORG_NOT_FOUND',
-  TOKEN_EXCHANGE_NOT_ENABLED: 'TOKEN_EXCHANGE_NOT_ENABLED',
-
-  // Token auth admin errors
-  TOKEN_AUTH_ALREADY_EXISTS: 'TOKEN_AUTH_ALREADY_EXISTS',
-
-  // Generic
-  VALIDATION_ERROR: 'VALIDATION_ERROR',
-  INTERNAL_ERROR: 'INTERNAL_ERROR'
-} as const;
-
-export type ErrorCode = (typeof ErrorCodes)[keyof typeof ErrorCodes];
-
 /**
  * Handles errors consistently across all routes
  * @param c - Hono context
diff --git a/apps/api/src/utils/lesson-media.ts b/apps/api/src/utils/lesson-media.ts
index cb2132c9..a42351b2 100644
--- a/apps/api/src/utils/lesson-media.ts
+++ b/apps/api/src/utils/lesson-media.ts
@@ -11,6 +11,7 @@ type LessonDocument = NonNullable<TLesson['documents']>[number];
 
 function mapProviderToVideoType(provider: string): LessonVideo['type'] {
   if (provider === 'youtube') return 'youtube';
+  if (provider === 'google_drive') return 'google_drive';
   if (provider === 'generic' || provider === 'external_url') return 'generic';
   return 'upload';
 }
diff --git a/apps/api/src/utils/org.ts b/apps/api/src/utils/org.ts
index fe8af47e..ec71f0bd 100644
--- a/apps/api/src/utils/org.ts
+++ b/apps/api/src/utils/org.ts
@@ -1,5 +1,4 @@
-/** Normalize JSONB organization-invite metadata for course ids (matches importAudienceMembers storage). */
-export function parseCourseIdsFromInviteMetadata(metadata: unknown): string[] {
+function parseInviteIds(metadata: unknown, keys: string[]): string[] {
   let obj: Record<string, unknown> | null = null;
   if (metadata == null) {
     return [];
@@ -17,9 +16,21 @@ export function parseCourseIdsFromInviteMetadata(metadata: unknown): string[] {
   if (!obj) {
     return [];
   }
-  const raw = obj.courseIds ?? obj.course_ids;
+
+  const raw = keys.map((key) => obj[key]).find((value) => value !== undefined);
   if (!Array.isArray(raw)) {
     return [];
   }
+
   return raw.filter((id): id is string => typeof id === 'string' && id.length > 0);
 }
+
+/** Normalize JSONB organization-invite metadata for course ids (matches importAudienceMembers storage). */
+export function parseCourseIdsFromInviteMetadata(metadata: unknown): string[] {
+  return parseInviteIds(metadata, ['courseIds', 'course_ids']);
+}
+
+/** Normalize JSONB organization-invite metadata for program ids (matches importAudienceMembers storage). */
+export function parseProgramIdsFromInviteMetadata(metadata: unknown): string[] {
+  return parseInviteIds(metadata, ['programIds', 'program_ids']);
+}
diff --git a/apps/api/src/utils/redis/key-generators.ts b/apps/api/src/utils/redis/key-generators.ts
index 8dfba562..77102351 100644
--- a/apps/api/src/utils/redis/key-generators.ts
+++ b/apps/api/src/utils/redis/key-generators.ts
@@ -3,8 +3,17 @@
  * These functions help create consistent and secure rate limit keys
  */
 
+import { getConnInfo } from '@hono/node-server/conninfo';
 import type { Context } from 'hono';
 
+function normalizeIp(value: string | null | undefined): string | null {
+  const ip = value?.trim();
+
+  if (!ip) return null;
+
+  return ip.startsWith('::ffff:') ? ip.slice('::ffff:'.length) : ip;
+}
+
 /**
  * Extract real client IP address considering various proxy headers
  */
@@ -15,9 +24,11 @@ export const extractClientIp = (c: Context): string => {
   // 3. X-Forwarded-For (standard, but can be spoofed)
   // 4. Connection IP (least reliable)
 
-  const cfConnectingIp = c.req.header('cf-connecting-ip');
-  const realIp = c.req.header('x-real-ip');
+  const cfConnectingIp = normalizeIp(c.req.header('cf-connecting-ip'));
+  const realIp = normalizeIp(c.req.header('x-real-ip'));
   const forwardedFor = c.req.header('x-forwarded-for');
+  const connInfo = getConnInfo(c);
+  const remoteAddress = normalizeIp(connInfo.remote.address);
 
   if (cfConnectingIp) {
     return cfConnectingIp;
@@ -30,7 +41,11 @@ export const extractClientIp = (c: Context): string => {
   if (forwardedFor) {
     // x-forwarded-for can contain multiple IPs: "client, proxy1, proxy2"
     // The first IP is usually the original client
-    return forwardedFor.split(',')[0].trim();
+    return normalizeIp(forwardedFor.split(',')[0]) ?? 'unknown';
+  }
+
+  if (remoteAddress) {
+    return remoteAddress;
   }
 
   // Fallback - this might be a proxy IP
diff --git a/apps/course-app/components.json b/apps/course-app/components.json
index 1740726b..5586390a 100644
--- a/apps/course-app/components.json
+++ b/apps/course-app/components.json
@@ -2,7 +2,6 @@
   "$schema": "https://shadcn-svelte.com/schema.json",
   "style": "new-york",
   "tailwind": {
-    "config": "tailwind.config.ts",
     "css": "src/app.css",
     "baseColor": "zinc"
   },
diff --git a/apps/course-app/package.json b/apps/course-app/package.json
index 27641728..06aa4fcb 100644
--- a/apps/course-app/package.json
+++ b/apps/course-app/package.json
@@ -19,26 +19,26 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "autoprefixer": "^10.4.20",
-    "bits-ui": "^0.21.16",
+    "@tailwindcss/postcss": "^4.2.2",
+    "bits-ui": "^2.16.1",
     "clsx": "^2.1.1",
+    "postcss": "^8.5.6",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.0.0",
     "vite": "^6.0.0",
     "vitest": "^2.0.4"
   },
   "dependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
+    "@cio/ui": "workspace:*",
+    "@lucide/svelte": "^0.562.0",
     "lucide-svelte": "^0.468.0",
     "mode-watcher": "^1.1.0",
     "posthog-js": "^1.180.1",
diff --git a/apps/course-app/postcss.config.js b/apps/course-app/postcss.config.js
index ba807304..50a4f5b9 100644
--- a/apps/course-app/postcss.config.js
+++ b/apps/course-app/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 };
diff --git a/apps/course-app/src/app.css b/apps/course-app/src/app.css
index d6fea4e6..853cc6e6 100644
--- a/apps/course-app/src/app.css
+++ b/apps/course-app/src/app.css
@@ -1,6 +1,66 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@cio/ui/output.css';
+@import '../../../packages/ui/src/custom/animation/marketing-layers.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@source './**/*.{html,js,svelte,ts}';
+@source '../../../packages/ui/src/custom/animation/**/*.svelte';
+
+/* Theme tokens (colors, fonts, radii, motion) + 2xl breakpoint for layout (e.g. `max-w-(--breakpoint-2xl)`). */
+@theme inline {
+  --breakpoint-2xl: 1400px;
+
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-drawn:
+    Virgil, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+
+  --color-border: hsl(var(--border) / <alpha-value>);
+  --color-input: hsl(var(--input) / <alpha-value>);
+  --color-ring: hsl(var(--ring) / <alpha-value>);
+  --color-background: hsl(var(--background) / <alpha-value>);
+  --color-foreground: hsl(var(--foreground) / <alpha-value>);
+  --color-primary: hsl(var(--primary) / <alpha-value>);
+  --color-primary-foreground: hsl(var(--primary-foreground) / <alpha-value>);
+  --color-secondary: hsl(var(--secondary) / <alpha-value>);
+  --color-secondary-foreground: hsl(var(--secondary-foreground) / <alpha-value>);
+  --color-destructive: hsl(var(--destructive) / <alpha-value>);
+  --color-destructive-foreground: hsl(var(--destructive-foreground) / <alpha-value>);
+  --color-muted: hsl(var(--muted) / <alpha-value>);
+  --color-muted-foreground: hsl(var(--muted-foreground) / <alpha-value>);
+  --color-accent: hsl(var(--accent) / <alpha-value>);
+  --color-accent-foreground: hsl(var(--accent-foreground) / <alpha-value>);
+  --color-popover: hsl(var(--popover) / <alpha-value>);
+  --color-popover-foreground: hsl(var(--popover-foreground) / <alpha-value>);
+  --color-card: hsl(var(--card) / <alpha-value>);
+  --color-card-foreground: hsl(var(--card-foreground) / <alpha-value>);
+
+  --animate-border-beam: border-beam calc(var(--duration) * 1s) infinite linear;
+  --animate-meteor: meteor 5s linear infinite;
+  --animate-shimmer: shimmer 8s infinite;
+  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
+  --animate-magicslide: magicslide var(--speed) ease-in-out infinite alternate;
+}
+
+/* Used by ShinnyText (`animate-shimmer`); marketing-layers uses `shimmer-marketing` for other UIs. */
+@keyframes shimmer {
+  0%,
+  90%,
+  100% {
+    background-position: calc(-100% - var(--shimmer-width)) 0;
+  }
+  30%,
+  60% {
+    background-position: calc(100% + var(--shimmer-width)) 0;
+  }
+}
 
 @font-face {
   font-family: 'Virgil';
diff --git a/apps/course-app/src/lib/components/animation/blurin/blurin.svelte b/apps/course-app/src/lib/components/animation/blurin/blurin.svelte
deleted file mode 100644
index 8deec74d..00000000
--- a/apps/course-app/src/lib/components/animation/blurin/blurin.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { cn } from "$lib/utils";
-  import { Motion } from "svelte-motion";
-
-  export let variant: {
-    hidden: { filter: string; opacity: number };
-    visible: { filter: string; opacity: number };
-  } = {
-    hidden: { filter: "blur(10px)", opacity: 0 },
-    visible: { filter: "blur(0px)", opacity: 1 },
-  };
-  export let duration: number = 1;
-  let className = "font-display text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]";
-  export { className as class };
-
-  let defaultVariants = {
-    hidden: { filter: "blur(10px)", opacity: 0 },
-    visible: { filter: "blur(0px)", opacity: 1 },
-  };
-  let combinedVariants = variant || defaultVariants;
-</script>
-
-<Motion
-  initial="hidden"
-  animate="visible"
-  transition={{ duration }}
-  variants={combinedVariants}
-  let:motion
->
-  <h1
-    class={cn(className)}
-    use:motion
-  >
-    <slot />
-  </h1>
-</Motion>
diff --git a/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte b/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte
deleted file mode 100644
index 34a5c339..00000000
--- a/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  export let size = 200;
-  export let duration = 15;
-  export let anchor = 90;
-  export let borderWidth = 1.5;
-  export let colorFrom = '#ffaa40';
-  export let colorTo = '#9c40ff';
-  export let delay = 0;
-  let delaySec = delay + 's';
-
-  let className: any = '';
-  export { className as class };
-</script>
-
-<div
-  style:--border-width={borderWidth}
-  style:--size={size}
-  style:--color-from={colorFrom}
-  style:--color-to={colorTo}
-  style:--delay={delaySec}
-  style:--anchor={anchor}
-  style:--duration={duration}
-  class={cn(
-    'pointer-events-none absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
-
-    // mask styles
-    '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
-
-    // pseudo styles
-    'after:animate-border-beam after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
-    className
-  )}
-></div>
diff --git a/apps/course-app/src/lib/components/animation/card/body.svelte b/apps/course-app/src/lib/components/animation/card/body.svelte
deleted file mode 100644
index 2b29d82d..00000000
--- a/apps/course-app/src/lib/components/animation/card/body.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-
-	let { children, className } = $props();
-
-	// let cardContent = {
-	// 	title: 'Svelte is Vibe',
-	// 	description: 'Svelte is a fun way to build web applications.'
-	// };
-</script>
-
-<div class={cn('p-4 text-left', className)}>
-	<!-- <h3 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">
-		{cardContent.title}
-	</h3>
-	<p class="text-gray-700 dark:text-gray-300">
-		{cardContent.description}
-	</p> -->
-
-	{@render children()}
-</div>
diff --git a/apps/course-app/src/lib/components/animation/card/ellipses.svelte b/apps/course-app/src/lib/components/animation/card/ellipses.svelte
deleted file mode 100644
index ce0bc9d2..00000000
--- a/apps/course-app/src/lib/components/animation/card/ellipses.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let sharedClass =
-		'rounded-full outline outline-8 dark:outline-gray-950 sm:my-6 md:my-8 size-1 my-4 outline-gray-50 bg-green-400';
-</script>
-
-<div class="absolute z-0 grid h-full w-full items-center gap-8 lg:grid-cols-2">
-	<section class="absolute z-0 grid h-full w-full grid-cols-2 place-content-between">
-		<div class="{sharedClass} -mx-[2.5px]"></div>
-		<div class="{sharedClass} -mx-[2px] place-self-end"></div>
-		<div class="{sharedClass} -mx-[2.5px]"></div>
-		<div class="{sharedClass} -mx-[2px] place-self-end"></div>
-	</section>
-</div>
diff --git a/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte b/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte
deleted file mode 100644
index b92fca39..00000000
--- a/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-  export let width: string | number = 16;
-  export let height: string | number = 16;
-  export let x = 0;
-  export let y = 0;
-  export let cx = 1;
-  export let cy = 1;
-  export let cr = 1;
-  export let fillColor = 'rgb(163 163 163 / 0.8)';
-
-  let className: any = '';
-  export { className as class };
-  let id = crypto.randomUUID().toString().slice(0, 10); // generating a unique ID for Components
-</script>
-
-<svg
-  aria-hidden="true"
-  class={cn('pointer-events-none absolute inset-0 h-full w-full ', className)}
-  {...$$restProps}
-  fill={fillColor}
->
-  <defs>
-    <pattern
-      {id}
-      {width}
-      {height}
-      patternUnits="userSpaceOnUse"
-      patternContentUnits="userSpaceOnUse"
-      {x}
-      {y}
-    >
-      <circle id="pattern-circle" {cx} {cy} r={cr} />
-    </pattern>
-  </defs>
-  <rect width="100%" height="100%" stroke-width={0} fill={`url(#${id})`} />
-</svg>
diff --git a/apps/course-app/src/lib/components/animation/gradual-spacing/gradual-spacing.svelte b/apps/course-app/src/lib/components/animation/gradual-spacing/gradual-spacing.svelte
deleted file mode 100644
index 47666628..00000000
--- a/apps/course-app/src/lib/components/animation/gradual-spacing/gradual-spacing.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import { AnimatePresence, Motion } from 'svelte-motion';
-
-	let className: any = 'Gradual Spacing';
-	export { className as class };
-
-	export let words = 'Gradual Spacing';
-	export let duration = 0.5;
-	export let delayMultiple = 0.04;
-	export let framerProps = {
-		hidden: { opacity: 0, x: -20 },
-		visible: { opacity: 1, x: 0 }
-	};
-	let wordsspilit = words.split('');
-</script>
-
-<div class="flex justify-center space-x-1">
-	<AnimatePresence let:item list={[{ key: wordsspilit }]}>
-		{#each wordsspilit as char, i}
-			<Motion
-				initial="hidden"
-				animate="visible"
-				exit="hidden"
-				variants={framerProps}
-				transition={{
-					duration: duration,
-					delay: i * delayMultiple
-				}}
-				let:motion
-			>
-				<span use:motion class={cn('drop-shadow-sm', className)}>
-					{#if char === ' '}
-						<span>&nbsp;</span>
-					{:else}
-						{char}
-					{/if}
-				</span>
-			</Motion>
-		{/each}
-	</AnimatePresence>
-</div>
diff --git a/apps/course-app/src/lib/components/animation/magic-card/magic-card.svelte b/apps/course-app/src/lib/components/animation/magic-card/magic-card.svelte
deleted file mode 100644
index 57ab3456..00000000
--- a/apps/course-app/src/lib/components/animation/magic-card/magic-card.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-	import { Motion, useMotionValue, useMotionTemplate } from 'svelte-motion';
-	import { onMount } from 'svelte';
-	import { cn } from '$lib/utils';
-
-	export let gradientSize: number = 200;
-	export let gradientColor: string = '#262626';
-	export let gradientOpacity: number = 0.8;
-	let className: string = '';
-	export { className as class };
-
-	let gradSize = useMotionValue(gradientSize);
-	let gradColor = useMotionValue(gradientColor);
-	let mouseX = useMotionValue(-gradientSize);
-	let mouseY = useMotionValue(-gradientSize);
-
-	function handleMouseMove(e: MouseEvent) {
-		const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
-		mouseX.set(e.clientX - rect.left);
-		mouseY.set(e.clientY - rect.top);
-	}
-
-	function handleMouseLeave() {
-		mouseX.set(-gradientSize);
-		mouseY.set(-gradientSize);
-	}
-
-	onMount(() => {
-		mouseX.set(-gradientSize);
-		mouseY.set(-gradientSize);
-	});
-	let bg = useMotionTemplate`radial-gradient(${gradSize}px circle at ${mouseX}px ${mouseY}px, ${gradColor}, transparent 100%)`;
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- I have added py-4 in below code, you can customize the component as per needs -->
-<div
-	on:mousemove={handleMouseMove}
-	on:mouseleave={handleMouseLeave}
-	class={cn(
-		'group relative flex size-full justify-center overflow-hidden rounded-xl border bg-neutral-100 py-4 text-black dark:bg-neutral-900 dark:text-white',
-		className
-	)}
->
-	<div class="relative z-10">
-		<!-- Default  -->
-		<slot>
-			<div class="flex h-full items-center justify-center text-center">
-				<p class="text-2xl">Magic Card</p>
-			</div>
-		</slot>
-	</div>
-	<Motion
-		style={{
-			background: bg,
-			opacity: gradientOpacity
-		}}
-		let:motion
-	>
-		<div
-			use:motion
-			class="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-		/>
-	</Motion>
-</div>
-
-<style>
-	.size-full {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/apps/course-app/src/lib/components/animation/meteors/meteors.svelte b/apps/course-app/src/lib/components/animation/meteors/meteors.svelte
deleted file mode 100644
index 8257629d..00000000
--- a/apps/course-app/src/lib/components/animation/meteors/meteors.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import { onMount } from 'svelte';
-
-	export let number = 10;
-	let meteorStyles: any = [];
-	let changeMeteors = (num: number) => {
-		meteorStyles = [];
-		const styles = [...new Array(num)].map(() => ({
-			top: -20,
-			left: Math.floor(Math.random() * 700) + 'px',
-			animationDelay: Math.random() * 1 + 0.2 + 's',
-			animationDuration: Math.floor(Math.random() * 8 + 2.9) + 's'
-		}));
-		meteorStyles = styles;
-	};
-	onMount(() => {
-		changeMeteors(number);
-	});
-	//   $: changeMeteors(number);
-</script>
-
-{#each meteorStyles as style, idx}
-	<span
-		id="meteor-{idx + 1}"
-		class={cn(
-			'animate-meteor pointer-events-none absolute left-1/2 top-1/2 size-[2.4px] rotate-[215deg] rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]'
-		)}
-		style="top: {style.top}px; left: {style.left}; animation-delay: {style.animationDelay}; animation-duration: {style.animationDuration};"
-	>
-		<!-- Meteor Tail  -->
-		<div
-			class="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 via-blue-600/30 to-transparent"
-		/>
-	</span>
-{/each}
diff --git a/apps/course-app/src/lib/components/animation/shimmerbutton/shimmerbutton.svelte b/apps/course-app/src/lib/components/animation/shimmerbutton/shimmerbutton.svelte
deleted file mode 100644
index 077b01a5..00000000
--- a/apps/course-app/src/lib/components/animation/shimmerbutton/shimmerbutton.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  export let href: string;
-  export let target: string = '';
-  export let rel: string = '';
-  export let shimmerColor = '#ffffff';
-  export let shimmerSize = '0.05em';
-  export let shimmerDuration = '3s';
-  export let borderRadius = '100px';
-  export let background = 'rgba(0, 0, 0, 1)';
-  let className: any = '';
-  export { className as class };
-</script>
-
-<a
-  style:--spread="90deg"
-  style:--shimmer-color={shimmerColor}
-  style:--radius={borderRadius}
-  style:--speed={shimmerDuration}
-  style:--cut={shimmerSize}
-  style:--bg={background}
-  class={cn(
-    'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-white',
-    'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]',
-    className
-  )}
-  {href}
-  {target}
-  {rel}
-  data-rewardful
->
-  <div class={cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')}>
-    <div
-      class="animate-magicslide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]"
-    >
-      <!--  spark before  -->
-      <div
-        class="animate-spin-around absolute inset-[-100%] w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"
-      />
-    </div>
-  </div>
-  <slot>Shimmer Button</slot>
-  <!-- Highlight -->
-  <div
-    class={cn(
-      'insert-0 absolute h-full w-full',
-
-      'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
-
-      // transition
-      'transform-gpu transition-all duration-300 ease-in-out',
-
-      // on hover
-      'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
-
-      // on click
-      'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
-    )}
-  ></div>
-  <!-- backdrop -->
-  <div
-    class={cn(
-      'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
-    )}
-  ></div>
-</a>
diff --git a/apps/course-app/src/lib/components/animation/shinny-text/shinny-text.svelte b/apps/course-app/src/lib/components/animation/shinny-text/shinny-text.svelte
deleted file mode 100644
index 55cd431f..00000000
--- a/apps/course-app/src/lib/components/animation/shinny-text/shinny-text.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-
-	export let shimmerWidth = 100;
-	let className: any = '';
-	export { className as class };
-</script>
-
-<p
-	style:--shimmer-width="{shimmerWidth}px"
-	class={cn(
-		'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ',
-
-		// Shimmer effect
-		'animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
-
-		// Shimmer gradient
-		'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80',
-
-		className
-	)}
->
-	<slot>Shimmer Animation</slot>
-</p>
diff --git a/apps/course-app/src/lib/components/animation/sparkle/sparkle-text.svelte b/apps/course-app/src/lib/components/animation/sparkle/sparkle-text.svelte
deleted file mode 100644
index e3b64e30..00000000
--- a/apps/course-app/src/lib/components/animation/sparkle/sparkle-text.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-  interface TSparkle {
-    id: string;
-    x: string;
-    y: string;
-    color: string;
-    delay: number;
-    scale: number;
-    lifespan: number;
-  }
-
-  export let text: string = 'Hello World';
-  export let colors = {
-    first: '#9E7AFF',
-    second: '#FE8BBB'
-  };
-  export let sparklesCount = 5;
-
-  let className = '';
-  export { className as class };
-
-  let sparkles: TSparkle[] = [];
-  import { onMount, onDestroy } from 'svelte';
-  import Sparkle from './sparkle.svelte';
-
-  let generateStar = () => {
-    let starX = `${Math.random() * 100}%`;
-    let starY = `${Math.random() * 100}%`;
-    let color = Math.random() > 0.5 ? colors.first : colors.second;
-    let delay = Math.random() * 4;
-    let scale = Math.random() * 1 + 0.3;
-    let lifespan = Math.random() * 10 + 5;
-    let id = `${starX}-${starY}-${Date.now()}`;
-    return { id, x: starX, y: starY, color, delay, scale, lifespan };
-  };
-
-  let initializeStars = async () => {
-    let newSparkles = Array.from({ length: sparklesCount }, generateStar);
-    sparkles = newSparkles;
-  };
-
-  const updateStars = () => {
-    let temp = sparkles.map((star) => {
-      if (star.lifespan <= 0) {
-        return generateStar();
-      } else {
-        return { ...star, lifespan: star.lifespan - 0.1 };
-      }
-    });
-    sparkles = temp;
-  };
-
-  let interval: NodeJS.Timer;
-  onMount(async () => {
-    initializeStars();
-    interval = setInterval(updateStars, 100);
-  });
-  onDestroy(() => clearInterval(interval));
-</script>
-
-<div
-  style:--sparkles-first-color="{colors.first};"
-  style:--sparkles-second-color="{colors.second};"
-  class={className}
-  {...$$restProps}
->
-  <span class="relative inline-block">
-    {#each sparkles as item, _}
-      <Sparkle {...item} />
-    {/each}
-    <strong>{text}</strong>
-  </span>
-</div>
diff --git a/apps/course-app/src/lib/components/animation/sparkle/sparkle.svelte b/apps/course-app/src/lib/components/animation/sparkle/sparkle.svelte
deleted file mode 100644
index 7f7033d0..00000000
--- a/apps/course-app/src/lib/components/animation/sparkle/sparkle.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { Motion } from "svelte-motion";
-
-  export let id;
-  export let x;
-  export let y;
-  export let color;
-  export let delay;
-  export let scale;
-</script>
-
-<Motion
-  initial={{ opacity: 0, left: x, top: y }}
-  animate={{
-    opacity: [0, 1, 0],
-    scale: [0, scale, 0],
-    rotate: [75, 120, 150],
-  }}
-  transition={{ duration: 0.8, repeat: Infinity, delay }}
-  let:motion
->
-  <svg
-    {id}
-    use:motion
-    class="pointer-events-none absolute z-20"
-    width="21"
-    height="21"
-    viewBox="0 0 21 21"
-  >
-    <path
-      d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
-      fill={color}
-    />
-  </svg>
-</Motion>
\ No newline at end of file
diff --git a/apps/course-app/src/lib/components/animation/square-card/body.svelte b/apps/course-app/src/lib/components/animation/square-card/body.svelte
deleted file mode 100644
index 2e4fa892..00000000
--- a/apps/course-app/src/lib/components/animation/square-card/body.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-
-	let { children, className } = $props();
-</script>
-
-<div class={cn('text-left', className)}>
-	{@render children()}
-</div>
diff --git a/apps/course-app/src/lib/components/animation/square-card/icon.svelte b/apps/course-app/src/lib/components/animation/square-card/icon.svelte
deleted file mode 100644
index c26a3cc5..00000000
--- a/apps/course-app/src/lib/components/animation/square-card/icon.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-
-	let className: any = '';
-	export { className as class };
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 24 24"
-	width={24}
-	height={24}
-	stroke-width="1"
-	stroke-linecap="round"
-	stroke="currentColor"
-	class={cn('absolute text-black  dark:text-white', className)}
-	{...$$restProps}
->
-	<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-</svg>
diff --git a/apps/course-app/src/lib/components/buy-template/buy-template.svelte b/apps/course-app/src/lib/components/buy-template/buy-template.svelte
index 8cf7816e..160f43cd 100644
--- a/apps/course-app/src/lib/components/buy-template/buy-template.svelte
+++ b/apps/course-app/src/lib/components/buy-template/buy-template.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { buttonVariants } from '$lib/components/ui/button';
-  import { ShimmerButton } from '$lib/components/animation/shimmerbutton';
-  import * as Dialog from '$lib/components/ui/dialog';
+  import { buttonVariants } from '@cio/ui/base/button';
+  import { ShimmerButton } from '@cio/ui/custom/animation';
+  import * as Dialog from '@cio/ui/base/dialog';
   import { cn } from '$lib/utils';
   import BadgeCheck from 'lucide-svelte/icons/badge-check';
 
@@ -19,10 +19,6 @@
 </script>
 
 <Dialog.Root>
-  <!-- <span
-    class="absolute inset-0 z-30 flex items-center justify-center bg-black/50 opacity-0 transition-all duration-500 hover:opacity-80"
-  >
-</span> -->
   <Dialog.Trigger class={cn(buttonVariants({ variant: 'default' }), `z-20 ${ctaClass}`)}>
     {ctaLabel}
   </Dialog.Trigger>
diff --git a/apps/course-app/src/lib/components/install/install.svelte b/apps/course-app/src/lib/components/install/install.svelte
index 13a82afb..8a639616 100644
--- a/apps/course-app/src/lib/components/install/install.svelte
+++ b/apps/course-app/src/lib/components/install/install.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { toast } from 'svelte-sonner';
-  import { ShinnyText } from '$lib/components/animation/shinny-text';
+  import { ShinnyText } from '@cio/ui/custom/animation';
   import Copy from 'lucide-svelte/icons/copy';
   import { cn } from '$lib/utils';
 
@@ -17,7 +17,7 @@
   )}
 >
   <ShinnyText
-    class="animate-gradient inline-flex items-center justify-center bg-gradient-to-r from-[#ffaa40]  via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%]  bg-clip-text px-4 py-1 text-transparent text-white transition ease-out hover:text-neutral-400 hover:duration-300"
+    class="animate-gradient inline-flex items-center justify-center bg-linear-to-r from-[#ffaa40]  via-[#9c40ff] to-[#ffaa40] bg-size-[var(--bg-size)_100%]  bg-clip-text px-4 py-1 text-transparent text-white transition ease-out hover:text-neutral-400 hover:duration-300"
   >
     <span>{command}</span>
 
diff --git a/apps/course-app/src/lib/components/navigation/navigation.svelte b/apps/course-app/src/lib/components/navigation/navigation.svelte
index 5ba84b27..a5ddbb05 100644
--- a/apps/course-app/src/lib/components/navigation/navigation.svelte
+++ b/apps/course-app/src/lib/components/navigation/navigation.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <header
-  class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+  class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60"
 >
   <p class="bg-blue-700 py-1.5 text-center text-sm font-medium text-white">
     brought to you by
@@ -35,7 +35,7 @@
       </svg>
     </a>
   </p>
-  <div class="container flex h-14 max-w-screen-2xl items-center">
+  <div class="flex h-14 max-w-5xl mx-auto items-center">
     <div class="mr-4 flex">
       <a href="/" class="mr-6 flex items-center">
         <img src="/logo-512.png" alt="Course App" class="h-8 w-8" />
diff --git a/apps/course-app/src/lib/components/template-card/custom-template.svelte b/apps/course-app/src/lib/components/template-card/custom-template.svelte
index 5226b2eb..45f59238 100644
--- a/apps/course-app/src/lib/components/template-card/custom-template.svelte
+++ b/apps/course-app/src/lib/components/template-card/custom-template.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Santa from './santa.svg';
-  import { BorderBeam } from '$lib/components/animation/border-beam';
-  import { DotPattern } from '$lib/components/animation/dot-pattern';
+  import { BorderBeam, DotPattern } from '@cio/ui/custom/animation';
   import { BuyTemplate } from '$lib/components/buy-template';
 </script>
 
diff --git a/apps/course-app/src/lib/components/ui/separator/separator.svelte b/apps/course-app/src/lib/components/ui/separator/separator.svelte
index aa61f693..a68c9790 100644
--- a/apps/course-app/src/lib/components/ui/separator/separator.svelte
+++ b/apps/course-app/src/lib/components/ui/separator/separator.svelte
@@ -13,7 +13,7 @@
 <SeparatorPrimitive.Root
 	class={cn(
 		"bg-border shrink-0",
-		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		orientation === "horizontal" ? "h-px w-full" : "min-h-full w-px",
 		className
 	)}
 	{orientation}
diff --git a/apps/course-app/src/lib/components/ui/sonner/sonner.svelte b/apps/course-app/src/lib/components/ui/sonner/sonner.svelte
index 7d5b2f14..c58abd1f 100644
--- a/apps/course-app/src/lib/components/ui/sonner/sonner.svelte
+++ b/apps/course-app/src/lib/components/ui/sonner/sonner.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Sonner
-	theme={$mode}
+	theme={mode.current}
 	class="toaster group"
 	toastOptions={{
 		classes: {
diff --git a/apps/course-app/src/routes/+page.svelte b/apps/course-app/src/routes/+page.svelte
index 8d1be1bf..e627855e 100644
--- a/apps/course-app/src/routes/+page.svelte
+++ b/apps/course-app/src/routes/+page.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { CardBody, CardContainer } from '$lib/components/animation/card';
-  import { BlurFade } from '$lib/components/animation/blurfade';
-  import { BlurIn } from '$lib/components/animation/blurin';
   import { Button } from '$lib/components/ui/button';
   import { TemplateCard, CustomTemplate } from '$lib/components/template-card';
-  import { Meteors } from '$lib/components/animation/meteors';
   import { Separator } from '$lib/components/ui/separator';
-  import { BorderBeam } from '$lib/components/animation/border-beam';
-  import { ShimmerButton } from '$lib/components/animation/shimmerbutton';
   import { BuyTemplate } from '$lib/components/buy-template';
-  import { Sparkle } from '$lib/components/animation/sparkle';
-  import { HeroVideoDialog } from '$lib/components/animation/hero-video-dialog';
+  import {
+    BlurFade,
+    BlurIn,
+    BorderBeam,
+    CardBody,
+    CardContainer,
+    HeroVideoDialog,
+    Meteors,
+    ShimmerButton,
+    Sparkle
+  } from '@cio/ui/custom/animation';
 
   const templates = [
     {
@@ -93,7 +96,7 @@
         className="py-10 max-w-4xl mx-auto flex flex-col items-center justify-center px-30 gap-2 md:gap-5"
       >
         <BlurIn
-          class="pointer-events-none flex max-w-2xl flex-col items-center whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-2xl font-semibold leading-none tracking-tighter text-transparent md:mb-4 md:block md:text-4xl lg:text-6xl"
+          class="pointer-events-none flex max-w-2xl flex-col items-center whitespace-pre-wrap bg-linear-to-b from-black to-gray-300/80 bg-clip-text text-center text-2xl font-semibold leading-none tracking-tighter text-transparent md:mb-4 md:block md:text-4xl lg:text-6xl"
         >
           Create a <span class="font-mono italic text-blue-700">Course</span>
           <span>Site for your Product in</span>
@@ -157,7 +160,7 @@
 
 <!-- Templates -->
 <section id="templates" class="my-5 w-full pt-0 md:my-0 md:pt-24">
-  <div class="px-4 md:container">
+  <div class="px-4 max-w- mx-auto">
     <h2 class="mb-5 text-center text-3xl font-semibold md:mb-20 md:text-start md:text-5xl">
       Browse Templates
     </h2>
diff --git a/apps/course-app/svelte.config.js b/apps/course-app/svelte.config.js
index d99956f4..03265662 100644
--- a/apps/course-app/svelte.config.js
+++ b/apps/course-app/svelte.config.js
@@ -1,23 +1,23 @@
 import adapter from '@sveltejs/adapter-auto';
+import path from 'path';
+import { fileURLToPath } from 'url';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://svelte.dev/docs/kit/integrations
-  // for more information about preprocessors
   preprocess: vitePreprocess({
     script: true
   }),
 
   kit: {
-    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
     adapter: adapter(),
 
     alias: {
-      $lib: './src/lib',
-      $lib: './src/lib/*'
+      $lib: path.resolve(__dirname, './src/lib'),
+      '@cio/ui': path.resolve(__dirname, './node_modules/@cio/ui/src'),
+      '@cio/ui/*': path.resolve(__dirname, './node_modules/@cio/ui/src/*')
     }
   }
 };
diff --git a/apps/course-app/tailwind.config.ts b/apps/course-app/tailwind.config.ts
deleted file mode 100644
index a545f8a8..00000000
--- a/apps/course-app/tailwind.config.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { fontFamily } from 'tailwindcss/defaultTheme';
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  safelist: ['dark'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px'
-      }
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border) / <alpha-value>)',
-        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
-        }
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
-      fontFamily: {
-        sans: [...fontFamily.sans],
-        drawn: [
-          'Virgil',
-          'ui-sans-serif',
-          'system-ui',
-          'sans-serif',
-          'Apple Color Emoji',
-          'Segoe UI Emoji',
-          'Segoe UI Symbol',
-          'Noto Color Emoji'
-        ]
-      },
-
-      animation: {
-        'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
-        meteor: 'meteor 5s linear infinite',
-        shimmer: 'shimmer 8s infinite',
-        'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
-        magicslide: 'magicslide var(--speed) ease-in-out infinite alternate'
-      },
-
-      keyframes: {
-        'border-beam': {
-          '100%': {
-            'offset-distance': '100%'
-          }
-        },
-
-        meteor: {
-          '0%': { transform: 'rotate(215deg) translateX(0)', opacity: '1' },
-          '70%': { opacity: '1' },
-          '100%': {
-            transform: 'rotate(215deg) translateX(-500px)',
-            opacity: '0'
-          }
-        },
-        shimmer: {
-          '0%, 90%, 100%': {
-            'background-position': 'calc(-100% - var(--shimmer-width)) 0'
-          },
-          '30%, 60%': {
-            'background-position': 'calc(100% + var(--shimmer-width)) 0'
-          }
-        },
-
-        'spin-around': {
-          '0%': {
-            transform: 'translateZ(0) rotate(0)'
-          },
-          '15%, 35%': {
-            transform: 'translateZ(0) rotate(90deg)'
-          },
-          '65%, 85%': {
-            transform: 'translateZ(0) rotate(270deg)'
-          },
-          '100%': {
-            transform: 'translateZ(0) rotate(360deg)'
-          }
-        },
-
-        magicslide: {
-          to: {
-            transform: 'translate(calc(100cqw - 100%), 0)'
-          }
-        }
-      }
-    }
-  }
-};
-
-export default config;
diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example
index 41542c31..75c4920e 100644
--- a/apps/dashboard/.env.example
+++ b/apps/dashboard/.env.example
@@ -20,6 +20,10 @@ PUBLIC_IS_SELFHOSTED=false
 # CSP_FONT_SRC_DOMAINS=
 # CSP_MEDIA_SRC_DOMAINS= (applies to both img-src and media-src)
 
+# Google Drive video picker (lesson editor). OAuth Web client ID + Browser API key from Google Cloud Console (Picker API + Drive API enabled).
+# PUBLIC_GOOGLE_PICKER_CLIENT_ID=
+# PUBLIC_GOOGLE_PICKER_API_KEY=
+
 # Unsplash setup - Optional if you want to use Unsplash images
 UNSPLASH_API_KEY=
 
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index f72a01f1..f4d6de1b 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -16,7 +16,7 @@
     "test": "jest",
     "test:watch": "pnpm run test --watch",
     "ci": "cp .env.example .env && vite build && vite preview",
-    "script:translate": "node ./scripts/translate.cjs"
+    "translate": "node ./scripts/translate.cjs"
   },
   "dependencies": {
     "@better-auth/sso": "1.4.18",
diff --git a/apps/dashboard/scripts/translate.cjs b/apps/dashboard/scripts/translate.cjs
index 8a5b56cd..fb9a902b 100644
--- a/apps/dashboard/scripts/translate.cjs
+++ b/apps/dashboard/scripts/translate.cjs
@@ -9,6 +9,7 @@ const jessy = require('jessy');
 const set = require('lodash/set');
 
 const englishTranslations = require('../src/lib/utils/translations/en.json');
+let prettierPromise;
 
 // Load env variables
 dotenv.config();
@@ -38,6 +39,25 @@ const selectedLanguageFiles = requestedLanguages.length
 
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+const getPrettier = async () => {
+  if (!prettierPromise) {
+    prettierPromise = import('prettier');
+  }
+
+  return prettierPromise;
+};
+
+const writeFormattedTranslationFile = async (outputFilePath, translations) => {
+  const prettier = await getPrettier();
+  const prettierConfig = (await prettier.resolveConfig(outputFilePath)) ?? {};
+  const formattedJson = await prettier.format(JSON.stringify(translations, null, 2), {
+    ...prettierConfig,
+    filepath: outputFilePath
+  });
+
+  fs.writeFileSync(outputFilePath, formattedJson);
+};
+
 const getMissingTranslations = async (toLanguage, outputFilePath) => {
   const englishKeys = keys(englishTranslations);
   const targetTranslations = require(outputFilePath); // Load target language translations
@@ -109,7 +129,7 @@ const translateLanguage = async (fromLanguage, toLanguage, outputFilePath) => {
         set(targetTranslations, key, value);
       }
 
-      fs.writeFileSync(outputFilePath, JSON.stringify(targetTranslations, null, 2));
+      await writeFormattedTranslationFile(outputFilePath, targetTranslations);
       console.log(`${toLanguage.toUpperCase()} translations updated successfully.`);
     } else {
       console.log(`Failed to update ${toLanguage.toUpperCase()} translations.`);
diff --git a/apps/dashboard/src/app.css b/apps/dashboard/src/app.css
index 3613a272..c18bfd5e 100644
--- a/apps/dashboard/src/app.css
+++ b/apps/dashboard/src/app.css
@@ -4,6 +4,8 @@
 
 @import '@cio/ui/output.css';
 
+@source '../../packages/ui/src/custom/animation/**/*.svelte';
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* Geist variable font — self-hosted */
diff --git a/apps/dashboard/src/lib/features/audience/components/audience-table-toolbar.svelte b/apps/dashboard/src/lib/features/audience/components/audience-table-toolbar.svelte
index 818c70e9..878c7486 100644
--- a/apps/dashboard/src/lib/features/audience/components/audience-table-toolbar.svelte
+++ b/apps/dashboard/src/lib/features/audience/components/audience-table-toolbar.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
   import { Button } from '@cio/ui/base/button';
-  import * as Select from '@cio/ui/base/select';
   import { Search } from '@cio/ui/custom/search';
   import * as Page from '@cio/ui/base/page';
   import { t } from '$lib/utils/functions/translations';
+  import { SortPopover } from '$features/ui';
+  import type { OrganizationAudienceSortBy, OrganizationAudienceSortOrder } from '$features/org/utils/types';
 
   interface Props {
     hasSelection: boolean;
     selectedCount: number;
     searchValue?: string;
-    sortValue: string;
-    onSortChange: (value: string) => void;
+    sortBy: OrganizationAudienceSortBy;
+    sortOrder: OrganizationAudienceSortOrder;
+    onSortChange: (sortBy: OrganizationAudienceSortBy, sortOrder: OrganizationAudienceSortOrder) => void;
     onOpenAssign: () => void;
   }
 
@@ -18,19 +20,37 @@
     hasSelection,
     selectedCount,
     searchValue = $bindable(''),
-    sortValue,
+    sortBy,
+    sortOrder,
     onSortChange,
     onOpenAssign
   }: Props = $props();
 
   const sortOptions = [
-    { label: t.get('audience.sort.newest'), value: 'createdAt:desc' },
-    { label: t.get('audience.sort.oldest'), value: 'createdAt:asc' },
-    { label: t.get('audience.sort.name_asc'), value: 'name:asc' },
-    { label: t.get('audience.sort.name_desc'), value: 'name:desc' },
-    { label: t.get('audience.sort.email_asc'), value: 'email:asc' },
-    { label: t.get('audience.sort.email_desc'), value: 'email:desc' }
+    { label: t.get('audience.date_joined'), value: 'createdAt' },
+    { label: t.get('audience.name'), value: 'name' },
+    { label: t.get('audience.email'), value: 'email' }
   ];
+
+  let localSortKey = $state(sortBy);
+  let localSortOrder = $state(sortOrder);
+
+  $effect(() => {
+    localSortKey = sortBy;
+    localSortOrder = sortOrder;
+  });
+
+  function handleSortKeyChange(key: string) {
+    onSortChange(key as OrganizationAudienceSortBy, localSortOrder);
+  }
+
+  function handleOrderChange(order: 'asc' | 'desc') {
+    onSortChange(localSortKey, order);
+  }
+
+  function handleClearSort() {
+    onSortChange('createdAt', 'desc');
+  }
 </script>
 
 <Page.BodyHeader>
@@ -46,20 +66,16 @@
   {:else}
     <div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between">
       <Search placeholder={$t('audience.search_placeholder')} bind:value={searchValue} class="w-full md:max-w-sm" />
-      <Select.Root type="single" value={sortValue} onValueChange={onSortChange} name="audience-sort">
-        <Select.Trigger class="w-full md:w-[220px]">
-          {sortOptions.find((option) => option.value === sortValue)?.label ?? $t('audience.sort.label')}
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Group>
-            {#each sortOptions as option (option.value)}
-              <Select.Item value={option.value} label={option.label} disabled={option.value === sortValue}>
-                {option.label}
-              </Select.Item>
-            {/each}
-          </Select.Group>
-        </Select.Content>
-      </Select.Root>
+      <SortPopover
+        {sortOptions}
+        bind:sortKey={localSortKey}
+        bind:selectedOrder={localSortOrder}
+        defaultSortKey="createdAt"
+        defaultSortOrder="desc"
+        onSortKeyChange={handleSortKeyChange}
+        onOrderChange={handleOrderChange}
+        onClearFilters={handleClearSort}
+      />
     </div>
   {/if}
 </Page.BodyHeader>
diff --git a/apps/dashboard/src/lib/features/audience/pages/audience.svelte b/apps/dashboard/src/lib/features/audience/pages/audience.svelte
index 39ef187a..10d297d1 100644
--- a/apps/dashboard/src/lib/features/audience/pages/audience.svelte
+++ b/apps/dashboard/src/lib/features/audience/pages/audience.svelte
@@ -53,7 +53,6 @@
   let deleteCandidate = $state<OrganizationAudienceMember | null>(null);
   let deleteDialogOpen = $state(false);
   let searchValue = $state(query.search ?? '');
-  let sortValue = $state(`${query.sortBy}:${query.sortOrder}`);
 
   async function handleResendInvite(email: string) {
     inviteActionEmail = email;
@@ -126,7 +125,6 @@
 
   $effect(() => {
     searchValue = query.search ?? '';
-    sortValue = `${query.sortBy}:${query.sortOrder}`;
   });
 
   $effect(() => {
@@ -179,23 +177,11 @@
     });
   }
 
-  function handleSortChange(nextSortValue: string) {
-    if (nextSortValue === sortValue) {
-      return;
-    }
-
-    sortValue = nextSortValue;
-    const [sortBy, sortOrder] = nextSortValue.split(':') as [
-      OrganizationAudienceQuery['sortBy'],
-      OrganizationAudienceQuery['sortOrder']
-    ];
-
-    void navigateAudience({
-      ...query,
-      page: 1,
-      sortBy,
-      sortOrder
-    });
+  function handleSortChange(
+    sortBy: OrganizationAudienceQuery['sortBy'],
+    sortOrder: OrganizationAudienceQuery['sortOrder']
+  ) {
+    void navigateAudience({ ...query, page: 1, sortBy, sortOrder });
   }
 
   function openDeleteConfirmation(member: OrganizationAudienceMember) {
@@ -236,7 +222,8 @@
   {hasSelection}
   selectedCount={selectedIds.size}
   bind:searchValue
-  {sortValue}
+  sortBy={query.sortBy}
+  sortOrder={query.sortOrder}
   onSortChange={handleSortChange}
   onOpenAssign={() => (assignModalOpen = true)}
 />
diff --git a/apps/dashboard/src/lib/features/audience/pages/import.svelte b/apps/dashboard/src/lib/features/audience/pages/import.svelte
index ffe1f0f5..9934e48c 100644
--- a/apps/dashboard/src/lib/features/audience/pages/import.svelte
+++ b/apps/dashboard/src/lib/features/audience/pages/import.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Button } from '@cio/ui/base/button';
   import { MultiSelectList } from '@cio/ui';
   import { TextareaField } from '@cio/ui/custom/textarea-field';
   import * as RadioGroup from '@cio/ui/base/radio-group';
@@ -17,15 +16,23 @@
     title: string;
   }
 
-  interface Props {
-    courses: Course[];
+  interface Program {
+    id: string;
+    name: string;
   }
 
-  let { courses }: Props = $props();
+  interface Props {
+    courses: Course[];
+    programs: Program[];
+  }
+
+  let { courses, programs }: Props = $props();
 
   let recipientCsv = $state('');
   let courseAccessMode = $state('none');
+  let programAccessMode = $state('none');
   let selectedCourseIds = new SvelteSet<string>();
+  let selectedProgramIds = new SvelteSet<string>();
   let sendEmail = $state(true);
   let isSubmitting = $state(false);
 
@@ -37,9 +44,19 @@
     }
   }
 
+  function toggleProgram(programId: string) {
+    if (selectedProgramIds.has(programId)) {
+      selectedProgramIds.delete(programId);
+    } else {
+      selectedProgramIds.add(programId);
+    }
+  }
+
   const audiencePath = $derived(page.url.pathname.replace(/\/import$/, ''));
 
-  async function handleSubmit() {
+  async function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
     if (!recipientCsv.trim()) {
       snackbar.error('audience.import.snackbar_no_emails');
       return;
@@ -51,7 +68,9 @@
       const result = await orgApi.importAudienceMembers({
         recipientCsv,
         allCourses: courseAccessMode === 'all',
+        allPrograms: programAccessMode === 'all',
         courseIds: courseAccessMode === 'select' ? [...selectedCourseIds] : undefined,
+        programIds: programAccessMode === 'select' ? [...selectedProgramIds] : undefined,
         sendEmail
       });
 
@@ -66,7 +85,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<form id="import-audience-form" class="space-y-6" onsubmit={handleSubmit}>
   <p class="ui:text-muted-foreground text-sm">{$t('audience.import.description')}</p>
 
   <TextareaField
@@ -108,11 +127,38 @@
     {/if}
   </div>
 
-  <!-- <CheckboxField name="send-email" label={$t('audience.import.send_email')} bind:checked={sendEmail} /> -->
+  {#if programs.length > 0}
+    <div class="space-y-3">
+      <Label class="text-sm font-medium">{$t('audience.import.program_access')}</Label>
+      <RadioGroup.Root bind:value={programAccessMode} class="space-y-2">
+        <div class="flex items-center gap-2">
+          <RadioGroup.Item value="none" id="program-none" />
+          <Label for="program-none" class="font-normal">{$t('audience.import.no_programs')}</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroup.Item value="all" id="program-all" />
+          <Label for="program-all" class="font-normal">{$t('audience.import.all_programs')}</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroup.Item value="select" id="program-select" />
+          <Label for="program-select" class="font-normal">{$t('audience.import.select_programs')}</Label>
+        </div>
+      </RadioGroup.Root>
 
-  <div class="flex gap-3">
-    <Button onclick={handleSubmit} loading={isSubmitting} disabled={isSubmitting}>
-      {$t('audience.import.submit')}
-    </Button>
-  </div>
-</div>
+      {#if programAccessMode === 'select'}
+        <MultiSelectList
+          class="ml-6"
+          listClass="max-h-40"
+          heading={$t('audience.import.select_programs')}
+          emptyMessage={$t('audience.import.select_programs_placeholder')}
+          items={programs.map((p) => ({ id: p.id, label: p.name || p.id }))}
+          isSelected={(id) => selectedProgramIds.has(id)}
+          onToggle={toggleProgram}
+          namePrefix="import-program"
+        />
+      {/if}
+    </div>
+  {/if}
+
+  <!-- <CheckboxField name="send-email" label={$t('audience.import.send_email')} bind:checked={sendEmail} /> -->
+</form>
diff --git a/apps/dashboard/src/lib/features/audience/pages/user-analytics.svelte b/apps/dashboard/src/lib/features/audience/pages/user-analytics.svelte
index 953ff5ed..7fd40d34 100644
--- a/apps/dashboard/src/lib/features/audience/pages/user-analytics.svelte
+++ b/apps/dashboard/src/lib/features/audience/pages/user-analytics.svelte
@@ -8,9 +8,7 @@
   import { Progress } from '@cio/ui/base/progress';
   import { ActivityCard, HeroProfileCard, LoadingPage } from '$features/ui';
 
-  import { BackButton } from '@cio/ui';
   import { t } from '$lib/utils/functions/translations';
-  import { currentOrgPath } from '$lib/utils/store/org';
   import type { UserAnalytics } from '$lib/utils/types/analytics';
 
   let { data } = $props();
@@ -60,16 +58,12 @@
 </script>
 
 {#if userAnalytics}
-  <div class="p-5">
-    <BackButton href={`${$currentOrgPath}/audience`} label={$t('community.ask.go_back')} />
-  </div>
-
   <div class="px-5 py-1">
     <HeroProfileCard user={userAnalytics!.user} />
 
     <div class="mt-5 px-0">
       <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {#each userMetrics as activity}
+        {#each userMetrics as activity (activity.title)}
           <ActivityCard {activity} />
         {/each}
       </div>
@@ -114,54 +108,52 @@
       </div>
 
       {#each filteredCourses as course (course.id)}
-        {#key index}
-          <div
-            class={`mt-5 w-full rounded-md border border-gray-200 p-5 ${
-              course.lessons_count === course.lessons_completed
-                ? 'border-green-200 bg-green-50 dark:bg-green-100'
-                : 'border-yellow-200 bg-yellow-50 dark:bg-yellow-100'
-            }`}
-            transition:fade={{ duration: 300 }}
-          >
-            <div class="flex items-center justify-between gap-4">
-              <div class="flex w-4/5 items-center gap-4">
-                <img
-                  src={course.logo || '/images/classroomio-course-img-template.jpg'}
-                  alt={course.title}
-                  class="h-20 w-24 rounded-md"
-                />
-                <div class="mb-4 gap-4">
-                  <a href={`/courses/${course.id}`}>
-                    <p class="text-lg font-semibold text-gray-600">
-                      {course.title}
-                    </p>
-                  </a>
-
-                  <p class="line-clamp-2 text-sm text-gray-600">
-                    {course.description}
+        <div
+          class={`mt-5 w-full rounded-md border border-gray-200 p-5 ${
+            course.lessons_count === course.lessons_completed
+              ? 'border-green-200 bg-green-50 dark:bg-green-100'
+              : 'border-yellow-200 bg-yellow-50 dark:bg-yellow-100'
+          }`}
+          transition:fade={{ duration: 300 }}
+        >
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex w-4/5 items-center gap-4">
+              <img
+                src={course.logo || '/images/classroomio-course-img-template.jpg'}
+                alt={course.title}
+                class="h-20 w-24 rounded-md"
+              />
+              <div class="mb-4 gap-4">
+                <a href={`/courses/${course.id}`}>
+                  <p class="text-lg font-semibold text-gray-600">
+                    {course.title}
                   </p>
-                </div>
+                </a>
+
+                <p class="line-clamp-2 text-sm text-gray-600">
+                  {course.description}
+                </p>
               </div>
-
-              <Badge
-                class={`${
-                  course.lessons_count === course.lessons_completed
-                    ? 'bg-green-200 text-green-700'
-                    : 'bg-yellow-200 text-yellow-700'
-                }`}
-              >
-                {course.lessons_count === course.lessons_completed
-                  ? $t('analytics.completed')
-                  : $t('analytics.incomplete')}
-              </Badge>
             </div>
 
-            <div class="flex w-full items-center gap-1">
-              <Progress value={course.progress_percentage} />
-              <p>{course.progress_percentage}%</p>
-            </div>
+            <Badge
+              class={`${
+                course.lessons_count === course.lessons_completed
+                  ? 'bg-green-200 text-green-700'
+                  : 'bg-yellow-200 text-yellow-700'
+              }`}
+            >
+              {course.lessons_count === course.lessons_completed
+                ? $t('analytics.completed')
+                : $t('analytics.incomplete')}
+            </Badge>
           </div>
-        {/key}
+
+          <div class="flex w-full items-center gap-1">
+            <Progress value={course.progress_percentage} />
+            <p>{course.progress_percentage}%</p>
+          </div>
+        </div>
       {/each}
     </div>
   </div>
diff --git a/apps/dashboard/src/lib/features/automation/api/automation.svelte.ts b/apps/dashboard/src/lib/features/automation/api/automation.svelte.ts
index daab95b2..3d5a037f 100644
--- a/apps/dashboard/src/lib/features/automation/api/automation.svelte.ts
+++ b/apps/dashboard/src/lib/features/automation/api/automation.svelte.ts
@@ -85,7 +85,8 @@ class AutomationApi extends BaseApiWithErrors {
       onSuccess: (response) => {
         this.keys = this.keys.map((key) => (key.id === response.data.id ? response.data : key));
         if (this.usage) {
-          const activeKeys = this.keys.filter((key) => key.type === 'mcp' && !key.revokedAt).length;
+          const revokedKeyType = response.data.type;
+          const activeKeys = this.keys.filter((key) => key.type === revokedKeyType && !key.revokedAt).length;
           this.usage = { ...this.usage, activeKeys };
         }
         snackbar.success('snackbar.automation.revoked');
diff --git a/apps/dashboard/src/lib/features/automation/pages/api.svelte b/apps/dashboard/src/lib/features/automation/pages/api.svelte
index dc7fbb70..8a6b4e52 100644
--- a/apps/dashboard/src/lib/features/automation/pages/api.svelte
+++ b/apps/dashboard/src/lib/features/automation/pages/api.svelte
@@ -1,14 +1,221 @@
 <script lang="ts">
+  import { automationApi } from '$features/automation/api/automation.svelte';
+  import { getMaskedAutomationSecret } from '$features/automation/utils/automation-utils';
+  import { isOrgAdmin, isEnterprisePlan } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
+  import { snackbar } from '$features/ui/snackbar/store';
   import * as Alert from '@cio/ui/base/alert';
+  import { Badge } from '@cio/ui/base/badge';
+  import { Button } from '@cio/ui/base/button';
+  import * as Code from '@cio/ui/custom/code';
+  import { Empty } from '@cio/ui/custom/empty';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import * as Field from '@cio/ui/base/field';
+  import * as Table from '@cio/ui/base/table';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { UpgradeBanner } from '$features/ui';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import KeyIcon from '@lucide/svelte/icons/key';
+  import PlusIcon from '@lucide/svelte/icons/plus';
+
+  let generatedSecret = $state<string | null>(null);
+  let isCreateKeyModalOpen = $state(false);
+  let keyLabel = $state('');
+
+  const canCreateKey = $derived(keyLabel.trim().length > 0 && !automationApi.isLoading);
+
+  function resetCreateKeyModal() {
+    keyLabel = '';
+    automationApi.resetErrors();
+  }
+
+  function openCreateKeyModal() {
+    if (!$isEnterprisePlan) {
+      snackbar.error('upgrade.required');
+      return;
+    }
+    resetCreateKeyModal();
+    isCreateKeyModalOpen = true;
+  }
+
+  async function onGenerateKey() {
+    if (!$isEnterprisePlan) return;
+    const result = await automationApi.createKey('api', keyLabel);
+    if (!result) return;
+
+    generatedSecret = automationApi.generatedSecret;
+    automationApi.clearGeneratedSecret();
+    isCreateKeyModalOpen = false;
+    resetCreateKeyModal();
+  }
+
+  async function onRevokeKey(keyId: string) {
+    if (!$isEnterprisePlan) return;
+    if (!confirm(t.get('automation.keys.revoke_confirm'))) return;
+    await automationApi.revokeKey(keyId);
+  }
+
+  async function onRotateKey(keyId: string) {
+    if (!$isEnterprisePlan) return;
+    if (!confirm(t.get('automation.keys.rotate_confirm'))) return;
+    await automationApi.rotateKey(keyId);
+    generatedSecret = automationApi.generatedSecret;
+    automationApi.clearGeneratedSecret();
+  }
+
+  const apiKeys = $derived(automationApi.keys.filter((key) => key.type === 'api'));
 </script>
 
-<Field.Group class="w-full max-w-5xl! space-y-8 px-2">
-  <Alert.Callout
-    variant="information"
-    title={$t('automation.tabs.api')}
-    description={$t('automation.coming_soon')}
-    class="w-full"
-  />
+<Field.Group class="mx-auto w-full space-y-2">
+  <UpgradeBanner>{$t('upgrade.enterprise_required')}</UpgradeBanner>
+
+  {#if !$isOrgAdmin}
+    <Alert.Callout
+      variant="information"
+      title={$t('automation.permissions.disabled_title')}
+      description={$t('automation.permissions.disabled_description')}
+      class="w-full"
+    />
+  {/if}
+
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2 font-medium">
+        <KeyIcon class="size-5" />
+        {$t('automation.api.keys.title')}
+      </div>
+      {#if $isOrgAdmin}
+        <IconButton
+          onclick={openCreateKeyModal}
+          disabled={automationApi.isLoading || !$isEnterprisePlan}
+          tooltip={$t('automation.api.keys.generate')}
+        >
+          <PlusIcon size={16} />
+        </IconButton>
+      {/if}
+    </div>
+    <p class="ui:text-muted-foreground text-sm">{$t('automation.api.keys.description')}</p>
+
+    {#if generatedSecret}
+      <div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
+        <p class="ui:text-amber-800 text-sm font-medium">{$t('automation.api.keys.secret_once')}</p>
+        <div class="mt-3">
+          <Code.Root code={generatedSecret} lang="bash" hideLines={true} class="ui:break-all ui:text-xs">
+            <Code.CopyButton />
+          </Code.Root>
+        </div>
+      </div>
+    {/if}
+
+    {#if $isOrgAdmin}
+      {#if apiKeys.length > 0}
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>{$t('automation.keys.table_key')}</Table.Head>
+              <Table.Head>{$t('automation.keys.table_status')}</Table.Head>
+              <Table.Head>{$t('automation.keys.table_created')}</Table.Head>
+              <Table.Head>{$t('automation.keys.table_last_used')}</Table.Head>
+              <Table.Head class="w-10"></Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {#each apiKeys as key (key.id)}
+              <Table.Row>
+                <Table.Cell>
+                  <div>
+                    <p class="font-medium">{key.label}</p>
+                    <p class="ui:text-muted-foreground text-xs">
+                      {getMaskedAutomationSecret(key.secretPrefix)}
+                    </p>
+                  </div>
+                </Table.Cell>
+                <Table.Cell>
+                  <Badge variant={key.revokedAt ? 'secondary' : 'default'}>
+                    {key.revokedAt ? $t('automation.keys.revoked') : $t('automation.keys.active')}
+                  </Badge>
+                </Table.Cell>
+                <Table.Cell class="ui:text-muted-foreground text-sm">
+                  {new Date(key.createdAt).toLocaleDateString()}
+                </Table.Cell>
+                <Table.Cell class="ui:text-muted-foreground text-sm">
+                  {key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleDateString() : $t('automation.keys.never_used')}
+                </Table.Cell>
+                <Table.Cell>
+                  {#if !key.revokedAt}
+                    <DropdownMenu.Root>
+                      <DropdownMenu.Trigger class="inline-flex items-center justify-center">
+                        <IconButton aria-label="actions">
+                          <EllipsisVerticalIcon size={16} />
+                        </IconButton>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Content align="end">
+                        <DropdownMenu.Item onclick={() => onRotateKey(key.id)}>
+                          {$t('automation.keys.rotate')}
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item onclick={() => onRevokeKey(key.id)} class="ui:text-destructive">
+                          {$t('automation.keys.revoke')}
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Content>
+                    </DropdownMenu.Root>
+                  {/if}
+                </Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      {:else}
+        <Empty
+          title={$t('automation.api.keys.empty_title')}
+          description={$t('automation.api.keys.empty_description')}
+          icon={KeyIcon}
+          variant="page"
+        >
+          {#if $isOrgAdmin}
+            <Button onclick={openCreateKeyModal} disabled={automationApi.isLoading || !$isEnterprisePlan}>
+              <PlusIcon size={16} />
+              {$t('automation.api.keys.generate')}
+            </Button>
+          {/if}
+        </Empty>
+      {/if}
+    {/if}
+  </div>
 </Field.Group>
+
+<Dialog.Root
+  bind:open={isCreateKeyModalOpen}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) {
+      resetCreateKeyModal();
+    }
+  }}
+>
+  <Dialog.Content class="sm:max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{$t('automation.api.keys.modal.title')}</Dialog.Title>
+      <Dialog.Description>{$t('automation.api.keys.modal.description')}</Dialog.Description>
+    </Dialog.Header>
+
+    <div class="py-2">
+      <InputField
+        label={$t('automation.api.keys.modal.name_label')}
+        placeholder={$t('automation.api.keys.modal.name_placeholder')}
+        bind:value={keyLabel}
+        errorMessage={automationApi.errors.label}
+        autoFocus
+      />
+    </div>
+
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (isCreateKeyModalOpen = false)}>
+        {$t('automation.api.keys.modal.cancel')}
+      </Button>
+      <Button onclick={onGenerateKey} loading={automationApi.isLoading} disabled={!canCreateKey}>
+        {$t('automation.api.keys.modal.save')}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/automation/pages/mcp.svelte b/apps/dashboard/src/lib/features/automation/pages/mcp.svelte
index 6cb3137c..710e423c 100644
--- a/apps/dashboard/src/lib/features/automation/pages/mcp.svelte
+++ b/apps/dashboard/src/lib/features/automation/pages/mcp.svelte
@@ -13,6 +13,7 @@
   import { Badge } from '@cio/ui/base/badge';
   import { Button } from '@cio/ui/base/button';
   import * as Code from '@cio/ui/custom/code';
+  import { Empty } from '@cio/ui/custom/empty';
   import * as Dialog from '@cio/ui/base/dialog';
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import * as Field from '@cio/ui/base/field';
@@ -97,6 +98,7 @@
   });
 
   const isLastUsageCard = (index: number) => index === usageCards.length - 1;
+  const hasActiveMcpKey = $derived(mcpKeys.some((key) => !key.revokedAt));
 </script>
 
 <Field.Group class="mx-auto w-full space-y-2">
@@ -209,64 +211,73 @@
           </Table.Body>
         </Table.Root>
       {:else}
-        <Alert.Callout
-          variant="information"
+        <Empty
           title={$t('automation.keys.empty_title')}
           description={$t('automation.keys.empty_description')}
-          class="w-full"
-        />
+          icon={KeyIcon}
+          variant="page"
+        >
+          {#if $isOrgAdmin}
+            <Button onclick={openCreateKeyModal} disabled={automationApi.isLoading}>
+              <PlusIcon size={16} />
+              {$t('automation.mcp.keys.generate')}
+            </Button>
+          {/if}
+        </Empty>
       {/if}
     {/if}
   </div>
 
-  <Field.Set class="gap-3!">
-    <Field.Legend class="flex items-center gap-2">
-      <SparklesIcon class="size-5" />
-      {$t('automation.mcp.setup.title')}
-    </Field.Legend>
-    <Field.Description>{$t('automation.mcp.setup.description')}</Field.Description>
+  {#if hasActiveMcpKey}
+    <Field.Set class="gap-3!">
+      <Field.Legend class="flex items-center gap-2">
+        <SparklesIcon class="size-5" />
+        {$t('automation.mcp.setup.title')}
+      </Field.Legend>
+      <Field.Description>{$t('automation.mcp.setup.description')}</Field.Description>
 
-    <Tabs.Root bind:value={activeSetupTab} class="w-full">
-      <Tabs.List class="inline-flex w-auto">
-        <Tabs.Trigger value="cursor">{$t('automation.clients.cursor')}</Tabs.Trigger>
-        <Tabs.Trigger value="claude-code">{$t('automation.clients.claude_code')}</Tabs.Trigger>
-        <Tabs.Trigger value="codex">{$t('automation.clients.codex')}</Tabs.Trigger>
-        <Tabs.Trigger value="opencode">{$t('automation.clients.opencode')}</Tabs.Trigger>
-      </Tabs.List>
+      <Tabs.Root bind:value={activeSetupTab} class="w-full">
+        <Tabs.List class="inline-flex w-auto">
+          <Tabs.Trigger value="cursor">{$t('automation.clients.cursor')}</Tabs.Trigger>
+          <Tabs.Trigger value="claude-code">{$t('automation.clients.claude_code')}</Tabs.Trigger>
+          <Tabs.Trigger value="codex">{$t('automation.clients.codex')}</Tabs.Trigger>
+          <Tabs.Trigger value="opencode">{$t('automation.clients.opencode')}</Tabs.Trigger>
+        </Tabs.List>
 
-      <Tabs.Content value="claude-code" class="mt-4">
-        <Code.Overflow>
-          <Code.Root code={getClaudeCodeSnippet(generatedSecret)} lang="bash">
-            <Code.CopyButton />
-          </Code.Root>
-        </Code.Overflow>
-      </Tabs.Content>
+        <Tabs.Content value="claude-code" class="mt-4">
+          <Code.Overflow>
+            <Code.Root code={getClaudeCodeSnippet(generatedSecret)} lang="bash">
+              <Code.CopyButton />
+            </Code.Root>
+          </Code.Overflow>
+        </Tabs.Content>
 
-      <Tabs.Content value="codex" class="mt-4">
-        <Code.Overflow>
-          <Code.Root code={getCodexSnippet(generatedSecret)} lang="bash">
-            <Code.CopyButton />
-          </Code.Root>
-        </Code.Overflow>
-      </Tabs.Content>
+        <Tabs.Content value="codex" class="mt-4">
+          <Code.Overflow>
+            <Code.Root code={getCodexSnippet(generatedSecret)} lang="bash">
+              <Code.CopyButton />
+            </Code.Root>
+          </Code.Overflow>
+        </Tabs.Content>
 
-      <Tabs.Content value="cursor" class="mt-4">
-        <Code.Overflow>
-          <Code.Root code={getCursorSnippet(generatedSecret)} lang="json">
-            <Code.CopyButton />
-          </Code.Root>
-        </Code.Overflow>
-      </Tabs.Content>
+        <Tabs.Content value="cursor" class="mt-4">
+          <Code.Overflow>
+            <Code.Root code={getCursorSnippet(generatedSecret)} lang="json">
+              <Code.CopyButton />
+            </Code.Root>
+          </Code.Overflow>
+        </Tabs.Content>
 
-      <Tabs.Content value="opencode" class="mt-4">
-        <Code.Overflow>
-          <Code.Root code={getOpenCodeSnippet(generatedSecret)} lang="json">
-            <Code.CopyButton />
-          </Code.Root>
-        </Code.Overflow>
-      </Tabs.Content>
-    </Tabs.Root>
-  </Field.Set>
+        <Tabs.Content value="opencode" class="mt-4">
+          <Code.Overflow>
+            <Code.Root code={getOpenCodeSnippet(generatedSecret)} lang="json">
+              <Code.CopyButton />
+            </Code.Root>
+          </Code.Overflow>
+        </Tabs.Content>
+      </Tabs.Root>
+    </Field.Set>
+  {/if}
 </Field.Group>
 
 <Dialog.Root
diff --git a/apps/dashboard/src/lib/features/community/api/community.svelte.ts b/apps/dashboard/src/lib/features/community/api/community.svelte.ts
index 9cad5d0c..b52a16a0 100644
--- a/apps/dashboard/src/lib/features/community/api/community.svelte.ts
+++ b/apps/dashboard/src/lib/features/community/api/community.svelte.ts
@@ -9,14 +9,14 @@ import type {
   UpvotePostRequest
 } from '../utils/types';
 import { ZCommunityComment, ZCommunityQuestionUpdate, ZCreateCommunityQuestion } from '@cio/utils/validation/community';
-import { currentOrg as currentOrgStore } from '$lib/utils/store/org';
+import { basePath, isStudentExperience } from '$lib/utils/store/app';
 
 import type { TCreateCommunityQuestion } from '@cio/utils/validation/community';
 import { coursesApi } from '$features/course/api/courses.svelte';
 import { currentCommunityQuestion } from '../utils/store';
+import { currentOrg as currentOrgStore } from '$lib/utils/store/org';
 import { generateSlug } from '@cio/utils/functions';
 import { get } from 'svelte/store';
-import { basePath, isStudentExperience } from '$lib/utils/store/app';
 import { goto } from '$app/navigation';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { profile as profileStore } from '$lib/utils/store/user';
diff --git a/apps/dashboard/src/lib/features/community/pages/community-question.svelte b/apps/dashboard/src/lib/features/community/pages/community-question.svelte
index 43201ecc..8ea219ba 100644
--- a/apps/dashboard/src/lib/features/community/pages/community-question.svelte
+++ b/apps/dashboard/src/lib/features/community/pages/community-question.svelte
@@ -145,6 +145,7 @@
             />
             <Page.Title>{communityApi.question.title}</Page.Title>
           </div>
+          <Page.Subtitle>{$t('community.question.page_subtitle')}</Page.Subtitle>
         {/if}
       </Page.HeaderContent>
       {#if communityApi.question.authorId === $profile.id}
diff --git a/apps/dashboard/src/lib/features/community/pages/community.svelte b/apps/dashboard/src/lib/features/community/pages/community.svelte
index f98e5768..9e2d86ed 100644
--- a/apps/dashboard/src/lib/features/community/pages/community.svelte
+++ b/apps/dashboard/src/lib/features/community/pages/community.svelte
@@ -36,10 +36,12 @@
     }
   });
 
+  let isCoursesFetched = $state(false);
   $effect(() => {
-    if (!$profile.id || !$currentOrg.id) return;
+    if (!$profile.id || !$currentOrg.id || isCoursesFetched) return;
 
     communityApi.fetchCoursesForOrg($profile.id, $currentOrg.id);
+    isCoursesFetched = true;
   });
 
   let filteredQuestions = $derived(
diff --git a/apps/dashboard/src/lib/features/course/api/courses.svelte.ts b/apps/dashboard/src/lib/features/course/api/courses.svelte.ts
index 09540eda..ea6377ec 100644
--- a/apps/dashboard/src/lib/features/course/api/courses.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/courses.svelte.ts
@@ -1,9 +1,12 @@
 import { BaseApiWithErrors, classroomio } from '$lib/utils/services/api';
 import type {
   GetOrgCoursesRequest,
+  GetOrgCoursesRequestQuery,
   GetRecommendedCoursesRequest,
   GetUserEnrolledCoursesRequest,
   OrgCourses,
+  OrgCoursesPagination,
+  OrgCoursesQuery,
   RecommendedCourses,
   UserEnrolledCourses
 } from '$features/course/types';
@@ -15,8 +18,15 @@ import { SvelteSet } from 'svelte/reactivity';
  */
 export class CoursesApi extends BaseApiWithErrors {
   orgCourses = $state<OrgCourses>([]);
+  orgCoursesPagination = $state<OrgCoursesPagination | null>(null);
   enrolledCourses = $state<UserEnrolledCourses>([]);
   recommendedCourses = $state<RecommendedCourses>([]);
+  private activeOrgCoursesRequestController: AbortController | null = null;
+
+  cancelOrgCoursesRequest() {
+    this.activeOrgCoursesRequestController?.abort();
+    this.activeOrgCoursesRequestController = null;
+  }
 
   /** Keeps list UIs in sync after a course is deleted (server data is updated separately on navigation). */
   removeCourseFromLists(courseId: string) {
@@ -30,26 +40,79 @@ export class CoursesApi extends BaseApiWithErrors {
    * Org ID is automatically added from currentOrg store
    */
   async getOrgCourses(tagSlugs: string[] = []) {
-    const normalizedTagSlugs = Array.from(new SvelteSet(tagSlugs.map((tag) => tag.trim()).filter(Boolean)));
+    const allCourses: OrgCourses = [];
+    let page = 1;
+    let totalPages = 1;
+    let lastResponse: Awaited<ReturnType<CoursesApi['getOrgCoursesPage']>> | undefined;
 
-    return this.execute<GetOrgCoursesRequest>({
+    while (page <= totalPages) {
+      const response = await this.getOrgCoursesPage({ page, limit: 100 }, tagSlugs);
+      if (!response) {
+        return response;
+      }
+
+      allCourses.push(...(response.data ?? []));
+      totalPages = response.pagination?.totalPages ?? 1;
+      lastResponse = response;
+      page += 1;
+    }
+
+    this.orgCourses = allCourses;
+    this.orgCoursesPagination = lastResponse?.pagination ?? null;
+
+    return lastResponse;
+  }
+
+  async getOrgCoursesPage(
+    query: Partial<OrgCoursesQuery> = {},
+    tagSlugs: string[] = [],
+    options: { abortPrevious?: boolean; signal?: AbortSignal } = {}
+  ) {
+    const normalizedTagSlugs = Array.from(new SvelteSet(tagSlugs.map((tag) => tag.trim()).filter(Boolean)));
+    const requestQuery: GetOrgCoursesRequestQuery = {
+      page: String(query.page ?? 1),
+      limit: String(query.limit ?? 20),
+      search: query.search,
+      tags: normalizedTagSlugs.length > 0 ? normalizedTagSlugs.join(',') : undefined
+    };
+
+    let requestSignal = options.signal;
+    let requestController: AbortController | null = null;
+
+    if (options.abortPrevious) {
+      this.cancelOrgCoursesRequest();
+      requestController = new AbortController();
+      this.activeOrgCoursesRequestController = requestController;
+      requestSignal = requestController.signal;
+    }
+
+    const response = await this.execute<GetOrgCoursesRequest>({
       requestFn: () =>
         classroomio.organization.courses.$get(
-          normalizedTagSlugs.length > 0
-            ? {
-                query: {
-                  tags: normalizedTagSlugs.join(',')
-                }
-              }
-            : { query: {} }
+          {
+            query: requestQuery
+          },
+          {
+            init: {
+              signal: requestSignal
+            }
+          }
         ),
       logContext: 'fetching org courses',
       onSuccess: (response) => {
         if (response.data) {
           this.orgCourses = response.data;
         }
+
+        this.orgCoursesPagination = response.pagination;
       }
     });
+
+    if (requestController && this.activeOrgCoursesRequestController === requestController) {
+      this.activeOrgCoursesRequestController = null;
+    }
+
+    return response;
   }
 
   /**
diff --git a/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts b/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
index d2255e75..e35b93c3 100644
--- a/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
@@ -180,21 +180,20 @@ export class NewsfeedApi extends BaseApiWithErrors {
       onSuccess: (response) => {
         if (response.data) {
           snackbar.success('Post updated successfully');
-          // Update local state, preserving author fields from existing feed
-          const index = this.feeds.findIndex((f) => f.id === feedId);
-          if (index !== -1) {
-            const existingFeed = this.feeds[index];
-            // Merge response data with existing feed to preserve author fields
-            this.feeds[index] = {
-              ...existingFeed,
+          this.feeds = this.feeds.map((feed) => {
+            if (feed.id !== feedId) {
+              return feed;
+            }
+
+            return {
+              ...feed,
               ...response.data,
-              // Preserve author fields from existing feed
-              authorProfileId: existingFeed.authorProfileId,
-              authorFullname: existingFeed.authorFullname,
-              authorUsername: existingFeed.authorUsername,
-              authorAvatarUrl: existingFeed.authorAvatarUrl
+              authorProfileId: feed.authorProfileId,
+              authorFullname: feed.authorFullname,
+              authorUsername: feed.authorUsername,
+              authorAvatarUrl: feed.authorAvatarUrl
             };
-          }
+          });
         }
       },
       onError: (result) => {
@@ -232,21 +231,20 @@ export class NewsfeedApi extends BaseApiWithErrors {
       logContext: 'updating newsfeed reaction',
       onSuccess: (response) => {
         if (response.data) {
-          // Update local state, preserving author fields from existing feed
-          const index = this.feeds.findIndex((f) => f.id === feedId);
-          if (index !== -1) {
-            const existingFeed = this.feeds[index];
-            // Merge response data with existing feed to preserve author fields
-            this.feeds[index] = {
-              ...existingFeed,
+          this.feeds = this.feeds.map((feed) => {
+            if (feed.id !== feedId) {
+              return feed;
+            }
+
+            return {
+              ...feed,
               ...response.data,
-              // Preserve author fields from existing feed
-              authorProfileId: existingFeed.authorProfileId,
-              authorFullname: existingFeed.authorFullname,
-              authorUsername: existingFeed.authorUsername,
-              authorAvatarUrl: existingFeed.authorAvatarUrl
+              authorProfileId: feed.authorProfileId,
+              authorFullname: feed.authorFullname,
+              authorUsername: feed.authorUsername,
+              authorAvatarUrl: feed.authorAvatarUrl
             };
-          }
+          });
         }
       },
       onError: (result) => {
diff --git a/apps/dashboard/src/lib/features/course/components/card.svelte b/apps/dashboard/src/lib/features/course/components/card.svelte
index ef162a4c..0a683c31 100644
--- a/apps/dashboard/src/lib/features/course/components/card.svelte
+++ b/apps/dashboard/src/lib/features/course/components/card.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-  import type { Component } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import { resolve } from '$app/paths';
-  import { Badge } from '@cio/ui/base/badge';
+  import { CourseCard, DEFAULT_COURSE_BANNER_IMAGE } from '@cio/ui';
   import UserIcon from '@lucide/svelte/icons/user';
   import CircleDotIcon from '@lucide/svelte/icons/circle-dot';
   import TrendingUpIcon from '@lucide/svelte/icons/trending-up';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
 
   import { Button } from '@cio/ui/base/button';
-  import { Separator } from '@cio/ui/base/separator';
-  import * as Item from '@cio/ui/base/item';
   import { Progress } from '@cio/ui/base/progress';
 
   import pluralize from 'pluralize';
@@ -30,9 +28,11 @@
     isOnLandingPage?: boolean;
     isLMS?: boolean;
     isExplore?: boolean;
+    href?: string;
+    actions?: Snippet;
   }
 
-  let { course, isOnLandingPage, isLMS, isExplore }: Props = $props();
+  let { course, isOnLandingPage, isLMS, isExplore, href, actions }: Props = $props();
 
   let {
     bannerImage,
@@ -42,6 +42,7 @@
     description = '',
     isPublished = false,
     totalLessons = 0,
+    totalExercises = 0,
     totalStudents = 0,
     currency = 'USD',
     progressRate = 45,
@@ -54,7 +55,7 @@
   } = $derived({
     id: course.id,
     slug: course.slug,
-    bannerImage: course.logo || '/images/classroomio-course-img-template.jpg',
+    bannerImage: course.logo || DEFAULT_COURSE_BANNER_IMAGE,
     title: course.title,
     type: course.type,
     description: course.description,
@@ -66,6 +67,10 @@
     },
     currency: course.currency,
     totalLessons: course.lessonCount,
+    totalExercises: (() => {
+      const c = course as { exerciseCount?: number };
+      return typeof c.exerciseCount === 'number' ? c.exerciseCount : 0;
+    })(),
     progressRate: (() => {
       const c = course as { exerciseCount?: number; exercisesCompleted?: number };
       if (typeof c.exerciseCount === 'number' && typeof c.exercisesCompleted === 'number') {
@@ -122,91 +127,104 @@
   let cost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost ?? 0, !!pricingData.showDiscount));
 
   let courseUrl = $derived(
-    isOnLandingPage || isExplore ? `/course/${slug}` : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`
+    href ?? (isOnLandingPage || isExplore ? `/course/${slug}` : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`)
+  );
+
+  const typeBadge = $derived(
+    type && COURSE_TAG[type]
+      ? {
+          label: COURSE_TAG[type].label,
+          icon: COURSE_TAG[type].icon,
+          iconClass: COURSE_TAG[type].iconStyle
+        }
+      : undefined
   );
 </script>
 
-<Item.Root variant="outline" class="group relative max-w-[320px] p-3!">
-  {#snippet child({ props })}
-    <a href={resolve(courseUrl, {})} {...props}>
-      {#if !isLMS && !isOnLandingPage}
-        <CardDropdown {id} {title} {description} />
-      {/if}
+<CourseCard href={resolve(courseUrl, {})} {title} {description} {typeBadge} class="group relative">
+  {#snippet media()}
+    <Image src={bannerImage} alt="Course banner image" className="w-full h-full rounded-sm object-cover" />
+  {/snippet}
 
-      <Item.Header>
-        <Item.Media variant="image" class="relative h-50! w-full!">
-          <Image src={bannerImage} alt="Course banner image" className="w-full h-full rounded-sm object-cover" />
+  {#snippet overlay()}
+    {#if actions}
+      {@render actions()}
+    {:else if !isLMS && !isOnLandingPage}
+      <CardDropdown {id} {title} {description} />
+    {/if}
+  {/snippet}
 
-          {#if type}
-            {@const tag = COURSE_TAG[type]}
-            <Badge class="absolute bottom-2 left-2 z-10 flex items-center rounded-md! capitalize" variant="secondary">
-              <tag.icon class={tag.iconStyle} />
-              {tag.label}
-            </Badge>
-          {/if}
-        </Item.Media>
-      </Item.Header>
+  {#snippet tags()}
+    {#if !isLMS}
+      <CourseTagsOverflow tags={courseTags} variant="card" />
+    {/if}
+  {/snippet}
 
-      <Item.Content>
-        <Item.Title class="line-clamp-2 min-h-14 text-base!">
-          {title}
-        </Item.Title>
-
-        <Item.Description class="min-h-[63px]">{description}</Item.Description>
-        {#if !isLMS}
-          <CourseTagsOverflow tags={courseTags} variant="card" />
-        {/if}
-
-        <Separator class="my-3" />
-
-        <div class="flex justify-between {isLMS && 'items-center'} w-full">
-          <div class="w-[50%]">
-            <p class="text-xs {!isLMS && 'pl-2'} dark:text-white">
+  {#snippet footer()}
+    <div class="flex justify-between {isLMS && 'items-center'} w-full">
+      <div class="w-[60%]">
+        {#if isLMS || isOnLandingPage}
+          <p class="text-xs {!isLMS && 'pl-2'} flex gap-1 dark:text-white">
+            <span>
               {totalLessons}
               {$t('courses.course_card.lessons_number')}
-            </p>
-            <div class="py-2 text-xs">
-              {#if isOnLandingPage}
-                <span class="px-2">
-                  {#if !cost}
-                    {$t('course.navItem.landing_page.pricing_section.free')}
-                  {:else if pricingData.showDiscount}
-                    {formatter.format(cost)}
-                    <span class="line-through">
-                      {formatter?.format(pricingData?.cost ?? 0)}
-                    </span>
-                  {:else}
-                    {formatter.format(cost)}
-                  {/if}
+            </span>
+            &
+            <span>
+              {pluralize($t('courses.course_card.exercise'), totalExercises, true)}
+            </span>
+          </p>
+        {/if}
+        <div class="py-2 text-xs">
+          {#if isOnLandingPage}
+            <span class="px-2">
+              {#if !cost}
+                {$t('course.navItem.landing_page.pricing_section.free')}
+              {:else if pricingData.showDiscount}
+                {formatter.format(cost)}
+                <span class="line-through">
+                  {formatter?.format(pricingData?.cost ?? 0)}
                 </span>
-              {:else if isLMS}
-                {#if !isExplore}
-                  <div class="flex w-3/4 items-center gap-2">
-                    <Progress value={progressRate} />
-                    <p class="ui:text-muted-foreground text-xs">{progressRate}%</p>
-                  </div>
-                {/if}
               {:else}
-                <CoursePublishBadge {isPublished} />
+                {formatter.format(cost)}
               {/if}
-            </div>
-          </div>
-
-          {#if isLMS}
-            <Button variant="outline">
-              {isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
-
-              <ArrowRightIcon class="custom" />
-            </Button>
-          {:else if !isOnLandingPage}
-            <div class="flex flex-col justify-between">
-              <p class="pl-2 text-xs dark:text-white">
-                {pluralize($t('courses.course_card.students'), totalStudents, true)}
-              </p>
-            </div>
+            </span>
+          {:else if isLMS}
+            {#if !isExplore}
+              <div class="flex w-3/4 items-center gap-2">
+                <Progress value={progressRate} />
+                <p class="ui:text-muted-foreground text-xs">{progressRate}%</p>
+              </div>
+            {/if}
+          {:else}
+            <CoursePublishBadge {isPublished} />
           {/if}
         </div>
-      </Item.Content>
-    </a>
+      </div>
+
+      {#if isLMS}
+        <Button variant="outline">
+          {isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
+
+          <ArrowRightIcon class="custom" />
+        </Button>
+      {:else if !isOnLandingPage}
+        <div class="flex flex-col justify-end gap-1 text-right">
+          <p class="pl-2 text-xs whitespace-nowrap dark:text-white">
+            <span>
+              {totalLessons}
+              {$t('courses.course_card.lessons_number')}
+            </span>
+            &
+            <span>
+              {pluralize($t('courses.course_card.exercise'), totalExercises, true)}
+            </span>
+          </p>
+          <p class="pl-2 text-xs dark:text-white">
+            {pluralize($t('courses.course_card.students'), totalStudents, true)}
+          </p>
+        </div>
+      {/if}
+    </div>
   {/snippet}
-</Item.Root>
+</CourseCard>
diff --git a/apps/dashboard/src/lib/features/course/components/course-filter-popover.svelte b/apps/dashboard/src/lib/features/course/components/course-filter-popover.svelte
index 17bd6020..7baf2cd7 100644
--- a/apps/dashboard/src/lib/features/course/components/course-filter-popover.svelte
+++ b/apps/dashboard/src/lib/features/course/components/course-filter-popover.svelte
@@ -1,18 +1,13 @@
 <script lang="ts">
   import {
     COURSE_SORT_OPTIONS,
-    CourseSortOrder,
     DEFAULT_COURSE_SORT,
     DEFAULT_SORT_ORDER,
-    type CourseSortBy
+    type CourseSortBy,
+    type CourseSortOrder
   } from '../utils/constants';
-  import * as Popover from '@cio/ui/base/popover';
-  import * as ToggleGroup from '@cio/ui/base/toggle-group';
-  import { Button } from '@cio/ui/base/button';
-  import { Spinner } from '@cio/ui/base/spinner';
   import { Checkbox } from '@cio/ui/base/checkbox';
-  import { IconButton } from '@cio/ui/custom/icon-button';
-  import FilterIcon from '@lucide/svelte/icons/filter';
+  import { SortPopover } from '$features/ui';
   import { t } from '$lib/utils/functions/translations';
 
   interface FilterTag {
@@ -54,7 +49,9 @@
     onClearFilters = () => {}
   }: Props = $props();
 
-  let isOpen = $state(false);
+  const translatedSortOptions = $derived(
+    sortOptions.map((option) => ({ value: option.value, label: $t(option.label) }))
+  );
 
   const hasActiveFilters = $derived(
     sortKey !== DEFAULT_COURSE_SORT || selectedOrder !== DEFAULT_SORT_ORDER || selectedTags.length > 0
@@ -65,117 +62,58 @@
   }
 </script>
 
-<Popover.Root bind:open={isOpen}>
-  <Popover.Trigger>
-    {#snippet child({ props })}
-      <div class="relative">
-        <IconButton {...props} aria-label={$t('courses.tag_filters.filter')} tooltip={$t('courses.tag_filters.filter')}>
-          {#if isFiltering}
-            <Spinner class="size-4" />
-          {:else}
-            <FilterIcon size={16} />
-          {/if}
-        </IconButton>
-        {#if hasActiveFilters}
-          <span
-            class="ui:bg-primary absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-white"
-            aria-hidden="true"
-          ></span>
-        {/if}
-      </div>
-    {/snippet}
-  </Popover.Trigger>
-
-  <Popover.Content align="end" class="w-[360px] p-3">
-    <div class="space-y-4">
-      <div class="flex items-center justify-between gap-2">
-        <p class="text-sm font-semibold">{$t('courses.tag_filters.popover_title')}</p>
-        <Button variant="link" class="h-auto p-0" onclick={onClearFilters} disabled={!hasActiveFilters}>
-          {$t('courses.tag_filters.clear_all')}
-        </Button>
-      </div>
-
-      <div class="space-y-2">
-        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
-          {$t('courses.tag_filters.sort')}
-        </p>
-        <div class="flex flex-wrap gap-2">
-          {#each sortOptions as option (option.value)}
-            <Button
-              type="button"
-              size="sm"
-              variant={sortKey === option.value ? 'secondary' : 'outline'}
-              onclick={() => (sortKey = option.value)}
-            >
-              {$t(option.label)}
-            </Button>
+<SortPopover
+  sortOptions={translatedSortOptions}
+  bind:sortKey
+  bind:selectedOrder
+  defaultSortKey={DEFAULT_COURSE_SORT}
+  defaultSortOrder={DEFAULT_SORT_ORDER}
+  {isFiltering}
+  {hasActiveFilters}
+  {onClearFilters}
+>
+  {#snippet additionalContent()}
+    <div class="space-y-3">
+      <p class="ui:text-muted-foreground text-xs font-semibold uppercase">{$t('courses.tag_filters.tags')}</p>
+      {#if tagGroups.length === 0}
+        <p class="ui:text-muted-foreground text-sm">{$t('courses.tag_filters.empty_tags')}</p>
+      {:else}
+        <div class="max-h-[320px] space-y-4 overflow-y-auto pr-1">
+          {#each tagGroups as group (group.id)}
+            {#if group.tags.length > 0}
+              <div class="space-y-2">
+                <div class="space-y-1">
+                  <p class="text-sm font-medium">{group.name}</p>
+                  {#if group.description}
+                    <p class="ui:text-muted-foreground text-xs">{group.description}</p>
+                  {/if}
+                </div>
+                <div class="space-y-2">
+                  {#each group.tags as tag (tag.id)}
+                    <label
+                      class="hover:ui:bg-muted/30 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
+                    >
+                      <div class="flex items-center gap-2">
+                        <Checkbox
+                          checked={isTagSelected(tag.slug)}
+                          onCheckedChange={(checked) => onToggleTag(tag.slug, Boolean(checked))}
+                        />
+                        <span
+                          class="inline-block h-2.5 w-2.5 rounded-full border"
+                          style={`background-color: ${tag.color}`}
+                          aria-hidden="true"
+                        ></span>
+                        <span class="text-sm">{tag.name}</span>
+                      </div>
+                      <span class="ui:text-muted-foreground text-xs">{tag.courseCount}</span>
+                    </label>
+                  {/each}
+                </div>
+              </div>
+            {/if}
           {/each}
         </div>
-      </div>
-
-      <div class="space-y-2">
-        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
-          {$t('courses.tag_filters.order')}
-        </p>
-        <ToggleGroup.Root
-          type="single"
-          variant="outline"
-          size="sm"
-          value={selectedOrder}
-          onValueChange={(value) => {
-            if (value === CourseSortOrder.Asc || value === CourseSortOrder.Desc) {
-              selectedOrder = value;
-            }
-          }}
-        >
-          <ToggleGroup.Item value={CourseSortOrder.Asc}>{$t('courses.tag_filters.ascending')}</ToggleGroup.Item>
-          <ToggleGroup.Item value={CourseSortOrder.Desc}>{$t('courses.tag_filters.descending')}</ToggleGroup.Item>
-        </ToggleGroup.Root>
-      </div>
-
-      <div class="space-y-3">
-        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">{$t('courses.tag_filters.tags')}</p>
-        {#if tagGroups.length === 0}
-          <p class="ui:text-muted-foreground text-sm">{$t('courses.tag_filters.empty_tags')}</p>
-        {:else}
-          <div class="max-h-[320px] space-y-4 overflow-y-auto pr-1">
-            {#each tagGroups as group (group.id)}
-              {#if group.tags.length > 0}
-                <div class="space-y-2">
-                  <div class="space-y-1">
-                    <p class="text-sm font-medium">{group.name}</p>
-                    {#if group.description}
-                      <p class="ui:text-muted-foreground text-xs">{group.description}</p>
-                    {/if}
-                  </div>
-
-                  <div class="space-y-2">
-                    {#each group.tags as tag (tag.id)}
-                      <label
-                        class="hover:ui:bg-muted/30 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
-                      >
-                        <div class="flex items-center gap-2">
-                          <Checkbox
-                            checked={isTagSelected(tag.slug)}
-                            onCheckedChange={(checked) => onToggleTag(tag.slug, Boolean(checked))}
-                          />
-                          <span
-                            class="inline-block h-2.5 w-2.5 rounded-full border"
-                            style={`background-color: ${tag.color}`}
-                            aria-hidden="true"
-                          ></span>
-                          <span class="text-sm">{tag.name}</span>
-                        </div>
-                        <span class="ui:text-muted-foreground text-xs">{tag.courseCount}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
-              {/if}
-            {/each}
-          </div>
-        {/if}
-      </div>
+      {/if}
     </div>
-  </Popover.Content>
-</Popover.Root>
+  {/snippet}
+</SortPopover>
diff --git a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
new file mode 100644
index 00000000..6201152f
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
@@ -0,0 +1,261 @@
+<script lang="ts">
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
+  import * as Avatar from '@cio/ui/base/avatar';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import { Badge } from '@cio/ui/base/badge';
+  import { Button } from '@cio/ui/base/button';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { ContentType } from '@cio/utils/constants/content';
+  import { Image } from '$features/ui';
+  import { t } from '$lib/utils/functions/translations';
+  import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
+  import { buildCoursePlaceholderAvatarUrl } from '$features/course/utils/course-list-row-utils';
+  import CourseContentIcon from './course-content-icon.svelte';
+
+  interface Tag {
+    id: string;
+    name: string;
+    slug: string;
+    color?: string | null;
+  }
+
+  interface Props {
+    id: string;
+    slug?: string;
+    title: string;
+    logo?: string | null;
+    type?: string | null;
+    description?: string;
+    isPublished?: boolean;
+    lessonCount?: number;
+    exerciseCount?: number;
+    totalStudents?: number;
+    updatedAt?: string | null;
+    tags?: Tag[];
+    isExplore?: boolean;
+    isLMS?: boolean;
+  }
+
+  let {
+    id,
+    slug = '',
+    title,
+    logo = null,
+    type,
+    description = '',
+    isPublished = false,
+    lessonCount = 0,
+    exerciseCount = 0,
+    totalStudents = 0,
+    updatedAt,
+    tags = [],
+    isExplore = false,
+    isLMS = false
+  }: Props = $props();
+
+  const titleInitial = $derived(title.trim().charAt(0).toUpperCase() || 'C');
+
+  const bannerImage = $derived(logo?.trim() ? logo : '/images/classroomio-course-img-template.jpg');
+
+  const gridTemplateColumns = $derived(
+    isLMS
+      ? '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem'
+      : '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem 2.5rem'
+  );
+
+  const studentPlaceholderAvatarUrls = $derived.by(() => [
+    buildCoursePlaceholderAvatarUrl(`${id}:student:0`),
+    buildCoursePlaceholderAvatarUrl(`${id}:student:1`)
+  ]);
+
+  const emptyStateAvatarUrl = $derived(buildCoursePlaceholderAvatarUrl(`${id}:student:empty`));
+
+  const typeLabel = $derived(type ? $t(`course.navItem.settings.${type.toLowerCase()}`) : null);
+
+  const updatedLabel = $derived.by(() => {
+    if (!updatedAt) return null;
+    const d = new Date(updatedAt);
+    if (isNaN(d.getTime())) return null;
+    return `Updated ${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;
+  });
+
+  function handleRowClick() {
+    if (isExplore) {
+      goto(resolve(`/course/${slug}`, {}));
+      return;
+    }
+    if (isLMS) {
+      goto(resolve(`/courses/${id}/lessons?next=true`, {}));
+      return;
+    }
+    goto(resolve(`/courses/${id}`, {}));
+  }
+
+  function handleOpen(e: MouseEvent) {
+    e.stopPropagation();
+    goto(resolve(`/courses/${id}`, {}));
+  }
+
+  function handleClone(e: MouseEvent) {
+    e.stopPropagation();
+    $copyCourseModal.open = true;
+    $copyCourseModal.id = id;
+    $copyCourseModal.title = title;
+    $copyCourseModal.description = description;
+  }
+
+  function handleDelete(e: MouseEvent) {
+    e.stopPropagation();
+    $deleteCourseModal.open = true;
+    $deleteCourseModal.id = id;
+    $deleteCourseModal.title = title;
+  }
+</script>
+
+<ResourceListRow.Root
+  variant="default"
+  size="sm"
+  align="start"
+  class="cursor-pointer py-4!"
+  onclick={handleRowClick}
+  role="row"
+>
+  <div class="grid w-full items-start gap-3" style="grid-template-columns: {gridTemplateColumns}">
+    <!-- Banner -->
+    <div
+      class="ui:border-border bg-muted relative size-28 shrink-0 overflow-hidden rounded-md border"
+      aria-hidden="true"
+    >
+      <Image src={bannerImage} alt="" className="h-full w-full object-cover" />
+    </div>
+
+    <!-- Title / type / updated -->
+    <div class="flex min-w-0 flex-col gap-0.5">
+      <p class="line-clamp-2 text-base">{title}</p>
+      {#if typeLabel}
+        <p class="ui:text-muted-foreground mt-0.5 text-sm">{typeLabel}</p>
+      {/if}
+      {#if updatedLabel}
+        <p class="ui:text-muted-foreground mt-0.5 text-xs">{updatedLabel}</p>
+      {/if}
+    </div>
+
+    <!-- Published badge -->
+    <div>
+      {#if isPublished}
+        <Badge variant="success" class="whitespace-nowrap">
+          {$t('courses.course_card.published')}
+        </Badge>
+      {:else}
+        <Badge variant="secondary" class="whitespace-nowrap">
+          {$t('courses.course_card.unpublished')}
+        </Badge>
+      {/if}
+    </div>
+
+    <!-- Tags -->
+    <div class="flex min-w-0 flex-wrap items-center gap-1">
+      {#if tags.length === 0}
+        <span class="ui:text-muted-foreground text-xs">—</span>
+      {:else}
+        {#each tags as tag (tag.id)}
+          <Badge variant="outline" class="max-w-[140px] truncate">
+            <span
+              class="ui:bg-primary/60 inline-block h-1.5 w-1.5 shrink-0 rounded-full"
+              style={tag.color ? `background-color: ${tag.color}` : undefined}
+              aria-hidden="true"
+            ></span>
+            {tag.name}
+          </Badge>
+        {/each}
+      {/if}
+    </div>
+
+    <!-- Lessons / exercises -->
+    <div class="flex flex-col gap-1 tabular-nums">
+      <p class="flex items-center gap-1.5 text-sm" aria-label="{lessonCount} lessons">
+        <CourseContentIcon type={ContentType.Lesson} size={14} />
+        <span class="font-medium">{lessonCount}</span>
+      </p>
+      <p class="flex items-center gap-1.5 text-sm" aria-label="{exerciseCount} exercises">
+        <CourseContentIcon type={ContentType.Exercise} size={14} />
+        <span class="font-medium">{exerciseCount}</span>
+      </p>
+    </div>
+
+    <!-- Students -->
+    <div class="flex items-center gap-1">
+      {#if totalStudents > 0}
+        {#if totalStudents < 3}
+          <div class="flex items-center gap-1">
+            <Avatar.Root class="ui:border-background size-6 border-2">
+              <Avatar.Image src={studentPlaceholderAvatarUrls[0]} alt="" loading="lazy" decoding="async" />
+              <Avatar.Fallback aria-hidden="true">
+                {titleInitial}
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <p class="text-xs tabular-nums">{totalStudents}</p>
+          </div>
+        {:else}
+          <div class="flex -space-x-2">
+            {#each studentPlaceholderAvatarUrls as avatarUrl, slotIndex (slotIndex)}
+              <Avatar.Root class="ui:border-background size-6 border-2">
+                <Avatar.Image src={avatarUrl} alt="" loading="lazy" decoding="async" />
+                <Avatar.Fallback aria-hidden="true">
+                  {titleInitial}
+                </Avatar.Fallback>
+              </Avatar.Root>
+            {/each}
+            <Avatar.Root class="ui:border-background size-6 border-2">
+              <Avatar.Fallback class="text-[10px]">+{totalStudents - 2}</Avatar.Fallback>
+            </Avatar.Root>
+          </div>
+        {/if}
+      {:else}
+        <Avatar.Root class="size-6">
+          <Avatar.Image src={emptyStateAvatarUrl} alt="" loading="lazy" decoding="async" />
+          <Avatar.Fallback aria-hidden="true">
+            {titleInitial}
+          </Avatar.Fallback>
+        </Avatar.Root>
+        <p class="text-xs">0</p>
+      {/if}
+    </div>
+
+    <!-- Actions -->
+    {#if !isLMS}
+      <div class="flex justify-end">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon"
+                class="size-8"
+                aria-label="Course actions"
+                onclick={(e) => e.stopPropagation()}
+              >
+                <EllipsisVerticalIcon class="size-4" />
+              </Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            <DropdownMenu.Item onclick={handleOpen}>
+              {$t('courses.course_card.context_menu.open')}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onclick={handleClone}>
+              {$t('courses.course_card.context_menu.clone')}
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
+              {$t('courses.course_card.context_menu.delete')}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+    {/if}
+  </div>
+</ResourceListRow.Root>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/order-modal.svelte b/apps/dashboard/src/lib/features/course/components/exercise/order-modal.svelte
index 896d9fa3..d893ef0d 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/order-modal.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/order-modal.svelte
@@ -15,7 +15,7 @@
   const flipDurationMs = 300;
 
   interface Question {
-    id: number;
+    id: number | string;
     name: string;
     type: number;
   }
@@ -36,23 +36,36 @@
     items = e.detail.items;
   }
 
-  function handleDndFinalize(e) {
-    items = e.detail.items;
+  function applyItemOrder(nextItems: Array<Question>) {
+    questionnaire.update((currentQuestionnaire) => {
+      const nextOrderById = new Map(nextItems.map((item, index) => [String(item.id), index + 1]));
+      const nextQuestions = currentQuestionnaire.questions.map((question) => {
+        const nextOrder = nextOrderById.get(String(question.id));
+        if (nextOrder == null) {
+          return question;
+        }
+
+        return {
+          ...question,
+          isDirty: true,
+          order: nextOrder
+        };
+      });
+      const activeQuestions = nextQuestions
+        .filter((question) => !question.deletedAt)
+        .sort((leftQuestion, rightQuestion) => (leftQuestion.order ?? 0) - (rightQuestion.order ?? 0));
+      const deletedQuestions = nextQuestions.filter((question) => question.deletedAt);
+
+      return {
+        ...currentQuestionnaire,
+        questions: [...activeQuestions, ...deletedQuestions]
+      };
+    });
   }
 
-  function handleClose() {
-    items.forEach((item, index) => {
-      const order = index + 1;
-      $questionnaire.questions.some((q) => {
-        if (q.id === item.id) {
-          q.isDirty = true;
-          q.order = order;
-          return true;
-        }
-      });
-    });
-    $questionnaire.questions = $questionnaire.questions.sort((a, b) => a.order - b.order);
-    $questionnaireOrder.open = false;
+  function handleDndFinalize(e) {
+    items = e.detail.items;
+    applyItemOrder(e.detail.items);
   }
 
   $effect(() => {
@@ -63,7 +76,9 @@
 <Dialog.Root
   bind:open={$questionnaireOrder.open}
   onOpenChange={(isOpen) => {
-    if (!isOpen) handleClose();
+    if (!isOpen) {
+      applyItemOrder(items);
+    }
   }}
 >
   <Dialog.Content class="w-96">
@@ -81,7 +96,7 @@
       }}
       onconsider={handleDndConsider}
       onfinalize={handleDndFinalize}
-      class="w-full"
+      class="max-h-[300px] w-full"
     >
       {#each items as item (item.id)}
         <div
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts b/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
index 6204bf12..a9f0ac6f 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
+++ b/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
@@ -176,6 +176,29 @@ export function getExerciseQuestionLabels(): ExerciseQuestionLabels {
     'numeric.review.out_of_range': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.numeric.review.out_of_range'
     ),
+    'star.edit.correct_value_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.correct_value_label'
+    ),
+    'star.edit.correct_value_info': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.correct_value_info'
+    ),
+    'star.edit.max_stars_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.max_stars_label'
+    ),
+    'star.edit.max_stars_info': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.max_stars_info'
+    ),
+    'star.edit.correct_value_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.correct_value_placeholder'
+    ),
+    'star.edit.max_stars_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.edit.max_stars_placeholder'
+    ),
+    'star.take.helper': t.get('course.navItem.lessons.exercises.all_exercises.shared_question.star.take.helper'),
+    'star.take.star_sr': t.get('course.navItem.lessons.exercises.all_exercises.shared_question.star.take.star_sr'),
+    'star.preview.correct_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.star.preview.correct_label'
+    ),
     'fill_blank.edit.accepted_answers_placeholder': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.fill_blank.edit.accepted_answers_placeholder'
     ),
@@ -188,6 +211,54 @@ export function getExerciseQuestionLabels(): ExerciseQuestionLabels {
     'fill_blank.review.your_answer_label': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.fill_blank.review.your_answer_label'
     ),
+    'word_bank.edit.template_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.template_label'
+    ),
+    'word_bank.edit.template_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.template_placeholder'
+    ),
+    'word_bank.edit.template_helper': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.template_helper'
+    ),
+    'word_bank.edit.no_blanks_warning': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.no_blanks_warning'
+    ),
+    'word_bank.edit.correct_answers_heading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.correct_answers_heading'
+    ),
+    'word_bank.edit.blank_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.blank_label'
+    ),
+    'word_bank.edit.correct_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.correct_placeholder'
+    ),
+    'word_bank.edit.distractors_heading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.distractors_heading'
+    ),
+    'word_bank.edit.distractor_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.distractor_placeholder'
+    ),
+    'word_bank.edit.add_distractor': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.edit.add_distractor'
+    ),
+    'word_bank.take.helper': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.take.helper'
+    ),
+    'word_bank.take.bank_heading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.take.bank_heading'
+    ),
+    'word_bank.take.clear_blank_sr': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.take.clear_blank_sr'
+    ),
+    'word_bank.preview.filled_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.preview.filled_label'
+    ),
+    'word_bank.review.your_answer_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.review.your_answer_label'
+    ),
+    'word_bank.review.correct_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.word_bank.review.correct_label'
+    ),
     'file_upload.edit.accepted_types_placeholder': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.file_upload.edit.accepted_types_placeholder'
     ),
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte b/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
index 9319ae19..6de570e1 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
@@ -235,6 +235,7 @@
         case 'RADIO':
         case 'TRUE_FALSE':
         case 'NUMERIC':
+        case 'STAR':
           return true;
         case 'CHECKBOX':
           return answerValue.optionIds.length > 0;
@@ -244,6 +245,10 @@
           return answerValue.text.trim().length > 0;
         case 'FILL_BLANK':
           return answerValue.values.length > 0;
+        case 'WORD_BANK': {
+          const filled = answerValue.filledBlanks ?? [];
+          return filled.length > 0 && filled.every((v) => String(v).trim().length > 0);
+        }
         case 'FILE_UPLOAD':
           return !!answerValue.fileKey;
         case 'MATCHING':
@@ -470,9 +475,12 @@
   });
 </script>
 
-{#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished}
-  <div class="mb-6">
-    <Progress value={$questionnaireMetaData.progressValue} />
+{#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished && $questionnaireMetaData.currentQuestionIndex > 0}
+  <div class="mb-6 flex min-w-0 items-center gap-3">
+    <span class="ui:text-muted-foreground shrink-0 text-sm tabular-nums">
+      {$questionnaireMetaData.currentQuestionIndex}/{$questionnaire.questions.length}
+    </span>
+    <Progress class="min-w-0 flex-1" value={$questionnaireMetaData.progressValue} />
   </div>
 {/if}
 
@@ -605,7 +613,9 @@
     {/if}
 
     <Preview
-      questions={$questionnaire.questions.sort((a, b) => a.order - b.order)}
+      questions={[...$questionnaire.questions].sort(
+        (leftQuestion, rightQuestion) => leftQuestion.order - rightQuestion.order
+      )}
       questionnaireMetaData={$questionnaireMetaData}
       grades={$questionnaireMetaData.grades}
       disableGrading={true}
diff --git a/apps/dashboard/src/lib/features/course/components/index.ts b/apps/dashboard/src/lib/features/course/components/index.ts
index 1d5b3c26..3d939c22 100644
--- a/apps/dashboard/src/lib/features/course/components/index.ts
+++ b/apps/dashboard/src/lib/features/course/components/index.ts
@@ -7,6 +7,7 @@ export { default as CourseFilterPopover } from './course-filter-popover.svelte';
 export { default as CourseTagPicker } from './course-tag-picker.svelte';
 export { default as CreateCourseButton } from './create-course-button.svelte';
 export { default as CourseList } from './list.svelte';
+export { default as CourseListRow } from './course-list-row.svelte';
 export { default as CourseTagsOverflow } from './course-tags-overflow.svelte';
 export { default as CourseListLoader } from './list-loader.svelte';
 export { default as NewCourseModal } from './new-course-modal.svelte';
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/add-video-modal.svelte b/apps/dashboard/src/lib/features/course/components/lesson/video/add-video-modal.svelte
index 77c4b82a..6f16c001 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/video/add-video-modal.svelte
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/add-video-modal.svelte
@@ -3,6 +3,7 @@
   import UploadVideo from './upload-video.svelte';
   import EmbedLink from './embed-link.svelte';
   import LibraryVideo from './library-video.svelte';
+  import GoogleDriveVideo from './google-drive-video.svelte';
   import * as CONSTANTS from './constants';
   import { t } from '$lib/utils/functions/translations';
   import { isFreePlan } from '$lib/utils/store/org';
@@ -57,6 +58,9 @@
       <UnderlineTabs.Content value="4" class="mt-3">
         <LibraryVideo {lessonId} />
       </UnderlineTabs.Content>
+      <UnderlineTabs.Content value="5" class="mt-3">
+        <GoogleDriveVideo {lessonId} />
+      </UnderlineTabs.Content>
     </UnderlineTabs.Root>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/constants.ts b/apps/dashboard/src/lib/features/course/components/lesson/video/constants.ts
index a80cabe1..e3b9cd16 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/video/constants.ts
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/constants.ts
@@ -1,4 +1,5 @@
 import FileSymlinkIcon from '@lucide/svelte/icons/file-symlink';
+import HardDriveIcon from '@lucide/svelte/icons/hard-drive';
 import LibraryIcon from '@lucide/svelte/icons/library';
 import VideoIcon from '@lucide/svelte/icons/video';
 import YoutubeIcon from '@lucide/svelte/icons/youtube';
@@ -23,5 +24,10 @@ export const videoTabs = [
     value: 4,
     title: 'course.navItem.lessons.materials.tabs.video.library',
     icon: LibraryIcon
+  },
+  {
+    value: 5,
+    title: 'course.navItem.lessons.materials.tabs.video.google_drive',
+    icon: HardDriveIcon
   }
 ];
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/google-drive-video.svelte b/apps/dashboard/src/lib/features/course/components/lesson/video/google-drive-video.svelte
new file mode 100644
index 00000000..037cc01a
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/google-drive-video.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { Badge } from '@cio/ui/base/badge';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import TrashIcon from '@lucide/svelte/icons/trash';
+
+  import { t } from '$lib/utils/functions/translations';
+  import type { Lesson, LessonVideoType } from '$features/course/utils/types';
+  import type { TAssetProvider } from '@cio/utils/validation/assets';
+  import { lessonApi } from '$features/course/api';
+  import { mediaApi } from '$features/media/api';
+  import { copyToClipboard, removeVideo } from '$lib/utils/functions/formatYoutubeVideo';
+  import {
+    googleDrivePreviewUrl,
+    googleDriveThumbnailUrl,
+    pickGoogleDriveVideo
+  } from '$lib/utils/functions/google-drive-picker';
+
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { Button } from '@cio/ui/base/button';
+  import { env } from '$env/dynamic/public';
+
+  interface Props {
+    lessonId?: string;
+  }
+
+  let { lessonId = '' }: Props = $props();
+
+  let isOpeningPicker = $state(false);
+  let errorMessage = $state('');
+
+  const clientId = $derived((env.PUBLIC_GOOGLE_PICKER_CLIENT_ID ?? '').trim());
+  const apiKey = $derived((env.PUBLIC_GOOGLE_PICKER_API_KEY ?? '').trim());
+  const isConfigured = $derived(Boolean(clientId && apiKey));
+
+  function isGoogleDriveLessonVideo(video: NonNullable<Lesson['videos']>[number]): boolean {
+    return (video as { type: string }).type === 'google_drive';
+  }
+
+  async function openPicker() {
+    errorMessage = '';
+
+    if (!isConfigured) {
+      errorMessage = $t('course.navItem.lessons.materials.tabs.video.add_video.google_drive_not_configured');
+      return;
+    }
+
+    if (!lessonApi.lesson) return;
+
+    isOpeningPicker = true;
+
+    try {
+      const picked = await pickGoogleDriveVideo({ clientId, apiKey });
+
+      if (!picked) {
+        return;
+      }
+
+      const previewUrl = googleDrivePreviewUrl(picked.fileId);
+      const thumbnailUrl = googleDriveThumbnailUrl(picked.fileId);
+      const createdAt = new Date().toISOString();
+      const videoMetadata = {
+        createdAt,
+        title: picked.name,
+        googleDriveFileId: picked.fileId,
+        mimeType: picked.mimeType,
+        thumbnailUrl
+      };
+
+      const existingCount = Array.isArray(lessonApi.lesson.videos) ? lessonApi.lesson.videos.length : 0;
+
+      const asset = await mediaApi.createAsset({
+        kind: 'video',
+        provider: 'google_drive' as TAssetProvider,
+        storageProvider: 'external',
+        storageKey: picked.fileId,
+        sourceUrl: previewUrl,
+        isExternal: true,
+        title: picked.name,
+        thumbnailUrl,
+        metadata: videoMetadata
+      });
+
+      if (asset && lessonId) {
+        await mediaApi.attachAsset(asset.id, {
+          targetType: 'lesson',
+          targetId: lessonId,
+          slotType: 'lesson_video',
+          position: existingCount
+        });
+      }
+
+      const newVideo = {
+        type: 'google_drive' as LessonVideoType,
+        link: previewUrl,
+        assetId: asset?.id,
+        fileName: picked.name,
+        metadata: videoMetadata
+      };
+
+      lessonApi.updateLessonState('videos', [newVideo as unknown as NonNullable<Lesson['videos']>[number]], {
+        append: true
+      });
+      lessonApi.isDirty = true;
+    } catch (error) {
+      console.error('Google Drive picker error:', error);
+      errorMessage = $t('course.navItem.lessons.materials.tabs.video.add_video.google_drive_error');
+    } finally {
+      isOpeningPicker = false;
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  <p class="ui:text-muted-foreground text-sm">
+    {$t('course.navItem.lessons.materials.tabs.video.add_video.google_drive_hint')}
+  </p>
+
+  <Button type="button" onclick={openPicker} disabled={isOpeningPicker} class="w-fit">
+    {isOpeningPicker
+      ? $t('course.navItem.lessons.materials.tabs.video.add_video.google_drive_opening')
+      : $t('course.navItem.lessons.materials.tabs.video.add_video.google_drive_choose')}
+  </Button>
+
+  {#if errorMessage}
+    <p class="ui:text-destructive text-sm">{errorMessage}</p>
+  {/if}
+</div>
+
+<p class="mt-4 pl-2 text-sm">
+  {$t('course.navItem.lessons.materials.tabs.video.add_video.videos_added')}:
+  <strong>
+    {lessonApi.lesson?.videos?.filter(isGoogleDriveLessonVideo).length || 0}
+  </strong>
+</p>
+
+<div class="">
+  {#each lessonApi.lesson?.videos || [] as video, index (video.assetId ?? `${video.type}-${index}-${video.link}`)}
+    {#if isGoogleDriveLessonVideo(video)}
+      <div class="flex items-center gap-1">
+        <Badge class="max-w-md truncate" variant="secondary">
+          {video.fileName || video.link}
+        </Badge>
+        <IconButton onclick={() => copyToClipboard(video.link)}>
+          <CopyIcon size={16} />
+        </IconButton>
+        <IconButton onclick={() => removeVideo(index)}>
+          <TrashIcon size={16} />
+        </IconButton>
+      </div>
+    {/if}
+  {/each}
+</div>
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/video-card-utils.ts b/apps/dashboard/src/lib/features/course/components/lesson/video/video-card-utils.ts
index 8fced561..e532047a 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/video/video-card-utils.ts
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/video-card-utils.ts
@@ -9,6 +9,8 @@ type VideoMetadata = {
   duration?: number;
   createdAt?: string;
   thumbnailUrl?: string;
+  googleDriveFileId?: string;
+  mimeType?: string;
 };
 
 /**
@@ -23,6 +25,13 @@ export function getVideoThumbnailUrl(video: LessonVideo): string | null {
     const meta = video.metadata as VideoMetadata | undefined;
     if (meta?.thumbnailUrl && typeof meta.thumbnailUrl === 'string') return meta.thumbnailUrl;
   }
+  if (video.type === 'google_drive') {
+    const meta = video.metadata as VideoMetadata | undefined;
+    if (meta?.thumbnailUrl && typeof meta.thumbnailUrl === 'string') return meta.thumbnailUrl;
+    if (meta?.googleDriveFileId && typeof meta.googleDriveFileId === 'string') {
+      return `https://drive.google.com/thumbnail?id=${meta.googleDriveFileId}&sz=w400`;
+    }
+  }
   return null;
 }
 
@@ -67,6 +76,7 @@ export function getVideoTitle(video: LessonVideo, index: number): string {
 
   if (video.type === 'youtube') return 'YouTube video';
   if (video.type === 'generic') return 'Embedded video';
+  if (video.type === 'google_drive') return 'Google Drive video';
 
   return `Video ${index + 1}`;
 }
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/video-card.svelte b/apps/dashboard/src/lib/features/course/components/lesson/video/video-card.svelte
index aa174674..32b09f12 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/video/video-card.svelte
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/video-card.svelte
@@ -2,7 +2,7 @@
   import * as Item from '@cio/ui/base/item';
   import { Image } from '$features/ui';
   import VideoIcon from '@lucide/svelte/icons/video';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
   import VideoCardDropdown from './video-card-dropdown.svelte';
   import {
     getVideoThumbnailUrl,
@@ -67,15 +67,19 @@
     <Item.Content>
       <Item.Title class="line-clamp-2 min-h-[44px] text-base!" {title}>
         {#if isYoutubeWithLink}
-          <a
-            href={video.link}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="ui:text-foreground hover:ui:underline focus:ui:underline focus:ui:outline-none inline-flex items-center gap-1.5"
-          >
-            <span class="line-clamp-2">{title}</span>
-            <ExternalLinkIcon class="ui:text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
-          </a>
+          <HoverableItem>
+            {#snippet children(isHovered)}
+              <a
+                href={video.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="ui:text-foreground hover:ui:underline focus:ui:underline focus:ui:outline-none inline-flex items-center gap-1.5"
+              >
+                <span class="line-clamp-2">{title}</span>
+                <ExternalLinkIcon {isHovered} size={14} class="ui:text-muted-foreground shrink-0" ariaHidden={true} />
+              </a>
+            {/snippet}
+          </HoverableItem>
         {:else}
           {title}
         {/if}
diff --git a/apps/dashboard/src/lib/features/course/components/list.svelte b/apps/dashboard/src/lib/features/course/components/list.svelte
index 43d7d19f..78633043 100644
--- a/apps/dashboard/src/lib/features/course/components/list.svelte
+++ b/apps/dashboard/src/lib/features/course/components/list.svelte
@@ -21,6 +21,8 @@
     totalStudents?: number;
     isExplore?: boolean;
     isLMS?: boolean;
+    href?: string;
+    showActions?: boolean;
     tags?: Array<{
       id: string;
       name: string;
@@ -40,10 +42,17 @@
     totalStudents = 0,
     isExplore = false,
     isLMS = false,
+    href,
+    showActions = true,
     tags = []
   }: Props = $props();
 
   function handleRowClick() {
+    if (href) {
+      goto(resolve(href, {}));
+      return;
+    }
+
     if (isExplore) {
       goto(resolve(`/course/${slug}`, {}));
       return;
@@ -104,7 +113,7 @@
       </Table.Cell>
     {/if}
   {/if}
-  {#if !isLMS}
+  {#if !isLMS && showActions}
     <Table.Cell class="text-center">
       <DropdownMenu.Root>
         <DropdownMenu.Trigger
diff --git a/apps/dashboard/src/lib/features/course/components/newsfeed/card/card.svelte b/apps/dashboard/src/lib/features/course/components/newsfeed/card/card.svelte
index fcd7969e..12b9633f 100644
--- a/apps/dashboard/src/lib/features/course/components/newsfeed/card/card.svelte
+++ b/apps/dashboard/src/lib/features/course/components/newsfeed/card/card.svelte
@@ -3,11 +3,12 @@
 
   import type { Feed } from '$features/course/utils/types';
   import { newsfeedApi } from '$features/course/api';
+  import { getNewsfeedReactionCounts, getSelectedNewsfeedReactionType } from '@cio/ui/custom/newsfeed-reactions';
 
   import DeleteConfirmation from './delete-confirmation.svelte';
   import type { NewsfeedCommentsByFeedId } from '$features/course/api';
   import Header from './header.svelte';
-  import Reactions from './reactions.svelte';
+  import { NewsfeedReactions } from '@cio/ui/custom/newsfeed-reactions';
   import Comments from './comments.svelte';
 
   interface Props {
@@ -64,6 +65,9 @@
     deleteFeed(feed.id);
   };
 
+  const reactionCounts = $derived(getNewsfeedReactionCounts(feed.reaction));
+  const selectedReactionType = $derived(getSelectedNewsfeedReactionType(feed.reaction, author.id));
+
   onMount(() => {
     if (isActive) {
       const el = document.getElementById(feed.id);
@@ -84,7 +88,14 @@
 >
   <Header {feed} {onPin} onEdit={openEditFeed} onRequestDelete={() => (isDeleteFeedModal = true)} />
 
-  <Reactions {feed} authorId={author.id} {isReacting} onReact={handleReact} />
+  <div class="px-3 pt-1 pb-2">
+    <NewsfeedReactions
+      {reactionCounts}
+      {selectedReactionType}
+      disabled={isReacting || !author.id}
+      onReactionToggle={handleReact}
+    />
+  </div>
 
   <Comments
     {courseId}
diff --git a/apps/dashboard/src/lib/features/course/components/newsfeed/card/header.svelte b/apps/dashboard/src/lib/features/course/components/newsfeed/card/header.svelte
index 9ae242ea..414673e1 100644
--- a/apps/dashboard/src/lib/features/course/components/newsfeed/card/header.svelte
+++ b/apps/dashboard/src/lib/features/course/components/newsfeed/card/header.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import * as Avatar from '@cio/ui/base/avatar';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import UserIcon from '@lucide/svelte/icons/user';
 
   import { calDateDiff } from '$lib/utils/functions/date';
   import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
@@ -24,11 +26,17 @@
   <div class="mb-2 flex justify-between">
     <span class="flex items-center gap-3">
       <div class="h-9 w-9">
-        <img
-          src={feed.authorAvatarUrl || ''}
-          alt={$t('course.navItem.news_feed.user_avatar_alt')}
-          class="h-full w-full rounded-full object-cover"
-        />
+        <Avatar.Root class="h-full w-full">
+          <Avatar.Image
+            src={feed.authorAvatarUrl ?? ''}
+            alt={$t('course.navItem.news_feed.user_avatar_alt')}
+            loading="lazy"
+            decoding="async"
+          />
+          <Avatar.Fallback aria-hidden="true">
+            <UserIcon class="text-muted-foreground h-5 w-5" />
+          </Avatar.Fallback>
+        </Avatar.Root>
       </div>
       <span>
         <p class="text-base font-semibold capitalize">{feed.authorFullname || ''}</p>
diff --git a/apps/dashboard/src/lib/features/course/components/newsfeed/card/reactions.svelte b/apps/dashboard/src/lib/features/course/components/newsfeed/card/reactions.svelte
deleted file mode 100644
index c0a3a6b1..00000000
--- a/apps/dashboard/src/lib/features/course/components/newsfeed/card/reactions.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { Button } from '@cio/ui/base/button';
-  import type { Feed } from '$features/course/utils/types';
-
-  interface Props {
-    feed: Feed;
-    authorId: string;
-    isReacting?: boolean;
-    onReact: (reactionType: string) => void;
-  }
-
-  let { feed, authorId, isReacting = false, onReact }: Props = $props();
-
-  const reactions: Record<string, string> = {
-    smile: '😀',
-    thumbsup: '👍',
-    thumbsdown: '👎',
-    clap: '👏'
-  };
-</script>
-
-<!-- Reactions -->
-<div class="flex items-center gap-4 px-3">
-  <div class="flex items-center gap-1">
-    {#each Object.keys(feed.reaction || {}) as reactionType}
-      {#if reactions[reactionType]}
-        {@const isAuthorReacted = (feed.reaction?.[reactionType] || []).includes(authorId)}
-        <Button
-          variant={isAuthorReacted ? 'light-default' : 'ghost'}
-          size="icon-sm"
-          class="size-unset! px-5! py-0!"
-          disabled={isReacting}
-          onclick={() => onReact(reactionType)}
-        >
-          {reactions[reactionType]}
-          {#if feed.reaction?.[reactionType]?.length >= 1}
-            <span class="text-xs">{feed.reaction?.[reactionType]?.length}</span>
-          {/if}
-        </Button>
-      {/if}
-    {/each}
-  </div>
-</div>
diff --git a/apps/dashboard/src/lib/features/course/components/people/invitation-modal.svelte b/apps/dashboard/src/lib/features/course/components/people/invitation-modal.svelte
index a9a0adf2..6962dfa1 100644
--- a/apps/dashboard/src/lib/features/course/components/people/invitation-modal.svelte
+++ b/apps/dashboard/src/lib/features/course/components/people/invitation-modal.svelte
@@ -13,12 +13,10 @@
   import { peopleApi } from '$features/course/api';
   import { orgApi } from '$features/org/api/org.svelte';
   import { DEFAULT_ORG_AUDIENCE_QUERY } from '$features/org/utils/audience-query-utils';
+  import { profile } from '$lib/utils/store/user';
   import type { OrgTeamMember } from '$lib/utils/types/org';
-  import type { OrgStudent, Tutor } from './types';
-
-  import TutorSelectSection from './tutor-select-section.svelte';
-  import ExistingStudentsSection from './existing-students-section.svelte';
-  import BulkEmailSection from './bulk-email-section.svelte';
+  import type { OrgStudent, Tutor } from '$features/people/utils/types';
+  import { TutorSelectSection, ExistingStudentsSection, BulkEmailSection } from '$features/people/components';
 
   let tutors = $state<Tutor[]>([]);
   let selectedIds = $state<string[]>([]);
@@ -87,6 +85,56 @@
     });
   }
 
+  async function handleStudentSearch(value: string) {
+    const orgId = $currentOrg.id;
+    if (!orgId) {
+      return;
+    }
+
+    isLoadingStudents = true;
+
+    try {
+      await orgApi.getOrgAudience(
+        orgId,
+        {
+          ...DEFAULT_ORG_AUDIENCE_QUERY,
+          search: value.trim() || undefined
+        },
+        { abortPrevious: true }
+      );
+    } finally {
+      isLoadingStudents = false;
+    }
+  }
+
+  async function assignExistingStudents(profileIds: string[], sendEmail: boolean) {
+    const result = await orgApi.assignAudienceToCourses({
+      profileIds,
+      courseIds: [courseId],
+      sendEmail
+    });
+
+    if (!result) {
+      return;
+    }
+
+    await courseApi.refreshCourse(courseId, $profile.id);
+  }
+
+  async function inviteNewStudents(recipientCsv: string, sendEmail: boolean) {
+    const response = await orgApi.importAudienceMembers({
+      recipientCsv,
+      courseIds: [courseId],
+      sendEmail
+    });
+
+    if (!response) {
+      return;
+    }
+
+    await courseApi.refreshCourse(courseId, $profile.id);
+  }
+
   async function onSubmit() {
     if (!selectedTutors.length) {
       goto(resolve(page.url.pathname, {}));
@@ -144,7 +192,12 @@
 
       <UnderlineTabs.Content value="tutors">
         <div class="mt-6 space-y-6">
-          <TutorSelectSection {tutors} bind:selectedIds isLoading={orgApi.isLoading} />
+          <TutorSelectSection
+            {tutors}
+            bind:selectedIds
+            isLoading={orgApi.isLoading}
+            helperHref={`/org/${$currentOrg.siteName}/settings/teams`}
+          />
 
           <div class="mt-5 flex flex-row-reverse items-center gap-2">
             <Button variant="secondary" type="button" onclick={onSubmit} loading={peopleApi.isLoading}>
@@ -156,8 +209,13 @@
 
       <UnderlineTabs.Content value="students">
         <div class="mt-6 space-y-6">
-          <ExistingStudentsSection {courseId} students={availableStudents} isLoading={isLoadingStudents} />
-          <BulkEmailSection {courseId} />
+          <ExistingStudentsSection
+            students={availableStudents}
+            isLoading={isLoadingStudents}
+            onSearchValueChange={handleStudentSearch}
+            onAssign={assignExistingStudents}
+          />
+          <BulkEmailSection onInvite={inviteNewStudents} />
         </div>
       </UnderlineTabs.Content>
     </UnderlineTabs.Root>
diff --git a/apps/dashboard/src/lib/features/course/pages/attendance.svelte b/apps/dashboard/src/lib/features/course/pages/attendance.svelte
index a933ddaf..e737f94b 100644
--- a/apps/dashboard/src/lib/features/course/pages/attendance.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/attendance.svelte
@@ -145,7 +145,7 @@
 </section>
 
 <section class="my-2 space-y-4">
-  <div class="rounded-md border">
+  <div class="overflow-x-auto rounded-md border">
     <Table.Root>
       <Table.Header>
         <Table.Row>
diff --git a/apps/dashboard/src/lib/features/course/pages/courses.svelte b/apps/dashboard/src/lib/features/course/pages/courses.svelte
index c664f5b8..b82b2a63 100644
--- a/apps/dashboard/src/lib/features/course/pages/courses.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/courses.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import * as Table from '@cio/ui/base/table';
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
   import { Empty } from '@cio/ui/custom/empty';
   import { Search } from '@cio/ui/custom/search';
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
   import * as Page from '@cio/ui/base/page';
-  import * as Select from '@cio/ui/base/select';
+  import { SortSelect } from '$features/ui';
   import GridIcon from '@lucide/svelte/icons/grid-2x2';
   import ListIcon from '@lucide/svelte/icons/list';
   import { IconButton } from '@cio/ui/custom/icon-button';
@@ -12,8 +12,8 @@
   import {
     CourseCardList,
     CourseCardLoader,
+    CourseListRow,
     CreateCourseButton,
-    CourseList,
     CopyCourseModal,
     NewCourseModal
   } from '$features/course/components';
@@ -60,8 +60,6 @@
     }))
   );
 
-  const selectedLabel = $derived(filterOptions.find((opt) => opt.value === sortKey)?.label || filterOptions[0].label);
-
   const setViewPreference = (preference: 'grid' | 'list') => {
     $courseMetaDeta.view = preference;
     if (browser) {
@@ -97,27 +95,20 @@
 <Page.BodyHeader align="right" class="p-0!">
   <Search placeholder={$t('courses.search_placeholder')} bind:value={searchValue} />
   {#if showSortSelect}
-    <Select.Root type="single" bind:value={sortKey}>
-      <Select.Trigger class="min-w-[150px]">
-        <p>{sortKey ? selectedLabel : filterOptions[0].label}</p>
-      </Select.Trigger>
-      <Select.Content>
-        {#each filterOptions as option (option.label)}
-          <Select.Item value={option.value}>{option.label}</Select.Item>
-        {/each}
-      </Select.Content>
-    </Select.Root>
+    <SortSelect options={filterOptions} bind:value={sortKey} />
   {/if}
   {@render filterControls?.()}
 
-  {#if $courseMetaDeta.view === 'list'}
-    <IconButton onclick={() => setViewPreference('grid')}>
-      <GridIcon size={16} />
-    </IconButton>
-  {:else}
-    <IconButton onclick={() => setViewPreference('list')}>
-      <ListIcon size={16} />
-    </IconButton>
+  {#if !isLMS}
+    {#if $courseMetaDeta.view === 'list'}
+      <IconButton onclick={() => setViewPreference('grid')}>
+        <GridIcon size={16} />
+      </IconButton>
+    {:else}
+      <IconButton onclick={() => setViewPreference('list')}>
+        <ListIcon size={16} />
+      </IconButton>
+    {/if}
   {/if}
 </Page.BodyHeader>
 
@@ -134,48 +125,33 @@
         <CreateCourseButton isResponsive />
       {/if}
     </Empty>
-  {:else if $courseMetaDeta.view === 'list'}
-    <div class="w-full overflow-hidden rounded-md border">
-      <Table.Root class="w-full table-fixed">
-        <Table.Header>
-          <Table.Row>
-            <Table.Head class="w-[20%]">{$t('courses.course_card.list_view.title')}</Table.Head>
-            <Table.Head class="w-[20%]">{$t('courses.course_card.list_view.description')}</Table.Head>
-            <Table.Head class="w-[10%]">{$t('courses.course_card.list_view.type')}</Table.Head>
-            <Table.Head class="w-3/12 min-w-0">{$t('courses.course_card.list_view.tags')}</Table.Head>
-            <Table.Head class="w-[8%]">{$t('courses.course_card.list_view.lessons')}</Table.Head>
-            {#if !isLMS}
-              <Table.Head class="w-[8%]">{$t('courses.course_card.list_view.students')}</Table.Head>
-              <Table.Head class="w-[10%]">{$t('courses.course_card.list_view.published')}</Table.Head>
-              <Table.Head class="w-[6%]"></Table.Head>
-            {/if}
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {#each courses as courseData (courseData.id)}
-            <CourseList
-              id={courseData.id}
-              slug={courseData.slug ?? ''}
-              title={courseData.title}
-              type={$t(`course.navItem.settings.${courseData.type?.toLowerCase()}`)}
-              description={courseData.description}
-              isPublished={courseData.isPublished ?? false}
-              totalLessons={courseData.lessonCount}
-              totalStudents={'totalStudents' in courseData ? courseData.totalStudents : 0}
-              tags={('tags' in courseData && Array.isArray(courseData.tags) ? courseData.tags : []) as Array<{
-                id: string;
-                name: string;
-                slug: string;
-                color?: string | null;
-              }>}
-              {isExplore}
-              {isLMS}
-            />
-          {/each}
-        </Table.Body>
-      </Table.Root>
-    </div>
-  {:else}
+  {:else if isLMS || $courseMetaDeta.view === 'grid'}
     <CourseCardList {courses} {isExplore} {isLMS} />
+  {:else}
+    <ResourceListRow.Group>
+      {#each courses as courseData (courseData.id)}
+        <CourseListRow
+          id={courseData.id}
+          slug={courseData.slug ?? ''}
+          title={courseData.title}
+          logo={courseData.logo ?? null}
+          type={courseData.type}
+          description={courseData.description}
+          isPublished={courseData.isPublished ?? false}
+          lessonCount={courseData.lessonCount}
+          exerciseCount={'exerciseCount' in courseData ? (courseData.exerciseCount ?? 0) : 0}
+          totalStudents={'totalStudents' in courseData ? courseData.totalStudents : 0}
+          updatedAt={'updatedAt' in courseData ? (courseData.updatedAt ?? null) : null}
+          tags={('tags' in courseData && Array.isArray(courseData.tags) ? courseData.tags : []) as Array<{
+            id: string;
+            name: string;
+            slug: string;
+            color?: string | null;
+          }>}
+          {isExplore}
+          {isLMS}
+        />
+      {/each}
+    </ResourceListRow.Group>
   {/if}
 </div>
diff --git a/apps/dashboard/src/lib/features/course/pages/exercise.svelte b/apps/dashboard/src/lib/features/course/pages/exercise.svelte
index 3e5c9575..f67d6032 100644
--- a/apps/dashboard/src/lib/features/course/pages/exercise.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/exercise.svelte
@@ -249,7 +249,7 @@
   });
 </script>
 
-<Page.Header isSticky={true} class="z-250! min-h-[36px]">
+<Page.Header isSticky={true} class="z-50! min-h-[36px]">
   <Page.HeaderContent>
     <Page.Title class="flex flex-wrap items-center gap-2">
       <span>{$questionnaire.title || 'Exercise'}</span>
diff --git a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
index 3bad5385..a1459146 100644
--- a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
@@ -15,7 +15,8 @@
   import type { AccountOrg } from '$features/app/types';
   import Empty from '@cio/ui/custom/empty/empty.svelte';
   import { BookIcon } from '@lucide/svelte';
-  import type { TNewsfeedReactionUpdate } from '@cio/utils/validation/newsfeed';
+  import { ROLE } from '@cio/utils/constants';
+  import { buildNextNewsfeedReaction } from '@cio/ui/custom/newsfeed-reactions';
 
   interface Props {
     courseId: string;
@@ -48,27 +49,12 @@
   };
 
   const addNewReaction = async (reactionType: string, feedId: string, authorId: string) => {
-    if (isReactingByFeedId[feedId]) return;
+    if (!authorId || isReactingByFeedId[feedId]) return;
 
     const reactedFeed = newsfeedApi.feeds.find((feed) => feed.id === feedId);
     if (!reactedFeed) return;
 
-    const reaction = reactedFeed.reaction;
-    let reactedAuthorIds: string[] = reaction?.[reactionType] || [];
-
-    if (reactedAuthorIds.includes(authorId)) {
-      reactedAuthorIds = reactedAuthorIds.filter((reactionAuthorId) => reactionAuthorId !== authorId);
-    } else {
-      reactedAuthorIds = [...reactedAuthorIds, authorId];
-    }
-
-    const updatedReaction: TNewsfeedReactionUpdate['reaction'] = {
-      clap: reaction?.clap || [],
-      smile: reaction?.smile || [],
-      thumbsup: reaction?.thumbsup || [],
-      thumbsdown: reaction?.thumbsdown || [],
-      [reactionType]: reactedAuthorIds
-    };
+    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction, reactionType, authorId);
 
     isReactingByFeedId = { ...isReactingByFeedId, [feedId]: true };
 
@@ -99,11 +85,11 @@
       return snackbar.error('snackbar.course.error.toggle_error');
     }
 
-    snackbar.success(
-      `${
-        newIsPinned ? 'snackbar.course.success.pinned' : 'snackbar.course.success.unpinned'
-      } snackbar.course.success.successfully`
-    );
+    const pinStatusMessage = newIsPinned
+      ? t.get('snackbar.course.success.pinned')
+      : t.get('snackbar.course.success.unpinned');
+
+    snackbar.success(`${pinStatusMessage} ${t.get('snackbar.course.success.successfully')}`);
   };
 
   const deleteFeed = async (id: string) => {
@@ -119,10 +105,10 @@
   });
 
   function getPageRoles(org: AccountOrg) {
-    const roles: number[] = [1, 2];
+    const roles: number[] = [ROLE.ADMIN, ROLE.TUTOR];
 
     if (org.customization.course.newsfeed) {
-      roles.push(3);
+      roles.push(ROLE.STUDENT);
     }
 
     return roles;
@@ -143,7 +129,7 @@
     goto(`/courses/${courseId}/lessons?next=true`);
   }}
 >
-  <RoleBasedSecurity allowedRoles={[1, 2]}>
+  <RoleBasedSecurity allowedRoles={getPageRoles($currentOrg)}>
     <NewFeedModal {courseId} bind:edit bind:editFeed />
   </RoleBasedSecurity>
   {#if isListing}
diff --git a/apps/dashboard/src/lib/features/course/types.ts b/apps/dashboard/src/lib/features/course/types.ts
index e3ef582d..4b28b8d5 100644
--- a/apps/dashboard/src/lib/features/course/types.ts
+++ b/apps/dashboard/src/lib/features/course/types.ts
@@ -1,13 +1,21 @@
 // Question type inferred from API Exercise response
 import type { Course as CourseDetails, Exercise } from './utils/types';
-import type { InferResponseType } from '@cio/api/rpc-types';
+import type { InferRequestType, InferResponseType } from '@cio/api/rpc-types';
 import { classroomio } from '$lib/utils/services/api';
 
 // Org Courses types
 export type GetOrgCoursesRequest = typeof classroomio.organization.courses.$get;
 export type OrgCoursesResponse = InferResponseType<GetOrgCoursesRequest> | null;
 export type OrgCoursesSuccess = Extract<InferResponseType<GetOrgCoursesRequest>, { success: true }>;
+export type GetOrgCoursesRequestQuery = NonNullable<InferRequestType<GetOrgCoursesRequest>['query']>;
 export type OrgCourses = OrgCoursesSuccess['data'];
+export type OrgCoursesPagination = OrgCoursesSuccess['pagination'];
+export type OrgCoursesQuery = {
+  page: number;
+  limit: number;
+  search?: string;
+  tags?: string;
+};
 
 // User Enrolled Courses types
 export type GetUserEnrolledCoursesRequest = typeof classroomio.organization.courses.enrolled.$get;
diff --git a/apps/dashboard/src/lib/features/course/utils/course-list-row-utils.ts b/apps/dashboard/src/lib/features/course/utils/course-list-row-utils.ts
new file mode 100644
index 00000000..9969664a
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/utils/course-list-row-utils.ts
@@ -0,0 +1,17 @@
+/** FNV-1a–style hash for stable, client-only placeholder picks (e.g. icon per course). */
+export function hashStringToUInt32(value: string): number {
+  let hash = 2166136261;
+
+  for (let index = 0; index < value.length; index++) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+
+  return hash >>> 0;
+}
+
+export function buildCoursePlaceholderAvatarUrl(seed: string): string {
+  const stableSeed = hashStringToUInt32(seed).toString(36);
+
+  return `https://api.dicebear.com/9.x/thumbs/svg?seed=${encodeURIComponent(stableSeed)}`;
+}
diff --git a/apps/dashboard/src/lib/features/course/utils/store.ts b/apps/dashboard/src/lib/features/course/utils/store.ts
index ca7219f9..d55cdbb2 100644
--- a/apps/dashboard/src/lib/features/course/utils/store.ts
+++ b/apps/dashboard/src/lib/features/course/utils/store.ts
@@ -3,7 +3,7 @@ import { writable } from 'svelte/store';
 export const courseMetaDeta = writable<{
   view: 'grid' | 'list';
 }>({
-  view: 'grid'
+  view: 'list'
 });
 
 export const createCourseModal = writable({
diff --git a/apps/dashboard/src/lib/features/lms/api/exercises.server.ts b/apps/dashboard/src/lib/features/lms/api/exercises.server.ts
index 3c55e733..31f987d9 100644
--- a/apps/dashboard/src/lib/features/lms/api/exercises.server.ts
+++ b/apps/dashboard/src/lib/features/lms/api/exercises.server.ts
@@ -1,6 +1,6 @@
-import type { LMSExercise } from './exercises.svelte';
+import type { GetLMSExercisesSuccess, LMSExercise } from './exercises.svelte';
 import { classroomio } from '$lib/utils/services/api';
-import { getApiKeyHeaders } from '$lib/utils/services/api/server';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
 
 /**
  * Server-side API methods for LMS exercises
@@ -15,15 +15,15 @@ export class LMSExercisesApiServer {
    */
   static async fetchLMSExercises(orgId: string): Promise<LMSExercise[] | null> {
     try {
-      const response = await classroomio.organization[':orgId'].exercises.lms.$get(
-        {
-          param: { orgId }
-        },
-        getApiKeyHeaders()
+      const result = await safeServerApi<GetLMSExercisesSuccess>(() =>
+        classroomio.organization[':orgId'].exercises.lms.$get(
+          {
+            param: { orgId }
+          },
+          getApiKeyHeaders()
+        )
       );
-
-      const data = await response.json();
-      return data.success && data.data ? data.data : null;
+      return result.ok && result.body.data ? result.body.data : null;
     } catch (error) {
       console.error('Error fetching LMS exercises (server):', error);
       return null;
diff --git a/apps/dashboard/src/lib/features/lms/components/pending-invite-modal.svelte b/apps/dashboard/src/lib/features/lms/components/pending-invite-modal.svelte
new file mode 100644
index 00000000..31eb29de
--- /dev/null
+++ b/apps/dashboard/src/lib/features/lms/components/pending-invite-modal.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { classroomio } from '$lib/utils/services/api';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { ROLE } from '@cio/utils/constants';
+  import type { PendingOrgInvite } from '../utils/types';
+
+  interface Props {
+    open?: boolean;
+    invite: PendingOrgInvite;
+    onAccepted?: () => void;
+  }
+
+  let { open = $bindable(false), invite, onAccepted }: Props = $props();
+
+  let isLoading = $state(false);
+
+  const orgName = $derived(invite.organization.name);
+
+  function getInvitationMessage(): string {
+    if (invite.roleId === ROLE.STUDENT) {
+      return t.get('invite.organization.invitation_student', { orgName });
+    }
+
+    if (invite.roleId === ROLE.TUTOR) {
+      return t.get('invite.organization.invitation_teacher', { orgName });
+    }
+
+    if (invite.roleId === ROLE.ADMIN) {
+      return t.get('invite.organization.invitation_admin', { orgName });
+    }
+
+    return t.get('invite.organization.invitation_fallback', { orgName, role: invite.roleLabel });
+  }
+
+  async function handleAccept() {
+    isLoading = true;
+
+    try {
+      const response = await classroomio.invite.organization[':inviteId']['accept-by-id'].$post({
+        param: { inviteId: invite.id }
+      });
+      const result = await response.json();
+
+      if (!result.success) {
+        const failed = result as { error?: string; message?: string };
+        snackbar.error(failed.error ?? failed.message ?? t.get('invite.organization.messages.join_failed'));
+        return;
+      }
+
+      snackbar.success('invite.organization.messages.joined');
+      open = false;
+      onAccepted?.();
+    } catch (error) {
+      console.error('Failed to accept organization invite by id', error);
+      snackbar.error('invite.organization.messages.join_failed');
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(isOpen) => {
+    if (!isOpen && !isLoading) open = false;
+  }}
+>
+  <Dialog.Content class="w-96 p-6">
+    <Dialog.Header class="p-2">
+      <Dialog.Title>{$t('invite.organization.page_title', { orgName })}</Dialog.Title>
+    </Dialog.Header>
+
+    <div class="mt-2 space-y-3 px-2 text-center">
+      <p class="text-sm font-light dark:text-white">{getInvitationMessage()}</p>
+      <p class="text-sm font-light dark:text-white">{$t('invite.organization.email_line', { email: invite.email })}</p>
+    </div>
+
+    <div class="mt-6 flex items-center justify-between">
+      <Button variant="outline" onclick={() => (open = false)} disabled={isLoading}>
+        {$t('delete_modal.no')}
+      </Button>
+      <Button onclick={handleAccept} loading={isLoading} disabled={isLoading}>
+        {$t('invite.organization.accept_button')}
+      </Button>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
index 9e0783cf..94f00b71 100644
--- a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
+++ b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
@@ -7,6 +7,7 @@
   import { profile } from '$lib/utils/store/user';
   import { coursesApi } from '$features/course/api';
   import { resolve } from '$app/paths';
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
 
   let totalCompleted = $derived(
     coursesApi.enrolledCourses.reduce((acc, cur) => {
@@ -32,30 +33,34 @@
   });
 </script>
 
-<div class="flex h-fit w-full flex-col-reverse justify-between rounded-md border px-4 py-2 md:flex-row md:items-center">
-  <div class="w-full md:w-[75%] lg:w-[80%]">
-    <p class="mb-5 w-4/6 font-normal lg:text-xl">
-      {$currentOrg.customization.dashboard.bannerText
-        ? $currentOrg.customization.dashboard.bannerText
-        : $t('dashboard.lms_dashboard_hero')}
-    </p>
-    <Button onclick={() => goto(resolve('/lms/mylearning', {}))}>
-      {$t('dashboard.continue_learning')}
-    </Button>
+<BlurFade delay={0} once>
+  <div
+    class="flex h-fit w-full flex-col-reverse justify-between rounded-md border px-4 py-2 md:flex-row md:items-center"
+  >
+    <div class="w-full md:w-[75%] lg:w-[80%]">
+      <p class="mb-5 w-4/6 font-normal lg:text-xl">
+        {$currentOrg.customization.dashboard.bannerText
+          ? $currentOrg.customization.dashboard.bannerText
+          : $t('dashboard.lms_dashboard_hero')}
+      </p>
+      <Button onclick={() => goto(resolve('/lms/mylearning', {}))}>
+        {$t('dashboard.continue_learning')}
+      </Button>
+    </div>
+    <img
+      src={$currentOrg.customization.dashboard.bannerImage
+        ? $currentOrg.customization.dashboard.bannerImage
+        : '/images/student-learning.svg'}
+      alt="student Learning Pictogram"
+      class="mb-3 aspect-square size-48 md:mb-0 md:block"
+    />
   </div>
-  <img
-    src={$currentOrg.customization.dashboard.bannerImage
-      ? $currentOrg.customization.dashboard.bannerImage
-      : '/images/student-learning.svg'}
-    alt="student Learning Pictogram"
-    class="mb-3 aspect-square size-48 md:mb-0 md:block"
-  />
-</div>
+</BlurFade>
 <section class="flex w-full flex-col md:gap-4 lg:flex-row">
-  <div class="mt-10 w-full lg:w-[50%] xl:mt-2">
+  <BlurFade delay={0.1} once class="mt-10 w-full lg:w-[50%] xl:mt-2">
     <Learning />
-  </div>
-  <div class="mt-10 w-full lg:w-[50%] xl:mt-2">
+  </BlurFade>
+  <BlurFade delay={0.2} once class="mt-10 w-full lg:w-[50%] xl:mt-2">
     <p class="pb-3 text-base font-semibold text-[#040F2D] dark:text-white">
       {$t('dashboard.your_progress')}
     </p>
@@ -88,5 +93,5 @@
         </h1>
       </div>
     </div>
-  </div>
+  </BlurFade>
 </section>
diff --git a/apps/dashboard/src/lib/features/lms/utils/types.ts b/apps/dashboard/src/lib/features/lms/utils/types.ts
new file mode 100644
index 00000000..f28100b3
--- /dev/null
+++ b/apps/dashboard/src/lib/features/lms/utils/types.ts
@@ -0,0 +1,5 @@
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+
+export type GetPendingOrgInviteRequest = (typeof classroomio.invite.organization)['pending']['$get'];
+type GetPendingOrgInviteResponse = Extract<InferResponseType<GetPendingOrgInviteRequest>, { success: true }>;
+export type PendingOrgInvite = NonNullable<GetPendingOrgInviteResponse['data']>;
diff --git a/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts b/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
index cdd089cf..ea304990 100644
--- a/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
+++ b/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
@@ -1,7 +1,7 @@
 import { t } from '$lib/utils/functions/translations';
 import type { OrganizationAsset } from './types';
 
-type LessonVideoType = 'upload' | 'youtube' | 'generic';
+type LessonVideoType = 'upload' | 'youtube' | 'generic' | 'google_drive';
 
 export function formatBytes(bytes: number | null | undefined): string {
   if (bytes == null || Number.isNaN(bytes) || bytes < 0) {
@@ -21,6 +21,7 @@ export function formatBytes(bytes: number | null | undefined): string {
 
 export function mapAssetProviderToLessonVideoType(provider: string): LessonVideoType {
   if (provider === 'youtube') return 'youtube';
+  if (provider === 'google_drive') return 'google_drive';
   if (provider === 'generic' || provider === 'external_url') return 'generic';
   return 'upload';
 }
diff --git a/apps/dashboard/src/lib/features/org/api/dash-stats.svelte.ts b/apps/dashboard/src/lib/features/org/api/dash-stats.svelte.ts
index 70fb37e7..a2486e56 100644
--- a/apps/dashboard/src/lib/features/org/api/dash-stats.svelte.ts
+++ b/apps/dashboard/src/lib/features/org/api/dash-stats.svelte.ts
@@ -7,9 +7,9 @@ import type { DashStatsSuccess } from '$features/org/utils/types';
  */
 class DashStatApi extends BaseApi {
   stats = $state<DashStatsSuccess['data']>({
-    enrollments: [],
+    recentCertifications: [],
     numberOfCourses: 0,
-    revenue: 0,
+    totalCertificates: 0,
     totalStudents: 0,
     topCourses: []
   });
@@ -18,7 +18,7 @@ class DashStatApi extends BaseApi {
    * Fetches dashboard statistics for an organization
    * @param orgId Optional organization ID
    * @param siteName Optional site name
-   * @returns Organization analytics data (enrollments, courses, revenue, students, top courses)
+   * @returns Organization analytics data (certifications, courses, students, top courses)
    */
   async fetchOrgStats({ orgId, siteName }: { orgId?: string; siteName?: string }) {
     await this.execute<typeof classroomio.dash.stats.$get>({
diff --git a/apps/dashboard/src/lib/features/org/api/org-plan.server.ts b/apps/dashboard/src/lib/features/org/api/org-plan.server.ts
index 04ceb290..50d7fc9f 100644
--- a/apps/dashboard/src/lib/features/org/api/org-plan.server.ts
+++ b/apps/dashboard/src/lib/features/org/api/org-plan.server.ts
@@ -1,7 +1,14 @@
 import type { TCancelOrgPlan, TCreateOrgPlan, TUpdateOrgPlan } from '@cio/utils/validation/organization';
 
-import { classroomio } from '$lib/utils/services/api';
-import { getApiKeyHeaders } from '$lib/utils/services/api/server';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+
+type CreateOrgPlanRequest = typeof classroomio.organization.plan.$post;
+type CreateOrgPlanSuccess = Extract<InferResponseType<CreateOrgPlanRequest>, { success: true }>;
+type UpdateOrgPlanRequest = typeof classroomio.organization.plan.$put;
+type UpdateOrgPlanSuccess = Extract<InferResponseType<UpdateOrgPlanRequest>, { success: true }>;
+type CancelOrgPlanRequest = typeof classroomio.organization.plan.cancel.$post;
+type CancelOrgPlanSuccess = Extract<InferResponseType<CancelOrgPlanRequest>, { success: true }>;
 
 /**
  * Server-side API methods for organization plan operations
@@ -15,20 +22,21 @@ export class OrgPlanApiServer {
    * @returns Response data or null on error
    */
   static async createOrgPlan(params: TCreateOrgPlan) {
-    try {
-      const response = await classroomio.organization.plan.$post(
+    const result = await safeServerApi<CreateOrgPlanSuccess>(() =>
+      classroomio.organization.plan.$post(
         {
           json: params
         },
         getApiKeyHeaders()
-      );
+      )
+    );
 
-      const data = await response.json();
-      return data.success ? data.data : null;
-    } catch (error) {
-      console.error('Error creating org plan (server):', error);
+    if (!result.ok) {
+      console.error('Error creating org plan (server):', result);
       return null;
     }
+
+    return result.body.data;
   }
 
   /**
@@ -37,20 +45,21 @@ export class OrgPlanApiServer {
    * @returns Response data or null on error
    */
   static async updateOrgPlan(params: TUpdateOrgPlan) {
-    try {
-      const response = await classroomio.organization.plan.$put(
+    const result = await safeServerApi<UpdateOrgPlanSuccess>(() =>
+      classroomio.organization.plan.$put(
         {
           json: params
         },
         getApiKeyHeaders()
-      );
+      )
+    );
 
-      const data = await response.json();
-      return data.success ? data.data : null;
-    } catch (error) {
-      console.error('Error updating org plan (server):', error);
+    if (!result.ok) {
+      console.error('Error updating org plan (server):', result);
       return null;
     }
+
+    return result.body.data;
   }
 
   /**
@@ -59,19 +68,20 @@ export class OrgPlanApiServer {
    * @returns Response data or null on error
    */
   static async cancelOrgPlan(params: TCancelOrgPlan) {
-    try {
-      const response = await classroomio.organization.plan.cancel.$post(
+    const result = await safeServerApi<CancelOrgPlanSuccess>(() =>
+      classroomio.organization.plan.cancel.$post(
         {
           json: params
         },
         getApiKeyHeaders()
-      );
+      )
+    );
 
-      const data = await response.json();
-      return data.success ? data.data : null;
-    } catch (error) {
-      console.error('Error canceling org plan (server):', error);
+    if (!result.ok) {
+      console.error('Error canceling org plan (server):', result);
       return null;
     }
+
+    return result.body.data;
   }
 }
diff --git a/apps/dashboard/src/lib/features/org/api/org.server.ts b/apps/dashboard/src/lib/features/org/api/org.server.ts
index aa902bd5..492c34a8 100644
--- a/apps/dashboard/src/lib/features/org/api/org.server.ts
+++ b/apps/dashboard/src/lib/features/org/api/org.server.ts
@@ -1,4 +1,6 @@
 import { classroomio } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+import type { FirstOrganizationRecord, OrganizationRecord } from '../utils/types';
 
 /**
  * Server-side organization API functions.
@@ -15,14 +17,16 @@ import { classroomio } from '$lib/utils/services/api';
  * @returns First organization or null
  */
 export async function getFirstOrg(apiKeyHeaders: { headers: Record<string, string> }) {
-  try {
-    const response = await classroomio.organization.first.$get(undefined, apiKeyHeaders);
-    const data = await response.json();
-    return data.success && data.data && data.data.length > 0 ? data.data[0] : null;
-  } catch (error) {
-    console.error('Error fetching first organization (server):', error);
+  const result = await safeServerApi<{ success: true; data: FirstOrganizationRecord[] }>(() =>
+    classroomio.organization.first.$get(undefined, apiKeyHeaders)
+  );
+
+  if (!result.ok) {
+    console.error('Error fetching first organization (server):', result);
     return null;
   }
+
+  return result.body.data.length > 0 ? result.body.data[0] : null;
 }
 
 /**
@@ -32,20 +36,21 @@ export async function getFirstOrg(apiKeyHeaders: { headers: Record<string, strin
  * @returns Organization or null
  */
 export async function getOrgBySiteName(siteName: string, apiKeyHeaders: { headers: Record<string, string> }) {
-  try {
-    const response = await classroomio.organization.$get(
+  const result = await safeServerApi<{ success: true; data: OrganizationRecord[] }>(() =>
+    classroomio.organization.$get(
       {
         query: { siteName }
       },
       apiKeyHeaders
-    );
+    )
+  );
 
-    const data = await response.json();
-    return data.success && data.data && data.data.length > 0 ? data.data[0] : null;
-  } catch (error) {
-    console.error('Error fetching organization by siteName (server):', error);
+  if (!result.ok) {
+    console.error('Error fetching organization by siteName (server):', result);
     return null;
   }
+
+  return result.body.data.length > 0 ? result.body.data[0] : null;
 }
 
 /**
@@ -60,8 +65,8 @@ export async function getOrgsByCustomDomain(
   isCustomDomainVerified: boolean,
   apiKeyHeaders: { headers: Record<string, string> }
 ) {
-  try {
-    const response = await classroomio.organization.$get(
+  const result = await safeServerApi<{ success: true; data: OrganizationRecord[] }>(() =>
+    classroomio.organization.$get(
       {
         query: {
           customDomain,
@@ -69,12 +74,13 @@ export async function getOrgsByCustomDomain(
         }
       },
       apiKeyHeaders
-    );
+    )
+  );
 
-    const data = await response.json();
-    return data.success && data.data ? data.data : [];
-  } catch (error) {
-    console.error('Error fetching organizations by custom domain (server):', error);
+  if (!result.ok) {
+    console.error('Error fetching organizations by custom domain (server):', result);
     return [];
   }
+
+  return result.body.data;
 }
diff --git a/apps/dashboard/src/lib/features/org/api/org.svelte.ts b/apps/dashboard/src/lib/features/org/api/org.svelte.ts
index 7945b790..2878123e 100644
--- a/apps/dashboard/src/lib/features/org/api/org.svelte.ts
+++ b/apps/dashboard/src/lib/features/org/api/org.svelte.ts
@@ -65,6 +65,7 @@ class OrgApi extends BaseApiWithErrors {
   audience = $state<OrganizationAudience>([]);
   audiencePagination = $state<OrganizationAudiencePagination | null>(null);
   publicCourses: OrgPublicCourses = $state([]);
+  hasMorePublicCourses = $state(false);
 
   isFetchingOrgPublicCourses = $state(false);
   private activeAudienceRequestController: AbortController | null = null;
@@ -165,7 +166,8 @@ class OrgApi extends BaseApiWithErrors {
         }),
       logContext: 'fetching public courses',
       onSuccess: (response) => {
-        this.publicCourses = response.data;
+        this.publicCourses = response.data.courses;
+        this.hasMorePublicCourses = response.data.hasMoreCourses;
       }
     });
 
diff --git a/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte b/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
index d0e1a9fe..f6bb11df 100644
--- a/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
+++ b/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
@@ -1,36 +1,19 @@
 <script lang="ts">
-  import { untrack } from 'svelte';
-  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
   import { resolve } from '$app/paths';
-  import { fade } from 'svelte/transition';
-  import MailIcon from '@lucide/svelte/icons/mail';
-  import PhoneIcon from '@lucide/svelte/icons/phone';
-  import RocketIcon from '@lucide/svelte/icons/rocket';
-  import MapPinIcon from '@lucide/svelte/icons/map-pin';
-  import TwitterIcon from '@lucide/svelte/icons/twitter';
-  import FacebookIcon from '@lucide/svelte/icons/facebook';
-  import LinkedinIcon from '@lucide/svelte/icons/linkedin';
-  import { preventDefault } from '$lib/utils/functions/svelte';
+  import type { Component } from 'svelte';
 
-  import Navigation from '$lib/components/Navigation/index.svelte';
-  import { PoweredBy } from '$features/ui';
-  import { CourseCardList, CourseCardLoader } from '$features/course/components';
-  import { landingPageSettings } from '$features/org/components/settings/landing-page-store';
-  import { CoursesEmptyIcon } from '$features/ui/icons';
-
-  import PageLoader from './page-loader.svelte';
-  import * as Accordion from '@cio/ui/base/accordion';
-  import * as Button from '@cio/ui/base/button';
-  import * as Field from '@cio/ui/base/field';
-  import { Input } from '@cio/ui/base/input';
-  import { Textarea } from '@cio/ui/base/textarea';
-  import { Empty } from '@cio/ui/custom/empty';
-  import { t } from '$lib/utils/functions/translations';
-  import type { AccountOrg } from '$features/app/types';
   import { orgApi } from '$features/org/api/org.svelte';
-  import { validateEmail } from '$lib/utils/functions/validateEmail';
-  import { orgLandingpageValidation } from '$lib/utils/functions/validator';
-  import { MediaPlayer, isYoutubeUrl } from '@cio/ui/custom/media-player';
+  import PageLoader from './page-loader.svelte';
+  import type { AccountOrg } from '$features/app/types';
+  import {
+    buildOrgLandingPageProps,
+    importThemeComponent,
+    normalizeLandingPageSettings
+  } from '$features/org/utils/landing-page';
+  import { basePath } from '$lib/utils/store/app';
+  import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';
 
   interface Props {
     orgSiteName?: string;
@@ -39,519 +22,54 @@
 
   let { orgSiteName = '', org }: Props = $props();
 
-  let email: string | undefined = $state('');
-  let isAdding = $state(false);
-  let success = $state(false);
-  let successContactSaved = $state(false);
-  let isContactSubmiting = $state(false);
-  let contact = $state({
-    name: '',
-    email: '',
-    phone: '',
-    message: ''
-  });
-  let contactError: Record<string, string> = $state({});
+  let hasLoadedCourses = $state(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let ThemeComponent = $state<Component<any> | null>(null);
 
-  async function handleSubmit() {
-    if (!email || !validateEmail(email) || !org) return;
-    isAdding = true;
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
 
-    // TODO: Implement email list submission
+  const landingPageProps = $derived(
+    buildOrgLandingPageProps(
+      org,
+      normalizeLandingPageSettings(org.landingpage),
+      orgApi.publicCourses,
+      orgApi.hasMorePublicCourses,
+      authAction
+    )
+  );
 
-    success = true;
-    setTimeout(() => {
-      isAdding = false;
-      success = false;
-      email = undefined;
-    }, 5000);
-  }
+  onMount(async () => {
+    const settings = normalizeLandingPageSettings(org.landingpage);
+    const mod = await importThemeComponent(settings.theme);
+    ThemeComponent = mod.default;
 
-  async function handleContactSubmit() {
-    isContactSubmiting = true;
-    contactError = orgLandingpageValidation(contact);
-    if (Object.keys(contactError).length) {
-      isContactSubmiting = false;
+    const siteName = orgSiteName || org.siteName;
+    if (!siteName) {
+      hasLoadedCourses = true;
       return;
     }
 
-    // Save to db
-    // TODO: Implement contact submission
-
-    isContactSubmiting = false;
-    successContactSaved = true;
-    contact = {
-      name: '',
-      email: '',
-      phone: '',
-      message: ''
-    };
-  }
-  $effect(() => {
-    if (!orgSiteName) return;
-
-    orgApi.getPublicCoursesBySiteName(orgSiteName);
-  });
-
-  // Use default data in store if user hasn't added their own content to landing page
-  function setDefault(landingpage) {
-    if (landingpage && Object.keys(landingpage).length) {
-      if (!landingpage?.header?.banner) {
-        landingpage.header.banner = $landingPageSettings.header.banner;
-      }
-
-      untrack(() => {
-        $landingPageSettings = {
-          ...landingpage
-        };
-      });
-    }
-  }
-
-  function getBgImage(settings) {
-    const defaultImg = '/images/org-landingpage-banner.jpeg';
-
-    const { show, image } = settings.header.background || {
-      show: true,
-      image: defaultImg
-    };
-
-    if (!show) {
-      return undefined;
-    }
-
-    return `url('${image || defaultImg}')`;
-  }
-
-  $effect(() => {
-    setDefault(org?.landingpage);
+    orgApi.publicCourses = [];
+    orgApi.hasMorePublicCourses = false;
+    hasLoadedCourses = false;
+    void orgApi.getPublicCoursesBySiteName(siteName).finally(() => {
+      hasLoadedCourses = true;
+    });
   });
 </script>
 
-<svelte:head>
-  <title>
-    {!org?.name ? '' : `${org.name}'s `}{$t('course.navItem.landing_page.landing_page')}
-  </title>
-  {#if $landingPageSettings.header.background?.show !== false}
-    <link
-      rel="preload"
-      as="image"
-      href={$landingPageSettings.header.background?.image || '/images/org-landingpage-banner.jpeg'}
-    />
-  {/if}
-</svelte:head>
-
-<PoweredBy />
-
-{#if !org?.landingpage}
+{#if !ThemeComponent || !hasLoadedCourses || orgApi.isFetchingOrgPublicCourses}
   <PageLoader />
 {:else}
-  <main>
-    <Navigation
-      logo={org.avatarUrl || '/logo-192.png'}
-      orgName={org.name}
-      disableSignup={org.disableSignup || (org.settings?.signup?.inviteOnly ?? false)}
-      isOrgSite={true}
-      customLinks={$landingPageSettings.customLinks}
-    />
-    <!-- Header Section -->
-    {#if $landingPageSettings.header.show}
-      <header
-        id="header"
-        class={`relative mb-10 h-screen w-full md:h-[90vh] ${
-          $landingPageSettings.header.background?.show ? 'bg-cover bg-center' : 'border-b border-gray-300'
-        }`}
-        style="background-image: {getBgImage($landingPageSettings)}"
-      >
-        <div class="absolute top-0 z-10 h-screen w-full bg-white opacity-80 md:h-[90vh]"></div>
-        {#if $landingPageSettings.header.banner.show}
-          <div class="flex items-center justify-center py-2 md:h-full">
-            <div
-              class="relative z-20 flex w-full flex-col-reverse items-center justify-center md:w-11/12 md:flex-row md:justify-between lg:w-5/6"
-            >
-              <!-- Org Description -->
-              <div class="mr-3 flex w-11/12 flex-col items-center py-10 md:w-2/5 md:items-start">
-                <p class="ui:text-primary text-2xl font-semibold capitalize">
-                  {org.name}
-                </p>
-                <h1 class="my-4 text-center text-4xl md:text-start md:text-5xl lg:text-6xl">
-                  {$landingPageSettings.header.title} <br /><span class="ui:text-primary"
-                    >{$landingPageSettings.header.titleHighlight}</span
-                  >
-                </h1>
-                <p class="text-md mb-3 text-center text-xl md:mb-5 md:text-start">
-                  {$landingPageSettings.header.subtitle}
-                </p>
-
-                <Button.Root
-                  class="mt-2 w-fit px-10 md:mt-5"
-                  onclick={() => {
-                    $landingPageSettings.header.action.redirect && goto($landingPageSettings.header.action.link);
-                  }}
-                >
-                  {$landingPageSettings.header.action.label}
-                </Button.Root>
-              </div>
-
-              <div class="flex w-5/6 md:w-1/2 md:max-w-[650px]">
-                {#if $landingPageSettings.header?.banner?.video && $landingPageSettings.header.banner.type === 'video'}
-                  <div style="width:100%; border-radius:12px">
-                    <MediaPlayer
-                      source={{
-                        type: isYoutubeUrl($landingPageSettings.header.banner.video) ? 'youtube' : 'generic',
-                        url: $landingPageSettings.header.banner.video
-                      }}
-                      options={{
-                        width: '100%',
-                        height: '400'
-                      }}
-                      class="rounded-xl"
-                    />
-                  </div>
-                {:else}
-                  <img
-                    class="rounded-md"
-                    src={$landingPageSettings.header?.banner?.image}
-                    alt="landing page banner"
-                    width="640"
-                    height="427"
-                    fetchpriority="high"
-                  />
-                {/if}
-              </div>
-            </div>
-          </div>
-        {:else}
-          <div class="relative z-20 flex h-full w-full items-center justify-center md:flex-row">
-            <div class="mx-auto flex w-11/12 max-w-[600px] flex-col items-center py-10">
-              <p class=" ui:text-primary text-2xl font-semibold capitalize">{org.name}</p>
-              <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
-                {$landingPageSettings.header.title} <br /><span class="ui:text-primary"
-                  >{$landingPageSettings.header.titleHighlight}</span
-                >
-              </h1>
-              <p class="text-md mb-6 text-center text-xl">
-                {$landingPageSettings.header.subtitle}
-              </p>
-
-              <Button.Root
-                class="mt-5 w-fit px-10"
-                onclick={() => {
-                  $landingPageSettings.header.action.redirect && goto($landingPageSettings.header.action.link);
-                }}
-              >
-                {$landingPageSettings.header.action.label}
-              </Button.Root>
-            </div>
-          </div>
-        {/if}
-      </header>
-    {/if}
-
-    <!-- Our Story section -->
-    {#if $landingPageSettings.aboutUs.show}
-      <section id="aboutus" class="m-h-[400px] mx-auto my-10 w-full max-w-6xl">
-        <div class="mx-4 flex flex-col items-center justify-evenly lg:flex-row">
-          <div class="mr-5 mb-5 max-w-[600px] lg:mb-0 lg:w-2/5">
-            <h2 class="text-4xl md:text-5xl lg:text-6xl">{$landingPageSettings.aboutUs.title}</h2>
-            <p class="mb-2">
-              {$landingPageSettings.aboutUs.content}
-            </p>
-          </div>
-
-          <div class="image">
-            <img
-              src={$landingPageSettings.aboutUs.imageUrl}
-              alt="Our Story"
-              class="max-h-[450px] rounded-2xl"
-              width="900"
-              height="562"
-              loading="lazy"
-            />
-          </div>
-        </div>
-      </section>
-    {/if}
-
-    <!-- Courses Section -->
-    {#if $landingPageSettings.courses.show}
-      <section id="courses" transition:fade class="mx-auto my-10 w-full max-w-6xl">
-        <div class="w-full">
-          <div class="mx-auto w-11/12 max-w-[500px] py-10">
-            <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
-              {$landingPageSettings.courses.title}
-              <span class="text-primary">{$landingPageSettings.courses.titleHighlight}</span>
-            </h1>
-            <p class="text-md text-center">
-              {$landingPageSettings.courses.subtitle}
-            </p>
-            <div class="mt-5 flex justify-center">
-              <Button.Root variant="link" class="w-fit px-8 py-4" onclick={() => goto(resolve('/courses', {}))}>
-                {$t('course.navItem.landing_page.view_all')}
-              </Button.Root>
-            </div>
-          </div>
-        </div>
-        {#if orgApi.isFetchingOrgPublicCourses}
-          <div class="cards-container mx-2 my-4">
-            <CourseCardLoader />
-            <CourseCardLoader />
-            <CourseCardLoader />
-          </div>
-        {:else if orgApi.publicCourses.length > 0}
-          <CourseCardList courses={orgApi.publicCourses.slice(0, 3)} isOnLandingPage={true} />
-        {:else}
-          <Empty
-            icon={CoursesEmptyIcon}
-            title={$t('course.navItem.landing_page.no_course_published')}
-            description={$t('course.navItem.landing_page.coming_your_way')}
-            variant="page"
-          />
-        {/if}
-      </section>
-    {/if}
-
-    <!-- FAQ Section -->
-    {#if $landingPageSettings.faq.show}
-      <section id="faq" transition:fade class="mx-auto my-10 w-full max-w-[700px]">
-        <div class="py-10">
-          <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
-            {$landingPageSettings.faq.title}
-          </h1>
-        </div>
-        <div class="mx-2">
-          <Accordion.Root type="single" class="w-full">
-            {#each $landingPageSettings.faq.questions as faq, index}
-              <Accordion.Item value="item-{index}">
-                <Accordion.Trigger>
-                  {faq.title}
-                </Accordion.Trigger>
-                <Accordion.Content>
-                  {faq.content}
-                </Accordion.Content>
-              </Accordion.Item>
-            {/each}
-          </Accordion.Root>
-        </div>
-      </section>
-    {/if}
-
-    <!-- Contact Section-->
-    {#if $landingPageSettings.contact.show}
-      <section id="contact" transition:fade class="ui:bg-primary-foreground my-10 w-full">
-        <div class="mx-auto w-full max-w-6xl">
-          <div class="mx-auto w-11/12 max-w-[500px] py-10">
-            <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
-              {$landingPageSettings.contact.title}
-              <span class="ui:text-primary">{$landingPageSettings.contact.titleHighlight}</span>
-            </h1>
-            <p class="text-md text-center">{$landingPageSettings.contact.subtitle}</p>
-          </div>
-          <div class="mx-auto max-w-[700px] pb-10">
-            <!-- Contact Details -->
-            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-              <div
-                class="mx-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border py-2 text-center break-all transition-all duration-500"
-              >
-                <MapPinIcon size={16} class="filled" />
-                <p class="mt-3 max-w-[200px] text-xs md:text-sm">
-                  {$landingPageSettings.contact.address}
-                </p>
-              </div>
-              <div
-                class="mx-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border py-2 text-center break-all transition-all duration-500"
-              >
-                <PhoneIcon size={16} />
-                <p class="mt-3 text-xs md:text-sm">{$landingPageSettings.contact.phone}</p>
-              </div>
-              <div
-                class="mx-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border py-2 text-center break-all transition-all duration-500"
-              >
-                <MailIcon size={16} />
-                <p class="mt-3 text-xs md:text-sm">{$landingPageSettings.contact.email}</p>
-              </div>
-            </div>
-
-            <!-- Contact Form -->
-            <div class="mt-8 rounded-lg bg-white p-7">
-              {#if successContactSaved}
-                <div class="flex w-full items-center justify-center">
-                  {$t('course.navItem.landing_page.thank_you')}
-                </div>
-              {:else}
-                <form onsubmit={preventDefault(handleContactSubmit)}>
-                  <div class="flex w-full flex-col justify-between md:flex-row">
-                    <div class="mr-5 w-full md:w-2/4">
-                      <Field.Field class="mb-5">
-                        <Field.Label class="font-bold">
-                          {$t('course.navItem.landing_page.name')}
-                        </Field.Label>
-                        <Input bind:value={contact.name} placeholder="Elon Musk" aria-invalid={!!contactError.name} />
-                        {#if contactError.name}
-                          <Field.Error>{contactError.name}</Field.Error>
-                        {/if}
-                      </Field.Field>
-                      <Field.Field class="mb-5">
-                        <Field.Label class="text-xs font-normal">
-                          {$t('course.navItem.landing_page.email')}
-                        </Field.Label>
-                        <Input
-                          bind:value={contact.email}
-                          type="email"
-                          placeholder="musk@x.com"
-                          aria-invalid={!!contactError.email}
-                        />
-                        {#if contactError.email}
-                          <Field.Error>{contactError.email}</Field.Error>
-                        {/if}
-                      </Field.Field>
-                      <Field.Field class="mb-5">
-                        <Field.Label class="text-xs font-normal">
-                          {$t('course.navItem.landing_page.phone')}
-                        </Field.Label>
-                        <Input
-                          bind:value={contact.phone}
-                          placeholder="+1194802480"
-                          aria-invalid={!!contactError.phone}
-                        />
-                        {#if contactError.phone}
-                          <Field.Error>{contactError.phone}</Field.Error>
-                        {/if}
-                      </Field.Field>
-                    </div>
-                    <div class="w-full md:w-2/4">
-                      <Field.Field>
-                        <Field.Label>
-                          {$t('course.navItem.landing_page.message')}
-                        </Field.Label>
-                        <Textarea
-                          bind:value={contact.message}
-                          rows={9}
-                          placeholder={$t('course.navItem.landing_page.your_message')}
-                          aria-invalid={!!contactError.message}
-                        />
-                        {#if contactError.message}
-                          <Field.Error>{contactError.message}</Field.Error>
-                        {/if}
-                      </Field.Field>
-                    </div>
-                  </div>
-
-                  <Button.Root class="mx-auto mt-5 w-full md:mt-0" type="submit" loading={isContactSubmiting}>
-                    <span class="text-md mr-2">{$t('course.navItem.landing_page.submit')}</span>
-                    <RocketIcon size={16} class="custom" />
-                  </Button.Root>
-                </form>
-              {/if}
-            </div>
-          </div>
-        </div>
-      </section>
-    {/if}
-
-    <!-- Waitlist Section -->
-    {#if $landingPageSettings.mailinglist.show}
-      <section id="waitlist" transition:fade class="mx-auto my-10 w-[95%] max-w-6xl">
-        <div class="ui:bg-primary gap-4 rounded-lg px-4 py-14 md:px-10 lg:flex-row lg:items-center">
-          <div class="mx-auto flex max-w-[700px] flex-col lg:flex-row lg:items-center lg:justify-between">
-            <div class="w-3/5">
-              <h1 class="mt-0 mb-5 text-4xl text-white">
-                {$landingPageSettings.mailinglist.title}
-              </h1>
-              <p class="text-md text-white">
-                {$landingPageSettings.mailinglist.subtitle}
-              </p>
-            </div>
-            <form onsubmit={preventDefault(handleSubmit)}>
-              <div class="flex max-w-60 flex-col items-center">
-                {#if success}
-                  <p class="text-white">{$t('course.navItem.landing_page.successful_sub')}</p>
-                {:else}
-                  <Input
-                    bind:value={email}
-                    type="email"
-                    placeholder={$t('course.navItem.landing_page.enter')}
-                    required={true}
-                    disabled={isAdding}
-                  />
-                  <Button.Root class="my-1 mt-2 w-full" variant="outline" type="submit" loading={isAdding}>
-                    {$landingPageSettings.mailinglist.buttonLabel}
-                  </Button.Root>
-                {/if}
-              </div>
-            </form>
-          </div>
-        </div>
-      </section>
-    {/if}
-
-    <!-- Footer Section -->
-
-    {#if $landingPageSettings.footer.show}
-      <footer
-        id="footer"
-        class="my-10 flex w-full flex-col items-center justify-center border-t border-r-0 border-b-0 border-l-0 border-gray-300 px-5 py-10 md:py-3"
-      >
-        <ul class="flex w-11/12 flex-col items-center sm:flex-row">
-          <div class="logo">
-            <a href="/" title={`Go to ${org.name} Home`} id="logo" data-hveid="8" class="flex items-center">
-              <img
-                src={org.avatarUrl || '/logo-192.png'}
-                alt={`${org.name} logo`}
-                class="mx-auto inline-block max-h-10 w-10 rounded"
-                width="40"
-                height="40"
-                loading="lazy"
-              />
-              <h3 class="ml-3 text-xl text-black">{org.name}</h3>
-            </a>
-          </div>
-
-          <span class="flex-grow"></span>
-
-          <div class="mt-5 flex gap-2 sm:mt-0">
-            {#if $landingPageSettings.footer.facebook}
-              <li>
-                <a
-                  href={$landingPageSettings.footer.facebook}
-                  target="_blank"
-                  title={$t('settings.landing_page.footer.facebook')}
-                  id="logo-fb"
-                  data-hveid="8"
-                >
-                  <FacebookIcon size={16} />
-                </a>
-              </li>
-            {/if}
-            {#if $landingPageSettings.footer.twitter}
-              <li>
-                <a
-                  href={$landingPageSettings.footer.twitter}
-                  target="_blank"
-                  title={$t('settings.landing_page.footer.twitter')}
-                  id="logo-tw"
-                  data-hveid="8"
-                >
-                  <TwitterIcon size={16} />
-                </a>
-              </li>
-            {/if}
-
-            {#if $landingPageSettings.footer.linkedin}
-              <li>
-                <a
-                  href={$landingPageSettings.footer.linkedin}
-                  target="_blank"
-                  title={$t('settings.landing_page.footer.linkedin')}
-                  id="logo-ln"
-                  data-hveid="8"
-                >
-                  <LinkedinIcon size={16} />
-                </a>
-              </li>
-            {/if}
-          </div>
-        </ul>
-      </footer>
-    {/if}
-  </main>
+  <ThemeComponent {...landingPageProps} />
 {/if}
diff --git a/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts b/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
index f0fe1f05..956b3b6c 100644
--- a/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
+++ b/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
@@ -1,116 +1,7 @@
-import type { OrgLandingPageJson } from '$lib/utils/types/org';
 import type { Writable } from 'svelte/store';
 import { writable } from 'svelte/store';
 
-export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
-  header: {
-    title: 'Web Development Courses for',
-    titleHighlight: 'Everyone',
-    subtitle: 'Practical project-based courses that are easy to understand and straight to the point',
-    action: {
-      label: 'Start learning Today',
-      link: '#contact',
-      redirect: false
-    },
-    banner: {
-      video: '',
-      image: '/images/learn-on-cio.jpg',
-      type: 'image',
-      show: true
-    },
-    background: {
-      image: '',
-      show: true
-    },
-    show: true
-  },
-  aboutUs: {
-    title: 'Our Story',
-    content:
-      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.',
-    imageUrl: '/images/riverside.jpeg',
-    show: true
-  },
-  courses: {
-    title: 'Explore our',
-    titleHighlight: 'Courses',
-    subtitle: 'Find courses you will love from best teachers all over the world🌎.',
-    show: true
-  },
-  faq: {
-    title: 'Frequently Asked Questions.',
-    questions: [
-      {
-        id: 1,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      },
-      {
-        id: 2,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      },
-      {
-        id: 3,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      }
-    ],
-    show: true
-  },
-  contact: {
-    title: 'Have you got any',
-    titleHighlight: 'Question?',
-    subtitle: 'Reach out to us with any question you might have.',
-    address: 'Ashwoodfield House Farm, Kidderminster Rd, Stourbridge, Kingswinford DY6 0AA',
-    phone: '+4407339904995',
-    email: 'help@lms.com',
-    show: true
-  },
-  mailinglist: {
-    title: 'Join our mailing list',
-    subtitle:
-      'We are constantly releasing new courses and sharing them with our email list. Subscribe to get notified once we release a new course',
-    buttonLabel: 'Subscribe',
-    show: true
-  },
-  customLinks: {
-    show: true,
-    links: [
-      {
-        id: 1,
-        label: 'About Us',
-        url: '#aboutus',
-        openInNewTab: false
-      },
-      {
-        id: 2,
-        label: 'Courses',
-        url: '/courses',
-        openInNewTab: false
-      },
-      {
-        id: 3,
-        label: 'FAQ',
-        url: '#faq',
-        openInNewTab: false
-      },
-      {
-        id: 4,
-        label: 'Contact Us',
-        url: '#contact',
-        openInNewTab: false
-      }
-    ]
-  },
-  footer: {
-    facebook: '#',
-    instagram: '#',
-    twitter: '#',
-    linkedin: '#',
-    show: true
-  }
-});
+import type { OrgLandingPageJson } from '$lib/utils/types/org';
+import { createDefaultLandingPageSettings } from '$features/org/utils/landing-page';
+
+export const landingPageSettings: Writable<OrgLandingPageJson> = writable(createDefaultLandingPageSettings());
diff --git a/apps/dashboard/src/lib/features/org/utils/landing-page-components.ts b/apps/dashboard/src/lib/features/org/utils/landing-page-components.ts
new file mode 100644
index 00000000..9eeddab8
--- /dev/null
+++ b/apps/dashboard/src/lib/features/org/utils/landing-page-components.ts
@@ -0,0 +1,29 @@
+import {
+  BoldLandingHero,
+  BoldLandingNav,
+  BoldLandingPage,
+  ClassicLandingHero,
+  ClassicLandingNav,
+  ClassicLandingPage,
+  MinimalLandingHero,
+  MinimalLandingNav,
+  MinimalLandingPage
+} from '@cio/ui/custom/org-landing-page';
+
+export const landingPageThemeComponents = {
+  minimal: MinimalLandingPage,
+  bold: BoldLandingPage,
+  classic: ClassicLandingPage
+} as const;
+
+export const landingPageNavComponents = {
+  minimal: MinimalLandingNav,
+  bold: BoldLandingNav,
+  classic: ClassicLandingNav
+} as const;
+
+export const landingPageHeroComponents = {
+  minimal: MinimalLandingHero,
+  bold: BoldLandingHero,
+  classic: ClassicLandingHero
+} as const;
diff --git a/apps/dashboard/src/lib/features/org/utils/landing-page.ts b/apps/dashboard/src/lib/features/org/utils/landing-page.ts
new file mode 100644
index 00000000..299e2bc6
--- /dev/null
+++ b/apps/dashboard/src/lib/features/org/utils/landing-page.ts
@@ -0,0 +1,397 @@
+import type { AccountOrg } from '$features/app/types';
+import type {
+  OrgLandingPageCallout,
+  OrgLandingPageFooterLink,
+  OrgLandingPageHero,
+  OrgLandingPageJson,
+  OrgLandingPageNavItem,
+  OrgLandingPageTheme
+} from '$lib/utils/types/org';
+import type { OrgPublicCourses } from './types';
+import type { OrgLandingPageProps } from '@cio/ui/custom/org-landing-page/types';
+
+export const landingPageThemes = ['minimal', 'bold', 'classic'] as const satisfies OrgLandingPageTheme[];
+
+export const defaultLandingPageHero: OrgLandingPageHero = {
+  heading: 'Become a Certified AI Engineer',
+  subheading: 'Master the skills, earn your certification, and prove your expertise with hands-on training programs.',
+  primaryAction: {
+    label: 'Get Started',
+    href: '#courses'
+  },
+  secondaryAction: {
+    label: 'View Programs',
+    href: '/courses'
+  },
+  image: '/images/learn-on-cio.jpg'
+};
+
+export const defaultLandingPageSettings: OrgLandingPageJson = {
+  theme: 'minimal',
+  hero: defaultLandingPageHero,
+  navItems: [
+    { label: 'Programs', href: '#courses' },
+    { label: 'Contact', href: '#contact' }
+  ],
+  footerLinks: [
+    { label: 'Terms', href: '/terms' },
+    { label: 'Privacy', href: '/privacy' },
+    { label: 'Contact', href: '#contact' }
+  ],
+  footerText: ''
+};
+
+export function createDefaultLandingPageSettings(): OrgLandingPageJson {
+  return structuredClone(defaultLandingPageSettings);
+}
+
+type LegacyLandingPageJson = {
+  header?: {
+    title?: string;
+    titleHighlight?: string;
+    subtitle?: string;
+    action?: {
+      label?: string;
+      link?: string;
+    };
+  };
+  customLinks?: {
+    links?: Array<{
+      label?: string;
+      url?: string;
+      openInNewTab?: boolean;
+    }>;
+  };
+  footer?: {
+    facebook?: string;
+    instagram?: string;
+    twitter?: string;
+    linkedin?: string;
+  };
+  hero?: OrgLandingPageHero;
+  navItems?: OrgLandingPageNavItem[];
+  footerLinks?: OrgLandingPageFooterLink[];
+  footerText?: string;
+  theme?: OrgLandingPageTheme;
+  embed?: {
+    title?: string;
+    description?: string;
+    code?: string;
+    secondaryAction?: {
+      label?: string;
+      href?: string;
+    };
+    src?: string;
+    height?: number;
+    allowFullscreen?: boolean;
+    sandbox?: string;
+  };
+  callout?: {
+    heading?: string;
+    description?: string;
+    action?: {
+      label?: string;
+      href?: string;
+    };
+  };
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function normalizeText(value: unknown, fallback = '') {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : fallback;
+}
+
+function normalizeHref(value: unknown, fallback = '#') {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : fallback;
+}
+
+function normalizeEmbedCode(embed: {
+  title?: unknown;
+  description?: unknown;
+  code?: unknown;
+  src?: unknown;
+  height?: unknown;
+  allowFullscreen?: unknown;
+  sandbox?: unknown;
+}) {
+  if (typeof embed.code === 'string' && embed.code.trim().length > 0) {
+    return embed.code.trim();
+  }
+
+  const src = normalizeHref(embed.src, '');
+  if (!src) {
+    return '';
+  }
+
+  const height = typeof embed.height === 'number' && Number.isFinite(embed.height) ? embed.height : 560;
+  const allowFullscreen = embed.allowFullscreen !== false;
+  const title = normalizeText(embed.title, 'Section title');
+  const sandbox =
+    typeof embed.sandbox === 'string' && embed.sandbox.trim().length > 0 ? ` sandbox="${embed.sandbox.trim()}"` : '';
+
+  return `<iframe title="${title}" src="${src}" width="100%" height="${height}" loading="lazy" referrerpolicy="no-referrer"${sandbox}${
+    allowFullscreen ? ' allowfullscreen' : ''
+  }></iframe>`;
+}
+
+function normalizeCallout(callout: NonNullable<LegacyLandingPageJson['callout']>): OrgLandingPageCallout | undefined {
+  const heading = normalizeText(callout.heading, '');
+  if (!heading) return undefined;
+
+  return {
+    heading,
+    description: normalizeText(callout.description, ''),
+    action: {
+      label: normalizeText(callout.action?.label, 'Get Started'),
+      href: normalizeHref(callout.action?.href, '#')
+    }
+  };
+}
+
+export function normalizeLandingPageSettings(value: unknown): OrgLandingPageJson {
+  const defaultSettings = createDefaultLandingPageSettings();
+
+  if (!isRecord(value)) {
+    return defaultSettings;
+  }
+
+  const landingPage = value as LegacyLandingPageJson;
+  if (landingPage.hero && landingPage.navItems && landingPage.footerLinks && landingPage.theme) {
+    return {
+      theme: landingPage.theme,
+      hero: {
+        heading: normalizeText(landingPage.hero.heading, defaultLandingPageHero.heading),
+        subheading: normalizeText(landingPage.hero.subheading, defaultLandingPageHero.subheading),
+        primaryAction: {
+          label: normalizeText(landingPage.hero.primaryAction?.label, defaultLandingPageHero.primaryAction.label),
+          href: normalizeHref(landingPage.hero.primaryAction?.href, defaultLandingPageHero.primaryAction.href)
+        },
+        secondaryAction: landingPage.hero.secondaryAction
+          ? {
+              label: normalizeText(
+                landingPage.hero.secondaryAction.label,
+                defaultLandingPageHero.secondaryAction?.label ?? ''
+              ),
+              href: normalizeHref(
+                landingPage.hero.secondaryAction.href,
+                defaultLandingPageHero.secondaryAction?.href ?? '#'
+              )
+            }
+          : undefined,
+        image: normalizeText(landingPage.hero.image, '')
+      },
+      navItems: landingPage.navItems
+        .map((navItem) => ({
+          label: normalizeText(navItem.label, ''),
+          href: normalizeHref(navItem.href, '#')
+        }))
+        .filter((navItem) => navItem.label.length > 0),
+      footerLinks: landingPage.footerLinks
+        .map((footerLink) => ({
+          label: normalizeText(footerLink.label, ''),
+          href: normalizeHref(footerLink.href, '#')
+        }))
+        .filter((footerLink) => footerLink.label.length > 0),
+      footerText: normalizeText(landingPage.footerText, defaultSettings.footerText),
+      embed: landingPage.embed
+        ? {
+            title: normalizeText(landingPage.embed.title, 'Section title'),
+            description: normalizeText(landingPage.embed.description, ''),
+            code: normalizeEmbedCode(landingPage.embed),
+            secondaryAction: landingPage.embed.secondaryAction
+              ? {
+                  label: normalizeText(landingPage.embed.secondaryAction.label, ''),
+                  href: normalizeHref(landingPage.embed.secondaryAction.href, '#')
+                }
+              : undefined
+          }
+        : undefined,
+      callout: landingPage.callout ? normalizeCallout(landingPage.callout) : undefined
+    };
+  }
+
+  if (landingPage.hero) {
+    return {
+      theme: landingPage.theme ?? 'minimal',
+      hero: {
+        heading: normalizeText(landingPage.hero.heading, defaultLandingPageHero.heading),
+        subheading: normalizeText(landingPage.hero.subheading, defaultLandingPageHero.subheading),
+        primaryAction: {
+          label: normalizeText(landingPage.hero.primaryAction?.label, defaultLandingPageHero.primaryAction.label),
+          href: normalizeHref(landingPage.hero.primaryAction?.href, defaultLandingPageHero.primaryAction.href)
+        },
+        secondaryAction: landingPage.hero.secondaryAction
+          ? {
+              label: normalizeText(
+                landingPage.hero.secondaryAction.label,
+                defaultLandingPageHero.secondaryAction?.label ?? ''
+              ),
+              href: normalizeHref(
+                landingPage.hero.secondaryAction.href,
+                defaultLandingPageHero.secondaryAction?.href ?? '#'
+              )
+            }
+          : defaultLandingPageHero.secondaryAction,
+        image: normalizeText(landingPage.hero.image, defaultLandingPageHero.image ?? '')
+      },
+      navItems: landingPage.navItems?.length
+        ? landingPage.navItems
+            .map((navItem) => ({
+              label: normalizeText(navItem.label, ''),
+              href: normalizeHref(navItem.href, '#')
+            }))
+            .filter((navItem) => navItem.label.length > 0)
+        : [...defaultSettings.navItems],
+      footerLinks: landingPage.footerLinks?.length
+        ? landingPage.footerLinks
+            .map((footerLink) => ({
+              label: normalizeText(footerLink.label, ''),
+              href: normalizeHref(footerLink.href, '#')
+            }))
+            .filter((footerLink) => footerLink.label.length > 0)
+        : [...defaultSettings.footerLinks],
+      footerText: normalizeText(landingPage.footerText, defaultSettings.footerText),
+      embed: landingPage.embed
+        ? {
+            title: normalizeText(landingPage.embed.title, 'Section title'),
+            description: normalizeText(landingPage.embed.description, ''),
+            code: normalizeEmbedCode(landingPage.embed)
+          }
+        : undefined,
+      callout: landingPage.callout ? normalizeCallout(landingPage.callout) : undefined
+    };
+  }
+
+  const fallbackHeading = normalizeText(landingPage.header?.title, defaultLandingPageHero.heading);
+  const fallbackHighlight = normalizeText(landingPage.header?.titleHighlight, '');
+  const fallbackSubheading = normalizeText(landingPage.header?.subtitle, defaultLandingPageHero.subheading);
+
+  return {
+    ...defaultSettings,
+    hero: {
+      heading: fallbackHighlight ? `${fallbackHeading} ${fallbackHighlight}` : fallbackHeading,
+      subheading: fallbackSubheading,
+      primaryAction: {
+        label: normalizeText(landingPage.header?.action?.label, defaultLandingPageHero.primaryAction.label),
+        href: normalizeHref(landingPage.header?.action?.link, defaultLandingPageHero.primaryAction.href)
+      },
+      secondaryAction: defaultLandingPageHero.secondaryAction,
+      image: defaultLandingPageHero.image
+    },
+    navItems: landingPage.customLinks?.links?.length
+      ? landingPage.customLinks.links
+          .map((link) => ({
+            label: normalizeText(link.label, ''),
+            href: normalizeHref(link.url, '#')
+          }))
+          .filter((navItem) => navItem.label.length > 0)
+      : [...defaultSettings.navItems],
+    footerLinks: [
+      landingPage.footer?.facebook ? { label: 'Facebook', href: landingPage.footer.facebook } : null,
+      landingPage.footer?.instagram ? { label: 'Instagram', href: landingPage.footer.instagram } : null,
+      landingPage.footer?.twitter ? { label: 'Twitter', href: landingPage.footer.twitter } : null,
+      landingPage.footer?.linkedin ? { label: 'LinkedIn', href: landingPage.footer.linkedin } : null
+    ].filter(Boolean) as OrgLandingPageFooterLink[],
+    footerText: defaultSettings.footerText,
+    embed: landingPage.embed
+      ? {
+          title: normalizeText(landingPage.embed.title, 'Section title'),
+          description: normalizeText(landingPage.embed.description, ''),
+          code: normalizeEmbedCode(landingPage.embed),
+          secondaryAction: landingPage.embed.secondaryAction
+            ? {
+                label: normalizeText(landingPage.embed.secondaryAction.label, ''),
+                href: normalizeHref(landingPage.embed.secondaryAction.href, '#')
+              }
+            : undefined
+        }
+      : undefined
+  };
+}
+
+export function mapPublicCoursesToLandingPageCourses(courses: OrgPublicCourses): OrgLandingPageProps['courses'] {
+  return courses.map((course) => {
+    const courseRecord = course as Record<string, unknown>;
+    const metadataRecord = isRecord(courseRecord.metadata) ? courseRecord.metadata : undefined;
+    const tags = Array.isArray(courseRecord.tags)
+      ? (courseRecord.tags as OrgLandingPageProps['courses'][number]['tags'])
+      : undefined;
+    const courseSlug =
+      typeof courseRecord.slug === 'string' && courseRecord.slug.length > 0 ? courseRecord.slug : course.id;
+    const courseCost = typeof courseRecord.cost === 'number' ? courseRecord.cost : undefined;
+    const courseCurrency = typeof courseRecord.currency === 'string' ? courseRecord.currency : undefined;
+    const lessonCount = typeof courseRecord.lessonCount === 'number' ? courseRecord.lessonCount : undefined;
+    const exerciseCount = typeof courseRecord.exerciseCount === 'number' ? courseRecord.exerciseCount : undefined;
+    const totalStudents = typeof courseRecord.totalStudents === 'number' ? courseRecord.totalStudents : undefined;
+    const image = typeof courseRecord.image === 'string' ? courseRecord.image : undefined;
+    const logo = typeof courseRecord.logo === 'string' ? courseRecord.logo : undefined;
+    const price = typeof courseRecord.price === 'string' ? courseRecord.price : undefined;
+    const duration = typeof courseRecord.duration === 'string' ? courseRecord.duration : undefined;
+    const level = typeof courseRecord.level === 'string' ? courseRecord.level : undefined;
+    const description = typeof courseRecord.description === 'string' ? courseRecord.description : '';
+    const type = typeof courseRecord.type === 'string' ? courseRecord.type : undefined;
+    const isPublished = typeof courseRecord.isPublished === 'boolean' ? courseRecord.isPublished : true;
+
+    return {
+      id: course.id,
+      slug: typeof courseRecord.slug === 'string' ? courseRecord.slug : undefined,
+      logo: logo ?? null,
+      title: typeof courseRecord.title === 'string' ? courseRecord.title : '',
+      description,
+      type,
+      isPublished,
+      cost: courseCost,
+      currency: courseCurrency,
+      lessonCount,
+      exerciseCount,
+      totalStudents,
+      metadata: metadataRecord
+        ? {
+            discount: typeof metadataRecord.discount === 'number' ? metadataRecord.discount : undefined,
+            showDiscount: typeof metadataRecord.showDiscount === 'boolean' ? metadataRecord.showDiscount : undefined
+          }
+        : undefined,
+      tags,
+      image,
+      link: `/course/${courseSlug}`,
+      price,
+      duration,
+      level
+    };
+  });
+}
+
+export function buildOrgLandingPageProps(
+  org: AccountOrg,
+  landingpage: unknown,
+  courses: OrgPublicCourses,
+  hasMoreCourses = false,
+  authAction?: OrgLandingPageProps['authAction']
+): OrgLandingPageProps {
+  const normalizedLandingPage = normalizeLandingPageSettings(landingpage);
+
+  return {
+    orgName: org.name,
+    logoUrl: org.avatarUrl || undefined,
+    authAction,
+    ...normalizedLandingPage,
+    courses: mapPublicCoursesToLandingPageCourses(courses),
+    hasMoreCourses
+  };
+}
+
+export type LandingPageThemeKey = (typeof landingPageThemes)[number];
+
+export function importThemeComponent(theme: LandingPageThemeKey) {
+  switch (theme) {
+    case 'bold':
+      return import('@cio/ui/custom/org-landing-page/bold.svelte');
+    case 'classic':
+      return import('@cio/ui/custom/org-landing-page/classic.svelte');
+    default:
+      return import('@cio/ui/custom/org-landing-page/minimal.svelte');
+  }
+}
diff --git a/apps/dashboard/src/lib/features/org/utils/types.ts b/apps/dashboard/src/lib/features/org/utils/types.ts
index d26f2088..e56cafed 100644
--- a/apps/dashboard/src/lib/features/org/utils/types.ts
+++ b/apps/dashboard/src/lib/features/org/utils/types.ts
@@ -1,5 +1,15 @@
 import { classroomio, type InferRequestType, type InferResponseType } from '$lib/utils/services/api';
 
+export type GetOrganizationRequest = typeof classroomio.organization.$get;
+export type GetOrganizationResponse = InferResponseType<GetOrganizationRequest> | null;
+export type GetOrganizationSuccess = Extract<InferResponseType<GetOrganizationRequest>, { success: true }>;
+export type OrganizationRecord = GetOrganizationSuccess['data'][number];
+
+export type GetFirstOrganizationRequest = typeof classroomio.organization.first.$get;
+export type GetFirstOrganizationResponse = InferResponseType<GetFirstOrganizationRequest> | null;
+export type GetFirstOrganizationSuccess = Extract<InferResponseType<GetFirstOrganizationRequest>, { success: true }>;
+export type FirstOrganizationRecord = GetFirstOrganizationSuccess['data'][number];
+
 // Team member types
 export type GetTeamRequest = (typeof classroomio.organization)['team']['$get'];
 export type OrganizationTeamResponse = InferResponseType<GetTeamRequest> | null;
@@ -39,7 +49,8 @@ export type OrganizationAudienceMember = OrganizationAudience[number];
 export type GetOrgPublicCoursesRequest = typeof classroomio.organization.courses.public.$get;
 export type OrgPublicCoursesResponse = InferResponseType<GetOrgPublicCoursesRequest> | null;
 export type OrgPublicCoursesSuccess = Extract<InferResponseType<GetOrgPublicCoursesRequest>, { success: true }>;
-export type OrgPublicCourses = OrgPublicCoursesSuccess['data'];
+export type OrgPublicCoursesData = OrgPublicCoursesSuccess['data'];
+export type OrgPublicCourses = OrgPublicCoursesData['courses'];
 
 // dashboard analytics types
 export type GetDashStatsRequest = typeof classroomio.dash.stats.$get;
diff --git a/apps/dashboard/src/lib/features/people/components/bulk-email-section.svelte b/apps/dashboard/src/lib/features/people/components/bulk-email-section.svelte
new file mode 100644
index 00000000..ff7805d8
--- /dev/null
+++ b/apps/dashboard/src/lib/features/people/components/bulk-email-section.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import { TextareaField } from '@cio/ui/custom/textarea-field';
+  import { CheckboxField } from '@cio/ui/custom/checkbox-field';
+  import { t } from '$lib/utils/functions/translations';
+  import { snackbar } from '$features/ui/snackbar/store';
+
+  interface Props {
+    onInvite: (recipientCsv: string, sendEmail: boolean) => void | Promise<void>;
+    titleKey?: string;
+    descriptionKey?: string;
+    submitKey?: string;
+    noEmailsKey?: string;
+  }
+
+  let {
+    onInvite,
+    titleKey = 'course.navItem.people.invite_modal.invite_new_students_title',
+    descriptionKey = 'course.navItem.people.invite_modal.invite_new_students_description',
+    submitKey = 'course.navItem.people.invite_modal.invite_new_students',
+    noEmailsKey = 'audience.import.snackbar_no_emails'
+  }: Props = $props();
+
+  let recipientCsv = $state('');
+  let sendInviteEmails = $state(true);
+  let isSubmitting = $state(false);
+
+  async function inviteStudents() {
+    if (!recipientCsv.trim()) {
+      snackbar.error(noEmailsKey);
+      return;
+    }
+
+    isSubmitting = true;
+
+    try {
+      await onInvite(recipientCsv, sendInviteEmails);
+      recipientCsv = '';
+    } finally {
+      isSubmitting = false;
+    }
+  }
+</script>
+
+<div class="rounded-md border p-4">
+  <p class="mb-2 text-base font-semibold">{$t(titleKey)}</p>
+  <p class="ui:text-muted-foreground mb-2 text-sm">
+    {$t(descriptionKey)}
+  </p>
+  <TextareaField
+    label={$t('audience.import.emails_label')}
+    bind:value={recipientCsv}
+    rows={4}
+    className="w-full"
+    placeholder={$t('audience.import.emails_placeholder')}
+  />
+  <CheckboxField
+    className="mt-2"
+    name="send-invite-emails"
+    label={$t('audience.import.send_email')}
+    bind:checked={sendInviteEmails}
+  />
+  <div class="mt-3">
+    <Button variant="secondary" onclick={inviteStudents} loading={isSubmitting}>
+      {$t(submitKey)}
+    </Button>
+  </div>
+</div>
diff --git a/apps/dashboard/src/lib/features/people/components/existing-students-section.svelte b/apps/dashboard/src/lib/features/people/components/existing-students-section.svelte
new file mode 100644
index 00000000..dc25a1bc
--- /dev/null
+++ b/apps/dashboard/src/lib/features/people/components/existing-students-section.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import { Button } from '@cio/ui/base/button';
+  import { CheckboxField } from '@cio/ui/custom/checkbox-field';
+  import { MultiSelectList } from '@cio/ui/custom/multi-select-list';
+  import { t } from '$lib/utils/functions/translations';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import type { OrgStudent } from '../utils/types';
+
+  interface Props {
+    students: OrgStudent[];
+    isLoading?: boolean;
+    onSearchValueChange: (value: string) => void | Promise<void>;
+    onAssign: (profileIds: string[], sendEmail: boolean) => void | Promise<void>;
+    headingKey?: string;
+    emptyMatchingKey?: string;
+    emptyDefaultKey?: string;
+    searchPlaceholderKey?: string;
+    notifyLabelKey?: string;
+    submitKey?: string;
+    selectAtLeastOneKey?: string;
+  }
+
+  let {
+    students,
+    isLoading = false,
+    onSearchValueChange,
+    onAssign,
+    headingKey = 'course.navItem.people.invite_modal.existing_students_title',
+    emptyMatchingKey = 'course.navItem.people.invite_modal.no_matching_existing_students',
+    emptyDefaultKey = 'course.navItem.people.invite_modal.no_existing_students',
+    searchPlaceholderKey = 'course.navItem.people.invite_modal.existing_students_search',
+    notifyLabelKey = 'course.navItem.people.invite_modal.notify_existing_students',
+    submitKey = 'course.navItem.people.invite_modal.grant_access',
+    selectAtLeastOneKey = 'course.navItem.people.invite_modal.select_at_least_one_student'
+  }: Props = $props();
+
+  let searchValue = $state('');
+  let sendEmail = $state(true);
+  let isSubmitting = $state(false);
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const SEARCH_DEBOUNCE_MS = 350;
+
+  const selectedProfileIds = new SvelteSet<string>();
+  const sortedStudents = $derived.by(() =>
+    [...students].sort((a, b) =>
+      (a.name || a.email || '').localeCompare(b.name || b.email || '', undefined, { sensitivity: 'base' })
+    )
+  );
+  const selectedCount = $derived(selectedProfileIds.size);
+  const emptyMessage = $derived(searchValue.trim() ? $t(emptyMatchingKey) : $t(emptyDefaultKey));
+  const multiSelectItems = $derived(
+    sortedStudents
+      .filter((student): student is OrgStudent & { profileId: string } => Boolean(student.profileId))
+      .map((student) => ({
+        id: student.profileId,
+        label: student.name || student.email,
+        description: student.email
+      }))
+  );
+
+  function toggleStudent(profileId: string) {
+    if (selectedProfileIds.has(profileId)) {
+      selectedProfileIds.delete(profileId);
+      return;
+    }
+
+    selectedProfileIds.add(profileId);
+  }
+
+  function handleSearch(value: string) {
+    searchValue = value;
+
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+
+    if (!value.trim()) {
+      void onSearchValueChange(value);
+      return;
+    }
+
+    searchTimeout = setTimeout(() => {
+      void onSearchValueChange(value);
+    }, SEARCH_DEBOUNCE_MS);
+  }
+
+  async function assignStudents() {
+    if (selectedProfileIds.size === 0) {
+      snackbar.error(selectAtLeastOneKey);
+      return;
+    }
+
+    isSubmitting = true;
+
+    try {
+      await onAssign([...selectedProfileIds], sendEmail);
+      selectedProfileIds.clear();
+      searchValue = '';
+    } finally {
+      isSubmitting = false;
+    }
+  }
+
+  onDestroy(() => {
+    if (!searchTimeout) {
+      return;
+    }
+
+    clearTimeout(searchTimeout);
+  });
+</script>
+
+<div class="space-y-2">
+  <div class="max-h-72 overflow-y-auto">
+    <MultiSelectList
+      class="border-0"
+      {emptyMessage}
+      items={multiSelectItems}
+      {isLoading}
+      isSelected={(id) => selectedProfileIds.has(id)}
+      onSearchValueChange={handleSearch}
+      onToggle={(id) => toggleStudent(id)}
+      namePrefix="existing-student"
+      listClass="max-h-60"
+      searchPlaceholder={$t(searchPlaceholderKey)}
+      bind:searchValue
+    >
+      {#snippet headingSnippet()}
+        <p class="ui:text-sm ui:font-medium">
+          {$t(headingKey)} ({multiSelectItems.length})
+          {#if selectedCount > 0}
+            <span class="ui:text-muted-foreground text-xs"
+              >{$t('audience.selected_count', { count: selectedCount })}</span
+            >
+          {/if}
+        </p>
+      {/snippet}
+    </MultiSelectList>
+  </div>
+
+  <CheckboxField name="notify-existing-students" label={$t(notifyLabelKey)} bind:checked={sendEmail} />
+
+  <div class="flex justify-end">
+    <Button variant="secondary" onclick={assignStudents} loading={isSubmitting} disabled={isLoading || isSubmitting}>
+      {$t(submitKey)}
+    </Button>
+  </div>
+</div>
diff --git a/apps/dashboard/src/lib/features/people/components/index.ts b/apps/dashboard/src/lib/features/people/components/index.ts
new file mode 100644
index 00000000..d75c6cf9
--- /dev/null
+++ b/apps/dashboard/src/lib/features/people/components/index.ts
@@ -0,0 +1,3 @@
+export { default as TutorSelectSection } from './tutor-select-section.svelte';
+export { default as ExistingStudentsSection } from './existing-students-section.svelte';
+export { default as BulkEmailSection } from './bulk-email-section.svelte';
diff --git a/apps/dashboard/src/lib/features/people/components/tutor-select-section.svelte b/apps/dashboard/src/lib/features/people/components/tutor-select-section.svelte
new file mode 100644
index 00000000..9110fbbf
--- /dev/null
+++ b/apps/dashboard/src/lib/features/people/components/tutor-select-section.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x';
+  import { Badge } from '@cio/ui/base/badge';
+  import * as Select from '@cio/ui/base/select';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { Button } from '@cio/ui/base/button';
+  import { t } from '$lib/utils/functions/translations';
+  import type { Tutor } from '../utils/types';
+
+  interface Props {
+    tutors: Tutor[];
+    selectedIds: string[];
+    isLoading: boolean;
+    titleKey?: string;
+    emptySelectionKey?: string;
+    loadingKey?: string;
+    helperTextKey?: string;
+    helperLinkKey?: string;
+    helperHref?: string;
+  }
+
+  let {
+    tutors,
+    selectedIds = $bindable(),
+    isLoading,
+    titleKey = 'course.navItem.people.invite_modal.invite',
+    emptySelectionKey = 'course.navItem.people.invite_modal.select',
+    loadingKey = 'course.navItem.people.invite_modal.loading',
+    helperTextKey = 'course.navItem.people.invite_modal.to_add',
+    helperLinkKey = 'course.navItem.people.invite_modal.go_to',
+    helperHref = '#'
+  }: Props = $props();
+
+  const selectedTutors = $derived(tutors.filter((tutor) => selectedIds.includes(tutor.id.toString())));
+</script>
+
+<div class="rounded-md border p-4">
+  <p class="mb-2 text-base font-semibold">{$t(titleKey)}</p>
+
+  <Select.Root type="multiple" bind:value={selectedIds} disabled={isLoading}>
+    <Select.Trigger class="w-full">
+      <div>
+        {#if selectedTutors.length > 0}
+          <div class="flex flex-wrap gap-1">
+            {#each selectedTutors as tutor}
+              <Badge variant="secondary" class="flex items-center gap-1">
+                {tutor.text}
+                <Button
+                  type="button"
+                  size="icon-sm"
+                  variant="ghost"
+                  onclick={(event) => {
+                    event.stopPropagation();
+                    selectedIds = selectedIds.filter((id) => id !== tutor.id.toString());
+                  }}
+                  class="h-5 w-5 rounded-sm hover:bg-gray-200"
+                  aria-label={`Remove ${tutor.text}`}
+                >
+                  <XIcon size={14} />
+                </Button>
+              </Badge>
+            {/each}
+          </div>
+        {:else}
+          {$t(emptySelectionKey)}
+        {/if}
+      </div>
+    </Select.Trigger>
+    <Select.Content>
+      {#each tutors as tutor}
+        <Select.Item value={tutor.id.toString()}>
+          {tutor.text}
+        </Select.Item>
+      {/each}
+    </Select.Content>
+  </Select.Root>
+
+  {#if isLoading}
+    <div class="mt-2 flex items-center gap-2">
+      <Spinner class="h-4 w-4" />
+      <span class="text-sm">{$t(loadingKey)}</span>
+    </div>
+  {:else}
+    <span class="mt-2 block text-sm">
+      {$t(helperTextKey)}
+      <a href={helperHref} class="ui:text-primary underline">
+        {$t(helperLinkKey)}
+      </a>
+    </span>
+  {/if}
+</div>
diff --git a/apps/dashboard/src/lib/features/people/utils/types.ts b/apps/dashboard/src/lib/features/people/utils/types.ts
new file mode 100644
index 00000000..c917845c
--- /dev/null
+++ b/apps/dashboard/src/lib/features/people/utils/types.ts
@@ -0,0 +1,9 @@
+import type { OrganizationAudience, OrganizationTeamMembers } from '$features/org/utils/types';
+
+type OrgTeamMemberItem = OrganizationTeamMembers[number];
+export type Tutor = Pick<OrgTeamMemberItem, 'id' | 'profileId' | 'email'> & {
+  text: OrgTeamMemberItem['fullname'];
+};
+
+type OrgAudienceMemberItem = OrganizationAudience[number];
+export type OrgStudent = OrgAudienceMemberItem;
diff --git a/apps/dashboard/src/lib/features/program/api/index.ts b/apps/dashboard/src/lib/features/program/api/index.ts
new file mode 100644
index 00000000..3e45d676
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/api/index.ts
@@ -0,0 +1,2 @@
+export { programApi } from './program.svelte';
+export { programNewsfeedApi, type ProgramNewsfeedCommentsByFeedId } from './newsfeed.svelte';
diff --git a/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts b/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts
new file mode 100644
index 00000000..169c7928
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts
@@ -0,0 +1,344 @@
+import { BaseApiWithErrors, classroomio } from '$lib/utils/services/api';
+import type {
+  CreateProgramNewsfeedCommentRequest,
+  CreateProgramNewsfeedRequest,
+  DeleteProgramNewsfeedCommentRequest,
+  DeleteProgramNewsfeedRequest,
+  GetProgramNewsfeedCommentsRequest,
+  ListProgramNewsfeed,
+  ListProgramNewsfeedRequest,
+  ProgramNewsfeedComment,
+  ReactToProgramNewsfeedRequest,
+  UpdateProgramNewsfeedRequest
+} from '../utils/types';
+import type {
+  TCreateProgramNewsfeed,
+  TCreateProgramNewsfeedComment,
+  TUpdateProgramNewsfeed,
+  TUpdateProgramReaction
+} from '@cio/utils/validation/program';
+import {
+  ZCreateProgramNewsfeed,
+  ZCreateProgramNewsfeedComment,
+  ZUpdateProgramNewsfeed,
+  ZUpdateProgramReaction
+} from '@cio/utils/validation/program';
+import { get } from 'svelte/store';
+import { getTextFromHTML } from '$lib/utils/functions/toHtml';
+import { mapZodErrorsToTranslations } from '$lib/utils/validation';
+import { profile } from '$lib/utils/store/user';
+import { snackbar } from '$features/ui/snackbar/store';
+
+export type ProgramNewsfeedCommentsByFeedId = {
+  items: ProgramNewsfeedComment[];
+  totalCount: number;
+  hasMore: boolean;
+  isLoading: boolean;
+  cursor: string | null;
+};
+
+export class ProgramNewsfeedApi extends BaseApiWithErrors {
+  feeds = $state<ListProgramNewsfeed>([]);
+
+  commentsByFeedId = $state<Record<string, ProgramNewsfeedCommentsByFeedId>>({});
+
+  isNewFeedModalOpen = $state(false);
+
+  openNewFeedModal() {
+    this.isNewFeedModalOpen = true;
+  }
+
+  closeNewFeedModal() {
+    this.isNewFeedModalOpen = false;
+  }
+
+  async list(programId: string) {
+    await this.execute<ListProgramNewsfeedRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed.$get({
+          param: { programId },
+          query: {}
+        }),
+      logContext: 'listing program newsfeed',
+      onSuccess: (response) => {
+        this.feeds = response.data.items || [];
+        this.commentsByFeedId = {};
+
+        for (const feed of this.feeds) {
+          this.initComments(feed.id, feed.commentCount);
+        }
+      },
+      onError: () => {
+        snackbar.error('snackbar.program.error.news_feed_fail');
+      }
+    });
+  }
+
+  async create(programId: string, fields: TCreateProgramNewsfeed) {
+    this.success = false;
+
+    const validationResult = ZCreateProgramNewsfeed.safeParse({
+      ...fields,
+      content: getTextFromHTML(fields.content)
+    });
+
+    if (!validationResult.success) {
+      this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
+      return;
+    }
+
+    await this.execute<CreateProgramNewsfeedRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed.$post({
+          param: { programId },
+          json: fields
+        }),
+      logContext: 'creating program newsfeed',
+      onSuccess: (response) => {
+        const author = get(profile);
+        const newFeed = {
+          ...response.data,
+          authorProfileId: author.id,
+          authorFullname: author.fullname,
+          authorUsername: author.username,
+          authorAvatarUrl: author.avatarUrl,
+          commentCount: 0
+        };
+
+        this.feeds = [newFeed, ...this.feeds];
+        this.initComments(newFeed.id, 0);
+        snackbar.success('snackbar.program.success.post_created');
+      }
+    });
+  }
+
+  async update(programId: string, feedId: string, fields: TUpdateProgramNewsfeed) {
+    this.success = false;
+
+    const validationResult = ZUpdateProgramNewsfeed.safeParse({
+      ...fields,
+      ...(fields.content ? { content: getTextFromHTML(fields.content) } : {})
+    });
+
+    if (!validationResult.success) {
+      this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
+      return;
+    }
+
+    await this.execute<UpdateProgramNewsfeedRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].$put({
+          param: { programId, feedId },
+          json: fields
+        }),
+      logContext: 'updating program newsfeed',
+      onSuccess: (response) => {
+        const index = this.feeds.findIndex((feed) => feed.id === feedId);
+        if (index === -1) {
+          return;
+        }
+
+        const existingFeed = this.feeds[index];
+        this.feeds[index] = {
+          ...existingFeed,
+          ...response.data,
+          authorProfileId: existingFeed.authorProfileId,
+          authorFullname: existingFeed.authorFullname,
+          authorUsername: existingFeed.authorUsername,
+          authorAvatarUrl: existingFeed.authorAvatarUrl,
+          commentCount: existingFeed.commentCount
+        };
+
+        snackbar.success('snackbar.program.success.post_updated');
+      }
+    });
+  }
+
+  async react(programId: string, feedId: string, reaction: TUpdateProgramReaction['reaction']) {
+    const validationResult = ZUpdateProgramReaction.safeParse({ reaction });
+
+    if (!validationResult.success) {
+      this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
+      return;
+    }
+
+    await this.execute<ReactToProgramNewsfeedRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].react.$put({
+          param: { programId, feedId },
+          json: validationResult.data
+        }),
+      logContext: 'reacting to program newsfeed',
+      onSuccess: (response) => {
+        const index = this.feeds.findIndex((feed) => feed.id === feedId);
+        if (index === -1) {
+          return;
+        }
+
+        const existingFeed = this.feeds[index];
+        this.feeds[index] = {
+          ...existingFeed,
+          ...response.data,
+          authorProfileId: existingFeed.authorProfileId,
+          authorFullname: existingFeed.authorFullname,
+          authorUsername: existingFeed.authorUsername,
+          authorAvatarUrl: existingFeed.authorAvatarUrl,
+          commentCount: existingFeed.commentCount
+        };
+      },
+      onError: () => {
+        snackbar.error('snackbar.program.error.reaction_error');
+      }
+    });
+  }
+
+  async delete(programId: string, feedId: string) {
+    await this.execute<DeleteProgramNewsfeedRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].$delete({
+          param: { programId, feedId }
+        }),
+      logContext: 'deleting program newsfeed',
+      onSuccess: () => {
+        this.feeds = this.feeds.filter((feed) => feed.id !== feedId);
+
+        const { [feedId]: _removedComments, ...remainingComments } = this.commentsByFeedId;
+        this.commentsByFeedId = remainingComments;
+
+        snackbar.success('snackbar.program.success.feed_delete_success');
+      }
+    });
+  }
+
+  initComments(feedId: string, totalCount: number) {
+    if (!this.commentsByFeedId[feedId]) {
+      this.commentsByFeedId[feedId] = {
+        items: [],
+        totalCount,
+        hasMore: false,
+        isLoading: false,
+        cursor: null
+      };
+      return;
+    }
+
+    this.commentsByFeedId[feedId].totalCount = totalCount;
+  }
+
+  async getComments(programId: string, feedId: string) {
+    if (!this.commentsByFeedId[feedId]) {
+      this.initComments(feedId, 0);
+    }
+
+    this.commentsByFeedId[feedId].isLoading = true;
+
+    await this.execute<GetProgramNewsfeedCommentsRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].comments.$get({
+          param: { programId, feedId }
+        }),
+      logContext: 'fetching program newsfeed comments',
+      onSuccess: (response) => {
+        this.commentsByFeedId[feedId] = {
+          items: response.data,
+          totalCount: response.data.length,
+          hasMore: false,
+          isLoading: false,
+          cursor: null
+        };
+      },
+      onError: () => {
+        this.commentsByFeedId[feedId].isLoading = false;
+      }
+    });
+  }
+
+  async createComment(
+    programId: string,
+    feedId: string,
+    content: string,
+    author: { id: string; username: string; fullname: string; avatarUrl: string }
+  ) {
+    const validationResult = ZCreateProgramNewsfeedComment.safeParse({
+      content: getTextFromHTML(content)
+    } satisfies TCreateProgramNewsfeedComment);
+
+    if (!validationResult.success) {
+      this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
+      return;
+    }
+
+    await this.execute<CreateProgramNewsfeedCommentRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].comment.$post({
+          param: { programId, feedId },
+          json: { content }
+        }),
+      logContext: 'creating program newsfeed comment',
+      onSuccess: (response) => {
+        const existingCommentState = this.commentsByFeedId[feedId];
+        if (!existingCommentState) {
+          return;
+        }
+
+        const newComment = {
+          ...response.data,
+          authorProfileId: author.id,
+          authorFullname: author.fullname,
+          authorUsername: author.username,
+          authorAvatarUrl: author.avatarUrl
+        };
+
+        this.commentsByFeedId[feedId] = {
+          ...existingCommentState,
+          items: [newComment, ...existingCommentState.items],
+          totalCount: existingCommentState.totalCount + 1
+        };
+
+        const feedIndex = this.feeds.findIndex((feed) => feed.id === feedId);
+        if (feedIndex !== -1) {
+          this.feeds[feedIndex] = {
+            ...this.feeds[feedIndex],
+            commentCount: this.feeds[feedIndex].commentCount + 1
+          };
+        }
+
+        snackbar.success('snackbar.program.success.comment_added');
+      }
+    });
+  }
+
+  async deleteComment(programId: string, feedId: string, commentId: string) {
+    await this.execute<DeleteProgramNewsfeedCommentRequest>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed[':feedId'].comment[':commentId'].$delete({
+          param: { programId, feedId, commentId }
+        }),
+      logContext: 'deleting program newsfeed comment',
+      onSuccess: () => {
+        const existingCommentState = this.commentsByFeedId[feedId];
+        if (!existingCommentState) {
+          return;
+        }
+
+        this.commentsByFeedId[feedId] = {
+          ...existingCommentState,
+          items: existingCommentState.items.filter((item) => String(item.id) !== commentId),
+          totalCount: Math.max(0, existingCommentState.totalCount - 1)
+        };
+
+        const feedIndex = this.feeds.findIndex((feed) => feed.id === feedId);
+        if (feedIndex !== -1) {
+          this.feeds[feedIndex] = {
+            ...this.feeds[feedIndex],
+            commentCount: Math.max(0, this.feeds[feedIndex].commentCount - 1)
+          };
+        }
+
+        snackbar.success('snackbar.program.success.comment_deleted');
+      }
+    });
+  }
+}
+
+export const programNewsfeedApi = new ProgramNewsfeedApi();
diff --git a/apps/dashboard/src/lib/features/program/api/program.svelte.ts b/apps/dashboard/src/lib/features/program/api/program.svelte.ts
new file mode 100644
index 00000000..97a6c465
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/api/program.svelte.ts
@@ -0,0 +1,330 @@
+import { BaseApiWithErrors, classroomio } from '$lib/utils/services/api';
+import type { Program, ProgramDetail, ProgramMember, ProgramCourse, ProgramNewsfeed } from '../utils/types';
+import type {
+  TCreateProgram,
+  TUpdateProgram,
+  TAddProgramMembers,
+  TUpdateProgramMember,
+  TAddCourseToProgram
+} from '@cio/utils/validation/program';
+import { currentOrg } from '$lib/utils/store/org';
+import { get } from 'svelte/store';
+import { isStudentExperience } from '$lib/utils/store/app';
+import { snackbar } from '$features/ui/snackbar/store';
+import { t } from '$lib/utils/functions/translations';
+
+class ProgramApi extends BaseApiWithErrors {
+  programs = $state<Program[]>([]);
+  program = $state<ProgramDetail | null>(null);
+  members = $state<ProgramMember[]>([]);
+  courses = $state<ProgramCourse[]>([]);
+  newsfeed = $state<ProgramNewsfeed | null>(null);
+  isProgramShellLoading = $state(false);
+  currentProgramId = $state<string | null>(null);
+
+  loadedProgramId = $state<string | null>(null);
+  loadedMembersProgramId = $state<string | null>(null);
+  loadedCoursesProgramId = $state<string | null>(null);
+  loadedCoursesStudentExperience = $state<boolean | null>(null);
+  loadedNewsfeedProgramId = $state<string | null>(null);
+
+  syncProgramCourseCount(programId: string, courseCount: number) {
+    this.programs = this.programs.map((program) => (program.id === programId ? { ...program, courseCount } : program));
+  }
+
+  async listPrograms() {
+    const org = get(currentOrg);
+    if (!org.id) return;
+
+    await this.execute<typeof classroomio.program.$get>({
+      requestFn: () => classroomio.program.$get({ query: { organizationId: org.id } }),
+      onSuccess: (data) => {
+        this.programs = data.data;
+      },
+      logContext: 'listPrograms'
+    });
+  }
+
+  async getProgram(programId: string, force = false) {
+    if (!force && this.loadedProgramId === programId) return;
+
+    await this.execute<(typeof classroomio.program)[':programId']['$get']>({
+      requestFn: () => classroomio.program[':programId'].$get({ param: { programId } }),
+      onSuccess: (data) => {
+        this.program = data.data;
+        this.loadedProgramId = programId;
+      },
+      logContext: 'getProgram'
+    });
+  }
+
+  resetProgramShell(programId?: string) {
+    this.currentProgramId = programId ?? null;
+    this.program = null;
+    this.members = [];
+    this.courses = [];
+    this.newsfeed = null;
+    this.loadedProgramId = null;
+    this.loadedMembersProgramId = null;
+    this.loadedCoursesProgramId = null;
+    this.loadedCoursesStudentExperience = null;
+    this.loadedNewsfeedProgramId = null;
+  }
+
+  async ensureProgramShell(programId: string, force = false) {
+    const studentExperience = get(isStudentExperience);
+    const isShellReady =
+      this.loadedProgramId === programId &&
+      this.loadedMembersProgramId === programId &&
+      this.loadedCoursesProgramId === programId &&
+      this.loadedCoursesStudentExperience === studentExperience;
+
+    if (!force && isShellReady) {
+      return;
+    }
+
+    const isProgramChanged = this.currentProgramId !== programId;
+    if (force || isProgramChanged) {
+      this.resetProgramShell(programId);
+    }
+
+    this.currentProgramId = programId;
+    this.isProgramShellLoading = true;
+
+    try {
+      await Promise.all([
+        this.getProgram(programId, force),
+        this.listMembers(programId, force),
+        this.listCourses(programId, force)
+      ]);
+    } finally {
+      this.isProgramShellLoading = false;
+    }
+  }
+
+  async createProgram(data: TCreateProgram) {
+    const org = get(currentOrg);
+    if (!org.id) return;
+
+    await this.execute<typeof classroomio.program.$post>({
+      requestFn: () =>
+        classroomio.program.$post({
+          json: { ...data, organizationId: org.id }
+        }),
+      onSuccess: (res) => {
+        this.programs = [res.data, ...this.programs];
+        snackbar.success(t.get('programs.create_success') || 'Program created');
+      },
+      logContext: 'createProgram'
+    });
+  }
+
+  async updateProgram(programId: string, data: TUpdateProgram) {
+    await this.execute<(typeof classroomio.program)[':programId']['$put']>({
+      requestFn: () => classroomio.program[':programId'].$put({ param: { programId }, json: data }),
+      onSuccess: (res) => {
+        this.program = res.data;
+        this.programs = this.programs.map((p) => (p.id === programId ? { ...p, ...res.data } : p));
+        snackbar.success(t.get('programs.update_success') || 'Program updated');
+      },
+      onError: (result) => {
+        const message = typeof result === 'string' ? result : result.error;
+        snackbar.error(message || 'Failed to update program');
+      },
+      logContext: 'updateProgram'
+    });
+  }
+
+  async deleteProgram(programId: string) {
+    await this.execute<(typeof classroomio.program)[':programId']['$delete']>({
+      requestFn: () => classroomio.program[':programId'].$delete({ param: { programId } }),
+      onSuccess: () => {
+        this.programs = this.programs.filter((p) => p.id !== programId);
+        snackbar.success(t.get('programs.delete_success') || 'Program deleted');
+      },
+      logContext: 'deleteProgram'
+    });
+  }
+
+  // Members
+
+  async listMembers(programId: string, force = false) {
+    if (!force && this.loadedMembersProgramId === programId) return;
+
+    await this.execute<(typeof classroomio.program)[':programId']['members']['$get']>({
+      requestFn: () => classroomio.program[':programId'].members.$get({ param: { programId } }),
+      onSuccess: (data) => {
+        this.members = data.data;
+        this.loadedMembersProgramId = programId;
+      },
+      logContext: 'listProgramMembers'
+    });
+  }
+
+  async addMembers(programId: string, data: TAddProgramMembers) {
+    await this.execute<(typeof classroomio.program)[':programId']['members']['$post']>({
+      requestFn: () => classroomio.program[':programId'].members.$post({ param: { programId }, json: data }),
+      onSuccess: async () => {
+        await this.listMembers(programId, true);
+        snackbar.success(t.get('programs.members_added') || 'Members added');
+      },
+      logContext: 'addProgramMembers'
+    });
+  }
+
+  async updateMember(programId: string, memberId: string, data: TUpdateProgramMember) {
+    await this.execute<(typeof classroomio.program)[':programId']['members'][':memberId']['$put']>({
+      requestFn: () =>
+        classroomio.program[':programId'].members[':memberId'].$put({
+          param: { programId, memberId },
+          json: data
+        }),
+      onSuccess: (res) => {
+        this.members = this.members.map((m) => (m.id === memberId ? { ...m, ...res.data } : m));
+      },
+      logContext: 'updateProgramMember'
+    });
+  }
+
+  async removeMember(programId: string, memberId: string) {
+    await this.execute<(typeof classroomio.program)[':programId']['members'][':memberId']['$delete']>({
+      requestFn: () =>
+        classroomio.program[':programId'].members[':memberId'].$delete({
+          param: { programId, memberId }
+        }),
+      onSuccess: () => {
+        this.members = this.members.filter((m) => m.id !== memberId);
+        snackbar.success(t.get('programs.member_removed') || 'Member removed');
+      },
+      logContext: 'removeProgramMember'
+    });
+  }
+
+  // Courses
+
+  async listCourses(programId: string, force = false) {
+    const studentExperience = get(isStudentExperience);
+
+    if (
+      !force &&
+      this.loadedCoursesProgramId === programId &&
+      this.loadedCoursesStudentExperience === studentExperience
+    ) {
+      return;
+    }
+
+    await this.execute<(typeof classroomio.program)[':programId']['courses']['$get']>({
+      requestFn: () => classroomio.program[':programId'].courses.$get({ param: { programId } }),
+      onSuccess: (data) => {
+        this.courses = data.data;
+        this.syncProgramCourseCount(programId, data.data.length);
+        this.loadedCoursesProgramId = programId;
+        this.loadedCoursesStudentExperience = studentExperience;
+      },
+      logContext: 'listProgramCourses'
+    });
+  }
+
+  async addCourse(programId: string, data: TAddCourseToProgram) {
+    await this.execute<(typeof classroomio.program)[':programId']['courses']['$post']>({
+      requestFn: () => classroomio.program[':programId'].courses.$post({ param: { programId }, json: data }),
+      onSuccess: async () => {
+        await this.listCourses(programId, true);
+        this.syncProgramCourseCount(programId, this.courses.length);
+        snackbar.success(t.get('programs.course_added') || 'Course added');
+      },
+      logContext: 'addCourseToProgram'
+    });
+  }
+
+  async addCourses(programId: string, courseIds: string[]) {
+    if (courseIds.length === 0) {
+      return false;
+    }
+
+    this.isLoading = true;
+    this.error = null;
+    this.success = false;
+
+    try {
+      for (const courseId of courseIds) {
+        const response = await classroomio.program[':programId'].courses.$post({
+          param: { programId },
+          json: { courseId }
+        });
+        const result = (await response.json()) as { success?: boolean; error?: string };
+
+        if (!result.success) {
+          this.error = result.error ?? 'Failed to add course to program';
+          return false;
+        }
+      }
+
+      await this.listCourses(programId, true);
+      this.syncProgramCourseCount(programId, this.courses.length);
+
+      const successMessage =
+        courseIds.length === 1
+          ? t.get('programs.course_added') || 'Course added'
+          : t.get('programs.multiple_added') || 'Courses added';
+
+      snackbar.success(successMessage);
+      this.success = true;
+      return true;
+    } catch (error) {
+      console.error('Error in addCoursesToProgram:', error);
+      this.error = error instanceof Error ? error.message : 'Failed to add courses to program';
+      return false;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async removeCourse(programId: string, courseId: string) {
+    await this.execute<(typeof classroomio.program)[':programId']['courses'][':courseId']['$delete']>({
+      requestFn: () =>
+        classroomio.program[':programId'].courses[':courseId'].$delete({
+          param: { programId, courseId }
+        }),
+      onSuccess: () => {
+        this.courses = this.courses.filter((c) => c.courseId !== courseId);
+        this.syncProgramCourseCount(programId, this.courses.length);
+        snackbar.success(t.get('programs.course_removed') || 'Course removed');
+      },
+      logContext: 'removeCourseFromProgram'
+    });
+  }
+
+  // Newsfeed
+
+  async listNewsfeed(programId: string, force = false, cursor?: string) {
+    if (!force && this.loadedNewsfeedProgramId === programId) return;
+
+    await this.execute<(typeof classroomio.program)[':programId']['newsfeed']['$get']>({
+      requestFn: () =>
+        classroomio.program[':programId'].newsfeed.$get({
+          param: { programId },
+          query: { limit: '10', ...(cursor ? { cursor } : {}) }
+        }),
+      onSuccess: (data) => {
+        this.newsfeed = data.data;
+        this.loadedNewsfeedProgramId = programId;
+      },
+      logContext: 'listProgramNewsfeed'
+    });
+  }
+
+  // LMS — enrolled programs
+
+  async listEnrolledPrograms() {
+    await this.execute<typeof classroomio.program.enrolled.$get>({
+      requestFn: () => classroomio.program.enrolled.$get({}),
+      onSuccess: (data) => {
+        this.programs = data.data;
+      },
+      logContext: 'listEnrolledPrograms'
+    });
+  }
+}
+
+export const programApi = new ProgramApi();
diff --git a/apps/dashboard/src/lib/features/program/components/add-course-to-program-modal.svelte b/apps/dashboard/src/lib/features/program/components/add-course-to-program-modal.svelte
new file mode 100644
index 00000000..e87f68fb
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/add-course-to-program-modal.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { untrack } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
+  import { MultiSelectList } from '@cio/ui/custom/multi-select-list';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '../api';
+  import { coursesApi } from '$features/course/api';
+
+  interface Props {
+    open: boolean;
+    programId: string;
+  }
+
+  const COURSE_PAGE_SIZE = 20;
+
+  let { open = $bindable(false), programId }: Props = $props();
+
+  let searchValue = $state('');
+  let currentPage = $state(1);
+  const selectedCourseIds = new SvelteSet<string>();
+
+  const availableCourses = $derived.by(() => {
+    const existingCourseIds = new Set(programApi.courses.map((course) => course.courseId));
+
+    return coursesApi.orgCourses.filter((course) => !existingCourseIds.has(course.id));
+  });
+  const filteredCourses = $derived.by(() => {
+    const normalizedSearch = searchValue.trim().toLowerCase();
+    if (!normalizedSearch) {
+      return availableCourses;
+    }
+
+    return availableCourses.filter((course) =>
+      [course.title, course.description].some((value) => value?.toLowerCase().includes(normalizedSearch))
+    );
+  });
+  const totalPages = $derived(Math.max(1, Math.ceil(filteredCourses.length / COURSE_PAGE_SIZE)));
+  const paginatedCourses = $derived(
+    filteredCourses.slice((currentPage - 1) * COURSE_PAGE_SIZE, currentPage * COURSE_PAGE_SIZE)
+  );
+  const selectedCount = $derived(selectedCourseIds.size);
+  const showLoadingState = $derived(coursesApi.isLoading);
+  const canGoToPreviousPage = $derived(currentPage > 1);
+  const canGoToNextPage = $derived(currentPage < totalPages);
+  const emptyMessage = $derived(
+    searchValue.trim()
+      ? $t('programs.courses.no_matching_courses') || 'No courses match your search.'
+      : $t('programs.courses.no_available_courses') || 'No available courses to add.'
+  );
+  const multiSelectItems = $derived(
+    paginatedCourses.map((course) => ({
+      id: course.id,
+      label: course.title || course.id,
+      description: course.description || undefined
+    }))
+  );
+
+  async function ensureCoursesLoaded() {
+    if (coursesApi.orgCourses.length > 0) {
+      return;
+    }
+
+    await coursesApi.getOrgCourses();
+  }
+
+  function toggleCourse(courseId: string) {
+    if (selectedCourseIds.has(courseId)) {
+      selectedCourseIds.delete(courseId);
+      return;
+    }
+
+    selectedCourseIds.add(courseId);
+  }
+
+  function handleSearchValueChange(value: string) {
+    searchValue = value;
+    currentPage = 1;
+  }
+
+  function closeModal() {
+    selectedCourseIds.clear();
+    searchValue = '';
+    currentPage = 1;
+    open = false;
+  }
+
+  function goToPage(page: number) {
+    currentPage = page;
+  }
+
+  async function handleAdd() {
+    const courseIds = [...selectedCourseIds];
+    if (courseIds.length === 0) {
+      return;
+    }
+
+    const didAddCourses = await programApi.addCourses(programId, courseIds);
+    if (!didAddCourses) {
+      return;
+    }
+
+    closeModal();
+  }
+
+  $effect(() => {
+    if (!open) {
+      return;
+    }
+
+    untrack(() => {
+      selectedCourseIds.clear();
+      searchValue = '';
+      currentPage = 1;
+
+      void ensureCoursesLoaded();
+    });
+  });
+
+  onDestroy(() => {
+    coursesApi.cancelOrgCoursesRequest();
+  });
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{$t('programs.courses.add_modal_title') || 'Add Course to Program'}</Dialog.Title>
+    </Dialog.Header>
+
+    <div class="flex flex-col gap-4 py-2">
+      <MultiSelectList
+        class="border-0"
+        {emptyMessage}
+        items={multiSelectItems}
+        isLoading={showLoadingState}
+        isSelected={(id) => selectedCourseIds.has(id)}
+        onSearchValueChange={handleSearchValueChange}
+        onToggle={(id) => toggleCourse(id)}
+        namePrefix="program-course"
+        listClass="max-h-60"
+        searchPlaceholder={$t('programs.courses.search_placeholder') || 'Search courses'}
+        bind:searchValue
+      >
+        {#snippet headingSnippet()}
+          <p class="ui:text-sm ui:font-medium">
+            {$t('programs.courses.select_courses') || $t('programs.courses.select_course') || 'Select course(s)'}
+            {#if selectedCount > 0}
+              <span class="ui:text-muted-foreground text-xs">
+                {$t('audience.selected_count', { count: selectedCount })}
+              </span>
+            {/if}
+          </p>
+        {/snippet}
+      </MultiSelectList>
+
+      {#if totalPages > 1}
+        <div class="flex items-center justify-between gap-2 text-sm">
+          <span class="ui:text-muted-foreground">
+            {$t('programs.courses.pagination_status', {
+              page: currentPage,
+              totalPages
+            }) || `Page ${currentPage} of ${totalPages}`}
+          </span>
+
+          <div class="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onclick={() => goToPage(currentPage - 1)}
+              disabled={!canGoToPreviousPage || showLoadingState}
+            >
+              {$t('app.previous') || 'Previous'}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onclick={() => goToPage(currentPage + 1)}
+              disabled={!canGoToNextPage || showLoadingState}
+            >
+              {$t('app.next') || 'Next'}
+            </Button>
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <Dialog.Footer>
+      <Button variant="outline" onclick={closeModal} disabled={programApi.isLoading}>
+        {$t('app.cancel') || 'Cancel'}
+      </Button>
+      <Button onclick={handleAdd} loading={programApi.isLoading} disabled={selectedCount === 0 || programApi.isLoading}>
+        {$t('programs.courses.add') || 'Add Course'}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/create-program-modal.svelte b/apps/dashboard/src/lib/features/program/components/create-program-modal.svelte
new file mode 100644
index 00000000..ae4817f4
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/create-program-modal.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
+  import { Input } from '@cio/ui/base/input';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import { Label } from '@cio/ui/base/label';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '../api';
+
+  interface Props {
+    open: boolean;
+  }
+
+  let { open = $bindable(false) }: Props = $props();
+
+  let name = $state('');
+  let description = $state('');
+
+  async function handleCreate() {
+    if (!name.trim()) return;
+    await programApi.createProgram({ name: name.trim(), description: description.trim() || undefined });
+    name = '';
+    description = '';
+    open = false;
+  }
+
+  function handleCancel() {
+    name = '';
+    description = '';
+    open = false;
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{$t('programs.create_modal.title') || 'Create Program'}</Dialog.Title>
+      <Dialog.Description>
+        {$t('programs.create_modal.description') || 'Add a new certification or compliance program.'}
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <div class="flex flex-col gap-4 py-2">
+      <div class="flex flex-col gap-1.5">
+        <Label for="program-name">{$t('programs.create_modal.name_label') || 'Name'} *</Label>
+        <Input
+          id="program-name"
+          bind:value={name}
+          placeholder={$t('programs.create_modal.name_placeholder') || 'e.g. OSHA Safety Certification'}
+          maxlength={255}
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <Label for="program-description">{$t('programs.create_modal.description_label') || 'Description'}</Label>
+        <Textarea
+          id="program-description"
+          bind:value={description}
+          placeholder={$t('programs.create_modal.description_placeholder') || 'What is this program about?'}
+          rows={3}
+          maxlength={2000}
+        />
+      </div>
+    </div>
+
+    <Dialog.Footer>
+      <Button variant="outline" onclick={handleCancel}>{$t('app.cancel') || 'Cancel'}</Button>
+      <Button onclick={handleCreate} disabled={!name.trim() || programApi.isLoading}>
+        {$t('programs.create_modal.submit') || 'Create'}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/invite-members-modal.svelte b/apps/dashboard/src/lib/features/program/components/invite-members-modal.svelte
new file mode 100644
index 00000000..db8d31b7
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/invite-members-modal.svelte
@@ -0,0 +1,248 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import * as UnderlineTabs from '@cio/ui/custom/underline-tabs';
+  import { Button } from '@cio/ui/base/button';
+  import { ROLE } from '@cio/utils/constants';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { DEFAULT_ORG_AUDIENCE_QUERY } from '$features/org/utils/audience-query-utils';
+  import { BulkEmailSection, ExistingStudentsSection, TutorSelectSection } from '$features/people/components';
+  import type { OrgStudent, Tutor } from '$features/people/utils/types';
+  import type { OrgTeamMember } from '$lib/utils/types/org';
+  import { programApi } from '../api';
+
+  interface Props {
+    programId: string;
+  }
+
+  let { programId }: Props = $props();
+
+  let tutors = $state<Tutor[]>([]);
+  let selectedIds = $state<string[]>([]);
+  let isLoadingStudents = $state(false);
+  let activeTab = $state<'tutors' | 'students'>('students');
+
+  const addPeopleParam = $derived(new URLSearchParams(page.url.search).get('add'));
+  const isOpen = $derived(addPeopleParam === 'true');
+  const selectedTutors = $derived(tutors.filter((tutor) => selectedIds.includes(tutor.id.toString())));
+  const availableStudents = $derived.by(() => getAvailableStudents(orgApi.audience, programApi.members));
+  const INVITE_MODAL = 'course.navItem.people.invite_modal';
+
+  function getTutors(team: OrgTeamMember[]) {
+    const existingTutorIds = new Set(
+      programApi.members
+        .filter((member) => Number(member.roleId) === ROLE.TUTOR || Number(member.roleId) === ROLE.ADMIN)
+        .map((member) => member.profileId)
+        .filter((profileId): profileId is string => Boolean(profileId))
+    );
+
+    return team
+      .filter((teamMember) => teamMember.verified)
+      .filter((teamMember) => !existingTutorIds.has(teamMember.profileId))
+      .map((teamMember) => ({
+        id: teamMember.id,
+        text: teamMember.fullname,
+        profileId: teamMember.profileId,
+        email: teamMember.email
+      }));
+  }
+
+  function getAvailableStudents(students: OrgStudent[], programMembers: typeof programApi.members) {
+    const existingStudentIds = new Set(
+      programMembers
+        .filter((member) => Number(member.roleId) === ROLE.STUDENT)
+        .map((member) => member.profileId)
+        .filter((profileId): profileId is string => Boolean(profileId))
+    );
+
+    return students.filter((student) => {
+      if (!student.profileId) {
+        return false;
+      }
+
+      return !existingStudentIds.has(student.profileId);
+    });
+  }
+
+  function closeModal() {
+    goto(resolve(page.url.pathname, {}));
+  }
+
+  function setTutors(orgId: string | undefined) {
+    if (!orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      await orgApi.getOrgTeam();
+      if (orgApi.error) {
+        console.error('Error fetching teams', orgApi.error);
+        return;
+      }
+
+      tutors = getTutors(orgApi.teamMembers);
+    });
+  }
+
+  function loadStudents(orgId: string | undefined) {
+    if (!orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      isLoadingStudents = true;
+
+      try {
+        await orgApi.getOrgAudience(orgId, DEFAULT_ORG_AUDIENCE_QUERY, { abortPrevious: true });
+      } finally {
+        isLoadingStudents = false;
+      }
+    });
+  }
+
+  async function handleStudentSearch(value: string) {
+    const orgId = $currentOrg.id;
+    if (!orgId) {
+      return;
+    }
+
+    isLoadingStudents = true;
+
+    try {
+      await orgApi.getOrgAudience(
+        orgId,
+        {
+          ...DEFAULT_ORG_AUDIENCE_QUERY,
+          search: value.trim() || undefined
+        },
+        { abortPrevious: true }
+      );
+    } finally {
+      isLoadingStudents = false;
+    }
+  }
+
+  async function addTutors() {
+    if (!selectedTutors.length) {
+      closeModal();
+      return;
+    }
+
+    programApi.success = false;
+
+    await programApi.addMembers(programId, {
+      members: selectedTutors.map((tutor) => ({
+        profileId: tutor.profileId,
+        roleId: ROLE.TUTOR,
+        email: tutor.email,
+        name: tutor.text
+      }))
+    });
+
+    if (programApi.success) {
+      closeModal();
+    }
+  }
+
+  async function assignExistingStudents(profileIds: string[], sendEmail: boolean) {
+    const result = await orgApi.assignAudienceToCourses({
+      profileIds,
+      programIds: [programId],
+      sendEmail
+    });
+
+    if (!result) {
+      return;
+    }
+
+    await programApi.listMembers(programId, true);
+  }
+
+  async function inviteNewStudents(recipientCsv: string, sendEmail: boolean) {
+    const result = await orgApi.importAudienceMembers({
+      recipientCsv,
+      programIds: [programId],
+      sendEmail
+    });
+
+    if (!result) {
+      return;
+    }
+
+    await programApi.listMembers(programId, true);
+  }
+
+  $effect(() => {
+    setTutors($currentOrg.id);
+  });
+
+  $effect(() => {
+    if (!isOpen || !programId) {
+      return;
+    }
+
+    untrack(() => {
+      activeTab = 'students';
+      selectedIds = [];
+      void loadStudents($currentOrg.id);
+    });
+  });
+</script>
+
+<Dialog.Root
+  open={isOpen}
+  onOpenChange={(open) => {
+    if (!open) closeModal();
+  }}
+>
+  <Dialog.Content class="max-h-[80vh] w-[96vw] max-w-3xl! overflow-y-auto">
+    <Dialog.Header>
+      <Dialog.Title>{$t('programs.people.invite_modal_title')}</Dialog.Title>
+    </Dialog.Header>
+
+    <UnderlineTabs.Root bind:value={activeTab}>
+      <UnderlineTabs.List class="flex flex-wrap">
+        <UnderlineTabs.Trigger value="tutors">
+          {$t(`${INVITE_MODAL}.invite`)}
+        </UnderlineTabs.Trigger>
+        <UnderlineTabs.Trigger value="students">
+          {$t(`${INVITE_MODAL}.invite_students`)}
+        </UnderlineTabs.Trigger>
+      </UnderlineTabs.List>
+
+      <UnderlineTabs.Content value="tutors">
+        <div class="mt-6 space-y-6">
+          <TutorSelectSection
+            {tutors}
+            bind:selectedIds
+            isLoading={orgApi.isLoading}
+            helperHref={`/org/${$currentOrg.siteName}/settings/teams`}
+          />
+
+          <div class="mt-5 flex flex-row-reverse items-center gap-2">
+            <Button variant="secondary" type="button" onclick={addTutors} loading={programApi.isLoading}>
+              {$t(`${INVITE_MODAL}.finish`)}
+            </Button>
+          </div>
+        </div>
+      </UnderlineTabs.Content>
+
+      <UnderlineTabs.Content value="students">
+        <div class="mt-6 space-y-6">
+          <ExistingStudentsSection
+            students={availableStudents}
+            isLoading={isLoadingStudents}
+            onSearchValueChange={handleStudentSearch}
+            onAssign={assignExistingStudents}
+          />
+          <BulkEmailSection onInvite={inviteNewStudents} />
+        </div>
+      </UnderlineTabs.Content>
+    </UnderlineTabs.Root>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/list.svelte b/apps/dashboard/src/lib/features/program/components/list.svelte
new file mode 100644
index 00000000..5a3807ad
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/list.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import pluralize from 'pluralize';
+  import { resolve } from '$app/paths';
+  import { goto } from '$app/navigation';
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
+  import { Badge } from '@cio/ui/base/badge';
+  import { t } from '$lib/utils/functions/translations';
+  import type { Program } from '../utils/types';
+
+  interface Props {
+    program: Program;
+    isLMS?: boolean;
+    href?: string;
+  }
+
+  let { program, isLMS = false, href }: Props = $props();
+
+  const courseCount = $derived(program.courseCount ?? 0);
+  const studentCount = $derived(program.studentCount ?? 0);
+
+  function handleRowClick() {
+    if (href) {
+      goto(resolve(href, {}));
+      return;
+    }
+
+    const nextRoute = isLMS ? `/programs/${program.id}/newsfeed?source=lms` : `/programs/${program.id}/newsfeed`;
+
+    goto(resolve(nextRoute, {}));
+  }
+
+  function getStatusVariant(status: Program['status']) {
+    if (status === 'ACTIVE') {
+      return 'success';
+    }
+
+    if (status === 'INACTIVE') {
+      return 'secondary';
+    }
+
+    return 'outline';
+  }
+
+  function getStatusLabelKey(status: Program['status']) {
+    if (status === 'ACTIVE') {
+      return 'programs.status.active';
+    }
+
+    if (status === 'INACTIVE') {
+      return 'programs.status.inactive';
+    }
+
+    return 'programs.status.archived';
+  }
+</script>
+
+<ResourceListRow.Root
+  variant="default"
+  align="start"
+  class="ui:cursor-pointer ui:py-3"
+  onclick={handleRowClick}
+  role="row"
+>
+  <div class="ui:flex ui:w-full ui:items-start ui:gap-6">
+    <div class="ui:min-w-0 ui:flex-1">
+      <p class="ui:w-full ui:truncate ui:text-base ui:font-semibold">{program.name}</p>
+
+      {#if program.description}
+        <p class="ui:mt-1 ui:text-sm ui:text-muted-foreground">{program.description}</p>
+      {/if}
+    </div>
+
+    <div class="ui:flex ui:shrink-0 ui:items-start">
+      <Badge variant={getStatusVariant(program.status)}>
+        {$t(getStatusLabelKey(program.status))}
+      </Badge>
+    </div>
+
+    <div class="ui:flex ui:shrink-0 ui:flex-col ui:items-start ui:gap-1">
+      <p class="ui:text-sm ui:text-muted-foreground">
+        {pluralize(t.get('programs.card.courses'), courseCount, true)}
+      </p>
+
+      {#if !isLMS}
+        <p class="ui:text-sm ui:text-muted-foreground">
+          {pluralize(t.get('programs.card.students'), studentCount, true)}
+        </p>
+      {/if}
+    </div>
+  </div>
+</ResourceListRow.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/card/card.svelte b/apps/dashboard/src/lib/features/program/components/newsfeed/card/card.svelte
new file mode 100644
index 00000000..40d97754
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/card/card.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { ProgramNewsfeedItem } from '$features/program/utils/types';
+  import { programNewsfeedApi, type ProgramNewsfeedCommentsByFeedId } from '$features/program/api';
+  import {
+    getNewsfeedReactionCounts,
+    getSelectedNewsfeedReactionType,
+    NewsfeedReactions
+  } from '@cio/ui/custom/newsfeed-reactions';
+  import DeleteConfirmation from './delete-confirmation.svelte';
+  import Header from './header.svelte';
+  import Comments from './comments.svelte';
+
+  interface Props {
+    feed: ProgramNewsfeedItem;
+    comments?: ProgramNewsfeedCommentsByFeedId;
+    programId?: string;
+    editFeed: ProgramNewsfeedItem | null;
+    author: {
+      id: string;
+      username: string;
+      fullname: string;
+      avatarUrl: string;
+    };
+    reactionAuthorId: string;
+    canComment?: boolean;
+    canManageFeed?: boolean;
+    edit?: boolean;
+    deleteFeed?: (feedId: string) => void;
+    deleteComment?: (feedId: string, commentId: string) => void;
+    addNewComment?: (content: string, feedId: string) => Promise<void> | void;
+    addNewReaction?: (reactionType: string, feedId: string, authorId: string) => Promise<void> | void;
+    onPin?: (feedId: ProgramNewsfeedItem['id'], isPinned: ProgramNewsfeedItem['isPinned']) => void;
+    isActive?: boolean;
+    isReacting?: boolean;
+  }
+
+  let {
+    feed,
+    comments,
+    programId,
+    editFeed = $bindable(),
+    author,
+    reactionAuthorId,
+    canComment = true,
+    canManageFeed = false,
+    edit = $bindable(false),
+    deleteFeed = (_feedId: string) => {},
+    deleteComment = (_feedId: string, _commentId: string) => {},
+    addNewComment = (_content: string, _feedId: string) => {},
+    addNewReaction = (_reactionType: string, _feedId: string, _authorId: string) => {},
+    onPin = (_feedId: string, _isPinned: boolean | null) => {},
+    isActive = false,
+    isReacting = false
+  }: Props = $props();
+
+  let isDeleteFeedModal = $state(false);
+
+  const reactionCounts = $derived(getNewsfeedReactionCounts(feed.reaction));
+  const selectedReactionType = $derived(getSelectedNewsfeedReactionType(feed.reaction, reactionAuthorId));
+
+  const openEditFeed = () => {
+    programNewsfeedApi.openNewFeedModal();
+    edit = true;
+    editFeed = feed;
+  };
+
+  const handleReact = (reactionType: string) => addNewReaction(reactionType, feed.id, reactionAuthorId);
+
+  onMount(() => {
+    if (!isActive) {
+      return;
+    }
+
+    const element = document.getElementById(feed.id);
+    element?.scrollIntoView({
+      block: 'start',
+      behavior: 'smooth',
+      inline: 'nearest'
+    });
+  });
+</script>
+
+<div
+  id={feed.id}
+  class="mb-7 flex w-full max-w-3xl flex-col justify-between gap-2 rounded-md {isActive
+    ? 'border-primary-700 border-2'
+    : 'border border-gray-200'}"
+>
+  <Header
+    {feed}
+    {canManageFeed}
+    {onPin}
+    onEdit={openEditFeed}
+    onRequestDelete={() => {
+      isDeleteFeedModal = true;
+    }}
+  />
+
+  <div class="px-3 pt-1 pb-2">
+    <NewsfeedReactions
+      {reactionCounts}
+      {selectedReactionType}
+      disabled={isReacting || !reactionAuthorId}
+      onReactionToggle={handleReact}
+    />
+  </div>
+
+  <Comments
+    {programId}
+    {feed}
+    {author}
+    {comments}
+    {canComment}
+    onAddComment={async (content) => {
+      await addNewComment(content, feed.id);
+    }}
+    onDeleteComment={(commentId) => {
+      deleteComment(feed.id, String(commentId));
+    }}
+  />
+
+  <DeleteConfirmation
+    bind:openDeleteModal={isDeleteFeedModal}
+    deleteFeed={() => {
+      deleteFeed(feed.id);
+    }}
+  />
+</div>
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/card/comments.svelte b/apps/dashboard/src/lib/features/program/components/newsfeed/card/comments.svelte
new file mode 100644
index 00000000..9d5fe8ff
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/card/comments.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import pluralize from 'pluralize';
+  import UsersIcon from '@lucide/svelte/icons/users';
+  import SendHorizontalIcon from '@lucide/svelte/icons/send-horizontal';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import { profile } from '$lib/utils/store/user';
+  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { t } from '$lib/utils/functions/translations';
+  import { programNewsfeedApi } from '$features/program/api';
+  import { Button } from '@cio/ui/base/button';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
+  import type { ProgramNewsfeedItem } from '$features/program/utils/types';
+  import type { ProgramNewsfeedCommentsByFeedId } from '$features/program/api';
+
+  interface Props {
+    programId?: string;
+    feed: ProgramNewsfeedItem;
+    author: {
+      id: string;
+      username: string;
+      fullname: string;
+      avatarUrl: string;
+    };
+    canComment?: boolean;
+    comments?: ProgramNewsfeedCommentsByFeedId;
+    onAddComment: (content: string) => Promise<void> | void;
+    onDeleteComment: (commentId: string | number) => void;
+  }
+
+  let { programId, feed, author, canComment = true, comments, onAddComment, onDeleteComment }: Props = $props();
+
+  let comment = $state('');
+  let isSubmitting = $state(false);
+  let isBootstrapping = $state(false);
+  let didBootstrap = $state(false);
+
+  const pageSize = 5;
+  let visibleCount = $state(1);
+
+  const loadedCount = $derived((comments?.items?.length ?? 0) as number);
+  const totalCount = $derived(comments?.totalCount || feed.commentCount);
+  const isLoading = $derived((comments?.isLoading ?? false) as boolean);
+  const shownCount = $derived(Math.min(visibleCount, loadedCount));
+
+  const bootstrap = async () => {
+    if (!programId || !comments) return;
+    if (didBootstrap) return;
+
+    didBootstrap = true;
+    isBootstrapping = true;
+
+    try {
+      await programNewsfeedApi.getComments(programId, feed.id);
+    } finally {
+      isBootstrapping = false;
+    }
+  };
+
+  const submitComment = async () => {
+    if (isSubmitting) return;
+
+    isSubmitting = true;
+
+    try {
+      await onAddComment(comment);
+      comment = '';
+    } finally {
+      isSubmitting = false;
+    }
+  };
+
+  const handleAddNewComment = async (event: KeyboardEvent | MouseEvent) => {
+    if (isSubmitting) return;
+
+    const maybeKey = event as KeyboardEvent & { key?: string };
+    if (maybeKey.key !== 'Enter' && event.type !== 'click') {
+      return;
+    }
+
+    event.preventDefault();
+    await submitComment();
+  };
+
+  const showMore = async () => {
+    if (!comments) {
+      return;
+    }
+
+    if (!didBootstrap) {
+      await bootstrap();
+    }
+
+    visibleCount = visibleCount <= 1 ? pageSize : visibleCount + pageSize;
+  };
+
+  const minimize = () => {
+    visibleCount = visibleCount > 1 ? 1 : shownCount;
+  };
+
+  const toggleComments = async () => {
+    if (totalCount === shownCount) {
+      minimize();
+      return;
+    }
+
+    await showMore();
+  };
+</script>
+
+<section class="border-t border-gray-200 p-3">
+  <div class="flex w-full items-center justify-between">
+    <Button
+      variant="ghost"
+      size="sm"
+      onclick={toggleComments}
+      loading={isBootstrapping || isLoading}
+      class="justify-start"
+    >
+      <UsersIcon size={16} />
+      <p class="py-2 text-sm">{pluralize($t('programs.newsfeed.comments.comment'), totalCount, true)}</p>
+
+      {#if totalCount > shownCount}
+        <span class="ml-auto text-xs text-gray-600">
+          {$t('programs.newsfeed.comments.showing_of', { shown: shownCount, total: totalCount })}
+        </span>
+      {/if}
+    </Button>
+
+    {#if shownCount > 1}
+      <Button variant="ghost" size="sm" onclick={minimize}>
+        <span class="ml-auto text-xs text-gray-600">{$t('programs.newsfeed.comments.hide')}</span>
+      </Button>
+    {/if}
+  </div>
+
+  <div>
+    {#if comments}
+      {#each comments.items.slice(0, shownCount) as commentItem (commentItem.id)}
+        {#if commentItem.content}
+          <div class="group flex items-center justify-between py-2">
+            <span class="flex items-center gap-3">
+              <div class="h-9 w-9">
+                <img
+                  src={commentItem.authorAvatarUrl || ''}
+                  alt={$t('programs.newsfeed.user_avatar_alt')}
+                  class="h-full w-full rounded-full object-cover"
+                />
+              </div>
+              <span>
+                <div class="flex items-center gap-2">
+                  <p class="text-sm font-medium capitalize">{commentItem.authorFullname || ''}</p>
+                  <p class="text-xs font-medium text-gray-600">{calDateDiff(commentItem.createdAt)}</p>
+                </div>
+                <p>{commentItem.content}</p>
+              </span>
+            </span>
+
+            {#if commentItem.authorProfileId === $profile.id || $isOrgAdmin}
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger
+                  class="hidden h-8 w-8 items-center justify-center rounded-md group-hover:flex hover:bg-gray-100 dark:hover:bg-neutral-700"
+                >
+                  <EllipsisVerticalIcon class="h-5 w-5" />
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  <DropdownMenu.Item class="text-red-600" onclick={() => onDeleteComment(commentItem.id)}>
+                    {$t('programs.newsfeed.comments.delete')}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            {/if}
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+
+  {#if canComment}
+    <div class="flex items-center justify-between gap-2">
+      <UserAvatar src={author.avatarUrl} alt={$t('programs.newsfeed.user_avatar_alt')} class="size-7" />
+      <div class="flex-1">
+        <input
+          type="text"
+          bind:value={comment}
+          onkeydown={handleAddNewComment}
+          placeholder={$t('programs.newsfeed.comments.placeholder')}
+          class="w-full rounded-3xl border border-gray-200 bg-transparent p-1 pl-2 text-sm disabled:opacity-50"
+          disabled={isSubmitting}
+          required
+        />
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        class="rounded-full"
+        loading={isSubmitting}
+        onclick={handleAddNewComment}
+        aria-label={$t('programs.newsfeed.comments.submit_aria')}
+      >
+        <SendHorizontalIcon size={16} />
+      </Button>
+    </div>
+  {/if}
+</section>
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/card/delete-confirmation.svelte b/apps/dashboard/src/lib/features/program/components/newsfeed/card/delete-confirmation.svelte
new file mode 100644
index 00000000..8504d137
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/card/delete-confirmation.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    openDeleteModal?: boolean;
+    deleteFeed?: () => void;
+  }
+
+  let { openDeleteModal = $bindable(false), deleteFeed = () => {} }: Props = $props();
+
+  const handleDelete = async () => {
+    deleteFeed();
+    openDeleteModal = false;
+  };
+</script>
+
+<Dialog.Root bind:open={openDeleteModal}>
+  <Dialog.Content class="w-96">
+    <Dialog.Header>
+      <Dialog.Title>{$t('programs.newsfeed.delete_feed_title')}</Dialog.Title>
+    </Dialog.Header>
+    <div>
+      <p class="text-lg">{$t('programs.newsfeed.delete_feed_description')}</p>
+
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={() => (openDeleteModal = false)}>
+          {$t('programs.newsfeed.cancel')}
+        </Button>
+        <Button variant="outline" onclick={handleDelete}>
+          {$t('programs.newsfeed.confirm_delete')}
+        </Button>
+      </div>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/card/header.svelte b/apps/dashboard/src/lib/features/program/components/newsfeed/card/header.svelte
new file mode 100644
index 00000000..a8dcf3e7
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/card/header.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
+  import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
+  import { t } from '$lib/utils/functions/translations';
+  import type { ProgramNewsfeedItem } from '$features/program/utils/types';
+  import { HTMLRender } from '$features/ui';
+
+  interface Props {
+    feed: ProgramNewsfeedItem;
+    canManageFeed?: boolean;
+    onPin: (feedId: ProgramNewsfeedItem['id'], isPinned: ProgramNewsfeedItem['isPinned']) => void;
+    onEdit: () => void;
+    onRequestDelete: () => void;
+  }
+
+  let { feed, canManageFeed = false, onPin, onEdit, onRequestDelete }: Props = $props();
+</script>
+
+<div class="px-3 pt-3 pb-0">
+  <div class="mb-2 flex justify-between">
+    <span class="flex items-center gap-3">
+      <div class="h-9 w-9">
+        <img
+          src={feed.authorAvatarUrl || ''}
+          alt={$t('programs.newsfeed.user_avatar_alt')}
+          class="h-full w-full rounded-full object-cover"
+        />
+      </div>
+      <span>
+        <p class="text-base font-semibold capitalize">{feed.authorFullname || ''}</p>
+        <p class="text-sm font-medium text-gray-600">{calDateDiff(feed.createdAt)}</p>
+      </span>
+    </span>
+
+    {#if canManageFeed}
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+          class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-neutral-700"
+        >
+          <EllipsisVerticalIcon class="h-5 w-5" />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          <DropdownMenu.Item onclick={() => onPin(feed.id, feed.isPinned)}>
+            {feed.isPinned ? $t('programs.newsfeed.card.unpin') : $t('programs.newsfeed.card.pin')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onclick={onEdit}>{$t('programs.newsfeed.card.edit')}</DropdownMenu.Item>
+          <DropdownMenu.Item class="text-red-600" onclick={onRequestDelete}>
+            {$t('programs.newsfeed.card.delete')}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    {/if}
+  </div>
+
+  {#if !isHtmlValueEmpty(feed.content || '')}
+    <HTMLRender className="w-[80%]">
+      <div>
+        <SafeHtmlContent content={feed.content || ''} />
+      </div>
+    </HTMLRender>
+  {/if}
+</div>
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/index.ts b/apps/dashboard/src/lib/features/program/components/newsfeed/index.ts
new file mode 100644
index 00000000..7a0833eb
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/index.ts
@@ -0,0 +1,2 @@
+export { default as NewFeedModal } from './new-feed-modal.svelte';
+export { default as NewsFeedCard } from './card/card.svelte';
diff --git a/apps/dashboard/src/lib/features/program/components/newsfeed/new-feed-modal.svelte b/apps/dashboard/src/lib/features/program/components/newsfeed/new-feed-modal.svelte
new file mode 100644
index 00000000..660d7f4d
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/newsfeed/new-feed-modal.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { t } from '$lib/utils/functions/translations';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import type { ProgramNewsfeedItem } from '$features/program/utils/types';
+  import { getErrorKey } from '$features/program/utils/error';
+  import { programNewsfeedApi } from '$features/program/api';
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { TextEditor } from '$features/ui';
+
+  interface Props {
+    programId?: string;
+    edit?: boolean;
+    editFeed: ProgramNewsfeedItem | null;
+  }
+
+  let { programId = '', edit = $bindable(false), editFeed = $bindable() }: Props = $props();
+
+  let isLoading = $state(false);
+  let newPost = $state('');
+
+  $effect(() => {
+    if (edit && editFeed) {
+      newPost = editFeed.content || '';
+      return;
+    }
+
+    if (!programNewsfeedApi.isNewFeedModalOpen) {
+      newPost = '';
+    }
+  });
+
+  const resetEditor = () => {
+    newPost = '';
+    edit = false;
+    editFeed = null;
+    programNewsfeedApi.closeNewFeedModal();
+  };
+
+  const onPost = async () => {
+    isLoading = true;
+
+    try {
+      if (edit && editFeed) {
+        await programNewsfeedApi.update(programId, editFeed.id, { content: newPost ?? '' });
+
+        if (programNewsfeedApi.success) {
+          resetEditor();
+        } else {
+          snackbar.error(getErrorKey(programNewsfeedApi.error, 'update'));
+        }
+      } else {
+        await programNewsfeedApi.create(programId, {
+          content: newPost ?? '',
+          isPinned: false
+        });
+
+        if (programNewsfeedApi.success) {
+          resetEditor();
+        } else {
+          snackbar.error(getErrorKey(programNewsfeedApi.error, 'create'));
+        }
+      }
+    } catch {
+      snackbar.error(getErrorKey(programNewsfeedApi.error, edit ? 'update' : 'create'));
+    } finally {
+      isLoading = false;
+    }
+  };
+</script>
+
+<Dialog.Root
+  bind:open={programNewsfeedApi.isNewFeedModalOpen}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) {
+      resetEditor();
+    }
+  }}
+>
+  <Dialog.Content class="h-fit! w-fit! max-w-none!">
+    <Dialog.Header>
+      <Dialog.Title>
+        {edit ? $t('programs.newsfeed.edit_post') : $t('programs.newsfeed.make_a_post')}
+      </Dialog.Title>
+    </Dialog.Header>
+    <section class="max-w-lg">
+      <TextEditor
+        content={newPost || editFeed?.content || ''}
+        onChange={(text) => {
+          newPost = text;
+        }}
+        editorClass="max-h-[400px]"
+        placeholder={$t('programs.newsfeed.editor_placeholder')}
+      />
+    </section>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={resetEditor}>
+        {$t('programs.newsfeed.cancel')}
+      </Button>
+      <Button loading={isLoading} onclick={onPost}>
+        {$t('programs.newsfeed.post_submit')}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/program-card.svelte b/apps/dashboard/src/lib/features/program/components/program-card.svelte
new file mode 100644
index 00000000..2786e9cc
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/program-card.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import pluralize from 'pluralize';
+  import * as Item from '@cio/ui/base/item';
+  import { Separator } from '@cio/ui/base/separator';
+  import { t } from '$lib/utils/functions/translations';
+  import type { Program } from '../utils/types';
+
+  interface Props {
+    program: Program;
+    onclick?: () => void;
+  }
+
+  let { program, onclick }: Props = $props();
+
+  const courseCount = $derived(program.courseCount ?? 0);
+  const studentCount = $derived(program.studentCount ?? 0);
+</script>
+
+<Item.Root variant="outline" class="group relative max-w-[320px] cursor-pointer p-4!" {onclick}>
+  {#snippet child({ props })}
+    <div class="flex h-full flex-col justify-between gap-5" {...props}>
+      <Item.Content>
+        <Item.Title class="line-clamp-2 min-h-14 text-base!">
+          {program.name}
+        </Item.Title>
+
+        <Separator class="my-3" />
+
+        <div class="flex w-full justify-between">
+          <div class="w-[60%]">
+            <p class="pl-2 text-xs dark:text-white">
+              {pluralize($t('programs.card.courses'), courseCount, true)}
+            </p>
+          </div>
+
+          <div class="flex flex-col justify-between">
+            <p class="pl-2 text-xs dark:text-white">
+              {pluralize($t('programs.card.students'), studentCount, true)}
+            </p>
+          </div>
+        </div>
+      </Item.Content>
+    </div>
+  {/snippet}
+</Item.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/program-filter-popover.svelte b/apps/dashboard/src/lib/features/program/components/program-filter-popover.svelte
new file mode 100644
index 00000000..c23365e6
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/program-filter-popover.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import * as Popover from '@cio/ui/base/popover';
+  import * as ToggleGroup from '@cio/ui/base/toggle-group';
+  import { Button } from '@cio/ui/base/button';
+  import { Checkbox } from '@cio/ui/base/checkbox';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import FilterIcon from '@lucide/svelte/icons/filter';
+  import { t } from '$lib/utils/functions/translations';
+  import {
+    DEFAULT_PROGRAM_SORT,
+    DEFAULT_PROGRAM_SORT_ORDER,
+    type ProgramSortBy,
+    type ProgramSortOrder
+  } from '../utils/constants';
+
+  interface StatusOption {
+    value: 'ACTIVE' | 'INACTIVE' | 'ARCHIVED';
+    label: string;
+  }
+
+  interface SortOption {
+    value: ProgramSortBy;
+    label: string;
+  }
+
+  interface Props {
+    sortKey?: ProgramSortBy;
+    selectedOrder?: ProgramSortOrder;
+    selectedStatuses?: string[];
+    statusOptions?: StatusOption[];
+    sortOptions?: SortOption[];
+    onToggleStatus?: (status: string, checked: boolean) => void;
+    onClearFilters?: () => void | Promise<void>;
+  }
+
+  let {
+    sortKey = $bindable(DEFAULT_PROGRAM_SORT),
+    selectedOrder = $bindable(DEFAULT_PROGRAM_SORT_ORDER),
+    selectedStatuses = [],
+    statusOptions = [],
+    sortOptions = [],
+    onToggleStatus = () => {},
+    onClearFilters = () => {}
+  }: Props = $props();
+
+  let isOpen = $state(false);
+
+  const hasActiveFilters = $derived(
+    sortKey !== DEFAULT_PROGRAM_SORT || selectedOrder !== DEFAULT_PROGRAM_SORT_ORDER || selectedStatuses.length > 0
+  );
+
+  function isStatusSelected(status: string) {
+    return selectedStatuses.includes(status);
+  }
+</script>
+
+<Popover.Root bind:open={isOpen}>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <div class="relative">
+        <IconButton {...props} aria-label={$t('programs.filters.filter')} tooltip={$t('programs.filters.filter')}>
+          <FilterIcon size={16} />
+        </IconButton>
+        {#if hasActiveFilters}
+          <span
+            class="ui:bg-primary absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-white"
+            aria-hidden="true"
+          ></span>
+        {/if}
+      </div>
+    {/snippet}
+  </Popover.Trigger>
+
+  <Popover.Content align="end" class="w-[360px] p-3">
+    <div class="space-y-4">
+      <div class="flex items-center justify-between gap-2">
+        <p class="text-sm font-semibold">{$t('programs.filters.popover_title')}</p>
+        <Button variant="link" class="h-auto p-0" onclick={onClearFilters} disabled={!hasActiveFilters}>
+          {$t('programs.filters.clear_all')}
+        </Button>
+      </div>
+
+      <div class="space-y-2">
+        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
+          {$t('programs.filters.sort')}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          {#each sortOptions as option (option.value)}
+            <Button
+              type="button"
+              size="sm"
+              variant={sortKey === option.value ? 'secondary' : 'outline'}
+              onclick={() => (sortKey = option.value)}
+            >
+              {option.label}
+            </Button>
+          {/each}
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
+          {$t('programs.filters.order')}
+        </p>
+        <ToggleGroup.Root
+          type="single"
+          variant="outline"
+          size="sm"
+          value={selectedOrder}
+          onValueChange={(value) => {
+            if (value === 'asc' || value === 'desc') {
+              selectedOrder = value;
+            }
+          }}
+        >
+          <ToggleGroup.Item value="asc">{$t('programs.filters.ascending')}</ToggleGroup.Item>
+          <ToggleGroup.Item value="desc">{$t('programs.filters.descending')}</ToggleGroup.Item>
+        </ToggleGroup.Root>
+      </div>
+
+      <div class="space-y-3">
+        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
+          {$t('programs.filters.status')}
+        </p>
+        <div class="space-y-2">
+          {#each statusOptions as option (option.value)}
+            <label class="hover:ui:bg-muted/30 flex cursor-pointer items-center rounded-md border px-3 py-2">
+              <div class="flex items-center gap-2">
+                <Checkbox
+                  checked={isStatusSelected(option.value)}
+                  onCheckedChange={(checked) => onToggleStatus(option.value, Boolean(checked))}
+                />
+                <span class="text-sm">{option.label}</span>
+              </div>
+            </label>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </Popover.Content>
+</Popover.Root>
diff --git a/apps/dashboard/src/lib/features/program/components/program-header.svelte b/apps/dashboard/src/lib/features/program/components/program-header.svelte
new file mode 100644
index 00000000..cb44c422
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/program-header.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Separator } from '@cio/ui/base/separator';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { programApi } from '../api';
+</script>
+
+<header
+  class="border-border ui:bg-background sticky top-0 z-100 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
+>
+  <div class="flex w-full items-center gap-2 px-4">
+    <Sidebar.Trigger />
+
+    <div class="h-4 w-2">
+      <Separator orientation="vertical" />
+    </div>
+
+    <div class="flex min-w-0 items-center gap-2">
+      <p class="max-w-2xs truncate text-sm font-medium">
+        {programApi.program?.name || ''}
+      </p>
+    </div>
+
+    <span class="grow"></span>
+  </div>
+</header>
diff --git a/apps/dashboard/src/lib/features/program/components/sidebar/index.ts b/apps/dashboard/src/lib/features/program/components/sidebar/index.ts
new file mode 100644
index 00000000..fa90e9bc
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/sidebar/index.ts
@@ -0,0 +1 @@
+export { default as ProgramSidebar } from './program-sidebar.svelte';
diff --git a/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar-navigation.svelte b/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar-navigation.svelte
new file mode 100644
index 00000000..9a71f7a2
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar-navigation.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { resolve } from '$app/paths';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { BackButton } from '@cio/ui';
+  import { HoverableItem, NewsFeedIcon, CourseIcon, PeopleIcon, SettingsIcon } from '@cio/ui/custom/moving-icons';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrgPath, isOrgAdmin } from '$lib/utils/store/org';
+  import { isStudentExperience } from '$lib/utils/store/app';
+  import { profile } from '$lib/utils/store/user';
+  import { programApi } from '$features/program/api';
+  import { ROLE } from '@cio/utils/constants';
+
+  interface Props {
+    path: string;
+    id: string;
+  }
+
+  let { path, id }: Props = $props();
+
+  const currentPath = $derived(path || page.url.pathname);
+  const isLmsProgramContext = $derived(page.url.searchParams.get('source') === 'lms' || $isStudentExperience);
+  const programsListPath = $derived(isLmsProgramContext ? '/lms/programs' : `${$currentOrgPath}/programs`);
+
+  const currentMemberRole = $derived(programApi.members.find((m) => m.profileId === $profile.id)?.roleId ?? null);
+
+  // Admin + Tutor can manage members; org admins always can
+  const canManageMembers = $derived(
+    $isOrgAdmin === true || (currentMemberRole !== null && currentMemberRole <= ROLE.TUTOR)
+  );
+
+  // Only Admins and org admins can access settings
+  const canManageSettings = $derived($isOrgAdmin === true || currentMemberRole === ROLE.ADMIN);
+
+  const navItems = $derived(
+    [
+      {
+        id: 'newsfeed',
+        title: $t('programs.sidebar.newsfeed') || 'Newsfeed',
+        url: `/programs/${id}/newsfeed`,
+        isActive: currentPath.endsWith('/newsfeed'),
+        icon: NewsFeedIcon,
+        show: () => true
+      },
+      {
+        id: 'courses',
+        title: $t('programs.sidebar.courses') || 'Courses',
+        url: `/programs/${id}/courses`,
+        isActive: currentPath.endsWith('/courses'),
+        icon: CourseIcon,
+        show: () => true
+      },
+      {
+        id: 'people',
+        title: $t('programs.sidebar.people') || 'People',
+        url: `/programs/${id}/people`,
+        isActive: currentPath.endsWith('/people'),
+        icon: PeopleIcon,
+        show: () => canManageMembers
+      },
+      {
+        id: 'settings',
+        title: $t('programs.sidebar.settings') || 'Settings',
+        url: `/programs/${id}/settings`,
+        isActive: currentPath.endsWith('/settings'),
+        icon: SettingsIcon,
+        show: () => canManageSettings
+      }
+    ].filter((item) => item.show())
+  );
+</script>
+
+<Sidebar.Group class="pt-0!">
+  <BackButton
+    href={resolve(programsListPath, {})}
+    label={$t(isLmsProgramContext ? 'lms_navigation.programs' : 'org_navigation.programs') || 'Programs'}
+    class="px-2! py-2!"
+  />
+
+  <Sidebar.Menu>
+    {#each navItems as item (item.id)}
+      <Sidebar.MenuItem>
+        <Sidebar.MenuButton tooltipContent={item.title} isActive={item.isActive}>
+          {#snippet child({ props })}
+            <HoverableItem>
+              {#snippet children(isHovered)}
+                {@const Icon = item.icon}
+                <a href={resolve(item.url, {})} {...props}>
+                  <Icon {isHovered} size={16} />
+                  <span>{item.title}</span>
+                </a>
+              {/snippet}
+            </HoverableItem>
+          {/snippet}
+        </Sidebar.MenuButton>
+      </Sidebar.MenuItem>
+    {/each}
+  </Sidebar.Menu>
+</Sidebar.Group>
+
+<style>
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar.svelte b/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar.svelte
new file mode 100644
index 00000000..64c24282
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { Skeleton } from '@cio/ui/base/skeleton';
+  import { profile } from '$lib/utils/store/user';
+  import { orgs, isFreePlan } from '$lib/utils/store/org';
+
+  import OrgLogo from '$features/ui/sidebar/org-sidebar/org-logo.svelte';
+  import Navigation from './program-sidebar-navigation.svelte';
+  import SidebarSkeleton from '$features/ui/sidebar/sidebar-skeleton.svelte';
+  import UpgradePoweredBy from '$features/ui/upgrade-powered-by.svelte';
+  import { useSidebar } from '@cio/ui/base/sidebar';
+
+  const SIDEBAR_ITEM_SKELETON_COUNT = 4;
+
+  interface Props {
+    path: string;
+    id: string;
+    isProgramReady?: boolean;
+  }
+
+  let { path, id, isProgramReady = true }: Props = $props();
+
+  const isOrgLoaded = $derived($orgs.length > 0 && $profile.id);
+  const sidebar = useSidebar();
+  const currentPath = $derived(path || page.url.pathname);
+</script>
+
+{#if !isOrgLoaded}
+  <SidebarSkeleton />
+{:else}
+  <Sidebar.Root collapsible="icon">
+    <Sidebar.Header>
+      <OrgLogo />
+    </Sidebar.Header>
+
+    <Sidebar.Content>
+      {#if isProgramReady}
+        <Navigation path={currentPath} {id} />
+      {:else}
+        <Sidebar.Group class="pt-0!">
+          <div class="flex h-8 items-center gap-2 rounded-md px-2">
+            <Skeleton class="ui:size-4 ui:rounded-md" />
+            <Skeleton class="ui:h-4 ui:w-24" />
+          </div>
+          <Sidebar.Menu>
+            {#each Array(SIDEBAR_ITEM_SKELETON_COUNT) as _, i (i)}
+              <Sidebar.MenuItem>
+                <div class="ui:flex ui:h-8 ui:items-center ui:gap-2 ui:rounded-md ui:px-2" data-sidebar="menu-skeleton">
+                  <Skeleton class="ui:size-4 ui:rounded-md" />
+                  <Skeleton class="ui:h-4 ui:max-w-32 ui:flex-1" />
+                </div>
+              </Sidebar.MenuItem>
+            {/each}
+          </Sidebar.Menu>
+        </Sidebar.Group>
+      {/if}
+    </Sidebar.Content>
+
+    <Sidebar.Rail />
+
+    {#if $isFreePlan}
+      <Sidebar.Footer>
+        <UpgradePoweredBy
+          class="static [&_span]:font-normal [&_span]:shadow-none"
+          showOnlyLogo={!sidebar.open || sidebar.isMobile}
+        />
+      </Sidebar.Footer>
+    {/if}
+  </Sidebar.Root>
+{/if}
diff --git a/apps/dashboard/src/lib/features/program/pages/index.ts b/apps/dashboard/src/lib/features/program/pages/index.ts
new file mode 100644
index 00000000..730dbc2f
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/pages/index.ts
@@ -0,0 +1 @@
+export { default as ProgramsPage } from './programs.svelte';
diff --git a/apps/dashboard/src/lib/features/program/pages/programs.svelte b/apps/dashboard/src/lib/features/program/pages/programs.svelte
new file mode 100644
index 00000000..67508550
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/pages/programs.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
+  import * as Page from '@cio/ui/base/page';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { Search } from '@cio/ui/custom/search';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { GoalIcon } from '@cio/ui/custom/moving-icons';
+  import { t } from '$lib/utils/functions/translations';
+  import ProgramList from '../components/list.svelte';
+  import type { Program } from '../utils/types';
+
+  interface Props {
+    programs?: Program[];
+    isLMS?: boolean;
+    isLoading?: boolean;
+    searchValue?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    searchPlaceholder?: string;
+    filterControls?: Snippet;
+  }
+
+  let {
+    programs = [],
+    isLMS = false,
+    isLoading = false,
+    searchValue = $bindable(''),
+    emptyTitle = $t('programs.empty_title'),
+    emptyDescription = $t('programs.empty_description'),
+    searchPlaceholder = $t('programs.search_placeholder'),
+    filterControls
+  }: Props = $props();
+</script>
+
+<Page.BodyHeader align="right" class="p-0!">
+  <Search placeholder={searchPlaceholder} bind:value={searchValue} />
+  {@render filterControls?.()}
+</Page.BodyHeader>
+
+<div class="mx-auto mt-4 w-full flex-1">
+  {#if isLoading}
+    <div class="flex h-64 items-center justify-center">
+      <Spinner />
+    </div>
+  {:else if !programs.length}
+    <Empty title={emptyTitle} description={emptyDescription} icon={GoalIcon} variant="page" />
+  {:else}
+    <ResourceListRow.Group class="w-full">
+      {#each programs as program (program.id)}
+        <ProgramList {program} {isLMS} />
+      {/each}
+    </ResourceListRow.Group>
+  {/if}
+</div>
diff --git a/apps/dashboard/src/lib/features/program/utils/constants.ts b/apps/dashboard/src/lib/features/program/utils/constants.ts
new file mode 100644
index 00000000..2e4846cb
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/utils/constants.ts
@@ -0,0 +1,4 @@
+export type ProgramSortBy = 'name' | 'courses' | 'students' | 'status';
+export type ProgramSortOrder = 'asc' | 'desc';
+export const DEFAULT_PROGRAM_SORT: ProgramSortBy = 'name';
+export const DEFAULT_PROGRAM_SORT_ORDER: ProgramSortOrder = 'asc';
diff --git a/apps/dashboard/src/lib/features/program/utils/error.ts b/apps/dashboard/src/lib/features/program/utils/error.ts
new file mode 100644
index 00000000..42ba08ca
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/utils/error.ts
@@ -0,0 +1,25 @@
+import { ErrorCodes } from '@cio/utils/constants';
+import { tryParseApiErrorBody } from '$lib/utils/services/api/parse-api-error-body';
+
+const PROGRAM_ERROR_CODE_SNACKBAR_KEYS: Record<string, string> = {
+  [ErrorCodes.PROGRAM_FORBIDDEN]: 'snackbar.program.error.code.program_forbidden',
+  [ErrorCodes.PROGRAM_MEMBER_CHECK_FAILED]: 'snackbar.program.error.code.program_member_check_failed',
+  [ErrorCodes.PROGRAM_NOT_FOUND]: 'snackbar.program.error.code.program_not_found',
+  [ErrorCodes.PROGRAM_CREATE_FAILED]: 'snackbar.program.error.code.program_create_failed',
+  [ErrorCodes.PROGRAM_UPDATE_FAILED]: 'snackbar.program.error.code.program_update_failed',
+  [ErrorCodes.PROGRAM_DELETE_FAILED]: 'snackbar.program.error.code.program_delete_failed',
+  [ErrorCodes.PROGRAM_MEMBER_NOT_FOUND]: 'snackbar.program.error.code.program_member_not_found',
+  [ErrorCodes.PROGRAM_NEWSFEED_NOT_FOUND]: 'snackbar.program.error.code.program_newsfeed_not_found',
+  [ErrorCodes.PROGRAM_NEWSFEED_COMMENT_NOT_FOUND]: 'snackbar.program.error.code.program_newsfeed_comment_not_found'
+};
+
+export function getErrorKey(rawError: string | null, kind: 'create' | 'update'): string {
+  const parsed = tryParseApiErrorBody(rawError);
+  const mapped = parsed?.code ? PROGRAM_ERROR_CODE_SNACKBAR_KEYS[parsed.code] : undefined;
+
+  if (mapped) {
+    return mapped;
+  }
+
+  return kind === 'update' ? 'snackbar.program.error.post_update_failed' : 'snackbar.program.error.post_create_failed';
+}
diff --git a/apps/dashboard/src/lib/features/program/utils/types.ts b/apps/dashboard/src/lib/features/program/utils/types.ts
new file mode 100644
index 00000000..66a75c8c
--- /dev/null
+++ b/apps/dashboard/src/lib/features/program/utils/types.ts
@@ -0,0 +1,42 @@
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+
+type ProgramListResponse = InferResponseType<typeof classroomio.program.$get>;
+type ProgramListSuccess = Extract<ProgramListResponse, { success: true }>;
+export type Program = ProgramListSuccess['data'][number];
+
+type ProgramResponse = InferResponseType<(typeof classroomio.program)[':programId']['$get']>;
+type ProgramSuccess = Extract<ProgramResponse, { success: true }>;
+export type ProgramDetail = ProgramSuccess['data'];
+
+type ProgramMembersResponse = InferResponseType<(typeof classroomio.program)[':programId']['members']['$get']>;
+type ProgramMembersSuccess = Extract<ProgramMembersResponse, { success: true }>;
+export type ProgramMember = ProgramMembersSuccess['data'][number];
+
+type ProgramCoursesResponse = InferResponseType<(typeof classroomio.program)[':programId']['courses']['$get']>;
+type ProgramCoursesSuccess = Extract<ProgramCoursesResponse, { success: true }>;
+export type ProgramCourse = ProgramCoursesSuccess['data'][number];
+
+export type ListProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed']['$get'];
+type ListProgramNewsfeedResponse = InferResponseType<ListProgramNewsfeedRequest>;
+type ListProgramNewsfeedSuccess = Extract<ListProgramNewsfeedResponse, { success: true }>;
+export type ProgramNewsfeed = ListProgramNewsfeedSuccess['data'];
+export type ListProgramNewsfeed = ProgramNewsfeed['items'];
+export type ProgramNewsfeedItem = ListProgramNewsfeed[number];
+
+export type CreateProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed']['$post'];
+export type UpdateProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['$put'];
+export type ReactToProgramNewsfeedRequest =
+  (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['react']['$put'];
+export type DeleteProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['$delete'];
+
+export type GetProgramNewsfeedCommentsRequest =
+  (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['comments']['$get'];
+type GetProgramNewsfeedCommentsResponse = InferResponseType<GetProgramNewsfeedCommentsRequest>;
+type GetProgramNewsfeedCommentsSuccess = Extract<GetProgramNewsfeedCommentsResponse, { success: true }>;
+export type ProgramNewsfeedCommentsResponse = GetProgramNewsfeedCommentsSuccess['data'];
+export type ProgramNewsfeedComment = ProgramNewsfeedCommentsResponse[number];
+
+export type CreateProgramNewsfeedCommentRequest =
+  (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['comment']['$post'];
+export type DeleteProgramNewsfeedCommentRequest =
+  (typeof classroomio.program)[':programId']['newsfeed'][':feedId']['comment'][':commentId']['$delete'];
diff --git a/apps/dashboard/src/lib/features/settings/pages/billing.svelte b/apps/dashboard/src/lib/features/settings/pages/billing.svelte
index 9e6eed10..cc51dd57 100644
--- a/apps/dashboard/src/lib/features/settings/pages/billing.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/billing.svelte
@@ -5,10 +5,9 @@
   import HourglassIcon from '@lucide/svelte/icons/hourglass';
   import { openUpgradeModal } from '$lib/utils/functions/org';
   import ReceiptIcon from '@lucide/svelte/icons/receipt';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-
   import { Button } from '@cio/ui/base/button';
   import * as Item from '@cio/ui/base/item';
+  import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
 
   let isRedirecting = $state(false);
 
@@ -28,7 +27,7 @@
       if ($currentOrgPlan?.provider === 'lmz') {
         isRedirecting = true;
         const url = new URL('/api/lmz/subscription', window.location.origin);
-        url.searchParams.set('subscriptionId', $currentOrgPlan?.subscriptionId);
+        url.searchParams.set('subscriptionId', $currentOrgPlan?.subscriptionId || '');
 
         const response = await fetch(url.toString());
         const result = await response.json();
@@ -70,10 +69,14 @@
         <Item.Description>{$t('settings.billing.provider')}</Item.Description>
       </Item.Content>
       <Item.Actions>
-        <Button size="sm" variant="outline" onclick={onOpenBilling} loading={isRedirecting}>
-          <ExternalLinkIcon class="size-4" />
-          {$t('settings.billing.open_billing')}
-        </Button>
+        <HoverableItem>
+          {#snippet children(isHovered)}
+            <Button size="sm" variant="outline" onclick={onOpenBilling} loading={isRedirecting}>
+              <ExternalLinkIcon {isHovered} size={16} ariaHidden={true} />
+              {$t('settings.billing.open_billing')}
+            </Button>
+          {/snippet}
+        </HoverableItem>
       </Item.Actions>
     </Item.Root>
   {/if}
diff --git a/apps/dashboard/src/lib/features/settings/pages/domains.svelte b/apps/dashboard/src/lib/features/settings/pages/domains.svelte
index 54907cd3..09d379e8 100644
--- a/apps/dashboard/src/lib/features/settings/pages/domains.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/domains.svelte
@@ -7,7 +7,6 @@
   import isValidDomain from 'is-valid-domain';
   import { goto } from '$app/navigation';
   import { onMount, untrack } from 'svelte';
-  import { parse } from 'tldts';
 
   import { t } from '$lib/utils/functions/translations';
   import { snackbar } from '$features/ui/snackbar/store';
@@ -157,6 +156,7 @@
     }
 
     const sanitizedDomain = sanitizeDomain(customDomain);
+    const { parse } = await import('tldts/dist/es6/index.js');
     const details = parse(sanitizedDomain);
 
     if (!details.subdomain) {
@@ -338,7 +338,7 @@
         {#if domainSetup?.dnsRecords?.length}
           <Field.Field>
             <div class="space-y-3 rounded-md border px-4 py-3">
-              {#each domainSetup.dnsRecords as record}
+              {#each domainSetup.dnsRecords as record (record.name)}
                 <div class="grid gap-3 sm:grid-cols-[80px,1fr,1fr] sm:items-center">
                   <div>
                     <Field.Label class="font-light">{$t('components.settings.domains.dns_type')}</Field.Label>
diff --git a/apps/dashboard/src/lib/features/settings/pages/index.ts b/apps/dashboard/src/lib/features/settings/pages/index.ts
index b1eb1f76..36b7d90d 100644
--- a/apps/dashboard/src/lib/features/settings/pages/index.ts
+++ b/apps/dashboard/src/lib/features/settings/pages/index.ts
@@ -4,6 +4,7 @@ export { default as TeamsPage } from './teams.svelte';
 export { default as CustomizeLmsPage } from './customize-lms.svelte';
 export { default as OrgPage } from './org.svelte';
 export { default as LandingpagePage } from './landingpage.svelte';
+export { default as LandingpageEditor } from './landingpage-editor.svelte';
 export { default as BillingPage } from './billing.svelte';
 export { default as IntegrationsPage } from './integrations.svelte';
 export { default as AuthPage } from './auth.svelte';
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte
new file mode 100644
index 00000000..5d28d603
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { t } from '$lib/utils/functions/translations';
+  import { Button } from '@cio/ui/base/button';
+  import { CloseButton, UnsavedChanges } from '$features/ui';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { useSidebar } from '@cio/ui/base/sidebar';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import type { OrgLandingPageJson } from '$lib/utils/types/org';
+  import { ContentIcon, ExternalLinkIcon, GoalIcon, HeaderIcon, SettingsIcon } from '@cio/ui/custom/moving-icons';
+
+  import HeroSection from './landingpage-editor/hero-section.svelte';
+  import NavigationSection from './landingpage-editor/navigation-section.svelte';
+  import CalloutSection from './landingpage-editor/callout-section.svelte';
+  import EmbedSection from './landingpage-editor/embed-section.svelte';
+  import FooterSection from './landingpage-editor/footer-section.svelte';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    onSave: () => Promise<void> | void;
+    onClose: () => void;
+  }
+
+  type SectionKey = 'hero' | 'navigation' | 'callout' | 'embed' | 'footer';
+
+  interface SectionDefinition {
+    key: SectionKey;
+    title: string;
+    icon: typeof HeaderIcon;
+    component: Component;
+  }
+
+  let { settings = $bindable(), onSave, onClose }: Props = $props();
+
+  const sidebar = useSidebar();
+
+  let selectedSection = $state<SectionKey | null>(null);
+  let isSaving = $state(false);
+  let hasUnsavedChanges = $state(false);
+
+  const sections: SectionDefinition[] = [
+    {
+      key: 'navigation',
+      title: t.get('settings.landing_page.editor.sections.navigation'),
+      icon: ContentIcon,
+      component: NavigationSection
+    },
+    {
+      key: 'hero',
+      title: t.get('settings.landing_page.editor.sections.hero'),
+      icon: HeaderIcon,
+      component: HeroSection
+    },
+    {
+      key: 'embed',
+      title: t.get('settings.landing_page.editor.sections.embed'),
+      icon: ExternalLinkIcon,
+      component: EmbedSection
+    },
+    {
+      key: 'callout',
+      title: t.get('settings.landing_page.editor.sections.callout'),
+      icon: GoalIcon,
+      component: CalloutSection
+    },
+    {
+      key: 'footer',
+      title: t.get('settings.landing_page.editor.sections.footer'),
+      icon: SettingsIcon,
+      component: FooterSection
+    }
+  ];
+
+  const selectedSectionDefinition = $derived(sections.find((section) => section.key === selectedSection) ?? null);
+
+  function markDirty() {
+    hasUnsavedChanges = true;
+  }
+
+  function handleClose() {
+    if (selectedSection) {
+      selectedSection = null;
+      return;
+    }
+
+    onClose();
+  }
+
+  async function handleSaveClick() {
+    isSaving = true;
+
+    try {
+      await onSave();
+      hasUnsavedChanges = false;
+    } finally {
+      isSaving = false;
+    }
+  }
+</script>
+
+<UnsavedChanges bind:hasUnsavedChanges />
+
+<Sidebar.Header
+  class="flex flex-row! items-center {sidebar.open ? 'justify-between' : 'justify-center'} border-b px-2 py-2"
+>
+  {#if !selectedSection}
+    {#if sidebar.open}
+      <CloseButton onClick={handleClose} />
+
+      <div class="flex items-center gap-2">
+        <Button type="button" variant="outline" onclick={handleSaveClick} loading={isSaving} disabled={isSaving}>
+          {$t('settings.landing_page.editor.save')}
+        </Button>
+      </div>
+    {:else}
+      <CloseButton onClick={handleClose} />
+    {/if}
+  {:else if sidebar.open || !sidebar.isMobile}
+    <div class="flex items-center gap-2">
+      <IconButton onclick={() => (selectedSection = null)}>
+        <ArrowLeftIcon size={16} />
+      </IconButton>
+      <h3 class="text-sm font-semibold">
+        {selectedSectionDefinition?.title}
+      </h3>
+    </div>
+  {:else}
+    <IconButton onclick={() => (selectedSection = null)} tooltip={selectedSectionDefinition?.title ?? ''}>
+      <ArrowLeftIcon size={16} />
+    </IconButton>
+  {/if}
+</Sidebar.Header>
+
+<Sidebar.Content class="flex-1 overflow-y-auto">
+  {#if !selectedSection}
+    <Sidebar.Group>
+      <Sidebar.GroupLabel class="px-2">
+        {$t('settings.landing_page.editor.page_builder')}
+      </Sidebar.GroupLabel>
+      <Sidebar.GroupContent>
+        <Sidebar.Menu>
+          {#each sections as section (section.key)}
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton onclick={() => (selectedSection = section.key)} tooltipContent={section.title}>
+                {@const SectionIcon = section.icon}
+                <SectionIcon size={16} />
+                <span>{section.title}</span>
+                <ChevronRightIcon size={16} />
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+          {/each}
+        </Sidebar.Menu>
+      </Sidebar.GroupContent>
+    </Sidebar.Group>
+  {:else if selectedSectionDefinition}
+    {@const SectionComponent = selectedSectionDefinition.component}
+    <div class="p-4">
+      <SectionComponent bind:settings {markDirty} />
+    </div>
+  {/if}
+</Sidebar.Content>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/button-link-fields.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/button-link-fields.svelte
new file mode 100644
index 00000000..5519c701
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/button-link-fields.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import TrashIcon from '@lucide/svelte/icons/trash';
+  import { Button } from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import { Input } from '@cio/ui/base/input';
+
+  interface Props {
+    label: string;
+    href: string;
+    labelFieldLabel: string;
+    hrefFieldLabel: string;
+    labelPlaceholder?: string;
+    hrefPlaceholder?: string;
+    className?: string;
+    removeAriaLabel?: string;
+    onLabelInput: (value: string) => void;
+    onHrefInput: (value: string) => void;
+    onRemove?: () => void;
+  }
+
+  let {
+    label,
+    href,
+    labelFieldLabel,
+    hrefFieldLabel,
+    labelPlaceholder,
+    hrefPlaceholder,
+    className = 'space-y-4',
+    removeAriaLabel,
+    onLabelInput,
+    onHrefInput,
+    onRemove
+  }: Props = $props();
+</script>
+
+<div class={className}>
+  {#if onRemove}
+    <Button
+      type="button"
+      variant="secondary"
+      class="absolute! -top-3! right-2!"
+      aria-label={removeAriaLabel}
+      onclick={() => onRemove()}
+    >
+      <TrashIcon size={16} />
+    </Button>
+  {/if}
+
+  <Field.Field>
+    <Field.Label>{labelFieldLabel}</Field.Label>
+    <Input value={label} placeholder={labelPlaceholder} oninput={(event) => onLabelInput(event.currentTarget.value)} />
+  </Field.Field>
+
+  <Field.Field>
+    <Field.Label>{hrefFieldLabel}</Field.Label>
+    <Input value={href} placeholder={hrefPlaceholder} oninput={(event) => onHrefInput(event.currentTarget.value)} />
+  </Field.Field>
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte
new file mode 100644
index 00000000..09d154da
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Field from '@cio/ui/base/field';
+  import { Input } from '@cio/ui/base/input';
+  import { Switch } from '@cio/ui/base/switch';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import type { OrgLandingPageCallout, OrgLandingPageJson } from '$lib/utils/types/org';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    markDirty: () => void;
+  }
+
+  let { settings = $bindable(), markDirty }: Props = $props();
+
+  function setter(value: unknown, setterKey: string) {
+    if (typeof value === 'undefined') {
+      return;
+    }
+
+    const nextSettings = cloneDeep(settings);
+    set(nextSettings, setterKey, value);
+    settings = nextSettings;
+    markDirty();
+  }
+
+  function ensureCallout(): OrgLandingPageCallout {
+    if (settings.callout) {
+      return settings.callout;
+    }
+
+    const callout: OrgLandingPageCallout = {
+      heading: t.get('settings.landing_page.editor.callout.heading_default'),
+      description: '',
+      action: {
+        label: t.get('settings.landing_page.editor.callout.action_label_default'),
+        href: '#'
+      }
+    };
+
+    settings = {
+      ...settings,
+      callout
+    };
+    markDirty();
+
+    return callout;
+  }
+
+  function setCalloutEnabled(enabled: boolean) {
+    if (!enabled) {
+      settings = {
+        ...settings,
+        callout: undefined
+      };
+      markDirty();
+      return;
+    }
+
+    setter(ensureCallout(), 'callout');
+  }
+</script>
+
+<Field.Group class="space-y-6">
+  <Field.Set>
+    <Field.Legend>{$t('settings.landing_page.editor.sections.callout')}</Field.Legend>
+
+    <div class="space-y-6">
+      <Field.Field orientation="horizontal">
+        <Switch
+          checked={Boolean(settings.callout)}
+          onCheckedChange={(checked) => setCalloutEnabled(checked === true)}
+        />
+        <Field.Label>{$t('settings.landing_page.editor.callout.toggle')}</Field.Label>
+      </Field.Field>
+
+      {#if settings.callout}
+        <Field.Field>
+          <Field.Label>{$t('settings.landing_page.editor.callout.heading')}</Field.Label>
+          <Input
+            value={settings.callout.heading}
+            placeholder={$t('settings.landing_page.editor.callout.heading_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'callout.heading')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('settings.landing_page.editor.callout.description')}</Field.Label>
+          <Textarea
+            class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y"
+            value={settings.callout.description}
+            placeholder={$t('settings.landing_page.editor.callout.description_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'callout.description')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('settings.landing_page.editor.callout.action_label')}</Field.Label>
+          <Input
+            value={settings.callout.action.label}
+            placeholder={$t('settings.landing_page.editor.callout.action_label_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'callout.action.label')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('settings.landing_page.editor.callout.action_href')}</Field.Label>
+          <Input
+            value={settings.callout.action.href}
+            placeholder={$t('settings.landing_page.editor.callout.action_href_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'callout.action.href')}
+          />
+        </Field.Field>
+      {/if}
+    </div>
+  </Field.Set>
+</Field.Group>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte
new file mode 100644
index 00000000..6eb767b2
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Field from '@cio/ui/base/field';
+  import { Switch } from '@cio/ui/base/switch';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import type { OrgLandingPageEmbed, OrgLandingPageJson } from '$lib/utils/types/org';
+  import ButtonLinkFields from './button-link-fields.svelte';
+  import { Input } from '@cio/ui/base/input';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    markDirty: () => void;
+  }
+
+  let { settings = $bindable(), markDirty }: Props = $props();
+
+  function setter(value: unknown, setterKey: string) {
+    if (typeof value === 'undefined') {
+      return;
+    }
+
+    const nextSettings = cloneDeep(settings);
+    set(nextSettings, setterKey, value);
+    settings = nextSettings;
+    markDirty();
+  }
+
+  function ensureEmbed(): OrgLandingPageEmbed {
+    if (settings.embed) {
+      return settings.embed;
+    }
+
+    const embed = {
+      title: t.get('settings.landing_page.editor.embed.title'),
+      description: '',
+      code: '',
+      secondaryAction: undefined
+    };
+
+    settings = {
+      ...settings,
+      embed
+    };
+    markDirty();
+
+    return embed;
+  }
+
+  function setEmbedEnabled(enabled: boolean) {
+    if (!enabled) {
+      settings = {
+        ...settings,
+        embed: undefined
+      };
+      markDirty();
+      return;
+    }
+
+    setter(ensureEmbed(), 'embed');
+  }
+
+  function updateSecondaryAction(label: string, href: string) {
+    if (!settings.embed) {
+      return;
+    }
+
+    setter(
+      {
+        label,
+        href
+      },
+      'embed.secondaryAction'
+    );
+  }
+</script>
+
+<Field.Group class="space-y-6">
+  <Field.Set>
+    <Field.Legend>{$t('settings.landing_page.editor.sections.embed')}</Field.Legend>
+
+    <div class="space-y-6">
+      <Field.Field orientation="horizontal">
+        <Switch checked={Boolean(settings.embed)} onCheckedChange={(checked) => setEmbedEnabled(checked === true)} />
+        <Field.Label>{$t('settings.landing_page.editor.embed.toggle')}</Field.Label>
+      </Field.Field>
+
+      {#if settings.embed}
+        <Field.Field>
+          <Field.Label>{$t('settings.landing_page.editor.embed.title')}</Field.Label>
+          <Input
+            value={settings.embed.title}
+            placeholder={$t('settings.landing_page.editor.embed.title_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'embed.title')}
+          />
+        </Field.Field>
+
+        <Field.Field class="min-w-0">
+          <Field.Label>{$t('settings.landing_page.editor.embed.description')}</Field.Label>
+          <Textarea
+            class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y"
+            value={settings.embed.description ?? ''}
+            placeholder={$t('settings.landing_page.editor.embed.description_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'embed.description')}
+          />
+        </Field.Field>
+
+        <Field.Field class="min-w-0">
+          <Field.Label>{$t('settings.landing_page.editor.embed.code')}</Field.Label>
+          <Field.Description>{$t('settings.landing_page.editor.embed.code_description')}</Field.Description>
+          <Textarea
+            class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y"
+            value={settings.embed.code}
+            placeholder={$t('settings.landing_page.editor.embed.code_placeholder')}
+            oninput={(event) => setter(event.currentTarget.value, 'embed.code')}
+          />
+        </Field.Field>
+
+        <ButtonLinkFields
+          label={settings.embed.secondaryAction?.label ?? ''}
+          href={settings.embed.secondaryAction?.href ?? ''}
+          labelFieldLabel={$t('settings.landing_page.editor.embed.secondary_label')}
+          hrefFieldLabel={$t('settings.landing_page.editor.embed.secondary_href')}
+          labelPlaceholder={$t('settings.landing_page.editor.embed.secondary_label')}
+          hrefPlaceholder={$t('settings.landing_page.editor.embed.secondary_href')}
+          onLabelInput={(value) => updateSecondaryAction(value, settings.embed.secondaryAction?.href ?? '')}
+          onHrefInput={(value) => updateSecondaryAction(settings.embed.secondaryAction?.label ?? '', value)}
+        />
+      {/if}
+    </div>
+  </Field.Set>
+</Field.Group>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/footer-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/footer-section.svelte
new file mode 100644
index 00000000..d8e63746
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/footer-section.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import { t } from '$lib/utils/functions/translations';
+  import { Button } from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import type { OrgLandingPageJson } from '$lib/utils/types/org';
+  import ButtonLinkFields from './button-link-fields.svelte';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    markDirty: () => void;
+  }
+
+  let { settings = $bindable(), markDirty }: Props = $props();
+
+  function setter(value: unknown, setterKey: string) {
+    if (typeof value === 'undefined') {
+      return;
+    }
+
+    const nextSettings = cloneDeep(settings);
+    set(nextSettings, setterKey, value);
+    settings = nextSettings;
+    markDirty();
+  }
+
+  function addFooterLink() {
+    settings = {
+      ...settings,
+      footerLinks: [
+        ...settings.footerLinks,
+        {
+          label: t.get('settings.landing_page.editor.footer.default_label'),
+          href: '#'
+        }
+      ]
+    };
+    markDirty();
+  }
+
+  function removeFooterLink(index: number) {
+    settings = {
+      ...settings,
+      footerLinks: settings.footerLinks.filter((_, linkIndex) => linkIndex !== index)
+    };
+    markDirty();
+  }
+</script>
+
+<Field.Group class="space-y-6">
+  <Field.Set>
+    <Field.Legend>{$t('settings.landing_page.editor.sections.footer')}</Field.Legend>
+
+    <div class="space-y-4">
+      <Field.Field class="mb-6">
+        <Field.Label>{$t('settings.landing_page.editor.footer.text')}</Field.Label>
+        <Textarea
+          value={settings.footerText}
+          oninput={(event) => {
+            settings = {
+              ...settings,
+              footerText: event.currentTarget.value
+            };
+            markDirty();
+          }}
+        />
+      </Field.Field>
+
+      <div class="space-y-4">
+        {#each settings.footerLinks as footerLink, index (index)}
+          <ButtonLinkFields
+            label={footerLink.label}
+            href={footerLink.href}
+            labelFieldLabel={$t('settings.landing_page.editor.footer.link_label')}
+            hrefFieldLabel={$t('settings.landing_page.editor.footer.link_href')}
+            className="group ui:border-border relative space-y-3 border-b pb-5"
+            removeAriaLabel={$t('settings.landing_page.editor.footer.remove')}
+            onLabelInput={(value) => setter(value, `footerLinks.${index}.label`)}
+            onHrefInput={(value) => setter(value, `footerLinks.${index}.href`)}
+            onRemove={() => removeFooterLink(index)}
+          />
+        {/each}
+
+        <Button type="button" variant="outline" onclick={addFooterLink}>
+          {$t('settings.landing_page.editor.footer.add')}
+        </Button>
+      </div>
+    </div>
+  </Field.Set>
+</Field.Group>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/hero-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/hero-section.svelte
new file mode 100644
index 00000000..e6ce1ff7
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/hero-section.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import { t } from '$lib/utils/functions/translations';
+  import { Button } from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import { Input } from '@cio/ui/base/input';
+  import { Switch } from '@cio/ui/base/switch';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import { UploadWidget } from '$features/ui';
+  import { handleOpenWidget } from '$features/ui/course-landing-page/store';
+  import type { OrgLandingPageJson } from '$lib/utils/types/org';
+  import ButtonLinkFields from './button-link-fields.svelte';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    markDirty: () => void;
+  }
+
+  let { settings = $bindable(), markDirty }: Props = $props();
+
+  let activeWidget = $state<'hero-image' | ''>('');
+
+  function setter(value: unknown, setterKey: string) {
+    if (typeof value === 'undefined') {
+      return;
+    }
+
+    const nextSettings = cloneDeep(settings);
+    set(nextSettings, setterKey, value);
+    settings = nextSettings;
+    markDirty();
+  }
+
+  function toggleSecondaryAction(enabled: boolean) {
+    if (!enabled) {
+      settings = {
+        ...settings,
+        hero: {
+          ...settings.hero,
+          secondaryAction: undefined
+        }
+      };
+      markDirty();
+      return;
+    }
+
+    setter(
+      settings.hero.secondaryAction ?? {
+        label: t.get('settings.landing_page.editor.hero.secondary_label'),
+        href: '/courses'
+      },
+      'hero.secondaryAction'
+    );
+  }
+</script>
+
+<Field.Group class="space-y-6">
+  <Field.Set>
+    <Field.Legend>{$t('settings.landing_page.editor.sections.hero')}</Field.Legend>
+
+    <div class="space-y-4">
+      <Field.Field>
+        <Field.Label>{$t('settings.landing_page.editor.hero.heading')}</Field.Label>
+        <Input value={settings.hero.heading} oninput={(event) => setter(event.currentTarget.value, 'hero.heading')} />
+      </Field.Field>
+
+      <Field.Field>
+        <Field.Label>{$t('settings.landing_page.editor.hero.subheading')}</Field.Label>
+        <Textarea
+          value={settings.hero.subheading}
+          oninput={(event) => setter(event.currentTarget.value, 'hero.subheading')}
+        />
+      </Field.Field>
+
+      <ButtonLinkFields
+        label={settings.hero.primaryAction.label}
+        href={settings.hero.primaryAction.href}
+        labelFieldLabel={$t('settings.landing_page.editor.hero.primary_label')}
+        hrefFieldLabel={$t('settings.landing_page.editor.hero.primary_href')}
+        labelPlaceholder={$t('settings.landing_page.editor.hero.primary_label')}
+        hrefPlaceholder={$t('settings.landing_page.editor.hero.primary_href')}
+        onLabelInput={(value) => setter(value, 'hero.primaryAction.label')}
+        onHrefInput={(value) => setter(value, 'hero.primaryAction.href')}
+      />
+
+      <Field.Field orientation="horizontal">
+        <Switch
+          checked={Boolean(settings.hero.secondaryAction)}
+          onCheckedChange={(checked) => toggleSecondaryAction(checked === true)}
+        />
+        <Field.Label>{$t('settings.landing_page.editor.hero.secondary_toggle')}</Field.Label>
+      </Field.Field>
+
+      {#if settings.hero.secondaryAction}
+        <ButtonLinkFields
+          label={settings.hero.secondaryAction.label}
+          href={settings.hero.secondaryAction.href}
+          labelFieldLabel={$t('settings.landing_page.editor.hero.secondary_label')}
+          hrefFieldLabel={$t('settings.landing_page.editor.hero.secondary_href')}
+          labelPlaceholder={$t('settings.landing_page.editor.hero.secondary_label')}
+          hrefPlaceholder={$t('settings.landing_page.editor.hero.secondary_href')}
+          onLabelInput={(value) => setter(value, 'hero.secondaryAction.label')}
+          onHrefInput={(value) => setter(value, 'hero.secondaryAction.href')}
+        />
+      {/if}
+
+      <Field.Field>
+        <Field.Label>{$t('settings.landing_page.editor.hero.image')}</Field.Label>
+        {#if settings.hero.image}
+          <img src={settings.hero.image} alt="" class="border-border/60 mb-3 w-full rounded-lg border object-cover" />
+        {/if}
+
+        <div class="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onclick={() => {
+              activeWidget = 'hero-image';
+              $handleOpenWidget.open = true;
+            }}
+          >
+            {$t('settings.landing_page.editor.hero.upload')}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            onclick={() => {
+              setter('', 'hero.image');
+            }}
+          >
+            {$t('settings.landing_page.editor.hero.clear')}
+          </Button>
+        </div>
+
+        {#if $handleOpenWidget.open && activeWidget === 'hero-image'}
+          <UploadWidget
+            imageURL={settings.hero.image}
+            onchange={(imageUrl) => {
+              setter(imageUrl, 'hero.image');
+              $handleOpenWidget.open = false;
+            }}
+          />
+        {/if}
+      </Field.Field>
+    </div>
+  </Field.Set>
+</Field.Group>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/navigation-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/navigation-section.svelte
new file mode 100644
index 00000000..863aaff2
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/navigation-section.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import { t } from '$lib/utils/functions/translations';
+  import { Button } from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import type { OrgLandingPageJson } from '$lib/utils/types/org';
+  import ButtonLinkFields from './button-link-fields.svelte';
+
+  interface Props {
+    settings: OrgLandingPageJson;
+    markDirty: () => void;
+  }
+
+  let { settings = $bindable(), markDirty }: Props = $props();
+
+  function setter(value: unknown, setterKey: string) {
+    if (typeof value === 'undefined') {
+      return;
+    }
+
+    const nextSettings = cloneDeep(settings);
+    set(nextSettings, setterKey, value);
+    settings = nextSettings;
+    markDirty();
+  }
+
+  function addNavigationItem() {
+    settings = {
+      ...settings,
+      navItems: [
+        ...settings.navItems,
+        {
+          label: t.get('settings.landing_page.editor.navigation.default_label'),
+          href: '#'
+        }
+      ]
+    };
+    markDirty();
+  }
+
+  function removeNavigationItem(index: number) {
+    settings = {
+      ...settings,
+      navItems: settings.navItems.filter((_, itemIndex) => itemIndex !== index)
+    };
+    markDirty();
+  }
+</script>
+
+<div class="space-y-7">
+  <Field.Legend>{$t('settings.landing_page.editor.sections.navigation')}</Field.Legend>
+
+  {#each settings.navItems as navItem, index (index)}
+    <ButtonLinkFields
+      label={navItem.label}
+      href={navItem.href}
+      labelFieldLabel={$t('settings.landing_page.editor.navigation.link_label')}
+      hrefFieldLabel={$t('settings.landing_page.editor.navigation.link_href')}
+      className="group ui:border-border relative space-y-3 border-b pb-5"
+      removeAriaLabel={$t('settings.landing_page.editor.navigation.remove')}
+      onLabelInput={(value) => setter(value, `navItems.${index}.label`)}
+      onHrefInput={(value) => setter(value, `navItems.${index}.href`)}
+      onRemove={() => removeNavigationItem(index)}
+    />
+  {/each}
+  <Button type="button" variant="outline" onclick={addNavigationItem}>
+    {$t('settings.landing_page.editor.navigation.add')}
+  </Button>
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage.svelte
index e4c9afff..424a61be 100644
--- a/apps/dashboard/src/lib/features/settings/pages/landingpage.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage.svelte
@@ -1,761 +1,177 @@
 <script lang="ts">
-  import { Label } from '@cio/ui/base/label';
-  import { Switch } from '@cio/ui/base/switch';
-  import TrashIcon from '@lucide/svelte/icons/trash';
-  import * as RadioGroup from '@cio/ui/base/radio-group';
-
-  import { landingPageSettings } from '../utils/store';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import { SvelteURLSearchParams } from 'svelte/reactivity';
+  import { currentOrg, currentOrgPath, isFreePlan } from '$lib/utils/store/org';
+  import { openUpgradeModal } from '$lib/utils/functions/org';
   import { t } from '$lib/utils/functions/translations';
-  import { orgApi } from '$features/org/api/org.svelte';
-  import { handleOpenWidget } from '$features/ui/course-landing-page/store';
-
-  import { Checkbox } from '@cio/ui/base/checkbox';
-  import { Input } from '@cio/ui/base/input';
-  import { Textarea } from '@cio/ui/base/textarea';
   import { Button } from '@cio/ui/base/button';
-  import { UploadWidget, UnsavedChanges } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
-  import type { OrgLandingPageJson } from '$lib/utils/types/org';
+  import * as RadioGroup from '@cio/ui/base/radio-group';
+  import { UnsavedChanges } from '$features/ui';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import {
+    createDefaultLandingPageSettings,
+    landingPageThemes,
+    normalizeLandingPageSettings
+  } from '$features/org/utils/landing-page';
+  import { landingPageSettings } from '../utils/store';
+  import { PremiumIcon } from '@cio/ui/custom/moving-icons';
   import type { AccountOrg } from '$features/app/types';
 
-  let creatingNewQuestion = $state(false);
-  let creatingNewCustomLink = $state(false);
-  let hasUnsavedChanges = $state(false);
-  let widgetKey = $state('');
-  const banner = [
-    { value: 'video', label: `${$t('settings.landing_page.actions.banner_type.video')}` },
-    { value: 'image', label: `${$t('settings.landing_page.actions.banner_type.image')}` }
-  ];
+  let hasInitialized = $state(false);
+  let skipUnsavedPrompt = $state(false);
+  let { hasUnsavedChanges = $bindable(false) }: { hasUnsavedChanges?: boolean } = $props();
 
-  let newQuestion = $state({
-    title: '',
-    content: ''
-  });
+  const themeCards = [
+    {
+      value: 'minimal',
+      preview: 'https://assets.cdn.clsrio.com/www/templates/minimal.png',
+      titleKey: 'settings.landing_page.theme.cards.minimal.title',
+      descriptionKey: 'settings.landing_page.theme.cards.minimal.description'
+    },
+    {
+      value: 'bold',
+      preview: 'https://assets.cdn.clsrio.com/www/templates/bold.png',
+      titleKey: 'settings.landing_page.theme.cards.bold.title',
+      descriptionKey: 'settings.landing_page.theme.cards.bold.description'
+    },
+    {
+      value: 'classic',
+      preview: 'https://assets.cdn.clsrio.com/www/templates/classic.png',
+      titleKey: 'settings.landing_page.theme.cards.classic.title',
+      descriptionKey: 'settings.landing_page.theme.cards.classic.description'
+    }
+  ] as const;
 
-  let newCustomLink = $state({
-    label: '',
-    url: '',
-    openInNewTab: false
-  });
-
-  function widgetControl(key: string) {
-    widgetKey = key;
-    $handleOpenWidget.open = true;
+  function isPaidTheme(theme: string): boolean {
+    return theme !== 'minimal';
   }
 
-  function createNewFaq() {
-    newQuestion = {
-      title: '',
-      content: ''
+  function selectTheme(theme: (typeof landingPageThemes)[number]) {
+    if ($isFreePlan && isPaidTheme(theme)) {
+      openUpgradeModal();
+      return;
+    }
+
+    $landingPageSettings.theme = theme;
+    hasUnsavedChanges = true;
+  }
+
+  function isLandingPageTheme(value: string | null): value is (typeof landingPageThemes)[number] {
+    return value === 'minimal' || value === 'bold' || value === 'classic';
+  }
+
+  function getEditContentUrl() {
+    const query = new SvelteURLSearchParams(page.url.searchParams);
+    query.set('theme', $landingPageSettings.theme);
+    return `${$currentOrgPath}/settings/landingpage/edit?${query.toString()}`;
+  }
+
+  $effect(() => {
+    if (hasInitialized || !$currentOrg.id) {
+      return;
+    }
+
+    const normalizedLandingPage = normalizeLandingPageSettings($currentOrg.landingpage);
+    const orgDefaultLandingPageSettings = createDefaultLandingPageSettings();
+    const queryTheme = page.url.searchParams.get('theme');
+    $landingPageSettings = {
+      ...orgDefaultLandingPageSettings,
+      ...normalizedLandingPage
     };
-    creatingNewQuestion = true;
-  }
-
-  function saveNewFAQ() {
-    if (newQuestion.title !== '' && newQuestion.content !== '') {
-      $landingPageSettings.faq.questions = [
-        ...$landingPageSettings.faq.questions,
-        {
-          id: new Date().getTime(),
-          title: newQuestion.title,
-          content: newQuestion.content
-        }
-      ];
-      creatingNewQuestion = false;
+    if (isLandingPageTheme(queryTheme)) {
+      $landingPageSettings.theme = queryTheme;
+      hasUnsavedChanges = queryTheme !== normalizedLandingPage.theme;
+    } else {
+      hasUnsavedChanges = false;
     }
-  }
-
-  function cancelNewFAQ() {
-    creatingNewQuestion = false;
-  }
-
-  function deleteFaq(id: number) {
-    let faqs = $landingPageSettings.faq.questions;
-    const filteredFaq = faqs.filter((faq) => faq.id !== id);
-    $landingPageSettings.faq.questions = filteredFaq;
-  }
-
-  function createNewCustomLink() {
-    newCustomLink = {
-      label: '',
-      url: '',
-      openInNewTab: false
-    };
-    creatingNewCustomLink = true;
-  }
-
-  function saveNewCustomLink() {
-    if (newCustomLink.label !== '' && newCustomLink.url !== '') {
-      $landingPageSettings.customLinks.links = [
-        ...$landingPageSettings.customLinks.links,
-        {
-          id: new Date().getTime(),
-          label: newCustomLink.label,
-          url: newCustomLink.url,
-          openInNewTab: newCustomLink.openInNewTab
-        }
-      ];
-      creatingNewCustomLink = false;
-    }
-  }
-
-  function cancelNewCustomLink() {
-    creatingNewCustomLink = false;
-  }
-
-  function deleteCustomLink(id: number) {
-    let customLinks = $landingPageSettings.customLinks.links;
-    const filteredCustomLinks = customLinks.filter((link) => link.id !== id);
-    $landingPageSettings.customLinks.links = filteredCustomLinks;
-  }
-
-  const checkPrefix = (inputValue: string) => {
-    if (!inputValue) return;
-
-    if (inputValue.trim() !== '') {
-      if (!inputValue.startsWith('https://')) {
-        inputValue = 'https://' + inputValue;
-      }
-    }
-    return inputValue;
-  };
+    hasInitialized = true;
+  });
 
   export async function handleSave() {
-    $landingPageSettings.footer.twitter = checkPrefix($landingPageSettings.footer.twitter) || '';
-    $landingPageSettings.footer.linkedin = checkPrefix($landingPageSettings.footer.linkedin) || '';
-    $landingPageSettings.footer.facebook = checkPrefix($landingPageSettings.footer.facebook) || '';
+    const updatedLandingPage = normalizeLandingPageSettings($landingPageSettings as AccountOrg['landingpage']);
 
     await orgApi.update($currentOrg.id, {
-      landingpage: $landingPageSettings as AccountOrg['landingpage']
+      landingpage: updatedLandingPage as AccountOrg['landingpage']
     });
 
     if (orgApi.success) {
-      $currentOrg.landingpage = $landingPageSettings as AccountOrg['landingpage'];
+      $landingPageSettings = updatedLandingPage;
+      $currentOrg.landingpage = updatedLandingPage as AccountOrg['landingpage'];
       hasUnsavedChanges = false;
     }
   }
-
-  // Set default from store
-  currentOrg.subscribe((cOrg) => {
-    if (cOrg.landingpage && Object.keys(cOrg.landingpage).length) {
-      const landingpage = { ...(cOrg.landingpage as unknown as OrgLandingPageJson) };
-
-      // Fallbacks for new keys we added into JSON, in case a user already saved the old JSON
-      if (!landingpage?.header?.banner) {
-        landingpage.header.banner = $landingPageSettings.header.banner;
-      }
-
-      if (!landingpage?.header?.background) {
-        landingpage.header.background = $landingPageSettings.header.background;
-      }
-
-      if (!landingpage.customLinks) {
-        landingpage.customLinks = $landingPageSettings.customLinks;
-      }
-      $landingPageSettings = {
-        ...landingpage
-      };
-    }
-  });
 </script>
 
-<UnsavedChanges bind:hasUnsavedChanges />
+<UnsavedChanges bind:hasUnsavedChanges skipPrompt={skipUnsavedPrompt} />
 
-<Field.Group class="w-full max-w-md! px-2">
+<Field.Group class="w-full px-2">
   <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.header.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.header.show
-          ? $t('settings.landing_page.show_section')
-          : $t('settings.landing_page.hide_section')}
-      </Field.Label>
-    </Field.Field>
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <Field.Legend>{$t('settings.landing_page.theme.heading')}</Field.Legend>
+        <Field.Description>{$t('settings.landing_page.theme.description')}</Field.Description>
+      </div>
 
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.header.title}
-          oninput={() => (hasUnsavedChanges = true)}
-          class="w-full"
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.title_highlight')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.highlight')}
-          class="w-full"
-          bind:value={$landingPageSettings.header.titleHighlight}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.subtitle')}</Field.Label>
-        <Textarea
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')}
-          class="w-full"
-          bind:value={$landingPageSettings.header.subtitle}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
+      <Button
+        variant="outline"
+        onclick={async () => {
+          skipUnsavedPrompt = true;
 
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.actions.heading')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.label')}
-          class="w-full"
-          bind:value={$landingPageSettings.header.action.label}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.actions.link')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.link')}
-          bind:value={$landingPageSettings.header.action.link}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field orientation="horizontal">
-        <Switch
-          bind:checked={$landingPageSettings.header.action.redirect}
-          onCheckedChange={() => (hasUnsavedChanges = true)}
-        />
-        <Field.Label class="text-gray-600">
-          {$landingPageSettings.header.action.redirect
-            ? $t('settings.landing_page.actions.redirect')
-            : $t('settings.landing_page.actions.no_redirect')}
-        </Field.Label>
-      </Field.Field>
+          try {
+            await goto(resolve(getEditContentUrl(), {}));
+          } finally {
+            skipUnsavedPrompt = false;
+          }
+        }}
+      >
+        {$t('settings.landing_page.content.edit')}
+      </Button>
+    </div>
 
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.actions.banner_type.heading')}</Field.Label>
-        <RadioGroup.Root
-          bind:value={$landingPageSettings.header.banner.type}
-          onValueChange={() => {
-            if (hasUnsavedChanges) return;
-            hasUnsavedChanges = true;
-          }}
-        >
-          {#each banner as item}
-            <div class="flex items-center space-x-2">
-              <RadioGroup.Item value={item.value} id={item.value} />
-              <Label for={item.value} class="cursor-pointer">{item.label}</Label>
+    <Field.Field>
+      <RadioGroup.Root
+        bind:value={$landingPageSettings.theme}
+        class="grid gap-4 md:grid-cols-3"
+        onValueChange={() => {
+          hasUnsavedChanges = true;
+        }}
+      >
+        {#each themeCards as themeCard (themeCard.value)}
+          {@const isLocked = $isFreePlan && isPaidTheme(themeCard.value)}
+          <RadioGroup.Item value={themeCard.value} id={themeCard.value} class="sr-only" />
+          <button
+            type="button"
+            onclick={() => selectTheme(themeCard.value)}
+            aria-pressed={$landingPageSettings.theme === themeCard.value}
+            class={`group relative cursor-pointer rounded-xl border transition ${
+              isLocked
+                ? 'border-border opacity-75 hover:border-blue-500/60'
+                : $landingPageSettings.theme === themeCard.value
+                  ? 'border-primary ring-primary/20 ring-2'
+                  : 'border-border hover:border-primary/60'
+            }`}
+          >
+            {#if isLocked}
+              <div
+                class="absolute top-2 right-2 z-10 flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-xs font-medium text-white shadow-sm"
+              >
+                <PremiumIcon size={14} color="white" />
+                Upgrade
+              </div>
+            {/if}
+            <div class="bg-background mb-4 overflow-hidden rounded-xl">
+              <img src={themeCard.preview} alt={$t(themeCard.titleKey)} class="h-50 w-full object-cover object-top" />
             </div>
-          {/each}
-        </RadioGroup.Root>
-      </Field.Field>
-
-      {#if $landingPageSettings.header.banner.type === 'video'}
-        <Field.Field>
-          <Field.Label>{$t('settings.landing_page.actions.link')}</Field.Label>
-          <Input
-            placeholder={$t('course.navItem.lessons.exercises.all_exercises.video')}
-            bind:value={$landingPageSettings.header.banner.video}
-            oninput={() => (hasUnsavedChanges = true)}
-          />
-        </Field.Field>
-      {:else}
-        <Field.Field>
-          <Button variant="outline" onclick={() => widgetControl('header.banner.image')}>
-            {$t('settings.landing_page.about.select_image')}
-          </Button>
-        </Field.Field>
-      {/if}
-      {#if $landingPageSettings.header.banner.image && $landingPageSettings.header.banner.type === 'image'}
-        <img alt="bannerImage" src={$landingPageSettings.header.banner.image} class="mt-2 w-full rounded-md" />
-      {/if}
-
-      <Field.Field orientation="horizontal">
-        <Switch
-          bind:checked={$landingPageSettings.header.banner.show}
-          onCheckedChange={() => (hasUnsavedChanges = true)}
-        />
-        <Field.Label class="text-gray-600">
-          {$landingPageSettings.header.banner.show
-            ? $t('settings.landing_page.actions.show_banner')
-            : $t('settings.landing_page.actions.hide_banner')}
-        </Field.Label>
-      </Field.Field>
-      {#if $handleOpenWidget.open && widgetKey === 'banner'}
-        <UploadWidget
-          bind:imageURL={$landingPageSettings.header.banner.image}
-          onchange={() => (hasUnsavedChanges = true)}
-        />
-      {/if}
-
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.background.title')}</Field.Label>
-        <Button variant="outline" onclick={() => widgetControl('background')}>
-          {$t('settings.landing_page.about.select_image')}
-        </Button>
-      </Field.Field>
-      {#if $landingPageSettings.header.background?.image}
-        <img alt="backgroundImage" src={$landingPageSettings.header.background.image} class="mt-2 w-full rounded-md" />
-      {/if}
-
-      <Field.Field orientation="horizontal">
-        <Switch
-          checked={$landingPageSettings.header.background?.show}
-          onCheckedChange={() => {
-            hasUnsavedChanges = true;
-            if (!$landingPageSettings.header.background) {
-              $landingPageSettings.header.background = {
-                image: '',
-                show: true
-              };
-            } else {
-              $landingPageSettings.header.background.show = !$landingPageSettings.header.background.show;
-            }
-          }}
-        />
-        <Field.Label class="text-gray-600">
-          {$landingPageSettings.header.background?.show
-            ? $t('settings.landing_page.background.show_background')
-            : $t('settings.landing_page.background.hide_background')}
-        </Field.Label>
-      </Field.Field>
-      {#if $handleOpenWidget.open && widgetKey === 'background'}
-        <UploadWidget
-          imageURL={$landingPageSettings.header.background?.image}
-          onchange={(imgUrl) => {
-            hasUnsavedChanges = true;
-
-            if (!$landingPageSettings.header.background) {
-              $landingPageSettings.header.background = {
-                image: imgUrl,
-                show: true
-              };
-            } else {
-              $landingPageSettings.header.background.image = imgUrl;
-            }
-          }}
-        />
-      {/if}
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.about.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.aboutUs.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.aboutUs.show
-          ? $t('settings.landing_page.show_section')
-          : $t('settings.landing_page.hide_section')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.about.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.aboutUs.title}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.about.content')}</Field.Label>
-        <Textarea
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.content')}
-          bind:value={$landingPageSettings.aboutUs.content}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-
-      <Field.Field>
-        <Field.Label class="font-bold">{$t('settings.landing_page.about.upload_an_image')}</Field.Label>
-        <Button variant="outline" onclick={() => widgetControl('about-us')}>
-          {$t('settings.landing_page.about.select_image')}
-        </Button>
-        {#if $landingPageSettings.aboutUs.imageUrl}
-          <img alt="About us" src={$landingPageSettings.aboutUs.imageUrl} class="mt-2 w-full rounded-md" />
-        {/if}
-        {#if $handleOpenWidget.open && widgetKey === 'about-us'}
-          <UploadWidget bind:imageURL={$landingPageSettings.aboutUs.imageUrl} />
-        {/if}
-      </Field.Field>
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.courses.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.courses.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.courses.show
-          ? $t('settings.landing_page.courses.show_section')
-          : $t('settings.landing_page.courses.hide_section')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.courses.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.courses.title}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.courses.title_highlight')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.highlight')}
-          bind:value={$landingPageSettings.courses.titleHighlight}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.courses.subtitle')}</Field.Label>
-        <Textarea
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')}
-          bind:value={$landingPageSettings.courses.subtitle}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.faq.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.faq.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.faq.show
-          ? $t('settings.landing_page.faq.show_section')
-          : $t('settings.landing_page.faq.hide_section')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.faq.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.faq.title}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-
-      {#each $landingPageSettings.faq.questions as item (item.id)}
-        <Field.Field>
-          <Field.Label>{$t('settings.landing_page.faq.question')}</Field.Label>
-          <Input
-            placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_question_here')}
-            bind:value={item.title}
-            oninput={() => (hasUnsavedChanges = true)}
-          />
-        </Field.Field>
-        <Field.Field>
-          <Field.Label>{$t('settings.landing_page.faq.answer')}</Field.Label>
-          <Textarea
-            placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')}
-            bind:value={item.content}
-            oninput={() => (hasUnsavedChanges = true)}
-          />
-        </Field.Field>
-        <Button variant="ghost" size="icon" onclick={() => deleteFaq(item.id)}>
-          <TrashIcon size={16} />
-        </Button>
-      {/each}
-
-      {#if creatingNewQuestion}
-        <Field.Field>
-          <Field.Label>{$t('settings.landing_page.faq.question')}</Field.Label>
-          <Input
-            placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_question_here')}
-            bind:value={newQuestion.title}
-            oninput={() => (hasUnsavedChanges = true)}
-          />
-        </Field.Field>
-        <Field.Field>
-          <Field.Label>{$t('settings.landing_page.faq.answer')}</Field.Label>
-          <Textarea
-            placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')}
-            bind:value={newQuestion.content}
-            oninput={() => (hasUnsavedChanges = true)}
-          />
-        </Field.Field>
-        <Field.Field orientation="horizontal">
-          <Button variant="outline" onclick={saveNewFAQ}>
-            {$t('settings.landing_page.faq.save')}
-          </Button>
-          <Button variant="outline" onclick={cancelNewFAQ}>
-            {$t('settings.landing_page.faq.cancel')}
-          </Button>
-        </Field.Field>
-      {:else}
-        <Field.Field orientation="horizontal">
-          <Button variant="outline" onclick={createNewFaq}>
-            {$t('settings.landing_page.faq.button')}
-          </Button>
-        </Field.Field>
-      {/if}
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.contact_us.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.contact.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.contact.show
-          ? $t('settings.landing_page.contact_us.show_section')
-          : $t('settings.landing_page.contact_us.hide_section')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.contact.title}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.title_highlight')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.highlight')}
-          bind:value={$landingPageSettings.contact.titleHighlight}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.subtitle')}</Field.Label>
-        <Textarea
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')}
-          bind:value={$landingPageSettings.contact.subtitle}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.address')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.address')}
-          bind:value={$landingPageSettings.contact.address}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.phone_number')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.number')}
-          bind:value={$landingPageSettings.contact.phone}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.contact_us.email')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.email')}
-          bind:value={$landingPageSettings.contact.email}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.mailing_list.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.mailinglist.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.mailinglist.show
-          ? $t('settings.landing_page.mailing_list.show_section')
-          : $t('settings.landing_page.mailing_list.hide_section')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.mailing_list.title')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_title')}
-          bind:value={$landingPageSettings.mailinglist.title}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.mailing_list.subtitle')}</Field.Label>
-        <Textarea
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_subtitle')}
-          bind:value={$landingPageSettings.mailinglist.subtitle}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.mailing_list.button_label')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.label')}
-          bind:value={$landingPageSettings.mailinglist.buttonLabel}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.custom_links.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.customLinks.show} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.customLinks.show
-          ? $t('settings.landing_page.custom_links.show_links')
-          : $t('settings.landing_page.custom_links.hide_links')}
-      </Field.Label>
-    </Field.Field>
-
-    <Field.Description>{$t('settings.landing_page.custom_links.description')}</Field.Description>
-
-    <Field.Group>
-      {#each $landingPageSettings.customLinks.links as link (link.id)}
-        <div class="flex flex-col gap-2">
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <Field.Field>
-              <Field.Label>{$t('settings.landing_page.custom_links.label')}</Field.Label>
-              <Input placeholder={$t('settings.landing_page.custom_links.label_placeholder')} bind:value={link.label} />
-            </Field.Field>
-            <Field.Field>
-              <Field.Label>{$t('settings.landing_page.custom_links.url')}</Field.Label>
-              <Input placeholder={$t('settings.landing_page.custom_links.url_placeholder')} bind:value={link.url} />
-            </Field.Field>
-          </div>
-          <div class="flex items-center justify-between">
-            <Field.Field orientation="horizontal">
-              <Checkbox id="new-tab-{link.id}" bind:checked={link.openInNewTab} />
-              <Field.Label class="text-sm">{$t('settings.landing_page.custom_links.new_tab')}</Field.Label>
-            </Field.Field>
-            <Button variant="ghost" size="icon" onclick={() => deleteCustomLink(link.id)}>
-              <TrashIcon size={16} />
-            </Button>
-          </div>
-
-          <Field.Separator />
-        </div>
-      {/each}
-
-      {#if creatingNewCustomLink}
-        <div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="mb-3 grid grid-cols-1 gap-4 md:grid-cols-2">
-            <Field.Field>
-              <Field.Label>{$t('settings.landing_page.custom_links.label')}</Field.Label>
-              <Input
-                placeholder={$t('settings.landing_page.custom_links.label_placeholder')}
-                bind:value={newCustomLink.label}
-              />
-            </Field.Field>
-            <Field.Field>
-              <Field.Label>{$t('settings.landing_page.custom_links.url')}</Field.Label>
-              <Input
-                placeholder={$t('settings.landing_page.custom_links.url_placeholder')}
-                bind:value={newCustomLink.url}
-              />
-            </Field.Field>
-          </div>
-          <div class="flex items-center justify-between">
-            <Field.Field orientation="horizontal">
-              <input type="checkbox" bind:checked={newCustomLink.openInNewTab} class="mr-2" />
-              <Field.Label class="text-sm">{$t('settings.landing_page.custom_links.new_tab')}</Field.Label>
-            </Field.Field>
-            <div class="flex gap-2">
-              <Button variant="outline" onclick={saveNewCustomLink} class="px-3 py-1 text-sm">
-                {$t('settings.landing_page.custom_links.save')}
-              </Button>
-              <Button variant="outline" onclick={cancelNewCustomLink} class="px-3 py-1 text-sm">
-                {$t('settings.landing_page.custom_links.cancel')}
-              </Button>
+            <div class="space-y-1 px-2 pb-2">
+              <p class="text-base font-semibold">{$t(themeCard.titleKey)}</p>
+              <p class="ui:text-muted-foreground h-[40px] text-sm">{$t(themeCard.descriptionKey)}</p>
             </div>
-          </div>
-        </div>
-      {:else}
-        <Field.Field orientation="horizontal">
-          <Button variant="outline" onclick={createNewCustomLink}>
-            {$t('settings.landing_page.custom_links.add')}
-          </Button>
-        </Field.Field>
-      {/if}
-    </Field.Group>
-  </Field.Set>
-
-  <Field.Separator />
-
-  <Field.Set>
-    <Field.Legend>{$t('settings.landing_page.footer.heading')}</Field.Legend>
-    <Field.Field orientation="horizontal">
-      <Switch bind:checked={$landingPageSettings.footer.show} onCheckedChange={() => (hasUnsavedChanges = true)} />
-      <Field.Label class="text-gray-600">
-        {$landingPageSettings.footer.show
-          ? $t('settings.landing_page.footer.show_section')
-          : $t('settings.landing_page.footer.hide_section')}
-      </Field.Label>
+          </button>
+        {/each}
+      </RadioGroup.Root>
     </Field.Field>
-
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.footer.facebook')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.facebook')}
-          bind:value={$landingPageSettings.footer.facebook}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <!-- <InputField
-        label="Instagram"
-        placeholder="Write your Instagram link here"
-        className="mb-5"
-        bind:value={$landingPageSettings.footer.instagram}
-      /> -->
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.footer.twitter')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.twitter')}
-          bind:value={$landingPageSettings.footer.twitter}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-      <Field.Field>
-        <Field.Label>{$t('settings.landing_page.footer.linkedin')}</Field.Label>
-        <Input
-          placeholder={$t('course.navItem.lessons.exercises.all_exercises.linkedin')}
-          bind:value={$landingPageSettings.footer.linkedin}
-          oninput={() => (hasUnsavedChanges = true)}
-        />
-      </Field.Field>
-    </Field.Group>
   </Field.Set>
 </Field.Group>
-
-<style>
-  :global(.dark) {
-    --cp-text-color: #fff;
-    --cp-border-color: white;
-    --cp-text-color: white;
-    --cp-input-color: #555;
-    --cp-button-hover-color: #777;
-  }
-
-  :global(.dark .alpha) {
-    background: #333 !important;
-  }
-</style>
diff --git a/apps/dashboard/src/lib/features/settings/utils/store.ts b/apps/dashboard/src/lib/features/settings/utils/store.ts
index f0fe1f05..956b3b6c 100644
--- a/apps/dashboard/src/lib/features/settings/utils/store.ts
+++ b/apps/dashboard/src/lib/features/settings/utils/store.ts
@@ -1,116 +1,7 @@
-import type { OrgLandingPageJson } from '$lib/utils/types/org';
 import type { Writable } from 'svelte/store';
 import { writable } from 'svelte/store';
 
-export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
-  header: {
-    title: 'Web Development Courses for',
-    titleHighlight: 'Everyone',
-    subtitle: 'Practical project-based courses that are easy to understand and straight to the point',
-    action: {
-      label: 'Start learning Today',
-      link: '#contact',
-      redirect: false
-    },
-    banner: {
-      video: '',
-      image: '/images/learn-on-cio.jpg',
-      type: 'image',
-      show: true
-    },
-    background: {
-      image: '',
-      show: true
-    },
-    show: true
-  },
-  aboutUs: {
-    title: 'Our Story',
-    content:
-      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.',
-    imageUrl: '/images/riverside.jpeg',
-    show: true
-  },
-  courses: {
-    title: 'Explore our',
-    titleHighlight: 'Courses',
-    subtitle: 'Find courses you will love from best teachers all over the world🌎.',
-    show: true
-  },
-  faq: {
-    title: 'Frequently Asked Questions.',
-    questions: [
-      {
-        id: 1,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      },
-      {
-        id: 2,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      },
-      {
-        id: 3,
-        title: 'Lorem ipsum dolor sit, amet con',
-        content:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
-      }
-    ],
-    show: true
-  },
-  contact: {
-    title: 'Have you got any',
-    titleHighlight: 'Question?',
-    subtitle: 'Reach out to us with any question you might have.',
-    address: 'Ashwoodfield House Farm, Kidderminster Rd, Stourbridge, Kingswinford DY6 0AA',
-    phone: '+4407339904995',
-    email: 'help@lms.com',
-    show: true
-  },
-  mailinglist: {
-    title: 'Join our mailing list',
-    subtitle:
-      'We are constantly releasing new courses and sharing them with our email list. Subscribe to get notified once we release a new course',
-    buttonLabel: 'Subscribe',
-    show: true
-  },
-  customLinks: {
-    show: true,
-    links: [
-      {
-        id: 1,
-        label: 'About Us',
-        url: '#aboutus',
-        openInNewTab: false
-      },
-      {
-        id: 2,
-        label: 'Courses',
-        url: '/courses',
-        openInNewTab: false
-      },
-      {
-        id: 3,
-        label: 'FAQ',
-        url: '#faq',
-        openInNewTab: false
-      },
-      {
-        id: 4,
-        label: 'Contact Us',
-        url: '#contact',
-        openInNewTab: false
-      }
-    ]
-  },
-  footer: {
-    facebook: '#',
-    instagram: '#',
-    twitter: '#',
-    linkedin: '#',
-    show: true
-  }
-});
+import type { OrgLandingPageJson } from '$lib/utils/types/org';
+import { createDefaultLandingPageSettings } from '$features/org/utils/landing-page';
+
+export const landingPageSettings: Writable<OrgLandingPageJson> = writable(createDefaultLandingPageSettings());
diff --git a/apps/dashboard/src/lib/features/tag/pages/tags-admin.svelte b/apps/dashboard/src/lib/features/tag/pages/tags-admin.svelte
index 852ee43b..880247c0 100644
--- a/apps/dashboard/src/lib/features/tag/pages/tags-admin.svelte
+++ b/apps/dashboard/src/lib/features/tag/pages/tags-admin.svelte
@@ -173,6 +173,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('tags_admin.heading')}</Page.Title>
+      <Page.Subtitle>{$t('tags_admin.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
     <Page.Action>
       <ButtonGroup.Root>
diff --git a/apps/dashboard/src/lib/features/ui/auth-ui.svelte b/apps/dashboard/src/lib/features/ui/auth-ui.svelte
index 84f9e3e6..203ae5a4 100644
--- a/apps/dashboard/src/lib/features/ui/auth-ui.svelte
+++ b/apps/dashboard/src/lib/features/ui/auth-ui.svelte
@@ -11,6 +11,7 @@
   import { Separator } from '@cio/ui/base/separator';
   import { preventDefault } from '$lib/utils/functions/svelte';
   import { ROUTE } from '$lib/utils/constants/routes';
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
 
   interface Props {
     isLogin?: boolean;
@@ -67,8 +68,9 @@
   }
 </script>
 
-<div class="auth-ui-background flex min-h-screen w-full items-center justify-center p-4">
-  <Card.Root class="ui:w-full max-w-[400px]">
+<div class="auth-ui-background relative flex min-h-screen w-full items-center justify-center overflow-hidden p-4">
+  <DotPattern fillColor="rgb(2 51 189 / 0.25)" class="absolute inset-0 h-full w-full" />
+  <Card.Root class="ui:w-full relative z-10 max-w-[400px]">
     {#if !showOnlyContent || showLogo}
       <Card.Header class="ui:flex ui:flex-col ui:items-center ui:gap-4">
         <Avatar.Root>
@@ -132,13 +134,3 @@
     {/if}
   </Card.Root>
 </div>
-
-<style>
-  /* .auth-ui-background {
-    background: url(https://assets.cdn.clsrio.com/www/futuristic-classroom.jpg) no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-  } */
-</style>
diff --git a/apps/dashboard/src/lib/features/ui/course-landing-page/components/pricing-section.svelte b/apps/dashboard/src/lib/features/ui/course-landing-page/components/pricing-section.svelte
index 42b331df..006a6649 100644
--- a/apps/dashboard/src/lib/features/ui/course-landing-page/components/pricing-section.svelte
+++ b/apps/dashboard/src/lib/features/ui/course-landing-page/components/pricing-section.svelte
@@ -11,6 +11,7 @@
   import type { Course } from '$features/course/utils/types';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
   import { t } from '$lib/utils/functions/translations';
+  import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
 
   interface Props {
     className?: string;
@@ -81,14 +82,10 @@
   <div
     class="sticky bottom-0 flex h-fit w-full items-center justify-center bg-gray-50 transition duration-300 lg:hidden dark:bg-neutral-800"
   >
-    <aside
-      class="price-container sticky lg:hidden {editMode
-        ? 'lg:bottom-2'
-        : 'lg:top-10'} m-h-fit z-0 bg-gray-50 dark:bg-neutral-800 {className}"
-    >
+    <aside class="sticky z-0 w-[90%] max-w-[405px] bg-gray-50 lg:hidden dark:bg-neutral-800 {className}">
       <div class="flex items-center justify-center gap-3 px-3 py-3">
         <!-- Pricing -->
-        <div class=" text-center">
+        <div class="text-center">
           {#if courseData?.metadata?.allowNewStudent}
             <p class="flex items-center gap-1 text-sm font-medium dark:text-white">
               {formatter?.format(calculatedCost) || calculatedCost}
@@ -126,24 +123,26 @@
   </div>
 {:else}
   <aside
-    class="price-container border border-gray-200 lg:sticky {editMode
+    class="relative w-[90%] max-w-[405px] overflow-hidden rounded-xl border border-gray-200 shadow-lg lg:sticky lg:w-[350px] lg:min-w-[250px] xl:w-[405px] xl:min-w-[330px] {editMode
       ? 'lg:top-0'
-      : 'lg:top-10'} m-h-fit dark:bg-neutral-800 {className}"
+      : 'lg:top-10'} h-fit dark:border-neutral-700 dark:bg-neutral-800 {className}"
   >
-    <div class="p-2 lg:p-10">
+    <BorderBeam size={150} duration={12} colorFrom="#3b82f6" colorTo="#8b5cf6" borderWidth={1.5} />
+
+    <div class="p-4 lg:p-10">
       <!-- Pricing -->
       <div class="mb-6">
         {#if courseData?.metadata?.allowNewStudent}
-          <p class="text-lg font-medium dark:text-white">
+          <p class="text-2xl font-bold dark:text-white">
             {formatter?.format(calculatedCost) || calculatedCost}
             {#if isFree}
-              <span class="text-sm">
+              <span class="text-base font-normal">
                 ({$t('course.navItem.landing_page.pricing_section.free')})
               </span>
             {/if}
           </p>
           {#if courseData?.metadata?.showDiscount}
-            <p class="text-sm font-light text-gray-500 dark:text-white">
+            <p class="mt-1 text-sm font-light text-gray-500 dark:text-white">
               {discount}% {$t('course.navItem.landing_page.pricing_section.discount')}.
               <span class="line-through">
                 {formatter?.format(courseData?.cost || 0) || courseData.cost}
@@ -159,7 +158,11 @@
 
       <!-- Call To Action Buttons -->
       <div class="flex w-full flex-col items-center">
-        <Button class="mb-3 w-full" onclick={handleJoinCourse} disabled={!courseData.metadata?.allowNewStudent}>
+        <Button
+          class="mb-3 h-12 w-full text-base font-semibold"
+          onclick={handleJoinCourse}
+          disabled={!courseData.metadata?.allowNewStudent}
+        >
           {isFree
             ? $t('course.navItem.landing_page.pricing_section.enroll')
             : $t('course.navItem.landing_page.pricing_section.buy')}
@@ -174,80 +177,11 @@
 
     <!-- Gift Container -->
     {#if courseData?.metadata?.reward?.show}
-      <div class="flex flex-col items-center border-t border-b border-gray-300 p-10">
-        <HTMLRender
-          ><SafeHtmlContent content={get(courseData, 'metadata.reward.description', '') as string} /></HTMLRender
-        >
+      <div class="flex flex-col items-center border-t border-gray-200 p-10 dark:border-neutral-700">
+        <HTMLRender>
+          <SafeHtmlContent content={get(courseData, 'metadata.reward.description', '') as string} />
+        </HTMLRender>
       </div>
     {/if}
   </aside>
 {/if}
-
-<style lang="scss">
-  .banner {
-    background-color: #040f2d;
-    min-height: 472px;
-  }
-
-  .author {
-    color: #7888b7;
-  }
-
-  .banner-image {
-    max-width: 559px;
-  }
-
-  .backdrop {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  .active {
-    position: relative;
-    display: inline-block;
-  }
-
-  .active::after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 3px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -14px;
-    left: 0px;
-  }
-
-  .price-container {
-    width: 90%;
-    max-width: 405px;
-    height: fit-content;
-  }
-
-  @media screen and (min-width: 768px) {
-    .price-container {
-      width: 50%;
-      height: fit-content;
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .price-container {
-      width: 350px;
-      min-width: 250px;
-    }
-  }
-  @media screen and (min-width: 1280px) {
-    .price-container {
-      width: 405px;
-      min-width: 330px;
-      height: fit-content;
-    }
-  }
-  .course-content {
-    max-width: 608px;
-  }
-
-  :global(.list ul li) {
-    margin-left: 1rem;
-    list-style-type: disc;
-  }
-</style>
diff --git a/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte b/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
index 95cf875d..b99c6d1d 100644
--- a/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
+++ b/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
@@ -7,6 +7,17 @@
   import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
   import PlayIcon from '@lucide/svelte/icons/play';
   import UserIcon from '@lucide/svelte/icons/user';
+  import StarIcon from '@lucide/svelte/icons/star';
+  import UsersIcon from '@lucide/svelte/icons/users';
+  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { BlurIn } from '@cio/ui/custom/animation/blurin';
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
+  import { HeroVideoDialog } from '@cio/ui/custom/animation/hero-video-dialog';
+  import { Sparkle } from '@cio/ui/custom/animation/sparkle';
+  import { MagicCard } from '@cio/ui/custom/animation/magic-card';
 
   import { getLectureNo } from '$features/course/utils/functions';
   import { currentOrg } from '$lib/utils/store/org';
@@ -18,7 +29,7 @@
   import { handleOpenWidget, reviewsModalStore } from './store';
   import type { Course, CourseMetadata } from '$features/course/utils/types';
   import { courseApi } from '$features/course/api';
-  import { MediaPlayer, isYoutubeUrl } from '@cio/ui/custom/media-player';
+  import { formatYoutubeEmbedUrl, isYoutubeUrl } from '@cio/ui/custom/media-player';
   import { filterNavItems, getCourseLessons, getCourseSections, getTotalLessons } from './utils';
   import { Button } from '@cio/ui/base/button';
 
@@ -38,16 +49,17 @@
   interface Props {
     editMode?: boolean;
     courseData: Course;
+    showStandaloneShell?: boolean;
   }
 
-  let { editMode = false, courseData = $bindable() }: Props = $props();
+  let { editMode = false, courseData = $bindable(), showStandaloneShell = true }: Props = $props();
 
   const reviews = $derived(get(courseData, 'metadata.reviews') || []);
   const video = $derived(get(courseData, 'metadata.videoUrl'));
 
   const lessons = $derived(getCourseLessons(courseData));
   const totalRatings = $derived(reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0));
-  const averageRating = $derived(totalRatings / reviews?.length);
+  const averageRating = $derived(reviews?.length ? (totalRatings / reviews.length).toFixed(1) : null);
   const expandDescription = $derived(Array(reviews?.length ?? 0).fill(false));
 
   const allowNewStudent = $derived(get(courseData, 'metadata.allowNewStudent'));
@@ -70,6 +82,9 @@
 
   const courseSections = $derived(getCourseSections(courseData));
   const totalLessons = $derived(getTotalLessons(courseSections));
+  const studentCount = $derived(courseData.group?.members?.length ?? 0);
+
+  const videoEmbedUrl = $derived(video ? (isYoutubeUrl(video) ? formatYoutubeEmbedUrl(video) : video) : '');
 
   function locationHashChanged() {
     activeNav = window.location.hash;
@@ -93,11 +108,11 @@
   });
 </script>
 
-{#if !editMode}
+{#if !editMode && showStandaloneShell}
   <PoweredBy />
 {/if}
 
-{#if !editMode}
+{#if !editMode && showStandaloneShell}
   <Navigation
     logo={$currentOrg.avatarUrl || '/logo-192.png'}
     orgName={$currentOrg.name}
@@ -108,93 +123,127 @@
 {/if}
 
 <div class="flex w-full flex-col items-center bg-white dark:bg-black">
-  <!-- Header Section -->
-  <header id="header" class="banner p- flex w-full items-center justify-center">
-    <div class="flex w-full flex-col-reverse items-center justify-between md:w-5/6 md:flex-row">
-      <!-- Course Description -->
-      <div class="w-11/12 py-10 md:w-2/5">
-        <h1 class="my-4 text-5xl text-white dark:text-white">
-          {get(courseData, 'title', '')}
-        </h1>
-        <p class="text-md mb-6 text-white dark:text-white">
-          {get(courseData, 'description', '')}
-        </p>
+  {#if showStandaloneShell}
+    <!-- Hero Section -->
+    <header class="relative w-full overflow-hidden bg-[#040f2d] py-12 md:py-20">
+      <DotPattern
+        class="[mask-image:radial-gradient(ellipse_at_center,white,transparent_80%)] opacity-10"
+        fillColor="rgb(255 255 255 / 0.5)"
+      />
 
-        <p class="author my-3 text-sm dark:text-white">
-          {get(courseData, 'metadata.instructor.name', '')}
-        </p>
-        <Button
-          class="mt-6 hidden sm:w-fit md:block"
-          onclick={() => {
-            if (editMode) return;
-            startCoursePayment = true;
-          }}
-          disabled={!allowNewStudent}
-        >
-          {$t('course.navItem.landing_page.start_course')}
-        </Button>
-        {#if $handleOpenWidget.open}
-          <UploadWidget imageURL={courseApi.course?.logo} onchange={(newLogo) => (courseApi.course!.logo = newLogo)} />
-        {/if}
+      <div
+        class="relative z-10 mx-auto flex w-full max-w-6xl flex-col-reverse items-center gap-8 px-6 md:flex-row md:gap-12"
+      >
+        <!-- Course Description -->
+        <div class="w-full py-4 md:w-1/2">
+          <BlurIn class="my-4 text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
+            {get(courseData, 'title', '')}
+          </BlurIn>
+
+          <BlurFade delay={0.2}>
+            <p class="mb-6 text-base leading-relaxed text-gray-300 md:text-lg">
+              {get(courseData, 'description', '')}
+            </p>
+          </BlurFade>
+
+          <BlurFade delay={0.3}>
+            <p class="mb-6 text-sm text-blue-300">
+              {get(courseData, 'metadata.instructor.name', '')}
+            </p>
+          </BlurFade>
+
+          <BlurFade delay={0.4}>
+            <Button
+              class="hidden h-12 px-8 text-base font-semibold sm:w-fit md:block"
+              onclick={() => {
+                if (editMode) return;
+                startCoursePayment = true;
+              }}
+              disabled={!allowNewStudent}
+            >
+              {$t('course.navItem.landing_page.start_course')}
+            </Button>
+          </BlurFade>
+
+          {#if $handleOpenWidget.open}
+            <UploadWidget
+              imageURL={courseApi.course?.logo}
+              onchange={(newLogo) => (courseApi.course!.logo = newLogo)}
+            />
+          {/if}
+        </div>
+
+        <!-- Banner Image / Video -->
+        <div class="w-full md:w-1/2">
+          <BlurFade delay={0.3} yOffset={20}>
+            {#if video}
+              <HeroVideoDialog
+                videoSrc={videoEmbedUrl}
+                thumbnailSrc={bannerImage || '/images/classroomio-course-img-template.jpg'}
+                thumbnailAlt={get(courseData, 'title', 'Course video')}
+                animationStyle="from-center"
+              />
+            {:else}
+              <div class="overflow-hidden rounded-xl shadow-2xl">
+                <img
+                  alt="Course banner"
+                  src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
+                  class="h-auto w-full rounded-xl object-cover"
+                />
+              </div>
+            {/if}
+          </BlurFade>
+        </div>
       </div>
+    </header>
 
-      <!-- Banner Image -->
-      {#if video}
-        <div class="banner-image flex w-full md:w-2/3">
-          <MediaPlayer
-            source={{
-              type: isYoutubeUrl(video) ? 'youtube' : 'generic',
-              url: video
-            }}
-            options={{
-              width: '100%',
-              height: '400'
-            }}
-            class="w-full"
-          />
-        </div>
-      {:else}
-        <div class="banner-image relative overflow-hidden rounded-md md:w-2/3">
-          <img
-            style="min-width:280px; min-height:200px"
-            alt="About us"
-            src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
-            class="relative mt-2 h-full max-h-[400px] w-full max-w-[500px] rounded-md md:mt-0"
-          />
-        </div>
-
-        <!-- <div
-          class="banner-image w-2/3 h-96 relative cursor-pointer"
-          on:click={playVideo}
+    <!-- Social Proof Strip -->
+    {#if reviews.length > 0 || studentCount > 0 || lessons.length > 0}
+      <div class="w-full border-b border-gray-200 bg-gray-50 dark:border-neutral-800 dark:bg-neutral-900">
+        <div
+          class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center gap-6 px-6 py-4 text-sm md:justify-start"
         >
-          <div
-            aria-hidden="true"
-            class="absolute top-0 left-0 backdrop w-full h-full"
-          />
-          <img
-            src="/images/course-banner-image.png"
-            alt="banner"
-            class="w-full h-full"
-          />
-          <div
-            class="absolute top-0 left-0 w-full h-full z-50 flex items-center justify-center"
-          >
-            <img src="/images/play_video.png" alt="play video" />
-          </div>
-        </div> -->
-      {/if}
-    </div>
-  </header>
+          {#if averageRating}
+            <div class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <StarIcon size={16} class="fill-yellow-400 text-yellow-400" />
+              <span class="font-semibold">{averageRating}</span>
+              <span class="text-gray-500 dark:text-gray-400"
+                >({reviews.length} {reviews.length === 1 ? 'review' : 'reviews'})</span
+              >
+            </div>
+          {/if}
+          {#if studentCount > 0}
+            <div class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <UsersIcon size={16} />
+              <span>{studentCount} {studentCount === 1 ? 'student' : 'students'}</span>
+            </div>
+          {/if}
+          {#if lessons.length > 0}
+            <div class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <BookOpenIcon size={16} />
+              <span>{pluralize('lesson', lessons.length, true)}</span>
+            </div>
+          {/if}
+          {#if courseData.type}
+            <div class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <ClockIcon size={16} />
+              <span>{courseData.type === 'LIVE_CLASS' ? 'Live Class' : 'Self-Paced'}</span>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  {/if}
 
   <!-- Body -->
   <div class="w-full bg-white dark:bg-black">
     <div
-      class="mx-0 my-2 flex w-full max-w-[1200px] flex-col-reverse items-center justify-between lg:m-auto lg:w-11/12 lg:flex-row lg:items-start lg:py-8"
+      class="mx-auto my-2 flex w-full max-w-6xl flex-col-reverse items-center justify-between px-4 lg:flex-row lg:items-start lg:py-8"
     >
       <!-- Course Details -->
-      <div class="course-content w-full p-3 lg:mr-10 lg:w-10/12">
+      <div class="w-full max-w-[680px] min-w-[60%] p-3 lg:mr-10">
         <!-- Navigation -->
-        <UnderlineTabs.Root bind:value={activeNav} class="ui:bg-background sticky top-10 py-2">
+        <UnderlineTabs.Root bind:value={activeNav} class="ui:bg-background sticky top-0 z-20 py-2">
           <UnderlineTabs.List>
             {#each navItems as navItem (navItem.key)}
               <UnderlineTabs.Trigger value={navItem.key}>
@@ -207,155 +256,194 @@
         </UnderlineTabs.Root>
 
         <!-- Sections - Requirement -->
-
         {#if navItemKeys.includes(NAV_ITEM_KEY.REQUIREMENT)}
           <NavSection id="requirement">
-            <h3 class="mt-0 mb-3 text-2xl">
-              {$t('course.navItem.landing_page.requirement')}
-            </h3>
-
-            <ul class="list font-light">
-              <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.requirements', '')} /></HTMLRender>
-            </ul>
+            <BlurFade delay={0.1}>
+              <h3 class="mt-0 mb-3 text-2xl font-semibold">
+                {$t('course.navItem.landing_page.requirement')}
+              </h3>
+              <ul class="list font-light">
+                <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.requirements', '')} /></HTMLRender>
+              </ul>
+            </BlurFade>
           </NavSection>
         {/if}
 
         <!-- Sections - Course Description -->
         {#if navItemKeys.includes(NAV_ITEM_KEY.DESCRIPTION)}
           <NavSection id="description">
-            <h3 class="mt-0 mb-3 text-2xl">
-              {$t('course.navItem.landing_page.description')}
-            </h3>
-
-            <HTMLRender className="dark:text-white text-sm font-light">
-              <SafeHtmlContent content={get(courseData, 'metadata.description', '')} />
-            </HTMLRender>
+            <BlurFade delay={0.1}>
+              <h3 class="mt-0 mb-3 text-2xl font-semibold">
+                {$t('course.navItem.landing_page.description')}
+              </h3>
+              <HTMLRender className="dark:text-white text-sm font-light leading-relaxed">
+                <SafeHtmlContent content={get(courseData, 'metadata.description', '')} />
+              </HTMLRender>
+            </BlurFade>
           </NavSection>
         {/if}
 
         <!-- Sections - Goal -->
         {#if navItemKeys.includes(NAV_ITEM_KEY.GOALS)}
           <NavSection id="goals">
-            <h3 class="mt-0 mb-3 text-2xl">{$t('course.navItem.landing_page.learn')}</h3>
-            <ul class="list font-light">
-              <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.goals', '')} /></HTMLRender>
-            </ul>
+            <BlurFade delay={0.1}>
+              <h3 class="mt-0 mb-3 text-2xl font-semibold">{$t('course.navItem.landing_page.learn')}</h3>
+              <ul class="list font-light">
+                <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.goals', '')} /></HTMLRender>
+              </ul>
+            </BlurFade>
           </NavSection>
         {/if}
 
         <!-- Sections - Certificate -->
         {#if navItemKeys.includes(NAV_ITEM_KEY.CERTIFICATE)}
           <NavSection id="certificate">
-            <h3 class="mt-0 text-2xl">{$t('course.navItem.landing_page.certificate')}</h3>
-            <p class="mb-3 text-sm font-light dark:text-white">
-              {$t('course.navItem.landing_page.certificate_text')}
-            </p>
-
-            <Image
-              src={certificate?.templateUrl}
-              alt="certificate template"
-              className="certificate-img max-h-[215px]"
-            />
+            <BlurFade delay={0.1}>
+              <h3 class="mt-0 text-2xl font-semibold">{$t('course.navItem.landing_page.certificate')}</h3>
+              <p class="mb-4 text-sm font-light dark:text-white">
+                {$t('course.navItem.landing_page.certificate_text')}
+              </p>
+              <MagicCard
+                gradientColor="#3b82f6"
+                gradientOpacity={0.15}
+                class="inline-block w-auto border-0 bg-transparent py-0 dark:bg-transparent"
+              >
+                <Image src={certificate?.templateUrl} alt="certificate template" className="max-h-[215px] w-auto" />
+              </MagicCard>
+            </BlurFade>
           </NavSection>
         {/if}
 
         <!-- Sections - Lessons -->
         {#if !courseData.metadata?.isContentGroupingEnabled}
           <NavSection id="lessons">
-            <div class="mb-3 flex w-full items-center justify-between">
-              <h3 class="mt-0 mb-3 text-2xl">
-                {$t('course.navItem.landing_page.content')}
-              </h3>
-              <p class="text-sm font-light dark:text-white">
-                {pluralize('lesson', lessons.length, true)}
-              </p>
-            </div>
+            <BlurFade delay={0.1}>
+              <div class="mb-3 flex w-full items-center justify-between">
+                <h3 class="mt-0 mb-3 text-2xl font-semibold">
+                  {$t('course.navItem.landing_page.content')}
+                </h3>
+                <p class="text-sm font-light dark:text-white">
+                  {pluralize('lesson', lessons.length, true)}
+                </p>
+              </div>
 
-            <div class="flex flex-wrap">
-              {#each lessons as lesson, index (lesson.id)}
-                <div class="m-2 rounded border px-2 py-1">
-                  <Chip value={getLectureNo(index + 1, '0')} />
-                  <p class="ml-2 inline text-xs font-light dark:text-white">
-                    {lesson.title}
-                  </p>
-                </div>
-              {/each}
-            </div>
+              <div class="flex flex-wrap gap-2">
+                {#each lessons as lesson, index (lesson.id)}
+                  <BlurFade delay={0.05 * Math.min(index, 10)}>
+                    <div
+                      class="rounded-lg border border-gray-200 px-3 py-1.5 transition-colors hover:border-gray-400 dark:border-neutral-700 dark:hover:border-neutral-500"
+                    >
+                      <Chip value={getLectureNo(index + 1, '0')} />
+                      <p class="ml-2 inline text-xs font-light dark:text-white">
+                        {lesson.title}
+                      </p>
+                    </div>
+                  </BlurFade>
+                {/each}
+              </div>
+            </BlurFade>
           </NavSection>
         {:else if courseData.metadata?.isContentGroupingEnabled}
           <NavSection id="lessons">
-            <!-- header -->
-            <div class="flex items-center justify-between">
-              <h1>{$t('course.navItem.landing_page.course_content')}</h1>
-              <span class="text-xs font-normal">
-                {pluralize($t('course.navItem.landing_page.modules'), courseSections.length, true)},
-                {pluralize($t('course.navItem.landing_page.lessons'), totalLessons, true)}
-              </span>
-            </div>
+            <BlurFade delay={0.1}>
+              <!-- header -->
+              <div class="flex items-center justify-between">
+                <h1 class="text-2xl font-semibold">{$t('course.navItem.landing_page.course_content')}</h1>
+                <span class="text-xs font-normal">
+                  {pluralize($t('course.navItem.landing_page.modules'), courseSections.length, true)},
+                  {pluralize($t('course.navItem.landing_page.lessons'), totalLessons, true)}
+                </span>
+              </div>
 
-            {#each courseSections as section (section.id)}
-              <SectionsDisplay
-                exerciseCount={section.exerciseCount}
-                lessonCount={section.lessons?.length}
-                lessons={section.lessons}
-                title={section.title!}
-              />
-            {/each}
+              {#each courseSections as section, index (section.id)}
+                <BlurFade delay={0.05 * Math.min(index, 8)}>
+                  <SectionsDisplay
+                    exerciseCount={section.exerciseCount}
+                    lessonCount={section.lessons?.length}
+                    lessons={section.lessons}
+                    title={section.title!}
+                  />
+                </BlurFade>
+              {/each}
+            </BlurFade>
           </NavSection>
         {/if}
 
         <!-- Sections - Reviews -->
         {#if navItemKeys.includes(NAV_ITEM_KEY.REVIEWS)}
           <NavSection id="reviews">
-            <h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">
-              {$t('course.navItem.landing_page.reviews')}
-            </h2>
-            <div class="flex flex-wrap">
+            <BlurFade delay={0.1}>
+              <div class="mb-6 flex items-center gap-3">
+                <h2 class="text-2xl font-semibold">
+                  {$t('course.navItem.landing_page.reviews')}
+                </h2>
+                {#if averageRating}
+                  <Sparkle
+                    text={averageRating}
+                    colors={{ first: '#facc15', second: '#f97316' }}
+                    sparklesCount={3}
+                    class="text-xl font-bold"
+                  />
+                {/if}
+              </div>
+            </BlurFade>
+
+            <div class="grid gap-4 sm:grid-cols-2">
               {#each reviews.slice(0, 4) as review, id (review.id)}
                 {#if !review.hide}
-                  <!-- review -->
-                  <div class="item-start my-2 flex w-2/4 flex-row">
-                    <!-- image container -->
-                    <Avatar.Root class="mt-1 size-10">
-                      {#if review.avatar_url}
-                        <Avatar.Image src={review.avatar_url} alt={review.name ? review.name : 'Avatar'} />
-                      {/if}
-                      <Avatar.Fallback>
-                        <UserIcon class="ui:size-5 ui:text-muted-foreground" />
-                      </Avatar.Fallback>
-                    </Avatar.Root>
+                  <BlurFade delay={0.1 + id * 0.08}>
+                    <div
+                      class="flex flex-row items-start gap-3 rounded-lg border border-gray-100 p-4 dark:border-neutral-800"
+                    >
+                      <!-- image container -->
+                      <Avatar.Root class="mt-1 size-10 shrink-0">
+                        {#if review.avatar_url}
+                          <Avatar.Image src={review.avatar_url} alt={review.name ? review.name : 'Avatar'} />
+                        {/if}
+                        <Avatar.Fallback>
+                          <UserIcon class="ui:size-5 ui:text-muted-foreground" />
+                        </Avatar.Fallback>
+                      </Avatar.Root>
 
-                    <!-- profile content -->
-                    <div class="w-11/12 pl-2.5">
-                      <p class="mb-0.5 font-medium">{review.name}</p>
-                      <!-- ratings -->
-                      <div class="flex flex-row items-center">
-                        {#if review.rating}
-                          <img src="/images/rating-{review.rating}.svg" class="mt-1 mr-4 w-24" alt="" />
+                      <!-- profile content -->
+                      <div class="min-w-0 flex-1">
+                        <p class="mb-0.5 font-medium">{review.name}</p>
+                        <!-- ratings -->
+                        <div class="mb-2 flex items-center gap-0.5">
+                          {#each Array(5) as _, i}
+                            <StarIcon
+                              size={14}
+                              class={i < (review.rating || 0)
+                                ? 'fill-yellow-400 text-yellow-400'
+                                : 'text-gray-300 dark:text-neutral-600'}
+                            />
+                          {/each}
+                        </div>
+                        <div class="mb-2 overflow-hidden" style:max-height={expandDescription[id] ? 'none' : '60px'}>
+                          <p class="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                            {review.description}
+                          </p>
+                        </div>
+                        {#if !expandDescription[id] && review.description.split(' ').length > 12}
+                          <button
+                            class="ui:text-primary text-sm font-normal underline"
+                            onclick={() => toggleDescription(id)}>See More</button
+                          >
+                        {/if}
+                        {#if expandDescription[id]}
+                          <button
+                            class="ui:text-primary text-sm font-normal underline"
+                            onclick={() => toggleDescription(id)}>See Less</button
+                          >
                         {/if}
                       </div>
-                      <div class="read-more-content mb-2" style="max-height: {expandDescription[id] ? 'none' : '50px'}">
-                        <p class="my-2 text-sm leading-5 text-gray-600">
-                          {review.description}
-                        </p>
-                      </div>
-                      {#if !expandDescription[id] && review.description.split(' ').length > 9}
-                        <button class="ui:text-primary mt-2 font-normal underline" onclick={() => toggleDescription(id)}
-                          >See More</button
-                        >
-                      {/if}
-                      {#if expandDescription[id]}
-                        <button class="ui:text-primary mt-2 font-normal underline" onclick={() => toggleDescription(id)}
-                          >See Less</button
-                        >
-                      {/if}
                     </div>
-                  </div>
+                  </BlurFade>
                 {/if}
               {/each}
             </div>
             {#if reviews.length > 4}
-              <Button class="mt-2" variant="outline" onclick={() => ($reviewsModalStore.open = true)}>
+              <Button class="mt-4" variant="outline" onclick={() => ($reviewsModalStore.open = true)}>
                 {$t('course.navItem.landing_page.see_all')}
               </Button>
             {/if}
@@ -382,7 +470,7 @@
                   <div class="flex w-4/6 flex-wrap">
                     {#each reviews as review, id (review.id)}
                       <!-- review -->
-                      <div class="item-start my-2 flex w-full flex-row">
+                      <div class="my-2 flex w-full flex-row items-start">
                         <!-- image container -->
                         <Avatar.Root class="mt-1 h-10 w-10">
                           {#if review.avatar_url}
@@ -397,17 +485,26 @@
                         <div class="w-11/12 pl-2.5">
                           <p class="mb-0.5 font-medium">{review.name}</p>
                           <!-- ratings -->
-                          <div class="flex flex-row">
-                            <img src="/images/rating-full.svg" alt="" class="mr-2" />
+                          <div class="flex flex-row items-center gap-1">
+                            <div class="flex items-center gap-0.5">
+                              {#each Array(5) as _, i}
+                                <StarIcon
+                                  size={14}
+                                  class={i < (review.rating || 0)
+                                    ? 'fill-yellow-400 text-yellow-400'
+                                    : 'text-gray-300 dark:text-neutral-600'}
+                                />
+                              {/each}
+                            </div>
                             <p class="text-xs text-gray-600">
                               {calDateDiff(review.created_at)}
                             </p>
                           </div>
                           <div
-                            class="read-more-content mb-2"
-                            style="max-height: {expandDescription[id] ? 'none' : '50px'}"
+                            class="mb-2 overflow-hidden transition-all"
+                            style:max-height={expandDescription[id] ? 'none' : '60px'}
                           >
-                            <p class="my-2 text-sm leading-5 text-gray-600">
+                            <p class="my-2 text-sm leading-relaxed text-gray-600">
                               {review.description}
                             </p>
                           </div>
@@ -423,35 +520,39 @@
 
         <!-- Sections - Instructor -->
         <NavSection id="instructor">
-          <h3 class="mt-0 mb-3 text-2xl">
-            {$t('course.navItem.landing_page.instructor')}
-          </h3>
-          <div class="mb-4 flex items-center">
-            <img
-              alt="Author Avatar"
-              class="mr-3 block h-20 w-20 rounded-full"
-              src={get(instructor, 'imgUrl', $currentOrg.avatarUrl || '/logo-512.png')}
-            />
-            <div>
-              <p class="text-md font-light dark:text-white">
-                {get(instructor, 'name', $currentOrg.name)}
-              </p>
-              <p class="text-xs font-light dark:text-white">
-                {get(instructor, 'role', '')}
-              </p>
-              <p class="text-md flex items-center font-light dark:text-white">
-                <PlayIcon size={16} class="filled" />
-                <span class="ml-1"
-                  >{get(instructor, 'courseNo', '')}
-                  {$t('course.navItem.landing_page.courses')}</span
-                >
-              </p>
+          <BlurFade delay={0.1}>
+            <h3 class="mt-0 mb-4 text-2xl font-semibold">
+              {$t('course.navItem.landing_page.instructor')}
+            </h3>
+            <div class="mb-4 flex items-center gap-4">
+              <img
+                alt="Author Avatar"
+                class="block h-20 w-20 rounded-full object-cover ring-2 ring-gray-200 dark:ring-neutral-700"
+                src={get(instructor, 'imgUrl', $currentOrg.avatarUrl || '/logo-512.png')}
+              />
+              <div>
+                <p class="text-base font-medium dark:text-white">
+                  {get(instructor, 'name', $currentOrg.name)}
+                </p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {get(instructor, 'role', '')}
+                </p>
+                {#if get(instructor, 'courseNo', '')}
+                  <p class="mt-1 flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300">
+                    <PlayIcon size={14} class="filled" />
+                    <span>
+                      {get(instructor, 'courseNo', '')}
+                      {$t('course.navItem.landing_page.courses')}
+                    </span>
+                  </p>
+                {/if}
+              </div>
             </div>
-          </div>
 
-          <p class="text-sm font-light dark:text-white">
-            {get(instructor, 'description', '')}
-          </p>
+            <p class="text-sm leading-relaxed font-light dark:text-white">
+              {get(instructor, 'description', '')}
+            </p>
+          </BlurFade>
         </NavSection>
       </div>
 
@@ -464,45 +565,9 @@
   </div>
 </div>
 
-<!-- TODO: CONVERT TO TAILWIND -->
 <style>
-  .banner {
-    background-color: #040f2d;
-    min-height: 472px;
-  }
-
-  .author {
-    color: #7888b7;
-  }
-
-  .banner-image {
-    max-width: 559px;
-  }
-
-  :global(.certificate-img) {
-    width: unset !important;
-  }
-
-  .course-content {
-    max-width: 608px;
-    min-width: 60%;
-  }
-
   :global(.list ul li) {
     margin-left: 1rem;
     list-style-type: disc;
   }
-
-  .read-more-content {
-    max-height: 100px; /* Adjust this value to set the maximum height for the truncated content */
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    text-overflow: ellipsis;
-  }
-
-  @media screen and (max-width: 1023px) {
-    .course-content {
-      min-width: 80%;
-    }
-  }
 </style>
diff --git a/apps/dashboard/src/lib/features/ui/index.ts b/apps/dashboard/src/lib/features/ui/index.ts
index 7049b351..431cb57d 100644
--- a/apps/dashboard/src/lib/features/ui/index.ts
+++ b/apps/dashboard/src/lib/features/ui/index.ts
@@ -30,3 +30,6 @@ export { default as UpgradeModal } from './upgrade-modal.svelte';
 export { default as VisitOrgSiteButton } from './visit-org-site-btn.svelte';
 export { default as Vote } from './vote.svelte';
 export { default as PageRestricted } from './page-restricted.svelte';
+export { default as SortSelect } from './sort-select.svelte';
+export type { SortOption } from './sort-select.svelte';
+export { default as SortPopover } from './sort-popover.svelte';
diff --git a/apps/dashboard/src/lib/features/ui/media-player/types.ts b/apps/dashboard/src/lib/features/ui/media-player/types.ts
index 35bd0954..5f2173f4 100644
--- a/apps/dashboard/src/lib/features/ui/media-player/types.ts
+++ b/apps/dashboard/src/lib/features/ui/media-player/types.ts
@@ -1,4 +1,4 @@
-export type VideoType = 'youtube' | 'generic' | 'upload' | 'muse';
+export type VideoType = 'youtube' | 'generic' | 'upload' | 'muse' | 'google_drive';
 
 export interface VideoSource {
   type: VideoType;
@@ -6,6 +6,7 @@ export interface VideoSource {
   metadata?: {
     svid?: string; // muse.ai video ID
     thumbnailUrl?: string; // upload thumbnail / poster
+    title?: string;
   };
 }
 
diff --git a/apps/dashboard/src/lib/features/ui/navigation/lms-navigation.ts b/apps/dashboard/src/lib/features/ui/navigation/lms-navigation.ts
index 8ac64c5f..d3df6e83 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/lms-navigation.ts
+++ b/apps/dashboard/src/lib/features/ui/navigation/lms-navigation.ts
@@ -3,6 +3,7 @@ import {
   CourseIcon,
   ExerciseIcon,
   ExploreIcon,
+  GoalIcon,
   HomeIcon,
   SettingsIcon
 } from '@cio/ui/custom/moving-icons';
@@ -56,6 +57,12 @@ const baseNavConfig: NavItemConfig[] = [
     icon: CourseIcon,
     matchPattern: '^/lms/mylearning(/.*)?$'
   },
+  {
+    titleKey: 'lms_navigation.programs',
+    path: '/programs',
+    icon: GoalIcon,
+    matchPattern: '^/lms/programs(/.*)?$'
+  },
   {
     titleKey: 'lms_navigation.exercise',
     path: '/exercises',
diff --git a/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts b/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
index b7e5d780..7ff05831 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
+++ b/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
@@ -1,17 +1,20 @@
 import {
+  ApiIcon,
   AttachmentIcon,
   CommunityIcon,
   CourseIcon,
   DashboardIcon,
+  GoalIcon,
   PeopleIcon,
   SettingsIcon,
-  SetupIcon
+  SetupIcon,
+  TagIcon,
+  ZapIcon
 } from '@cio/ui/custom/moving-icons';
 
 import type { AccountOrg } from '$features/app/types';
 import type { Component } from 'svelte';
-import BracesIcon from '@lucide/svelte/icons/braces';
-import TagIcon from '@lucide/svelte/icons/tag';
+import BotIcon from '@lucide/svelte/icons/bot';
 import { isActive } from '$lib/utils/functions/app';
 
 export interface NavItem {
@@ -42,6 +45,12 @@ export interface NavItemConfig {
   supportsDynamicSegment?: boolean; // Supports dynamic segments (like [slug])
   matchPattern?: string | ((orgSlug: string) => string); // Regex pattern for route matching
   isPaid?: boolean; // Show upgrade indicator for free plan users
+  group?: string | null; // Group label key for sidebar grouping
+}
+
+export interface NavGroup {
+  labelKey: string | null;
+  items: NavItem[];
 }
 
 export interface NestedRouteConfig {
@@ -52,18 +61,43 @@ export interface NestedRouteConfig {
 // Base navigation configuration structure
 const baseNavConfig: NavItemConfig[] = [
   {
+    group: 'home',
     titleKey: 'org_navigation.dashboard',
     path: '',
     icon: DashboardIcon,
     matchPattern: '^/org/[^/]+/?$' // Exact match only
   },
   {
+    group: 'home',
+    titleKey: 'org_navigation.setup',
+    path: '/setup',
+    icon: SetupIcon,
+    requiresAdmin: true,
+    matchPattern: '^/org/[^/]+/setup(/.*)?$' // Matches nested routes
+  },
+  {
+    group: 'content',
     titleKey: 'org_navigation.courses',
     path: '/courses',
     icon: CourseIcon,
     matchPattern: '^/org/[^/]+/courses(/.*)?$' // Matches nested routes
   },
   {
+    group: 'content',
+    titleKey: 'org_navigation.programs',
+    path: '/programs',
+    icon: GoalIcon,
+    matchPattern: '^/org/[^/]+/programs(/.*)?$'
+  },
+  {
+    group: 'content',
+    titleKey: 'org_navigation.media',
+    path: '/media',
+    icon: AttachmentIcon,
+    matchPattern: '^/org/[^/]+/media(/.*)?$'
+  },
+  {
+    group: 'content',
     titleKey: 'org_navigation.tags',
     path: '/tags',
     icon: TagIcon,
@@ -71,6 +105,7 @@ const baseNavConfig: NavItemConfig[] = [
     matchPattern: '^/org/[^/]+/tags(/.*)?$'
   },
   {
+    group: 'people',
     titleKey: 'org_navigation.community',
     path: '/community',
     icon: CommunityIcon,
@@ -84,60 +119,38 @@ const baseNavConfig: NavItemConfig[] = [
     ]
   },
   {
+    group: 'people',
     titleKey: 'org_navigation.audience',
     path: '/audience',
     icon: PeopleIcon,
     matchPattern: '^/org/[^/]+/audience(/.*)?$' // Matches nested routes
   },
   {
-    titleKey: 'org_navigation.media',
-    path: '/media',
-    icon: AttachmentIcon,
-    matchPattern: '^/org/[^/]+/media(/.*)?$'
-  },
-  {
-    titleKey: 'org_navigation.setup',
-    path: '/setup',
-    icon: SetupIcon,
-    requiresAdmin: true,
-    matchPattern: '^/org/[^/]+/setup(/.*)?$' // Matches nested routes
-  },
-  {
-    titleKey: 'org_navigation.automation',
-    path: '/automation',
-    icon: BracesIcon,
+    group: 'automation',
+    titleKey: 'automation.tabs.mcp',
+    path: '/mcp',
+    icon: BotIcon,
     requiresAdmin: true,
     disableWhenNotAdmin: true,
-    useHashUrl: true,
-    matchPattern: '^/org/[^/]+/automation(/.*)?$',
-    items: [
-      {
-        titleKey: 'automation.tabs.mcp',
-        path: '/automation/mcp'
-      },
-      {
-        titleKey: 'automation.tabs.zapier',
-        path: '/automation/zapier'
-      },
-      {
-        titleKey: 'automation.tabs.api',
-        path: '/automation/api'
-      }
-    ],
-    nestedRoutes: [
-      {
-        path: 'mcp',
-        titleKey: 'automation.tabs.mcp'
-      },
-      {
-        path: 'zapier',
-        titleKey: 'automation.tabs.zapier'
-      },
-      {
-        path: 'api',
-        titleKey: 'automation.tabs.api'
-      }
-    ]
+    matchPattern: '^/org/[^/]+/mcp(/.*)?$'
+  },
+  {
+    group: 'automation',
+    titleKey: 'automation.tabs.api',
+    path: '/api',
+    icon: ApiIcon,
+    requiresAdmin: true,
+    disableWhenNotAdmin: true,
+    matchPattern: '^/org/[^/]+/api(/.*)?$'
+  },
+  {
+    group: 'automation',
+    titleKey: 'automation.tabs.zapier',
+    path: '/zapier',
+    icon: ZapIcon,
+    requiresAdmin: true,
+    disableWhenNotAdmin: true,
+    matchPattern: '^/org/[^/]+/zapier(/.*)?$'
   },
   {
     titleKey: 'org_navigation.settings',
@@ -261,3 +274,79 @@ export function getOrgNavigationItems(
 
   return items;
 }
+
+const GROUP_ORDER: Array<{ key: string | null; labelKey: string | null }> = [
+  { key: 'home', labelKey: 'org_navigation.home' },
+  { key: 'content', labelKey: 'org_navigation.content' },
+  { key: 'people', labelKey: 'org_navigation.people' },
+  { key: 'automation', labelKey: 'org_navigation.automation' },
+  { key: null, labelKey: null }
+];
+
+/**
+ * Get navigation items grouped for the sidebar
+ */
+export function getOrgNavigationGroups(
+  currentOrgPath: string,
+  currentOrg: AccountOrg,
+  isOrgAdmin: boolean | null,
+  t: (key: string) => string,
+  pagePathname: string
+): NavGroup[] {
+  const groupedMap = new Map<string | null, NavItem[]>();
+
+  for (const groupDef of GROUP_ORDER) {
+    groupedMap.set(groupDef.key, []);
+  }
+
+  for (const config of baseNavConfig) {
+    if (config.requiresAdmin && !isOrgAdmin && !config.disableWhenNotAdmin) {
+      continue;
+    }
+
+    const url = config.path === '' ? currentOrgPath : `${currentOrgPath}${config.path}`;
+    const fullPath = config.path === '' ? `/org/${currentOrg.siteName}` : `/org/${currentOrg.siteName}${config.path}`;
+    const matchPattern =
+      typeof config.matchPattern === 'function' ? config.matchPattern(currentOrg.siteName!) : config.matchPattern;
+
+    const item: NavItem = {
+      title: t(config.titleKey),
+      url: config.useHashUrl ? '#' : url,
+      path: config.path,
+      icon: config.icon,
+      isActive: isActive(pagePathname, fullPath, matchPattern),
+      isExpanded: config.items ? isActive(pagePathname, fullPath, matchPattern) : undefined,
+      disabled: Boolean(config.disableWhenNotAdmin && !isOrgAdmin),
+      useHashUrl: config.useHashUrl,
+      nestedRoutes: config.nestedRoutes,
+      supportsDynamicSegment: config.supportsDynamicSegment,
+      isPaid: config.isPaid
+    };
+
+    if (config.items) {
+      item.items = config.items.map((subConfig) => {
+        const subMatchPattern =
+          typeof subConfig.matchPattern === 'function'
+            ? subConfig.matchPattern(currentOrg.siteName!)
+            : subConfig.matchPattern;
+        const subUrl = `${currentOrgPath}${subConfig.path}`;
+        return {
+          title: t(subConfig.titleKey),
+          isActive: isActive(pagePathname, subUrl, subMatchPattern, true),
+          url: subUrl,
+          path: subConfig.path,
+          isPaid: subConfig.isPaid
+        };
+      });
+    }
+
+    const groupKey = config.group !== undefined ? config.group : null;
+    const bucket = groupedMap.get(groupKey) ?? groupedMap.get(null)!;
+    bucket.push(item);
+  }
+
+  return GROUP_ORDER.filter(({ key }) => (groupedMap.get(key) ?? []).length > 0).map(({ key, labelKey }) => ({
+    labelKey,
+    items: groupedMap.get(key) ?? []
+  }));
+}
diff --git a/apps/dashboard/src/lib/features/ui/question/constants.ts b/apps/dashboard/src/lib/features/ui/question/constants.ts
index 4741018e..af8bbbe8 100644
--- a/apps/dashboard/src/lib/features/ui/question/constants.ts
+++ b/apps/dashboard/src/lib/features/ui/question/constants.ts
@@ -4,7 +4,8 @@ import { QUESTION_TYPE_KEY, QUESTION_TYPE_REGISTRY, type QuestionTypeKey } from
 export const PREMIUM_QUESTION_TYPE_KEYS = new Set<QuestionTypeKey>([
   QUESTION_TYPE_KEY.FILE_UPLOAD,
   QUESTION_TYPE_KEY.ORDERING,
-  QUESTION_TYPE_KEY.LINK
+  QUESTION_TYPE_KEY.LINK,
+  QUESTION_TYPE_KEY.STAR
 ]);
 
 const QUESTION_TYPE_LABEL_KEYS: Partial<Record<QuestionTypeKey, string>> = {
@@ -21,7 +22,9 @@ const QUESTION_TYPE_LABEL_KEYS: Partial<Record<QuestionTypeKey, string>> = {
   [QUESTION_TYPE_KEY.MATCHING]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.matching',
   [QUESTION_TYPE_KEY.ORDERING]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.ordering',
   [QUESTION_TYPE_KEY.HOTSPOT]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.hotspot',
-  [QUESTION_TYPE_KEY.LINK]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.link'
+  [QUESTION_TYPE_KEY.LINK]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.link',
+  [QUESTION_TYPE_KEY.WORD_BANK]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.word_bank',
+  [QUESTION_TYPE_KEY.STAR]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.star'
 };
 
 // Temp hidden: MATCHING, HOTSPOT
diff --git a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/nav-main.svelte b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/nav-main.svelte
index 24939aac..9443f6fd 100644
--- a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/nav-main.svelte
+++ b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/nav-main.svelte
@@ -6,87 +6,91 @@
   import { page } from '$app/state';
   import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
   import RocketIcon from '@lucide/svelte/icons/rocket';
-  import { getOrgNavigationItems } from '$features/ui/navigation/org-navigation';
+  import { getOrgNavigationGroups } from '$features/ui/navigation/org-navigation';
   import { HoverableItem } from '@cio/ui/custom/moving-icons';
 
-  const items = $derived(
-    getOrgNavigationItems($currentOrgPath, $currentOrg, $isOrgAdmin, $t, page.url.pathname + page.url.search)
+  const groups = $derived(
+    getOrgNavigationGroups($currentOrgPath, $currentOrg, $isOrgAdmin, $t, page.url.pathname + page.url.search)
   );
 </script>
 
-<Sidebar.Group>
-  <Sidebar.GroupLabel>{$t('org_navigation.platform')}</Sidebar.GroupLabel>
-  <Sidebar.Menu>
-    {#each items as item (item.title)}
-      <Collapsible.Root open={item.isActive || item.isExpanded} class="group/collapsible">
-        {#snippet child({ props })}
-          <Sidebar.MenuItem {...props}>
-            <Collapsible.Trigger>
-              {#snippet child({ props })}
-                <Sidebar.MenuButton {...props} tooltipContent={item.title} isActive={item.isActive}>
-                  {#snippet child({ props })}
-                    <HoverableItem>
-                      {#snippet children(isHovered)}
-                        {#if item.disabled}
-                          <span
-                            {...props}
-                            aria-disabled="true"
-                            class="flex cursor-not-allowed items-center gap-2 opacity-50"
-                          >
-                            {#if item.icon}
-                              {@const Icon = item.icon}
-                              <Icon {isHovered} size={16} class="custom" />
-                              <span>{item.title}</span>
-                            {:else}
-                              <span>{item.title}</span>
-                            {/if}
-                          </span>
-                        {:else}
-                          <a href={item.url} {...props}>
-                            {#if item.icon}
-                              {@const Icon = item.icon}
-                              <Icon {isHovered} size={16} class="custom" />
+{#each groups as group (group.labelKey)}
+  <Sidebar.Group class="pt-0!">
+    {#if group.labelKey}
+      <Sidebar.GroupLabel>{$t(group.labelKey)}</Sidebar.GroupLabel>
+    {/if}
+    <Sidebar.Menu>
+      {#each group.items as item (item.title)}
+        <Collapsible.Root open={item.isActive || item.isExpanded} class="group/collapsible">
+          {#snippet child({ props })}
+            <Sidebar.MenuItem {...props}>
+              <Collapsible.Trigger>
+                {#snippet child({ props })}
+                  <Sidebar.MenuButton {...props} tooltipContent={item.title} isActive={item.isActive}>
+                    {#snippet child({ props })}
+                      <HoverableItem>
+                        {#snippet children(isHovered)}
+                          {#if item.disabled}
+                            <span
+                              {...props}
+                              aria-disabled="true"
+                              class="flex cursor-not-allowed items-center gap-2 opacity-50"
+                            >
+                              {#if item.icon}
+                                {@const Icon = item.icon}
+                                <Icon {isHovered} size={16} class="custom" />
+                                <span>{item.title}</span>
+                              {:else}
+                                <span>{item.title}</span>
+                              {/if}
+                            </span>
+                          {:else}
+                            <a href={item.url} {...props}>
+                              {#if item.icon}
+                                {@const Icon = item.icon}
+                                <Icon {isHovered} size={16} class="custom" />
 
-                              <span>{item.title}</span>
-                            {:else}
-                              <span>{item.title}</span>
-                            {/if}
-                            {#if item.items}
-                              <ChevronRightIcon
-                                class="custom ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-                              />
-                            {/if}
-                          </a>
-                        {/if}
-                      {/snippet}
-                    </HoverableItem>
-                  {/snippet}
-                </Sidebar.MenuButton>
-              {/snippet}
-            </Collapsible.Trigger>
-            {#if item.items}
-              <Collapsible.Content>
-                <Sidebar.MenuSub>
-                  {#each item.items ?? [] as subItem (subItem.title)}
-                    <Sidebar.MenuSubItem>
-                      <Sidebar.MenuSubButton isActive={subItem.isActive}>
-                        {#snippet child({ props })}
-                          <a href={subItem.url} {...props}>
-                            <span>{subItem.title}</span>
-                            {#if subItem.isPaid && $isFreePlan}
-                              <RocketIcon class="text-primary size-4" />
-                            {/if}
-                          </a>
+                                <span>{item.title}</span>
+                              {:else}
+                                <span>{item.title}</span>
+                              {/if}
+                              {#if item.items}
+                                <ChevronRightIcon
+                                  class="custom ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                                />
+                              {/if}
+                            </a>
+                          {/if}
                         {/snippet}
-                      </Sidebar.MenuSubButton>
-                    </Sidebar.MenuSubItem>
-                  {/each}
-                </Sidebar.MenuSub>
-              </Collapsible.Content>
-            {/if}
-          </Sidebar.MenuItem>
-        {/snippet}
-      </Collapsible.Root>
-    {/each}
-  </Sidebar.Menu>
-</Sidebar.Group>
+                      </HoverableItem>
+                    {/snippet}
+                  </Sidebar.MenuButton>
+                {/snippet}
+              </Collapsible.Trigger>
+              {#if item.items}
+                <Collapsible.Content>
+                  <Sidebar.MenuSub>
+                    {#each item.items ?? [] as subItem (subItem.title)}
+                      <Sidebar.MenuSubItem>
+                        <Sidebar.MenuSubButton isActive={subItem.isActive}>
+                          {#snippet child({ props })}
+                            <a href={subItem.url} {...props}>
+                              <span>{subItem.title}</span>
+                              {#if subItem.isPaid && $isFreePlan}
+                                <RocketIcon class="text-primary size-4" />
+                              {/if}
+                            </a>
+                          {/snippet}
+                        </Sidebar.MenuSubButton>
+                      </Sidebar.MenuSubItem>
+                    {/each}
+                  </Sidebar.MenuSub>
+                </Collapsible.Content>
+              {/if}
+            </Sidebar.MenuItem>
+          {/snippet}
+        </Collapsible.Root>
+      {/each}
+    </Sidebar.Menu>
+  </Sidebar.Group>
+{/each}
diff --git a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-sidebar.svelte b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-sidebar.svelte
index 0dbd1d4d..e308f53e 100644
--- a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-sidebar.svelte
+++ b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-sidebar.svelte
@@ -20,7 +20,7 @@
       <AppLogo />
     </Sidebar.Header>
 
-    <Sidebar.Content>
+    <Sidebar.Content class="gap-0!">
       <NavMain />
     </Sidebar.Content>
 
diff --git a/apps/dashboard/src/lib/features/ui/sort-popover.svelte b/apps/dashboard/src/lib/features/ui/sort-popover.svelte
new file mode 100644
index 00000000..fa6594e8
--- /dev/null
+++ b/apps/dashboard/src/lib/features/ui/sort-popover.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+  import * as Popover from '@cio/ui/base/popover';
+  import * as ToggleGroup from '@cio/ui/base/toggle-group';
+  import { Button } from '@cio/ui/base/button';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import FilterIcon from '@lucide/svelte/icons/filter';
+  import { t } from '$lib/utils/functions/translations';
+  import type { Snippet } from 'svelte';
+
+  export interface SortOption {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    sortOptions: SortOption[];
+    sortKey?: string;
+    selectedOrder?: 'asc' | 'desc';
+    defaultSortKey?: string;
+    defaultSortOrder?: 'asc' | 'desc';
+    isFiltering?: boolean;
+    hasActiveFilters?: boolean;
+    title?: string;
+    onClearFilters?: () => void | Promise<void>;
+    onSortKeyChange?: (key: string) => void;
+    onOrderChange?: (order: 'asc' | 'desc') => void;
+    additionalContent?: Snippet;
+  }
+
+  let {
+    sortOptions,
+    sortKey = $bindable(''),
+    selectedOrder = $bindable('desc'),
+    defaultSortKey = '',
+    defaultSortOrder = 'desc',
+    isFiltering = false,
+    hasActiveFilters,
+    title,
+    onClearFilters = () => {},
+    onSortKeyChange,
+    onOrderChange,
+    additionalContent
+  }: Props = $props();
+
+  let isOpen = $state(false);
+
+  const isActive = $derived(
+    hasActiveFilters !== undefined ? hasActiveFilters : sortKey !== defaultSortKey || selectedOrder !== defaultSortOrder
+  );
+
+  function setSortKey(value: string) {
+    sortKey = value;
+    onSortKeyChange?.(value);
+  }
+
+  function setOrder(value: string) {
+    if (value === 'asc' || value === 'desc') {
+      selectedOrder = value;
+      onOrderChange?.(value);
+    }
+  }
+</script>
+
+<Popover.Root bind:open={isOpen}>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <div class="relative">
+        <Button {...props} variant="outline" size="sm" aria-label={$t('courses.tag_filters.filter')}>
+          {#if isFiltering}
+            <Spinner class="size-4" />
+          {:else}
+            <FilterIcon size={16} />
+          {/if}
+          <span class="hidden md:inline">{$t('courses.tag_filters.filter')}</span>
+        </Button>
+        {#if isActive}
+          <span
+            class="ui:bg-primary absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-white"
+            aria-hidden="true"
+          ></span>
+        {/if}
+      </div>
+    {/snippet}
+  </Popover.Trigger>
+
+  <Popover.Content align="end" class="w-[360px] p-3">
+    <div class="space-y-4">
+      <div class="flex items-center justify-between gap-2">
+        <p class="text-sm font-semibold">{title ?? $t('courses.tag_filters.popover_title')}</p>
+        <Button variant="link" class="h-auto p-0" onclick={onClearFilters} disabled={!isActive}>
+          {$t('courses.tag_filters.clear_all')}
+        </Button>
+      </div>
+
+      <div class="space-y-2">
+        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
+          {$t('courses.tag_filters.sort')}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          {#each sortOptions as option (option.value)}
+            <Button
+              type="button"
+              size="sm"
+              variant={sortKey === option.value ? 'secondary' : 'outline'}
+              onclick={() => setSortKey(option.value)}
+            >
+              {option.label}
+            </Button>
+          {/each}
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <p class="ui:text-muted-foreground text-xs font-semibold uppercase">
+          {$t('courses.tag_filters.order')}
+        </p>
+        <ToggleGroup.Root type="single" variant="outline" size="sm" value={selectedOrder} onValueChange={setOrder}>
+          <ToggleGroup.Item value="asc">{$t('courses.tag_filters.ascending')}</ToggleGroup.Item>
+          <ToggleGroup.Item value="desc">{$t('courses.tag_filters.descending')}</ToggleGroup.Item>
+        </ToggleGroup.Root>
+      </div>
+
+      {@render additionalContent?.()}
+    </div>
+  </Popover.Content>
+</Popover.Root>
diff --git a/apps/dashboard/src/lib/features/ui/sort-select.svelte b/apps/dashboard/src/lib/features/ui/sort-select.svelte
new file mode 100644
index 00000000..66eb792c
--- /dev/null
+++ b/apps/dashboard/src/lib/features/ui/sort-select.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import * as Select from '@cio/ui/base/select';
+
+  export interface SortOption {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    options: SortOption[];
+    value?: string;
+    placeholder?: string;
+    class?: string;
+    onValueChange?: (value: string) => void;
+  }
+
+  let {
+    options,
+    value = $bindable(''),
+    placeholder,
+    class: className = 'min-w-[150px]',
+    onValueChange
+  }: Props = $props();
+
+  const selectedLabel = $derived(
+    options.find((o) => o.value === value)?.label ?? placeholder ?? options[0]?.label ?? ''
+  );
+
+  function handleChange(newValue: string) {
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+</script>
+
+<Select.Root type="single" {value} onValueChange={handleChange}>
+  <Select.Trigger class={className}>
+    {selectedLabel}
+  </Select.Trigger>
+  <Select.Content>
+    {#each options as option (option.value)}
+      <Select.Item value={option.value} label={option.label} disabled={option.value === value}>
+        {option.label}
+      </Select.Item>
+    {/each}
+  </Select.Content>
+</Select.Root>
diff --git a/apps/dashboard/src/lib/features/ui/unsaved-changes.svelte b/apps/dashboard/src/lib/features/ui/unsaved-changes.svelte
index be44414b..178bd16b 100644
--- a/apps/dashboard/src/lib/features/ui/unsaved-changes.svelte
+++ b/apps/dashboard/src/lib/features/ui/unsaved-changes.svelte
@@ -4,10 +4,11 @@
 
   interface Props {
     hasUnsavedChanges?: boolean;
+    skipPrompt?: boolean;
     children?: import('svelte').Snippet;
   }
 
-  let { hasUnsavedChanges = $bindable(false), children }: Props = $props();
+  let { hasUnsavedChanges = $bindable(false), skipPrompt = false, children }: Props = $props();
 
   beforeNavigate(({ cancel }) => {
     if (!shouldAbandonChanges()) {
@@ -20,6 +21,7 @@
 
   function shouldAbandonChanges() {
     if (!hasUnsavedChanges) return true;
+    if (skipPrompt) return true;
     return window.confirm($t('common.unsaved_changes.message'));
   }
 </script>
diff --git a/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte b/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
index 0e2b313c..7d5cb08d 100644
--- a/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
+++ b/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
@@ -97,7 +97,7 @@
     if (!isOpen) $handleOpenWidget.open = false;
   }}
 >
-  <Dialog.Content class="w-3/5">
+  <Dialog.Content class="ui:z-300! w-3/5">
     <Dialog.Header>
       <Dialog.Title>{$t('course.navItem.landing_page.upload_widget.title')}</Dialog.Title>
     </Dialog.Header>
diff --git a/apps/dashboard/src/lib/features/ui/visit-org-site-btn.svelte b/apps/dashboard/src/lib/features/ui/visit-org-site-btn.svelte
index 8d478494..f9f91817 100644
--- a/apps/dashboard/src/lib/features/ui/visit-org-site-btn.svelte
+++ b/apps/dashboard/src/lib/features/ui/visit-org-site-btn.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from '@cio/ui/base/button';
+  import { Button, type ButtonVariant } from '@cio/ui/base/button';
   import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
   import { currentOrgDomain } from '$lib/utils/store/org';
   import { isMobile } from '$lib/utils/store/useMobile';
@@ -9,22 +9,27 @@
   interface Props {
     className?: string;
     isLMS?: boolean;
+    labelKey?: string;
+    variant?: ButtonVariant;
   }
 
-  let { className = '', isLMS = false }: Props = $props();
+  let {
+    className = '',
+    isLMS = false,
+    labelKey = 'settings.subheadings.view_site',
+    variant = 'default'
+  }: Props = $props();
 
   let href = $derived(isLMS && $user.isLoggedIn ? `${$currentOrgDomain}/home` : $currentOrgDomain);
 </script>
 
-<a {href} target="_blank" class="{className} ml-2 hover:no-underline">
-  <Button variant="default">
-    {#if !$isMobile}
-      {#if isLMS}
-        {$t('dashboard.visit_site')}
-      {:else}
-        {$t('settings.subheadings.view_site')}
-      {/if}
+<Button {href} target="_blank" {variant} class={`ml-2 ${className}`.trim()}>
+  {#if !$isMobile}
+    {#if isLMS}
+      {$t('dashboard.visit_site')}
+    {:else}
+      {$t(labelKey)}
     {/if}
-    <ArrowUpRightIcon class="custom" />
-  </Button>
-</a>
+  {/if}
+  <ArrowUpRightIcon class="custom" />
+</Button>
diff --git a/apps/dashboard/src/lib/utils/csp-domains.js b/apps/dashboard/src/lib/utils/csp-domains.js
index af108526..6516ecb8 100644
--- a/apps/dashboard/src/lib/utils/csp-domains.js
+++ b/apps/dashboard/src/lib/utils/csp-domains.js
@@ -11,7 +11,9 @@ const saasDefaults = {
     'https://umami.hz.oncws.com',
     'https://www.youtube.com',
     'https://youtube.com',
-    'https://google.com'
+    'https://google.com',
+    'https://apis.google.com',
+    'https://accounts.google.com'
   ],
   styleSrc: [
     'https://cdn.plyr.io',
@@ -34,14 +36,17 @@ const saasDefaults = {
     'https://*.r2.cloudflarestorage.com',
     'https://*.senja.io',
     'https://*.ytimg.com',
-    'https://noembed.com'
+    'https://noembed.com',
+    'https://www.googleapis.com'
   ],
   frameSrc: [
     'https://www.youtube.com',
     'https://youtube.com',
     'https://www.youtube-nocookie.com',
     'https://www.google.com',
-    'https://google.com'
+    'https://google.com',
+    'https://drive.google.com',
+    'https://docs.google.com'
   ],
   fontSrc: ['https://fonts.gstatic.com', 'https://cdn.plyr.io'],
   mediaSrc: ['https:']
diff --git a/apps/dashboard/src/lib/utils/functions/google-drive-picker.ts b/apps/dashboard/src/lib/utils/functions/google-drive-picker.ts
new file mode 100644
index 00000000..1a381e63
--- /dev/null
+++ b/apps/dashboard/src/lib/utils/functions/google-drive-picker.ts
@@ -0,0 +1,167 @@
+/**
+ * Loads Google Identity Services + Picker API and opens a Drive file picker for video files.
+ * Requires PUBLIC_GOOGLE_PICKER_CLIENT_ID and PUBLIC_GOOGLE_PICKER_API_KEY (browser API key).
+ */
+
+type TokenResponse = {
+  error?: string;
+  access_token?: string;
+};
+
+type PickerDocument = {
+  id: string;
+  name: string;
+  mimeType: string;
+};
+
+type PickerData = {
+  action: string;
+  docs?: PickerDocument[];
+};
+
+type GapiLoad = {
+  load: (api: string, onLoaded: () => void) => void;
+};
+
+type GooglePickerGlobal = {
+  picker: {
+    PickerBuilder: new () => {
+      addView: (view: unknown) => unknown;
+      setOAuthToken: (token: string) => unknown;
+      setDeveloperKey: (key: string) => unknown;
+      setCallback: (cb: (data: PickerData) => void) => unknown;
+      build: () => { setVisible: (visible: boolean) => void };
+    };
+    DocsView: new (viewId?: string) => unknown;
+    ViewId: { DOCS_VIDEOS: string };
+    Action: { PICKED: string; CANCEL: string };
+  };
+  accounts: {
+    oauth2: {
+      initTokenClient: (config: { client_id: string; scope: string; callback: (response: TokenResponse) => void }) => {
+        requestAccessToken: (overrideConfig?: Record<string, unknown>) => void;
+      };
+    };
+  };
+};
+
+function appendScriptOnce(src: string, id: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const existing = document.getElementById(id);
+    if (existing) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.id = id;
+    script.src = src;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+    document.head.appendChild(script);
+  });
+}
+
+async function ensurePickerApiLoaded(): Promise<void> {
+  await appendScriptOnce('https://accounts.google.com/gsi/client', 'cio-google-gsi-client');
+  await appendScriptOnce('https://apis.google.com/js/api.js', 'cio-google-api-js');
+
+  const gapi = (window as unknown as { gapi?: GapiLoad }).gapi;
+  if (!gapi?.load) {
+    throw new Error('Google API client failed to initialize');
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const timeoutId = window.setTimeout(() => reject(new Error('Google Picker load timed out')), 20000);
+
+    try {
+      gapi.load('picker', () => {
+        window.clearTimeout(timeoutId);
+        resolve();
+      });
+    } catch {
+      window.clearTimeout(timeoutId);
+      reject(new Error('Failed to load Google Picker module'));
+    }
+  });
+}
+
+function getGoogle(): GooglePickerGlobal {
+  const google = (window as unknown as { google?: GooglePickerGlobal }).google;
+  if (!google?.picker || !google?.accounts?.oauth2) {
+    throw new Error('Google Picker is not available');
+  }
+  return google;
+}
+
+export type GoogleDrivePickResult = {
+  fileId: string;
+  name: string;
+  mimeType: string;
+};
+
+/**
+ * Opens OAuth consent (if needed) and the Drive video picker. Resolves with the first selected file, or null if cancelled / error.
+ */
+export async function pickGoogleDriveVideo(params: {
+  clientId: string;
+  apiKey: string;
+}): Promise<GoogleDrivePickResult | null> {
+  await ensurePickerApiLoaded();
+  const google = getGoogle();
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (value: GoogleDrivePickResult | null) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+
+    const tokenClient = google.accounts.oauth2.initTokenClient({
+      client_id: params.clientId,
+      scope: 'https://www.googleapis.com/auth/drive.readonly',
+      callback: (tokenResponse: TokenResponse) => {
+        if (tokenResponse.error || !tokenResponse.access_token) {
+          finish(null);
+          return;
+        }
+
+        const view = new google.picker.DocsView(google.picker.ViewId.DOCS_VIDEOS);
+        const picker = new google.picker.PickerBuilder()
+          .addView(view)
+          .setOAuthToken(tokenResponse.access_token)
+          .setDeveloperKey(params.apiKey)
+          .setCallback((data: PickerData) => {
+            if (data.action === google.picker.Action.PICKED && data.docs?.[0]?.id) {
+              const doc = data.docs[0];
+              finish({
+                fileId: doc.id,
+                name: doc.name,
+                mimeType: doc.mimeType
+              });
+              return;
+            }
+
+            if (data.action === google.picker.Action.CANCEL) {
+              finish(null);
+            }
+          })
+          .build();
+
+        picker.setVisible(true);
+      }
+    });
+
+    tokenClient.requestAccessToken();
+  });
+}
+
+export function googleDrivePreviewUrl(fileId: string): string {
+  return `https://drive.google.com/file/d/${fileId}/preview`;
+}
+
+export function googleDriveThumbnailUrl(fileId: string): string {
+  return `https://drive.google.com/thumbnail?id=${fileId}&sz=w400`;
+}
diff --git a/apps/dashboard/src/lib/utils/services/api/base.svelte.ts b/apps/dashboard/src/lib/utils/services/api/base.svelte.ts
index 154fec3f..14418ed4 100644
--- a/apps/dashboard/src/lib/utils/services/api/base.svelte.ts
+++ b/apps/dashboard/src/lib/utils/services/api/base.svelte.ts
@@ -40,6 +40,7 @@ export class BaseApi {
 
     this.isLoading = true;
     this.error = null;
+    this.success = false;
 
     try {
       const response = await requestFn();
@@ -50,6 +51,7 @@ export class BaseApi {
 
         if (apiResult.success === false) {
           console.log('apiResult false', apiResult);
+          this.error = JSON.stringify(apiResult);
           options.onError?.(apiResult as ExtractError<TrpcType>);
 
           return;
diff --git a/apps/dashboard/src/lib/utils/services/api/parse-api-error-body.ts b/apps/dashboard/src/lib/utils/services/api/parse-api-error-body.ts
new file mode 100644
index 00000000..71aa4f10
--- /dev/null
+++ b/apps/dashboard/src/lib/utils/services/api/parse-api-error-body.ts
@@ -0,0 +1,36 @@
+/** Backend error JSON from API `handleError` responses (also carried as thrown `ApiError.message` on 4xx). */
+export type ApiErrorBody = {
+  success: false;
+  error: string;
+  code: string;
+  field?: string;
+};
+
+/**
+ * Parses `this.error` / ApiError.message when the API returned a JSON body with `success: false`.
+ */
+export function tryParseApiErrorBody(raw: string | null | undefined): ApiErrorBody | null {
+  if (!raw?.trim()) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (
+      typeof parsed === 'object' &&
+      parsed !== null &&
+      'success' in parsed &&
+      (parsed as { success: unknown }).success === false &&
+      'code' in parsed &&
+      typeof (parsed as { code: unknown }).code === 'string' &&
+      'error' in parsed &&
+      typeof (parsed as { error: unknown }).error === 'string'
+    ) {
+      return parsed as ApiErrorBody;
+    }
+  } catch {
+    // not JSON
+  }
+
+  return null;
+}
diff --git a/apps/dashboard/src/lib/utils/services/api/server.ts b/apps/dashboard/src/lib/utils/services/api/server.ts
index 7ce5ae5f..d9cab379 100644
--- a/apps/dashboard/src/lib/utils/services/api/server.ts
+++ b/apps/dashboard/src/lib/utils/services/api/server.ts
@@ -1,4 +1,19 @@
 import { env } from '$env/dynamic/private';
+import { ApiError } from './types';
+
+export type ServerApiResult<T> = { ok: true; status: number; body: T } | { ok: false; status: number; message: string };
+
+function getServerApiErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    return error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return 'Unknown server API error';
+}
 
 /**
  * Server-side helper to get API key headers for RPC client calls
@@ -26,3 +41,51 @@ export function getApiKeyHeaders(): { headers: { Authorization: string } } {
     }
   };
 }
+
+/**
+ * Wrap server-side API calls so SSR loaders can degrade gracefully instead of throwing.
+ */
+export async function safeServerApi<T>(requestFn: () => Promise<Response>): Promise<ServerApiResult<T>> {
+  try {
+    const response = await requestFn();
+    const result = (await response.json()) as unknown;
+
+    if (typeof result === 'object' && result !== null && 'success' in result) {
+      if ((result as { success: boolean }).success === true) {
+        return {
+          ok: true,
+          status: response.status,
+          body: result as T
+        };
+      }
+
+      const errorResult = result as { error?: string; message?: string } | null;
+
+      return {
+        ok: false,
+        status: response.status,
+        message: errorResult?.error ?? errorResult?.message ?? response.statusText
+      };
+    }
+
+    if (response.ok) {
+      return {
+        ok: true,
+        status: response.status,
+        body: result as T
+      };
+    }
+
+    return {
+      ok: false,
+      status: response.status,
+      message: response.statusText || 'Unexpected server API response'
+    };
+  } catch (error) {
+    return {
+      ok: false,
+      status: error instanceof ApiError ? (error.status ?? 0) : 0,
+      message: getServerApiErrorMessage(error)
+    };
+  }
+}
diff --git a/apps/dashboard/src/lib/utils/translations/da.json b/apps/dashboard/src/lib/utils/translations/da.json
index 10c84112..f1ae5ed9 100644
--- a/apps/dashboard/src/lib/utils/translations/da.json
+++ b/apps/dashboard/src/lib/utils/translations/da.json
@@ -364,6 +364,32 @@
       "created": "Automatiseringsnøgle oprettet. Gem den nu, fordi den fulde hemmelighed kun vises én gang.",
       "rotated": "Automatiseringsnøglen drejet. Gem den nye hemmelighed nu, fordi den ikke vil blive vist igen.",
       "revoked": "Automatiseringsnøgle tilbagekaldt."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Der opstod en fejl under reaktion på indlægget",
+        "news_feed_fail": "Kunne ikke hente programmets nyhedsfeed",
+        "post_create_failed": "Kunne ikke oprette indlæg",
+        "post_update_failed": "Kunne ikke opdatere indlægget",
+        "code": {
+          "program_forbidden": "Du skal være medlem af dette program for at udføre denne handling.",
+          "program_member_check_failed": "Vi kunne ikke bekræfte dit programmedlemskab. Prøv igen.",
+          "program_not_found": "Dette program kunne ikke findes.",
+          "program_create_failed": "Kunne ikke oprette programmet.",
+          "program_update_failed": "Kunne ikke opdatere programmet.",
+          "program_delete_failed": "Kunne ikke slette programmet.",
+          "program_member_not_found": "Dette programmedlem kunne ikke findes.",
+          "program_newsfeed_not_found": "Det indlæg kunne ikke findes.",
+          "program_newsfeed_comment_not_found": "Den kommentar kunne ikke findes."
+        }
+      },
+      "success": {
+        "comment_deleted": "Kommentar slettet",
+        "comment_added": "Kommentar tilføjet",
+        "feed_delete_success": "Indlægget blev slettet",
+        "post_created": "Indlægget er oprettet",
+        "post_updated": "Opslaget blev opdateret"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Fællesskab",
     "explore": "Udforsk",
     "help": "Hjælp",
-    "settings": "Indstillinger"
+    "settings": "Indstillinger",
+    "programs": "Programmer"
   },
   "upgrade": {
     "certificate": "Opgrader din plan for at generere certifikater",
@@ -517,12 +544,23 @@
       "all_courses": "Alle kurser",
       "select_courses": "Vælg specifikke kurser",
       "select_courses_placeholder": "Vælg kurser...",
+      "program_access": "Programadgang",
+      "no_programs": "Ingen programtildeling",
+      "all_programs": "Alle programmer",
+      "select_programs": "Vælg specifikke programmer",
+      "select_programs_placeholder": "Vælg programmer...",
       "send_email": "Send invitationsmail til importerede brugere",
       "submit": "Importer brugere",
       "back": "Tilbage til Publikum",
       "snackbar_success": "{imported} nye invitationer, {assigned} eksisterende studerende med kursusadgang, {pendingInvitesRenewed} afventende invitationer fornyet ({emailsSent} e-mails sendt)",
       "snackbar_no_emails": "Indtast venligst mindst én e-mailadresse",
-      "snackbar_failed": "Kunne ikke importere brugere"
+      "snackbar_failed": "Kunne ikke importere brugere",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Rediger",
       "cancel": "Annuller",
       "give": "Giv et svar",
-      "comment": "Kommentar"
+      "comment": "Kommentar",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Matchende",
                 "ordering": "Bestilling",
                 "hotspot": "Hotspot",
-                "link": "Links"
+                "link": "Links",
+                "word_bank": "Ordbank",
+                "star": "Stjernebedømmelse"
               },
               "select_type": "Vælg type",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "korrekt",
                 "not_set": "Ikke indstillet",
                 "incorrect_badge": "Forkert"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Dine svar",
+                  "correct_label": "Korrekte svar"
+                },
+                "preview": {
+                  "filled_label": "Forventede svar i sammenhæng"
+                },
+                "take": {
+                  "helper": "Klik på et ord for at placere det i det første tomme felt, eller træk det til et tomt. Klik på et udfyldt tomrum for at returnere ordet til banken.",
+                  "bank_heading": "Ordbank",
+                  "clear_blank_sr": "Fjern ord fra tomt"
+                },
+                "edit": {
+                  "template_label": "Sætningsskabelon",
+                  "template_placeholder": "Målinger til at beskrive vores data kaldes ___. ___ er en funktion...",
+                  "template_helper": "Brug tre understregninger (___) for hvert blanktegn. Eleverne vil se en ordbank med korrekte svar og distraktorer.",
+                  "no_blanks_warning": "Tilføj mindst én ___ tom markør i din skabelon.",
+                  "correct_answers_heading": "Korrekt svar for hver blank",
+                  "blank_label": "Blank",
+                  "correct_placeholder": "Korrekt udtryk eller sætning",
+                  "distractors_heading": "Ekstra ord (distraktioner)",
+                  "distractor_placeholder": "Forkert mulighed",
+                  "add_distractor": "Tilføj distraktor"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Korrekt svar"
+                },
+                "take": {
+                  "helper": "Vælg din vurdering.",
+                  "star_sr": "Stjerne '{'n'}' af '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Korrekt stjerneværdi",
+                  "correct_value_info": "Eleverne med stjernetæller skal vælge at optjene hele point.",
+                  "max_stars_label": "Maksimalt antal stjerner",
+                  "max_stars_info": "Hvor mange stjerner eleverne ser (1-10). Standard er 5.",
+                  "correct_value_placeholder": "f.eks. 3",
+                  "max_stars_placeholder": "f.eks. 5"
+                }
               }
             },
             "settings": "Indstillinger",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Annuller upload",
                 "upload_cancelled": "Upload annulleret af brugeren",
                 "max_files": "{count, plural, one {You can upload # file} other {You can upload # files}}",
-                "max_files_and_size": "(op til {size} hver)"
+                "max_files_and_size": "(op til {size} hver)",
+                "google_drive_choose": "Vælg fra Google Drev",
+                "google_drive_opening": "Åbner vælgeren...",
+                "google_drive_hint": "Vælg en video fra din Google-konto. Alle, der ser lektionen, skal have adgang – indstil deling i Drev til \"Alle med linket kan se\" (eller din organisations tilsvarende).",
+                "google_drive_not_configured": "Google Drev-import er ikke konfigureret til denne implementering. Føj PUBLIC_GOOGLE_PICKER_CLIENT_ID og PUBLIC_GOOGLE_PICKER_API_KEY til dit miljø.",
+                "google_drive_error": "Kunne ikke åbne Google Drev. Tjek, at din browser tillader pop op-vinduer, og at Google-vælgeren er konfigureret korrekt."
               },
               "empty_title": "Ingen videoer endnu",
-              "empty_description": "Tilføj videoer fra YouTube, upload eller dit mediebibliotek"
+              "empty_description": "Tilføj videoer fra YouTube, upload eller dit mediebibliotek",
+              "google_drive": "Google Drev"
             },
             "slide": {
               "title": "Slide",
@@ -1697,6 +1791,7 @@
       "empty_description": "Del din viden med verden ved at skabe engagerende kurser for dine elever.",
       "error_message": "Der opstod en fejl.",
       "lessons_number": "lektioner",
+      "exercise": "øvelse",
       "students": "studerende",
       "published": "Udgivet",
       "unpublished": "Upubliceret",
@@ -1716,7 +1811,8 @@
         "clone": "Klon",
         "share": "Del",
         "invite": "Inviter",
-        "delete": "Slet"
+        "delete": "Slet",
+        "open": "Åbn"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Tags",
       "empty_tags": "Ingen tags tilgængelige"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Hjælp mig med at skrive",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "I dag er endnu en dag til at bringe dig tættere på dine læringsmål. Giv ikke op, jo mere du lærer, jo bedre bliver du.",
     "lessons_completed": "Lektioner afsluttet",
     "no_courses_started": "Ingen kurser startet",
-    "revenue": "Indtægter",
-    "revenue_description": "Omtrentlige indtægter fra kursussalg",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Antal kurser",
     "no_courses_description": "Kurser oprettet i denne organisation",
     "total_students": "Samlet studerende",
@@ -1819,7 +1921,8 @@
           "banner_text": "Bannertekst",
           "banner_text_label": "Opdater bannertekst",
           "banner_text_placeholder": "Skriv teksten her"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Brugerdefineret domæne",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Tilføj DNS-posterne nedenfor, og opdater derefter bekræftelsen.",
         "pending_verification_description": "DNS-poster blev fundet. SSL-udstedelse eller -validering er stadig i gang.",
         "reconnect_description": "Dette domæne skal forbindes igen gennem det nye Cloudflare-opsætningsflow.",
-        "error_description": "Dette tilpassede domæne eksisterer, men bekræftelsen er ikke fuldført endnu."
+        "error_description": "Dette tilpassede domæne eksisterer, men bekræftelsen er ikke fuldført endnu.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Platform",
+    "home": "Hjem",
+    "content": "Indhold",
+    "people": "Mennesker",
     "dashboard": "Dashboard",
     "courses": "Kurser",
     "community": "Fællesskab",
@@ -1989,7 +2096,8 @@
     "unlock": "Lås op for ubegrænsede funktioner og invester i vores fremtid",
     "upgrade": "Opgrader nu",
     "tags": "Tags",
-    "automation": "Automatisering"
+    "automation": "Automatisering",
+    "programs": "Programmer"
   },
   "media_manager": {
     "page_title": "Media Manager - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Upload",
       "youtube": "YouTube",
       "generic": "Generisk",
-      "external_url": "Ekstern URL"
+      "external_url": "Ekstern URL",
+      "google_drive": "Google Drev"
     },
     "kind": {
       "video": "Video",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "N/A"
     },
-    "empty_description": "Aktivet findes ikke eller er ikke tilgængeligt i denne organisation."
+    "empty_description": "Aktivet findes ikke eller er ikke tilgængeligt i denne organisation.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Indstillinger",
@@ -2107,7 +2217,8 @@
       "active": "Du har ingen aktiv fakturering",
       "provider": "Vi bruger Polar til at hjælpe med at administrere din fakturering",
       "open_billing": "Åben fakturering",
-      "error": "Der opstod en fejl under åbning af fakturering"
+      "error": "Der opstod en fejl under åbning af fakturering",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Telegram",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Trin 2: Indtast det chat-id, du har fået af botten.",
       "connect_button": "Forbind",
       "success_message": "Integration vellykket",
-      "disconnect": "Afbryd forbindelsen"
+      "disconnect": "Afbryd forbindelsen",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Landingsside",
@@ -2212,6 +2324,99 @@
         "title": "Baggrundsbillede",
         "show_background": "Vis baggrund",
         "hide_background": "Skjul baggrund"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Gem",
+        "close": "Luk",
+        "page_builder": "Sidebygger",
+        "footer": {
+          "text": "Sidefodstekst",
+          "add": "Tilføj sidefodslink",
+          "default_label": "Nyt link",
+          "link_label": "Link label",
+          "link_href": "Link URL",
+          "remove": "Fjern sidefodslink"
+        },
+        "embed": {
+          "toggle": "Vis indlejringssektion",
+          "title": "Afsnits titel",
+          "title_placeholder": "Afsnits titel",
+          "description": "Beskrivelse",
+          "description_placeholder": "Valgfri beskrivelse",
+          "code": "Integrer kode",
+          "code_placeholder": "Indsæt indlejringskode her",
+          "code_description": "Indsæt hele indlejringskodestykket eller iframe-koden.",
+          "secondary_label": "Sekundær knaplabel",
+          "secondary_href": "Sekundær knaplink"
+        },
+        "callout": {
+          "toggle": "Vis billedforklaringssektion",
+          "heading": "Overskrift",
+          "heading_default": "Klar til at begynde at lære?",
+          "heading_placeholder": "Indtast en overskrift",
+          "description": "Beskrivelse",
+          "description_placeholder": "Tilføj en kort beskrivelse eller lad stå tomt",
+          "action_label": "Knap etiket",
+          "action_label_default": "Kom i gang",
+          "action_label_placeholder": "Knap tekst",
+          "action_href": "Knap link",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Tilføj navigationslink",
+          "default_label": "Nyt link",
+          "link_label": "Link label",
+          "link_href": "Link URL",
+          "remove": "Fjern navigationslink"
+        },
+        "hero": {
+          "heading": "Overskrift",
+          "subheading": "Underoverskrift",
+          "primary_label": "Etiket med primær knap",
+          "primary_href": "Primær knaplink",
+          "secondary_toggle": "Vis sekundær handling",
+          "secondary_label": "Sekundær knaplabel",
+          "secondary_href": "Sekundær knaplink",
+          "image": "Heltebillede",
+          "upload": "Upload billede",
+          "clear": "Ryd billede"
+        },
+        "sections": {
+          "hero": "Helt",
+          "hero_desc": "Overskrift, handlingsknapper og heltebilledet.",
+          "navigation": "Navigation",
+          "navigation_desc": "Links vist i landingssidehovedet.",
+          "callout": "Billedforklaring",
+          "callout_desc": "Valgfrit reklamebanner vises efter kurser.",
+          "embed": "Integrer",
+          "embed_desc": "Valgfri iframe-sektion vist efter kurser.",
+          "footer": "Sidefod",
+          "footer_desc": "Sidefodstekst og links."
+        }
+      },
+      "content": {
+        "heading": "Rediger indhold",
+        "description": "Opdater helten, navigationen, indlejringen og sidefoden, der vises i hvert tema.",
+        "edit": "Rediger indhold"
+      },
+      "theme": {
+        "heading": "Vælg et tema",
+        "description": "Vælg den visuelle stil, besøgende ser på din offentlige landingsside.",
+        "cards": {
+          "classic": {
+            "title": "Klassisk",
+            "description": "Traditionelt layout med afbalanceret hierarki"
+          },
+          "bold": {
+            "title": "Fed",
+            "description": "Høj kontrast, redaktionelt og slående"
+          },
+          "minimal": {
+            "title": "Minimal",
+            "description": "Rent, lyst og kursusfokuseret"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Brugerdefineret tema",
           "add_theme": "Tilføj tema"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Profil",
@@ -2266,7 +2472,8 @@
         "file_size": "Maks filstørrelse:",
         "accepted": "Accepteret:",
         "validation_error": "Filstørrelsen overstiger den maksimale grænse:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Profil",
@@ -2386,7 +2593,8 @@
         "general": "Generelt",
         "sso": "SSO",
         "token_auth": "Token Auth"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Token Auth",
@@ -2407,6 +2615,9 @@
       "integration_description": "Signer en JWT med hemmeligheden og omdiriger brugere til token-udvekslings-URL'en.",
       "no_config": "Ingen token-godkendelse er konfigureret. Generer en signeringshemmelighed for at komme i gang.",
       "actions_menu": "Tokengodkendelseshandlinger"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Søg"
-    }
+    },
+    "cancel": "Annuller"
   },
   "welcome_modal": {
     "we_at": "Vi kl",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "N/A"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Satsgrænser",
         "rate_limits_description": "Læs/skriv/publicér anmodninger tilladt pr. minut.",
         "used_label": "Brugt:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Aktiv",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Skrivebeskyttet adgang",
       "disabled_description": "Kun organisationsadministratorer kan oprette, rotere eller tilbagekalde automatiseringsnøgler. Lærere kan gennemgå opsætningsinstruktionerne her."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programmer",
+    "page_title": "Programmer",
+    "create": "Nyt program",
+    "create_success": "Program oprettet",
+    "update_success": "Program opdateret",
+    "delete_success": "Program slettet",
+    "members_added": "Medlemmer tilføjet",
+    "member_removed": "Medlem fjernet",
+    "course_added": "Kursus tilføjet",
+    "course_removed": "Kursus fjernet",
+    "empty_title": "Ingen programmer endnu",
+    "empty_description": "Opret dit første certificerings- eller overholdelsesprogram.",
+    "settings": {
+      "general": "Generelt",
+      "name_label": "Navn",
+      "description_label": "Beskrivelse",
+      "status_label": "Status",
+      "save": "Gem ændringer",
+      "danger_zone": "Farezone",
+      "delete": "Slet program",
+      "delete_description": "Når det er slettet, kan dette program og alle dets data ikke gendannes.",
+      "confirm_delete": "Er du sikker på, at du vil slette dette program? Dette kan ikke fortrydes."
+    },
+    "lms": {
+      "empty_title": "Ingen programmer endnu",
+      "empty_description": "Du er ikke blevet tilmeldt nogen programmer."
+    },
+    "people": {
+      "invite": "Inviter",
+      "invite_modal_title": "Inviter medlemmer",
+      "invite_modal_description": "Tilføj personer til dette program via e-mail.",
+      "email_label": "E-mail",
+      "role_label": "Rolle",
+      "add_another": "Tilføj en anden",
+      "invite_submit": "Send invitationer",
+      "empty_title": "Ingen medlemmer endnu",
+      "empty_description": "Inviter folk til at deltage i dette program."
+    },
+    "courses": {
+      "add": "Tilføj kursus",
+      "add_modal_title": "Føj kursus til programmet",
+      "select_course": "Vælg et kursus",
+      "select_placeholder": "Vælg et kursus...",
+      "empty_title": "Ingen kurser endnu",
+      "empty_description": "Tilføj kurser til dette program.",
+      "select_courses": "Vælg kurser",
+      "search_placeholder": "Søg efter kurser",
+      "no_available_courses": "Ingen tilgængelige kurser at tilføje.",
+      "no_matching_courses": "Ingen kurser matcher din søgning.",
+      "no_matching_program_courses": "Ingen programkurser matcher din søgning.",
+      "pagination_status": "Side {page} af {totalPages}",
+      "published_access_callout_title": "Studerendes adgang",
+      "published_access_callout_description": "Studerende har kun adgang til offentliggjorte kurser. Kurser kan være i dette program for dit team, mens de stadig er upublicerede, mens de forbliver skjulte for eleverne, indtil du udgiver dem."
+    },
+    "newsfeed": {
+      "post": "Nyt indlæg",
+      "post_placeholder": "Hvad tænker du på?",
+      "post_submit": "Indlæg",
+      "empty_title": "Ingen indlæg endnu",
+      "empty_description": "Vær den første til at poste noget.",
+      "heading": "Nyhedsfeed",
+      "make_a_post": "Lav et indlæg",
+      "edit_post": "Rediger indlæg",
+      "editor_placeholder": "Del en opdatering med dit program",
+      "cancel": "Annuller",
+      "pinned": "Fastgjort",
+      "delete_feed_title": "Slet indlæg",
+      "delete_feed_description": "Er du sikker på, at du vil slette dette indlæg?",
+      "confirm_delete": "Slet",
+      "user_avatar_alt": "Bruger avatar",
+      "comments": {
+        "comment": "kommentar",
+        "showing_of": "Viser {shown} af {total}",
+        "hide": "Skjul kommentarer",
+        "placeholder": "Tilføj programkommentar",
+        "submit_aria": "Send kommentar",
+        "delete": "Slet"
+      },
+      "card": {
+        "pin": "Pin",
+        "unpin": "Frigør",
+        "edit": "Rediger",
+        "delete": "Slet"
+      }
+    },
+    "create_modal": {
+      "title": "Opret program",
+      "description": "Tilføj et nyt certificerings- eller overholdelsesprogram.",
+      "name_label": "Navn",
+      "name_placeholder": "f.eks. OSHA sikkerhedscertificering",
+      "description_label": "Beskrivelse",
+      "description_placeholder": "Hvad handler dette program om?",
+      "submit": "Opret"
+    },
+    "sidebar": {
+      "newsfeed": "Nyhedsfeed",
+      "courses": "Kurser",
+      "people": "Mennesker",
+      "settings": "Indstillinger"
+    },
+    "status": {
+      "active": "Aktiv",
+      "inactive": "Inaktiv",
+      "archived": "Arkiveret"
+    },
+    "description": "Giv en gruppe mennesker adgang til flere kurser, f.eks. en klasse",
+    "search_placeholder": "Søg programmer",
+    "multiple_added": "Kurser tilføjet",
+    "no_matching_programs": "Ingen programmer matcher dine filtre.",
+    "card": {
+      "courses": "Kurser",
+      "students": "studerende"
+    },
+    "table": {
+      "name": "Navn",
+      "courses": "Kurser",
+      "students": "studerende",
+      "status": "Status",
+      "description": "Beskrivelse"
+    },
+    "filters": {
+      "filter": "Filter",
+      "clear_all": "Ryd alle",
+      "popover_title": "Filtre",
+      "sort": "Sorter",
+      "order": "Bestil",
+      "status": "Status",
+      "ascending": "Asc",
+      "descending": "Desc",
+      "sort_name": "Navn",
+      "sort_courses": "Kurser",
+      "sort_students": "studerende",
+      "sort_status": "Status"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index a37c1a1e..44843b3c 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -364,6 +364,32 @@
       "created": "Automatisierungsschlüssel erstellt. Speichern Sie es jetzt, da das vollständige Geheimnis nur einmal angezeigt wird.",
       "rotated": "Automatisierungsschlüssel gedreht. Speichern Sie das neue Geheimnis jetzt, da es nicht mehr angezeigt wird.",
       "revoked": "Automatisierungsschlüssel widerrufen."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Beim Reagieren auf den Beitrag ist ein Fehler aufgetreten",
+        "news_feed_fail": "Der Programm-Newsfeed konnte nicht abgerufen werden",
+        "post_create_failed": "Beitrag konnte nicht erstellt werden",
+        "post_update_failed": "Beitrag konnte nicht aktualisiert werden",
+        "code": {
+          "program_forbidden": "Sie müssen Mitglied dieses Programms sein, um diese Aktion ausführen zu können.",
+          "program_member_check_failed": "Wir konnten Ihre Programmmitgliedschaft nicht bestätigen. Versuchen Sie es erneut.",
+          "program_not_found": "Dieses Programm konnte nicht gefunden werden.",
+          "program_create_failed": "Das Programm konnte nicht erstellt werden.",
+          "program_update_failed": "Das Programm konnte nicht aktualisiert werden.",
+          "program_delete_failed": "Das Programm konnte nicht gelöscht werden.",
+          "program_member_not_found": "Dieses Programmmitglied konnte nicht gefunden werden.",
+          "program_newsfeed_not_found": "Dieser Beitrag konnte nicht gefunden werden.",
+          "program_newsfeed_comment_not_found": "Dieser Kommentar konnte nicht gefunden werden."
+        }
+      },
+      "success": {
+        "comment_deleted": "Kommentar gelöscht",
+        "comment_added": "Kommentar hinzugefügt",
+        "feed_delete_success": "Beitrag erfolgreich gelöscht",
+        "post_created": "Beitrag erfolgreich erstellt",
+        "post_updated": "Beitrag erfolgreich aktualisiert"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Gemeinschaft",
     "explore": "Entdecken",
     "help": "Hilfe",
-    "settings": "Einstellungen"
+    "settings": "Einstellungen",
+    "programs": "Programme"
   },
   "upgrade": {
     "certificate": "Aktualisieren Sie Ihren Plan, um Zertifikate zu generieren",
@@ -517,12 +544,23 @@
       "all_courses": "Alle Kurse",
       "select_courses": "Wählen Sie bestimmte Kurse aus",
       "select_courses_placeholder": "Kurse auswählen...",
+      "program_access": "Programmzugriff",
+      "no_programs": "Keine Programmzuweisung",
+      "all_programs": "Alle Programme",
+      "select_programs": "Bestimmte Programme auswählen",
+      "select_programs_placeholder": "Programme auswählen...",
       "send_email": "Senden Sie Einladungs-E-Mails an importierte Benutzer",
       "submit": "Benutzer importieren",
       "back": "Zurück zum Publikum",
       "snackbar_success": "{imported} neue Einladungen, {assigned} bestehende Studierende mit Kurszugang, {pendingInvitesRenewed} ausstehende Einladungen erneuert ({emailsSent} E-Mails gesendet)",
       "snackbar_no_emails": "Bitte geben Sie mindestens eine E-Mail-Adresse ein",
-      "snackbar_failed": "Benutzer konnten nicht importiert werden"
+      "snackbar_failed": "Benutzer konnten nicht importiert werden",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Bearbeiten",
       "cancel": "Abbrechen",
       "give": "Geben Sie eine Antwort",
-      "comment": "Kommentar"
+      "comment": "Kommentar",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Passend",
                 "ordering": "Bestellen",
                 "hotspot": "Hotspot",
-                "link": "Links"
+                "link": "Links",
+                "word_bank": "Wortbank",
+                "star": "Sternebewertung"
               },
               "select_type": "Typ auswählen",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Richtig",
                 "not_set": "Nicht festgelegt",
                 "incorrect_badge": "Falsch"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Ihre Antworten",
+                  "correct_label": "Richtige Antworten"
+                },
+                "preview": {
+                  "filled_label": "Erwartete Antworten im Kontext"
+                },
+                "take": {
+                  "helper": "Klicken Sie auf ein Wort, um es im ersten leeren Feld zu platzieren, oder ziehen Sie es in ein leeres Feld. Klicken Sie auf eine ausgefüllte Lücke, um das Wort an die Bank zurückzugeben.",
+                  "bank_heading": "Wortbank",
+                  "clear_blank_sr": "Wort aus Leerzeichen entfernen"
+                },
+                "edit": {
+                  "template_label": "Satzvorlage",
+                  "template_placeholder": "Messungen zur Beschreibung unserer Daten werden als ___ bezeichnet. Das ___ ist eine Funktion...",
+                  "template_helper": "Verwenden Sie für jedes Leerzeichen drei Unterstriche (___). Den Lernenden wird eine Wortdatenbank mit richtigen Antworten und Ablenkungsmanövern angezeigt.",
+                  "no_blanks_warning": "Fügen Sie Ihrer Vorlage mindestens eine ___ leere Markierung hinzu.",
+                  "correct_answers_heading": "Richtige Antwort für jedes Leerzeichen",
+                  "blank_label": "Leer",
+                  "correct_placeholder": "Korrekter Begriff oder Ausdruck",
+                  "distractors_heading": "Zusätzliche Wörter (Ablenker)",
+                  "distractor_placeholder": "Falsche Option",
+                  "add_distractor": "Ablenker hinzufügen"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Richtige Antwort"
+                },
+                "take": {
+                  "helper": "Wählen Sie Ihre Bewertung aus.",
+                  "star_sr": "Stern '{'n'}' von '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Korrekter Sternwert",
+                  "correct_value_info": "Um die volle Punktzahl zu erhalten, müssen die Lernenden die Anzahl der Sterne auswählen.",
+                  "max_stars_label": "Maximale Sterne",
+                  "max_stars_info": "Wie viele Sterne sehen Lernende (1–10)? Der Standardwert ist 5.",
+                  "correct_value_placeholder": "z.B. 3",
+                  "max_stars_placeholder": "z.B. 5"
+                }
               }
             },
             "settings": "Einstellungen",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Hochladen abbrechen",
                 "upload_cancelled": "Der Upload wurde vom Benutzer abgebrochen",
                 "max_files": "{count, plural, one {Sie können # Datei hochladen} other {Sie können # Dateien hochladen}}",
-                "max_files_and_size": "(jeweils bis zu {size})"
+                "max_files_and_size": "(jeweils bis zu {size})",
+                "google_drive_choose": "Wählen Sie aus Google Drive",
+                "google_drive_opening": "Auswahl öffnen…",
+                "google_drive_hint": "Wählen Sie ein Video aus Ihrem Google-Konto aus. Jeder, der sich die Lektion ansieht, benötigt Zugriff. Stellen Sie die Freigabe in Drive auf „Jeder mit dem Link kann sie sehen“ (oder das Äquivalent Ihrer Organisation) ein.",
+                "google_drive_not_configured": "Der Google Drive-Import ist für diese Bereitstellung nicht eingerichtet. Fügen Sie PUBLIC_GOOGLE_PICKER_CLIENT_ID und PUBLIC_GOOGLE_PICKER_API_KEY zu Ihrer Umgebung hinzu.",
+                "google_drive_error": "Google Drive konnte nicht geöffnet werden. Überprüfen Sie, ob Ihr Browser Pop-ups zulässt und dass der Google Picker richtig konfiguriert ist."
               },
               "empty_title": "Noch keine Videos",
-              "empty_description": "Fügen Sie Videos von YouTube hinzu, laden Sie sie hoch oder laden Sie sie aus Ihrer Medienbibliothek herunter"
+              "empty_description": "Fügen Sie Videos von YouTube hinzu, laden Sie sie hoch oder laden Sie sie aus Ihrer Medienbibliothek herunter",
+              "google_drive": "Google Drive"
             },
             "slide": {
               "title": "Rutsche",
@@ -1697,6 +1791,7 @@
       "empty_description": "Teilen Sie Ihr Wissen mit der Welt, indem Sie ansprechende Kurse für Ihre Schüler erstellen.",
       "error_message": "Es ist ein Fehler aufgetreten.",
       "lessons_number": "Unterricht",
+      "exercise": "Übung",
       "students": "Studenten",
       "published": "Veröffentlicht",
       "unpublished": "Unveröffentlicht",
@@ -1716,7 +1811,8 @@
         "clone": "Klonen",
         "share": "Teilen",
         "invite": "Einladen",
-        "delete": "Löschen"
+        "delete": "Löschen",
+        "open": "Offen"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Schlagworte",
       "empty_tags": "Keine Tags verfügbar"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Hilf mir zu schreiben",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Heute ist ein weiterer Tag, um Sie Ihren Lernzielen näher zu bringen. Geben Sie nicht auf, je mehr Sie lernen, desto besser werden Sie.",
     "lessons_completed": "Lektionen abgeschlossen",
     "no_courses_started": "Es wurden keine Kurse gestartet",
-    "revenue": "Einnahmen",
-    "revenue_description": "Ungefährer Umsatz aus Kursverkäufen",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Anzahl der Kurse",
     "no_courses_description": "Innerhalb dieser Organisation erstellte Kurse",
     "total_students": "Gesamtzahl der Studierenden",
@@ -1819,7 +1921,8 @@
           "banner_text": "Bannertext",
           "banner_text_label": "Bannertext aktualisieren",
           "banner_text_placeholder": "Schreiben Sie hier den Text"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Benutzerdefinierte Domäne",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Fügen Sie die DNS-Einträge unten hinzu und aktualisieren Sie dann die Überprüfung.",
         "pending_verification_description": "DNS-Einträge wurden gefunden. Die SSL-Ausstellung oder -Validierung ist noch im Gange.",
         "reconnect_description": "Diese Domäne muss über den neuen Cloudflare-Setup-Ablauf erneut verbunden werden.",
-        "error_description": "Diese benutzerdefinierte Domäne existiert, aber die Überprüfung ist noch nicht abgeschlossen."
+        "error_description": "Diese benutzerdefinierte Domäne existiert, aber die Überprüfung ist noch nicht abgeschlossen.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Plattform",
+    "home": "Startseite",
+    "content": "Inhalte",
+    "people": "Personen",
     "dashboard": "Armaturenbrett",
     "courses": "Kurse",
     "community": "Gemeinschaft",
@@ -1989,7 +2096,8 @@
     "unlock": "Schalten Sie unbegrenzte Funktionen frei und investieren Sie in unsere Zukunft",
     "upgrade": "Jetzt upgraden",
     "tags": "Schlagworte",
-    "automation": "Automatisierung"
+    "automation": "Automatisierung",
+    "programs": "Programme"
   },
   "media_manager": {
     "page_title": "Medienmanager - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Hochladen",
       "youtube": "YouTube",
       "generic": "Generisch",
-      "external_url": "Externe URL"
+      "external_url": "Externe URL",
+      "google_drive": "Google Drive"
     },
     "kind": {
       "video": "Video",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "N/A"
     },
-    "empty_description": "Das Asset existiert nicht oder ist in dieser Organisation nicht verfügbar."
+    "empty_description": "Das Asset existiert nicht oder ist in dieser Organisation nicht verfügbar.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Einstellungen",
@@ -2107,7 +2217,8 @@
       "active": "Sie haben keine aktive Abrechnung",
       "provider": "Wir verwenden Polar, um Ihre Abrechnung zu verwalten",
       "open_billing": "Abrechnung öffnen",
-      "error": "Beim Öffnen der Abrechnung ist ein Fehler aufgetreten"
+      "error": "Beim Öffnen der Abrechnung ist ein Fehler aufgetreten",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Telegramm",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Schritt 2: Geben Sie die Chat-ID ein, die Ihnen der Bot gegeben hat.",
       "connect_button": "Verbinden",
       "success_message": "Integration erfolgreich",
-      "disconnect": "Trennen"
+      "disconnect": "Trennen",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Landingpage",
@@ -2212,6 +2324,99 @@
         "title": "Hintergrundbild",
         "show_background": "Hintergrund anzeigen",
         "hide_background": "Hintergrund ausblenden"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Speichern",
+        "close": "Schließen",
+        "page_builder": "Seitenersteller",
+        "footer": {
+          "text": "Fußzeilentext",
+          "add": "Fußzeilenlink hinzufügen",
+          "default_label": "Neuer Link",
+          "link_label": "Link-Label",
+          "link_href": "Link-URL",
+          "remove": "Footer-Link entfernen"
+        },
+        "embed": {
+          "toggle": "Einbettungsabschnitt anzeigen",
+          "title": "Abschnittstitel",
+          "title_placeholder": "Abschnittstitel",
+          "description": "Beschreibung",
+          "description_placeholder": "Optionale Beschreibung",
+          "code": "Code einbetten",
+          "code_placeholder": "Fügen Sie hier den Einbettungscode ein",
+          "code_description": "Fügen Sie den vollständigen Einbettungs-Snippet oder Iframe-Code ein.",
+          "secondary_label": "Sekundäre Tastenbeschriftung",
+          "secondary_href": "Link zur sekundären Schaltfläche"
+        },
+        "callout": {
+          "toggle": "Callout-Bereich anzeigen",
+          "heading": "Überschrift",
+          "heading_default": "Bereit, mit dem Lernen zu beginnen?",
+          "heading_placeholder": "Geben Sie eine Überschrift ein",
+          "description": "Beschreibung",
+          "description_placeholder": "Fügen Sie eine kurze Beschreibung hinzu oder lassen Sie das Feld leer",
+          "action_label": "Knopfbeschriftung",
+          "action_label_default": "Legen Sie los",
+          "action_label_placeholder": "Schaltflächentext",
+          "action_href": "Schaltflächenlink",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Navigationslink hinzufügen",
+          "default_label": "Neuer Link",
+          "link_label": "Link-Label",
+          "link_href": "Link-URL",
+          "remove": "Navigationslink entfernen"
+        },
+        "hero": {
+          "heading": "Überschrift",
+          "subheading": "Unterüberschrift",
+          "primary_label": "Beschriftung der primären Schaltfläche",
+          "primary_href": "Link zur primären Schaltfläche",
+          "secondary_toggle": "Sekundäraktion anzeigen",
+          "secondary_label": "Sekundäre Tastenbeschriftung",
+          "secondary_href": "Link zur sekundären Schaltfläche",
+          "image": "Heldenbild",
+          "upload": "Bild hochladen",
+          "clear": "Klares Bild"
+        },
+        "sections": {
+          "hero": "Held",
+          "hero_desc": "Überschrift, Aktionsschaltflächen und das Heldenbild.",
+          "navigation": "Navigation",
+          "navigation_desc": "Im Header der Zielseite angezeigte Links.",
+          "callout": "Hinweis",
+          "callout_desc": "Optionales Werbebanner, das nach den Kursen angezeigt wird.",
+          "embed": "Einbetten",
+          "embed_desc": "Optionaler Iframe-Abschnitt, der nach den Kursen angezeigt wird.",
+          "footer": "Fußzeile",
+          "footer_desc": "Fußzeilentext und Links."
+        }
+      },
+      "content": {
+        "heading": "Inhalt bearbeiten",
+        "description": "Aktualisieren Sie den Helden, die Navigation, die Einbettung und die Fußzeile, die in jedem Thema angezeigt werden.",
+        "edit": "Inhalt bearbeiten"
+      },
+      "theme": {
+        "heading": "Wählen Sie ein Thema",
+        "description": "Wählen Sie den visuellen Stil aus, den Besucher auf Ihrer öffentlichen Zielseite sehen.",
+        "cards": {
+          "classic": {
+            "title": "Klassisch",
+            "description": "Traditionelles Layout mit ausgewogener Hierarchie"
+          },
+          "bold": {
+            "title": "Fett",
+            "description": "Kontrastreich, redaktionell und auffällig"
+          },
+          "minimal": {
+            "title": "Minimal",
+            "description": "Sauber, hell und kursorientiert"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Benutzerdefiniertes Thema",
           "add_theme": "Thema hinzufügen"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Profil",
@@ -2266,7 +2472,8 @@
         "file_size": "Maximale Dateigröße:",
         "accepted": "Akzeptiert:",
         "validation_error": "Die Dateigröße überschreitet die maximale Grenze:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Profil",
@@ -2386,7 +2593,8 @@
         "general": "Allgemein",
         "sso": "SSO",
         "token_auth": "Token-Auth"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Token-Auth",
@@ -2407,6 +2615,9 @@
       "integration_description": "Signieren Sie ein JWT mit dem Geheimnis und leiten Sie Benutzer zur Token-Austausch-URL weiter.",
       "no_config": "Keine Token-Authentifizierung konfiguriert. Generieren Sie zunächst ein Signaturgeheimnis.",
       "actions_menu": "Token-Authentifizierungsaktionen"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Suchen"
-    }
+    },
+    "cancel": "Abbrechen"
   },
   "welcome_modal": {
     "we_at": "Wir bei",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "N/A"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Tarifbegrenzungen",
         "rate_limits_description": "Zulässige Lese-/Schreib-/Veröffentlichungsanfragen pro Minute.",
         "used_label": "Verwendet:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Aktiv",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Nur lesender Zugriff",
       "disabled_description": "Nur Organisationsadministratoren können Automatisierungsschlüssel erstellen, rotieren oder widerrufen. Lehrer können die Einrichtungsanweisungen hier einsehen."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programme",
+    "page_title": "Programme",
+    "create": "Neues Programm",
+    "create_success": "Programm erstellt",
+    "update_success": "Programm aktualisiert",
+    "delete_success": "Programm gelöscht",
+    "members_added": "Mitglieder hinzugefügt",
+    "member_removed": "Mitglied entfernt",
+    "course_added": "Kurs hinzugefügt",
+    "course_removed": "Kurs entfernt",
+    "empty_title": "Noch keine Programme",
+    "empty_description": "Erstellen Sie Ihr erstes Zertifizierungs- oder Compliance-Programm.",
+    "settings": {
+      "general": "Allgemein",
+      "name_label": "Name",
+      "description_label": "Beschreibung",
+      "status_label": "Status",
+      "save": "Änderungen speichern",
+      "danger_zone": "Gefahrenzone",
+      "delete": "Programm löschen",
+      "delete_description": "Nach dem Löschen können dieses Programm und alle seine Daten nicht wiederhergestellt werden.",
+      "confirm_delete": "Sind Sie sicher, dass Sie dieses Programm löschen möchten? Dies kann nicht rückgängig gemacht werden."
+    },
+    "lms": {
+      "empty_title": "Noch keine Programme",
+      "empty_description": "Sie sind in keinem Programm eingeschrieben."
+    },
+    "people": {
+      "invite": "Einladen",
+      "invite_modal_title": "Mitglieder einladen",
+      "invite_modal_description": "Fügen Sie Personen per E-Mail zu diesem Programm hinzu.",
+      "email_label": "E-Mail",
+      "role_label": "Rolle",
+      "add_another": "Fügen Sie einen weiteren hinzu",
+      "invite_submit": "Senden Sie Einladungen",
+      "empty_title": "Noch keine Mitglieder",
+      "empty_description": "Laden Sie Menschen ein, an diesem Programm teilzunehmen."
+    },
+    "courses": {
+      "add": "Kurs hinzufügen",
+      "add_modal_title": "Kurs zum Programm hinzufügen",
+      "select_course": "Wählen Sie einen Kurs aus",
+      "select_placeholder": "Wählen Sie einen Kurs…",
+      "empty_title": "Noch keine Kurse",
+      "empty_description": "Fügen Sie Kurse zu diesem Programm hinzu.",
+      "select_courses": "Kurse auswählen",
+      "search_placeholder": "Kurse suchen",
+      "no_available_courses": "Keine Kurse zum Hinzufügen verfügbar.",
+      "no_matching_courses": "Zu Ihrer Suche passen keine Kurse.",
+      "no_matching_program_courses": "Zu Ihrer Suche passen keine Studiengänge.",
+      "pagination_status": "Seite {page} von {totalPages}",
+      "published_access_callout_title": "Zugang für Studierende",
+      "published_access_callout_description": "Studierende haben nur Zugriff auf veröffentlichte Kurse. Kurse können für Ihr Team in diesem Programm enthalten sein, solange sie noch unveröffentlicht sind, während sie den Studierenden verborgen bleiben, bis Sie sie veröffentlichen."
+    },
+    "newsfeed": {
+      "post": "Neuer Beitrag",
+      "post_placeholder": "Was geht Ihnen durch den Kopf?",
+      "post_submit": "Beitrag",
+      "empty_title": "Noch keine Beiträge",
+      "empty_description": "Seien Sie der Erste, der etwas postet.",
+      "heading": "Newsfeed",
+      "make_a_post": "Machen Sie einen Beitrag",
+      "edit_post": "Beitrag bearbeiten",
+      "editor_placeholder": "Teilen Sie ein Update mit Ihrem Programm",
+      "cancel": "Abbrechen",
+      "pinned": "Angepinnt",
+      "delete_feed_title": "Beitrag löschen",
+      "delete_feed_description": "Sind Sie sicher, dass Sie diesen Beitrag löschen möchten?",
+      "confirm_delete": "Löschen",
+      "user_avatar_alt": "Benutzer-Avatar",
+      "comments": {
+        "comment": "Kommentar",
+        "showing_of": "Es werden {shown} von {total} angezeigt",
+        "hide": "Kommentare ausblenden",
+        "placeholder": "Programmkommentar hinzufügen",
+        "submit_aria": "Kommentar abgeben",
+        "delete": "Löschen"
+      },
+      "card": {
+        "pin": "Pin",
+        "unpin": "Lösen",
+        "edit": "Bearbeiten",
+        "delete": "Löschen"
+      }
+    },
+    "create_modal": {
+      "title": "Programm erstellen",
+      "description": "Fügen Sie ein neues Zertifizierungs- oder Compliance-Programm hinzu.",
+      "name_label": "Name",
+      "name_placeholder": "z.B. OSHA-Sicherheitszertifizierung",
+      "description_label": "Beschreibung",
+      "description_placeholder": "Worum geht es in diesem Programm?",
+      "submit": "Erstellen"
+    },
+    "sidebar": {
+      "newsfeed": "Newsfeed",
+      "courses": "Kurse",
+      "people": "Menschen",
+      "settings": "Einstellungen"
+    },
+    "status": {
+      "active": "Aktiv",
+      "inactive": "Inaktiv",
+      "archived": "Archiviert"
+    },
+    "description": "Gewähren Sie einer Gruppe von Personen Zugriff auf mehrere Kurse, z. B. einen Kurs",
+    "search_placeholder": "Suchprogramme",
+    "multiple_added": "Kurse hinzugefügt",
+    "no_matching_programs": "Keine Programme entsprechen Ihren Filtern.",
+    "card": {
+      "courses": "Kurse",
+      "students": "Studenten"
+    },
+    "table": {
+      "name": "Name",
+      "courses": "Kurse",
+      "students": "Studenten",
+      "status": "Status",
+      "description": "Beschreibung"
+    },
+    "filters": {
+      "filter": "Filtern",
+      "clear_all": "Alles löschen",
+      "popover_title": "Filter",
+      "sort": "Sortieren",
+      "order": "Bestellen",
+      "status": "Status",
+      "ascending": "Aufstieg",
+      "descending": "Beschr",
+      "sort_name": "Name",
+      "sort_courses": "Kurse",
+      "sort_students": "Studenten",
+      "sort_status": "Status"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index a660f7c0..92c7346b 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -89,6 +89,7 @@
     "deeply_appreciate": "we deeply appreciate it and are at your service."
   },
   "app": {
+    "cancel": "Cancel",
     "search": {
       "placeholder": "Search"
     }
@@ -161,6 +162,7 @@
       "teams_tab": "Teams"
     },
     "profile": {
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO.",
       "profile_picture": {
         "heading": "Profile Picture",
         "upload_image": "Upload Image",
@@ -183,6 +185,7 @@
       "logout": "Log out"
     },
     "organization": {
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization.",
       "organization_profile": {
         "heading": "Organization",
         "organization_name": "Organization Name",
@@ -234,7 +237,11 @@
       "no_config": "No token auth configured. Generate a signing secret to get started.",
       "actions_menu": "Token auth actions"
     },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
     "auth": {
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org.",
       "title": "Authentication",
       "tabs": {
         "general": "General",
@@ -338,9 +345,103 @@
       }
     },
     "landing_page": {
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
       "heading": "Landing Page",
+      "save_changes": "Save Changes",
       "show_section": "Show Section",
       "hide_section": "Hide Section",
+      "theme": {
+        "heading": "Choose a Theme",
+        "description": "Pick the visual style visitors see on your public landing page.",
+        "cards": {
+          "minimal": {
+            "title": "Minimal",
+            "description": "Clean, bright, and course-focused"
+          },
+          "bold": {
+            "title": "Bold",
+            "description": "High contrast, editorial, and striking"
+          },
+          "classic": {
+            "title": "Classic",
+            "description": "Traditional layout with balanced hierarchy"
+          }
+        }
+      },
+      "content": {
+        "heading": "Edit Content",
+        "description": "Update the hero, navigation, embed, and footer that appear in every theme.",
+        "edit": "Edit Content"
+      },
+      "editor": {
+        "save": "Save",
+        "close": "Close",
+        "page_builder": "Page Builder",
+        "sections": {
+          "hero": "Hero",
+          "hero_desc": "Headline, action buttons, and the hero image.",
+          "navigation": "Navigation",
+          "navigation_desc": "Links shown in the landing page header.",
+          "callout": "Callout",
+          "callout_desc": "Optional promotional banner shown after courses.",
+          "embed": "Embed",
+          "embed_desc": "Optional iframe section shown after courses.",
+          "footer": "Footer",
+          "footer_desc": "Footer text and links."
+        },
+        "hero": {
+          "heading": "Heading",
+          "subheading": "Subheading",
+          "primary_label": "Primary Button Label",
+          "primary_href": "Primary Button Link",
+          "secondary_toggle": "Show secondary action",
+          "secondary_label": "Secondary Button Label",
+          "secondary_href": "Secondary Button Link",
+          "image": "Hero Image",
+          "upload": "Upload Image",
+          "clear": "Clear Image"
+        },
+        "navigation": {
+          "add": "Add Navigation Link",
+          "default_label": "New link",
+          "link_label": "Link label",
+          "link_href": "Link URL",
+          "remove": "Remove navigation link"
+        },
+        "callout": {
+          "toggle": "Show callout section",
+          "heading": "Heading",
+          "heading_default": "Ready to start learning?",
+          "heading_placeholder": "Enter a heading",
+          "description": "Description",
+          "description_placeholder": "Add a short description or leave empty",
+          "action_label": "Button label",
+          "action_label_default": "Get Started",
+          "action_label_placeholder": "Button text",
+          "action_href": "Button link",
+          "action_href_placeholder": "https://..."
+        },
+        "embed": {
+          "toggle": "Show embed section",
+          "title": "Section title",
+          "title_placeholder": "Section title",
+          "description": "Description",
+          "description_placeholder": "Optional description",
+          "code": "Embed code",
+          "code_placeholder": "Paste embed code here",
+          "code_description": "Paste the full embed snippet or iframe code.",
+          "secondary_label": "Secondary Button Label",
+          "secondary_href": "Secondary Button Link"
+        },
+        "footer": {
+          "text": "Footer text",
+          "add": "Add Footer Link",
+          "default_label": "New link",
+          "link_label": "Link label",
+          "link_href": "Link URL",
+          "remove": "Remove footer link"
+        }
+      },
       "title": "Title",
       "title_highlight": "Title-Highlight",
       "subtitle": "Subtitle",
@@ -433,6 +534,7 @@
       "save_changes": "Save Changes"
     },
     "integrations": {
+      "page_subtitle": "Connect Telegram to get notified when important things happen.",
       "heading": "Telegram",
       "sub_heading": "Connect your account to telegram to get notified of any change within the application.",
       "step_authenticate": "Step 1: Authenticate your account via the ClassroomIO bot.",
@@ -443,6 +545,7 @@
       "disconnect": "Disconnect"
     },
     "billing": {
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO.",
       "sub_title": "Billing details",
       "manage": "Manage your billing",
       "active": "You don't have any active billing",
@@ -454,6 +557,7 @@
   "media_manager": {
     "page_title": "Media Manager - ClassroomIO",
     "heading": "Media Manager",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
     "empty": "No assets found",
     "empty_description": "The asset does not exist or is not available in this organization.",
     "common": {
@@ -494,7 +598,8 @@
       "upload": "Upload",
       "youtube": "YouTube",
       "generic": "Generic",
-      "external_url": "External URL"
+      "external_url": "External URL",
+      "google_drive": "Google Drive"
     },
     "status": {
       "active": "Active",
@@ -562,6 +667,7 @@
   "tags_admin": {
     "page_title": "Tags - ClassroomIO",
     "heading": "Tags",
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan.",
     "create": "Create",
     "common": {
       "not_available": "N/A"
@@ -626,8 +732,12 @@
   },
   "org_navigation": {
     "platform": "Platform",
+    "home": "Home",
+    "content": "Content",
+    "people": "People",
     "dashboard": "Dashboard",
     "courses": "Courses",
+    "programs": "Programs",
     "tags": "Tags",
     "community": "Community",
     "audience": "Audience",
@@ -761,6 +871,7 @@
     },
     "settings": {
       "domains": {
+        "page_subtitle": "Run your public learning site on a web address you own.",
         "title": "Custom domain",
         "add": "Add",
         "url": "URL",
@@ -795,6 +906,7 @@
         "custom_code": "Custom code"
       },
       "customize_lms": {
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see.",
         "title": "Customize LMS",
         "disabled": "Disabled",
         "enabled": "Enabled",
@@ -846,8 +958,13 @@
     "lessons_completed": "Lessons completed",
     "items_completed": "Items completed",
     "no_courses_started": "No courses started",
-    "revenue": "Revenue",
-    "revenue_description": "Approximate revenue made from course sales",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Number of courses",
     "no_courses_description": "Courses created within this organization",
     "total_students": "Total students",
@@ -872,8 +989,145 @@
     "insert": "Insert",
     "can_you": "Can you please rephrase this"
   },
+  "programs": {
+    "heading": "Programs",
+    "description": "Give a group of people access to multiple courses, like a class",
+    "page_title": "Programs",
+    "search_placeholder": "Search programs",
+    "create": "New Program",
+    "create_success": "Program created",
+    "update_success": "Program updated",
+    "delete_success": "Program deleted",
+    "members_added": "Members added",
+    "member_removed": "Member removed",
+    "course_added": "Course added",
+    "multiple_added": "Courses added",
+    "course_removed": "Course removed",
+    "empty_title": "No programs yet",
+    "empty_description": "Create your first certification or compliance program.",
+    "no_matching_programs": "No programs match your filters.",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "archived": "Archived"
+    },
+    "filters": {
+      "filter": "Filter",
+      "clear_all": "Clear all",
+      "popover_title": "Filters",
+      "sort": "Sort",
+      "order": "Order",
+      "status": "Status",
+      "ascending": "Asc",
+      "descending": "Desc",
+      "sort_name": "Name",
+      "sort_courses": "Courses",
+      "sort_students": "Students",
+      "sort_status": "Status"
+    },
+    "table": {
+      "name": "Name",
+      "courses": "Courses",
+      "students": "Students",
+      "status": "Status",
+      "description": "Description"
+    },
+    "sidebar": {
+      "newsfeed": "Newsfeed",
+      "courses": "Courses",
+      "people": "People",
+      "settings": "Settings"
+    },
+    "create_modal": {
+      "title": "Create Program",
+      "description": "Add a new certification or compliance program.",
+      "name_label": "Name",
+      "name_placeholder": "e.g. OSHA Safety Certification",
+      "description_label": "Description",
+      "description_placeholder": "What is this program about?",
+      "submit": "Create"
+    },
+    "card": {
+      "courses": "Courses",
+      "students": "Students"
+    },
+    "newsfeed": {
+      "heading": "Newsfeed",
+      "post": "New Post",
+      "post_placeholder": "What's on your mind?",
+      "make_a_post": "Make a Post",
+      "edit_post": "Edit Post",
+      "editor_placeholder": "Share an update with your program",
+      "cancel": "Cancel",
+      "post_submit": "Post",
+      "pinned": "Pinned",
+      "delete_feed_title": "Delete post",
+      "delete_feed_description": "Are you sure you want to delete this post?",
+      "confirm_delete": "Delete",
+      "user_avatar_alt": "User avatar",
+      "card": {
+        "pin": "Pin",
+        "unpin": "Unpin",
+        "edit": "Edit",
+        "delete": "Delete"
+      },
+      "comments": {
+        "comment": "comment",
+        "showing_of": "Showing {shown} of {total}",
+        "hide": "Hide comments",
+        "placeholder": "Add program comment",
+        "submit_aria": "Submit comment",
+        "delete": "Delete"
+      },
+      "empty_title": "No posts yet",
+      "empty_description": "Be the first to post something."
+    },
+    "courses": {
+      "add": "Add Course",
+      "add_modal_title": "Add Course to Program",
+      "select_course": "Select a course",
+      "select_courses": "Select courses",
+      "select_placeholder": "Choose a course…",
+      "search_placeholder": "Search courses",
+      "no_available_courses": "No available courses to add.",
+      "no_matching_courses": "No courses match your search.",
+      "no_matching_program_courses": "No program courses match your search.",
+      "pagination_status": "Page {page} of {totalPages}",
+      "empty_title": "No courses yet",
+      "empty_description": "Add courses to this program.",
+      "published_access_callout_title": "Student access",
+      "published_access_callout_description": "Students only have access to published courses. Courses can be in this program for your team while still unpublished while those stay hidden from students until you publish them."
+    },
+    "people": {
+      "invite": "Invite",
+      "invite_modal_title": "Invite Members",
+      "invite_modal_description": "Add people to this program by email.",
+      "email_label": "Email",
+      "role_label": "Role",
+      "add_another": "Add another",
+      "invite_submit": "Send Invites",
+      "empty_title": "No members yet",
+      "empty_description": "Invite people to join this program."
+    },
+    "lms": {
+      "empty_title": "No programs yet",
+      "empty_description": "You haven't been enrolled in any programs."
+    },
+    "settings": {
+      "general": "General",
+      "name_label": "Name",
+      "description_label": "Description",
+      "status_label": "Status",
+      "save": "Save Changes",
+      "danger_zone": "Danger Zone",
+      "delete": "Delete Program",
+      "delete_description": "Once deleted, this program and all its data cannot be recovered.",
+      "confirm_delete": "Are you sure you want to delete this program? This cannot be undone."
+    }
+  },
   "courses": {
     "heading": "Courses",
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments.",
     "heading_button": "Create Course",
     "search_placeholder": "Find Course",
     "tag_filters": {
@@ -903,6 +1157,7 @@
       "empty_title": "No Courses Created",
       "empty_description": "Share your knowledge with the world by creating engaging courses for your students.",
       "context_menu": {
+        "open": "Open",
         "clone": "Clone",
         "share": "Share",
         "invite": "Invite",
@@ -910,6 +1165,7 @@
       },
       "error_message": "An error occurred.",
       "lessons_number": "lessons",
+      "exercise": "exercise",
       "students": "students",
       "published": "Published",
       "unpublished": "Unpublished",
@@ -1157,12 +1413,13 @@
             "video": {
               "title": "Video",
               "embed_link": "Embed Link",
+              "google_drive": "Google Drive",
               "upload": "Upload",
               "library": "Library",
               "button": "Add/Edit Video(s)",
               "remove_video": "Remove video",
               "empty_title": "No videos yet",
-              "empty_description": "Add videos from YouTube, upload, or your media library",
+              "empty_description": "Add videos from YouTube, Google Drive, embed links, upload, or your media library",
               "add_video": {
                 "title": "Add a Video",
                 "add_by": "Add By",
@@ -1191,7 +1448,12 @@
                 "cancel_upload": "Cancel Upload",
                 "upload_cancelled": "Upload cancelled by user",
                 "max_files": "{count, plural, one {You can upload # file} other {You can upload # files}}",
-                "max_files_and_size": "(up to {size} each)"
+                "max_files_and_size": "(up to {size} each)",
+                "google_drive_choose": "Choose from Google Drive",
+                "google_drive_opening": "Opening picker…",
+                "google_drive_hint": "Pick a video from your Google account. Anyone viewing the lesson needs access—set sharing in Drive to “Anyone with the link can view” (or your org’s equivalent).",
+                "google_drive_not_configured": "Google Drive import is not set up for this deployment. Add PUBLIC_GOOGLE_PICKER_CLIENT_ID and PUBLIC_GOOGLE_PICKER_API_KEY to your environment.",
+                "google_drive_error": "Could not open Google Drive. Check your browser allows pop-ups and that the Google Picker is configured correctly."
               }
             },
             "document": {
@@ -1351,7 +1613,9 @@
                 "matching": "Matching",
                 "ordering": "Ordering",
                 "hotspot": "Hotspot",
-                "link": "Links"
+                "link": "Links",
+                "word_bank": "Word bank",
+                "star": "Star rating"
               }
             },
             "view_mode": {
@@ -1504,6 +1768,23 @@
                   "out_of_range": "Outside tolerance"
                 }
               },
+              "star": {
+                "edit": {
+                  "correct_value_label": "Correct star value",
+                  "correct_value_info": "The star count learners must select to earn full points.",
+                  "max_stars_label": "Maximum stars",
+                  "max_stars_info": "How many stars learners see (1–10). Default is 5.",
+                  "correct_value_placeholder": "e.g. 3",
+                  "max_stars_placeholder": "e.g. 5"
+                },
+                "take": {
+                  "helper": "Select your rating.",
+                  "star_sr": "Star '{'n'}' of '{'max'}'"
+                },
+                "preview": {
+                  "correct_label": "Correct answer"
+                }
+              },
               "fill_blank": {
                 "edit": {
                   "accepted_answers_placeholder": "Accepted answers (comma separated)"
@@ -1518,6 +1799,32 @@
                   "your_answer_label": "Submitted:"
                 }
               },
+              "word_bank": {
+                "edit": {
+                  "template_label": "Sentence template",
+                  "template_placeholder": "Measurements to describe our data are called ___. The ___ is a function...",
+                  "template_helper": "Use three underscores (___) for each blank. Learners will see a word bank with correct answers and distractors.",
+                  "no_blanks_warning": "Add at least one ___ blank marker in your template.",
+                  "correct_answers_heading": "Correct answer for each blank",
+                  "blank_label": "Blank",
+                  "correct_placeholder": "Correct term or phrase",
+                  "distractors_heading": "Extra words (distractors)",
+                  "distractor_placeholder": "Wrong option",
+                  "add_distractor": "Add distractor"
+                },
+                "take": {
+                  "helper": "Click a word to place it in the first empty blank, or drag it into a blank. Click a filled blank to return the word to the bank.",
+                  "bank_heading": "Word bank",
+                  "clear_blank_sr": "Remove word from blank"
+                },
+                "preview": {
+                  "filled_label": "Expected answers in context"
+                },
+                "review": {
+                  "your_answer_label": "Your answers",
+                  "correct_label": "Correct answers"
+                }
+              },
               "file_upload": {
                 "edit": {
                   "accepted_types_placeholder": "Accepted types (e.g. pdf,docx)",
@@ -2060,8 +2367,13 @@
   },
   "community": {
     "title": "Community",
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
     "ask_button": "Ask Community",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
+    },
     "ask": {
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want.",
       "go_back": "Go Back",
       "ask_the": "Ask the community",
       "publish": "Publish",
@@ -2092,6 +2404,7 @@
   },
   "audience": {
     "title": "Audience",
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
     "export": "Export",
     "import_users": "Import Users",
     "no_audience": "No audience to manage",
@@ -2109,9 +2422,14 @@
     "select_all": "Select all",
     "selected_count": "{count} selected",
     "assign_courses": "Assign to Courses",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
+    },
     "import": {
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like.",
       "title": "Import Users",
-      "description": "Add students to your organization by entering their email addresses. Optionally assign them to courses and send invitation emails.",
+      "description": "Add students to your organization by entering their email addresses. Optionally assign them to courses or programs and send invitation emails.",
       "emails_label": "Email Addresses",
       "emails_placeholder": "Enter emails separated by commas, newlines, or semicolons\ne.g. alice@example.com, bob@example.com",
       "course_access": "Course Access",
@@ -2119,10 +2437,15 @@
       "all_courses": "All courses",
       "select_courses": "Select specific courses",
       "select_courses_placeholder": "Choose courses...",
+      "program_access": "Program Access",
+      "no_programs": "No program assignment",
+      "all_programs": "All programs",
+      "select_programs": "Select specific programs",
+      "select_programs_placeholder": "Choose programs...",
       "send_email": "Send invitation email to imported users",
       "submit": "Import Users",
       "back": "Back to Audience",
-      "snackbar_success": "{imported} new invites, {assigned} existing students given course access, {pendingInvitesRenewed} pending invites renewed ({emailsSent} emails sent)",
+      "snackbar_success": "{imported} new invites, {assigned} existing students given access, {pendingInvitesRenewed} pending invites renewed ({emailsSent} emails sent)",
       "snackbar_no_emails": "Please enter at least one email address",
       "snackbar_failed": "Failed to import users"
     },
@@ -2134,7 +2457,7 @@
       "send_email": "Send notification email",
       "submit": "Assign",
       "cancel": "Cancel",
-      "snackbar_success": "Assigned {assigned} users to courses ({alreadyEnrolled} already enrolled, {emailsSent} emails sent)",
+      "snackbar_success": "Assigned {assigned} users ({alreadyEnrolled} already had access, {emailsSent} emails sent)",
       "snackbar_no_courses": "Please select at least one course",
       "snackbar_failed": "Failed to assign courses"
     },
@@ -2255,6 +2578,7 @@
       "rotate_confirm": "Rotate this automation key?"
     },
     "mcp": {
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime.",
       "usage": {
         "title": "Usage and limits",
         "description": "MCP is available on every plan, but usage is controlled with monthly automation credits and key limits.",
@@ -2288,11 +2612,35 @@
         "cursor_description": "Paste this into `~/.cursor/mcp.json` or your workspace MCP config.",
         "opencode_description": "Add this to `opencode.json` in your project root or `~/.config/opencode/opencode.json`."
       }
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
     }
   },
   "lms_navigation": {
     "home": "Home",
     "my_learning": "My Learning",
+    "programs": "Programs",
     "exercise": "Exercise",
     "community": "Community",
     "explore": "Explore",
@@ -2468,6 +2816,32 @@
         "feed_fetch_error": "An error occured while fetching feed"
       }
     },
+    "program": {
+      "success": {
+        "comment_deleted": "Comment deleted",
+        "comment_added": "Comment added",
+        "feed_delete_success": "Post deleted successfully",
+        "post_created": "Post created successfully",
+        "post_updated": "Post updated successfully"
+      },
+      "error": {
+        "reaction_error": "An error occurred while reacting to the post",
+        "news_feed_fail": "Failed to fetch program newsfeed",
+        "post_create_failed": "Failed to create post",
+        "post_update_failed": "Failed to update post",
+        "code": {
+          "program_forbidden": "You must be a member of this program to perform this action.",
+          "program_member_check_failed": "We could not verify your program membership. Try again.",
+          "program_not_found": "This program could not be found.",
+          "program_create_failed": "Could not create the program.",
+          "program_update_failed": "Could not update the program.",
+          "program_delete_failed": "Could not delete the program.",
+          "program_member_not_found": "That program member could not be found.",
+          "program_newsfeed_not_found": "That post could not be found.",
+          "program_newsfeed_comment_not_found": "That comment could not be found."
+        }
+      }
+    },
     "attendance": {
       "error": {
         "reload": "Something isn't right.  Please reload and take attendance again"
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index 1bbc80f4..ac53cc7a 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -364,6 +364,32 @@
       "created": "Clave de automatización creada. Guárdalo ahora porque el secreto completo sólo se muestra una vez.",
       "rotated": "Tecla de automatización girada. Guarde el nuevo secreto ahora porque no se volverá a mostrar.",
       "revoked": "Clave de automatización revocada."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Se produjo un error al reaccionar a la publicación.",
+        "news_feed_fail": "No se pudo recuperar el suministro de noticias del programa",
+        "post_create_failed": "No se pudo crear la publicación",
+        "post_update_failed": "No se pudo actualizar la publicación",
+        "code": {
+          "program_forbidden": "Debes ser miembro de este programa para realizar esta acción.",
+          "program_member_check_failed": "No pudimos verificar su membresía en el programa. Intentar otra vez.",
+          "program_not_found": "No se pudo encontrar este programa.",
+          "program_create_failed": "No se pudo crear el programa.",
+          "program_update_failed": "No se pudo actualizar el programa.",
+          "program_delete_failed": "No se pudo eliminar el programa.",
+          "program_member_not_found": "No se pudo encontrar ese miembro del programa.",
+          "program_newsfeed_not_found": "Esa publicación no se pudo encontrar.",
+          "program_newsfeed_comment_not_found": "Ese comentario no se pudo encontrar."
+        }
+      },
+      "success": {
+        "comment_deleted": "Comentario eliminado",
+        "comment_added": "Comentario añadido",
+        "feed_delete_success": "Publicación eliminada exitosamente",
+        "post_created": "Publicación creada exitosamente",
+        "post_updated": "Publicación actualizada exitosamente"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Comunidad",
     "explore": "Explorar",
     "help": "Ayuda",
-    "settings": "Configuración"
+    "settings": "Configuración",
+    "programs": "Programas"
   },
   "upgrade": {
     "certificate": "Actualice su plan para generar certificados",
@@ -517,12 +544,23 @@
       "all_courses": "Todos los cursos",
       "select_courses": "Seleccionar cursos específicos",
       "select_courses_placeholder": "Elige cursos...",
+      "program_access": "Acceso al programa",
+      "no_programs": "Sin asignación de programa",
+      "all_programs": "Todos los programas",
+      "select_programs": "Seleccionar programas específicos",
+      "select_programs_placeholder": "Elige programas...",
       "send_email": "Enviar correo electrónico de invitación a usuarios importados",
       "submit": "Importar usuarios",
       "back": "Volver a la audiencia",
       "snackbar_success": "{imported} invitaciones nuevas, {assigned} estudiantes existentes con acceso al curso, {pendingInvitesRenewed} invitaciones pendientes renovadas ({emailsSent} correos enviados)",
       "snackbar_no_emails": "Por favor ingrese al menos una dirección de correo electrónico",
-      "snackbar_failed": "No se pudieron importar usuarios"
+      "snackbar_failed": "No se pudieron importar usuarios",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Editar",
       "cancel": "Cancelar",
       "give": "dar una respuesta",
-      "comment": "Comentario"
+      "comment": "Comentario",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Coincidencia",
                 "ordering": "Realizar pedidos",
                 "hotspot": "Punto de acceso",
-                "link": "Enlaces"
+                "link": "Enlaces",
+                "word_bank": "banco de palabras",
+                "star": "Calificación de estrellas"
               },
               "select_type": "Seleccionar tipo",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Correcto",
                 "not_set": "No establecido",
                 "incorrect_badge": "Incorrecto"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Tus respuestas",
+                  "correct_label": "Respuestas correctas"
+                },
+                "preview": {
+                  "filled_label": "Respuestas esperadas en contexto"
+                },
+                "take": {
+                  "helper": "Haga clic en una palabra para colocarla en el primer espacio vacío o arrástrela a un espacio en blanco. Haga clic en un espacio en blanco para devolver la palabra al banco.",
+                  "bank_heading": "banco de palabras",
+                  "clear_blank_sr": "Quitar palabra del espacio en blanco"
+                },
+                "edit": {
+                  "template_label": "Plantilla de oración",
+                  "template_placeholder": "Las medidas para describir nuestros datos se llaman ___. El ___ es una función...",
+                  "template_helper": "Utilice tres guiones bajos (___) para cada espacio en blanco. Los alumnos verán un banco de palabras con respuestas correctas y distractores.",
+                  "no_blanks_warning": "Agrega al menos un ___ marcador en blanco en tu plantilla.",
+                  "correct_answers_heading": "Respuesta correcta para cada espacio en blanco.",
+                  "blank_label": "En blanco",
+                  "correct_placeholder": "Término o frase correcta",
+                  "distractors_heading": "Palabras adicionales (distractores)",
+                  "distractor_placeholder": "Opción equivocada",
+                  "add_distractor": "Agregar distractor"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "respuesta correcta"
+                },
+                "take": {
+                  "helper": "Seleccione su calificación.",
+                  "star_sr": "Estrella '{'n'}' de '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Valor de estrella correcto",
+                  "correct_value_info": "El conteo de estrellas que los estudiantes deben seleccionar para ganar puntos completos.",
+                  "max_stars_label": "Estrellas máximas",
+                  "max_stars_info": "Cuántas estrellas ven los alumnos (1–10). El valor predeterminado es 5.",
+                  "correct_value_placeholder": "por ej. 3",
+                  "max_stars_placeholder": "por ej. 5"
+                }
               }
             },
             "settings": "Configuración",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Cancelar carga",
                 "upload_cancelled": "Subida cancelada por el usuario",
                 "max_files": "{count, plural, one {Puedes subir # archivo} other {Puedes subir # archivos}}",
-                "max_files_and_size": "(hasta {tamaño} cada uno)"
+                "max_files_and_size": "(hasta {tamaño} cada uno)",
+                "google_drive_choose": "Elige desde Google Drive",
+                "google_drive_opening": "Selector de apertura…",
+                "google_drive_hint": "Elija un vídeo de su cuenta de Google. Cualquiera que vea la lección necesita acceso; configure el uso compartido en Drive en \"Cualquier persona con el enlace puede ver\" (o el equivalente de su organización).",
+                "google_drive_not_configured": "La importación de Google Drive no está configurada para esta implementación. Agregue PUBLIC_GOOGLE_PICKER_CLIENT_ID y PUBLIC_GOOGLE_PICKER_API_KEY a su entorno.",
+                "google_drive_error": "No se pudo abrir Google Drive. Verifique que su navegador permita ventanas emergentes y que el Selector de Google esté configurado correctamente."
               },
               "empty_title": "Aún no hay vídeos",
-              "empty_description": "Agregue videos de YouTube, cárguelos o de su biblioteca multimedia"
+              "empty_description": "Agregue videos de YouTube, cárguelos o de su biblioteca multimedia",
+              "google_drive": "Google Drive"
             },
             "slide": {
               "title": "diapositiva",
@@ -1697,6 +1791,7 @@
       "empty_description": "Comparta sus conocimientos con el mundo creando cursos atractivos para sus estudiantes.",
       "error_message": "Se produjo un error.",
       "lessons_number": "lecciones",
+      "exercise": "ejercicio",
       "students": "estudiantes",
       "published": "Publicado",
       "unpublished": "Inédito",
@@ -1716,7 +1811,8 @@
         "clone": "clonar",
         "share": "Compartir",
         "invite": "invitar",
-        "delete": "Eliminar"
+        "delete": "Eliminar",
+        "open": "Abierto"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Etiquetas",
       "empty_tags": "No hay etiquetas disponibles"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Ayúdame a escribir",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Hoy es otro día para acercarte a tus objetivos de aprendizaje. No te rindas, cuanto más aprendas, mejor serás.",
     "lessons_completed": "Lecciones completadas",
     "no_courses_started": "No se iniciaron cursos",
-    "revenue": "Ingresos",
-    "revenue_description": "Ingresos aproximados obtenidos de las ventas de cursos",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Número de cursos",
     "no_courses_description": "Cursos creados dentro de esta organización.",
     "total_students": "Estudiantes totales",
@@ -1819,7 +1921,8 @@
           "banner_text": "Texto del cartel",
           "banner_text_label": "Actualizar texto del banner",
           "banner_text_placeholder": "Escribe el texto aquí"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Dominio personalizado",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Agregue los registros DNS a continuación y luego actualice la verificación.",
         "pending_verification_description": "Se encontraron registros DNS. La emisión o validación de SSL aún está en curso.",
         "reconnect_description": "Este dominio debe conectarse nuevamente a través del nuevo flujo de configuración de Cloudflare.",
-        "error_description": "Este dominio personalizado existe, pero la verificación aún no se ha completado."
+        "error_description": "Este dominio personalizado existe, pero la verificación aún no se ha completado.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Plataforma",
+    "home": "Inicio",
+    "content": "Contenido",
+    "people": "Personas",
     "dashboard": "Panel de control",
     "courses": "Cursos",
     "community": "Comunidad",
@@ -1989,7 +2096,8 @@
     "unlock": "Desbloquee funciones ilimitadas e invierta en nuestro futuro",
     "upgrade": "Actualiza ahora",
     "tags": "Etiquetas",
-    "automation": "Automatización"
+    "automation": "Automatización",
+    "programs": "Programas"
   },
   "media_manager": {
     "page_title": "Administrador de medios - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Subir",
       "youtube": "youtube",
       "generic": "genérico",
-      "external_url": "URL externa"
+      "external_url": "URL externa",
+      "google_drive": "Google Drive"
     },
     "kind": {
       "video": "Vídeo",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "N/A"
     },
-    "empty_description": "El activo no existe o no está disponible en esta organización."
+    "empty_description": "El activo no existe o no está disponible en esta organización.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Configuración",
@@ -2107,7 +2217,8 @@
       "active": "No tienes ninguna facturación activa",
       "provider": "Usamos Polar para ayudarte a gestionar tu facturación",
       "open_billing": "Facturación abierta",
-      "error": "Se produjo un error al abrir la facturación."
+      "error": "Se produjo un error al abrir la facturación.",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Telegrama",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Paso 2: Ingrese el ID de chat que le proporcionó el bot.",
       "connect_button": "Conectar",
       "success_message": "Integración exitosa",
-      "disconnect": "Desconectar"
+      "disconnect": "Desconectar",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Página de destino",
@@ -2212,6 +2324,99 @@
         "title": "Imagen de fondo",
         "show_background": "Mostrar fondo",
         "hide_background": "Ocultar fondo"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Guardar",
+        "close": "Cerrar",
+        "page_builder": "Creador de páginas",
+        "footer": {
+          "text": "Texto de pie de página",
+          "add": "Agregar enlace de pie de página",
+          "default_label": "Nuevo enlace",
+          "link_label": "Etiqueta de enlace",
+          "link_href": "URL del enlace",
+          "remove": "Eliminar enlace de pie de página"
+        },
+        "embed": {
+          "toggle": "Mostrar sección para insertar",
+          "title": "Título de la sección",
+          "title_placeholder": "Título de la sección",
+          "description": "Descripción",
+          "description_placeholder": "Descripción opcional",
+          "code": "código para insertar",
+          "code_placeholder": "Pegue el código para insertar aquí",
+          "code_description": "Pegue el fragmento de inserción completo o el código iframe.",
+          "secondary_label": "Etiqueta del botón secundario",
+          "secondary_href": "Enlace de botón secundario"
+        },
+        "callout": {
+          "toggle": "Mostrar sección de llamadas",
+          "heading": "rumbo",
+          "heading_default": "¿Listo para empezar a aprender?",
+          "heading_placeholder": "Introduce un título",
+          "description": "Descripción",
+          "description_placeholder": "Añade una breve descripción o déjala vacía.",
+          "action_label": "Etiqueta del botón",
+          "action_label_default": "Empezar",
+          "action_label_placeholder": "Texto del botón",
+          "action_href": "Enlace de botón",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Agregar enlace de navegación",
+          "default_label": "Nuevo enlace",
+          "link_label": "Etiqueta de enlace",
+          "link_href": "URL del enlace",
+          "remove": "Eliminar enlace de navegación"
+        },
+        "hero": {
+          "heading": "rumbo",
+          "subheading": "Subtítulo",
+          "primary_label": "Etiqueta del botón principal",
+          "primary_href": "Enlace del botón principal",
+          "secondary_toggle": "Mostrar acción secundaria",
+          "secondary_label": "Etiqueta del botón secundario",
+          "secondary_href": "Enlace de botón secundario",
+          "image": "Imagen de héroe",
+          "upload": "Subir imagen",
+          "clear": "Imagen clara"
+        },
+        "sections": {
+          "hero": "héroe",
+          "hero_desc": "Titular, botones de acción e imagen principal.",
+          "navigation": "Navegación",
+          "navigation_desc": "Enlaces que se muestran en el encabezado de la página de destino.",
+          "callout": "Llamada",
+          "callout_desc": "Banner promocional opcional que se muestra después de los cursos.",
+          "embed": "Insertar",
+          "embed_desc": "La sección iframe opcional se muestra después de los cursos.",
+          "footer": "Pie de página",
+          "footer_desc": "Texto de pie de página y enlaces."
+        }
+      },
+      "content": {
+        "heading": "Editar contenido",
+        "description": "Actualice el héroe, la navegación, la inserción y el pie de página que aparecen en cada tema.",
+        "edit": "Editar contenido"
+      },
+      "theme": {
+        "heading": "Elige un tema",
+        "description": "Elija el estilo visual que ven los visitantes en su página de destino pública.",
+        "cards": {
+          "classic": {
+            "title": "Clásico",
+            "description": "Diseño tradicional con jerarquía equilibrada"
+          },
+          "bold": {
+            "title": "Negrita",
+            "description": "Alto contraste, editorial y llamativo."
+          },
+          "minimal": {
+            "title": "mínimo",
+            "description": "Limpio, brillante y centrado en el curso."
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Tema personalizado",
           "add_theme": "Agregar tema"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Perfil",
@@ -2266,7 +2472,8 @@
         "file_size": "Tamaño máximo de archivo:",
         "accepted": "Aceptado:",
         "validation_error": "El tamaño del archivo excede el límite máximo:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Perfil",
@@ -2386,7 +2593,8 @@
         "general": "generales",
         "sso": "SSO",
         "token_auth": "Autenticación de token"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Autenticación de token",
@@ -2407,6 +2615,9 @@
       "integration_description": "Firme un JWT con el secreto y redirija a los usuarios a la URL de intercambio de tokens.",
       "no_config": "No hay autenticación de token configurada. Genere un secreto de firma para comenzar.",
       "actions_menu": "Acciones de autenticación de token"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Buscar"
-    }
+    },
+    "cancel": "Cancelar"
   },
   "welcome_modal": {
     "we_at": "nosotros en",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "N/A"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Límites de tarifas",
         "rate_limits_description": "Solicitudes de lectura/escritura/publicación permitidas por minuto.",
         "used_label": "Usado:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Activo",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Acceso de solo lectura",
       "disabled_description": "Solo los administradores de la organización pueden crear, rotar o revocar claves de automatización. Los profesores pueden revisar las instrucciones de configuración aquí."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programas",
+    "page_title": "Programas",
+    "create": "Nuevo programa",
+    "create_success": "Programa creado",
+    "update_success": "Programa actualizado",
+    "delete_success": "Programa eliminado",
+    "members_added": "Miembros agregados",
+    "member_removed": "Miembro eliminado",
+    "course_added": "Curso agregado",
+    "course_removed": "Curso eliminado",
+    "empty_title": "Aún no hay programas",
+    "empty_description": "Cree su primera certificación o programa de cumplimiento.",
+    "settings": {
+      "general": "generales",
+      "name_label": "Nombre",
+      "description_label": "Descripción",
+      "status_label": "Estado",
+      "save": "Guardar cambios",
+      "danger_zone": "Zona de peligro",
+      "delete": "Eliminar programa",
+      "delete_description": "Una vez eliminado, este programa y todos sus datos no se pueden recuperar.",
+      "confirm_delete": "¿Estás seguro de que deseas eliminar este programa? Esto no se puede deshacer."
+    },
+    "lms": {
+      "empty_title": "Aún no hay programas",
+      "empty_description": "No has estado inscrito en ningún programa."
+    },
+    "people": {
+      "invite": "invitar",
+      "invite_modal_title": "Invitar miembros",
+      "invite_modal_description": "Agregue personas a este programa por correo electrónico.",
+      "email_label": "Correo electrónico",
+      "role_label": "Rol",
+      "add_another": "agregar otro",
+      "invite_submit": "Enviar invitaciones",
+      "empty_title": "Aún no hay miembros",
+      "empty_description": "Invita a personas a unirse a este programa."
+    },
+    "courses": {
+      "add": "Agregar curso",
+      "add_modal_title": "Agregar curso al programa",
+      "select_course": "Seleccione un curso",
+      "select_placeholder": "Elige un curso…",
+      "empty_title": "Aún no hay cursos",
+      "empty_description": "Agregue cursos a este programa.",
+      "select_courses": "Seleccionar cursos",
+      "search_placeholder": "Buscar cursos",
+      "no_available_courses": "No hay cursos disponibles para agregar.",
+      "no_matching_courses": "Ningún curso coincide con tu búsqueda.",
+      "no_matching_program_courses": "Ningún programa de cursos coincide con su búsqueda.",
+      "pagination_status": "Página {página} de {totalPages}",
+      "published_access_callout_title": "Acceso de estudiantes",
+      "published_access_callout_description": "Los estudiantes solo tienen acceso a los cursos publicados. Los cursos pueden estar en este programa para su equipo mientras aún no están publicados, mientras que permanecen ocultos para los estudiantes hasta que los publique."
+    },
+    "newsfeed": {
+      "post": "Nueva publicación",
+      "post_placeholder": "¿Qué tienes en mente?",
+      "post_submit": "Publicar",
+      "empty_title": "Aún no hay publicaciones",
+      "empty_description": "Sé el primero en publicar algo.",
+      "heading": "suministro de noticias",
+      "make_a_post": "Hacer una publicación",
+      "edit_post": "Editar publicación",
+      "editor_placeholder": "Comparte una actualización con tu programa",
+      "cancel": "Cancelar",
+      "pinned": "Fijado",
+      "delete_feed_title": "Eliminar publicación",
+      "delete_feed_description": "¿Estás seguro de que deseas eliminar esta publicación?",
+      "confirm_delete": "Eliminar",
+      "user_avatar_alt": "avatar de usuario",
+      "comments": {
+        "comment": "comentario",
+        "showing_of": "Mostrando {shown} de {total}",
+        "hide": "Ocultar comentarios",
+        "placeholder": "Agregar comentario del programa",
+        "submit_aria": "Enviar comentario",
+        "delete": "Eliminar"
+      },
+      "card": {
+        "pin": "Alfiler",
+        "unpin": "Desanclar",
+        "edit": "Editar",
+        "delete": "Eliminar"
+      }
+    },
+    "create_modal": {
+      "title": "Crear programa",
+      "description": "Agregue una nueva certificación o programa de cumplimiento.",
+      "name_label": "Nombre",
+      "name_placeholder": "por ej. Certificación de seguridad OSHA",
+      "description_label": "Descripción",
+      "description_placeholder": "¿De qué se trata este programa?",
+      "submit": "crear"
+    },
+    "sidebar": {
+      "newsfeed": "suministro de noticias",
+      "courses": "Cursos",
+      "people": "gente",
+      "settings": "Configuración"
+    },
+    "status": {
+      "active": "Activo",
+      "inactive": "Inactivo",
+      "archived": "Archivado"
+    },
+    "description": "Dar a un grupo de personas acceso a múltiples cursos, como una clase",
+    "search_placeholder": "Programas de búsqueda",
+    "multiple_added": "Cursos agregados",
+    "no_matching_programs": "Ningún programa coincide con tus filtros.",
+    "card": {
+      "courses": "Cursos",
+      "students": "estudiantes"
+    },
+    "table": {
+      "name": "Nombre",
+      "courses": "Cursos",
+      "students": "estudiantes",
+      "status": "Estado",
+      "description": "Descripción"
+    },
+    "filters": {
+      "filter": "Filtrar",
+      "clear_all": "Borrar todo",
+      "popover_title": "Filtros",
+      "sort": "ordenar",
+      "order": "Orden",
+      "status": "Estado",
+      "ascending": "asc",
+      "descending": "Descripción",
+      "sort_name": "Nombre",
+      "sort_courses": "Cursos",
+      "sort_students": "estudiantes",
+      "sort_status": "Estado"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 0dd631d6..ef362cd6 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -364,6 +364,32 @@
       "created": "Clé d'automatisation créée. Enregistrez-le maintenant car le secret complet n'est affiché qu'une seule fois.",
       "rotated": "Clé d'automatisation tournée. Enregistrez le nouveau secret maintenant car il ne sera plus affiché.",
       "revoked": "Clé d'automatisation révoquée."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Une erreur s'est produite lors de la réaction au message",
+        "news_feed_fail": "Échec de la récupération du fil d'actualité du programme",
+        "post_create_failed": "Échec de la création du message",
+        "post_update_failed": "Échec de la mise à jour du message",
+        "code": {
+          "program_forbidden": "Vous devez être membre de ce programme pour effectuer cette action.",
+          "program_member_check_failed": "Nous n'avons pas pu vérifier votre adhésion au programme. Essayer à nouveau.",
+          "program_not_found": "Ce programme est introuvable.",
+          "program_create_failed": "Impossible de créer le programme.",
+          "program_update_failed": "Impossible de mettre à jour le programme.",
+          "program_delete_failed": "Impossible de supprimer le programme.",
+          "program_member_not_found": "Ce membre du programme est introuvable.",
+          "program_newsfeed_not_found": "Ce message est introuvable.",
+          "program_newsfeed_comment_not_found": "Ce commentaire n'a pas pu être trouvé."
+        }
+      },
+      "success": {
+        "comment_deleted": "Commentaire supprimé",
+        "comment_added": "Commentaire ajouté",
+        "feed_delete_success": "Message supprimé avec succès",
+        "post_created": "Message créé avec succès",
+        "post_updated": "Message mis à jour avec succès"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Communauté",
     "explore": "Explorer",
     "help": "Aide",
-    "settings": "Paramètres"
+    "settings": "Paramètres",
+    "programs": "Programmes"
   },
   "upgrade": {
     "certificate": "Mettez à niveau votre plan pour générer des certificats",
@@ -517,12 +544,23 @@
       "all_courses": "Tous les cours",
       "select_courses": "Sélectionnez des cours spécifiques",
       "select_courses_placeholder": "Choisissez des cours...",
+      "program_access": "Accès aux programmes",
+      "no_programs": "Aucune attribution de programme",
+      "all_programs": "Tous les programmes",
+      "select_programs": "Sélectionnez des programmes spécifiques",
+      "select_programs_placeholder": "Choisissez des programmes...",
       "send_email": "Envoyer un e-mail d'invitation aux utilisateurs importés",
       "submit": "Importer des utilisateurs",
       "back": "Retour au public",
       "snackbar_success": "{imported} nouvelles invitations, {assigned} étudiants existants avec accès au cours, {pendingInvitesRenewed} invitations en attente renouvelées ({emailsSent} e-mails envoyés)",
       "snackbar_no_emails": "Veuillez saisir au moins une adresse e-mail",
-      "snackbar_failed": "Échec de l'importation des utilisateurs"
+      "snackbar_failed": "Échec de l'importation des utilisateurs",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Modifier",
       "cancel": "Annuler",
       "give": "Donner une réponse",
-      "comment": "Commentaire"
+      "comment": "Commentaire",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Correspondance",
                 "ordering": "Commande",
                 "hotspot": "Point d'accès",
-                "link": "Liens"
+                "link": "Liens",
+                "word_bank": "Banque de mots",
+                "star": "Nombre d'étoiles"
               },
               "select_type": "Sélectionnez le type",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "C'est vrai",
                 "not_set": "Non défini",
                 "incorrect_badge": "Incorrect"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Vos réponses",
+                  "correct_label": "Bonnes réponses"
+                },
+                "preview": {
+                  "filled_label": "Réponses attendues en contexte"
+                },
+                "take": {
+                  "helper": "Cliquez sur un mot pour le placer dans le premier espace vide ou faites-le glisser dans un espace vide. Cliquez sur un espace rempli pour renvoyer le mot à la banque.",
+                  "bank_heading": "Banque de mots",
+                  "clear_blank_sr": "Supprimer le mot du vide"
+                },
+                "edit": {
+                  "template_label": "Modèle de phrase",
+                  "template_placeholder": "Les mesures pour décrire nos données sont appelées ___. Le ___ est une fonction...",
+                  "template_helper": "Utilisez trois traits de soulignement (___) pour chaque espace. Les apprenants verront une banque de mots avec des réponses correctes et des éléments de distraction.",
+                  "no_blanks_warning": "Ajoutez au moins un ___ marqueur vierge dans votre modèle.",
+                  "correct_answers_heading": "Bonne réponse pour chaque blanc",
+                  "blank_label": "Vide",
+                  "correct_placeholder": "Terme ou expression correct",
+                  "distractors_heading": "Mots supplémentaires (distracteurs)",
+                  "distractor_placeholder": "Mauvaise option",
+                  "add_distractor": "Ajouter un distraction"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Bonne réponse"
+                },
+                "take": {
+                  "helper": "Sélectionnez votre note.",
+                  "star_sr": "Étoile '{'n'}' de '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Valeur d'étoile correcte",
+                  "correct_value_info": "Les apprenants qui comptent les étoiles doivent sélectionner pour gagner la totalité des points.",
+                  "max_stars_label": "Nombre maximum d'étoiles",
+                  "max_stars_info": "Combien d’étoiles les apprenants voient (1 à 10). La valeur par défaut est 5.",
+                  "correct_value_placeholder": "par ex. 3",
+                  "max_stars_placeholder": "par ex. 5"
+                }
               }
             },
             "settings": "Paramètres",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Annuler le téléchargement",
                 "upload_cancelled": "Téléchargement annulé par l'utilisateur",
                 "max_files": "{count, plural, one {Vous pouvez télécharger # fichier} other {Vous pouvez télécharger # fichiers}}",
-                "max_files_and_size": "(jusqu'à {taille} chacun)"
+                "max_files_and_size": "(jusqu'à {taille} chacun)",
+                "google_drive_choose": "Choisissez parmi Google Drive",
+                "google_drive_opening": "Sélecteur d’ouverture…",
+                "google_drive_hint": "Choisissez une vidéo sur votre compte Google. Toute personne qui consulte la leçon doit y accéder : définissez le partage dans Drive sur \"Toute personne disposant du lien peut consulter\" (ou l'équivalent de votre organisation).",
+                "google_drive_not_configured": "L'importation Google Drive n'est pas configurée pour ce déploiement. Ajoutez PUBLIC_GOOGLE_PICKER_CLIENT_ID et PUBLIC_GOOGLE_PICKER_API_KEY à votre environnement.",
+                "google_drive_error": "Impossible d'ouvrir Google Drive. Vérifiez que votre navigateur autorise les pop-ups et que Google Picker est correctement configuré."
               },
               "empty_title": "Aucune vidéo pour l'instant",
-              "empty_description": "Ajoutez des vidéos de YouTube, téléchargez-les ou de votre bibliothèque multimédia"
+              "empty_description": "Ajoutez des vidéos de YouTube, téléchargez-les ou de votre bibliothèque multimédia",
+              "google_drive": "Google Drive"
             },
             "slide": {
               "title": "Diapositive",
@@ -1697,6 +1791,7 @@
       "empty_description": "Partagez vos connaissances avec le monde en créant des cours attrayants pour vos étudiants.",
       "error_message": "Une erreur s'est produite.",
       "lessons_number": "leçons",
+      "exercise": "exercice",
       "students": "étudiants",
       "published": "Publié",
       "unpublished": "Inédit",
@@ -1716,7 +1811,8 @@
         "clone": "Cloner",
         "share": "Partager",
         "invite": "Inviter",
-        "delete": "Supprimer"
+        "delete": "Supprimer",
+        "open": "Ouvert"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Balises",
       "empty_tags": "Aucune balise disponible"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Aide-moi à écrire",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Aujourd'hui est un autre jour pour vous rapprocher de vos objectifs d'apprentissage. N'abandonnez pas, plus vous apprenez, mieux vous vous améliorez.",
     "lessons_completed": "Leçons terminées",
     "no_courses_started": "Aucun cours n'a commencé",
-    "revenue": "Revenus",
-    "revenue_description": "Revenus approximatifs provenant de la vente de cours",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Nombre de cours",
     "no_courses_description": "Cours créés au sein de cette organisation",
     "total_students": "Nombre total d'étudiants",
@@ -1819,7 +1921,8 @@
           "banner_text": "Texte de la bannière",
           "banner_text_label": "Mettre à jour le texte de la bannière",
           "banner_text_placeholder": "Écrivez le texte ici"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Domaine personnalisé",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Ajoutez les enregistrements DNS ci-dessous, puis actualisez la vérification.",
         "pending_verification_description": "Des enregistrements DNS ont été trouvés. L'émission ou la validation SSL est toujours en cours.",
         "reconnect_description": "Ce domaine doit être à nouveau connecté via le nouveau flux de configuration Cloudflare.",
-        "error_description": "Ce domaine personnalisé existe, mais la vérification n'est pas encore terminée."
+        "error_description": "Ce domaine personnalisé existe, mais la vérification n'est pas encore terminée.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Plateforme",
+    "home": "Accueil",
+    "content": "Contenu",
+    "people": "Personnes",
     "dashboard": "Tableau de bord",
     "courses": "Cours",
     "community": "Communauté",
@@ -1989,7 +2096,8 @@
     "unlock": "Débloquez des fonctionnalités illimitées et investissez dans notre avenir",
     "upgrade": "Mettre à niveau maintenant",
     "tags": "Balises",
-    "automation": "Automation"
+    "automation": "Automation",
+    "programs": "Programmes"
   },
   "media_manager": {
     "page_title": "Gestionnaire de médias - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Télécharger",
       "youtube": "YouTube",
       "generic": "Générique",
-      "external_url": "URL externe"
+      "external_url": "URL externe",
+      "google_drive": "Google Drive"
     },
     "kind": {
       "video": "Vidéo",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "N/D"
     },
-    "empty_description": "L'actif n'existe pas ou n'est pas disponible dans cette organisation."
+    "empty_description": "L'actif n'existe pas ou n'est pas disponible dans cette organisation.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Paramètres",
@@ -2107,7 +2217,8 @@
       "active": "Vous n'avez aucune facturation active",
       "provider": "Nous utilisons Polar pour vous aider à gérer votre facturation",
       "open_billing": "Facturation ouverte",
-      "error": "Une erreur s'est produite lors de l'ouverture de la facturation"
+      "error": "Une erreur s'est produite lors de l'ouverture de la facturation",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Télégramme",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Étape 2 : Saisissez l’ID de chat qui vous a été fourni par le bot.",
       "connect_button": "Se connecter",
       "success_message": "Intégration réussie",
-      "disconnect": "Déconnecter"
+      "disconnect": "Déconnecter",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Page de destination",
@@ -2212,6 +2324,99 @@
         "title": "Image d'arrière-plan",
         "show_background": "Afficher l'arrière-plan",
         "hide_background": "Masquer l'arrière-plan"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Enregistrer",
+        "close": "Fermer",
+        "page_builder": "Générateur de pages",
+        "footer": {
+          "text": "Texte de pied de page",
+          "add": "Ajouter un lien de pied de page",
+          "default_label": "Nouveau lien",
+          "link_label": "Libellé du lien",
+          "link_href": "URL du lien",
+          "remove": "Supprimer le lien de pied de page"
+        },
+        "embed": {
+          "toggle": "Afficher la section d'intégration",
+          "title": "Titre de la section",
+          "title_placeholder": "Titre de la section",
+          "description": "Descriptif",
+          "description_placeholder": "Description facultative",
+          "code": "Code intégré",
+          "code_placeholder": "Collez le code d'intégration ici",
+          "code_description": "Collez l’extrait d’intégration complet ou le code iframe.",
+          "secondary_label": "Étiquette du bouton secondaire",
+          "secondary_href": "Lien du bouton secondaire"
+        },
+        "callout": {
+          "toggle": "Afficher la section de légende",
+          "heading": "Rubrique",
+          "heading_default": "Prêt à commencer à apprendre ?",
+          "heading_placeholder": "Entrez un titre",
+          "description": "Descriptif",
+          "description_placeholder": "Ajoutez une brève description ou laissez vide",
+          "action_label": "Etiquette du bouton",
+          "action_label_default": "Commencer",
+          "action_label_placeholder": "Texte du bouton",
+          "action_href": "Lien du bouton",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Ajouter un lien de navigation",
+          "default_label": "Nouveau lien",
+          "link_label": "Libellé du lien",
+          "link_href": "URL du lien",
+          "remove": "Supprimer le lien de navigation"
+        },
+        "hero": {
+          "heading": "Rubrique",
+          "subheading": "Sous-titre",
+          "primary_label": "Étiquette du bouton principal",
+          "primary_href": "Lien du bouton principal",
+          "secondary_toggle": "Afficher l'action secondaire",
+          "secondary_label": "Étiquette du bouton secondaire",
+          "secondary_href": "Lien du bouton secondaire",
+          "image": "Image du héros",
+          "upload": "Télécharger une image",
+          "clear": "Image claire"
+        },
+        "sections": {
+          "hero": "Héros",
+          "hero_desc": "Titre, boutons d'action et image du héros.",
+          "navigation": "Navigation",
+          "navigation_desc": "Liens affichés dans l’en-tête de la page de destination.",
+          "callout": "Légende",
+          "callout_desc": "Bannière promotionnelle facultative affichée après les cours.",
+          "embed": "Intégrer",
+          "embed_desc": "Section iframe facultative affichée après les cours.",
+          "footer": "Pied de page",
+          "footer_desc": "Texte de pied de page et liens."
+        }
+      },
+      "content": {
+        "heading": "Modifier le contenu",
+        "description": "Mettez à jour le héros, la navigation, l'intégration et le pied de page qui apparaissent dans chaque thème.",
+        "edit": "Modifier le contenu"
+      },
+      "theme": {
+        "heading": "Choisissez un thème",
+        "description": "Choisissez le style visuel que les visiteurs voient sur votre page de destination publique.",
+        "cards": {
+          "classic": {
+            "title": "Classique",
+            "description": "Disposition traditionnelle avec hiérarchie équilibrée"
+          },
+          "bold": {
+            "title": "Audacieux",
+            "description": "Contraste élevé, éditorial et saisissant"
+          },
+          "minimal": {
+            "title": "Minime",
+            "description": "Propre, lumineux et axé sur le cours"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Thème personnalisé",
           "add_theme": "Ajouter un thème"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Profil",
@@ -2266,7 +2472,8 @@
         "file_size": "Taille maximale du fichier :",
         "accepted": "Accepté :",
         "validation_error": "La taille du fichier dépasse la limite maximale :"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Profil",
@@ -2386,7 +2593,8 @@
         "general": "Général",
         "sso": "SSO",
         "token_auth": "Authentification du jeton"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Authentification du jeton",
@@ -2407,6 +2615,9 @@
       "integration_description": "Signez un JWT avec le secret et redirigez les utilisateurs vers l'URL d'échange de jetons.",
       "no_config": "Aucune authentification par jeton configurée. Générez un secret de signature pour commencer.",
       "actions_menu": "Actions d'authentification par jeton"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Rechercher"
-    }
+    },
+    "cancel": "Annuler"
   },
   "welcome_modal": {
     "we_at": "Nous à",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "N/D"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Limites de taux",
         "rate_limits_description": "Requêtes de lecture/écriture/publication autorisées par minute.",
         "used_label": "Utilisé :"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Actif",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Accès en lecture seule",
       "disabled_description": "Seuls les administrateurs de l'organisation peuvent créer, alterner ou révoquer des clés d'automatisation. Les enseignants peuvent consulter les instructions de configuration ici."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programmes",
+    "page_title": "Programmes",
+    "create": "Nouveau programme",
+    "create_success": "Programme créé",
+    "update_success": "Programme mis à jour",
+    "delete_success": "Programme supprimé",
+    "members_added": "Membres ajoutés",
+    "member_removed": "Membre supprimé",
+    "course_added": "Cours ajouté",
+    "course_removed": "Cours supprimé",
+    "empty_title": "Aucun programme pour l'instant",
+    "empty_description": "Créez votre premier programme de certification ou de conformité.",
+    "settings": {
+      "general": "Général",
+      "name_label": "Nom",
+      "description_label": "Descriptif",
+      "status_label": "Statut",
+      "save": "Enregistrer les modifications",
+      "danger_zone": "Zone dangereuse",
+      "delete": "Supprimer le programme",
+      "delete_description": "Une fois supprimé, ce programme et toutes ses données ne peuvent pas être récupérés.",
+      "confirm_delete": "Êtes-vous sûr de vouloir supprimer ce programme ? Cela ne peut pas être annulé."
+    },
+    "lms": {
+      "empty_title": "Aucun programme pour l'instant",
+      "empty_description": "Vous n'êtes inscrit à aucun programme."
+    },
+    "people": {
+      "invite": "Inviter",
+      "invite_modal_title": "Inviter des membres",
+      "invite_modal_description": "Ajoutez des personnes à ce programme par e-mail.",
+      "email_label": "Courriel",
+      "role_label": "Rôle",
+      "add_another": "Ajoutez-en un autre",
+      "invite_submit": "Envoyer des invitations",
+      "empty_title": "Pas encore de membres",
+      "empty_description": "Invitez les gens à rejoindre ce programme."
+    },
+    "courses": {
+      "add": "Ajouter un cours",
+      "add_modal_title": "Ajouter un cours au programme",
+      "select_course": "Sélectionnez un cours",
+      "select_placeholder": "Choisissez un cours…",
+      "empty_title": "Pas encore de cours",
+      "empty_description": "Ajoutez des cours à ce programme.",
+      "select_courses": "Sélectionner des cours",
+      "search_placeholder": "Rechercher des cours",
+      "no_available_courses": "Aucun cours disponible à ajouter.",
+      "no_matching_courses": "Aucun cours ne correspond à votre recherche.",
+      "no_matching_program_courses": "Aucun cours du programme ne correspond à votre recherche.",
+      "pagination_status": "Page {page} sur {totalPages}",
+      "published_access_callout_title": "Accès étudiant",
+      "published_access_callout_description": "Les étudiants n'ont accès qu'aux cours publiés. Les cours peuvent figurer dans ce programme pour votre équipe alors qu'ils ne sont pas encore publiés, tandis qu'ils restent cachés aux étudiants jusqu'à ce que vous les publiiez."
+    },
+    "newsfeed": {
+      "post": "Nouveau message",
+      "post_placeholder": "Qu'avez-vous en tête ?",
+      "post_submit": "Publier",
+      "empty_title": "Pas encore de messages",
+      "empty_description": "Soyez le premier à publier quelque chose.",
+      "heading": "Fil d'actualité",
+      "make_a_post": "Créer un message",
+      "edit_post": "Modifier le message",
+      "editor_placeholder": "Partager une mise à jour avec votre programme",
+      "cancel": "Annuler",
+      "pinned": "Épinglé",
+      "delete_feed_title": "Supprimer le message",
+      "delete_feed_description": "Êtes-vous sûr de vouloir supprimer ce message ?",
+      "confirm_delete": "Supprimer",
+      "user_avatar_alt": "Avatar de l'utilisateur",
+      "comments": {
+        "comment": "commentaire",
+        "showing_of": "Affichage de {montré} sur {total}",
+        "hide": "Masquer les commentaires",
+        "placeholder": "Ajouter un commentaire sur le programme",
+        "submit_aria": "Soumettre un commentaire",
+        "delete": "Supprimer"
+      },
+      "card": {
+        "pin": "Épingle",
+        "unpin": "Désépingler",
+        "edit": "Modifier",
+        "delete": "Supprimer"
+      }
+    },
+    "create_modal": {
+      "title": "Créer un programme",
+      "description": "Ajoutez un nouveau programme de certification ou de conformité.",
+      "name_label": "Nom",
+      "name_placeholder": "par ex. Certification de sécurité OSHA",
+      "description_label": "Descriptif",
+      "description_placeholder": "De quoi parle ce programme ?",
+      "submit": "Créer"
+    },
+    "sidebar": {
+      "newsfeed": "Fil d'actualité",
+      "courses": "Cours",
+      "people": "Les gens",
+      "settings": "Paramètres"
+    },
+    "status": {
+      "active": "Actif",
+      "inactive": "Inactif",
+      "archived": "Archivé"
+    },
+    "description": "Donner à un groupe de personnes l'accès à plusieurs cours, comme un cours",
+    "search_placeholder": "Programmes de recherche",
+    "multiple_added": "Cours ajoutés",
+    "no_matching_programs": "Aucun programme ne correspond à vos filtres.",
+    "card": {
+      "courses": "Cours",
+      "students": "Étudiants"
+    },
+    "table": {
+      "name": "Nom",
+      "courses": "Cours",
+      "students": "Étudiants",
+      "status": "Statut",
+      "description": "Descriptif"
+    },
+    "filters": {
+      "filter": "Filtrer",
+      "clear_all": "Tout effacer",
+      "popover_title": "Filtres",
+      "sort": "Trier",
+      "order": "Commande",
+      "status": "Statut",
+      "ascending": "Asc.",
+      "descending": "Description",
+      "sort_name": "Nom",
+      "sort_courses": "Cours",
+      "sort_students": "Étudiants",
+      "sort_status": "Statut"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 25d901b9..4048b781 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -364,6 +364,32 @@
       "created": "स्वचालन कुंजी बनाई गई. इसे अभी सहेजें क्योंकि पूरा रहस्य केवल एक बार दिखाया गया है।",
       "rotated": "स्वचालन कुंजी घुमाई गई. नया रहस्य अभी सहेजें क्योंकि यह दोबारा नहीं दिखाया जाएगा।",
       "revoked": "स्वचालन कुंजी निरस्त कर दी गई."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "पोस्ट पर प्रतिक्रिया करते समय एक त्रुटि उत्पन्न हुई",
+        "news_feed_fail": "प्रोग्राम न्यूज़फ़ीड लाने में विफल",
+        "post_create_failed": "पोस्ट बनाने में विफल",
+        "post_update_failed": "पोस्ट अपडेट करने में विफल",
+        "code": {
+          "program_forbidden": "इस क्रिया को करने के लिए आपको इस कार्यक्रम का सदस्य होना चाहिए।",
+          "program_member_check_failed": "हम आपके कार्यक्रम की सदस्यता सत्यापित नहीं कर सके. पुनः प्रयास करें।",
+          "program_not_found": "यह प्रोग्राम नहीं मिल सका.",
+          "program_create_failed": "प्रोग्राम नहीं बनाया जा सका.",
+          "program_update_failed": "प्रोग्राम अद्यतन नहीं किया जा सका.",
+          "program_delete_failed": "प्रोग्राम को हटाया नहीं जा सका.",
+          "program_member_not_found": "वह प्रोग्राम सदस्य नहीं मिल सका.",
+          "program_newsfeed_not_found": "वह पोस्ट नहीं मिल सकी.",
+          "program_newsfeed_comment_not_found": "वह टिप्पणी नहीं मिल सकी."
+        }
+      },
+      "success": {
+        "comment_deleted": "टिप्पणी हटा दी गई",
+        "comment_added": "टिप्पणी जोड़ी गई",
+        "feed_delete_success": "पोस्ट सफलतापूर्वक हटा दी गई",
+        "post_created": "पोस्ट सफलतापूर्वक बनाई गई",
+        "post_updated": "पोस्ट सफलतापूर्वक अपडेट की गई"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "समुदाय",
     "explore": "अन्वेषण करें",
     "help": "मदद",
-    "settings": "सेटिंग्स"
+    "settings": "सेटिंग्स",
+    "programs": "कार्यक्रम"
   },
   "upgrade": {
     "certificate": "प्रमाणपत्र बनाने की अपनी योजना को अपग्रेड करें",
@@ -517,12 +544,23 @@
       "all_courses": "सभी पाठ्यक्रम",
       "select_courses": "विशिष्ट पाठ्यक्रम चुनें",
       "select_courses_placeholder": "पाठ्यक्रम चुनें...",
+      "program_access": "प्रोग्राम एक्सेस",
+      "no_programs": "कोई प्रोग्राम असाइनमेंट नहीं",
+      "all_programs": "सभी प्रोग्राम",
+      "select_programs": "विशिष्ट प्रोग्राम चुनें",
+      "select_programs_placeholder": "प्रोग्राम चुनें...",
       "send_email": "आयातित उपयोगकर्ताओं को आमंत्रण ईमेल भेजें",
       "submit": "उपयोगकर्ता आयात करें",
       "back": "दर्शकों के पास वापस जाएँ",
       "snackbar_success": "{imported} नए निमंत्रण, {assigned} मौजूदा छात्रों को पाठ्यक्रम पहुंच, {pendingInvitesRenewed} लंबित निमंत्रण नवीकृत ({emailsSent} ईमेल भेजे गए)",
       "snackbar_no_emails": "कृपया कम से कम एक ईमेल पता दर्ज करें",
-      "snackbar_failed": "उपयोगकर्ताओं को आयात करने में विफल"
+      "snackbar_failed": "उपयोगकर्ताओं को आयात करने में विफल",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "संपादित करें",
       "cancel": "रद्द करें",
       "give": "उत्तर दीजिए",
-      "comment": "टिप्पणी करें"
+      "comment": "टिप्पणी करें",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "मिलान",
                 "ordering": "ऑर्डर देना",
                 "hotspot": "हॉटस्पॉट",
-                "link": "कड़ियाँ"
+                "link": "कड़ियाँ",
+                "word_bank": "वर्ड बैंक",
+                "star": "स्टार रेटिंग"
               },
               "select_type": "प्रकार चुनें",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "सही",
                 "not_set": "सेट नहीं",
                 "incorrect_badge": "गलत"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "आपके उत्तर",
+                  "correct_label": "सही उत्तर"
+                },
+                "preview": {
+                  "filled_label": "संदर्भ में अपेक्षित उत्तर"
+                },
+                "take": {
+                  "helper": "किसी शब्द को पहले रिक्त स्थान में रखने के लिए उस पर क्लिक करें, या उसे रिक्त स्थान में खींचें। बैंक को शब्द लौटाने के लिए भरे हुए रिक्त स्थान पर क्लिक करें।",
+                  "bank_heading": "वर्ड बैंक",
+                  "clear_blank_sr": "रिक्त स्थान से शब्द हटाएँ"
+                },
+                "edit": {
+                  "template_label": "वाक्य टेम्पलेट",
+                  "template_placeholder": "हमारे डेटा का वर्णन करने वाले मापों को ___ कहा जाता है। ___ एक फ़ंक्शन है...",
+                  "template_helper": "प्रत्येक रिक्त स्थान के लिए तीन अंडरस्कोर (___) का प्रयोग करें। शिक्षार्थियों को सही उत्तरों और ध्यान भटकाने वाली सामग्री वाला एक शब्द बैंक दिखाई देगा।",
+                  "no_blanks_warning": "अपने टेम्पलेट में कम से कम एक ___ रिक्त मार्कर जोड़ें।",
+                  "correct_answers_heading": "प्रत्येक रिक्त स्थान के लिए सही उत्तर",
+                  "blank_label": "रिक्त",
+                  "correct_placeholder": "सही शब्द या वाक्यांश",
+                  "distractors_heading": "अतिरिक्त शब्द (विचलित करने वाले)",
+                  "distractor_placeholder": "ग़लत विकल्प",
+                  "add_distractor": "ध्यान भटकाने वाला जोड़ें"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "सही उत्तर"
+                },
+                "take": {
+                  "helper": "अपनी रेटिंग चुनें.",
+                  "star_sr": "'{'अधिकतम'}' का तारा '{'n'}'"
+                },
+                "edit": {
+                  "correct_value_label": "सही तारा मान",
+                  "correct_value_info": "पूर्ण अंक अर्जित करने के लिए स्टार काउंट सीखने वालों को चयन करना होगा।",
+                  "max_stars_label": "अधिकतम सितारे",
+                  "max_stars_info": "शिक्षार्थी कितने तारे देखते हैं (1-10)। डिफ़ॉल्ट 5 है.",
+                  "correct_value_placeholder": "जैसे 3",
+                  "max_stars_placeholder": "जैसे 5"
+                }
               }
             },
             "settings": "सेटिंग्स",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "अपलोड रद्द करें",
                 "upload_cancelled": "उपयोगकर्ता द्वारा अपलोड रद्द कर दिया गया",
                 "max_files": "{गिनती, बहुवचन, एक {आप # फ़ाइल अपलोड कर सकते हैं} अन्य {आप # फ़ाइलें अपलोड कर सकते हैं}}",
-                "max_files_and_size": "(प्रत्येक {आकार} तक)"
+                "max_files_and_size": "(प्रत्येक {आकार} तक)",
+                "google_drive_choose": "Google Drive से चुनें",
+                "google_drive_opening": "पिकर खुल रहा है...",
+                "google_drive_hint": "अपने Google खाते से एक वीडियो चुनें. पाठ को देखने वाले किसी भी व्यक्ति को एक्सेस की आवश्यकता है - ड्राइव में साझाकरण को \"लिंक वाला कोई भी व्यक्ति देख सकता है\" (या आपके संगठन के समकक्ष) पर सेट करें।",
+                "google_drive_not_configured": "इस परिनियोजन के लिए Google ड्राइव आयात सेट नहीं किया गया है। अपने परिवेश में PUBLIC_GOOGLE_PICKER_CLIENT_ID और PUBLIC_GOOGLE_PICKER_API_KEY जोड़ें।",
+                "google_drive_error": "Google Drive नहीं खुल सका. जांचें कि आपका ब्राउज़र पॉप-अप की अनुमति देता है और Google पिकर सही ढंग से कॉन्फ़िगर किया गया है।"
               },
               "empty_title": "अभी तक कोई वीडियो नहीं",
-              "empty_description": "YouTube से वीडियो जोड़ें, अपलोड करें, या अपनी मीडिया लाइब्रेरी से"
+              "empty_description": "YouTube से वीडियो जोड़ें, अपलोड करें, या अपनी मीडिया लाइब्रेरी से",
+              "google_drive": "गूगल ड्राइव"
             },
             "slide": {
               "title": "फिसल पट्टी",
@@ -1697,6 +1791,7 @@
       "empty_description": "अपने छात्रों के लिए आकर्षक पाठ्यक्रम बनाकर अपना ज्ञान दुनिया के साथ साझा करें।",
       "error_message": "एक त्रुटि पाई गई।",
       "lessons_number": "सबक",
+      "exercise": "अभ्यास",
       "students": "छात्र",
       "published": "प्रकाशित",
       "unpublished": "अप्रकाशित",
@@ -1716,7 +1811,8 @@
         "clone": "क्लोन",
         "share": "साझा करें",
         "invite": "आमंत्रित करें",
-        "delete": "हटाएँ"
+        "delete": "हटाएँ",
+        "open": "खुला"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "टैग",
       "empty_tags": "कोई टैग उपलब्ध नहीं है"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "मुझे लिखने में मदद करें",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "आज का दिन आपको आपके सीखने के लक्ष्यों के करीब लाने का एक और दिन है। हार मत मानो, जितना अधिक सीखोगे उतना बेहतर हो जाओगे।",
     "lessons_completed": "पाठ पूरा हुआ",
     "no_courses_started": "कोई पाठ्यक्रम शुरू नहीं हुआ",
-    "revenue": "राजस्व",
-    "revenue_description": "पाठ्यक्रम की बिक्री से प्राप्त अनुमानित राजस्व",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "पाठ्यक्रमों की संख्या",
     "no_courses_description": "इस संगठन के अंतर्गत बनाए गए पाठ्यक्रम",
     "total_students": "कुल छात्र",
@@ -1819,7 +1921,8 @@
           "banner_text": "बैनर पाठ",
           "banner_text_label": "बैनर टेक्स्ट अपडेट करें",
           "banner_text_placeholder": "यहां पाठ लिखें"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "कस्टम डोमेन",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "नीचे DNS रिकॉर्ड जोड़ें, फिर सत्यापन ताज़ा करें।",
         "pending_verification_description": "डीएनएस रिकॉर्ड पाए गए. एसएसएल जारी करना या सत्यापन अभी भी जारी है।",
         "reconnect_description": "इस डोमेन को नए क्लाउडफ़ेयर सेटअप फ़्लो के माध्यम से फिर से कनेक्ट करने की आवश्यकता है।",
-        "error_description": "यह कस्टम डोमेन मौजूद है, लेकिन सत्यापन अभी तक पूरा नहीं हुआ है।"
+        "error_description": "यह कस्टम डोमेन मौजूद है, लेकिन सत्यापन अभी तक पूरा नहीं हुआ है।",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "मंच",
+    "home": "होम",
+    "content": "सामग्री",
+    "people": "लोग",
     "dashboard": "डैशबोर्ड",
     "courses": "पाठ्यक्रम",
     "community": "समुदाय",
@@ -1989,7 +2096,8 @@
     "unlock": "असीमित सुविधाएँ अनलॉक करें और हमारे भविष्य में निवेश करें",
     "upgrade": "अभी अपग्रेड करें",
     "tags": "टैग",
-    "automation": "स्वचालन"
+    "automation": "स्वचालन",
+    "programs": "कार्यक्रम"
   },
   "media_manager": {
     "page_title": "मीडिया मैनेजर - क्लासरूमआईओ",
@@ -2061,7 +2169,8 @@
       "upload": "अपलोड करें",
       "youtube": "यूट्यूब",
       "generic": "सामान्य",
-      "external_url": "बाहरी यूआरएल"
+      "external_url": "बाहरी यूआरएल",
+      "google_drive": "गूगल ड्राइव"
     },
     "kind": {
       "video": "वीडियो",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "एन/ए"
     },
-    "empty_description": "संपत्ति इस संगठन में मौजूद नहीं है या उपलब्ध नहीं है."
+    "empty_description": "संपत्ति इस संगठन में मौजूद नहीं है या उपलब्ध नहीं है.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "सेटिंग्स",
@@ -2107,7 +2217,8 @@
       "active": "आपके पास कोई सक्रिय बिलिंग नहीं है",
       "provider": "हम आपकी बिलिंग प्रबंधित करने में सहायता के लिए पोलर का उपयोग करते हैं",
       "open_billing": "बिलिंग खोलें",
-      "error": "बिलिंग खोलते समय एक त्रुटि उत्पन्न हुई"
+      "error": "बिलिंग खोलते समय एक त्रुटि उत्पन्न हुई",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "टेलीग्राम",
@@ -2117,7 +2228,8 @@
       "step_chatId": "चरण 2: बॉट द्वारा आपको दी गई चैट आईडी दर्ज करें।",
       "connect_button": "कनेक्ट करें",
       "success_message": "एकीकरण सफल",
-      "disconnect": "डिस्कनेक्ट करें"
+      "disconnect": "डिस्कनेक्ट करें",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "लैंडिंग पृष्ठ",
@@ -2212,6 +2324,99 @@
         "title": "पृष्ठभूमि छवि",
         "show_background": "पृष्ठभूमि दिखाएँ",
         "hide_background": "पृष्ठभूमि छिपाएँ"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "सहेजें",
+        "close": "बंद करें",
+        "page_builder": "पेज बिल्डर",
+        "footer": {
+          "text": "पादलेख पाठ",
+          "add": "फ़ुटर लिंक जोड़ें",
+          "default_label": "नया लिंक",
+          "link_label": "लिंक लेबल",
+          "link_href": "लिंक यूआरएल",
+          "remove": "फ़ुटर लिंक हटाएँ"
+        },
+        "embed": {
+          "toggle": "एम्बेड अनुभाग दिखाएँ",
+          "title": "अनुभाग शीर्षक",
+          "title_placeholder": "अनुभाग शीर्षक",
+          "description": "विवरण",
+          "description_placeholder": "वैकल्पिक विवरण",
+          "code": "कोड एंबेड करें",
+          "code_placeholder": "यहां एंबेड कोड चिपकाएं",
+          "code_description": "पूर्ण एंबेड स्निपेट या आईफ़्रेम कोड चिपकाएँ।",
+          "secondary_label": "सेकेंडरी बटन लेबल",
+          "secondary_href": "द्वितीयक बटन लिंक"
+        },
+        "callout": {
+          "toggle": "कॉलआउट अनुभाग दिखाएँ",
+          "heading": "शीर्षक",
+          "heading_default": "सीखना शुरू करने के लिए तैयार हैं?",
+          "heading_placeholder": "एक शीर्षक दर्ज करें",
+          "description": "विवरण",
+          "description_placeholder": "संक्षिप्त विवरण जोड़ें या खाली छोड़ दें",
+          "action_label": "बटन लेबल",
+          "action_label_default": "आरंभ करें",
+          "action_label_placeholder": "बटन पाठ",
+          "action_href": "बटन लिंक",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "नेविगेशन लिंक जोड़ें",
+          "default_label": "नया लिंक",
+          "link_label": "लिंक लेबल",
+          "link_href": "लिंक यूआरएल",
+          "remove": "नेविगेशन लिंक हटाएँ"
+        },
+        "hero": {
+          "heading": "शीर्षक",
+          "subheading": "उपशीर्षक",
+          "primary_label": "प्राथमिक बटन लेबल",
+          "primary_href": "प्राथमिक बटन लिंक",
+          "secondary_toggle": "द्वितीयक क्रिया दिखाएँ",
+          "secondary_label": "सेकेंडरी बटन लेबल",
+          "secondary_href": "द्वितीयक बटन लिंक",
+          "image": "हीरो छवि",
+          "upload": "छवि अपलोड करें",
+          "clear": "साफ़ छवि"
+        },
+        "sections": {
+          "hero": "हीरो",
+          "hero_desc": "शीर्षक, एक्शन बटन और नायक छवि।",
+          "navigation": "नेविगेशन",
+          "navigation_desc": "लैंडिंग पृष्ठ शीर्षलेख में लिंक दिखाए गए हैं.",
+          "callout": "कॉलआउट",
+          "callout_desc": "पाठ्यक्रमों के बाद दिखाया गया वैकल्पिक प्रचार बैनर।",
+          "embed": "एम्बेड करें",
+          "embed_desc": "पाठ्यक्रमों के बाद वैकल्पिक आईफ्रेम अनुभाग दिखाया गया है।",
+          "footer": "फ़ुटर",
+          "footer_desc": "पादलेख पाठ और लिंक."
+        }
+      },
+      "content": {
+        "heading": "सामग्री संपादित करें",
+        "description": "प्रत्येक थीम में दिखाई देने वाले हीरो, नेविगेशन, एंबेड और फ़ूटर को अपडेट करें।",
+        "edit": "सामग्री संपादित करें"
+      },
+      "theme": {
+        "heading": "एक थीम चुनें",
+        "description": "वह दृश्य शैली चुनें जो विज़िटर आपके सार्वजनिक लैंडिंग पृष्ठ पर देखते हैं।",
+        "cards": {
+          "classic": {
+            "title": "क्लासिक",
+            "description": "संतुलित पदानुक्रम के साथ पारंपरिक लेआउट"
+          },
+          "bold": {
+            "title": "साहसी",
+            "description": "उच्च कंट्रास्ट, संपादकीय और प्रभावशाली"
+          },
+          "minimal": {
+            "title": "न्यूनतम",
+            "description": "स्वच्छ, उज्ज्वल और पाठ्यक्रम-केंद्रित"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "कस्टम थीम",
           "add_theme": "थीम जोड़ें"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "प्रोफाइल",
@@ -2266,7 +2472,8 @@
         "file_size": "अधिकतम फ़ाइल आकार:",
         "accepted": "स्वीकृत:",
         "validation_error": "फ़ाइल का आकार अधिकतम सीमा से अधिक है:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "प्रोफाइल",
@@ -2386,7 +2593,8 @@
         "general": "सामान्य",
         "sso": "एसएसओ",
         "token_auth": "टोकन प्रामाणिक"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "टोकन प्रामाणिक",
@@ -2407,6 +2615,9 @@
       "integration_description": "गुप्त के साथ एक JWT पर हस्ताक्षर करें और उपयोगकर्ताओं को टोकन-एक्सचेंज URL पर रीडायरेक्ट करें।",
       "no_config": "कोई टोकन प्रमाणीकरण कॉन्फ़िगर नहीं किया गया. आरंभ करने के लिए एक हस्ताक्षर रहस्य उत्पन्न करें।",
       "actions_menu": "टोकन प्रमाणीकरण क्रियाएँ"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "खोजें"
-    }
+    },
+    "cancel": "रद्द करें"
   },
   "welcome_modal": {
     "we_at": "हम पर",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "एन/ए"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "दर सीमा",
         "rate_limits_description": "प्रति मिनट पढ़ने/लिखने/प्रकाशित करने के अनुरोधों की अनुमति है।",
         "used_label": "प्रयुक्त:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "सक्रिय",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "केवल पढ़ने योग्य पहुंच",
       "disabled_description": "केवल संगठन व्यवस्थापक ही स्वचालन कुंजियाँ बना सकते हैं, घुमा सकते हैं या निरस्त कर सकते हैं। शिक्षक यहां सेटअप निर्देशों की समीक्षा कर सकते हैं।"
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "कार्यक्रम",
+    "page_title": "कार्यक्रम",
+    "create": "नया कार्यक्रम",
+    "create_success": "प्रोग्राम बनाया गया",
+    "update_success": "कार्यक्रम अद्यतन किया गया",
+    "delete_success": "प्रोग्राम हटा दिया गया",
+    "members_added": "सदस्य जोड़े गए",
+    "member_removed": "सदस्य हटा दिया गया",
+    "course_added": "पाठ्यक्रम जोड़ा गया",
+    "course_removed": "पाठ्यक्रम हटा दिया गया",
+    "empty_title": "अभी तक कोई कार्यक्रम नहीं",
+    "empty_description": "अपना पहला प्रमाणन या अनुपालन कार्यक्रम बनाएं।",
+    "settings": {
+      "general": "सामान्य",
+      "name_label": "नाम",
+      "description_label": "विवरण",
+      "status_label": "स्थिति",
+      "save": "परिवर्तन सहेजें",
+      "danger_zone": "ख़तरे का क्षेत्र",
+      "delete": "प्रोग्राम हटाएँ",
+      "delete_description": "एक बार डिलीट होने के बाद, यह प्रोग्राम और इसका सारा डेटा पुनर्प्राप्त नहीं किया जा सकता है।",
+      "confirm_delete": "क्या आप वाकई इस प्रोग्राम को हटाना चाहते हैं? इसे असंपादित नहीं किया जा सकता है।"
+    },
+    "lms": {
+      "empty_title": "अभी तक कोई कार्यक्रम नहीं",
+      "empty_description": "आपको किसी भी कार्यक्रम में नामांकित नहीं किया गया है."
+    },
+    "people": {
+      "invite": "आमंत्रित करें",
+      "invite_modal_title": "सदस्यों को आमंत्रित करें",
+      "invite_modal_description": "लोगों को ईमेल द्वारा इस कार्यक्रम में जोड़ें.",
+      "email_label": "ईमेल",
+      "role_label": "भूमिका",
+      "add_another": "दूसरा जोड़ें",
+      "invite_submit": "निमंत्रण भेजें",
+      "empty_title": "अभी तक कोई सदस्य नहीं",
+      "empty_description": "लोगों को इस कार्यक्रम में शामिल होने के लिए आमंत्रित करें."
+    },
+    "courses": {
+      "add": "पाठ्यक्रम जोड़ें",
+      "add_modal_title": "कार्यक्रम में पाठ्यक्रम जोड़ें",
+      "select_course": "एक पाठ्यक्रम चुनें",
+      "select_placeholder": "एक कोर्स चुनें...",
+      "empty_title": "अभी तक कोई पाठ्यक्रम नहीं",
+      "empty_description": "इस कार्यक्रम में पाठ्यक्रम जोड़ें.",
+      "select_courses": "पाठ्यक्रम चुनें",
+      "search_placeholder": "पाठ्यक्रम खोजें",
+      "no_available_courses": "जोड़ने के लिए कोई पाठ्यक्रम उपलब्ध नहीं है.",
+      "no_matching_courses": "कोई भी पाठ्यक्रम आपकी खोज से मेल नहीं खाता.",
+      "no_matching_program_courses": "कोई भी प्रोग्राम पाठ्यक्रम आपकी खोज से मेल नहीं खाता।",
+      "pagination_status": "{totalPages} का पेज {page}",
+      "published_access_callout_title": "छात्र प्रवेश",
+      "published_access_callout_description": "छात्रों को केवल प्रकाशित पाठ्यक्रमों तक ही पहुंच है। पाठ्यक्रम अप्रकाशित रहते हुए भी आपकी टीम के लिए इस कार्यक्रम में हो सकते हैं, जबकि जब तक आप उन्हें प्रकाशित नहीं करते तब तक वे छात्रों से छिपे रहते हैं।"
+    },
+    "newsfeed": {
+      "post": "नई पोस्ट",
+      "post_placeholder": "आपके मन में क्या है?",
+      "post_submit": "पोस्ट",
+      "empty_title": "अभी तक कोई पोस्ट नहीं",
+      "empty_description": "कुछ पोस्ट करने वाले पहले व्यक्ति बनें.",
+      "heading": "न्यूज़फीड",
+      "make_a_post": "एक पोस्ट बनाएं",
+      "edit_post": "पोस्ट संपादित करें",
+      "editor_placeholder": "अपने प्रोग्राम के साथ एक अपडेट साझा करें",
+      "cancel": "रद्द करें",
+      "pinned": "पिन किया गया",
+      "delete_feed_title": "पोस्ट हटाएं",
+      "delete_feed_description": "क्या आप वाकई इस पोस्ट को हटाना चाहते हैं?",
+      "confirm_delete": "हटाएँ",
+      "user_avatar_alt": "उपयोगकर्ता अवतार",
+      "comments": {
+        "comment": "टिप्पणी",
+        "showing_of": "{कुल} में से {दिखाया गया}",
+        "hide": "टिप्पणियाँ छिपाएँ",
+        "placeholder": "प्रोग्राम टिप्पणी जोड़ें",
+        "submit_aria": "टिप्पणी सबमिट करें",
+        "delete": "हटाएँ"
+      },
+      "card": {
+        "pin": "पिन",
+        "unpin": "अनपिन करें",
+        "edit": "संपादित करें",
+        "delete": "हटाएँ"
+      }
+    },
+    "create_modal": {
+      "title": "प्रोग्राम बनाएं",
+      "description": "एक नया प्रमाणन या अनुपालन कार्यक्रम जोड़ें.",
+      "name_label": "नाम",
+      "name_placeholder": "जैसे OSHA सुरक्षा प्रमाणन",
+      "description_label": "विवरण",
+      "description_placeholder": "यह कार्यक्रम किस बारे में है?",
+      "submit": "बनाएँ"
+    },
+    "sidebar": {
+      "newsfeed": "न्यूज़फीड",
+      "courses": "पाठ्यक्रम",
+      "people": "लोग",
+      "settings": "सेटिंग्स"
+    },
+    "status": {
+      "active": "सक्रिय",
+      "inactive": "निष्क्रिय",
+      "archived": "संग्रहीत"
+    },
+    "description": "लोगों के एक समूह को एक कक्षा जैसे कई पाठ्यक्रमों तक पहुंच प्रदान करें",
+    "search_placeholder": "प्रोग्राम खोजें",
+    "multiple_added": "पाठ्यक्रम जोड़े गए",
+    "no_matching_programs": "कोई भी प्रोग्राम आपके फ़िल्टर से मेल नहीं खाता.",
+    "card": {
+      "courses": "पाठ्यक्रम",
+      "students": "छात्र"
+    },
+    "table": {
+      "name": "नाम",
+      "courses": "पाठ्यक्रम",
+      "students": "छात्र",
+      "status": "स्थिति",
+      "description": "विवरण"
+    },
+    "filters": {
+      "filter": "फ़िल्टर करें",
+      "clear_all": "सब साफ़ करें",
+      "popover_title": "फिल्टर",
+      "sort": "क्रमबद्ध करें",
+      "order": "आदेश",
+      "status": "स्थिति",
+      "ascending": "ए.एस.सी",
+      "descending": "वर्णन",
+      "sort_name": "नाम",
+      "sort_courses": "पाठ्यक्रम",
+      "sort_students": "छात्र",
+      "sort_status": "स्थिति"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/pl.json b/apps/dashboard/src/lib/utils/translations/pl.json
index a5ead84f..ca6e39e8 100644
--- a/apps/dashboard/src/lib/utils/translations/pl.json
+++ b/apps/dashboard/src/lib/utils/translations/pl.json
@@ -364,6 +364,32 @@
       "created": "Utworzono klucz automatyzacji. Zapisz go teraz, ponieważ pełny sekret zostanie wyświetlony tylko raz.",
       "rotated": "Klucz automatyki obrócony. Zapisz teraz nowy sekret, ponieważ nie będzie on wyświetlany ponownie.",
       "revoked": "Klucz automatyzacji unieważniony."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Wystąpił błąd podczas odpowiadania na post",
+        "news_feed_fail": "Nie udało się pobrać kanału informacyjnego programu",
+        "post_create_failed": "Nie udało się utworzyć posta",
+        "post_update_failed": "Nie udało się zaktualizować wpisu",
+        "code": {
+          "program_forbidden": "Aby wykonać tę czynność, musisz być członkiem tego programu.",
+          "program_member_check_failed": "Nie mogliśmy zweryfikować Twojego członkostwa w programie. Spróbuj ponownie.",
+          "program_not_found": "Nie można znaleźć tego programu.",
+          "program_create_failed": "Nie można utworzyć programu.",
+          "program_update_failed": "Nie można zaktualizować programu.",
+          "program_delete_failed": "Nie można usunąć programu.",
+          "program_member_not_found": "Nie można znaleźć tego członka programu.",
+          "program_newsfeed_not_found": "Nie udało się znaleźć tego wpisu.",
+          "program_newsfeed_comment_not_found": "Nie udało się znaleźć tego komentarza."
+        }
+      },
+      "success": {
+        "comment_deleted": "Komentarz usunięty",
+        "comment_added": "Komentarz dodany",
+        "feed_delete_success": "Post został pomyślnie usunięty",
+        "post_created": "Post został utworzony pomyślnie",
+        "post_updated": "Post został pomyślnie zaktualizowany"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Społeczność",
     "explore": "Eksploruj",
     "help": "Pomoc",
-    "settings": "Ustawienia"
+    "settings": "Ustawienia",
+    "programs": "Programy"
   },
   "upgrade": {
     "certificate": "Uaktualnij swój plan, aby generować certyfikaty",
@@ -517,12 +544,23 @@
       "all_courses": "Wszystkie kursy",
       "select_courses": "Wybierz konkretne kursy",
       "select_courses_placeholder": "Wybierz kursy...",
+      "program_access": "Dostęp do programów",
+      "no_programs": "Bez przypisania do programu",
+      "all_programs": "Wszystkie programy",
+      "select_programs": "Wybierz konkretne programy",
+      "select_programs_placeholder": "Wybierz programy...",
       "send_email": "Wyślij wiadomość e-mail z zaproszeniem do zaimportowanych użytkowników",
       "submit": "Importuj użytkowników",
       "back": "Powrót do Publiczności",
       "snackbar_success": "{imported} nowych zaproszeń, {assigned} istniejących studentów z dostępem do kursu, {pendingInvitesRenewed} odnowionych oczekujących zaproszeń (wysłano e-maile: {emailsSent})",
       "snackbar_no_emails": "Proszę podać przynajmniej jeden adres e-mail",
-      "snackbar_failed": "Nie udało się zaimportować użytkowników"
+      "snackbar_failed": "Nie udało się zaimportować użytkowników",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Edytuj",
       "cancel": "Anuluj",
       "give": "Podaj odpowiedź",
-      "comment": "Komentarz"
+      "comment": "Komentarz",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Dopasowanie",
                 "ordering": "Zamawianie",
                 "hotspot": "Hotspot",
-                "link": "Linki"
+                "link": "Linki",
+                "word_bank": "Bank słów",
+                "star": "Ocena gwiazdkowa"
               },
               "select_type": "Wybierz typ",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Poprawnie",
                 "not_set": "Nie ustawiono",
                 "incorrect_badge": "Niepoprawne"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Twoje odpowiedzi",
+                  "correct_label": "Prawidłowe odpowiedzi"
+                },
+                "preview": {
+                  "filled_label": "Oczekiwane odpowiedzi w kontekście"
+                },
+                "take": {
+                  "helper": "Kliknij słowo, aby umieścić je w pierwszym pustym pustym miejscu, lub przeciągnij je w puste miejsce. Kliknij wypełnione puste miejsce, aby zwrócić słowo do banku.",
+                  "bank_heading": "Bank słów",
+                  "clear_blank_sr": "Usuń słowo z pustego miejsca"
+                },
+                "edit": {
+                  "template_label": "Szablon zdania",
+                  "template_placeholder": "Pomiary opisujące nasze dane nazywane są ___. ___ jest funkcją...",
+                  "template_helper": "Użyj trzech podkreśleń (___) dla każdego spacji. Uczniowie zobaczą bank słów z poprawnymi odpowiedziami i elementami rozpraszającymi.",
+                  "no_blanks_warning": "Dodaj co najmniej jeden ___ pusty znacznik do swojego szablonu.",
+                  "correct_answers_heading": "Prawidłowa odpowiedź w każdą lukę",
+                  "blank_label": "Puste",
+                  "correct_placeholder": "Prawidłowy termin lub fraza",
+                  "distractors_heading": "Dodatkowe słowa (rozpraszacze)",
+                  "distractor_placeholder": "Zła opcja",
+                  "add_distractor": "Dodaj rozpraszacz"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Prawidłowa odpowiedź"
+                },
+                "take": {
+                  "helper": "Wybierz swoją ocenę.",
+                  "star_sr": "Gwiazdka „{'n'}” z „{'max'}”"
+                },
+                "edit": {
+                  "correct_value_label": "Prawidłowa wartość gwiazdki",
+                  "correct_value_info": "Aby zdobyć pełną liczbę punktów, uczniowie muszą wybrać liczbę gwiazdek.",
+                  "max_stars_label": "Maksymalna ilość gwiazdek",
+                  "max_stars_info": "Ile gwiazdek widzą uczniowie (1–10). Wartość domyślna to 5.",
+                  "correct_value_placeholder": "np. 3",
+                  "max_stars_placeholder": "np. 5"
+                }
               }
             },
             "settings": "Ustawienia",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Anuluj przesyłanie",
                 "upload_cancelled": "Przesyłanie anulowane przez użytkownika",
                 "max_files": "{count, plural, one {Możesz przesłać # plik} other {Możesz przesłać # plików}}",
-                "max_files_and_size": "(do {rozmiar} każdy)"
+                "max_files_and_size": "(do {rozmiar} każdy)",
+                "google_drive_choose": "Wybierz z Dysku Google",
+                "google_drive_opening": "Otwieram selektor…",
+                "google_drive_hint": "Wybierz film ze swojego konta Google. Każda osoba przeglądająca lekcję potrzebuje dostępu — ustaw udostępnianie na Dysku na „Każda osoba mająca link może wyświetlać” (lub odpowiednik w Twojej organizacji).",
+                "google_drive_not_configured": "Import do Dysku Google nie jest skonfigurowany dla tego wdrożenia. Dodaj PUBLIC_GOOGLE_PICKER_CLIENT_ID i PUBLIC_GOOGLE_PICKER_API_KEY do swojego środowiska.",
+                "google_drive_error": "Nie można otworzyć Dysku Google. Sprawdź, czy Twoja przeglądarka zezwala na wyskakujące okienka i czy Google Picker jest poprawnie skonfigurowany."
               },
               "empty_title": "Nie ma jeszcze filmów",
-              "empty_description": "Dodaj filmy z YouTube, prześlij lub ze swojej biblioteki multimediów"
+              "empty_description": "Dodaj filmy z YouTube, prześlij lub ze swojej biblioteki multimediów",
+              "google_drive": "Dysk Google"
             },
             "slide": {
               "title": "Przesuń",
@@ -1697,6 +1791,7 @@
       "empty_description": "Podziel się swoją wiedzą ze światem, tworząc angażujące kursy dla swoich uczniów.",
       "error_message": "Wystąpił błąd.",
       "lessons_number": "lekcje",
+      "exercise": "ćwiczenie",
       "students": "studenci",
       "published": "Opublikowano",
       "unpublished": "Niepublikowane",
@@ -1716,7 +1811,8 @@
         "clone": "Klon",
         "share": "Udostępnij",
         "invite": "Zaproś",
-        "delete": "Usuń"
+        "delete": "Usuń",
+        "open": "Otwórz"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Tagi",
       "empty_tags": "Brak dostępnych tagów"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Pomóż mi pisać",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Dziś jest kolejny dzień, który przybliży Cię do Twoich celów edukacyjnych. Nie poddawaj się, im więcej się uczysz, tym jesteś lepszy.",
     "lessons_completed": "Lekcje zakończone",
     "no_courses_started": "Żadne kursy nie zostały rozpoczęte",
-    "revenue": "Przychody",
-    "revenue_description": "Przybliżone przychody ze sprzedaży kursów",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Liczba kursów",
     "no_courses_description": "Kursy stworzone w ramach tej organizacji",
     "total_students": "Razem studenci",
@@ -1819,7 +1921,8 @@
           "banner_text": "Tekst banera",
           "banner_text_label": "Zaktualizuj tekst banera",
           "banner_text_placeholder": "Wpisz tekst tutaj"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Domena niestandardowa",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Dodaj poniższe rekordy DNS, a następnie odśwież weryfikację.",
         "pending_verification_description": "Znaleziono rekordy DNS. Wydanie lub weryfikacja protokołu SSL jest nadal w toku.",
         "reconnect_description": "Ta domena musi zostać ponownie połączona poprzez nowy proces konfiguracji Cloudflare.",
-        "error_description": "Ta domena niestandardowa istnieje, ale weryfikacja nie została jeszcze ukończona."
+        "error_description": "Ta domena niestandardowa istnieje, ale weryfikacja nie została jeszcze ukończona.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Platforma",
+    "home": "Strona główna",
+    "content": "Treść",
+    "people": "Ludzie",
     "dashboard": "Pulpit nawigacyjny",
     "courses": "Kursy",
     "community": "Społeczność",
@@ -1989,7 +2096,8 @@
     "unlock": "Odblokuj nieograniczone funkcje i inwestuj w naszą przyszłość",
     "upgrade": "Uaktualnij teraz",
     "tags": "Tagi",
-    "automation": "Automatyzacja"
+    "automation": "Automatyzacja",
+    "programs": "Programy"
   },
   "media_manager": {
     "page_title": "Menedżer multimediów - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Prześlij",
       "youtube": "YouTube",
       "generic": "Ogólne",
-      "external_url": "Zewnętrzny adres URL"
+      "external_url": "Zewnętrzny adres URL",
+      "google_drive": "Dysk Google"
     },
     "kind": {
       "video": "Wideo",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "Nie dotyczy"
     },
-    "empty_description": "Zasób nie istnieje lub nie jest dostępny w tej organizacji."
+    "empty_description": "Zasób nie istnieje lub nie jest dostępny w tej organizacji.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Ustawienia",
@@ -2107,7 +2217,8 @@
       "active": "Nie masz żadnych aktywnych rozliczeń",
       "provider": "Używamy Polar do zarządzania Twoimi rozliczeniami",
       "open_billing": "Otwórz rozliczenia",
-      "error": "Wystąpił błąd podczas otwierania rozliczeń"
+      "error": "Wystąpił błąd podczas otwierania rozliczeń",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Telegram",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Krok 2: Wpisz identyfikator czatu otrzymany od bota.",
       "connect_button": "Połącz",
       "success_message": "Integracja udana",
-      "disconnect": "Rozłącz"
+      "disconnect": "Rozłącz",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Strona docelowa",
@@ -2212,6 +2324,99 @@
         "title": "Obraz tła",
         "show_background": "Pokaż tło",
         "hide_background": "Ukryj tło"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Zapisz",
+        "close": "Zamknij",
+        "page_builder": "Kreator Stron",
+        "footer": {
+          "text": "Tekst stopki",
+          "add": "Dodaj link do stopki",
+          "default_label": "Nowe łącze",
+          "link_label": "Etykieta łącza",
+          "link_href": "Adres URL linku",
+          "remove": "Usuń link ze stopki"
+        },
+        "embed": {
+          "toggle": "Pokaż sekcję osadzania",
+          "title": "Tytuł sekcji",
+          "title_placeholder": "Tytuł sekcji",
+          "description": "Opis",
+          "description_placeholder": "Opcjonalny opis",
+          "code": "Wstaw kod",
+          "code_placeholder": "Wklej tutaj kod osadzania",
+          "code_description": "Wklej pełny fragment kodu do osadzenia lub kod iframe.",
+          "secondary_label": "Etykieta przycisku dodatkowego",
+          "secondary_href": "Link do przycisku dodatkowego"
+        },
+        "callout": {
+          "toggle": "Pokaż sekcję objaśnień",
+          "heading": "Nagłówek",
+          "heading_default": "Gotowy do rozpoczęcia nauki?",
+          "heading_placeholder": "Wprowadź nagłówek",
+          "description": "Opis",
+          "description_placeholder": "Dodaj krótki opis lub pozostaw puste",
+          "action_label": "Etykieta przycisku",
+          "action_label_default": "Rozpocznij",
+          "action_label_placeholder": "Tekst przycisku",
+          "action_href": "Link do przycisku",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Dodaj łącze nawigacyjne",
+          "default_label": "Nowe łącze",
+          "link_label": "Etykieta łącza",
+          "link_href": "Adres URL linku",
+          "remove": "Usuń link nawigacyjny"
+        },
+        "hero": {
+          "heading": "Nagłówek",
+          "subheading": "Podtytuł",
+          "primary_label": "Etykieta przycisku głównego",
+          "primary_href": "Link do przycisku głównego",
+          "secondary_toggle": "Pokaż akcję drugorzędną",
+          "secondary_label": "Etykieta przycisku dodatkowego",
+          "secondary_href": "Link do przycisku dodatkowego",
+          "image": "Obraz bohatera",
+          "upload": "Prześlij obraz",
+          "clear": "Wyczyść obraz"
+        },
+        "sections": {
+          "hero": "Bohater",
+          "hero_desc": "Nagłówek, przyciski akcji i obraz bohatera.",
+          "navigation": "Nawigacja",
+          "navigation_desc": "Linki wyświetlane w nagłówku strony docelowej.",
+          "callout": "Objaśnienie",
+          "callout_desc": "Opcjonalny baner promocyjny wyświetlany po kursach.",
+          "embed": "Osadź",
+          "embed_desc": "Opcjonalna sekcja iframe pokazywana po kursach.",
+          "footer": "Stopka",
+          "footer_desc": "Tekst stopki i linki."
+        }
+      },
+      "content": {
+        "heading": "Edytuj treść",
+        "description": "Zaktualizuj bohatera, nawigację, osadzenie i stopkę, które pojawiają się w każdym motywie.",
+        "edit": "Edytuj treść"
+      },
+      "theme": {
+        "heading": "Wybierz motyw",
+        "description": "Wybierz styl wizualny, jaki widzą odwiedzający na Twojej publicznej stronie docelowej.",
+        "cards": {
+          "classic": {
+            "title": "Klasyczny",
+            "description": "Tradycyjny układ ze zrównoważoną hierarchią"
+          },
+          "bold": {
+            "title": "Odważne",
+            "description": "Wysoki kontrast, redakcyjny i uderzający"
+          },
+          "minimal": {
+            "title": "Minimalne",
+            "description": "Czyste, jasne i skupione na kursie"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Motyw niestandardowy",
           "add_theme": "Dodaj motyw"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Profil",
@@ -2266,7 +2472,8 @@
         "file_size": "Maksymalny rozmiar pliku:",
         "accepted": "Zaakceptowano:",
         "validation_error": "Rozmiar pliku przekracza maksymalny limit:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Profil",
@@ -2386,7 +2593,8 @@
         "general": "Generał",
         "sso": "Jednokrotne logowanie",
         "token_auth": "Autoryzacja tokenu"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Autoryzacja tokenu",
@@ -2407,6 +2615,9 @@
       "integration_description": "Podpisz token JWT za pomocą klucza tajnego i przekieruj użytkowników do adresu URL wymiany tokenów.",
       "no_config": "Nie skonfigurowano uwierzytelniania tokena. Aby rozpocząć, wygeneruj sekret podpisu.",
       "actions_menu": "Akcje uwierzytelniania tokenu"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Szukaj"
-    }
+    },
+    "cancel": "Anuluj"
   },
   "welcome_modal": {
     "we_at": "My o",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "Nie dotyczy"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Limity stawek",
         "rate_limits_description": "Żądania odczytu/zapisu/publikowania dozwolone na minutę.",
         "used_label": "Używane:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Aktywny",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Dostęp tylko do odczytu",
       "disabled_description": "Tylko administratorzy organizacji mogą tworzyć, obracać i unieważniać klucze automatyzacji. Nauczyciele mogą zapoznać się z instrukcjami konfiguracji tutaj."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programy",
+    "page_title": "Programy",
+    "create": "Nowy program",
+    "create_success": "Program stworzony",
+    "update_success": "Program zaktualizowany",
+    "delete_success": "Program usunięty",
+    "members_added": "Dodano członków",
+    "member_removed": "Członek usunięty",
+    "course_added": "Kurs dodany",
+    "course_removed": "Kurs usunięty",
+    "empty_title": "Nie ma jeszcze programów",
+    "empty_description": "Utwórz swój pierwszy program certyfikacji lub zgodności.",
+    "settings": {
+      "general": "Generał",
+      "name_label": "Imię",
+      "description_label": "Opis",
+      "status_label": "Stan",
+      "save": "Zapisz zmiany",
+      "danger_zone": "Strefa zagrożenia",
+      "delete": "Usuń program",
+      "delete_description": "Po usunięciu tego programu i wszystkich jego danych nie można odzyskać.",
+      "confirm_delete": "Czy na pewno chcesz usunąć ten program? Tego nie można cofnąć."
+    },
+    "lms": {
+      "empty_title": "Nie ma jeszcze programów",
+      "empty_description": "Nie jesteś zarejestrowany w żadnym programie."
+    },
+    "people": {
+      "invite": "Zaproś",
+      "invite_modal_title": "Zaproś członków",
+      "invite_modal_description": "Dodaj osoby do tego programu przez e-mail.",
+      "email_label": "E-mail",
+      "role_label": "Rola",
+      "add_another": "Dodaj kolejny",
+      "invite_submit": "Wyślij zaproszenia",
+      "empty_title": "Nie ma jeszcze członków",
+      "empty_description": "Zaproś ludzi do przyłączenia się do tego programu."
+    },
+    "courses": {
+      "add": "Dodaj kurs",
+      "add_modal_title": "Dodaj kurs do programu",
+      "select_course": "Wybierz kurs",
+      "select_placeholder": "Wybierz kurs…",
+      "empty_title": "Nie ma jeszcze żadnych kursów",
+      "empty_description": "Dodaj kursy do tego programu.",
+      "select_courses": "Wybierz kursy",
+      "search_placeholder": "Wyszukaj kursy",
+      "no_available_courses": "Brak dostępnych kursów do dodania.",
+      "no_matching_courses": "Żaden kurs nie pasuje do Twojego wyszukiwania.",
+      "no_matching_program_courses": "Żaden kurs programowy nie pasuje do Twojego wyszukiwania.",
+      "pagination_status": "Strona {strona} z {totalPages}",
+      "published_access_callout_title": "Dostęp studencki",
+      "published_access_callout_description": "Studenci mają dostęp wyłącznie do opublikowanych kursów. Kursy mogą znajdować się w tym programie dla Twojego zespołu, gdy nie są jeszcze opublikowane, ale pozostają ukryte przed uczniami, dopóki ich nie opublikujesz."
+    },
+    "newsfeed": {
+      "post": "Nowy post",
+      "post_placeholder": "Co masz na myśli?",
+      "post_submit": "Opublikuj",
+      "empty_title": "Nie ma jeszcze żadnych postów",
+      "empty_description": "Bądź pierwszą osobą, która coś opublikuje.",
+      "heading": "Kanał informacyjny",
+      "make_a_post": "Napisz post",
+      "edit_post": "Edytuj post",
+      "editor_placeholder": "Udostępnij aktualizację swojemu programowi",
+      "cancel": "Anuluj",
+      "pinned": "Przypięty",
+      "delete_feed_title": "Usuń wpis",
+      "delete_feed_description": "Czy na pewno chcesz usunąć ten post?",
+      "confirm_delete": "Usuń",
+      "user_avatar_alt": "Awatar użytkownika",
+      "comments": {
+        "comment": "komentarz",
+        "showing_of": "Wyświetlanie {pokazane} z {total}",
+        "hide": "Ukryj komentarze",
+        "placeholder": "Dodaj komentarz do programu",
+        "submit_aria": "Prześlij komentarz",
+        "delete": "Usuń"
+      },
+      "card": {
+        "pin": "Przypnij",
+        "unpin": "Odepnij",
+        "edit": "Edytuj",
+        "delete": "Usuń"
+      }
+    },
+    "create_modal": {
+      "title": "Utwórz program",
+      "description": "Dodaj nowy program certyfikacji lub zgodności.",
+      "name_label": "Imię",
+      "name_placeholder": "np. Certyfikat bezpieczeństwa OSHA",
+      "description_label": "Opis",
+      "description_placeholder": "O czym jest ten program?",
+      "submit": "Utwórz"
+    },
+    "sidebar": {
+      "newsfeed": "Kanał informacyjny",
+      "courses": "Kursy",
+      "people": "Ludzie",
+      "settings": "Ustawienia"
+    },
+    "status": {
+      "active": "Aktywny",
+      "inactive": "Nieaktywny",
+      "archived": "Zarchiwizowane"
+    },
+    "description": "Daj grupie osób dostęp do wielu kursów, np. zajęć",
+    "search_placeholder": "Wyszukaj programy",
+    "multiple_added": "Dodano kursy",
+    "no_matching_programs": "Żaden program nie pasuje do Twoich filtrów.",
+    "card": {
+      "courses": "Kursy",
+      "students": "Studenci"
+    },
+    "table": {
+      "name": "Imię",
+      "courses": "Kursy",
+      "students": "Studenci",
+      "status": "Stan",
+      "description": "Opis"
+    },
+    "filters": {
+      "filter": "Filtruj",
+      "clear_all": "Wyczyść wszystko",
+      "popover_title": "Filtry",
+      "sort": "Sortuj",
+      "order": "Zamów",
+      "status": "Stan",
+      "ascending": "rosnąco",
+      "descending": "Opis",
+      "sort_name": "Imię",
+      "sort_courses": "Kursy",
+      "sort_students": "Studenci",
+      "sort_status": "Stan"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index f951b2fe..d8964b5a 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -364,6 +364,32 @@
       "created": "Chave de automação criada. Salve agora porque o segredo completo só é mostrado uma vez.",
       "rotated": "Chave de automação girada. Salve o novo segredo agora porque ele não será mostrado novamente.",
       "revoked": "Chave de automação revogada."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Ocorreu um erro ao reagir à postagem",
+        "news_feed_fail": "Falha ao buscar feed de notícias do programa",
+        "post_create_failed": "Falha ao criar postagem",
+        "post_update_failed": "Falha ao atualizar a postagem",
+        "code": {
+          "program_forbidden": "Você deve ser membro deste programa para executar esta ação.",
+          "program_member_check_failed": "Não foi possível verificar sua associação ao programa. Tente novamente.",
+          "program_not_found": "Este programa não foi encontrado.",
+          "program_create_failed": "Não foi possível criar o programa.",
+          "program_update_failed": "Não foi possível atualizar o programa.",
+          "program_delete_failed": "Não foi possível excluir o programa.",
+          "program_member_not_found": "Esse membro do programa não foi encontrado.",
+          "program_newsfeed_not_found": "Essa postagem não foi encontrada.",
+          "program_newsfeed_comment_not_found": "Esse comentário não foi encontrado."
+        }
+      },
+      "success": {
+        "comment_deleted": "Comentário excluído",
+        "comment_added": "Comentário adicionado",
+        "feed_delete_success": "Postagem excluída com sucesso",
+        "post_created": "Postagem criada com sucesso",
+        "post_updated": "Postagem atualizada com sucesso"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Comunidade",
     "explore": "Explorar",
     "help": "Ajuda",
-    "settings": "Configurações"
+    "settings": "Configurações",
+    "programs": "Programas"
   },
   "upgrade": {
     "certificate": "Atualize seu plano para gerar certificados",
@@ -517,12 +544,23 @@
       "all_courses": "Todos os cursos",
       "select_courses": "Selecione cursos específicos",
       "select_courses_placeholder": "Escolha cursos...",
+      "program_access": "Acesso ao programa",
+      "no_programs": "Sem atribuição de programa",
+      "all_programs": "Todos os programas",
+      "select_programs": "Selecione programas específicos",
+      "select_programs_placeholder": "Escolha programas...",
       "send_email": "Enviar e-mail de convite para usuários importados",
       "submit": "Importar usuários",
       "back": "Voltar ao público",
       "snackbar_success": "{imported} novos convites, {assigned} estudantes existentes com acesso ao curso, {pendingInvitesRenewed} convites pendentes renovados ({emailsSent} e-mails enviados)",
       "snackbar_no_emails": "Insira pelo menos um endereço de e-mail",
-      "snackbar_failed": "Falha ao importar usuários"
+      "snackbar_failed": "Falha ao importar usuários",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Editar",
       "cancel": "Cancelar",
       "give": "Dê uma resposta",
-      "comment": "Comentário"
+      "comment": "Comentário",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Correspondência",
                 "ordering": "Pedido",
                 "hotspot": "Ponto de acesso",
-                "link": "Ligações"
+                "link": "Ligações",
+                "word_bank": "Banco de palavras",
+                "star": "Classificação por estrelas"
               },
               "select_type": "Selecione o tipo",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Correto",
                 "not_set": "Não definido",
                 "incorrect_badge": "Incorreto"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Suas respostas",
+                  "correct_label": "Respostas corretas"
+                },
+                "preview": {
+                  "filled_label": "Respostas esperadas no contexto"
+                },
+                "take": {
+                  "helper": "Clique em uma palavra para colocá-la no primeiro espaço em branco ou arraste-a para um espaço em branco. Clique em um espaço preenchido para devolver a palavra ao banco.",
+                  "bank_heading": "Banco de palavras",
+                  "clear_blank_sr": "Remover palavra do espaço em branco"
+                },
+                "edit": {
+                  "template_label": "Modelo de frase",
+                  "template_placeholder": "As medidas para descrever nossos dados são chamadas ___. O ___ é uma função...",
+                  "template_helper": "Use três sublinhados (___) para cada espaço em branco. Os alunos verão um banco de palavras com respostas corretas e distratores.",
+                  "no_blanks_warning": "Adicione pelo menos um ___ marcador em branco ao seu modelo.",
+                  "correct_answers_heading": "Resposta correta para cada espaço em branco",
+                  "blank_label": "Em branco",
+                  "correct_placeholder": "Termo ou frase correta",
+                  "distractors_heading": "Palavras extras (distratores)",
+                  "distractor_placeholder": "Opção errada",
+                  "add_distractor": "Adicionar distrator"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Resposta correta"
+                },
+                "take": {
+                  "helper": "Selecione sua classificação.",
+                  "star_sr": "Estrela '{'n'}' de '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Valor correto da estrela",
+                  "correct_value_info": "Os alunos da contagem de estrelas devem selecionar para ganhar pontos completos.",
+                  "max_stars_label": "Máximo de estrelas",
+                  "max_stars_info": "Quantas estrelas os alunos veem (1–10). O padrão é 5.",
+                  "correct_value_placeholder": "por exemplo 3",
+                  "max_stars_placeholder": "por exemplo 5"
+                }
               }
             },
             "settings": "Configurações",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Cancelar upload",
                 "upload_cancelled": "Upload cancelado pelo usuário",
                 "max_files": "{count, plural, one {Você pode fazer upload de # arquivo} other {Você pode fazer upload de # arquivos}}",
-                "max_files_and_size": "(até {tamanho} cada)"
+                "max_files_and_size": "(até {tamanho} cada)",
+                "google_drive_choose": "Escolha no Google Drive",
+                "google_drive_opening": "Abrindo seletor…",
+                "google_drive_hint": "Escolha um vídeo da sua conta do Google. Qualquer pessoa que esteja visualizando a lição precisa de acesso. Defina o compartilhamento no Drive como “Qualquer pessoa com o link pode visualizar” (ou equivalente na sua organização).",
+                "google_drive_not_configured": "A importação do Google Drive não está configurada para esta implantação. Adicione PUBLIC_GOOGLE_PICKER_CLIENT_ID e PUBLIC_GOOGLE_PICKER_API_KEY ao seu ambiente.",
+                "google_drive_error": "Não foi possível abrir o Google Drive. Verifique se seu navegador permite pop-ups e se o Google Picker está configurado corretamente."
               },
               "empty_title": "Ainda não há vídeos",
-              "empty_description": "Adicione vídeos do YouTube, upload ou sua biblioteca de mídia"
+              "empty_description": "Adicione vídeos do YouTube, upload ou sua biblioteca de mídia",
+              "google_drive": "Google Drive"
             },
             "slide": {
               "title": "Deslizar",
@@ -1697,6 +1791,7 @@
       "empty_description": "Compartilhe seu conhecimento com o mundo criando cursos envolventes para seus alunos.",
       "error_message": "Ocorreu um erro.",
       "lessons_number": "lições",
+      "exercise": "exercício",
       "students": "estudantes",
       "published": "Publicado",
       "unpublished": "Não publicado",
@@ -1716,7 +1811,8 @@
         "clone": "Clonar",
         "share": "Compartilhar",
         "invite": "Convidar",
-        "delete": "Excluir"
+        "delete": "Excluir",
+        "open": "Abrir"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Etiquetas",
       "empty_tags": "Nenhuma tag disponível"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Ajude-me a escrever",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Hoje é mais um dia para aproximar você de seus objetivos de aprendizagem. Não desista, quanto mais você aprende melhor você fica.",
     "lessons_completed": "Lições concluídas",
     "no_courses_started": "Nenhum curso iniciado",
-    "revenue": "Receita",
-    "revenue_description": "Receita aproximada obtida com vendas de cursos",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Número de cursos",
     "no_courses_description": "Cursos criados nesta organização",
     "total_students": "Total de alunos",
@@ -1819,7 +1921,8 @@
           "banner_text": "Texto do banner",
           "banner_text_label": "Atualizar texto do banner",
           "banner_text_placeholder": "Escreva o texto aqui"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Domínio personalizado",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Adicione os registros DNS abaixo e atualize a verificação.",
         "pending_verification_description": "Registros DNS foram encontrados. A emissão ou validação de SSL ainda está em andamento.",
         "reconnect_description": "Este domínio precisa ser conectado novamente por meio do novo fluxo de configuração da Cloudflare.",
-        "error_description": "Este domínio personalizado existe, mas a verificação ainda não foi concluída."
+        "error_description": "Este domínio personalizado existe, mas a verificação ainda não foi concluída.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Plataforma",
+    "home": "Início",
+    "content": "Conteúdo",
+    "people": "Pessoas",
     "dashboard": "Painel",
     "courses": "Cursos",
     "community": "Comunidade",
@@ -1989,7 +2096,8 @@
     "unlock": "Desbloqueie recursos ilimitados e invista em nosso futuro",
     "upgrade": "Atualize agora",
     "tags": "Etiquetas",
-    "automation": "Automação"
+    "automation": "Automação",
+    "programs": "Programas"
   },
   "media_manager": {
     "page_title": "Gerenciador de mídia - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Carregar",
       "youtube": "YouTube",
       "generic": "Genérico",
-      "external_url": "URL externo"
+      "external_url": "URL externo",
+      "google_drive": "Google Drive"
     },
     "kind": {
       "video": "Vídeo",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "N/A"
     },
-    "empty_description": "O ativo não existe ou não está disponível nesta organização."
+    "empty_description": "O ativo não existe ou não está disponível nesta organização.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Configurações",
@@ -2107,7 +2217,8 @@
       "active": "Você não tem nenhum faturamento ativo",
       "provider": "Usamos a Polar para ajudar a gerenciar seu faturamento",
       "open_billing": "Faturamento aberto",
-      "error": "Ocorreu um erro ao abrir o faturamento"
+      "error": "Ocorreu um erro ao abrir o faturamento",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Telegrama",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Passo 2: Insira o ID de bate-papo fornecido pelo bot.",
       "connect_button": "Conectar",
       "success_message": "Integração bem-sucedida",
-      "disconnect": "Desconectar"
+      "disconnect": "Desconectar",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Página inicial",
@@ -2212,6 +2324,99 @@
         "title": "Imagem de fundo",
         "show_background": "Mostrar plano de fundo",
         "hide_background": "Ocultar plano de fundo"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Salvar",
+        "close": "Fechar",
+        "page_builder": "Construtor de páginas",
+        "footer": {
+          "text": "Texto do rodapé",
+          "add": "Adicionar link de rodapé",
+          "default_label": "Novo link",
+          "link_label": "Etiqueta do link",
+          "link_href": "URL do link",
+          "remove": "Remover link do rodapé"
+        },
+        "embed": {
+          "toggle": "Mostrar seção de incorporação",
+          "title": "Título da seção",
+          "title_placeholder": "Título da seção",
+          "description": "Descrição",
+          "description_placeholder": "Descrição opcional",
+          "code": "Incorporar código",
+          "code_placeholder": "Cole o código de incorporação aqui",
+          "code_description": "Cole o snippet de incorporação completo ou o código iframe.",
+          "secondary_label": "Etiqueta do botão secundário",
+          "secondary_href": "Link do botão secundário"
+        },
+        "callout": {
+          "toggle": "Mostrar seção de frase de destaque",
+          "heading": "Título",
+          "heading_default": "Pronto para começar a aprender?",
+          "heading_placeholder": "Insira um título",
+          "description": "Descrição",
+          "description_placeholder": "Adicione uma breve descrição ou deixe em branco",
+          "action_label": "Etiqueta do botão",
+          "action_label_default": "Comece",
+          "action_label_placeholder": "Texto do botão",
+          "action_href": "Link do botão",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Adicionar link de navegação",
+          "default_label": "Novo link",
+          "link_label": "Etiqueta do link",
+          "link_href": "URL do link",
+          "remove": "Remover link de navegação"
+        },
+        "hero": {
+          "heading": "Título",
+          "subheading": "Subtítulo",
+          "primary_label": "Etiqueta do botão principal",
+          "primary_href": "Link do botão principal",
+          "secondary_toggle": "Mostrar ação secundária",
+          "secondary_label": "Etiqueta do botão secundário",
+          "secondary_href": "Link do botão secundário",
+          "image": "Imagem do herói",
+          "upload": "Carregar imagem",
+          "clear": "Limpar imagem"
+        },
+        "sections": {
+          "hero": "Herói",
+          "hero_desc": "Título, botões de ação e imagem principal.",
+          "navigation": "Navegação",
+          "navigation_desc": "Links mostrados no cabeçalho da página de destino.",
+          "callout": "Chamada",
+          "callout_desc": "Banner promocional opcional exibido após os cursos.",
+          "embed": "Incorporar",
+          "embed_desc": "Seção iframe opcional mostrada após os cursos.",
+          "footer": "Rodapé",
+          "footer_desc": "Texto e links do rodapé."
+        }
+      },
+      "content": {
+        "heading": "Editar conteúdo",
+        "description": "Atualize o herói, a navegação, a incorporação e o rodapé que aparecem em cada tema.",
+        "edit": "Editar conteúdo"
+      },
+      "theme": {
+        "heading": "Escolha um tema",
+        "description": "Escolha o estilo visual que os visitantes veem em sua landing page pública.",
+        "cards": {
+          "classic": {
+            "title": "Clássico",
+            "description": "Layout tradicional com hierarquia equilibrada"
+          },
+          "bold": {
+            "title": "Ousado",
+            "description": "Alto contraste, editorial e marcante"
+          },
+          "minimal": {
+            "title": "Mínimo",
+            "description": "Limpo, brilhante e focado no curso"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Tema personalizado",
           "add_theme": "Adicionar tema"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Perfil",
@@ -2266,7 +2472,8 @@
         "file_size": "Tamanho máximo do arquivo:",
         "accepted": "Aceito:",
         "validation_error": "O tamanho do arquivo excede o limite máximo:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Perfil",
@@ -2386,7 +2593,8 @@
         "general": "Geral",
         "sso": "SSO",
         "token_auth": "Autenticação de token"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Autenticação de token",
@@ -2407,6 +2615,9 @@
       "integration_description": "Assine um JWT com o segredo e redirecione os usuários para o URL de troca de token.",
       "no_config": "Nenhuma autenticação de token configurada. Gere um segredo de assinatura para começar.",
       "actions_menu": "Ações de autenticação de token"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Pesquisar"
-    }
+    },
+    "cancel": "Cancelar"
   },
   "welcome_modal": {
     "we_at": "Nós em",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "N/A"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Limites de taxa",
         "rate_limits_description": "Solicitações de leitura/gravação/publicação permitidas por minuto.",
         "used_label": "Usado:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Ativo",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Acesso somente leitura",
       "disabled_description": "Somente administradores da organização podem criar, alternar ou revogar chaves de automação. Os professores podem revisar as instruções de configuração aqui."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Programas",
+    "page_title": "Programas",
+    "create": "Novo programa",
+    "create_success": "Programa criado",
+    "update_success": "Programa atualizado",
+    "delete_success": "Programa excluído",
+    "members_added": "Membros adicionados",
+    "member_removed": "Membro removido",
+    "course_added": "Curso adicionado",
+    "course_removed": "Curso removido",
+    "empty_title": "Ainda não há programas",
+    "empty_description": "Crie seu primeiro programa de certificação ou conformidade.",
+    "settings": {
+      "general": "Geral",
+      "name_label": "Nome",
+      "description_label": "Descrição",
+      "status_label": "Estado",
+      "save": "Salvar alterações",
+      "danger_zone": "Zona de perigo",
+      "delete": "Excluir programa",
+      "delete_description": "Uma vez excluído, este programa e todos os seus dados não poderão ser recuperados.",
+      "confirm_delete": "Tem certeza de que deseja excluir este programa? Isto não pode ser desfeito."
+    },
+    "lms": {
+      "empty_title": "Ainda não há programas",
+      "empty_description": "Você não está inscrito em nenhum programa."
+    },
+    "people": {
+      "invite": "Convidar",
+      "invite_modal_title": "Convidar membros",
+      "invite_modal_description": "Adicione pessoas a este programa por e-mail.",
+      "email_label": "E-mail",
+      "role_label": "Função",
+      "add_another": "Adicionar outro",
+      "invite_submit": "Enviar convites",
+      "empty_title": "Ainda não há membros",
+      "empty_description": "Convide pessoas para participar deste programa."
+    },
+    "courses": {
+      "add": "Adicionar curso",
+      "add_modal_title": "Adicionar curso ao programa",
+      "select_course": "Selecione um curso",
+      "select_placeholder": "Escolha um curso…",
+      "empty_title": "Ainda não há cursos",
+      "empty_description": "Adicione cursos a este programa.",
+      "select_courses": "Selecione os cursos",
+      "search_placeholder": "Pesquisar cursos",
+      "no_available_courses": "Não há cursos disponíveis para adicionar.",
+      "no_matching_courses": "Nenhum curso corresponde à sua pesquisa.",
+      "no_matching_program_courses": "Nenhum curso do programa corresponde à sua pesquisa.",
+      "pagination_status": "Página {página} de {totalPages}",
+      "published_access_callout_title": "Acesso de estudante",
+      "published_access_callout_description": "Os alunos só têm acesso aos cursos publicados. Os cursos podem estar neste programa para sua equipe enquanto ainda não foram publicados, enquanto permanecem ocultos aos alunos até que você os publique."
+    },
+    "newsfeed": {
+      "post": "Nova postagem",
+      "post_placeholder": "O que você está pensando?",
+      "post_submit": "Postar",
+      "empty_title": "Nenhuma postagem ainda",
+      "empty_description": "Seja o primeiro a postar algo.",
+      "heading": "Feed de notícias",
+      "make_a_post": "Faça uma postagem",
+      "edit_post": "Editar postagem",
+      "editor_placeholder": "Compartilhe uma atualização com seu programa",
+      "cancel": "Cancelar",
+      "pinned": "Fixado",
+      "delete_feed_title": "Excluir postagem",
+      "delete_feed_description": "Tem certeza de que deseja excluir esta postagem?",
+      "confirm_delete": "Excluir",
+      "user_avatar_alt": "Avatar do usuário",
+      "comments": {
+        "comment": "comentar",
+        "showing_of": "Exibindo {mostrado} de {total}",
+        "hide": "Ocultar comentários",
+        "placeholder": "Adicionar comentário do programa",
+        "submit_aria": "Enviar comentário",
+        "delete": "Excluir"
+      },
+      "card": {
+        "pin": "Fixar",
+        "unpin": "Liberar",
+        "edit": "Editar",
+        "delete": "Excluir"
+      }
+    },
+    "create_modal": {
+      "title": "Criar programa",
+      "description": "Adicione um novo programa de certificação ou conformidade.",
+      "name_label": "Nome",
+      "name_placeholder": "por exemplo Certificação de Segurança OSHA",
+      "description_label": "Descrição",
+      "description_placeholder": "Sobre o que é este programa?",
+      "submit": "Criar"
+    },
+    "sidebar": {
+      "newsfeed": "Feed de notícias",
+      "courses": "Cursos",
+      "people": "Pessoas",
+      "settings": "Configurações"
+    },
+    "status": {
+      "active": "Ativo",
+      "inactive": "Inativo",
+      "archived": "Arquivado"
+    },
+    "description": "Conceda a um grupo de pessoas acesso a vários cursos, como uma aula",
+    "search_placeholder": "Programas de pesquisa",
+    "multiple_added": "Cursos adicionados",
+    "no_matching_programs": "Nenhum programa corresponde aos seus filtros.",
+    "card": {
+      "courses": "Cursos",
+      "students": "Alunos"
+    },
+    "table": {
+      "name": "Nome",
+      "courses": "Cursos",
+      "students": "Alunos",
+      "status": "Estado",
+      "description": "Descrição"
+    },
+    "filters": {
+      "filter": "Filtro",
+      "clear_all": "Limpar tudo",
+      "popover_title": "Filtros",
+      "sort": "Classificar",
+      "order": "Pedido",
+      "status": "Estado",
+      "ascending": "Asc",
+      "descending": "Descrição",
+      "sort_name": "Nome",
+      "sort_courses": "Cursos",
+      "sort_students": "Alunos",
+      "sort_status": "Estado"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index bdf48fb8..fc0a7063 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -364,6 +364,32 @@
       "created": "Ключ автоматизации создан. Сохраните его сейчас, потому что полный секрет отображается только один раз.",
       "rotated": "Ключ автоматики повернут. Сохраните новый секрет сейчас, потому что он больше не будет отображаться.",
       "revoked": "Ключ автоматизации отозван."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Произошла ошибка при реакции на сообщение",
+        "news_feed_fail": "Не удалось получить ленту новостей программы.",
+        "post_create_failed": "Не удалось создать публикацию",
+        "post_update_failed": "Не удалось обновить публикацию",
+        "code": {
+          "program_forbidden": "Для выполнения этого действия вы должны быть участником этой программы.",
+          "program_member_check_failed": "Нам не удалось подтвердить ваше участие в программе. Попробуйте еще раз.",
+          "program_not_found": "Эту программу не удалось найти.",
+          "program_create_failed": "Не удалось создать программу.",
+          "program_update_failed": "Не удалось обновить программу.",
+          "program_delete_failed": "Не удалось удалить программу.",
+          "program_member_not_found": "Этот участник программы не найден.",
+          "program_newsfeed_not_found": "Этот пост не найден.",
+          "program_newsfeed_comment_not_found": "Этот комментарий не найден."
+        }
+      },
+      "success": {
+        "comment_deleted": "Комментарий удален",
+        "comment_added": "Комментарий добавлен",
+        "feed_delete_success": "Сообщение успешно удалено",
+        "post_created": "Сообщение успешно создано",
+        "post_updated": "Сообщение успешно обновлено"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "Сообщество",
     "explore": "Исследуйте",
     "help": "Помощь",
-    "settings": "Настройки"
+    "settings": "Настройки",
+    "programs": "Программы"
   },
   "upgrade": {
     "certificate": "Обновите свой план для создания сертификатов",
@@ -517,12 +544,23 @@
       "all_courses": "Все курсы",
       "select_courses": "Выберите конкретные курсы",
       "select_courses_placeholder": "Выбирайте курсы...",
+      "program_access": "Доступ к программам",
+      "no_programs": "Без назначения программы",
+      "all_programs": "Все программы",
+      "select_programs": "Выберите конкретные программы",
+      "select_programs_placeholder": "Выберите программы...",
       "send_email": "Отправить электронное письмо с приглашением импортированным пользователям",
       "submit": "Импортировать пользователей",
       "back": "Вернуться к аудитории",
       "snackbar_success": "{imported} новых приглашений, {assigned} существующих студентов с доступом к курсу, {pendingInvitesRenewed} обновлённых ожидающих приглашений (отправлено писем: {emailsSent})",
       "snackbar_no_emails": "Пожалуйста, введите хотя бы один адрес электронной почты",
-      "snackbar_failed": "Не удалось импортировать пользователей."
+      "snackbar_failed": "Не удалось импортировать пользователей.",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Редактировать",
       "cancel": "Отмена",
       "give": "Дайте ответ",
-      "comment": "Комментарий"
+      "comment": "Комментарий",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Соответствие",
                 "ordering": "Заказ",
                 "hotspot": "Точка доступа",
-                "link": "Ссылки"
+                "link": "Ссылки",
+                "word_bank": "Банк слов",
+                "star": "Звездный рейтинг"
               },
               "select_type": "Выберите тип",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Правильно",
                 "not_set": "Не установлено",
                 "incorrect_badge": "Неправильный"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Ваши ответы",
+                  "correct_label": "Правильные ответы"
+                },
+                "preview": {
+                  "filled_label": "Ожидаемые ответы в контексте"
+                },
+                "take": {
+                  "helper": "Щелкните слово, чтобы поместить его в первый пустой пробел, или перетащите его на пустой пробел. Нажмите на заполненный пробел, чтобы вернуть слово в банк.",
+                  "bank_heading": "Банк слов",
+                  "clear_blank_sr": "Удалить слово из пустого места"
+                },
+                "edit": {
+                  "template_label": "Шаблон предложения",
+                  "template_placeholder": "Измерения для описания наших данных называются ___. ___ - это функция...",
+                  "template_helper": "Используйте три подчеркивания (___) для каждого пробела. Учащиеся увидят банк слов с правильными ответами и отвлекающими факторами.",
+                  "no_blanks_warning": "Добавьте в шаблон хотя бы один пустой маркер ___.",
+                  "correct_answers_heading": "Правильный ответ на каждый пропуск",
+                  "blank_label": "Пустой",
+                  "correct_placeholder": "Правильный термин или фраза",
+                  "distractors_heading": "Лишние слова (отвлекающие слова)",
+                  "distractor_placeholder": "Неправильный вариант",
+                  "add_distractor": "Добавить отвлекающий фактор"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Правильный ответ"
+                },
+                "take": {
+                  "helper": "Выберите свой рейтинг.",
+                  "star_sr": "Звезда '{'n'}' из '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Правильное значение звезды",
+                  "correct_value_info": "Учащиеся со звездным подсчетом должны выбрать, чтобы заработать полные баллы.",
+                  "max_stars_label": "Максимум звезд",
+                  "max_stars_info": "Сколько звезд видят учащиеся (1–10). По умолчанию — 5.",
+                  "correct_value_placeholder": "например 3",
+                  "max_stars_placeholder": "например 5"
+                }
               }
             },
             "settings": "Настройки",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Отменить загрузку",
                 "upload_cancelled": "Загрузка отменена пользователем",
                 "max_files": "{count, множественное число, one {Вы можете загрузить # файл} Other {Вы можете загрузить # файла}}",
-                "max_files_and_size": "(до {size} каждый)"
+                "max_files_and_size": "(до {size} каждый)",
+                "google_drive_choose": "Выберите на Google Диске",
+                "google_drive_opening": "Открытие выбора…",
+                "google_drive_hint": "Выберите видео из своей учетной записи Google. Всем, кто просматривает урок, необходим доступ. Установите для общего доступа на Диске значение «Все, у кого есть ссылка, могут просматривать» (или его эквивалент в вашей организации).",
+                "google_drive_not_configured": "Импорт с Google Диска не настроен для этого развертывания. Добавьте PUBLIC_GOOGLE_PICKER_CLIENT_ID и PUBLIC_GOOGLE_PICKER_API_KEY в свою среду.",
+                "google_drive_error": "Не удалось открыть Google Диск. Убедитесь, что в вашем браузере разрешены всплывающие окна и что Google Picker настроен правильно."
               },
               "empty_title": "Видео пока нет",
-              "empty_description": "Добавляйте видео с YouTube, загружайте их или из своей медиатеки."
+              "empty_description": "Добавляйте видео с YouTube, загружайте их или из своей медиатеки.",
+              "google_drive": "Гугл Диск"
             },
             "slide": {
               "title": "Слайд",
@@ -1697,6 +1791,7 @@
       "empty_description": "Поделитесь своими знаниями со всем миром, создавая увлекательные курсы для своих учеников.",
       "error_message": "Произошла ошибка.",
       "lessons_number": "уроки",
+      "exercise": "упражнение",
       "students": "студенты",
       "published": "Опубликовано",
       "unpublished": "Неопубликовано",
@@ -1716,7 +1811,8 @@
         "clone": "Клонировать",
         "share": "Поделиться",
         "invite": "Пригласить",
-        "delete": "Удалить"
+        "delete": "Удалить",
+        "open": "Открыть"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Теги",
       "empty_tags": "Нет доступных тегов"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Помогите мне написать",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Сегодня еще один день, который приблизит вас к вашим целям обучения. Не сдавайтесь, чем больше вы узнаете, тем лучше у вас получится.",
     "lessons_completed": "Уроки завершены",
     "no_courses_started": "Курсы не начались",
-    "revenue": "Доход",
-    "revenue_description": "Примерный доход от продажи курсов",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Количество курсов",
     "no_courses_description": "Курсы, созданные в этой организации",
     "total_students": "Всего студентов",
@@ -1819,7 +1921,8 @@
           "banner_text": "Текст баннера",
           "banner_text_label": "Обновить текст баннера",
           "banner_text_placeholder": "Напишите текст здесь"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Пользовательский домен",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Добавьте записи DNS ниже, затем обновите проверку.",
         "pending_verification_description": "DNS-записи были найдены. Выдача или проверка SSL все еще продолжается.",
         "reconnect_description": "Этот домен необходимо снова подключить с помощью нового процесса настройки Cloudflare.",
-        "error_description": "Этот личный домен существует, но проверка еще не завершена."
+        "error_description": "Этот личный домен существует, но проверка еще не завершена.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Платформа",
+    "home": "Главная",
+    "content": "Контент",
+    "people": "Люди",
     "dashboard": "Панель управления",
     "courses": "Курсы",
     "community": "Сообщество",
@@ -1989,7 +2096,8 @@
     "unlock": "Разблокируйте неограниченные возможности и инвестируйте в наше будущее",
     "upgrade": "Обновите сейчас",
     "tags": "Теги",
-    "automation": "Автоматизация"
+    "automation": "Автоматизация",
+    "programs": "Программы"
   },
   "media_manager": {
     "page_title": "Медиа-менеджер — ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Загрузить",
       "youtube": "Ютуб",
       "generic": "Общий",
-      "external_url": "Внешний URL-адрес"
+      "external_url": "Внешний URL-адрес",
+      "google_drive": "Гугл Диск"
     },
     "kind": {
       "video": "Видео",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "Н/Д"
     },
-    "empty_description": "Актив не существует или недоступен в этой организации."
+    "empty_description": "Актив не существует или недоступен в этой организации.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Настройки",
@@ -2107,7 +2217,8 @@
       "active": "У вас нет активных платежных данных.",
       "provider": "Мы используем Polar, чтобы управлять вашими платежами.",
       "open_billing": "Открыть биллинг",
-      "error": "Произошла ошибка при открытии счета."
+      "error": "Произошла ошибка при открытии счета.",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "Телеграмма",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Шаг 2. Введите идентификатор чата, предоставленный вам ботом.",
       "connect_button": "Подключиться",
       "success_message": "Интеграция прошла успешно",
-      "disconnect": "Отключить"
+      "disconnect": "Отключить",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Целевая страница",
@@ -2212,6 +2324,99 @@
         "title": "Фоновое изображение",
         "show_background": "Показать фон",
         "hide_background": "Скрыть фон"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Сохранить",
+        "close": "Закрыть",
+        "page_builder": "Конструктор страниц",
+        "footer": {
+          "text": "Текст нижнего колонтитула",
+          "add": "Добавить ссылку в нижнем колонтитуле",
+          "default_label": "Новая ссылка",
+          "link_label": "Ярлык ссылки",
+          "link_href": "URL-адрес ссылки",
+          "remove": "Удалить ссылку в нижнем колонтитуле"
+        },
+        "embed": {
+          "toggle": "Показать раздел для встраивания",
+          "title": "Название раздела",
+          "title_placeholder": "Название раздела",
+          "description": "Описание",
+          "description_placeholder": "Дополнительное описание",
+          "code": "Встроить код",
+          "code_placeholder": "Вставьте сюда код для вставки",
+          "code_description": "Вставьте полный фрагмент кода для встраивания или код iframe.",
+          "secondary_label": "Метка вторичной кнопки",
+          "secondary_href": "Ссылка на дополнительную кнопку"
+        },
+        "callout": {
+          "toggle": "Показать раздел уточнений",
+          "heading": "Заголовок",
+          "heading_default": "Готовы начать обучение?",
+          "heading_placeholder": "Введите заголовок",
+          "description": "Описание",
+          "description_placeholder": "Добавьте краткое описание или оставьте пустым",
+          "action_label": "Метка кнопки",
+          "action_label_default": "Начать",
+          "action_label_placeholder": "Текст кнопки",
+          "action_href": "Ссылка на кнопку",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Добавить навигационную ссылку",
+          "default_label": "Новая ссылка",
+          "link_label": "Ярлык ссылки",
+          "link_href": "URL-адрес ссылки",
+          "remove": "Удалить навигационную ссылку"
+        },
+        "hero": {
+          "heading": "Заголовок",
+          "subheading": "Подзаголовок",
+          "primary_label": "Метка основной кнопки",
+          "primary_href": "Ссылка на основную кнопку",
+          "secondary_toggle": "Показать дополнительное действие",
+          "secondary_label": "Метка вторичной кнопки",
+          "secondary_href": "Ссылка на дополнительную кнопку",
+          "image": "Изображение героя",
+          "upload": "Загрузить изображение",
+          "clear": "Очистить изображение"
+        },
+        "sections": {
+          "hero": "Герой",
+          "hero_desc": "Заголовок, кнопки действий и главное изображение.",
+          "navigation": "Навигация",
+          "navigation_desc": "Ссылки показаны в заголовке целевой страницы.",
+          "callout": "Выноска",
+          "callout_desc": "Дополнительный рекламный баннер, демонстрируемый после курсов.",
+          "embed": "Встроить",
+          "embed_desc": "Дополнительный раздел iframe, отображаемый после курсов.",
+          "footer": "Нижний колонтитул",
+          "footer_desc": "Текст нижнего колонтитула и ссылки."
+        }
+      },
+      "content": {
+        "heading": "Редактировать контент",
+        "description": "Обновите главный герой, навигацию, встраивание и нижний колонтитул, которые появляются в каждой теме.",
+        "edit": "Редактировать контент"
+      },
+      "theme": {
+        "heading": "Выберите тему",
+        "description": "Выберите визуальный стиль, который посетители увидят на вашей общедоступной целевой странице.",
+        "cards": {
+          "classic": {
+            "title": "Классический",
+            "description": "Традиционная планировка со сбалансированной иерархией"
+          },
+          "bold": {
+            "title": "Жирный",
+            "description": "Высокая контрастность, редакционный и яркий дизайн"
+          },
+          "minimal": {
+            "title": "Минимальный",
+            "description": "Чистый, яркий и ориентированный на курс"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Пользовательская тема",
           "add_theme": "Добавить тему"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Профиль",
@@ -2266,7 +2472,8 @@
         "file_size": "Максимальный размер файла:",
         "accepted": "Принято:",
         "validation_error": "Размер файла превышает максимальный предел:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Профиль",
@@ -2386,7 +2593,8 @@
         "general": "Общий",
         "sso": "система единого входа",
         "token_auth": "Токен аутентификации"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Токен аутентификации",
@@ -2407,6 +2615,9 @@
       "integration_description": "Подпишите JWT с секретом и перенаправьте пользователей на URL-адрес обмена токенами.",
       "no_config": "Авторизация по токену не настроена. Для начала создайте секрет подписи.",
       "actions_menu": "Действия по авторизации токена"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Поиск"
-    }
+    },
+    "cancel": "Отмена"
   },
   "welcome_modal": {
     "we_at": "Мы в",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "Н/Д"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Ограничения ставок",
         "rate_limits_description": "Запросы на чтение/запись/публикацию разрешены в минуту.",
         "used_label": "Использовано:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Активный",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Доступ только для чтения",
       "disabled_description": "Только администраторы организации могут создавать, менять или отзывать ключи автоматизации. Учителя могут ознакомиться с инструкциями по настройке здесь."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Программы",
+    "page_title": "Программы",
+    "create": "Новая программа",
+    "create_success": "Программа создана",
+    "update_success": "Программа обновлена",
+    "delete_success": "Программа удалена",
+    "members_added": "Добавлены участники",
+    "member_removed": "Участник удален",
+    "course_added": "Курс добавлен",
+    "course_removed": "Курс удален.",
+    "empty_title": "Пока нет программ",
+    "empty_description": "Создайте свою первую программу сертификации или соответствия требованиям.",
+    "settings": {
+      "general": "Общий",
+      "name_label": "Имя",
+      "description_label": "Описание",
+      "status_label": "Статус",
+      "save": "Сохранить изменения",
+      "danger_zone": "Опасная зона",
+      "delete": "Удалить программу",
+      "delete_description": "После удаления эту программу и все ее данные невозможно восстановить.",
+      "confirm_delete": "Вы уверены, что хотите удалить эту программу? Это невозможно отменить."
+    },
+    "lms": {
+      "empty_title": "Пока нет программ",
+      "empty_description": "Вы не были зарегистрированы ни в одной программе."
+    },
+    "people": {
+      "invite": "Пригласить",
+      "invite_modal_title": "Пригласить участников",
+      "invite_modal_description": "Добавляйте людей в эту программу по электронной почте.",
+      "email_label": "электронная почта",
+      "role_label": "Роль",
+      "add_another": "Добавить еще",
+      "invite_submit": "Отправить приглашения",
+      "empty_title": "Пока нет участников",
+      "empty_description": "Пригласите людей присоединиться к этой программе."
+    },
+    "courses": {
+      "add": "Добавить курс",
+      "add_modal_title": "Добавить курс в программу",
+      "select_course": "Выберите курс",
+      "select_placeholder": "Выбрать курс…",
+      "empty_title": "Курсов пока нет",
+      "empty_description": "Добавьте курсы в эту программу.",
+      "select_courses": "Выберите курсы",
+      "search_placeholder": "Поиск курсов",
+      "no_available_courses": "Нет доступных курсов для добавления.",
+      "no_matching_courses": "Нет курсов, соответствующих вашему запросу.",
+      "no_matching_program_courses": "Никакие курсы программы не соответствуют вашему запросу.",
+      "pagination_status": "Страница {page} из {totalPages}",
+      "published_access_callout_title": "Доступ для студентов",
+      "published_access_callout_description": "Студенты имеют доступ только к опубликованным курсам. Курсы могут быть включены в эту программу для вашей команды, будучи еще неопубликованными, и оставаться скрытыми от учащихся, пока вы их не опубликуете."
+    },
+    "newsfeed": {
+      "post": "Новое сообщение",
+      "post_placeholder": "Что у тебя на уме?",
+      "post_submit": "Сообщение",
+      "empty_title": "Пока нет сообщений",
+      "empty_description": "Будьте первым, кто опубликует что-либо.",
+      "heading": "Лента новостей",
+      "make_a_post": "Сделать публикацию",
+      "edit_post": "Редактировать сообщение",
+      "editor_placeholder": "Поделитесь обновлением своей программы",
+      "cancel": "Отмена",
+      "pinned": "Закреплено",
+      "delete_feed_title": "Удалить сообщение",
+      "delete_feed_description": "Вы уверены, что хотите удалить этот пост?",
+      "confirm_delete": "Удалить",
+      "user_avatar_alt": "Аватар пользователя",
+      "comments": {
+        "comment": "комментарий",
+        "showing_of": "Показаны {показано} из {всего}",
+        "hide": "Скрыть комментарии",
+        "placeholder": "Добавить комментарий к программе",
+        "submit_aria": "Отправить комментарий",
+        "delete": "Удалить"
+      },
+      "card": {
+        "pin": "Пин-код",
+        "unpin": "Открепить",
+        "edit": "Редактировать",
+        "delete": "Удалить"
+      }
+    },
+    "create_modal": {
+      "title": "Создать программу",
+      "description": "Добавьте новую программу сертификации или соответствия.",
+      "name_label": "Имя",
+      "name_placeholder": "например Сертификация безопасности OSHA",
+      "description_label": "Описание",
+      "description_placeholder": "О чем эта программа?",
+      "submit": "Создать"
+    },
+    "sidebar": {
+      "newsfeed": "Лента новостей",
+      "courses": "Курсы",
+      "people": "Люди",
+      "settings": "Настройки"
+    },
+    "status": {
+      "active": "Активный",
+      "inactive": "Неактивный",
+      "archived": "В архиве"
+    },
+    "description": "Предоставьте группе людей доступ к нескольким курсам, например к классу.",
+    "search_placeholder": "Поиск программ",
+    "multiple_added": "Курсы добавлены",
+    "no_matching_programs": "Ни одна программа не соответствует вашим фильтрам.",
+    "card": {
+      "courses": "Курсы",
+      "students": "Студенты"
+    },
+    "table": {
+      "name": "Имя",
+      "courses": "Курсы",
+      "students": "Студенты",
+      "status": "Статус",
+      "description": "Описание"
+    },
+    "filters": {
+      "filter": "Фильтр",
+      "clear_all": "Очистить все",
+      "popover_title": "Фильтры",
+      "sort": "Сортировать",
+      "order": "Заказать",
+      "status": "Статус",
+      "ascending": "по возрастанию",
+      "descending": "Описание",
+      "sort_name": "Имя",
+      "sort_courses": "Курсы",
+      "sort_students": "Студенты",
+      "sort_status": "Статус"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index 30a46d53..fdefb198 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -364,6 +364,32 @@
       "created": "Đã tạo khóa tự động hóa. Hãy lưu lại ngay vì bí mật đầy đủ chỉ được hiển thị một lần.",
       "rotated": "Phím tự động đã được xoay. Hãy lưu lại bí mật mới ngay bây giờ vì nó sẽ không được hiển thị lại.",
       "revoked": "Khóa tự động hóa đã bị thu hồi."
+    },
+    "program": {
+      "error": {
+        "reaction_error": "Đã xảy ra lỗi khi phản hồi bài viết",
+        "news_feed_fail": "Không thể tìm nạp nguồn cấp tin tức của chương trình",
+        "post_create_failed": "Không tạo được bài đăng",
+        "post_update_failed": "Không thể cập nhật bài đăng",
+        "code": {
+          "program_forbidden": "Bạn phải là thành viên của chương trình này để thực hiện hành động này.",
+          "program_member_check_failed": "Chúng tôi không thể xác minh tư cách thành viên chương trình của bạn. Hãy thử lại.",
+          "program_not_found": "Chương trình này không thể được tìm thấy.",
+          "program_create_failed": "Không thể tạo chương trình.",
+          "program_update_failed": "Không thể cập nhật chương trình.",
+          "program_delete_failed": "Không thể xóa chương trình.",
+          "program_member_not_found": "Không thể tìm thấy thành viên chương trình đó.",
+          "program_newsfeed_not_found": "Không thể tìm thấy bài đăng đó.",
+          "program_newsfeed_comment_not_found": "Bình luận đó không thể được tìm thấy."
+        }
+      },
+      "success": {
+        "comment_deleted": "Đã xóa bình luận",
+        "comment_added": "Đã thêm nhận xét",
+        "feed_delete_success": "Đã xóa bài đăng thành công",
+        "post_created": "Bài viết được tạo thành công",
+        "post_updated": "Đã cập nhật bài đăng thành công"
+      }
     }
   },
   "explore": {
@@ -396,7 +422,8 @@
     "community": "cộng đồng",
     "explore": "Khám phá",
     "help": "Trợ giúp",
-    "settings": "Cài đặt"
+    "settings": "Cài đặt",
+    "programs": "Chương trình"
   },
   "upgrade": {
     "certificate": "Nâng cấp gói của bạn để tạo chứng chỉ",
@@ -517,12 +544,23 @@
       "all_courses": "Tất cả các khóa học",
       "select_courses": "Chọn các khóa học cụ thể",
       "select_courses_placeholder": "Chọn khóa học...",
+      "program_access": "Quyền truy cập chương trình",
+      "no_programs": "Không gán chương trình",
+      "all_programs": "Tất cả chương trình",
+      "select_programs": "Chọn các chương trình cụ thể",
+      "select_programs_placeholder": "Chọn chương trình...",
       "send_email": "Gửi email lời mời tới người dùng đã nhập",
       "submit": "Nhập người dùng",
       "back": "Quay lại Đối tượng",
       "snackbar_success": "{imported} lời mời mới, {assigned} học viên hiện có được quyền truy cập khóa học, {pendingInvitesRenewed} lời mời đang chờ được gia hạn ({emailsSent} email đã gửi)",
       "snackbar_no_emails": "Vui lòng nhập ít nhất một địa chỉ email",
-      "snackbar_failed": "Không thể nhập người dùng"
+      "snackbar_failed": "Không thể nhập người dùng",
+      "page_subtitle": "Add many people at once by email, then assign courses or programs if you like."
+    },
+    "page_subtitle": "See who belongs to your org, who is learning, who is invited, and how to reach them.",
+    "user_analytics": {
+      "title": "Learner profile",
+      "page_subtitle": "Progress, grades, and activity across their courses."
     }
   },
   "community": {
@@ -554,7 +592,12 @@
       "edit": "Chỉnh sửa",
       "cancel": "Hủy bỏ",
       "give": "Đưa ra câu trả lời",
-      "comment": "Bình luận"
+      "comment": "Bình luận",
+      "page_subtitle": "Start a thread the whole community can see, and tie it to a course if you want."
+    },
+    "page_subtitle": "Questions and answers shared across your organization's courses.",
+    "question": {
+      "page_subtitle": "Follow answers, vote, and join the discussion."
     }
   },
   "course": {
@@ -1146,7 +1189,9 @@
                 "matching": "Kết hợp",
                 "ordering": "Đặt hàng",
                 "hotspot": "Điểm phát sóng",
-                "link": "Liên kết"
+                "link": "Liên kết",
+                "word_bank": "Ngân hàng từ",
+                "star": "Xếp hạng sao"
               },
               "select_type": "Chọn loại",
               "question_type_auto_gradable": "Auto",
@@ -1374,6 +1419,49 @@
                 "correct_badge": "Đúng",
                 "not_set": "Chưa đặt",
                 "incorrect_badge": "sai"
+              },
+              "word_bank": {
+                "review": {
+                  "your_answer_label": "Câu trả lời của bạn",
+                  "correct_label": "Câu trả lời đúng"
+                },
+                "preview": {
+                  "filled_label": "Câu trả lời mong đợi trong bối cảnh"
+                },
+                "take": {
+                  "helper": "Bấm vào một từ để đặt nó vào ô trống đầu tiên hoặc kéo nó vào chỗ trống. Bấm vào chỗ trống đã điền để trả từ về ngân hàng.",
+                  "bank_heading": "Ngân hàng từ",
+                  "clear_blank_sr": "Xóa từ khỏi chỗ trống"
+                },
+                "edit": {
+                  "template_label": "Mẫu câu",
+                  "template_placeholder": "Các phép đo để mô tả dữ liệu của chúng tôi được gọi là ___. ___ là một hàm...",
+                  "template_helper": "Sử dụng ba dấu gạch dưới (___) cho mỗi chỗ trống. Người học sẽ thấy một ngân hàng từ có câu trả lời đúng và các từ gây phân tâm.",
+                  "no_blanks_warning": "Thêm ít nhất một điểm đánh dấu trống ___ vào mẫu của bạn.",
+                  "correct_answers_heading": "Câu trả lời đúng cho mỗi chỗ trống",
+                  "blank_label": "trống",
+                  "correct_placeholder": "Thuật ngữ hoặc cụm từ đúng",
+                  "distractors_heading": "Những từ bổ sung (làm mất tập trung)",
+                  "distractor_placeholder": "Lựa chọn sai",
+                  "add_distractor": "Thêm yếu tố phân tâm"
+                }
+              },
+              "star": {
+                "preview": {
+                  "correct_label": "Câu trả lời đúng"
+                },
+                "take": {
+                  "helper": "Chọn đánh giá của bạn.",
+                  "star_sr": "Sao '{'n'}' của '{'max'}'"
+                },
+                "edit": {
+                  "correct_value_label": "Giá trị sao chính xác",
+                  "correct_value_info": "Người học đếm sao phải chọn để đạt được điểm tối đa.",
+                  "max_stars_label": "Số sao tối đa",
+                  "max_stars_info": "Người học nhìn thấy bao nhiêu ngôi sao (1–10). Mặc định là 5.",
+                  "correct_value_placeholder": "ví dụ: 3",
+                  "max_stars_placeholder": "ví dụ: 5"
+                }
               }
             },
             "settings": "Cài đặt",
@@ -1498,10 +1586,16 @@
                 "cancel_upload": "Hủy tải lên",
                 "upload_cancelled": "Tải lên bị người dùng hủy",
                 "max_files": "{đếm, số nhiều, một {Bạn có thể tải lên # tệp} khác {Bạn có thể tải lên # tệp}}",
-                "max_files_and_size": "(tối đa {size} mỗi cái)"
+                "max_files_and_size": "(tối đa {size} mỗi cái)",
+                "google_drive_choose": "Chọn từ Google Drive",
+                "google_drive_opening": "Đang mở bộ chọn…",
+                "google_drive_hint": "Chọn một video từ tài khoản Google của bạn. Bất kỳ ai xem bài học đều cần có quyền truy cập—đặt tính năng chia sẻ trong Drive thành “Bất kỳ ai có liên kết đều có thể xem” (hoặc tổ chức tương đương của bạn).",
+                "google_drive_not_configured": "Tính năng nhập vào Google Drive chưa được thiết lập cho hoạt động triển khai này. Thêm PUBLIC_GOOGLE_PICKER_CLIENT_ID và PUBLIC_GOOGLE_PICKER_API_KEY vào môi trường của bạn.",
+                "google_drive_error": "Không thể mở Google Drive. Kiểm tra xem trình duyệt của bạn có cho phép cửa sổ bật lên không và Google Picker có được định cấu hình chính xác hay không."
               },
               "empty_title": "Chưa có video nào",
-              "empty_description": "Thêm video từ YouTube, tải lên hoặc thư viện phương tiện của bạn"
+              "empty_description": "Thêm video từ YouTube, tải lên hoặc thư viện phương tiện của bạn",
+              "google_drive": "Google Drive"
             },
             "slide": {
               "title": "Trượt",
@@ -1697,6 +1791,7 @@
       "empty_description": "Chia sẻ kiến thức của bạn với thế giới bằng cách tạo các khóa học hấp dẫn cho sinh viên của bạn.",
       "error_message": "Đã xảy ra lỗi.",
       "lessons_number": "bài học",
+      "exercise": "bài tập",
       "students": "sinh viên",
       "published": "Đã xuất bản",
       "unpublished": "Chưa được xuất bản",
@@ -1716,7 +1811,8 @@
         "clone": "bản sao",
         "share": "Chia sẻ",
         "invite": "Mời",
-        "delete": "Xóa"
+        "delete": "Xóa",
+        "open": "Mở"
       }
     },
     "course_filter": {
@@ -1741,7 +1837,8 @@
       "descending": "Desc",
       "tags": "Thẻ",
       "empty_tags": "Không có thẻ nào"
-    }
+    },
+    "page_subtitle": "Where lessons turn into courses and courses turn into enrollments."
   },
   "ai": {
     "help_me": "Giúp tôi viết",
@@ -1768,8 +1865,13 @@
     "lms_dashboard_hero": "Hôm nay là một ngày khác để đưa bạn đến gần hơn với mục tiêu học tập của mình. Đừng bỏ cuộc, bạn càng học nhiều thì bạn càng tiến bộ hơn.",
     "lessons_completed": "Bài học đã hoàn thành",
     "no_courses_started": "Không có khóa học nào bắt đầu",
-    "revenue": "Doanh thu",
-    "revenue_description": "Doanh thu ước tính từ việc bán khóa học",
+    "certificates_earned": "Certificates earned",
+    "certificates_earned_description": "Total certificates issued to students in your organization",
+    "certification_rate": "certification rate",
+    "recent_certifications": "Recent certifications",
+    "no_certifications_yet": "No certificates earned yet",
+    "no_certifications_yet_description": "When students complete a course and earn a certificate, they will appear here",
+    "view_courses": "View courses",
     "no_of_courses": "Số lượng khóa học",
     "no_courses_description": "Các khóa học được tạo trong tổ chức này",
     "total_students": "Tổng số học sinh",
@@ -1819,7 +1921,8 @@
           "banner_text": "Văn bản biểu ngữ",
           "banner_text_label": "Cập nhật văn bản biểu ngữ",
           "banner_text_placeholder": "Viết văn bản ở đây"
-        }
+        },
+        "page_subtitle": "Choose which tabs, banners, course tools, and extras learners see."
       },
       "domains": {
         "title": "Miền tùy chỉnh",
@@ -1853,7 +1956,8 @@
         "pending_dns_description": "Thêm bản ghi DNS bên dưới, sau đó làm mới xác minh.",
         "pending_verification_description": "Bản ghi DNS đã được tìm thấy. Việc cấp hoặc xác thực SSL vẫn đang được tiến hành.",
         "reconnect_description": "Miền này cần được kết nối lại thông qua quy trình thiết lập Cloudflare mới.",
-        "error_description": "Miền tùy chỉnh này tồn tại nhưng quá trình xác minh chưa hoàn tất."
+        "error_description": "Miền tùy chỉnh này tồn tại nhưng quá trình xác minh chưa hoàn tất.",
+        "page_subtitle": "Run your public learning site on a web address you own."
       }
     },
     "quiz": {
@@ -1977,6 +2081,9 @@
   },
   "org_navigation": {
     "platform": "Nền tảng",
+    "home": "Trang chủ",
+    "content": "Nội dung",
+    "people": "Mọi người",
     "dashboard": "Trang tổng quan",
     "courses": "Khóa học",
     "community": "cộng đồng",
@@ -1989,7 +2096,8 @@
     "unlock": "Mở khóa các tính năng không giới hạn và đầu tư vào tương lai của chúng tôi",
     "upgrade": "Nâng cấp ngay",
     "tags": "Thẻ",
-    "automation": "Tự động hóa"
+    "automation": "Tự động hóa",
+    "programs": "Chương trình"
   },
   "media_manager": {
     "page_title": "Quản lý truyền thông - ClassroomIO",
@@ -2061,7 +2169,8 @@
       "upload": "Tải lên",
       "youtube": "YouTube",
       "generic": "Chung",
-      "external_url": "URL bên ngoài"
+      "external_url": "URL bên ngoài",
+      "google_drive": "Google Drive"
     },
     "kind": {
       "video": "Video",
@@ -2097,7 +2206,8 @@
     "common": {
       "not_available": "không áp dụng"
     },
-    "empty_description": "Tài sản không tồn tại hoặc không có sẵn trong tổ chức này."
+    "empty_description": "Tài sản không tồn tại hoặc không có sẵn trong tổ chức này.",
+    "page_subtitle": "Keep files, videos, and links for your courses in one library."
   },
   "settings": {
     "heading": "Cài đặt",
@@ -2107,7 +2217,8 @@
       "active": "Bạn không có bất kỳ thanh toán nào đang hoạt động",
       "provider": "Chúng tôi sử dụng Polar để giúp quản lý việc thanh toán của bạn",
       "open_billing": "Thanh toán mở",
-      "error": "Đã xảy ra lỗi khi mở thanh toán"
+      "error": "Đã xảy ra lỗi khi mở thanh toán",
+      "page_subtitle": "Your plan, billing portal, and how you pay for ClassroomIO."
     },
     "integrations": {
       "heading": "điện tín",
@@ -2117,7 +2228,8 @@
       "step_chatId": "Bước 2: Nhập ID trò chuyện được bot cung cấp cho bạn.",
       "connect_button": "Kết nối",
       "success_message": "Tích hợp thành công",
-      "disconnect": "Ngắt kết nối"
+      "disconnect": "Ngắt kết nối",
+      "page_subtitle": "Connect Telegram to get notified when important things happen."
     },
     "landing_page": {
       "heading": "Trang đích",
@@ -2212,6 +2324,99 @@
         "title": "Hình nền",
         "show_background": "Hiển thị nền",
         "hide_background": "Ẩn nền"
+      },
+      "page_subtitle": "Shape the marketing page people see before they sign up or enroll.",
+      "editor": {
+        "save": "Lưu",
+        "close": "Đóng",
+        "page_builder": "Trình tạo trang",
+        "footer": {
+          "text": "Văn bản chân trang",
+          "add": "Thêm liên kết chân trang",
+          "default_label": "Liên kết mới",
+          "link_label": "Nhãn liên kết",
+          "link_href": "URL liên kết",
+          "remove": "Xóa liên kết chân trang"
+        },
+        "embed": {
+          "toggle": "Hiển thị phần nhúng",
+          "title": "Tiêu đề phần",
+          "title_placeholder": "Tiêu đề phần",
+          "description": "Mô tả",
+          "description_placeholder": "Mô tả tùy chọn",
+          "code": "Nhúng mã",
+          "code_placeholder": "Dán mã nhúng vào đây",
+          "code_description": "Dán đoạn mã nhúng hoặc mã iframe đầy đủ.",
+          "secondary_label": "Nhãn nút phụ",
+          "secondary_href": "Liên kết nút phụ"
+        },
+        "callout": {
+          "toggle": "Hiển thị phần chú thích",
+          "heading": "tiêu đề",
+          "heading_default": "Sẵn sàng để bắt đầu học?",
+          "heading_placeholder": "Nhập một tiêu đề",
+          "description": "Mô tả",
+          "description_placeholder": "Thêm mô tả ngắn hoặc để trống",
+          "action_label": "Nhãn nút",
+          "action_label_default": "Bắt đầu",
+          "action_label_placeholder": "Văn bản nút",
+          "action_href": "Liên kết nút",
+          "action_href_placeholder": "https://..."
+        },
+        "navigation": {
+          "add": "Thêm liên kết điều hướng",
+          "default_label": "Liên kết mới",
+          "link_label": "Nhãn liên kết",
+          "link_href": "URL liên kết",
+          "remove": "Xóa liên kết điều hướng"
+        },
+        "hero": {
+          "heading": "tiêu đề",
+          "subheading": "Tiêu đề phụ",
+          "primary_label": "Nhãn nút chính",
+          "primary_href": "Liên kết nút chính",
+          "secondary_toggle": "Hiển thị hành động phụ",
+          "secondary_label": "Nhãn nút phụ",
+          "secondary_href": "Liên kết nút phụ",
+          "image": "Hình ảnh anh hùng",
+          "upload": "Tải hình ảnh lên",
+          "clear": "Xóa hình ảnh"
+        },
+        "sections": {
+          "hero": "anh hùng",
+          "hero_desc": "Dòng tiêu đề, nút hành động và hình ảnh chính.",
+          "navigation": "Điều hướng",
+          "navigation_desc": "Các liên kết được hiển thị trong tiêu đề trang đích.",
+          "callout": "Chú thích",
+          "callout_desc": "Biểu ngữ quảng cáo tùy chọn hiển thị sau các khóa học.",
+          "embed": "Nhúng",
+          "embed_desc": "Phần iframe tùy chọn hiển thị sau các khóa học.",
+          "footer": "Chân trang",
+          "footer_desc": "Văn bản chân trang và các liên kết."
+        }
+      },
+      "content": {
+        "heading": "Chỉnh sửa nội dung",
+        "description": "Cập nhật phần chính, điều hướng, nhúng và chân trang xuất hiện trong mọi chủ đề.",
+        "edit": "Chỉnh sửa nội dung"
+      },
+      "theme": {
+        "heading": "Chọn một chủ đề",
+        "description": "Chọn phong cách trực quan mà khách truy cập nhìn thấy trên trang đích công khai của bạn.",
+        "cards": {
+          "classic": {
+            "title": "cổ điển",
+            "description": "Bố cục truyền thống với hệ thống phân cấp cân bằng"
+          },
+          "bold": {
+            "title": "Đậm",
+            "description": "Độ tương phản cao, biên tập và nổi bật"
+          },
+          "minimal": {
+            "title": "Tối thiểu",
+            "description": "Sạch sẽ, sáng sủa và tập trung vào khóa học"
+          }
+        }
       }
     },
     "organization": {
@@ -2244,7 +2449,8 @@
           "custom_theme": "Chủ đề tùy chỉnh",
           "add_theme": "Thêm chủ đề"
         }
-      }
+      },
+      "page_subtitle": "Set the name, logo, and theme learners see for this organization."
     },
     "profile": {
       "heading": "Hồ sơ",
@@ -2266,7 +2472,8 @@
         "file_size": "Kích thước tệp tối đa:",
         "accepted": "Đã chấp nhận:",
         "validation_error": "Kích thước tệp vượt quá giới hạn tối đa:"
-      }
+      },
+      "page_subtitle": "Your name, email, and how you appear wherever you work in ClassroomIO."
     },
     "tabs": {
       "profile_tab": "Hồ sơ",
@@ -2386,7 +2593,8 @@
         "general": "chung",
         "sso": "SSO",
         "token_auth": "Xác thực mã thông báo"
-      }
+      },
+      "page_subtitle": "Control sign-up, login, SSO, and token-based access for this org."
     },
     "token_auth": {
       "heading": "Xác thực mã thông báo",
@@ -2407,6 +2615,9 @@
       "integration_description": "Ký JWT bằng bí mật và chuyển hướng người dùng đến URL trao đổi mã thông báo.",
       "no_config": "Không có cấu hình xác thực mã thông báo. Tạo bí mật ký để bắt đầu.",
       "actions_menu": "Hành động xác thực mã thông báo"
+    },
+    "teams": {
+      "page_subtitle": "Invite teammates and control who helps run this organization."
     }
   },
   "profileMenu": {
@@ -2457,7 +2668,8 @@
   "app": {
     "search": {
       "placeholder": "Tìm kiếm"
-    }
+    },
+    "cancel": "Hủy bỏ"
   },
   "welcome_modal": {
     "we_at": "Chúng tôi ở",
@@ -2611,7 +2823,8 @@
     },
     "common": {
       "not_available": "không áp dụng"
-    }
+    },
+    "page_subtitle": "Organize courses with labels so filters and lists stay easy to scan."
   },
   "invite": {
     "organization": {
@@ -2671,7 +2884,28 @@
         "rate_limits_title": "Giới hạn tỷ lệ",
         "rate_limits_description": "Yêu cầu đọc/ghi/xuất bản được phép mỗi phút.",
         "used_label": "Đã sử dụng:"
-      }
+      },
+      "page_subtitle": "Connect AI tools to ClassroomIO with org-scoped keys you can rotate anytime."
+    },
+    "api": {
+      "subtitle": "Manage API keys to integrate with the ClassroomIO public API.",
+      "keys": {
+        "title": "API keys",
+        "description": "These keys authenticate the current organization when calling the ClassroomIO public API.",
+        "generate": "Generate API key",
+        "secret_once": "This secret is shown once. Copy it and store it securely.",
+        "empty_title": "No API keys yet",
+        "empty_description": "Create the first org-scoped API key to use the ClassroomIO public API.",
+        "modal": {
+          "title": "Create API key",
+          "description": "Choose a name for this API key before it is generated.",
+          "name_label": "Key name",
+          "name_placeholder": "My API integration",
+          "cancel": "Cancel",
+          "save": "Create key"
+        }
+      },
+      "view_docs": "View Docs"
     },
     "keys": {
       "active": "Đang hoạt động",
@@ -2705,6 +2939,145 @@
     "permissions": {
       "disabled_title": "Quyền truy cập chỉ đọc",
       "disabled_description": "Chỉ quản trị viên tổ chức mới có thể tạo, xoay hoặc thu hồi khóa tự động hóa. Thầy cô có thể xem lại hướng dẫn thiết lập tại đây."
+    },
+    "zapier": {
+      "page_subtitle": "Automate ClassroomIO with thousands of apps through Zapier. Coming soon."
+    }
+  },
+  "programs": {
+    "heading": "Chương trình",
+    "page_title": "Chương trình",
+    "create": "Chương trình mới",
+    "create_success": "Đã tạo chương trình",
+    "update_success": "Đã cập nhật chương trình",
+    "delete_success": "Chương trình đã bị xóa",
+    "members_added": "Đã thêm thành viên",
+    "member_removed": "Thành viên đã bị xóa",
+    "course_added": "Đã thêm khóa học",
+    "course_removed": "Đã xóa khóa học",
+    "empty_title": "Chưa có chương trình nào",
+    "empty_description": "Tạo chương trình chứng nhận hoặc tuân thủ đầu tiên của bạn.",
+    "settings": {
+      "general": "chung",
+      "name_label": "Tên",
+      "description_label": "Mô tả",
+      "status_label": "Trạng thái",
+      "save": "Lưu thay đổi",
+      "danger_zone": "Vùng nguy hiểm",
+      "delete": "Xóa chương trình",
+      "delete_description": "Sau khi xóa, chương trình này và tất cả dữ liệu của nó sẽ không thể phục hồi được.",
+      "confirm_delete": "Bạn có chắc chắn muốn xóa chương trình này? Điều này không thể hoàn tác được."
+    },
+    "lms": {
+      "empty_title": "Chưa có chương trình nào",
+      "empty_description": "Bạn chưa được ghi danh vào bất kỳ chương trình nào."
+    },
+    "people": {
+      "invite": "Mời",
+      "invite_modal_title": "Mời thành viên",
+      "invite_modal_description": "Thêm người vào chương trình này qua email.",
+      "email_label": "Email",
+      "role_label": "Vai trò",
+      "add_another": "Thêm cái khác",
+      "invite_submit": "Gửi lời mời",
+      "empty_title": "Chưa có thành viên nào",
+      "empty_description": "Mời mọi người tham gia chương trình này."
+    },
+    "courses": {
+      "add": "Thêm khóa học",
+      "add_modal_title": "Thêm khóa học vào chương trình",
+      "select_course": "Chọn một khóa học",
+      "select_placeholder": "Chọn một khóa học…",
+      "empty_title": "Chưa có khóa học nào",
+      "empty_description": "Thêm các khóa học vào chương trình này.",
+      "select_courses": "Chọn khóa học",
+      "search_placeholder": "Tìm kiếm khóa học",
+      "no_available_courses": "Không có khóa học có sẵn để thêm.",
+      "no_matching_courses": "Không có khóa học phù hợp với tìm kiếm của bạn.",
+      "no_matching_program_courses": "Không có chương trình khóa học phù hợp với tìm kiếm của bạn.",
+      "pagination_status": "Trang {trang} trong tổng số {totalPages}",
+      "published_access_callout_title": "Quyền truy cập của sinh viên",
+      "published_access_callout_description": "Sinh viên chỉ có quyền truy cập vào các khóa học được xuất bản. Các khóa học có thể có trong chương trình này cho nhóm của bạn trong khi vẫn chưa được xuất bản và các khóa học đó sẽ bị ẩn với sinh viên cho đến khi bạn xuất bản chúng."
+    },
+    "newsfeed": {
+      "post": "Bài đăng mới",
+      "post_placeholder": "Bạn đang nghĩ gì thế?",
+      "post_submit": "bài đăng",
+      "empty_title": "Chưa có bài viết nào",
+      "empty_description": "Hãy là người đầu tiên đăng một cái gì đó.",
+      "heading": "Nguồn cấp tin tức",
+      "make_a_post": "Tạo một bài đăng",
+      "edit_post": "Chỉnh sửa bài đăng",
+      "editor_placeholder": "Chia sẻ bản cập nhật với chương trình của bạn",
+      "cancel": "Hủy bỏ",
+      "pinned": "Đã ghim",
+      "delete_feed_title": "Xóa bài đăng",
+      "delete_feed_description": "Bạn có chắc chắn muốn xóa bài đăng này?",
+      "confirm_delete": "Xóa",
+      "user_avatar_alt": "Hình đại diện của người dùng",
+      "comments": {
+        "comment": "bình luận",
+        "showing_of": "Đang hiển thị {được hiển thị} trong tổng số {toàn bộ}",
+        "hide": "Ẩn bình luận",
+        "placeholder": "Thêm bình luận chương trình",
+        "submit_aria": "Gửi bình luận",
+        "delete": "Xóa"
+      },
+      "card": {
+        "pin": "Ghim",
+        "unpin": "Bỏ ghim",
+        "edit": "Chỉnh sửa",
+        "delete": "Xóa"
+      }
+    },
+    "create_modal": {
+      "title": "Tạo chương trình",
+      "description": "Thêm một chương trình chứng nhận hoặc tuân thủ mới.",
+      "name_label": "Tên",
+      "name_placeholder": "ví dụ: Chứng nhận an toàn OSHA",
+      "description_label": "Mô tả",
+      "description_placeholder": "Chương trình này nói về cái gì?",
+      "submit": "Tạo"
+    },
+    "sidebar": {
+      "newsfeed": "Nguồn cấp tin tức",
+      "courses": "Khóa học",
+      "people": "mọi người",
+      "settings": "Cài đặt"
+    },
+    "status": {
+      "active": "Đang hoạt động",
+      "inactive": "Không hoạt động",
+      "archived": "Đã lưu trữ"
+    },
+    "description": "Cấp cho một nhóm người quyền truy cập vào nhiều khóa học, chẳng hạn như một lớp học",
+    "search_placeholder": "Tìm kiếm chương trình",
+    "multiple_added": "Đã thêm khóa học",
+    "no_matching_programs": "Không có chương trình nào phù hợp với bộ lọc của bạn.",
+    "card": {
+      "courses": "Khóa học",
+      "students": "Sinh viên"
+    },
+    "table": {
+      "name": "Tên",
+      "courses": "Khóa học",
+      "students": "Sinh viên",
+      "status": "Trạng thái",
+      "description": "Mô tả"
+    },
+    "filters": {
+      "filter": "Lọc",
+      "clear_all": "Xóa tất cả",
+      "popover_title": "Bộ lọc",
+      "sort": "Sắp xếp",
+      "order": "Đặt hàng",
+      "status": "Trạng thái",
+      "ascending": "tăng dần",
+      "descending": "mô tả",
+      "sort_name": "Tên",
+      "sort_courses": "Khóa học",
+      "sort_students": "Sinh viên",
+      "sort_status": "Trạng thái"
     }
   }
 }
diff --git a/apps/dashboard/src/lib/utils/types/org.ts b/apps/dashboard/src/lib/utils/types/org.ts
index ed92a150..9b82c41e 100644
--- a/apps/dashboard/src/lib/utils/types/org.ts
+++ b/apps/dashboard/src/lib/utils/types/org.ts
@@ -1,77 +1,56 @@
+export type OrgLandingPageTheme = 'minimal' | 'bold' | 'classic';
+
+export interface OrgLandingPageNavItem {
+  label: string;
+  href: string;
+}
+
+export interface OrgLandingPageFooterLink {
+  label: string;
+  href: string;
+}
+
+export interface OrgLandingPageEmbed {
+  title: string;
+  description?: string;
+  code: string;
+  secondaryAction?: {
+    label: string;
+    href: string;
+  };
+}
+
+export interface OrgLandingPageCallout {
+  heading: string;
+  description: string;
+  action: {
+    label: string;
+    href: string;
+  };
+}
+
+export interface OrgLandingPageHero {
+  heading: string;
+  subheading: string;
+  primaryAction: {
+    label: string;
+    href: string;
+  };
+  secondaryAction?: {
+    label: string;
+    href: string;
+  };
+  image?: string;
+}
+
 export interface OrgLandingPageJson {
-  header: {
-    title: string;
-    titleHighlight: string;
-    subtitle: string;
-    action: {
-      label: string;
-      link: string;
-      redirect: boolean;
-    };
-    banner: {
-      video: string;
-      image: string;
-      type: string;
-      show: boolean;
-    };
-    background: {
-      image: string;
-      show: boolean;
-    };
-    show: boolean;
-  };
-  aboutUs: {
-    title: string;
-    content: string;
-    imageUrl: string;
-    show: boolean;
-  };
-  courses: {
-    title: string;
-    titleHighlight: string;
-    subtitle: string;
-    show: boolean;
-  };
-  faq: {
-    title: string;
-    questions: Array<{
-      id: number;
-      title: string;
-      content: string;
-    }>;
-    show: boolean;
-  };
-  contact: {
-    title: string;
-    titleHighlight: string;
-    subtitle: string;
-    address: string;
-    phone: string;
-    email: string;
-    show: boolean;
-  };
-  mailinglist: {
-    title: string;
-    subtitle: string;
-    buttonLabel: string;
-    show: boolean;
-  };
-  customLinks: {
-    show: boolean;
-    links: Array<{
-      id: number;
-      label: string;
-      url: string;
-      openInNewTab: boolean;
-    }>;
-  };
-  footer: {
-    facebook: string;
-    instagram: string;
-    twitter: string;
-    linkedin: string;
-    show: boolean;
-  };
+  theme: OrgLandingPageTheme;
+  hero: OrgLandingPageHero;
+  navItems: OrgLandingPageNavItem[];
+  footerLinks: OrgLandingPageFooterLink[];
+  footerText: string;
+  embed?: OrgLandingPageEmbed;
+  callout?: OrgLandingPageCallout;
 }
 
 export interface OrgTeamMember {
@@ -92,35 +71,6 @@ export interface OrgAudience {
   date_joined: string;
 }
 
-export type DomainVerificationStatusProps =
-  | 'Valid Configuration'
-  | 'Invalid Configuration'
-  | 'Pending Verification'
-  | 'Domain Not Found'
-  | 'Unknown Error';
-
-// From https://vercel.com/docs/rest-api/endpoints#get-a-project-domain
-export interface DomainResponse {
-  name: string;
-  apexName: string;
-  projectId: string;
-  redirect?: string | null;
-  redirectStatusCode?: (307 | 301 | 302 | 308) | null;
-  gitBranch?: string | null;
-  updatedAt?: number;
-  createdAt?: number;
-  /** `true` if the domain is verified for use with the project. If `false` it will not be used as an alias on this project until the challenge in `verification` is completed. */
-  verified: boolean;
-  /** A list of verification challenges, one of which must be completed to verify the domain for use on the project. After the challenge is complete `POST /projects/:idOrName/domains/:domain/verify` to verify the domain. Possible challenges: - If `verification.type = TXT` the `verification.domain` will be checked for a TXT record matching `verification.value`. */
-  verification: {
-    type: string;
-    domain: string;
-    value: string;
-    reason: string;
-  }[];
-}
-
-// From https://vercel.com/docs/rest-api/endpoints#get-a-domain-s-configuration
 export interface DomainConfigResponse {
   /** How we see the domain's configuration. - `CNAME`: Domain has a CNAME pointing to Vercel. - `A`: Domain's A record is resolving to Vercel. - `http`: Domain is resolving to Vercel but may be behind a Proxy. - `null`: Domain is not resolving to Vercel. */
   configuredBy?: ('CNAME' | 'A' | 'http') | null;
diff --git a/apps/dashboard/src/routes/(app)/+layout.svelte b/apps/dashboard/src/routes/(app)/+layout.svelte
new file mode 100644
index 00000000..416745aa
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/+layout.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import { UpgradeModal, PageLoadProgress, PageRestricted } from '$features/ui';
+  import { user } from '$lib/utils/store/user';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { setupCloudAnalytics } from '$lib/utils/functions/appSetup';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg, isOrgStudent } from '$lib/utils/store/org';
+  import { appInitApi } from '$features/app/init.svelte';
+  import { onMount } from 'svelte';
+  import { authClient } from '$lib/utils/services/auth/client';
+  import { isPublicRoute } from '$lib/utils/functions/routes/isPublicRoute';
+  import { env } from '$env/dynamic/public';
+
+  interface Props {
+    children?: import('svelte').Snippet;
+    data: {
+      isOrgSite: boolean;
+      orgSiteName: string;
+      org: import('$features/app/types').AccountOrg | null;
+      skipAuth: boolean;
+      locals: App.Locals;
+    };
+  }
+
+  let { children, data }: Props = $props();
+
+  let path = $derived(page.url.pathname);
+
+  function intialAppSetup() {
+    setupCloudAnalytics();
+
+    if (data?.locals?.user) {
+      user.set({
+        ...$user,
+        isLoggedIn: true,
+        currentSession: data.locals.user
+      });
+    }
+
+    if (!data.isOrgSite || !data.org) return;
+
+    $globalStore.orgSiteName = data.orgSiteName || '';
+    $globalStore.isOrgSite = data.isOrgSite;
+
+    currentOrg.set(data.org);
+
+    const theme = data.org?.theme;
+    setTheme(theme || 'blue');
+  }
+
+  onMount(() => {
+    const loadingIndicator = document.getElementById('app-loading-indicator');
+    if (loadingIndicator) {
+      loadingIndicator.style.display = 'none';
+    }
+
+    intialAppSetup();
+
+    if (data.skipAuth) return;
+  });
+
+  const session = authClient.useSession();
+  const isSessionReady = $derived(!$session.isPending && !$session.isRefetching && $session.data);
+
+  $effect(() => {
+    if ($session.isPending || $session.isRefetching || !!$session.data) {
+      return;
+    }
+
+    if (isPublicRoute(path) && (path !== '/' || data.isOrgSite)) {
+      return;
+    }
+
+    if (!$session.data && !path.startsWith('/login')) {
+      console.log('session data is not available, go to login');
+      window.location.href = '/login';
+    }
+  });
+
+  $effect(() => {
+    if (!data?.locals?.fromSessions && isSessionReady) {
+      authClient.getSession().then(() => {
+        console.log('triggered new session');
+      });
+    }
+  });
+
+  $effect(() => {
+    console.log('env public server url', env.PUBLIC_SERVER_URL);
+    console.log('env public is selfhosted', env.PUBLIC_IS_SELFHOSTED);
+    if (isSessionReady && !appInitApi.isInitializedAndReady && !appInitApi.loading) {
+      appInitApi.setupApp($session.data as App.Locals, {
+        isOrgSite: data.isOrgSite,
+        orgSiteName: data.orgSiteName
+      });
+    }
+  });
+
+  $effect(() => {
+    if ($isOrgStudent === null) return;
+
+    if ($isOrgStudent !== $globalStore.isStudent) {
+      globalStore.update((s) => ({ ...s, isStudent: !!$isOrgStudent }));
+    }
+  });
+</script>
+
+<UpgradeModal />
+
+{#if data.org?.isRestricted || $currentOrg.isRestricted}
+  <PageRestricted />
+{:else}
+  <PageLoadProgress zIndex={10000} />
+
+  {@render children?.()}
+{/if}
diff --git a/apps/dashboard/src/routes/(app)/+layout.ts b/apps/dashboard/src/routes/(app)/+layout.ts
new file mode 100644
index 00000000..207d5ab7
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/+layout.ts
@@ -0,0 +1,3 @@
+export const load = async ({ parent }) => {
+  return await parent();
+};
diff --git a/apps/dashboard/src/routes/courses/[id]/+layout.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.server.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/+layout.server.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/+layout.server.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/+layout.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/+layout.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/+page.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/analytics/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/analytics/+page.server.ts
similarity index 55%
rename from apps/dashboard/src/routes/courses/[id]/analytics/+page.server.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/analytics/+page.server.ts
index 7173e789..c9af1b60 100644
--- a/apps/dashboard/src/routes/courses/[id]/analytics/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/analytics/+page.server.ts
@@ -1,6 +1,7 @@
 import type { CourseAnalytics } from '$features/course/utils/types';
 import { classroomio } from '$lib/utils/services/api';
 import { getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
 
 export const load = async ({ params, cookies }) => {
   const courseId = params.id || '';
@@ -12,15 +13,15 @@ export const load = async ({ params, cookies }) => {
   }
 
   // Fetch analytics using single API call
-  const response = await classroomio.course[':courseId']['analytics'].$get(
-    {
-      param: { courseId }
-    },
-    getApiHeaders(cookies, '')
+  const result = await safeServerApi<{ success: true; data: CourseAnalytics }>(() =>
+    classroomio.course[':courseId']['analytics'].$get(
+      {
+        param: { courseId }
+      },
+      getApiHeaders(cookies, '')
+    )
   );
-
-  const data = await response.json();
-  const courseAnalytics: CourseAnalytics | null = data.success && data.data ? data.data : null;
+  const courseAnalytics: CourseAnalytics | null = result.ok ? result.body.data : null;
 
   return {
     courseId,
diff --git a/apps/dashboard/src/routes/courses/[id]/analytics/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/analytics/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/analytics/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/analytics/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/attendance/+page.svelte
similarity index 91%
rename from apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/attendance/+page.svelte
index 226aada9..7032f351 100644
--- a/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/attendance/+page.svelte
@@ -9,7 +9,7 @@
   let { data } = $props();
 </script>
 
-<Page.Root class="mx-auto flex w-[calc(100vw-var(--sidebar-width))]!">
+<Page.Root class="mx-auto flex md:max-w-3xl lg:max-w-4xl">
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>
diff --git a/apps/dashboard/src/routes/courses/[id]/attendance/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/attendance/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/attendance/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/attendance/+page.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/certificates/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/certificates/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.ts
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.server.ts
new file mode 100644
index 00000000..562648c9
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.server.ts
@@ -0,0 +1,42 @@
+import type { GetExerciseSuccess, ListExerciseSubmissionsSuccess } from '$features/course/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ params, cookies }) => {
+  const courseId = params.id || '';
+  const exerciseId = params.exerciseId || '';
+
+  if (!courseId || !exerciseId) {
+    return { courseId, exerciseId, exercise: null, submissions: [], mySubmissions: [] };
+  }
+
+  const headers = getApiHeaders(cookies);
+
+  const [exerciseResult, overviewResult] = await Promise.all([
+    safeServerApi<GetExerciseSuccess>(() =>
+      classroomio.course[':courseId'].exercise[':exerciseId'].$get({ param: { courseId, exerciseId } }, headers)
+    ),
+    safeServerApi<ListExerciseSubmissionsSuccess>(() =>
+      classroomio.course[':courseId'].exercise[':exerciseId']['submissions'].$get(
+        { param: { courseId, exerciseId } },
+        headers
+      )
+    )
+  ]);
+  const exercise = exerciseResult.ok && exerciseResult.body.data ? exerciseResult.body.data : null;
+  const overview =
+    overviewResult.ok && overviewResult.body.data ? overviewResult.body.data : { mySubmission: [], allSubmissions: [] };
+
+  const mySubmissionData = Array.isArray(overview.mySubmission) ? overview.mySubmission : [];
+  const mySubmissions = mySubmissionData;
+
+  const submissions = Array.isArray(overview.allSubmissions) ? overview.allSubmissions : [];
+
+  return {
+    courseId,
+    exerciseId,
+    exercise,
+    submissions,
+    mySubmissions
+  };
+};
diff --git a/apps/dashboard/src/routes/courses/[id]/exercises/[exerciseId]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/exercises/[exerciseId]/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/landingpage/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/landingpage/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/landingpage/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/landingpage/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/lessons/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/lessons/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/lessons/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/lessons/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/lessons/+page.ts
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/lessons/[lessonId]/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/lessons/[lessonId]/+page.server.ts
new file mode 100644
index 00000000..28976ba8
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/lessons/[lessonId]/+page.server.ts
@@ -0,0 +1,23 @@
+import type { GetLessonSuccess } from '$features/course/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ params, cookies }) => {
+  const courseId = params.id || '';
+  const lessonId = params.lessonId || '';
+
+  if (!courseId || !lessonId) {
+    return { courseId, lessonId, lesson: null };
+  }
+
+  const result = await safeServerApi<GetLessonSuccess>(() =>
+    classroomio.course[':courseId'].lesson[':lessonId'].$get({ param: { courseId, lessonId } }, getApiHeaders(cookies))
+  );
+  const lesson = result.ok ? result.body.data : null;
+
+  return {
+    courseId,
+    lessonId,
+    lesson: lesson
+  };
+};
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/[lessonId]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/lessons/[lessonId]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/lessons/[lessonId]/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/lessons/[lessonId]/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/marks/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/marks/+page.server.ts
similarity index 52%
rename from apps/dashboard/src/routes/courses/[id]/marks/+page.server.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/marks/+page.server.ts
index 67076bbd..1f893a73 100644
--- a/apps/dashboard/src/routes/courses/[id]/marks/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/marks/+page.server.ts
@@ -1,4 +1,5 @@
 import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
 import type { MarksPageData } from '$features/course/utils/marks-utils';
 
 export const load = async ({ params, cookies }) => {
@@ -10,13 +11,10 @@ export const load = async ({ params, cookies }) => {
     };
   }
 
-  const response = await classroomio.course[':courseId'].mark.gradebook.$get(
-    { param: { courseId } },
-    getApiHeaders(cookies, '')
+  const result = await safeServerApi<{ success: true; data: MarksPageData }>(() =>
+    classroomio.course[':courseId'].mark.gradebook.$get({ param: { courseId } }, getApiHeaders(cookies, ''))
   );
-
-  const json = await response.json();
-  const marksData: MarksPageData | null = json.success && json.data ? (json.data as MarksPageData) : null;
+  const marksData: MarksPageData | null = result.ok ? result.body.data : null;
 
   return {
     courseId,
diff --git a/apps/dashboard/src/routes/courses/[id]/marks/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/marks/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/marks/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+layout.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/people/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/people/+layout.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/+layout.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+layout.ts b/apps/dashboard/src/routes/(app)/courses/[id]/people/+layout.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/people/+layout.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/+layout.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/people/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/people/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/people/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/people/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/+page.ts
diff --git a/apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/people/[personId]/+page.server.ts
similarity index 57%
rename from apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.server.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/[personId]/+page.server.ts
index e609fb39..8461db4c 100644
--- a/apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/people/[personId]/+page.server.ts
@@ -1,6 +1,7 @@
 import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
 
-import type { UserCourseAnalytics } from '$features/course/utils/types';
+import type { GetUserCourseAnalyticsSuccess, UserCourseAnalytics } from '$features/course/utils/types';
 
 export const load = async ({ params, cookies }) => {
   const courseId = params.id || '';
@@ -15,15 +16,15 @@ export const load = async ({ params, cookies }) => {
   }
 
   try {
-    const response = await classroomio.course[':courseId']['members'][':userId']['analytics'].$get(
-      {
-        param: { courseId, userId }
-      },
-      getApiHeaders(cookies, '')
+    const result = await safeServerApi<GetUserCourseAnalyticsSuccess>(() =>
+      classroomio.course[':courseId']['members'][':userId']['analytics'].$get(
+        {
+          param: { courseId, userId }
+        },
+        getApiHeaders(cookies, '')
+      )
     );
-
-    const result = await response.json();
-    const userCourseAnalytics: UserCourseAnalytics | null = result.success && result.data ? result.data : null;
+    const userCourseAnalytics: UserCourseAnalytics | null = result.ok && result.body.data ? result.body.data : null;
 
     return {
       courseId,
diff --git a/apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/people/[personId]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/people/[personId]/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/settings/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/settings/+page.svelte
diff --git a/apps/dashboard/src/routes/courses/[id]/settings/+page.ts b/apps/dashboard/src/routes/(app)/courses/[id]/settings/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/settings/+page.ts
rename to apps/dashboard/src/routes/(app)/courses/[id]/settings/+page.ts
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/submissions/+page.server.ts b/apps/dashboard/src/routes/(app)/courses/[id]/submissions/+page.server.ts
new file mode 100644
index 00000000..54004a8c
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/submissions/+page.server.ts
@@ -0,0 +1,39 @@
+import type { ListSubmissionsForGradingSuccess } from '$features/course/utils/types';
+import { classroomio } from '$lib/utils/services/api';
+import { getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ params, cookies }) => {
+  const courseId = params.id || '';
+
+  if (!courseId) {
+    return {
+      courseId: '',
+      sections: [],
+      submissionIdData: {}
+    };
+  }
+
+  const result = await safeServerApi<ListSubmissionsForGradingSuccess>(() =>
+    classroomio.course[':courseId'].submission['for-grading'].$get(
+      {
+        param: { courseId }
+      },
+      getApiHeaders(cookies)
+    )
+  );
+
+  if (result.ok && result.body.data) {
+    return {
+      courseId,
+      sections: result.body.data.sections || [],
+      submissionIdData: result.body.data.submissionIdData || {}
+    };
+  }
+
+  return {
+    courseId,
+    sections: [],
+    submissionIdData: {}
+  };
+};
diff --git a/apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/submissions/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
rename to apps/dashboard/src/routes/(app)/courses/[id]/submissions/+page.svelte
diff --git a/apps/dashboard/src/routes/home/+page.svelte b/apps/dashboard/src/routes/(app)/home/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/home/+page.svelte
rename to apps/dashboard/src/routes/(app)/home/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/+layout.svelte b/apps/dashboard/src/routes/(app)/lms/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/+layout.svelte
rename to apps/dashboard/src/routes/(app)/lms/+layout.svelte
diff --git a/apps/dashboard/src/routes/(app)/lms/+page.svelte b/apps/dashboard/src/routes/(app)/lms/+page.svelte
new file mode 100644
index 00000000..f09aea66
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/lms/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { DashboardPage } from '$features/lms/pages';
+  import PendingInviteModal from '$features/lms/components/pending-invite-modal.svelte';
+  import { getGreeting } from '$lib/utils/functions/date';
+  import { t } from '$lib/utils/functions/translations';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { classroomio } from '$lib/utils/services/api';
+  import * as Page from '@cio/ui/base/page';
+  import type { PendingOrgInvite } from '$features/lms/utils/types';
+
+  let pendingInvite = $state<PendingOrgInvite | null>(null);
+  let showInviteModal = $state(false);
+
+  onMount(async () => {
+    if (!$profile.id || !$currentOrg.id) return;
+
+    try {
+      const response = await classroomio.invite.organization.pending.$get();
+      const result = await response.json();
+
+      if (result.success && result.data) {
+        pendingInvite = result.data;
+        showInviteModal = true;
+      }
+    } catch (error) {
+      console.error('Failed to check pending org invite', error);
+    }
+  });
+
+  function handleInviteAccepted() {
+    window.location.href = '/lms';
+  }
+</script>
+
+<svelte:head>
+  <title>Student Dashboard - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="w-full">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>
+        {$t(getGreeting())}
+        {$profile.fullname}!
+      </Page.Title>
+    </Page.HeaderContent>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <DashboardPage />
+    {/snippet}
+  </Page.Body>
+</Page.Root>
+
+{#if pendingInvite}
+  <PendingInviteModal bind:open={showInviteModal} invite={pendingInvite} onAccepted={handleInviteAccepted} />
+{/if}
diff --git a/apps/dashboard/src/routes/lms/community/+page.svelte b/apps/dashboard/src/routes/(app)/lms/community/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/community/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/community/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/community/[slug]/+page.svelte b/apps/dashboard/src/routes/(app)/lms/community/[slug]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/community/[slug]/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/community/[slug]/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/community/[slug]/+page.ts b/apps/dashboard/src/routes/(app)/lms/community/[slug]/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/lms/community/[slug]/+page.ts
rename to apps/dashboard/src/routes/(app)/lms/community/[slug]/+page.ts
diff --git a/apps/dashboard/src/routes/lms/community/ask/+page.svelte b/apps/dashboard/src/routes/(app)/lms/community/ask/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/community/ask/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/community/ask/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/exercises/+page.svelte b/apps/dashboard/src/routes/(app)/lms/exercises/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/exercises/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/exercises/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/explore/+page.svelte b/apps/dashboard/src/routes/(app)/lms/explore/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/explore/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/explore/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/mylearning/+page.svelte b/apps/dashboard/src/routes/(app)/lms/mylearning/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/mylearning/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/mylearning/+page.svelte
diff --git a/apps/dashboard/src/routes/(app)/lms/programs/+page.svelte b/apps/dashboard/src/routes/(app)/lms/programs/+page.svelte
new file mode 100644
index 00000000..330a7c52
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/lms/programs/+page.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as Page from '@cio/ui/base/page';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '$features/program/api';
+  import { profile } from '$lib/utils/store/user';
+  import { ProgramsPage } from '$features/program/pages';
+
+  let searchValue = $state('');
+
+  $effect(() => {
+    if ($profile.id) {
+      programApi.listEnrolledPrograms();
+    }
+  });
+
+  const programs = $derived(programApi.programs);
+  const filteredPrograms = $derived.by(() => {
+    const normalizedSearch = searchValue.trim().toLowerCase();
+
+    return programs.filter((program) => {
+      if (!normalizedSearch) {
+        return true;
+      }
+
+      return [program.name, program.description].some((value) => value?.toLowerCase().includes(normalizedSearch));
+    });
+  });
+</script>
+
+<svelte:head>
+  <title>{$t('lms_navigation.programs') || 'Programs'} - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="w-full">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('lms_navigation.programs') || 'Programs'}</Page.Title>
+    </Page.HeaderContent>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <ProgramsPage
+        programs={filteredPrograms}
+        isLMS={true}
+        isLoading={programApi.isLoading && programs.length === 0}
+        bind:searchValue
+        emptyTitle={$t('programs.lms.empty_title') || 'No programs yet'}
+        emptyDescription={$t('programs.lms.empty_description')}
+      />
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/lms/settings/+layout.svelte b/apps/dashboard/src/routes/(app)/lms/settings/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/settings/+layout.svelte
rename to apps/dashboard/src/routes/(app)/lms/settings/+layout.svelte
diff --git a/apps/dashboard/src/routes/lms/settings/+page.svelte b/apps/dashboard/src/routes/(app)/lms/settings/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/settings/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/settings/+page.svelte
diff --git a/apps/dashboard/src/routes/lms/settings/integrations/+page.svelte b/apps/dashboard/src/routes/(app)/lms/settings/integrations/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/lms/settings/integrations/+page.svelte
rename to apps/dashboard/src/routes/(app)/lms/settings/integrations/+page.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/+layout.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/+layout.server.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts
diff --git a/apps/dashboard/src/routes/org/[slug]/+layout.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/+layout.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/+layout.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
similarity index 57%
rename from apps/dashboard/src/routes/org/[slug]/+page.server.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
index b1586e06..2d3b3bb6 100644
--- a/apps/dashboard/src/routes/org/[slug]/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
@@ -1,7 +1,9 @@
+import type { DashStatsSuccess } from '$features/org/utils/types';
 import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
 
 // TODO - Replace with actual cache
-const cache = {};
+const cache: Record<string, DashStatsSuccess['data'] | null> = {};
 
 export const load = async ({ params, parent, cookies }) => {
   const { orgId } = await parent();
@@ -13,11 +15,8 @@ export const load = async ({ params, parent, cookies }) => {
       stats: null
     };
   }
-  console.log('cache', cache);
-  console.log('orgId', orgId);
-  console.log('siteName', siteName);
 
-  if (cache[orgId]) {
+  if (orgId in cache) {
     return {
       orgName: siteName,
       stats: cache[orgId]
@@ -25,10 +24,10 @@ export const load = async ({ params, parent, cookies }) => {
   }
 
   try {
-    console.log('fetching stats');
-    const statsResponse = await classroomio.dash.stats.$get({ query: { siteName } }, getApiHeaders(cookies, orgId));
-    const statsData = await statsResponse.json();
-    cache[orgId] = statsData.success ? statsData.data : null;
+    const result = await safeServerApi<DashStatsSuccess>(() =>
+      classroomio.dash.stats.$get({ query: { siteName } }, getApiHeaders(cookies, orgId))
+    );
+    cache[orgId] = result.ok ? result.body.data : null;
   } catch (error) {
     console.error('Failed to fetch dashboard stats:', error);
     cache[orgId] = null;
diff --git a/apps/dashboard/src/routes/org/[slug]/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
similarity index 65%
rename from apps/dashboard/src/routes/org/[slug]/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
index fd1e38a4..9131695f 100644
--- a/apps/dashboard/src/routes/org/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import AwardIcon from '@lucide/svelte/icons/award';
   import BookIcon from '@lucide/svelte/icons/book';
   import { Skeleton } from '@cio/ui/base/skeleton';
-  import UserIcon from '@lucide/svelte/icons/user';
   import UsersIcon from '@lucide/svelte/icons/users';
-  import DollarSignIcon from '@lucide/svelte/icons/dollar-sign';
 
   import { profile } from '$lib/utils/store/user';
   import { t } from '$lib/utils/functions/translations';
@@ -24,35 +23,11 @@
   const { data } = $props();
 
   const stats = $derived(data.stats);
-  const enrollments = $derived(stats?.enrollments || []);
+  const recentCertifications = $derived(stats?.recentCertifications || []);
   const numberOfCourses = $derived(stats?.numberOfCourses || 0);
-  const revenue = $derived(stats?.revenue || 0);
+  const totalCertificates = $derived(stats?.totalCertificates || 0);
   const totalStudents = $derived(stats?.totalStudents || 0);
   const topCourses = $derived(stats?.topCourses || []);
-
-  let cards = $derived([
-    {
-      icon: DollarSignIcon,
-      title: `${$t('dashboard.revenue')} ($)`,
-      percentage: revenue ?? 0,
-      description: $t('dashboard.revenue_description'),
-      hidePercentage: true
-    },
-    {
-      icon: BookIcon,
-      title: $t('dashboard.no_of_courses'),
-      percentage: numberOfCourses ?? 0,
-      description: $t('dashboard.no_courses_description'),
-      hidePercentage: true
-    },
-    {
-      icon: UsersIcon,
-      title: $t('dashboard.total_students'),
-      percentage: totalStudents ?? 0,
-      description: $t('dashboard.total_students_description'),
-      hidePercentage: true
-    }
-  ]);
 </script>
 
 <svelte:head>
@@ -79,9 +54,33 @@
     {#snippet child()}
       <div class="mb-10 flex flex-wrap items-start">
         <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {#each cards as card, i (i)}
-            <ActivityCard activity={card} />
-          {/each}
+          <ActivityCard
+            activity={{
+              icon: AwardIcon,
+              title: $t('dashboard.certificates_earned'),
+              percentage: totalCertificates ?? 0,
+              description: $t('dashboard.certificates_earned_description'),
+              hidePercentage: true
+            }}
+          />
+          <ActivityCard
+            activity={{
+              icon: BookIcon,
+              title: $t('dashboard.no_of_courses'),
+              percentage: numberOfCourses ?? 0,
+              description: $t('dashboard.no_courses_description'),
+              hidePercentage: true
+            }}
+          />
+          <ActivityCard
+            activity={{
+              icon: UsersIcon,
+              title: $t('dashboard.total_students'),
+              percentage: totalStudents ?? 0,
+              description: $t('dashboard.total_students_description'),
+              hidePercentage: true
+            }}
+          />
         </div>
       </div>
 
@@ -92,7 +91,7 @@
           </h3>
 
           <div class="h-full space-y-6">
-            {#if !topCourses}
+            {#if !stats}
               {#each Array(5) as _, i (i)}
                 <Skeleton class="h-10 w-full rounded-md" />
               {/each}
@@ -110,11 +109,20 @@
                       {$t(course.enrollments === 1 ? 'dashboard.student' : 'dashboard.students')}
                     </p>
                   </div>
-                  <div class="ml-auto w-2/6">
-                    <Progress value={course.completion} />
-                    <div class="text-sm">
-                      {course.completion}%
-                      {$t('dashboard.completion')}
+                  <div class="ml-auto w-2/6 space-y-2">
+                    <div>
+                      <Progress value={course.completion} />
+                      <div class="text-sm">
+                        {course.completion}%
+                        {$t('dashboard.completion')}
+                      </div>
+                    </div>
+                    <div>
+                      <Progress value={course.certification} />
+                      <div class="text-sm">
+                        {course.certification}%
+                        {$t('dashboard.certification_rate')}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -134,47 +142,47 @@
 
         <div class="flex min-h-[45vh] w-full flex-col rounded-md border p-3 md:p-5 dark:text-white">
           <h3 class="mb-4 text-lg">
-            {$t('dashboard.recent_enrollments')}
+            {$t('dashboard.recent_certifications')}
           </h3>
 
           <div class="h-full space-y-6">
-            {#if !enrollments}
+            {#if !stats}
               {#each Array(5) as _, i (i)}
                 <Skeleton class="h-10 w-full rounded-md" />
               {/each}
             {:else}
-              {#each enrollments as enrollment, i (i)}
+              {#each recentCertifications as certification (`${certification.id}-${certification.courseId}-${certification.date}`)}
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2">
-                    <UserAvatar src={enrollment.avatarUrl} alt={enrollment.name ?? 'User'} class="h-6 w-6" />
+                    <UserAvatar src={certification.avatarUrl} alt={certification.name ?? 'User'} class="h-6 w-6" />
 
                     <div class="min-h-[45px] space-y-1">
-                      <p class="text-sm leading-none capitalize">{enrollment.name}</p>
-                      <p class="text-muted-foreground text-sm">
+                      <p class="text-sm leading-none capitalize">{certification.name}</p>
+                      <p class="ui:text-muted-foreground text-sm">
                         <span class="italic">
-                          {calDateDiff(enrollment.date)}
+                          {calDateDiff(certification.date)}
                         </span>
                       </p>
                     </div>
                   </div>
 
                   <div class="w-2/4">
-                    <a class="hover:underline" href={`/courses/${enrollment.courseId}`}>
+                    <a class="hover:underline" href={`/courses/${certification.courseId}`}>
                       <p class="line-clamp-2 pb-[0.1rem] text-sm leading-none">
-                        {enrollment.course}
+                        {certification.course}
                       </p>
                     </a>
                   </div>
                 </div>
               {:else}
                 <Empty
-                  title={$t('dashboard.publish_first_course')}
-                  description={$t('dashboard.publish_first_course_description')}
-                  icon={UserIcon}
+                  title={$t('dashboard.no_certifications_yet')}
+                  description={$t('dashboard.no_certifications_yet_description')}
+                  icon={AwardIcon}
                   class="h-full"
                 >
                   <Button variant="outline" onclick={() => goto(`${$currentOrgPath}/courses`)}>
-                    {$t('dashboard.publish_course')}
+                    {$t('dashboard.view_courses')}
                   </Button>
                 </Empty>
               {/each}
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.server.ts
new file mode 100644
index 00000000..4624cdc1
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.server.ts
@@ -0,0 +1,21 @@
+import type { ListAutomationKeysSuccess } from '$features/automation/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ parent, cookies }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return { keys: [] };
+  }
+
+  const headers = getApiHeaders(cookies, orgId);
+
+  const keysResult = await safeServerApi<ListAutomationKeysSuccess>(() =>
+    classroomio.organization.automation.keys.$get({ query: { type: 'api' } }, headers)
+  );
+
+  return {
+    keys: keysResult.ok ? keysResult.body.data : []
+  };
+};
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.svelte
new file mode 100644
index 00000000..d1894dad
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/api/+page.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { ApiAutomationPage } from '$features/automation/pages';
+  import { automationApi } from '$features/automation/api/automation.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Page from '@cio/ui/base/page';
+  import { Button } from '@cio/ui/base/button';
+  import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
+
+  let { data } = $props();
+
+  $effect(() => {
+    if (!data) return;
+    automationApi.keys = data.keys;
+    automationApi.isFetched = true;
+  });
+</script>
+
+<svelte:head>
+  <title>{t.get('automation.tabs.api')} - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="mx-auto w-full max-w-4xl">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('automation.tabs.api')}</Page.Title>
+      <Page.Subtitle>{$t('automation.api.subtitle')}</Page.Subtitle>
+    </Page.HeaderContent>
+    <Page.Action>
+      <Button variant="outline" onclick={() => window.open('https://classroomio.com/docs/api/reference', '_blank')}>
+        <ArrowUpRightIcon size={16} />
+        {$t('automation.api.view_docs')}
+      </Button>
+    </Page.Action>
+  </Page.Header>
+
+  <Page.Body>
+    {#snippet child()}
+      <ApiAutomationPage />
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.server.ts
new file mode 100644
index 00000000..5f1f2aae
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.server.ts
@@ -0,0 +1,47 @@
+import type { InferResponseType } from '$lib/utils/services/api';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+import {
+  DEFAULT_ORG_AUDIENCE_QUERY,
+  getAudienceQueryFromSearchParams,
+  toAudienceRequestQuery
+} from '$lib/features/org/utils/audience-query-utils';
+import type { OrganizationAudienceSuccess } from '$lib/features/org/utils/types';
+
+type GetOrganizationCoursesRequest = typeof classroomio.organization.courses.$get;
+type GetOrganizationCoursesSuccess = Extract<InferResponseType<GetOrganizationCoursesRequest>, { success: true }>;
+
+export const load = async ({ parent, cookies, url }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return {
+      audience: [],
+      pagination: null,
+      query: DEFAULT_ORG_AUDIENCE_QUERY,
+      courses: []
+    };
+  }
+
+  const headers = getApiHeaders(cookies, orgId);
+  const query = getAudienceQueryFromSearchParams(url.searchParams);
+
+  const [audienceResult, coursesResult] = await Promise.all([
+    safeServerApi<OrganizationAudienceSuccess>(() =>
+      classroomio.organization.audience.$get({ query: toAudienceRequestQuery(query)! }, headers)
+    ),
+    safeServerApi<GetOrganizationCoursesSuccess>(() =>
+      classroomio.organization.courses.$get({ query: { tags: undefined } }, headers)
+    )
+  ]);
+  const audience = audienceResult.ok ? audienceResult.body.data : [];
+  const pagination = audienceResult.ok ? audienceResult.body.pagination : null;
+  const courses = coursesResult.ok ? coursesResult.body.data : [];
+
+  return {
+    audience,
+    pagination,
+    query,
+    courses
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.svelte
similarity index 96%
rename from apps/dashboard/src/routes/org/[slug]/audience/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.svelte
index 54834807..1482d46e 100644
--- a/apps/dashboard/src/routes/org/[slug]/audience/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/+page.svelte
@@ -35,6 +35,7 @@
           </span>
         {/if}
       </Page.Title>
+      <Page.Subtitle>{$t('audience.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
     <Page.Action>
       <Button variant="outline" onclick={exportAudience} disabled={isLoading} loading={isLoading}>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.server.ts
new file mode 100644
index 00000000..e5f7110f
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.server.ts
@@ -0,0 +1,31 @@
+import { classroomio, getApiHeaders, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+type GetAudienceAnalyticsRequest = (typeof classroomio.organization.audience)[':userId']['analytics']['$get'];
+type GetAudienceAnalyticsSuccess = Extract<InferResponseType<GetAudienceAnalyticsRequest>, { success: true }>;
+
+export const load = async ({ params, parent, cookies }) => {
+  const { orgId } = await parent();
+  const paramParts = params.params?.split('/') ?? [];
+
+  const userId = paramParts[0];
+
+  if (!userId || !orgId) {
+    return {
+      userId,
+      orgId,
+      analytics: null
+    };
+  }
+
+  const result = await safeServerApi<GetAudienceAnalyticsSuccess>(() =>
+    classroomio.organization.audience[':userId'].analytics.$get({ param: { userId } }, getApiHeaders(cookies, orgId))
+  );
+  const analytics = result.ok ? result.body.data : null;
+
+  return {
+    userId,
+    orgId,
+    analytics
+  };
+};
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.svelte
new file mode 100644
index 00000000..77c5d166
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/[...params]/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { UserAnalyticsPage } from '$features/audience/pages';
+  import { BackButton } from '@cio/ui';
+  import * as Page from '@cio/ui/base/page';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrgPath } from '$lib/utils/store/org';
+
+  let { data } = $props();
+</script>
+
+<svelte:head>
+  <title>{t.get('audience.user_analytics.title')} - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="w-full md:max-w-5xl lg:mx-auto">
+  <Page.Header>
+    <Page.HeaderContent>
+      <BackButton href={`${$currentOrgPath}/audience`} label={$t('community.ask.go_back')} />
+      <Page.Title>{$t('audience.user_analytics.title')}</Page.Title>
+      <Page.Subtitle>{$t('audience.user_analytics.page_subtitle')}</Page.Subtitle>
+    </Page.HeaderContent>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <UserAnalyticsPage {data} />
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.server.ts
new file mode 100644
index 00000000..4b2d240b
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.server.ts
@@ -0,0 +1,33 @@
+import { classroomio, getApiHeaders, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+type GetOrganizationCoursesRequest = typeof classroomio.organization.courses.$get;
+type GetOrganizationCoursesSuccess = Extract<InferResponseType<GetOrganizationCoursesRequest>, { success: true }>;
+
+type GetProgramsRequest = typeof classroomio.program.$get;
+type GetProgramsSuccess = Extract<InferResponseType<GetProgramsRequest>, { success: true }>;
+
+export const load = async ({ parent, cookies }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return {
+      courses: [],
+      programs: []
+    };
+  }
+
+  const [coursesResult, programsResult] = await Promise.all([
+    safeServerApi<GetOrganizationCoursesSuccess>(() =>
+      classroomio.organization.courses.$get({ query: {} }, getApiHeaders(cookies, orgId))
+    ),
+    safeServerApi<GetProgramsSuccess>(() =>
+      classroomio.program.$get({ query: { organizationId: orgId } }, getApiHeaders(cookies, orgId))
+    )
+  ]);
+
+  return {
+    courses: coursesResult.ok ? coursesResult.body.data : [],
+    programs: programsResult.ok ? programsResult.body.data : []
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/import/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.svelte
similarity index 71%
rename from apps/dashboard/src/routes/org/[slug]/audience/import/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.svelte
index 35b7250f..fbe6456a 100644
--- a/apps/dashboard/src/routes/org/[slug]/audience/import/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/audience/import/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Button } from '@cio/ui/base/button';
   import { ImportAudiencePage } from '$features/audience/pages';
   import { BackButton } from '@cio/ui';
   import * as Page from '@cio/ui/base/page';
@@ -20,11 +21,17 @@
     <Page.HeaderContent>
       <BackButton href={resolve(audiencePath, {})} label={$t('audience.import.back')} class="p-0!" />
       <Page.Title>{$t('audience.import.title')}</Page.Title>
+      <Page.Subtitle>{$t('audience.import.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
+    <Page.Action>
+      <Button type="submit" form="import-audience-form">
+        {$t('audience.import.submit')}
+      </Button>
+    </Page.Action>
   </Page.Header>
   <Page.Body>
     {#snippet child()}
-      <ImportAudiencePage courses={data.courses} />
+      <ImportAudiencePage courses={data.courses} programs={data.programs} />
     {/snippet}
   </Page.Body>
 </Page.Root>
diff --git a/apps/dashboard/src/routes/org/[slug]/automation/+page.ts b/apps/dashboard/src/routes/(app)/org/[slug]/automation/+page.ts
similarity index 65%
rename from apps/dashboard/src/routes/org/[slug]/automation/+page.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/automation/+page.ts
index 82b6113f..c2e9ccb0 100644
--- a/apps/dashboard/src/routes/org/[slug]/automation/+page.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/automation/+page.ts
@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = ({ params, url }) => {
-  throw redirect(307, `/org/${params.slug}/automation/mcp${url.search}`);
+  throw redirect(307, `/org/${params.slug}/mcp${url.search}`);
 };
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/community/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/community/+page.server.ts
new file mode 100644
index 00000000..d1cfbdc2
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/community/+page.server.ts
@@ -0,0 +1,23 @@
+import type { CommunityQuestionsSuccess } from '$features/community/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ parent, cookies }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return {
+      questions: []
+    };
+  }
+
+  const result = await safeServerApi<CommunityQuestionsSuccess>(() =>
+    classroomio.community.$get({ query: { orgId } }, getApiHeaders(cookies, orgId))
+  );
+  const questions = result.ok ? result.body.data : [];
+
+  return {
+    questions,
+    orgId
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/community/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/community/+page.svelte
similarity index 91%
rename from apps/dashboard/src/routes/org/[slug]/community/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/community/+page.svelte
index 91e152bf..6a5f5879 100644
--- a/apps/dashboard/src/routes/org/[slug]/community/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/community/+page.svelte
@@ -15,6 +15,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('community.title')}</Page.Title>
+      <Page.Subtitle>{$t('community.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
     <Page.Action>
       <AskCommunityButton />
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/community/[cslug]/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/community/[cslug]/+page.server.ts
new file mode 100644
index 00000000..b35475c4
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/community/[cslug]/+page.server.ts
@@ -0,0 +1,18 @@
+import type { CommunityQuestionSuccess } from '$features/community/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ params, parent, cookies }) => {
+  const { orgId } = await parent();
+  const slug = params.cslug || '';
+
+  const questionResult = await safeServerApi<CommunityQuestionSuccess>(() =>
+    classroomio.community[':slug'].$get({ param: { slug } }, getApiHeaders(cookies, orgId))
+  );
+  const question = questionResult.ok ? questionResult.body.data : null;
+
+  return {
+    slug,
+    question
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/community/[cslug]/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/community/[cslug]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/community/[cslug]/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/community/[cslug]/+page.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/community/ask/+page.svelte
similarity index 91%
rename from apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/community/ask/+page.svelte
index 318772ea..890f34c6 100644
--- a/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/community/ask/+page.svelte
@@ -18,6 +18,7 @@
     <Page.HeaderContent>
       <BackButton href={resolve(communityPath, {})} label={$t('community.ask.go_back')} />
       <Page.Title>{$t('community.ask.ask_the')}</Page.Title>
+      <Page.Subtitle>{$t('community.ask.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
   </Page.Header>
   <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/courses/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.server.ts
similarity index 52%
rename from apps/dashboard/src/routes/org/[slug]/courses/+page.server.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.server.ts
index 11cb3975..d7ed2bc5 100644
--- a/apps/dashboard/src/routes/org/[slug]/courses/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.server.ts
@@ -1,7 +1,13 @@
+import type { GetTagGroupsSuccess } from '$features/tag/utils/types';
 import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+import type { InferResponseType } from '$lib/utils/services/api';
 
 import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
 
+type GetOrganizationCoursesRequest = typeof classroomio.organization.courses.$get;
+type GetOrganizationCoursesSuccess = Extract<InferResponseType<GetOrganizationCoursesRequest>, { success: true }>;
+
 export const load = async ({ parent, locals, cookies, url }) => {
   const loadStart = performance.now();
 
@@ -21,25 +27,26 @@ export const load = async ({ parent, locals, cookies, url }) => {
   const normalizedTagsQuery = normalizedTags && normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;
 
   const apiStart = performance.now();
-  const [coursesResponse, tagsResponse] = await Promise.all([
-    classroomio.organization.courses.$get(
-      normalizedTagsQuery
-        ? {
-            query: {
-              tags: normalizedTagsQuery
+  const [coursesResult, tagsResult] = await Promise.all([
+    safeServerApi<GetOrganizationCoursesSuccess>(() =>
+      classroomio.organization.courses.$get(
+        normalizedTagsQuery
+          ? {
+              query: {
+                tags: normalizedTagsQuery
+              }
             }
-          }
-        : { query: {} },
-      getApiHeaders(cookies, orgId)
+          : { query: {} },
+        getApiHeaders(cookies, orgId)
+      )
     ),
-    classroomio.organization.tags.$get({}, getApiHeaders(cookies, orgId))
+    safeServerApi<GetTagGroupsSuccess>(() => classroomio.organization.tags.$get({}, getApiHeaders(cookies, orgId)))
   ]);
 
-  const [coursesData, tagsData] = await Promise.all([coursesResponse.json(), tagsResponse.json()]);
   const apiMs = Math.round((performance.now() - apiStart) * 100) / 100;
 
-  const courses = coursesData.success ? coursesData.data : [];
-  const tagGroups = tagsData.success ? tagsData.data : [];
+  const courses = coursesResult.ok ? coursesResult.body.data : [];
+  const tagGroups = tagsResult.ok ? tagsResult.body.data : [];
 
   const loadMs = Math.round((performance.now() - loadStart) * 100) / 100;
   console.log(
diff --git a/apps/dashboard/src/routes/org/[slug]/courses/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.svelte
similarity index 98%
rename from apps/dashboard/src/routes/org/[slug]/courses/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.svelte
index 06950c89..244f0349 100644
--- a/apps/dashboard/src/routes/org/[slug]/courses/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/courses/+page.svelte
@@ -181,6 +181,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('courses.heading')}</Page.Title>
+      <Page.Subtitle>{$t('courses.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
     <Page.Action>
       <CreateCourseButton isResponsive />
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.server.ts
new file mode 100644
index 00000000..62e8e85a
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.server.ts
@@ -0,0 +1,27 @@
+import type { GetAutomationUsageSuccess, ListAutomationKeysSuccess } from '$features/automation/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+export const load = async ({ parent, cookies }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return { keys: [], usage: null };
+  }
+
+  const headers = getApiHeaders(cookies, orgId);
+
+  const [keysResult, usageResult] = await Promise.all([
+    safeServerApi<ListAutomationKeysSuccess>(() =>
+      classroomio.organization.automation.keys.$get({ query: { type: 'mcp' } }, headers)
+    ),
+    safeServerApi<GetAutomationUsageSuccess>(() =>
+      classroomio.organization.automation.usage.$get({ query: { type: 'mcp' } }, headers)
+    )
+  ]);
+
+  return {
+    keys: keysResult.ok ? keysResult.body.data : [],
+    usage: usageResult.ok ? usageResult.body.data : null
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.svelte
similarity index 87%
rename from apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.svelte
index cfecc327..3b628dd7 100644
--- a/apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/mcp/+page.svelte
@@ -7,7 +7,7 @@
   let { data } = $props();
 
   $effect(() => {
-    if (!data || automationApi.isFetched) return;
+    if (!data) return;
     automationApi.keys = data.keys;
     automationApi.usage = data.usage;
     automationApi.isFetched = true;
@@ -22,7 +22,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('automation.tabs.mcp')}</Page.Title>
-      <Page.Subtitle>{$t('automation.subtitle')}</Page.Subtitle>
+      <Page.Subtitle>{$t('automation.mcp.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
   </Page.Header>
 
diff --git a/apps/dashboard/src/routes/org/[slug]/media/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/media/+page.server.ts
similarity index 60%
rename from apps/dashboard/src/routes/org/[slug]/media/+page.server.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/media/+page.server.ts
index 1d7c5f7c..6f16d535 100644
--- a/apps/dashboard/src/routes/org/[slug]/media/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/media/+page.server.ts
@@ -1,4 +1,6 @@
+import type { GetAssetStorageSuccess, ListAssetsSuccess } from '$features/media/utils/types';
 import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
 
 function parsePositiveInt(value: string | null, fallback: number) {
   const parsed = Number(value);
@@ -36,17 +38,18 @@ export const load = async ({ parent, cookies, url }) => {
     includeExternal: includeExternal ? includeExternal === 'true' : true
   };
 
-  const [assetsResponse, storageResponse] = await Promise.all([
-    classroomio.organization.assets.$get({ query }, getApiHeaders(cookies, orgId)),
-    classroomio.organization.assets.storage.$get({}, getApiHeaders(cookies, orgId))
+  const [assetsResult, storageResult] = await Promise.all([
+    safeServerApi<ListAssetsSuccess>(() =>
+      classroomio.organization.assets.$get({ query }, getApiHeaders(cookies, orgId))
+    ),
+    safeServerApi<GetAssetStorageSuccess>(() =>
+      classroomio.organization.assets.storage.$get({}, getApiHeaders(cookies, orgId))
+    )
   ]);
 
-  const assetsData = await assetsResponse.json();
-  const storageData = await storageResponse.json();
-
   return {
-    assets: assetsData.success ? assetsData.data : [],
-    pagination: assetsData.success ? assetsData.pagination : null,
-    storageSummary: storageData.success ? storageData.data : null
+    assets: assetsResult.ok ? assetsResult.body.data : [],
+    pagination: assetsResult.ok ? assetsResult.body.pagination : null,
+    storageSummary: storageResult.ok ? storageResult.body.data : null
   };
 };
diff --git a/apps/dashboard/src/routes/org/[slug]/media/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/media/+page.svelte
similarity index 93%
rename from apps/dashboard/src/routes/org/[slug]/media/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/media/+page.svelte
index f21e453c..450c378b 100644
--- a/apps/dashboard/src/routes/org/[slug]/media/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/media/+page.svelte
@@ -27,6 +27,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('media_manager.heading')}</Page.Title>
+      <Page.Subtitle>{$t('media_manager.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
   </Page.Header>
 
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.server.ts
new file mode 100644
index 00000000..6dfd44b8
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.server.ts
@@ -0,0 +1,23 @@
+import { classroomio, getApiHeaders, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+type GetProgramsRequest = typeof classroomio.program.$get;
+type GetProgramsSuccess = Extract<InferResponseType<GetProgramsRequest>, { success: true }>;
+
+export const load = async ({ parent, locals, cookies }) => {
+  const { orgId } = await parent();
+
+  if (!orgId || !locals.user?.id) {
+    return { programs: [] };
+  }
+
+  const result = await safeServerApi<GetProgramsSuccess>(() =>
+    classroomio.program.$get({ query: { organizationId: orgId } }, getApiHeaders(cookies, orgId))
+  );
+
+  console.log('result', result.ok ? result.body.data : []);
+
+  return {
+    programs: result.ok ? result.body.data : []
+  };
+};
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.svelte
new file mode 100644
index 00000000..f7d2a088
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/programs/+page.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+  import * as Page from '@cio/ui/base/page';
+  import { Button } from '@cio/ui/base/button';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { GoalIcon } from '@cio/ui/custom/moving-icons';
+  import Plus from '@lucide/svelte/icons/plus';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '$features/program/api';
+  import { ProgramsPage } from '$features/program/pages';
+  import type { Program } from '$features/program/utils/types';
+  import CreateProgramModal from '$features/program/components/create-program-modal.svelte';
+  import {
+    DEFAULT_PROGRAM_SORT,
+    DEFAULT_PROGRAM_SORT_ORDER,
+    type ProgramSortBy,
+    type ProgramSortOrder
+  } from '$features/program/utils/constants';
+  import ProgramFilterPopover from '$features/program/components/program-filter-popover.svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  let { data } = $props();
+
+  let showCreateModal = $state(false);
+  let searchValue = $state('');
+  let sortKey = $state<ProgramSortBy>(DEFAULT_PROGRAM_SORT);
+  let selectedOrder = $state<ProgramSortOrder>(DEFAULT_PROGRAM_SORT_ORDER);
+  let selectedStatuses = $state<string[]>([]);
+
+  $effect(() => {
+    if (data.programs) {
+      programApi.programs = data.programs;
+    }
+  });
+
+  const statusOptions = $derived([
+    { value: 'ACTIVE' as const, label: $t('programs.status.active') || 'Active' },
+    { value: 'INACTIVE' as const, label: $t('programs.status.inactive') || 'Inactive' },
+    { value: 'ARCHIVED' as const, label: $t('programs.status.archived') || 'Archived' }
+  ]);
+
+  const sortOptions = $derived([
+    { value: 'name' as const, label: $t('programs.filters.sort_name') || 'Name' },
+    { value: 'courses' as const, label: $t('programs.filters.sort_courses') || 'Courses' },
+    { value: 'students' as const, label: $t('programs.filters.sort_students') || 'Students' },
+    { value: 'status' as const, label: $t('programs.filters.sort_status') || 'Status' }
+  ]);
+
+  const filteredPrograms = $derived.by(() => {
+    const normalizedSearch = searchValue.trim().toLowerCase();
+    const sourcePrograms = programApi.programs.filter((program: Program) => {
+      const matchesSearch =
+        !normalizedSearch ||
+        [program.name, program.description].some((value) => value?.toLowerCase().includes(normalizedSearch));
+      const matchesStatus = selectedStatuses.length === 0 || selectedStatuses.includes(program.status);
+
+      return matchesSearch && matchesStatus;
+    });
+
+    const sortedPrograms = [...sourcePrograms];
+
+    return sortedPrograms.sort((firstProgram, secondProgram) => {
+      let comparison = 0;
+
+      if (sortKey === 'name') {
+        comparison = firstProgram.name.localeCompare(secondProgram.name);
+      } else if (sortKey === 'courses') {
+        comparison = firstProgram.courseCount - secondProgram.courseCount;
+      } else if (sortKey === 'students') {
+        comparison = firstProgram.studentCount - secondProgram.studentCount;
+      } else if (sortKey === 'status') {
+        comparison = firstProgram.status.localeCompare(secondProgram.status);
+      }
+
+      return selectedOrder === 'asc' ? comparison : comparison * -1;
+    });
+  });
+
+  function toggleStatus(status: string, checked: boolean) {
+    const nextStatuses = new SvelteSet(selectedStatuses);
+    if (checked) {
+      nextStatuses.add(status);
+    } else {
+      nextStatuses.delete(status);
+    }
+
+    selectedStatuses = Array.from(nextStatuses);
+  }
+
+  function clearFilters() {
+    sortKey = DEFAULT_PROGRAM_SORT;
+    selectedOrder = DEFAULT_PROGRAM_SORT_ORDER;
+    selectedStatuses = [];
+  }
+</script>
+
+<svelte:head>
+  <title>{$t('programs.page_title') || 'Programs'} - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="w-full">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('programs.heading') || 'Programs'}</Page.Title>
+      <Page.Subtitle>
+        {$t('programs.description') || 'Give a group of people access to multiple courses, like a class'}
+      </Page.Subtitle>
+    </Page.HeaderContent>
+    <Page.Action>
+      <Button onclick={() => (showCreateModal = true)}>
+        <Plus size={16} />
+        {$t('programs.create') || 'New Program'}
+      </Button>
+    </Page.Action>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      {#if !programApi.isLoading && filteredPrograms.length === 0 && !searchValue.trim() && selectedStatuses.length === 0}
+        <Empty
+          title={$t('programs.empty_title') || 'No programs yet'}
+          description={$t('programs.empty_description') || 'Create your first program to get started.'}
+          icon={GoalIcon}
+          variant="page"
+        >
+          <Button onclick={() => (showCreateModal = true)}>
+            <Plus size={16} />
+            {$t('programs.create') || 'New Program'}
+          </Button>
+        </Empty>
+      {:else}
+        <ProgramsPage
+          programs={filteredPrograms}
+          isLoading={programApi.isLoading && filteredPrograms.length === 0}
+          bind:searchValue
+          emptyTitle={$t('programs.empty_title') || 'No programs yet'}
+          emptyDescription={searchValue.trim() || selectedStatuses.length > 0
+            ? $t('programs.no_matching_programs') || 'No programs match your filters.'
+            : $t('programs.empty_description') || 'Create your first program to get started.'}
+        >
+          {#snippet filterControls()}
+            <ProgramFilterPopover
+              bind:sortKey
+              bind:selectedOrder
+              {selectedStatuses}
+              {statusOptions}
+              {sortOptions}
+              onToggleStatus={toggleStatus}
+              onClearFilters={clearFilters}
+            />
+          {/snippet}
+        </ProgramsPage>
+      {/if}
+    {/snippet}
+  </Page.Body>
+</Page.Root>
+
+<CreateProgramModal bind:open={showCreateModal} />
diff --git a/apps/dashboard/src/routes/org/[slug]/quiz/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/quiz/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/quiz/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/quiz/+page.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/quiz/[slug]/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/quiz/[slug]/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/quiz/[slug]/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/quiz/[slug]/+page.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/quiz/[slug]/+page.ts b/apps/dashboard/src/routes/(app)/org/[slug]/quiz/[slug]/+page.ts
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/quiz/[slug]/+page.ts
rename to apps/dashboard/src/routes/(app)/org/[slug]/quiz/[slug]/+page.ts
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/+layout.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/+layout.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/settings/+layout.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/+layout.svelte
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/+page.svelte
similarity index 93%
rename from apps/dashboard/src/routes/org/[slug]/settings/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/+page.svelte
index 4c2d3347..2e6e08af 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/+page.svelte
@@ -25,6 +25,7 @@
 <Page.Header isSticky>
   <Page.HeaderContent>
     <Page.Title>{$t('settings.profile.heading')}</Page.Title>
+    <Page.Subtitle>{$t('settings.profile.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
   <Page.Action>
     <Button variant="secondary" loading={isLoading} onclick={handleUpdate}>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/auth/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/auth/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/+page.svelte
index cef4d498..7d54deaa 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/auth/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{t.get('settings.auth.title')}</Page.Title>
+    <Page.Subtitle>{t.get('settings.auth.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/auth/sso/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/sso/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/auth/sso/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/sso/+page.svelte
index 8b475c6b..83e95cdb 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/auth/sso/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/sso/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{t.get('settings.auth.title')}</Page.Title>
+    <Page.Subtitle>{t.get('settings.auth.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/auth/token-auth/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/token-auth/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/auth/token-auth/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/token-auth/+page.svelte
index 97ec51e6..c218ffc5 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/auth/token-auth/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/auth/token-auth/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{t.get('settings.auth.title')}</Page.Title>
+    <Page.Subtitle>{t.get('settings.auth.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/billing/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/billing/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/billing/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/billing/+page.svelte
index 51e426fa..750f3a88 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/billing/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/billing/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{$t('settings.billing.sub_title')}</Page.Title>
+    <Page.Subtitle>{$t('settings.billing.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/customize-lms/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/customize-lms/+page.svelte
similarity index 92%
rename from apps/dashboard/src/routes/org/[slug]/settings/customize-lms/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/customize-lms/+page.svelte
index c07bb1c8..bc4306c6 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/customize-lms/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/customize-lms/+page.svelte
@@ -25,6 +25,7 @@
   <Page.Header>
     <Page.HeaderContent>
       <Page.Title>{$t('components.settings.customize_lms.title')}</Page.Title>
+      <Page.Subtitle>{$t('components.settings.customize_lms.page_subtitle')}</Page.Subtitle>
     </Page.HeaderContent>
     <Page.Action>
       <Button variant="default" loading={isSaving} disabled={isSaving} onclick={handleSave}>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/domains/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/domains/+page.svelte
similarity index 84%
rename from apps/dashboard/src/routes/org/[slug]/settings/domains/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/domains/+page.svelte
index a622d0a6..f16671f1 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/domains/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/domains/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{$t('components.settings.domains.title')}</Page.Title>
+    <Page.Subtitle>{$t('components.settings.domains.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/integrations/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/integrations/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/integrations/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/integrations/+page.svelte
index aa893d81..5e346ef6 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/integrations/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/integrations/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{$t('settings.integrations.heading')}</Page.Title>
+    <Page.Subtitle>{$t('settings.integrations.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/landingpage/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/+page.svelte
similarity index 71%
rename from apps/dashboard/src/routes/org/[slug]/settings/landingpage/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/+page.svelte
index 6965125d..581a38a3 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/landingpage/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import { LandingpagePage } from '$features/settings/pages';
+  import { VisitOrgSiteButton } from '$features/ui';
   import { t } from '$lib/utils/functions/translations';
   import { Button } from '@cio/ui/base/button';
   import * as Page from '@cio/ui/base/page';
 
   let landingPageComponent: LandingpagePage | null = $state(null);
+  let hasUnsavedChanges = $state(false);
   let isSaving = $state(false);
 
   async function handleSave() {
@@ -24,15 +26,18 @@
 <Page.Header isSticky>
   <Page.HeaderContent>
     <Page.Title>{$t('settings.landing_page.heading')}</Page.Title>
+    <Page.Subtitle>{$t('settings.landing_page.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
   <Page.Action>
-    <Button variant="default" loading={isSaving} disabled={isSaving} onclick={handleSave}>
+    <VisitOrgSiteButton labelKey="markdown_editor.preview" variant="secondary" />
+
+    <Button variant="default" loading={isSaving} disabled={isSaving || !hasUnsavedChanges} onclick={handleSave}>
       {$t('settings.landing_page.save_changes')}
     </Button>
   </Page.Action>
 </Page.Header>
 <Page.Body>
   {#snippet child()}
-    <LandingpagePage bind:this={landingPageComponent} />
+    <LandingpagePage bind:this={landingPageComponent} bind:hasUnsavedChanges />
   {/snippet}
 </Page.Body>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/edit/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/edit/+page.svelte
new file mode 100644
index 00000000..dd8092aa
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/edit/+page.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import type { AccountOrg } from '$features/app/types';
+  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { landingPageSettings } from '$features/settings/utils/store';
+  import { buildOrgLandingPageProps, normalizeLandingPageSettings } from '$features/org/utils/landing-page';
+  import { landingPageThemeComponents } from '$features/org/utils/landing-page-components';
+  import LandingpageEditor from '$features/settings/pages/landingpage-editor.svelte';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { basePath } from '$lib/utils/store/app';
+  import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';
+
+  let sidebarOpen = $state(true);
+  let hasInitialized = $state(false);
+
+  function isLandingPageTheme(value: string | null): value is 'minimal' | 'bold' | 'classic' {
+    return value === 'minimal' || value === 'bold' || value === 'classic';
+  }
+
+  const savedLandingPageSettings = $derived(normalizeLandingPageSettings($currentOrg.landingpage));
+  const previewTheme = $derived.by(() => {
+    const queryTheme = page.url.searchParams.get('theme');
+    if (isLandingPageTheme(queryTheme)) {
+      return queryTheme;
+    }
+
+    return savedLandingPageSettings.theme;
+  });
+  const previewLandingPageSettings = $derived({
+    ...$landingPageSettings,
+    theme: previewTheme
+  });
+
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
+
+  const previewProps = $derived(
+    buildOrgLandingPageProps(
+      $currentOrg,
+      previewLandingPageSettings,
+      orgApi.publicCourses,
+      orgApi.hasMorePublicCourses,
+      authAction
+    )
+  );
+
+  const ThemeComponent = $derived(landingPageThemeComponents[previewTheme] ?? landingPageThemeComponents.minimal);
+
+  onMount(() => {
+    if ($currentOrg.siteName) {
+      orgApi.publicCourses = [];
+      orgApi.hasMorePublicCourses = false;
+      void orgApi.getPublicCoursesBySiteName($currentOrg.siteName);
+    }
+  });
+
+  $effect(() => {
+    if (hasInitialized || !$currentOrg.id) {
+      return;
+    }
+
+    $landingPageSettings = normalizeLandingPageSettings($currentOrg.landingpage);
+    hasInitialized = true;
+  });
+
+  function handleClose() {
+    const queryTheme = page.url.searchParams.get('theme');
+    const querySuffix = isLandingPageTheme(queryTheme) ? `?theme=${encodeURIComponent(queryTheme)}` : '';
+    goto(resolve(`${$currentOrgPath}/settings/landingpage${querySuffix}`, {}));
+  }
+</script>
+
+<svelte:head>
+  <title>Landing Page Editor - ClassroomIO</title>
+</svelte:head>
+
+<div
+  class="bg-background fixed inset-0 z-250 h-screen w-screen"
+  in:fly={{ y: 500, duration: 500 }}
+  out:fly={{ y: 500, duration: 500 }}
+>
+  <Sidebar.Provider bind:open={sidebarOpen} style="--sidebar-width: 280px">
+    <Sidebar.Root side="left" collapsible="icon" class="h-full">
+      <LandingpageEditor
+        bind:settings={$landingPageSettings}
+        onSave={async () => {
+          const updatedLandingPage = normalizeLandingPageSettings({
+            ...$landingPageSettings,
+            theme: page.url.searchParams.get('theme') ? savedLandingPageSettings.theme : $landingPageSettings.theme
+          });
+
+          await orgApi.update($currentOrg.id, {
+            landingpage: updatedLandingPage as AccountOrg['landingpage']
+          });
+        }}
+        onClose={handleClose}
+      />
+    </Sidebar.Root>
+
+    <Sidebar.Inset
+      class="relative h-screen! w-[calc(100vw-var(--sidebar-width))] overflow-y-auto group-data-[collapsible=icon]:w-[calc(100vw-var(--sidebar-width-icon))]"
+    >
+      <div class="absolute top-2 left-2 z-60">
+        <Sidebar.Trigger variant="secondary" />
+      </div>
+
+      <ThemeComponent {...previewProps} disableCourseLinks={true} />
+    </Sidebar.Inset>
+  </Sidebar.Provider>
+</div>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/org/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/org/+page.svelte
similarity index 92%
rename from apps/dashboard/src/routes/org/[slug]/settings/org/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/org/+page.svelte
index b0f6b4f9..0e3ffa2c 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/org/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/org/+page.svelte
@@ -24,6 +24,7 @@
 <Page.Header isSticky>
   <Page.HeaderContent>
     <Page.Title>{$t('settings.organization.organization_profile.heading')}</Page.Title>
+    <Page.Subtitle>{$t('settings.organization.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
   <Page.Action>
     <Button variant="default" {loading} disabled={loading} onclick={handleUpdate}>
diff --git a/apps/dashboard/src/routes/org/[slug]/settings/teams/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/teams/+page.svelte
similarity index 86%
rename from apps/dashboard/src/routes/org/[slug]/settings/teams/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/settings/teams/+page.svelte
index f3818d73..4aafefa2 100644
--- a/apps/dashboard/src/routes/org/[slug]/settings/teams/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/teams/+page.svelte
@@ -11,6 +11,7 @@
 <Page.Header>
   <Page.HeaderContent>
     <Page.Title>{$t('upgrade.team_members')}</Page.Title>
+    <Page.Subtitle>{$t('settings.teams.page_subtitle')}</Page.Subtitle>
   </Page.HeaderContent>
 </Page.Header>
 <Page.Body>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/setup/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/setup/+page.server.ts
new file mode 100644
index 00000000..78004efe
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/setup/+page.server.ts
@@ -0,0 +1,20 @@
+import { classroomio, getApiHeaders, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+type GetOrganizationSetupRequest = typeof classroomio.organization.setup.$get;
+type GetOrganizationSetupSuccess = Extract<InferResponseType<GetOrganizationSetupRequest>, { success: true }>;
+
+export const load = async ({ params, parent, cookies }) => {
+  const { orgId } = await parent();
+  const siteName = params.slug || '';
+
+  const result = await safeServerApi<GetOrganizationSetupSuccess>(() =>
+    classroomio.organization.setup.$get({ query: { siteName } }, getApiHeaders(cookies, orgId))
+  );
+  const setupProgress = result.ok ? result.body.data : null;
+
+  return {
+    orgSiteName: siteName,
+    setupProgress
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/setup/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/setup/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/setup/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/setup/+page.svelte
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/tags/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/tags/+page.server.ts
new file mode 100644
index 00000000..c1083082
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/tags/+page.server.ts
@@ -0,0 +1,28 @@
+import type { GetTagGroupsSuccess } from '$features/tag/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+import { redirect } from '@sveltejs/kit';
+
+export const load = async ({ parent, cookies, params }) => {
+  const { orgId } = await parent();
+
+  if (!orgId) {
+    return {
+      initialTagGroups: [],
+      orgSlug: params.slug
+    };
+  }
+
+  const result = await safeServerApi<GetTagGroupsSuccess>(() =>
+    classroomio.organization.tags.$get({}, getApiHeaders(cookies, orgId))
+  );
+
+  if (!result.ok && (result.status === 401 || result.status === 403)) {
+    throw redirect(302, `/org/${params.slug}`);
+  }
+
+  return {
+    initialTagGroups: result.ok ? result.body.data : [],
+    orgSlug: params.slug
+  };
+};
diff --git a/apps/dashboard/src/routes/org/[slug]/tags/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/tags/+page.svelte
similarity index 100%
rename from apps/dashboard/src/routes/org/[slug]/tags/+page.svelte
rename to apps/dashboard/src/routes/(app)/org/[slug]/tags/+page.svelte
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/zapier/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/zapier/+page.svelte
new file mode 100644
index 00000000..cac53647
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/zapier/+page.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { ZapierAutomationPage } from '$features/automation/pages';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Page from '@cio/ui/base/page';
+</script>
+
+<svelte:head>
+  <title>{t.get('automation.tabs.zapier')} - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="mx-auto w-full max-w-4xl">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('automation.tabs.zapier')}</Page.Title>
+      <Page.Subtitle>{$t('automation.zapier.page_subtitle')}</Page.Subtitle>
+    </Page.HeaderContent>
+  </Page.Header>
+
+  <Page.Body>
+    {#snippet child()}
+      <ZapierAutomationPage />
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/+layout.server.ts b/apps/dashboard/src/routes/(app)/programs/[id]/+layout.server.ts
new file mode 100644
index 00000000..afd101b8
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/+layout.server.ts
@@ -0,0 +1,5 @@
+export const load = async ({ params }) => {
+  return {
+    programId: params.id
+  };
+};
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/+layout.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/+layout.svelte
new file mode 100644
index 00000000..25e84810
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/+layout.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { ProgramSidebar } from '$features/program/components/sidebar';
+  import ProgramHeader from '$features/program/components/program-header.svelte';
+  import { programApi } from '$features/program/api';
+  import { profile } from '$lib/utils/store/user';
+
+  interface Props {
+    children?: import('svelte').Snippet;
+    data: {
+      programId: string;
+    };
+  }
+
+  let { children, data }: Props = $props();
+
+  $effect(() => {
+    if (!data.programId || !$profile.id) return;
+    programApi.ensureProgramShell(data.programId);
+  });
+
+  const isProgramReady = $derived.by(() => {
+    return (
+      programApi.program?.id === data.programId &&
+      programApi.loadedMembersProgramId === data.programId &&
+      programApi.loadedCoursesProgramId === data.programId
+    );
+  });
+</script>
+
+<svelte:head>
+  <title>{programApi.program?.name || 'Program'} - ClassroomIO</title>
+</svelte:head>
+
+<Sidebar.Provider data-sveltekit-preload-data="off">
+  <ProgramSidebar path={page.url.pathname} id={data.programId} {isProgramReady} />
+
+  <Sidebar.Inset
+    class="w-[calc(100vw-var(--sidebar-width))] group-data-[collapsible=icon]:w-[calc(100vw-var(--sidebar-width-icon))]"
+  >
+    <ProgramHeader />
+
+    {#if !isProgramReady}
+      <div class="mx-auto flex h-[calc(100vh-56px)] w-full items-center justify-center">
+        <Empty
+          title="Loading program..."
+          description="Please wait while we load your program data."
+          icon={Spinner}
+          iconClass="h-8 w-8"
+          variant="page"
+        />
+      </div>
+    {:else}
+      {@render children?.()}
+    {/if}
+  </Sidebar.Inset>
+</Sidebar.Provider>
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte
new file mode 100644
index 00000000..092934f1
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte
@@ -0,0 +1,209 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import * as Table from '@cio/ui/base/table';
+  import * as Page from '@cio/ui/base/page';
+  import * as Alert from '@cio/ui/base/alert';
+  import { Search } from '@cio/ui/custom/search';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { Button } from '@cio/ui/base/button';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { CourseCard } from '$features/course/components';
+  import { DeleteModal } from '$features/ui';
+  import CoursePublishBadge from '$features/course/components/course-publish-badge.svelte';
+  import { courseMetaDeta } from '$features/course/utils/store';
+  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+  import GridIcon from '@lucide/svelte/icons/grid-2x2';
+  import ListIcon from '@lucide/svelte/icons/list';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Trash2Icon from '@lucide/svelte/icons/trash-2';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '$features/program/api';
+  import AddCourseToProgramModal from '$features/program/components/add-course-to-program-modal.svelte';
+  import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
+
+  let { data } = $props();
+
+  let showAddCourseModal = $state(false);
+  let showDeleteModal = $state(false);
+  let courseToDeleteId = $state<string | null>(null);
+  let searchValue = $state('');
+
+  const courses = $derived(programApi.courses);
+  const filteredCourses = $derived.by(() => {
+    const normalizedSearch = searchValue.trim().toLowerCase();
+    if (!normalizedSearch) {
+      return courses;
+    }
+
+    return courses.filter((item) =>
+      [item.course.title, item.course.description].some((value) => value?.toLowerCase().includes(normalizedSearch))
+    );
+  });
+
+  const courseCards = $derived(
+    filteredCourses.map((item) => ({
+      id: item.course.id,
+      slug: item.course.slug ?? '',
+      logo: item.course.coverImage,
+      title: item.course.title ?? '',
+      description: item.course.description ?? '',
+      lessonCount: 0,
+      totalStudents: 0,
+      isPublished: item.course.isPublished ?? false,
+      tags: []
+    }))
+  );
+
+  function setViewPreference(preference: 'grid' | 'list') {
+    $courseMetaDeta.view = preference;
+    if (browser) {
+      localStorage.setItem('courseView', preference);
+    }
+  }
+
+  function openDeleteModal(courseId: string) {
+    courseToDeleteId = courseId;
+    showDeleteModal = true;
+  }
+
+  async function handleRemoveCourse() {
+    if (!courseToDeleteId) return;
+
+    await programApi.removeCourse(data.programId, courseToDeleteId);
+    showDeleteModal = false;
+    courseToDeleteId = null;
+  }
+
+  function openCourse(courseId: string) {
+    goto(resolve(`/courses/[id]`, { id: courseId }));
+  }
+
+  onMount(() => {
+    const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;
+
+    if (courseView) {
+      $courseMetaDeta.view = courseView;
+    }
+  });
+</script>
+
+<Page.Root class="mx-auto flex w-[90%] px-4 md:max-w-5xl">
+  <Page.Header>
+    <Page.HeaderContent class="min-w-0 flex-1">
+      <Page.Title>{$t('programs.sidebar.courses') || 'Courses'}</Page.Title>
+      <Alert.Callout
+        variant="information"
+        title={$t('programs.courses.published_access_callout_title')}
+        description={$t('programs.courses.published_access_callout_description')}
+        class="mt-3 w-full"
+      />
+    </Page.HeaderContent>
+    <Page.Action>
+      <Button onclick={() => (showAddCourseModal = true)}>
+        <Plus size={16} />
+        {$t('programs.courses.add') || 'Add Course'}
+      </Button>
+    </Page.Action>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <Page.BodyHeader align="right" class="p-0!">
+        <Search placeholder={$t('courses.search_placeholder')} bind:value={searchValue} />
+
+        {#if $courseMetaDeta.view === 'list'}
+          <IconButton onclick={() => setViewPreference('grid')}>
+            <GridIcon size={16} />
+          </IconButton>
+        {:else}
+          <IconButton onclick={() => setViewPreference('list')}>
+            <ListIcon size={16} />
+          </IconButton>
+        {/if}
+      </Page.BodyHeader>
+
+      {#if filteredCourses.length === 0}
+        <Empty
+          title={$t('programs.courses.empty_title') || 'No courses yet'}
+          description={searchValue.trim()
+            ? $t('programs.courses.no_matching_program_courses') || 'No program courses match your search.'
+            : $t('programs.courses.empty_description') || 'Add courses to this program.'}
+          icon={BookOpenIcon}
+          variant="page"
+        >
+          {#if !searchValue.trim()}
+            <Button onclick={() => (showAddCourseModal = true)}>
+              <Plus size={16} />
+              {$t('programs.courses.add') || 'Add Course'}
+            </Button>
+          {/if}
+        </Empty>
+      {:else if $courseMetaDeta.view === 'list'}
+        <div class="mt-4 w-full overflow-hidden rounded-md border">
+          <Table.Root class="w-full table-fixed">
+            <Table.Header>
+              <Table.Row>
+                <Table.Head class="w-[28%]">{$t('courses.course_card.list_view.title')}</Table.Head>
+                <Table.Head class="w-[44%]">{$t('courses.course_card.list_view.description')}</Table.Head>
+                <Table.Head class="w-[10%]">{$t('courses.course_card.list_view.published')}</Table.Head>
+                <Table.Head class="w-[8%]"></Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each filteredCourses as item (item.id)}
+                <Table.Row class="cursor-pointer" onclick={() => openCourse(item.course.id)}>
+                  <Table.Cell class="truncate">
+                    <p class="font-semibold">{item.course.title}</p>
+                  </Table.Cell>
+                  <Table.Cell class="truncate">
+                    <p>{item.course.description}</p>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <CoursePublishBadge isPublished={item.course.isPublished ?? false} />
+                  </Table.Cell>
+                  <Table.Cell class="text-center">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      class="text-muted-foreground hover:text-destructive"
+                      onclick={(event) => {
+                        event.stopPropagation();
+                        openDeleteModal(item.courseId);
+                      }}
+                    >
+                      <Trash2Icon size={16} />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      {:else}
+        <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {#each courseCards as course (course.id)}
+            <CourseCard {course} href={`/courses/${course.id}`}>
+              {#snippet actions()}
+                <Button
+                  variant="outline"
+                  size="icon"
+                  class="text-muted-foreground hover:text-destructive absolute! top-6 right-6 z-40"
+                  onclick={(event) => {
+                    event.stopPropagation();
+                    openDeleteModal(course.id);
+                  }}
+                >
+                  <Trash2Icon size={16} />
+                </Button>
+              {/snippet}
+            </CourseCard>
+          {/each}
+        </div>
+      {/if}
+    {/snippet}
+  </Page.Body>
+</Page.Root>
+
+<AddCourseToProgramModal bind:open={showAddCourseModal} programId={data.programId} />
+<DeleteModal bind:open={showDeleteModal} onDelete={handleRemoveCourse} isLoading={programApi.isLoading} />
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
new file mode 100644
index 00000000..b636b8ab
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { onMount } from 'svelte';
+  import * as Page from '@cio/ui/base/page';
+  import { Button } from '@cio/ui/base/button';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { NewsFeedLoader } from '$features/course/components/newsfeed';
+  import { NewFeedModal, NewsFeedCard } from '$features/program/components/newsfeed';
+  import { programApi, programNewsfeedApi } from '$features/program/api';
+  import { t } from '$lib/utils/functions/translations';
+  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { ROLE } from '@cio/utils/constants';
+  import type { ProgramNewsfeedItem } from '$features/program/utils/types';
+  import PinIcon from '@lucide/svelte/icons/pin';
+  import { BookIcon } from '@lucide/svelte';
+  import { buildNextNewsfeedReaction } from '@cio/ui/custom/newsfeed-reactions';
+
+  interface Props {
+    data: {
+      programId: string;
+    };
+  }
+
+  let { data }: Props = $props();
+
+  const programId = data.programId;
+
+  let edit = $state(false);
+  let editFeed: ProgramNewsfeedItem | null = $state(null);
+  let isListing = $state(true);
+  let isReactingByFeedId = $state<Record<string, boolean>>({});
+
+  const query = new URLSearchParams(page.url.search);
+  const activeFeedId = query.get('feedId') || '';
+
+  const currentProgramMember = $derived.by(
+    () => programApi.members.find((member) => member.profile?.id === $profile.id) ?? null
+  );
+
+  const reactionAuthorId = $derived(currentProgramMember?.id || '');
+
+  const currentProgramRoleId = $derived(currentProgramMember?.roleId || null);
+
+  const author = $derived({
+    id: $profile.id || '',
+    username: $profile.username || '',
+    fullname: $profile.fullname || '',
+    avatarUrl: $profile.avatarUrl || ''
+  });
+
+  const canCreateNewsfeed = $derived(
+    Boolean($isOrgAdmin) || currentProgramRoleId === ROLE.ADMIN || currentProgramRoleId === ROLE.TUTOR
+  );
+  const canManageNewsfeed = $derived(Boolean($isOrgAdmin) || canCreateNewsfeed);
+  const canComment = $derived(Boolean(reactionAuthorId));
+
+  const sortedFeeds = $derived.by(() => {
+    return [...programNewsfeedApi.feeds].sort((firstFeed, secondFeed) => {
+      return Number(Boolean(secondFeed.isPinned)) - Number(Boolean(firstFeed.isPinned));
+    });
+  });
+
+  const loadNewsfeed = async () => {
+    isListing = true;
+
+    try {
+      await programNewsfeedApi.list(programId);
+    } finally {
+      isListing = false;
+    }
+  };
+
+  const deleteComment = async (feedId: string, commentId: string) => {
+    await programNewsfeedApi.deleteComment(programId, feedId, commentId);
+  };
+
+  const addNewReaction = async (reactionType: string, feedId: string, authorId: string) => {
+    if (!authorId || isReactingByFeedId[feedId]) return;
+
+    const reactedFeed = programNewsfeedApi.feeds.find((feed) => feed.id === feedId);
+    if (!reactedFeed) return;
+
+    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction, reactionType, authorId);
+
+    isReactingByFeedId = { ...isReactingByFeedId, [feedId]: true };
+
+    try {
+      await programNewsfeedApi.react(programId, feedId, updatedReaction);
+    } finally {
+      isReactingByFeedId = { ...isReactingByFeedId, [feedId]: false };
+    }
+  };
+
+  const addNewComment = async (comment: string, feedId: string) => {
+    await programNewsfeedApi.createComment(programId, feedId, comment, author);
+  };
+
+  const onPin = async (feedId: string, isPinned: boolean | null) => {
+    await programNewsfeedApi.update(programId, feedId, { isPinned: !isPinned });
+  };
+
+  const deleteFeed = async (feedId: string) => {
+    await programNewsfeedApi.delete(programId, feedId);
+  };
+
+  onMount(async () => {
+    await loadNewsfeed();
+  });
+</script>
+
+<Page.Root class="mx-auto flex w-[90%] px-4 md:max-w-2xl lg:max-w-3xl">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('programs.sidebar.newsfeed')}</Page.Title>
+    </Page.HeaderContent>
+    <Page.Action>
+      {#if canCreateNewsfeed}
+        <Button onclick={() => programNewsfeedApi.openNewFeedModal()}>
+          {$t('programs.newsfeed.post')}
+        </Button>
+      {/if}
+    </Page.Action>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <NewFeedModal {programId} bind:edit bind:editFeed />
+
+      {#if isListing}
+        <div class="flex w-full flex-col items-center">
+          <NewsFeedLoader />
+          <NewsFeedLoader />
+          <NewsFeedLoader />
+        </div>
+      {:else if !sortedFeeds.length}
+        <Empty
+          title={$t('programs.newsfeed.empty_title')}
+          description={$t('programs.newsfeed.empty_description')}
+          icon={BookIcon}
+          variant="page"
+        >
+          {#if canCreateNewsfeed}
+            <Button onclick={() => programNewsfeedApi.openNewFeedModal()}>
+              {$t('programs.newsfeed.post')}
+            </Button>
+          {/if}
+        </Empty>
+      {:else}
+        {#each sortedFeeds as feed (feed.id)}
+          {#if feed.isPinned}
+            <div class="flex items-center gap-2">
+              <PinIcon size={16} class="filled" />
+              <p class="text-sm">{$t('programs.newsfeed.pinned')}</p>
+            </div>
+          {/if}
+
+          <NewsFeedCard
+            {feed}
+            comments={programNewsfeedApi.commentsByFeedId[feed.id]}
+            {programId}
+            {author}
+            {reactionAuthorId}
+            {canComment}
+            canManageFeed={canManageNewsfeed}
+            {deleteFeed}
+            {deleteComment}
+            {addNewComment}
+            {addNewReaction}
+            {onPin}
+            bind:edit
+            bind:editFeed
+            isActive={activeFeedId === feed.id}
+            isReacting={Boolean(isReactingByFeedId[feed.id])}
+          />
+        {/each}
+      {/if}
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/people/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/people/+page.svelte
new file mode 100644
index 00000000..0bbc2715
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/people/+page.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import * as Avatar from '@cio/ui/base/avatar';
+  import { Badge } from '@cio/ui/base/badge';
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import * as Page from '@cio/ui/base/page';
+  import * as Select from '@cio/ui/base/select';
+  import * as Table from '@cio/ui/base/table';
+  import { Search } from '@cio/ui/custom/search';
+  import { Chip } from '@cio/ui/custom/chip';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import PlusIcon from '@lucide/svelte/icons/plus';
+  import TrashIcon from '@lucide/svelte/icons/trash';
+  import UserIcon from '@lucide/svelte/icons/user';
+  import { t } from '$lib/utils/functions/translations';
+  import { shortenName } from '$lib/utils/functions/string';
+  import { ROLE } from '@cio/utils/constants';
+  import { ROLE_LABEL } from '$lib/utils/constants/roles';
+  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import InviteMembersModal from '$features/program/components/invite-members-modal.svelte';
+  import { programApi } from '$features/program/api';
+
+  let { data } = $props();
+
+  let memberToDelete = $state<(typeof programApi.members)[number] | null>(null);
+  let isDeleteModalOpen = $state(false);
+  let filterBy = $state('all');
+  let searchValue = $state('');
+  let copiedEmail = $state<string | null>(null);
+
+  const members = $derived(sortAndFilterPeople(programApi.members, filterBy));
+  const currentUserRole = $derived.by(() => {
+    const currentMember = programApi.members.find((member) => member.profileId === $profile.id);
+    return currentMember ? Number(currentMember.roleId) : null;
+  });
+  const canManageMembers = $derived.by(
+    () => Boolean($isOrgAdmin) || currentUserRole === ROLE.ADMIN || currentUserRole === ROLE.TUTOR
+  );
+  const selectOptions = $derived([
+    { label: $t('course.navItem.people.roles.filter'), value: 'all' },
+    { label: $t(ROLE_LABEL[ROLE.TUTOR]), value: `${ROLE.TUTOR}` },
+    { label: $t(ROLE_LABEL[ROLE.STUDENT]), value: `${ROLE.STUDENT}` }
+  ]);
+
+  function sortAndFilterPeople(people: typeof programApi.members, activeFilter: string) {
+    return [...(people || [])]
+      .filter((person) => {
+        if (activeFilter === 'all') {
+          return true;
+        }
+
+        return Number(person.roleId) === Number(activeFilter);
+      })
+      .sort((a, b) => new Date(a.createdAt || '').getTime() - new Date(b.createdAt || '').getTime())
+      .sort((a, b) => Number(a.roleId) - Number(b.roleId));
+  }
+
+  function filterPeople(query: string, people: typeof programApi.members) {
+    const normalizedQuery = query.toLowerCase();
+
+    return people.filter((person) => {
+      const fullname = person.profile?.fullname?.toLowerCase() ?? '';
+      const email = getEmail(person).toLowerCase();
+      return fullname.includes(normalizedQuery) || email.includes(normalizedQuery);
+    });
+  }
+
+  function getEmail(person: (typeof programApi.members)[number]) {
+    return person.profile?.email ?? person.email ?? '';
+  }
+
+  function obscureEmail(email: string) {
+    const [username = '', domain = ''] = email.split('@');
+    if (username.length <= 2) {
+      return email;
+    }
+
+    const obscuredUsername =
+      username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
+
+    return `${obscuredUsername}@${domain}`;
+  }
+
+  function getRoleLabel(roleId: number) {
+    if (roleId === ROLE.ADMIN) {
+      return $t(ROLE_LABEL[ROLE.ADMIN]);
+    }
+
+    if (roleId === ROLE.TUTOR) {
+      return $t(ROLE_LABEL[ROLE.TUTOR]);
+    }
+
+    return $t(ROLE_LABEL[ROLE.STUDENT]);
+  }
+
+  async function copyToClipboard(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      copiedEmail = text;
+      setTimeout(() => {
+        copiedEmail = null;
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to copy email:', error);
+    }
+  }
+
+  async function deletePerson() {
+    if (!memberToDelete) {
+      return;
+    }
+
+    programApi.success = false;
+
+    await programApi.removeMember(data.programId, memberToDelete.id);
+    if (programApi.success) {
+      isDeleteModalOpen = false;
+      memberToDelete = null;
+    }
+  }
+
+  function openInviteModal() {
+    goto(resolve(`${page.url.pathname}?add=true`, {}));
+  }
+</script>
+
+<Page.Root class="mx-auto w-[90%] md:max-w-3xl">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>{$t('programs.sidebar.people')}</Page.Title>
+    </Page.HeaderContent>
+    <Page.Action>
+      {#if canManageMembers}
+        <Button onclick={openInviteModal}>
+          <PlusIcon size={16} />
+          {$t('programs.people.invite')}
+        </Button>
+      {/if}
+    </Page.Action>
+  </Page.Header>
+
+  <Page.Body>
+    {#snippet child()}
+      <section class="space-y-2">
+        <div class="flex flex-col items-center justify-end gap-2 md:flex-row">
+          <Search placeholder={$t('course.navItem.people.search')} bind:value={searchValue} />
+          <Select.Root type="single" name="roles" bind:value={filterBy}>
+            <Select.Trigger class="max-w-[100px]">
+              {selectOptions.find((option) => option.value === filterBy)?.label}
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Group>
+                {#each selectOptions as option (option.value)}
+                  <Select.Item value={option.value} label={option.label} disabled={option.value === filterBy}>
+                    {option.label}
+                  </Select.Item>
+                {/each}
+              </Select.Group>
+            </Select.Content>
+          </Select.Root>
+        </div>
+
+        <div class="rounded-md border">
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head>{$t('course.navItem.people.name')}</Table.Head>
+                <Table.Head>{$t('course.navItem.people.role')}</Table.Head>
+                <Table.Head>{$t('course.navItem.people.action')}</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each filterPeople(searchValue, members) as person}
+                <Table.Row>
+                  <Table.Cell class="w-4/6 md:w-3/6">
+                    {#if person.profile}
+                      <div class="flex items-start lg:items-center">
+                        <Avatar.Root class="mr-3">
+                          {#if person.profile.avatarUrl}
+                            <Avatar.Image
+                              src={person.profile.avatarUrl}
+                              alt={person.profile.fullname ? person.profile.fullname : 'User'}
+                            />
+                          {/if}
+                          <Avatar.Fallback>
+                            <UserIcon class="ui:size-4 ui:text-muted-foreground" />
+                          </Avatar.Fallback>
+                        </Avatar.Root>
+                        <div class="flex flex-col items-start lg:flex-row lg:items-center">
+                          <div class="mr-2">
+                            <p class="text-base font-normal dark:text-white">
+                              {person.profile.fullname}
+                            </p>
+                            <p class="ui:text-primary line-clamp-1 text-xs">
+                              {obscureEmail(getEmail(person))}
+                            </p>
+                          </div>
+                          <div class="flex items-center">
+                            {#if canManageMembers}
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                class="h-8 w-8"
+                                onclick={() => copyToClipboard(getEmail(person))}
+                              >
+                                {#if copiedEmail === getEmail(person)}
+                                  <CheckIcon size={16} class="text-green-600" />
+                                {:else}
+                                  <CopyIcon size={16} />
+                                {/if}
+                              </Button>
+                            {/if}
+                            {#if person.profileId === $profile.id}
+                              <Badge variant="secondary">{$t('course.navItem.people.you')}</Badge>
+                            {/if}
+                          </div>
+                        </div>
+                      </div>
+                    {:else}
+                      <div class="flex w-2/4 items-start lg:items-center">
+                        <Chip value={shortenName(person.email ?? '')} className="mr-3" />
+                        <a href={`mailto:${person.email ?? ''}`} class="text-md ui:text-primary mr-2 dark:text-white">
+                          {person.email}
+                        </a>
+                        <div class="flex items-center justify-between">
+                          {#if canManageMembers}
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              class="h-8 w-8"
+                              onclick={() => copyToClipboard(getEmail(person))}
+                            >
+                              {#if copiedEmail === getEmail(person)}
+                                <CheckIcon size={16} class="text-green-600" />
+                              {:else}
+                                <CopyIcon size={16} />
+                              {/if}
+                            </Button>
+                          {/if}
+
+                          <Chip value={$t('course.navItem.people.pending')} className="bg-yellow-200 text-yellow-700" />
+                        </div>
+                      </div>
+                    {/if}
+                  </Table.Cell>
+
+                  <Table.Cell class="w-1/4">
+                    <p class="w-1/4 text-center text-base font-normal dark:text-white">
+                      {getRoleLabel(Number(person.roleId))}
+                    </p>
+                  </Table.Cell>
+
+                  <Table.Cell class="w-1/4">
+                    {#if canManageMembers && person.profileId !== $profile.id}
+                      <div class="hidden space-x-2 sm:flex sm:items-center">
+                        <IconButton
+                          onclick={() => {
+                            memberToDelete = person;
+                            isDeleteModalOpen = true;
+                          }}
+                        >
+                          <TrashIcon size={16} />
+                        </IconButton>
+                      </div>
+                    {/if}
+                  </Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      </section>
+    {/snippet}
+  </Page.Body>
+</Page.Root>
+
+<InviteMembersModal programId={data.programId} />
+
+<Dialog.Root bind:open={isDeleteModalOpen}>
+  <Dialog.Content class="w-96 pt-3">
+    <Dialog.Header class="px-5 py-2">
+      <Dialog.Title>{$t('course.navItem.people.delete_confirmation.title')}</Dialog.Title>
+    </Dialog.Header>
+    <div>
+      <p class="mt-0 text-base dark:text-white">
+        {$t('course.navItem.people.delete_confirmation.sure')}
+        <strong>{memberToDelete ? getEmail(memberToDelete) : ''}</strong>?
+      </p>
+
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={() => (isDeleteModalOpen = false)}>
+          {$t('course.navItem.people.delete_confirmation.no')}
+        </Button>
+        <Button variant="outline" onclick={deletePerson} loading={programApi.isLoading}>
+          {$t('course.navItem.people.delete_confirmation.yes')}
+        </Button>
+      </div>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/settings/+page.svelte
new file mode 100644
index 00000000..87c1720a
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/settings/+page.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+  import * as Page from '@cio/ui/base/page';
+  import { Button } from '@cio/ui/base/button';
+  import { Input } from '@cio/ui/base/input';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import { Label } from '@cio/ui/base/label';
+  import * as Select from '@cio/ui/base/select';
+  import { Separator } from '@cio/ui/base/separator';
+  import { t } from '$lib/utils/functions/translations';
+  import { programApi } from '$features/program/api';
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { currentOrgPath } from '$lib/utils/store/org';
+
+  let { data } = $props();
+  const programId = data.programId as string;
+
+  let name = $state('');
+  let description = $state('');
+  let status = $state<'ACTIVE' | 'INACTIVE' | 'ARCHIVED'>('ACTIVE');
+  let isSaving = $state(false);
+
+  $effect(() => {
+    const p = programApi.program;
+    if (p) {
+      name = p.name;
+      description = p.description ?? '';
+      status = (p.status as 'ACTIVE' | 'INACTIVE' | 'ARCHIVED') ?? 'ACTIVE';
+    }
+  });
+
+  const statusOptions = [
+    { value: 'ACTIVE', label: $t('programs.status.active') || 'Active' },
+    { value: 'INACTIVE', label: $t('programs.status.inactive') || 'Inactive' },
+    { value: 'ARCHIVED', label: $t('programs.status.archived') || 'Archived' }
+  ];
+
+  const hasUnsavedChanges = $derived.by(() => {
+    const currentProgram = programApi.program;
+    if (!currentProgram) {
+      return false;
+    }
+
+    return (
+      name.trim() !== currentProgram.name ||
+      description.trim() !== (currentProgram.description ?? '') ||
+      status !== ((currentProgram.status as 'ACTIVE' | 'INACTIVE' | 'ARCHIVED') ?? 'ACTIVE')
+    );
+  });
+
+  async function handleSave() {
+    isSaving = true;
+
+    try {
+      await programApi.updateProgram(programId, {
+        name: name.trim() || undefined,
+        description: description.trim() || null,
+        status
+      });
+    } finally {
+      isSaving = false;
+    }
+  }
+
+  async function handleDelete() {
+    if (
+      !confirm(
+        $t('programs.settings.confirm_delete') || 'Are you sure you want to delete this program? This cannot be undone.'
+      )
+    ) {
+      return;
+    }
+    await programApi.deleteProgram(programId);
+    goto(resolve(`${$currentOrgPath}/programs`, {}));
+  }
+</script>
+
+<Page.Root class="mx-auto flex w-[90%] px-4 md:max-w-2xl lg:max-w-3xl">
+  <Page.Header class="sticky top-13 z-10 bg-white">
+    <Page.HeaderContent>
+      <Page.Title>{$t('programs.sidebar.settings') || 'Settings'}</Page.Title>
+    </Page.HeaderContent>
+    <Page.Action>
+      <Button variant="secondary" loading={isSaving} disabled={isSaving || !hasUnsavedChanges} onclick={handleSave}>
+        {$t('programs.settings.save') || 'Save Changes'}
+      </Button>
+    </Page.Action>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <div class="w-full px-4 py-6">
+        <div class="flex flex-col gap-6">
+          <section>
+            <h2 class="mb-4 text-sm font-semibold">{$t('programs.settings.general') || 'General'}</h2>
+            <div class="flex flex-col gap-4">
+              <div class="flex flex-col gap-1.5">
+                <Label for="prog-name">{$t('programs.settings.name_label') || 'Name'} *</Label>
+                <Input id="prog-name" bind:value={name} maxlength={255} />
+              </div>
+
+              <div class="flex flex-col gap-1.5">
+                <Label for="prog-desc">{$t('programs.settings.description_label') || 'Description'}</Label>
+                <Textarea id="prog-desc" bind:value={description} rows={4} maxlength={2000} />
+              </div>
+
+              <div class="flex flex-col gap-1.5">
+                <Label>{$t('programs.settings.status_label') || 'Status'}</Label>
+                <Select.Root type="single" bind:value={status}>
+                  <Select.Trigger class="w-48">
+                    {statusOptions.find((o) => o.value === status)?.label}
+                  </Select.Trigger>
+                  <Select.Content style="z-index: 500 !important">
+                    {#each statusOptions as option (option.value)}
+                      <Select.Item value={option.value}>{option.label}</Select.Item>
+                    {/each}
+                  </Select.Content>
+                </Select.Root>
+              </div>
+            </div>
+          </section>
+
+          <Separator />
+
+          <section>
+            <h2 class="mb-1 text-sm font-semibold text-red-600">
+              {$t('programs.settings.danger_zone') || 'Danger Zone'}
+            </h2>
+            <p class="text-muted-foreground mb-4 text-sm">
+              {$t('programs.settings.delete_description') ||
+                'Once deleted, this program and all its data cannot be recovered.'}
+            </p>
+            <Button variant="destructive" onclick={handleDelete} disabled={programApi.isLoading}>
+              {$t('programs.settings.delete') || 'Delete Program'}
+            </Button>
+          </section>
+        </div>
+      </div>
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(org-site)/+layout.svelte b/apps/dashboard/src/routes/(org-site)/+layout.svelte
new file mode 100644
index 00000000..18923a8a
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/+layout.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { AccountOrg } from '$features/app/types';
+  import { PageRestricted } from '$features/ui';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { user } from '$lib/utils/store/user';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    children?: import('svelte').Snippet;
+    data: {
+      isOrgSite: boolean;
+      orgSiteName: string;
+      org: AccountOrg | null;
+      locals: App.Locals;
+    };
+  }
+
+  let { children, data }: Props = $props();
+
+  onMount(() => {
+    const loadingIndicator = document.getElementById('app-loading-indicator');
+    if (loadingIndicator) {
+      loadingIndicator.style.display = 'none';
+    }
+
+    if (data?.locals?.user) {
+      user.set({
+        ...$user,
+        isLoggedIn: true,
+        currentSession: data.locals.user
+      });
+    }
+
+    if (!data.isOrgSite || !data.org) return;
+
+    $globalStore.orgSiteName = data.orgSiteName || '';
+    $globalStore.isOrgSite = data.isOrgSite;
+
+    currentOrg.set(data.org);
+    setTheme(data.org.theme || 'blue');
+  });
+</script>
+
+{#if data.org?.isRestricted || $currentOrg.isRestricted}
+  <PageRestricted />
+{:else}
+  {@render children?.()}
+{/if}
diff --git a/apps/dashboard/src/routes/(org-site)/+layout.ts b/apps/dashboard/src/routes/(org-site)/+layout.ts
new file mode 100644
index 00000000..207d5ab7
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/+layout.ts
@@ -0,0 +1,3 @@
+export const load = async ({ parent }) => {
+  return await parent();
+};
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts
new file mode 100644
index 00000000..ac8d391e
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts
@@ -0,0 +1,87 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+import type { GetCourseBySlugRequest } from '$features/course/utils/types';
+import type { GetOrganizationRequest } from '$features/org/utils/types';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+
+type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
+type GetOrganizationSuccess = Extract<InferResponseType<GetOrganizationRequest>, { success: true }>;
+
+export const load = async ({ params = { slug: '' }, parent }) => {
+  const { org: parentOrg } = await parent();
+
+  const courseResult = await safeServerApi<GetCourseBySlugSuccess>(() =>
+    classroomio.course.slug[':slug'].$get(
+      {
+        param: { slug: params.slug }
+      },
+      getApiKeyHeaders()
+    )
+  );
+
+  if (!courseResult.ok || !courseResult.body.data) {
+    console.error('Failed to fetch course:', courseResult);
+
+    return {
+      slug: params.slug,
+      course: null,
+      org: parentOrg ?? null,
+      pageMetaTags: null
+    };
+  }
+
+  const course = courseResult.body.data;
+
+  let org = parentOrg ?? null;
+  if (!org && course.org?.siteName) {
+    const organizationResult = await safeServerApi<GetOrganizationSuccess>(() =>
+      classroomio.organization.$get(
+        {
+          query: { siteName: course.org.siteName }
+        },
+        getApiKeyHeaders()
+      )
+    );
+
+    if (organizationResult.ok) {
+      org = organizationResult.body.data[0] ?? null;
+    } else {
+      console.error('Failed to fetch course organization:', organizationResult);
+    }
+  }
+
+  const pageMetaTags = Object.freeze({
+    title: course.title,
+    description: course.description,
+    openGraph: {
+      title: course.title,
+      description: course.description,
+      images: [
+        {
+          url: course.logo || '',
+          alt: course.title,
+          width: 280,
+          height: 200,
+          secureUrl: course.logo,
+          type: 'image/jpeg'
+        }
+      ]
+    },
+    twitter: {
+      handle: '@classroomio',
+      site: '@classroomio',
+      cardType: 'summary_large_image' as const,
+      title: course.title,
+      description: course.description,
+      image: course.logo,
+      imageAlt: 'ClassroomIO OG Image'
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    slug: params.slug,
+    course,
+    org,
+    pageMetaTags
+  };
+};
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte
new file mode 100644
index 00000000..26b698db
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { resolve } from '$app/paths';
+  import { onMount } from 'svelte';
+
+  import { basePath } from '$lib/utils/store/app';
+  import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';
+  import { CourseLandingPage } from '$features/ui';
+  import { PoweredBy } from '$features/ui';
+  import { normalizeLandingPageSettings, importThemeComponent } from '$features/org/utils/landing-page';
+
+  import { OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
+  import type { Component } from 'svelte';
+
+  let { data } = $props();
+
+  const landingSettings = $derived(normalizeLandingPageSettings(data.org?.landingpage));
+
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
+
+  const shellClass = $derived(
+    landingSettings.theme === 'classic'
+      ? 'ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans'
+      : 'ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans'
+  );
+
+  const courseHero = $derived.by(() => {
+    if (!data.course) {
+      return landingSettings.hero;
+    }
+
+    return {
+      ...landingSettings.hero,
+      heading: data.course.title,
+      subheading: data.course.description || landingSettings.hero.subheading,
+      primaryAction: {
+        label: t.get('course.navItem.landing_page.start_course'),
+        href: resolve(`/course/${data.course.slug}/enroll`, {})
+      },
+      image: data.course.logo || landingSettings.hero.image
+    };
+  });
+
+  const orgName = $derived(data.org?.name ?? data.course?.org?.name ?? 'ClassroomIO');
+  const logoUrl = $derived(data.org?.avatarUrl ?? undefined);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let NavComponent = $state<Component<any> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let HeroComponent = $state<Component<any> | null>(null);
+
+  onMount(async () => {
+    const theme = landingSettings.theme;
+
+    const [navMod, heroMod] = await Promise.all([
+      theme === 'bold'
+        ? import('@cio/ui/custom/org-landing-page/bold/nav.svelte')
+        : theme === 'classic'
+          ? import('@cio/ui/custom/org-landing-page/classic/nav.svelte')
+          : import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
+      theme === 'bold'
+        ? import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
+        : theme === 'classic'
+          ? import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
+          : import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
+    ]);
+
+    NavComponent = navMod.default;
+    HeroComponent = heroMod.default;
+  });
+</script>
+
+{#if data.course}
+  <PoweredBy />
+
+  <main class={shellClass}>
+    {#if NavComponent && HeroComponent}
+      {#if landingSettings.theme === 'minimal'}
+        <HeroComponent hero={courseHero}>
+          {#snippet navigation()}
+            <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
+          {/snippet}
+        </HeroComponent>
+      {:else}
+        <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
+        <HeroComponent hero={courseHero} />
+      {/if}
+    {/if}
+
+    <CourseLandingPage courseData={data.course} showStandaloneShell={false} />
+
+    <OrgLandingPageFooter
+      {orgName}
+      {logoUrl}
+      footerLinks={landingSettings.footerLinks}
+      footerText={landingSettings.footerText}
+      variant={landingSettings.theme}
+    />
+  </main>
+{/if}
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts
new file mode 100644
index 00000000..20e0eee3
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts
@@ -0,0 +1,102 @@
+import type { GetCourseBySlugRequest } from '$features/course/utils/types';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+import { calcCourseDiscount } from '$lib/utils/functions/course';
+import { error } from '@sveltejs/kit';
+
+type GetStudentInvitePreviewRequest = (typeof classroomio.invite.student)[':token']['$get'];
+type GetStudentInvitePreviewSuccess = Extract<InferResponseType<GetStudentInvitePreviewRequest>, { success: true }>;
+type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
+
+export const load = async ({ params, url }) => {
+  const slug = params?.slug ?? '';
+  const inviteToken = url.searchParams.get('invite_token') ?? null;
+
+  if (!slug) {
+    throw error(404, 'Not found');
+  }
+
+  if (inviteToken) {
+    const inviteResult = await safeServerApi<GetStudentInvitePreviewSuccess>(() =>
+      classroomio.invite.student[':token'].$get({ param: { token: inviteToken } }, getApiKeyHeaders())
+    );
+
+    if (!inviteResult.ok || !inviteResult.body.data) {
+      console.error('Enroll load: failed to load invite', inviteResult);
+      throw error(404, 'Not found');
+    }
+
+    const data = inviteResult.body.data;
+    const course = {
+      id: data.course.id,
+      slug: data.course.slug,
+      title: data.course.title,
+      description: data.course.description,
+      cost: data.course.cost ?? 0,
+      allowNewStudent: data.course.allowNewStudent ?? true,
+      status: data.course.status,
+      isPublished: data.course.isPublished
+    };
+    const currentOrg = {
+      id: data.organization.id,
+      name: data.organization.name,
+      siteName: data.organization.siteName ?? '',
+      theme: data.organization.theme ?? undefined
+    };
+
+    return {
+      course,
+      currentOrg,
+      invite: data.invite,
+      inviteEmail: data.inviteContext?.recipientEmail ?? null,
+      inviteEmailExists: data.inviteContext?.recipientExists ?? false,
+      requiresPaymentOrInvite: false,
+      token: inviteToken
+    };
+  }
+
+  const courseResult = await safeServerApi<GetCourseBySlugSuccess>(() =>
+    classroomio.course.slug[':slug'].$get({
+      param: { slug }
+    })
+  );
+
+  if (!courseResult.ok || !courseResult.body.data) {
+    console.error('Enroll load: failed to load course by slug', courseResult);
+    throw error(404, 'Not found');
+  }
+
+  const courseData = courseResult.body.data;
+  const discount = (courseData.metadata as { discount?: number } | null)?.discount ?? 0;
+  const showDiscount = (courseData.metadata as { showDiscount?: boolean } | null)?.showDiscount ?? false;
+  const calculatedCost = calcCourseDiscount(discount, Number(courseData.cost ?? 0), showDiscount);
+  const isFree = calculatedCost <= 0;
+
+  const currentOrg = courseData.org
+    ? {
+        id: courseData.org.id,
+        name: courseData.org.name,
+        siteName: courseData.org.siteName ?? '',
+        theme: courseData.org.theme ?? undefined
+      }
+    : null;
+
+  const course = {
+    id: courseData.id,
+    slug: courseData.slug,
+    title: courseData.title,
+    description: courseData.description,
+    cost: courseData.cost ?? 0,
+    allowNewStudent: (courseData.metadata as { allowNewStudent?: boolean } | null)?.allowNewStudent ?? true,
+    status: courseData.status,
+    isPublished: courseData.isPublished
+  };
+
+  return {
+    course,
+    currentOrg,
+    invite: null,
+    requiresPaymentOrInvite: !isFree,
+    token: null as string | null
+  };
+};
diff --git a/apps/dashboard/src/routes/course/[slug]/enroll/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
similarity index 99%
rename from apps/dashboard/src/routes/course/[slug]/enroll/+page.svelte
rename to apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
index 6937977a..5ea07181 100644
--- a/apps/dashboard/src/routes/course/[slug]/enroll/+page.svelte
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
@@ -98,7 +98,7 @@
 
   $effect(() => {
     if (!data.currentOrg) return;
-    setTheme(data.currentOrg?.theme || '');
+    setTheme(data.currentOrg?.theme);
     currentOrg.update((o) => ({
       ...o,
       id: data.currentOrg?.id ?? o.id,
diff --git a/apps/dashboard/src/routes/(org-site)/courses/+page.server.ts b/apps/dashboard/src/routes/(org-site)/courses/+page.server.ts
new file mode 100644
index 00000000..1a6afe21
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/courses/+page.server.ts
@@ -0,0 +1,60 @@
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+import { redirect } from '@sveltejs/kit';
+
+type GetPublicCoursesRequest = typeof classroomio.organization.courses.public.$get;
+type GetPublicCoursesSuccess = Extract<InferResponseType<GetPublicCoursesRequest>, { success: true }>;
+type GetPublicTagsRequest = typeof classroomio.organization.tags.public.$get;
+type GetPublicTagsSuccess = Extract<InferResponseType<GetPublicTagsRequest>, { success: true }>;
+
+function normalizeTagsParam(rawTags: string | null): string[] {
+  const normalized = rawTags
+    ?.split(',')
+    .map((value) => value.trim())
+    .filter(Boolean);
+
+  return normalized ?? [];
+}
+
+export const load = async ({ parent, url }) => {
+  const { isOrgSite, orgSiteName, org } = await parent();
+
+  if (!isOrgSite || !org) {
+    throw redirect(307, '/');
+  }
+
+  const siteName = orgSiteName || org.siteName;
+  if (!siteName) {
+    throw redirect(307, '/');
+  }
+
+  const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
+  const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;
+
+  const [coursesResult, tagsResult] = await Promise.all([
+    safeServerApi<GetPublicCoursesSuccess>(() =>
+      classroomio.organization.courses.public.$get({
+        query: {
+          siteName,
+          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
+        }
+      })
+    ),
+    safeServerApi<GetPublicTagsSuccess>(() =>
+      classroomio.organization.tags.public.$get({
+        query: {
+          siteName
+        }
+      })
+    )
+  ]);
+  const courseData = coursesResult.ok ? coursesResult.body.data : { courses: [], hasMoreCourses: false };
+
+  return {
+    org,
+    courses: courseData.courses,
+    hasMoreCourses: courseData.hasMoreCourses,
+    tagGroups: tagsResult.ok ? tagsResult.body.data : [],
+    activeTags: normalizedTags
+  };
+};
diff --git a/apps/dashboard/src/routes/courses/+page.svelte b/apps/dashboard/src/routes/(org-site)/courses/+page.svelte
similarity index 66%
rename from apps/dashboard/src/routes/courses/+page.svelte
rename to apps/dashboard/src/routes/(org-site)/courses/+page.svelte
index b6e87f7b..7b79aa44 100644
--- a/apps/dashboard/src/routes/courses/+page.svelte
+++ b/apps/dashboard/src/routes/(org-site)/courses/+page.svelte
@@ -4,12 +4,24 @@
   import { resolve } from '$app/paths';
   import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';
 
-  import Navigation from '$lib/components/Navigation/index.svelte';
   import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';
+  import { basePath } from '$lib/utils/store/app';
 
   import { PoweredBy } from '$features/ui';
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
   import { CourseCardList } from '$features/course/components';
+  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
+
+  import {
+    BoldLandingHero,
+    BoldLandingNav,
+    ClassicLandingHero,
+    ClassicLandingNav,
+    MinimalLandingHero,
+    MinimalLandingNav,
+    OrgLandingPageFooter
+  } from '@cio/ui/custom/org-landing-page';
 
   import { Button } from '@cio/ui/base/button';
   import { Checkbox } from '@cio/ui/base/checkbox';
@@ -20,6 +32,26 @@
 
   let selectedTags = $derived<string[]>(data.activeTags || []);
 
+  const landingSettings = $derived(normalizeLandingPageSettings(data.org.landingpage));
+
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
+
+  const shellClass = $derived(
+    landingSettings.theme === 'classic'
+      ? 'ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans'
+      : 'ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans'
+  );
+
   async function applyTagFilters(nextTags: string[]) {
     const params = new SvelteURLSearchParams(page.url.searchParams);
 
@@ -30,8 +62,9 @@
     }
 
     const query = params.toString();
+    const suffix = query ? `?${query}` : '';
 
-    await goto(resolve(`/courses?query=${query}`, {}), {
+    await goto(resolve(`/courses${suffix}`, {}), {
       keepFocus: true,
       noScroll: true,
       invalidateAll: true
@@ -90,28 +123,45 @@
 
 <PoweredBy />
 
-<main class="min-h-screen bg-white">
-  <Navigation
-    logo={data.org.avatarUrl || '/logo-192.png'}
-    orgName={data.org.name}
-    disableSignup={true}
-    isOrgSite={true}
-    customLinks={data.org.landingpage?.customLinks}
-  />
+<main class={shellClass}>
+  {#if landingSettings.theme === 'minimal'}
+    <MinimalLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }}>
+      {#snippet navigation()}
+        <MinimalLandingNav
+          orgName={data.org.name}
+          logoUrl={data.org.avatarUrl ?? undefined}
+          navItems={landingSettings.navItems}
+          {authAction}
+        />
+      {/snippet}
+    </MinimalLandingHero>
+  {:else if landingSettings.theme === 'bold'}
+    <BoldLandingNav
+      orgName={data.org.name}
+      logoUrl={data.org.avatarUrl ?? undefined}
+      navItems={landingSettings.navItems}
+      {authAction}
+    />
+    <BoldLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }} />
+  {:else}
+    <ClassicLandingNav
+      orgName={data.org.name}
+      logoUrl={data.org.avatarUrl ?? undefined}
+      navItems={landingSettings.navItems}
+      {authAction}
+    />
+    <ClassicLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }} />
+  {/if}
 
   <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
-    <div class="mb-6 flex items-center justify-between gap-4">
-      <div>
-        <h1 class="text-3xl font-semibold">{$t('public_courses.heading')}</h1>
-        <p class="ui:text-muted-foreground text-sm">{$t('public_courses.subtitle')}</p>
-      </div>
+    <div class="mb-6 flex items-center justify-end gap-4">
       <Button variant="outline" onclick={clearFilters} disabled={selectedTags.length === 0}>
         {$t('public_courses.clear_filters')}
       </Button>
     </div>
 
     <div class="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
-      <aside class="space-y-4 rounded-lg border p-4">
+      <aside class="ui:bg-background space-y-4 rounded-lg border p-4">
         <div>
           <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
           <p class="ui:text-muted-foreground text-xs">{$t('public_courses.filters.help')}</p>
@@ -173,4 +223,12 @@
       </div>
     </div>
   </section>
+
+  <OrgLandingPageFooter
+    orgName={data.org.name}
+    logoUrl={data.org.avatarUrl ?? undefined}
+    footerLinks={landingSettings.footerLinks}
+    footerText={landingSettings.footerText}
+    variant={landingSettings.theme}
+  />
 </main>
diff --git a/apps/dashboard/src/routes/+error.svelte b/apps/dashboard/src/routes/+error.svelte
index 1a312772..49d023db 100644
--- a/apps/dashboard/src/routes/+error.svelte
+++ b/apps/dashboard/src/routes/+error.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/state';
   import { Button } from '@cio/ui/base/button';
   import { Empty } from '@cio/ui/custom/empty';
+  import { ExternalLinkIcon, HomeIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
   import HeartCrack from '@lucide/svelte/icons/heart-crack';
 
   const isNotFound = $derived(page.status === 404);
@@ -28,7 +29,14 @@
     showLogo={true}
   >
     <div class="flex gap-2">
-      <Button onclick={goHome}>Go Home</Button>
+      <HoverableItem>
+        {#snippet children(isHovered)}
+          <Button onclick={goHome}>
+            <HomeIcon {isHovered} size={16} ariaHidden={true} />
+            Go Home
+          </Button>
+        {/snippet}
+      </HoverableItem>
     </div>
   </Empty>
 {:else}
@@ -41,8 +49,22 @@
     showLogo={true}
   >
     <div class="flex gap-2">
-      <Button href="https://classroomio.com/tools" variant="secondary">Try Free tools</Button>
-      <Button onclick={goHome}>Go Home</Button>
+      <HoverableItem>
+        {#snippet children(isHovered)}
+          <Button href="https://classroomio.com/tools" variant="secondary">
+            <ExternalLinkIcon {isHovered} size={16} ariaHidden={true} />
+            Try Free Tools
+          </Button>
+        {/snippet}
+      </HoverableItem>
+      <HoverableItem>
+        {#snippet children(isHovered)}
+          <Button onclick={goHome}>
+            <HomeIcon {isHovered} size={16} ariaHidden={true} />
+            Go Home
+          </Button>
+        {/snippet}
+      </HoverableItem>
     </div>
   </Empty>
 {/if}
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index e48b07f6..dca2a6a3 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -1,135 +1,15 @@
 <script lang="ts">
   import { page } from '$app/state';
 
-  import { OrgLandingPage } from '$features/org';
   import { Snackbar } from '$features/ui';
-  import { UpgradeModal, PageLoadProgress, PageRestricted } from '$features/ui';
-  import { user } from '$lib/utils/store/user';
-  import { setTheme } from '$lib/utils/functions/theme';
-  import { setupCloudAnalytics } from '$lib/utils/functions/appSetup';
-  import { globalStore } from '$lib/utils/store/app';
-  import { currentOrg, isOrgStudent } from '$lib/utils/store/org';
-  import { appInitApi } from '$features/app/init.svelte';
   import merge from 'lodash/merge';
-  import { onMount } from 'svelte';
   import { MetaTags } from 'svelte-meta-tags';
-  import { authClient } from '$lib/utils/services/auth/client';
-  import { isPublicRoute } from '$lib/utils/functions/routes/isPublicRoute';
-  import { env } from '$env/dynamic/public';
   import { ModeWatcher } from '@cio/ui/base/dark-mode';
 
   import '../app.css';
 
   let { data, children } = $props();
 
-  let path = $derived(page.url.pathname);
-
-  function intialAppSetup() {
-    console.log(
-      'Welcome to ClassroomIO, we are grateful you chose us.',
-      page.url.host,
-      `\nIs student domain: ${data.isOrgSite}`,
-      data
-    );
-
-    setupCloudAnalytics();
-
-    if (data?.locals?.user) {
-      user.set({
-        ...$user,
-        isLoggedIn: true,
-        currentSession: data.locals.user
-      });
-    }
-
-    console.log('user', $user);
-
-    // Authentication Steps
-    if (!data.isOrgSite || !data.org) return;
-
-    $globalStore.orgSiteName = data.orgSiteName || '';
-    $globalStore.isOrgSite = data.isOrgSite;
-
-    currentOrg.set(data.org);
-
-    const theme = data.org?.theme;
-    if (theme) {
-      setTheme(theme);
-    }
-  }
-
-  onMount(() => {
-    const loadingIndicator = document.getElementById('app-loading-indicator');
-    if (loadingIndicator) {
-      loadingIndicator.style.display = 'none';
-    }
-
-    intialAppSetup();
-
-    if (data.skipAuth) return;
-  });
-
-  const session = authClient.useSession();
-  const isSessionReady = $derived(!$session.isPending && !$session.isRefetching && $session.data);
-
-  // The goal of this effect is to make sure that we do a redirect to /login if the session data is expired
-  // This should be happening on the hooks.server.ts (if there is no cookie) but we've made the home page public so we can show a loading spinner while the app is initializing OR an error message if the backend is down.
-  $effect(() => {
-    if ($session.isPending || $session.isRefetching || !!$session.data) {
-      console.log('session is pending or refetching');
-      return;
-    }
-
-    // Skip /login redirect below when the route is already public.
-    // [NO_REDIRECT] public + path !== '/' — e.g. /login, /signup, /courses, … (not the main-app home edge case)
-    // [NO_REDIRECT] public + '/' + isOrgSite — org landing page on its own domain
-    // [MAY_REDIRECT_TO_LOGIN] public + '/' + !isOrgSite — main app home is public so we can show loading/errors while
-    //   auth resolves; if there is still no session after that, we send to /login (this effect). Logged-in users
-    //   return earlier (session branch above); post-login navigation from '/' is in init.svelte.ts routeUserToNextPage.
-    // [MAY_REDIRECT_TO_LOGIN] not public — private route; unauthenticated users go to /login
-
-    if (isPublicRoute(path) && (path !== '/' || data.isOrgSite)) {
-      return;
-    }
-
-    if (!$session.data && !path.startsWith('/login')) {
-      console.log('session data is not available, go to login');
-      window.location.href = '/login';
-    }
-  });
-
-  $effect(() => {
-    // this means the session cookie 'classroomio.session_data' expired and we need to trigger a new session
-    // triggering a new session will update the session data in the cookies so that our hooks.server.ts doesn't always have to hit the DB when checking if user is logged in or not. Without the session cookie, every page navigation or route would always hit the database to check if user is logged in or not.
-    if (!data?.locals?.fromSessions && isSessionReady) {
-      authClient.getSession().then(() => {
-        console.log('triggered new session');
-      });
-    }
-  });
-
-  $effect(() => {
-    console.log('env public server url', env.PUBLIC_SERVER_URL);
-    console.log('env public is selfhosted', env.PUBLIC_IS_SELFHOSTED);
-    if (isSessionReady && !appInitApi.isInitializedAndReady && !appInitApi.loading) {
-      console.log('setting up account with session data');
-
-      appInitApi.setupApp($session.data as App.Locals, {
-        isOrgSite: data.isOrgSite,
-        orgSiteName: data.orgSiteName
-      });
-    }
-  });
-
-  $effect(() => {
-    // Means it hasn't been set yet.
-    if ($isOrgStudent === null) return;
-
-    if ($isOrgStudent !== $globalStore.isStudent) {
-      globalStore.update((s) => ({ ...s, isStudent: !!$isOrgStudent }));
-    }
-  });
-
   const metaTags = $derived(merge(data.baseMetaTags, page.data.pageMetaTags));
 </script>
 
@@ -138,19 +18,9 @@
 
   <MetaTags {...metaTags} />
 
-  <UpgradeModal />
-
   <Snackbar />
 
-  {#if data.org?.isRestricted || $currentOrg.isRestricted}
-    <PageRestricted />
-  {:else if data.isOrgSite && data.org && path === '/'}
-    <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
-  {:else}
-    <PageLoadProgress zIndex={10000} />
-
-    {@render children?.()}
-  {/if}
+  {@render children?.()}
 </div>
 
 <style>
diff --git a/apps/dashboard/src/routes/+page.server.ts b/apps/dashboard/src/routes/+page.server.ts
new file mode 100644
index 00000000..0c1f9038
--- /dev/null
+++ b/apps/dashboard/src/routes/+page.server.ts
@@ -0,0 +1,46 @@
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { safeServerApi } from '$lib/utils/services/api/server';
+
+type GetPublicCoursesRequest = typeof classroomio.organization.courses.public.$get;
+type GetPublicCoursesSuccess = Extract<InferResponseType<GetPublicCoursesRequest>, { success: true }>;
+
+export const load = async ({ parent }) => {
+  const { isOrgSite, orgSiteName, org } = await parent();
+
+  if (!isOrgSite || !org) {
+    return {
+      isOrgSite: false as const,
+      org: null,
+      orgSiteName: '',
+      courses: [],
+      hasMoreCourses: false
+    };
+  }
+
+  const siteName = orgSiteName || org.siteName;
+  if (!siteName) {
+    return {
+      isOrgSite: true as const,
+      org,
+      orgSiteName,
+      courses: [],
+      hasMoreCourses: false
+    };
+  }
+
+  const coursesResult = await safeServerApi<GetPublicCoursesSuccess>(() =>
+    classroomio.organization.courses.public.$get({
+      query: { siteName }
+    })
+  );
+
+  const courseData = coursesResult.ok ? coursesResult.body.data : { courses: [], hasMoreCourses: false };
+
+  return {
+    isOrgSite: true as const,
+    org,
+    orgSiteName,
+    courses: courseData.courses,
+    hasMoreCourses: courseData.hasMoreCourses
+  };
+};
diff --git a/apps/dashboard/src/routes/+page.svelte b/apps/dashboard/src/routes/+page.svelte
index 6ecc2821..88e97db5 100644
--- a/apps/dashboard/src/routes/+page.svelte
+++ b/apps/dashboard/src/routes/+page.svelte
@@ -1,38 +1,101 @@
-<script>
-  import { appInitApi } from '$features/app/init.svelte';
-  import { Spinner } from '@cio/ui/base/spinner';
-  import { Button } from '@cio/ui/base/button';
-  import FrownIcon from '@lucide/svelte/icons/frown';
-  import { Empty } from '@cio/ui/custom/empty';
-  import { SimpleLogoNav } from '@cio/ui/custom/simple-logo-nav';
-  import { authClient } from '$lib/utils/services/auth/client';
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { resolve } from '$app/paths';
+  import type { Component } from 'svelte';
 
-  const session = authClient.useSession();
-  const isSessionLoading = $derived($session.isPending || $session.isRefetching);
-  const isLoadingApp = $derived(isSessionLoading || appInitApi.loading);
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { SimpleLogoNav } from '@cio/ui/custom/simple-logo-nav';
+  import {
+    buildOrgLandingPageProps,
+    importThemeComponent,
+    normalizeLandingPageSettings
+  } from '$features/org/utils/landing-page';
+  import { basePath } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';
+  import PageLoader from '$features/org/components/landing-page/page-loader.svelte';
+
+  let { data } = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let ThemeComponent = $state<Component<any> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let DashboardEntry = $state<Component<any> | null>(null);
+
+  const pageTitle = $derived(
+    data.isOrgSite && data.org ? data.org.name : "ClassroomIO - The Course Platform That's Actually Easy To Use"
+  );
+
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
+
+  const landingPageProps = $derived.by(() => {
+    if (!data.isOrgSite || !data.org) return null;
+
+    return buildOrgLandingPageProps(
+      data.org,
+      normalizeLandingPageSettings(data.org.landingpage),
+      data.courses,
+      data.hasMoreCourses,
+      authAction
+    );
+  });
+
+  onMount(async () => {
+    const loadingIndicator = document.getElementById('app-loading-indicator');
+    if (loadingIndicator) {
+      loadingIndicator.style.display = 'none';
+    }
+
+    if (!data.isOrgSite || !data.org) {
+      const mod = await import('./_dashboard-entry.svelte');
+      DashboardEntry = mod.default;
+      return;
+    }
+
+    if (data.locals?.user) {
+      user.set({
+        ...$user,
+        isLoggedIn: true,
+        currentSession: data.locals.user
+      });
+    }
+
+    $globalStore.orgSiteName = data.orgSiteName || '';
+    $globalStore.isOrgSite = true;
+    currentOrg.set(data.org);
+    setTheme(data.org.theme || 'blue');
+
+    const settings = normalizeLandingPageSettings(data.org.landingpage);
+    const mod = await importThemeComponent(settings.theme);
+    ThemeComponent = mod.default;
+  });
 </script>
 
 <svelte:head>
-  <title>ClassroomIO - The Course Platform That’s Actually Easy To Use</title>
+  <title>{pageTitle}</title>
 </svelte:head>
 
-{#if !isLoadingApp && appInitApi.error}
-  <Empty
-    title="Something Went Wrong"
-    description="We encountered an unexpected error. Please reload the page or contact us for support."
-    icon={FrownIcon}
-    variant="page"
-    layout="full-page"
-    showLogo={true}
-  >
-    {#if appInitApi.error}
-      <p class="my-2 text-red-500">{appInitApi.error}</p>
-    {/if}
-    <div class="flex gap-2">
-      <Button variant="secondary" onclick={() => window.location.reload()}>Reload Page</Button>
-      <Button variant="default" href="https://classroomio.com/contact">Contact Us</Button>
-    </div>
-  </Empty>
+{#if data.isOrgSite && data.org}
+  {#if ThemeComponent && landingPageProps}
+    <ThemeComponent {...landingPageProps} />
+  {:else}
+    <PageLoader />
+  {/if}
+{:else if DashboardEntry}
+  <DashboardEntry />
 {:else}
   <div class="m-2 flex h-screen w-screen flex-col items-center justify-center font-sans sm:m-0">
     <SimpleLogoNav />
diff --git a/apps/dashboard/src/routes/_dashboard-entry.svelte b/apps/dashboard/src/routes/_dashboard-entry.svelte
new file mode 100644
index 00000000..dd0fd824
--- /dev/null
+++ b/apps/dashboard/src/routes/_dashboard-entry.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import { appInitApi } from '$features/app/init.svelte';
+  import { setupCloudAnalytics } from '$lib/utils/functions/appSetup';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { Button } from '@cio/ui/base/button';
+  import FrownIcon from '@lucide/svelte/icons/frown';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { SimpleLogoNav } from '@cio/ui/custom/simple-logo-nav';
+  import { authClient } from '$lib/utils/services/auth/client';
+
+  setupCloudAnalytics();
+
+  const session = authClient.useSession();
+  const isSessionLoading = $derived($session.isPending || $session.isRefetching);
+  const isLoadingApp = $derived(isSessionLoading || appInitApi.loading);
+  const isSessionReady = $derived(!$session.isPending && !$session.isRefetching && $session.data);
+
+  $effect(() => {
+    if ($session.isPending || $session.isRefetching || !!$session.data) {
+      return;
+    }
+
+    if (!$session.data && !page.url.pathname.startsWith('/login')) {
+      window.location.href = '/login';
+    }
+  });
+
+  $effect(() => {
+    if (isSessionReady && !appInitApi.isInitializedAndReady && !appInitApi.loading) {
+      appInitApi.setupApp($session.data as App.Locals, {
+        isOrgSite: false,
+        orgSiteName: ''
+      });
+    }
+  });
+</script>
+
+{#if !isLoadingApp && appInitApi.error}
+  <Empty
+    title="Something Went Wrong"
+    description="We encountered an unexpected error. Please reload the page or contact us for support."
+    icon={FrownIcon}
+    variant="page"
+    layout="full-page"
+    showLogo={true}
+  >
+    {#if appInitApi.error}
+      <p class="my-2 text-red-500">{appInitApi.error}</p>
+    {/if}
+    <div class="flex gap-2">
+      <Button variant="secondary" onclick={() => window.location.reload()}>Reload Page</Button>
+      <Button variant="default" href="https://classroomio.com/contact">Contact Us</Button>
+    </div>
+  </Empty>
+{:else}
+  <div class="m-2 flex h-screen w-screen flex-col items-center justify-center font-sans sm:m-0">
+    <SimpleLogoNav />
+    <Spinner class="size-14! text-blue-700!" />
+  </div>
+{/if}
diff --git a/apps/dashboard/src/routes/course/[slug]/+page.svelte b/apps/dashboard/src/routes/course/[slug]/+page.svelte
deleted file mode 100644
index 4b8b3aa3..00000000
--- a/apps/dashboard/src/routes/course/[slug]/+page.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { CourseLandingPage } from '$features/ui';
-  import type { Course } from '$features/course/utils/types';
-
-  interface Data {
-    course: Course;
-  }
-
-  interface Props {
-    data: Data;
-  }
-
-  let { data }: Props = $props();
-</script>
-
-<CourseLandingPage courseData={data.course} />
diff --git a/apps/dashboard/src/routes/course/[slug]/+page.ts b/apps/dashboard/src/routes/course/[slug]/+page.ts
deleted file mode 100644
index bec4620f..00000000
--- a/apps/dashboard/src/routes/course/[slug]/+page.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { MetaTagsProps } from 'svelte-meta-tags';
-import { classroomio } from '$lib/utils/services/api';
-import type { Course } from '$features/course/types';
-
-export const load = async ({ params = { slug: '' } }) => {
-  let course: Course | null = null;
-  try {
-    const response = await classroomio.course.slug[':slug'].$get({
-      param: { slug: params.slug }
-    });
-
-    const result = await response.json();
-    if (result.success && result.data) {
-      course = result.data;
-    }
-  } catch (error) {
-    console.error('Failed to fetch course:', error);
-  }
-
-  if (!course) {
-    return {
-      slug: params.slug,
-      course: null,
-      pageMetaTags: null
-    };
-  }
-
-  const pageMetaTags = Object.freeze({
-    title: course.title,
-    description: course.description,
-    openGraph: {
-      title: course.title,
-      description: course.description,
-      images: [
-        {
-          url: course.logo || '',
-          alt: course?.title,
-          width: 280,
-          height: 200,
-          secureUrl: course.logo,
-          type: 'image/jpeg'
-        }
-      ]
-    },
-    twitter: {
-      handle: '@classroomio',
-      site: '@classroomio',
-      cardType: 'summary_large_image' as const,
-      title: course?.title,
-      description: course?.description,
-      image: course?.logo,
-      imageAlt: 'ClassroomIO OG Image'
-    }
-  }) satisfies MetaTagsProps;
-
-  return {
-    slug: params.slug,
-    course,
-    pageMetaTags
-  };
-};
diff --git a/apps/dashboard/src/routes/course/[slug]/enroll/+page.server.ts b/apps/dashboard/src/routes/course/[slug]/enroll/+page.server.ts
deleted file mode 100644
index 14851d29..00000000
--- a/apps/dashboard/src/routes/course/[slug]/enroll/+page.server.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { classroomio } from '$lib/utils/services/api';
-import { getApiKeyHeaders } from '$lib/utils/services/api/server';
-import { calcCourseDiscount } from '$lib/utils/functions/course';
-import { error } from '@sveltejs/kit';
-
-export const load = async ({ params, url }) => {
-  const slug = params?.slug ?? '';
-  const inviteToken = url.searchParams.get('invite_token') ?? null;
-
-  if (!slug) {
-    throw error(404, 'Not found');
-  }
-
-  if (inviteToken) {
-    try {
-      const response = await classroomio.invite.student[':token'].$get(
-        { param: { token: inviteToken } },
-        getApiKeyHeaders()
-      );
-      const result = await response.json();
-
-      if (!result.success || !result.data) {
-        throw error(404, 'Not found');
-      }
-
-      const data = result.data;
-      const course = {
-        id: data.course.id,
-        slug: data.course.slug,
-        title: data.course.title,
-        description: data.course.description,
-        cost: data.course.cost ?? 0,
-        allowNewStudent: data.course.allowNewStudent ?? true,
-        status: data.course.status,
-        isPublished: data.course.isPublished
-      };
-      const currentOrg = {
-        id: data.organization.id,
-        name: data.organization.name,
-        siteName: data.organization.siteName ?? '',
-        theme: data.organization.theme ?? undefined
-      };
-
-      return {
-        course,
-        currentOrg,
-        invite: data.invite,
-        inviteEmail: data.inviteContext?.recipientEmail ?? null,
-        inviteEmailExists: data.inviteContext?.recipientExists ?? false,
-        requiresPaymentOrInvite: false,
-        token: inviteToken
-      };
-    } catch (e) {
-      console.error('Enroll load: failed to load invite', e);
-      throw error(404, 'Not found');
-    }
-  }
-
-  try {
-    const response = await classroomio.course.slug[':slug'].$get({
-      param: { slug }
-    });
-    const result = await response.json();
-
-    if (!result.success || !result.data) {
-      throw error(404, 'Not found');
-    }
-
-    const courseData = result.data;
-    const discount = (courseData.metadata as { discount?: number } | null)?.discount ?? 0;
-    const showDiscount = (courseData.metadata as { showDiscount?: boolean } | null)?.showDiscount ?? false;
-    const calculatedCost = calcCourseDiscount(discount, Number(courseData.cost ?? 0), showDiscount);
-    const isFree = calculatedCost <= 0;
-
-    const currentOrg = courseData.org
-      ? {
-          id: courseData.org.id,
-          name: courseData.org.name,
-          siteName: courseData.org.siteName ?? '',
-          theme: courseData.org.theme ?? undefined
-        }
-      : null;
-
-    const course = {
-      id: courseData.id,
-      slug: courseData.slug,
-      title: courseData.title,
-      description: courseData.description,
-      cost: courseData.cost ?? 0,
-      allowNewStudent: (courseData.metadata as { allowNewStudent?: boolean } | null)?.allowNewStudent ?? true,
-      status: courseData.status,
-      isPublished: courseData.isPublished
-    };
-
-    return {
-      course,
-      currentOrg,
-      invite: null,
-      requiresPaymentOrInvite: !isFree,
-      token: null as string | null
-    };
-  } catch (e) {
-    console.error('Enroll load: failed to load course by slug', e);
-    throw error(404, 'Not found');
-  }
-};
diff --git a/apps/dashboard/src/routes/courses/+page.server.ts b/apps/dashboard/src/routes/courses/+page.server.ts
deleted file mode 100644
index b12f8125..00000000
--- a/apps/dashboard/src/routes/courses/+page.server.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { classroomio } from '$lib/utils/services/api';
-import { redirect } from '@sveltejs/kit';
-
-function normalizeTagsParam(rawTags: string | null): string[] {
-  const normalized = rawTags
-    ?.split(',')
-    .map((value) => value.trim())
-    .filter(Boolean);
-
-  return normalized ?? [];
-}
-
-export const load = async ({ parent, url }) => {
-  const { isOrgSite, orgSiteName, org } = await parent();
-
-  if (!isOrgSite || !org) {
-    throw redirect(307, '/');
-  }
-
-  const siteName = orgSiteName || org.siteName;
-  if (!siteName) {
-    throw redirect(307, '/');
-  }
-
-  const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
-  const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;
-
-  const [coursesResponse, tagsResponse] = await Promise.all([
-    classroomio.organization.courses.public.$get({
-      query: {
-        siteName,
-        ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
-      }
-    }),
-    classroomio.organization.tags.public.$get({
-      query: {
-        siteName
-      }
-    })
-  ]);
-
-  const [coursesPayload, tagsPayload] = await Promise.all([coursesResponse.json(), tagsResponse.json()]);
-
-  return {
-    org,
-    courses: coursesPayload.success ? coursesPayload.data : [],
-    tagGroups: tagsPayload.success ? tagsPayload.data : [],
-    activeTags: normalizedTags
-  };
-};
diff --git a/apps/dashboard/src/routes/courses/[id]/exercises/[exerciseId]/+page.server.ts b/apps/dashboard/src/routes/courses/[id]/exercises/[exerciseId]/+page.server.ts
deleted file mode 100644
index d06b6238..00000000
--- a/apps/dashboard/src/routes/courses/[id]/exercises/[exerciseId]/+page.server.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, cookies }) => {
-  const courseId = params.id || '';
-  const exerciseId = params.exerciseId || '';
-
-  if (!courseId || !exerciseId) {
-    return { courseId, exerciseId, exercise: null, submissions: [], mySubmissions: [] };
-  }
-
-  const headers = getApiHeaders(cookies);
-
-  const [exerciseResponse, overviewResponse] = await Promise.all([
-    classroomio.course[':courseId'].exercise[':exerciseId'].$get({ param: { courseId, exerciseId } }, headers),
-    classroomio.course[':courseId'].exercise[':exerciseId']['submissions'].$get(
-      { param: { courseId, exerciseId } },
-      headers
-    )
-  ]);
-
-  const exerciseResult = await exerciseResponse.json();
-  const exercise = exerciseResult.success && exerciseResult.data ? exerciseResult.data : null;
-
-  const overviewResult = await overviewResponse.json();
-  const overview =
-    overviewResult.success && overviewResult.data ? overviewResult.data : { mySubmission: [], allSubmissions: [] };
-
-  const mySubmissionData = Array.isArray(overview.mySubmission) ? overview.mySubmission : [];
-  const mySubmissions = mySubmissionData;
-
-  const submissions = Array.isArray(overview.allSubmissions) ? overview.allSubmissions : [];
-
-  return {
-    courseId,
-    exerciseId,
-    exercise,
-    submissions,
-    mySubmissions
-  };
-};
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/[lessonId]/+page.server.ts b/apps/dashboard/src/routes/courses/[id]/lessons/[lessonId]/+page.server.ts
deleted file mode 100644
index 303ce79c..00000000
--- a/apps/dashboard/src/routes/courses/[id]/lessons/[lessonId]/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, cookies }) => {
-  const courseId = params.id || '';
-  const lessonId = params.lessonId || '';
-
-  if (!courseId || !lessonId) {
-    return { courseId, lessonId, lesson: null };
-  }
-
-  const response = await classroomio.course[':courseId'].lesson[':lessonId'].$get(
-    { param: { courseId, lessonId } },
-    getApiHeaders(cookies)
-  );
-
-  const result = await response.json();
-
-  const lesson = result.success && result.data ? result.data : null;
-
-  return {
-    courseId,
-    lessonId,
-    lesson: lesson
-  };
-};
diff --git a/apps/dashboard/src/routes/courses/[id]/submissions/+page.server.ts b/apps/dashboard/src/routes/courses/[id]/submissions/+page.server.ts
deleted file mode 100644
index 93104d49..00000000
--- a/apps/dashboard/src/routes/courses/[id]/submissions/+page.server.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { classroomio } from '$lib/utils/services/api';
-import { getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, cookies }) => {
-  const courseId = params.id || '';
-
-  if (!courseId) {
-    return {
-      courseId: '',
-      sections: [],
-      submissionIdData: {}
-    };
-  }
-
-  // Fetch pre-processed submission data server-side
-  const response = await classroomio.course[':courseId'].submission['for-grading'].$get(
-    {
-      param: { courseId }
-    },
-    getApiHeaders(cookies)
-  );
-
-  const result = await response.json();
-
-  if (result.success && result.data) {
-    return {
-      courseId,
-      sections: result.data.sections || [],
-      submissionIdData: result.data.submissionIdData || {}
-    };
-  }
-
-  return {
-    courseId,
-    sections: [],
-    submissionIdData: {}
-  };
-};
diff --git a/apps/dashboard/src/routes/invite/[hash]/+layout.server.ts b/apps/dashboard/src/routes/invite/[hash]/+layout.server.ts
index e48b3e69..dd6fd252 100644
--- a/apps/dashboard/src/routes/invite/[hash]/+layout.server.ts
+++ b/apps/dashboard/src/routes/invite/[hash]/+layout.server.ts
@@ -1,31 +1,35 @@
 import { getOrgBySiteName } from '$features/org/api/org.server';
-import { classroomio } from '$lib/utils/services/api';
-import { getApiKeyHeaders } from '$lib/utils/services/api/server';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
 import { error } from '@sveltejs/kit';
 
+type PreviewOrganizationInviteRequest = (typeof classroomio.invite.organization)[':token']['preview']['$get'];
+type PreviewOrganizationInviteSuccess = Extract<InferResponseType<PreviewOrganizationInviteRequest>, { success: true }>;
+
 export const load = async ({ params = { hash: '' } }) => {
   try {
     const token = decodeURIComponent(params.hash);
-    const response = await classroomio.invite.organization[':token'].preview.$get(
-      {
-        param: { token }
-      },
-      getApiKeyHeaders()
+    const result = await safeServerApi<PreviewOrganizationInviteSuccess>(() =>
+      classroomio.invite.organization[':token'].preview.$get(
+        {
+          param: { token }
+        },
+        getApiKeyHeaders()
+      )
     );
-    const result = await response.json();
 
-    if (!result.success || !result.data) {
+    if (!result.ok || !result.body.data) {
       throw new Error('Invalid organization invite payload');
     }
 
     const apiKeyHeaders = getApiKeyHeaders();
-    const currentOrg = result.data.organization.siteName
-      ? await getOrgBySiteName(result.data.organization.siteName, apiKeyHeaders)
+    const currentOrg = result.body.data.organization.siteName
+      ? await getOrgBySiteName(result.body.data.organization.siteName, apiKeyHeaders)
       : null;
 
     return {
       token,
-      invite: result.data,
+      invite: result.body.data,
       currentOrg
     };
   } catch (e) {
diff --git a/apps/dashboard/src/routes/lms/+page.svelte b/apps/dashboard/src/routes/lms/+page.svelte
deleted file mode 100644
index 8b29abbd..00000000
--- a/apps/dashboard/src/routes/lms/+page.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { DashboardPage } from '$features/lms/pages';
-  import { getGreeting } from '$lib/utils/functions/date';
-  import { t } from '$lib/utils/functions/translations';
-  import { profile } from '$lib/utils/store/user';
-  import * as Page from '@cio/ui/base/page';
-</script>
-
-<svelte:head>
-  <title>Student Dashboard - ClassroomIO</title>
-</svelte:head>
-
-<Page.Root class="w-full">
-  <Page.Header>
-    <Page.HeaderContent>
-      <Page.Title>
-        {$t(getGreeting())}
-        {$profile.fullname}!
-      </Page.Title>
-    </Page.HeaderContent>
-  </Page.Header>
-  <Page.Body>
-    {#snippet child()}
-      <DashboardPage />
-    {/snippet}
-  </Page.Body>
-</Page.Root>
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/audience/+page.server.ts
deleted file mode 100644
index 4220b719..00000000
--- a/apps/dashboard/src/routes/org/[slug]/audience/+page.server.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-import {
-  DEFAULT_ORG_AUDIENCE_QUERY,
-  getAudienceQueryFromSearchParams,
-  toAudienceRequestQuery
-} from '$lib/features/org/utils/audience-query-utils';
-
-export const load = async ({ parent, cookies, url }) => {
-  const { orgId } = await parent();
-
-  if (!orgId) {
-    return {
-      audience: [],
-      pagination: null,
-      query: DEFAULT_ORG_AUDIENCE_QUERY,
-      courses: []
-    };
-  }
-
-  const headers = getApiHeaders(cookies, orgId);
-  const query = getAudienceQueryFromSearchParams(url.searchParams);
-
-  const [audienceResponse, coursesResponse] = await Promise.all([
-    classroomio.organization.audience.$get({ query: toAudienceRequestQuery(query)! }, headers),
-    classroomio.organization.courses.$get({ query: { tags: undefined } }, headers)
-  ]);
-
-  const audienceData = await audienceResponse.json();
-  const audience = audienceData.success ? audienceData.data : [];
-  const pagination = audienceData.success ? audienceData.pagination : null;
-
-  const coursesData = await coursesResponse.json();
-  const courses = coursesData.success ? coursesData.data : [];
-
-  return {
-    audience,
-    pagination,
-    query,
-    courses
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.server.ts
deleted file mode 100644
index 3b5245b9..00000000
--- a/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.server.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, parent, cookies }) => {
-  const { orgId } = await parent();
-  const paramParts = params.params?.split('/') ?? [];
-
-  const userId = paramParts[0];
-
-  if (!userId || !orgId) {
-    return {
-      userId,
-      orgId,
-      analytics: null
-    };
-  }
-
-  const analyticsResponse = await classroomio.organization.audience[':userId'].analytics.$get(
-    { param: { userId } },
-    getApiHeaders(cookies, orgId)
-  );
-
-  const analyticsData = await analyticsResponse.json();
-  const analytics = analyticsData.success ? analyticsData.data : null;
-
-  return {
-    userId,
-    orgId,
-    analytics
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.svelte b/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.svelte
deleted file mode 100644
index 9029189d..00000000
--- a/apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { UserAnalyticsPage } from '$features/audience/pages';
-  import * as Page from '@cio/ui/base/page';
-
-  let { data } = $props();
-</script>
-
-<svelte:head>
-  <title>User Analytics - ClassroomIO</title>
-</svelte:head>
-
-<Page.Root class="w-full md:max-w-5xl lg:mx-auto">
-  <Page.Body>
-    {#snippet child()}
-      <UserAnalyticsPage {data} />
-    {/snippet}
-  </Page.Body>
-</Page.Root>
diff --git a/apps/dashboard/src/routes/org/[slug]/audience/import/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/audience/import/+page.server.ts
deleted file mode 100644
index de13477e..00000000
--- a/apps/dashboard/src/routes/org/[slug]/audience/import/+page.server.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ parent, cookies }) => {
-  const { orgId } = await parent();
-
-  if (!orgId) {
-    return {
-      courses: []
-    };
-  }
-
-  const coursesResponse = await classroomio.organization.courses.$get({}, getApiHeaders(cookies, orgId));
-  const coursesData = await coursesResponse.json();
-  const courses = coursesData.success ? coursesData.data : [];
-
-  return {
-    courses
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/automation/api/+page.svelte b/apps/dashboard/src/routes/org/[slug]/automation/api/+page.svelte
deleted file mode 100644
index 54e6d1d5..00000000
--- a/apps/dashboard/src/routes/org/[slug]/automation/api/+page.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { ApiAutomationPage } from '$features/automation/pages';
-  import { t } from '$lib/utils/functions/translations';
-  import * as Page from '@cio/ui/base/page';
-</script>
-
-<svelte:head>
-  <title>{t.get('automation.tabs.api')} - ClassroomIO</title>
-</svelte:head>
-
-<Page.Header>
-  <Page.HeaderContent>
-    <Page.Title>{$t('automation.tabs.api')}</Page.Title>
-    <Page.Subtitle>{$t('automation.coming_soon')}</Page.Subtitle>
-  </Page.HeaderContent>
-</Page.Header>
-
-<Page.Body>
-  {#snippet child()}
-    <ApiAutomationPage />
-  {/snippet}
-</Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.server.ts
deleted file mode 100644
index 358bb904..00000000
--- a/apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.server.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ parent, cookies }) => {
-  const { orgId } = await parent();
-
-  if (!orgId) {
-    return { keys: [], usage: null };
-  }
-
-  const headers = getApiHeaders(cookies, orgId);
-
-  const [keysResponse, usageResponse] = await Promise.all([
-    classroomio.organization.automation.keys.$get({ query: { type: 'mcp' } }, headers),
-    classroomio.organization.automation.usage.$get({ query: { type: 'mcp' } }, headers)
-  ]);
-
-  const [keysData, usageData] = await Promise.all([keysResponse.json(), usageResponse.json()]);
-
-  return {
-    keys: keysData.success ? keysData.data : [],
-    usage: usageData.success ? usageData.data : null
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/automation/zapier/+page.svelte b/apps/dashboard/src/routes/org/[slug]/automation/zapier/+page.svelte
deleted file mode 100644
index e76803f3..00000000
--- a/apps/dashboard/src/routes/org/[slug]/automation/zapier/+page.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { ZapierAutomationPage } from '$features/automation/pages';
-  import { t } from '$lib/utils/functions/translations';
-  import * as Page from '@cio/ui/base/page';
-</script>
-
-<svelte:head>
-  <title>{t.get('automation.tabs.zapier')} - ClassroomIO</title>
-</svelte:head>
-
-<Page.Header>
-  <Page.HeaderContent>
-    <Page.Title>{$t('automation.tabs.zapier')}</Page.Title>
-    <Page.Subtitle>{$t('automation.coming_soon')}</Page.Subtitle>
-  </Page.HeaderContent>
-</Page.Header>
-
-<Page.Body>
-  {#snippet child()}
-    <ZapierAutomationPage />
-  {/snippet}
-</Page.Body>
diff --git a/apps/dashboard/src/routes/org/[slug]/community/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/community/+page.server.ts
deleted file mode 100644
index 08f932d7..00000000
--- a/apps/dashboard/src/routes/org/[slug]/community/+page.server.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ parent, cookies }) => {
-  const { orgId } = await parent();
-
-  if (!orgId) {
-    return {
-      questions: []
-    };
-  }
-
-  // Fetch community questions
-  const questionsResponse = await classroomio.community.$get({ query: { orgId } }, getApiHeaders(cookies, orgId));
-
-  const questionsData = await questionsResponse.json();
-  const questions = questionsData.success ? questionsData.data : [];
-
-  return {
-    questions,
-    orgId
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/community/[cslug]/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/community/[cslug]/+page.server.ts
deleted file mode 100644
index b12ca1f4..00000000
--- a/apps/dashboard/src/routes/org/[slug]/community/[cslug]/+page.server.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, parent, cookies }) => {
-  const { orgId } = await parent();
-  const slug = params.cslug || '';
-
-  const questionResponse = await classroomio.community[':slug'].$get(
-    { param: { slug } },
-    getApiHeaders(cookies, orgId)
-  );
-
-  const questionData = await questionResponse.json();
-  const question = questionData.success ? questionData.data : null;
-
-  return {
-    slug,
-    question
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/setup/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/setup/+page.server.ts
deleted file mode 100644
index 8ca47085..00000000
--- a/apps/dashboard/src/routes/org/[slug]/setup/+page.server.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-
-export const load = async ({ params, parent, cookies }) => {
-  const { orgId } = await parent();
-  const siteName = params.slug || '';
-
-  // Fetch setup progress
-  const setupResponse = await classroomio.organization.setup.$get(
-    { query: { siteName } },
-    getApiHeaders(cookies, orgId)
-  );
-
-  const setupData = await setupResponse.json();
-  console.log('setupData', setupData);
-  const setupProgress = setupData.success ? setupData.data : null;
-
-  return {
-    orgSiteName: siteName,
-    setupProgress
-  };
-};
diff --git a/apps/dashboard/src/routes/org/[slug]/tags/+page.server.ts b/apps/dashboard/src/routes/org/[slug]/tags/+page.server.ts
deleted file mode 100644
index 55e677b4..00000000
--- a/apps/dashboard/src/routes/org/[slug]/tags/+page.server.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-import { redirect } from '@sveltejs/kit';
-
-export const load = async ({ parent, cookies, params }) => {
-  const { orgId } = await parent();
-
-  if (!orgId) {
-    return {
-      initialTagGroups: [],
-      orgSlug: params.slug
-    };
-  }
-
-  const response = await classroomio.organization.tags.$get({}, getApiHeaders(cookies, orgId));
-
-  if (response.status === 401 || response.status === 403) {
-    throw redirect(302, `/org/${params.slug}`);
-  }
-
-  const payload = await response.json();
-
-  return {
-    initialTagGroups: payload.success ? payload.data : [],
-    orgSlug: params.slug
-  };
-};
diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
index 82d58a8b..903a8123 100644
--- a/apps/dashboard/vite.config.ts
+++ b/apps/dashboard/vite.config.ts
@@ -20,7 +20,16 @@ export default ({ mode }) => {
       sourcemap: false
     },
     ssr: {
-      noExternal: ['svelte-sonner', 'layerchart', 'svelte-toolbelt', 'tldts', 'tldts-core']
+      // svelte-motion uses directory imports without `/index.js`; Node ESM fails unless bundled for SSR.
+      noExternal: [
+        'svelte-sonner',
+        'layerchart',
+        'svelte-toolbelt',
+        'tldts',
+        'tldts-core',
+        'svelte-motion',
+        'svelte-inview'
+      ]
     },
     optimizeDeps: {
       entries: ['src/routes/**/+*.{js,ts,svelte}'],
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
index d1b0cfcb..cd69c6c8 100644
--- a/apps/docs/.gitignore
+++ b/apps/docs/.gitignore
@@ -15,6 +15,7 @@ node_modules
 /blob-report/
 /playwright/.cache/
 .tanstack
+.react-router
 .dev.vars
 
 src/routeTree.gen.ts
diff --git a/apps/docs/app/app.css b/apps/docs/app/app.css
new file mode 100644
index 00000000..281dc63f
--- /dev/null
+++ b/apps/docs/app/app.css
@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+@source "../../../packages/ui/src/**/*.{ts,tsx}";
diff --git a/apps/docs/app/components/mdx.tsx b/apps/docs/app/components/mdx.tsx
new file mode 100644
index 00000000..f88ca8a3
--- /dev/null
+++ b/apps/docs/app/components/mdx.tsx
@@ -0,0 +1,15 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents) {
+  return {
+    ...defaultMdxComponents,
+    ...components
+  } satisfies MDXComponents;
+}
+
+export const useMDXComponents = getMDXComponents;
+
+declare global {
+  type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
+}
diff --git a/apps/docs/src/components/not-found.tsx b/apps/docs/app/components/not-found.tsx
similarity index 93%
rename from apps/docs/src/components/not-found.tsx
rename to apps/docs/app/components/not-found.tsx
index fd5406e0..16c05b21 100644
--- a/apps/docs/src/components/not-found.tsx
+++ b/apps/docs/app/components/not-found.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@tanstack/react-router';
+import { Link } from 'react-router';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
 
 export function NotFound() {
@@ -17,7 +17,7 @@ export function NotFound() {
           temporarily unavailable.
         </p>
         <Link
-          to="/"
+          to="/home"
           className="bg-fd-primary text-fd-primary-foreground mt-4 rounded-lg px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
         >
           Back to Home
diff --git a/apps/docs/src/lib/layout.shared.tsx b/apps/docs/app/lib/layout.shared.tsx
similarity index 91%
rename from apps/docs/src/lib/layout.shared.tsx
rename to apps/docs/app/lib/layout.shared.tsx
index 118a7fd3..0d8c496b 100644
--- a/apps/docs/src/lib/layout.shared.tsx
+++ b/apps/docs/app/lib/layout.shared.tsx
@@ -6,7 +6,7 @@ export function baseOptions(): BaseLayoutProps {
     nav: {
       title: (
         <div className="flex items-center gap-2">
-          <img src="/logo-192.png" className="size-8" alt="ClassroomIO logo" />
+          <img src="/docs/logo-192.png" className="size-8" alt="ClassroomIO logo" />
           <span className="font-medium">ClassroomIO</span>
         </div>
       )
@@ -44,7 +44,7 @@ export function baseOptions(): BaseLayoutProps {
         label: 'Discord',
         icon: (
           <img
-            src="/discord-blue.png"
+            src="/docs/discord-blue.png"
             alt="discord icon"
             className="w-7 transition-all duration-500 hover:scale-90"
           />
diff --git a/apps/docs/app/lib/source.server.ts b/apps/docs/app/lib/source.server.ts
new file mode 100644
index 00000000..8e4b86c6
--- /dev/null
+++ b/apps/docs/app/lib/source.server.ts
@@ -0,0 +1,35 @@
+import { loader, multiple } from 'fumadocs-core/source';
+import * as icons from 'lucide-static';
+import { docs } from 'fumadocs-mdx:collections/server';
+
+export const source = loader({
+  source: multiple({
+    docs: docs.toFumadocsSource()
+  }),
+  baseUrl: '/',
+  icon(icon) {
+    if (!icon) {
+      return;
+    }
+
+    if (icon in icons) {
+      return icons[icon as keyof typeof icons];
+    }
+  }
+});
+
+export async function getDocsRouteData(slugs: string[]) {
+  const page = source.getPage(slugs);
+  if (!page) {
+    return null;
+  }
+
+  if (page.data.type === 'docs') {
+    return {
+      tree: source.pageTree as object,
+      slugs,
+      pageType: 'docs' as const,
+      path: page.path
+    };
+  }
+}
diff --git a/apps/docs/app/root.tsx b/apps/docs/app/root.tsx
new file mode 100644
index 00000000..2404363f
--- /dev/null
+++ b/apps/docs/app/root.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+
+import type { LinksFunction, MetaFunction } from 'react-router';
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useRouteError
+} from 'react-router';
+import { RootProvider } from 'fumadocs-ui/provider/react-router';
+
+import { NotFound } from '@/components/not-found';
+import './app.css';
+
+export const links: LinksFunction = () => [
+  { rel: 'icon', href: '/docs/favicon.ico' }
+];
+
+export const meta: MetaFunction = () => [
+  {
+    title: 'ClassroomIO | The Open Source Learning Management System for Companies'
+  },
+  {
+    name: 'description',
+    content:
+      'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
+  },
+  {
+    property: 'og:url',
+    content: 'https://classroomio.com/docs'
+  },
+  {
+    property: 'og:type',
+    content: 'website'
+  },
+  {
+    property: 'og:title',
+    content: 'ClassroomIO | The Open Source Learning Management System for Companies'
+  },
+  {
+    property: 'og:description',
+    content:
+      'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
+  },
+  {
+    property: 'og:image:type',
+    content: 'image/png'
+  },
+  {
+    property: 'og:image:width',
+    content: '1920'
+  },
+  {
+    property: 'og:image:height',
+    content: '1080'
+  },
+  {
+    property: 'og:image:secure_url',
+    content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
+  },
+  {
+    name: 'twitter:card',
+    content: 'summary_large_image'
+  },
+  {
+    property: 'twitter:domain',
+    content: 'classroomio.com'
+  },
+  {
+    property: 'twitter:url',
+    content: 'https://classroomio.com/docs'
+  },
+  {
+    name: 'twitter:title',
+    content: 'ClassroomIO | The Open Source Learning Management System for Companies'
+  },
+  {
+    name: 'twitter:description',
+    content:
+      'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
+  },
+  {
+    name: 'twitter:creator',
+    content: '@classroomio'
+  },
+  {
+    name: 'twitter:image',
+    content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
+  }
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex min-h-screen flex-col">
+        <RootProvider>{children}</RootProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <main className="mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-center gap-4 px-6 py-24">
+        <h1 className="text-3xl font-semibold">Docs Error</h1>
+        <p className="text-fd-muted-foreground">
+          The docs app hit an unexpected error while rendering this page.
+        </p>
+      </main>
+    </Layout>
+  );
+}
diff --git a/apps/docs/app/routes.ts b/apps/docs/app/routes.ts
new file mode 100644
index 00000000..c6793054
--- /dev/null
+++ b/apps/docs/app/routes.ts
@@ -0,0 +1,8 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/home.tsx'),
+  route('api/reference', 'routes/api-reference.ts'),
+  route('api/search', 'routes/search.ts'),
+  route('*', 'routes/docs.tsx')
+] satisfies RouteConfig;
diff --git a/apps/docs/app/routes/api-reference.ts b/apps/docs/app/routes/api-reference.ts
new file mode 100644
index 00000000..fa139ac7
--- /dev/null
+++ b/apps/docs/app/routes/api-reference.ts
@@ -0,0 +1,18 @@
+import { getHtmlDocument } from '@scalar/core/libs/html-rendering';
+
+const publicApiSpecUrl = 'https://api.cdn.clsrio.com/openapi/public-api/openapi-latest.json';
+
+export function loader() {
+  return new Response(
+    getHtmlDocument({
+      url: publicApiSpecUrl,
+      pageTitle: 'ClassroomIO Public API Reference',
+      theme: 'none'
+    }),
+    {
+      headers: {
+        'content-type': 'text/html; charset=utf-8'
+      }
+    }
+  );
+}
diff --git a/apps/docs/src/routes/$.tsx b/apps/docs/app/routes/docs.tsx
similarity index 56%
rename from apps/docs/src/routes/$.tsx
rename to apps/docs/app/routes/docs.tsx
index 12a86bab..7e357a7d 100644
--- a/apps/docs/src/routes/$.tsx
+++ b/apps/docs/app/routes/docs.tsx
@@ -1,39 +1,14 @@
 import { useMemo } from 'react';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { createServerFn } from '@tanstack/react-start';
+
 import type * as PageTree from 'fumadocs-core/page-tree';
 import browserCollections from 'fumadocs-mdx:collections/browser';
-import { createFileRoute, notFound } from '@tanstack/react-router';
+import { isRouteErrorResponse, useLoaderData, useRouteError } from 'react-router';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
-
-import { source } from '@/lib/source';
-import { baseOptions } from '@/lib/layout.shared';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
 
-export const Route = createFileRoute('/$')({
-  component: Page,
-  loader: async ({ params }) => {
-    const slugs = params._splat?.split('/') ?? [];
-    const data = await loader({ data: slugs });
-    await clientLoader.preload(data.path);
-    return data;
-  }
-});
-
-const loader = createServerFn({
-  method: 'GET'
-})
-  .inputValidator((slugs: string[]) => slugs)
-  .handler(async ({ data: slugs }) => {
-    const page = source.getPage(slugs);
-    if (!page) throw notFound();
-
-    return {
-      tree: source.pageTree as object,
-      path: page.path
-    };
-  });
+import { NotFound } from '@/components/not-found';
+import { baseOptions } from '@/lib/layout.shared';
 
 const clientLoader = browserCollections.docs.createClientLoader({
   component({ toc, frontmatter, default: MDX }) {
@@ -42,21 +17,32 @@ const clientLoader = browserCollections.docs.createClientLoader({
         <DocsTitle>{frontmatter.title}</DocsTitle>
         <DocsDescription>{frontmatter.description}</DocsDescription>
         <DocsBody>
-          <MDX
-            components={{
-              ...defaultMdxComponents
-            }}
-          />
+          <MDX />
         </DocsBody>
       </DocsPage>
     );
   }
 });
 
-function Page() {
-  const data = Route.useLoaderData();
-  const Content = clientLoader.getComponent(data.path);
-  const tree = useMemo(() => transformPageTree(data.tree as PageTree.Folder), [data.tree]);
+export async function loader({ params }: { params: Record<string, string | undefined> }) {
+  const slug = params['*'];
+  const slugs = slug ? slug.split('/') : ['home'];
+  const { getDocsRouteData } = await import('@/lib/source.server');
+  const routeData = await getDocsRouteData(slugs);
+  if (!routeData) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (routeData.pageType === 'docs') {
+    await clientLoader.preload(routeData.path);
+  }
+
+  return routeData;
+}
+
+export default function DocsRoute() {
+  const data = useLoaderData<typeof loader>();
+  const tree = useMemo(() => transformPageTree(data.tree as PageTree.Root), [data.tree]);
 
   return (
     <HomeLayout {...baseOptions()}>
@@ -72,12 +58,36 @@ function Page() {
         }}
         tree={tree}
       >
-        <Content />
+        <MdxContent path={data.path} />
       </DocsLayout>
     </HomeLayout>
   );
 }
 
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return <NotFound />;
+  }
+
+  return (
+    <HomeLayout {...baseOptions()} className="justify-center py-32 text-center">
+      <div className="flex flex-col items-center gap-4">
+        <h1 className="text-2xl font-semibold">Docs Error</h1>
+        <p className="text-fd-muted-foreground max-w-md">
+          The docs page could not be rendered.
+        </p>
+      </div>
+    </HomeLayout>
+  );
+}
+
+function MdxContent({ path }: { path: string }) {
+  const Content = clientLoader.getComponent(path);
+  return <Content />;
+}
+
 function transformPageTree(root: PageTree.Root): PageTree.Root {
   function mapNode<T extends PageTree.Node>(item: T): T {
     if (typeof item.icon === 'string') {
diff --git a/apps/docs/app/routes/home.tsx b/apps/docs/app/routes/home.tsx
new file mode 100644
index 00000000..ba730c88
--- /dev/null
+++ b/apps/docs/app/routes/home.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'react-router';
+
+export function loader() {
+  throw redirect('/home');
+}
diff --git a/apps/docs/app/routes/search.ts b/apps/docs/app/routes/search.ts
new file mode 100644
index 00000000..7c97aaa1
--- /dev/null
+++ b/apps/docs/app/routes/search.ts
@@ -0,0 +1,10 @@
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export async function loader({ request }: { request: Request }) {
+  const { source } = await import('@/lib/source.server');
+  const server = createFromSource(source, {
+    language: 'english'
+  });
+
+  return server.GET(request);
+}
diff --git a/apps/docs/content/docs/api.mdx b/apps/docs/content/docs/api.mdx
new file mode 100644
index 00000000..baa87c95
--- /dev/null
+++ b/apps/docs/content/docs/api.mdx
@@ -0,0 +1,64 @@
+---
+title: API
+description: Use the ClassroomIO public API to manage audience members and courses with organization-scoped API keys.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+The ClassroomIO public API is available under:
+
+```text
+https://api.classroomio.com/public-api/v1
+```
+
+Authentication uses organization-scoped bearer tokens created from `Automation -> API` in the ClassroomIO dashboard.
+
+## Interactive Reference
+
+- [Open the interactive API reference](/docs/api/reference)
+
+## Plan Requirement
+
+<Callout type="warn" title="Paid Access">
+  API key creation is available only on Early Adopter and Enterprise plans.
+</Callout>
+
+## Current Surface
+
+Current public API groups:
+
+- `audience`
+- `courses`
+
+Implemented route families:
+
+- `GET /public-api/v1/audience`
+- `POST /public-api/v1/audience`
+- `POST /public-api/v1/audience/assign-courses`
+- `GET /public-api/v1/audience/:memberId`
+- `PUT /public-api/v1/audience/:memberId`
+- `DELETE /public-api/v1/audience/:memberId`
+- `GET /public-api/v1/courses`
+- `GET /public-api/v1/courses/:courseId`
+- `GET /public-api/v1/courses/:courseId/students`
+- `GET /public-api/v1/courses/:courseId/export`
+
+## OpenAPI
+
+Raw OpenAPI JSON:
+
+- [Public API OpenAPI JSON](https://api.cdn.clsrio.com/openapi/public-api/openapi-latest.json)
+- [Interactive API Reference](/docs/api/reference)
+
+## Authentication Example
+
+```bash
+curl https://api.classroomio.com/public-api/v1/audience \
+  -H "Authorization: Bearer <cio_api_key>"
+```
+
+## Notes
+
+- API keys are organization-scoped.
+- Enrollment is handled through `POST /public-api/v1/audience/assign-courses`.
+- The API documentation will expand as the remaining public API write endpoints are added.
diff --git a/apps/docs/content/docs/contributor-guides/adding-translation-to-code.mdx b/apps/docs/content/docs/contributor-guides/adding-translation-to-code.mdx
index 2776c83d..85648459 100644
--- a/apps/docs/content/docs/contributor-guides/adding-translation-to-code.mdx
+++ b/apps/docs/content/docs/contributor-guides/adding-translation-to-code.mdx
@@ -40,7 +40,7 @@ import { t } from '$lib/utils/functions/translations';
 Once you've updated the English file, you need to update the other files. To do this, run a command. Firstly ensure you're still in the `/apps/dashboard` directory, then execute:
 
 ```zsh title="Terminal"
-pnpm run script:translate
+pnpm run translate
 ```
 
 This command runs a script that updates the other translation files.
diff --git a/apps/docs/content/docs/meta.json b/apps/docs/content/docs/meta.json
index 3baafedd..cedbff24 100644
--- a/apps/docs/content/docs/meta.json
+++ b/apps/docs/content/docs/meta.json
@@ -7,6 +7,8 @@
 
     "---Core Features---",
     "course",
+    "programs",
+    "api",
     "mcp",
     "tags",
     "audience",
diff --git a/apps/docs/content/docs/programs.mdx b/apps/docs/content/docs/programs.mdx
new file mode 100644
index 00000000..a66ef250
--- /dev/null
+++ b/apps/docs/content/docs/programs.mdx
@@ -0,0 +1,10 @@
+---
+title: Programs
+description: Learn when to use Programs in ClassroomIO, the kinds of training they support, and how they work for both admins and learners.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Coming Soon">
+  Full customer documentation for Programs is still being prepared. For now, this page is a placeholder and the draft content has been moved into the product PRD.
+</Callout>
diff --git a/apps/docs/nitro.config.ts b/apps/docs/nitro.config.ts
deleted file mode 100644
index e0271625..00000000
--- a/apps/docs/nitro.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineNitroConfig } from 'nitro/config';
-
-export default defineNitroConfig({
-  compatibilityDate: '2026-03-13',
-  preset: 'cloudflare_module',
-  cloudflare: {
-    deployConfig: true,
-    nodeCompat: true
-  }
-});
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 9e40671e..47227a02 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -2,23 +2,26 @@
   "name": "@cio/docs",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "wrangler dev --port 4174",
-    "start": "wrangler dev --port 3001",
+    "dev": "react-router dev",
+    "build": "react-router build",
+    "preview": "react-router-serve ./build/server/index.js",
+    "start": "react-router-serve ./build/server/index.js",
     "types:check": "fumadocs-mdx && tsc --noEmit",
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.134.12",
-    "@tanstack/react-router-devtools": "^1.134.12",
-    "@tanstack/react-start": "^1.143.4",
+    "@scalar/core": "^0.3.28",
+    "@react-router/dev": "^7.9.4",
+    "@react-router/node": "^7.9.4",
+    "@react-router/serve": "^7.9.4",
     "fumadocs-core": "16.2.1",
     "fumadocs-mdx": "14.0.4",
     "fumadocs-ui": "16.2.1",
+    "isbot": "^5.1.30",
     "lucide-react": "^0.562.0",
     "lucide-static": "^0.552.0",
     "react": "^19.2.0",
+    "react-router": "^7.9.4",
     "react-dom": "^19.2.0",
     "tailwind-merge": "^3.3.1",
     "vite": "^7.2.0"
@@ -29,11 +32,8 @@
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^5.1.0",
-    "nitro": "3.0.1-alpha.1",
     "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^4.21.2"
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }
diff --git a/apps/docs/public/programs/lms-programs-placeholder.svg b/apps/docs/public/programs/lms-programs-placeholder.svg
new file mode 100644
index 00000000..84f58283
--- /dev/null
+++ b/apps/docs/public/programs/lms-programs-placeholder.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="300" height="28" rx="14" fill="#0F172A"/>
+  <rect x="96" y="170" width="1040" height="56" rx="18" fill="#E2E8F0"/>
+  <rect x="96" y="280" width="1360" height="420" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="776" y="490" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">LMS Programs Placeholder</text>
+  <text x="776" y="548" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with the learner programs list or learner program entry view.</text>
+</svg>
diff --git a/apps/docs/public/programs/program-courses-placeholder.svg b/apps/docs/public/programs/program-courses-placeholder.svg
new file mode 100644
index 00000000..8c985b5f
--- /dev/null
+++ b/apps/docs/public/programs/program-courses-placeholder.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="340" height="28" rx="14" fill="#0F172A"/>
+  <rect x="1220" y="88" width="236" height="52" rx="16" fill="#0F172A"/>
+  <text x="1338" y="122" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">Add Course</text>
+  <rect x="96" y="172" width="1360" height="60" rx="18" fill="#E2E8F0"/>
+  <rect x="96" y="276" width="1360" height="440" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="776" y="492" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Program Courses Placeholder</text>
+  <text x="776" y="550" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with the Courses page in either list or grid view.</text>
+</svg>
diff --git a/apps/docs/public/programs/program-newsfeed-placeholder.svg b/apps/docs/public/programs/program-newsfeed-placeholder.svg
new file mode 100644
index 00000000..a7a6ac83
--- /dev/null
+++ b/apps/docs/public/programs/program-newsfeed-placeholder.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="360" height="28" rx="14" fill="#0F172A"/>
+  <rect x="1256" y="88" width="200" height="52" rx="16" fill="#0F172A"/>
+  <text x="1356" y="122" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">New Post</text>
+  <rect x="240" y="190" width="1072" height="500" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="776" y="426" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Program Newsfeed Placeholder</text>
+  <text x="776" y="484" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with a screenshot of posts, reactions, and comments.</text>
+</svg>
diff --git a/apps/docs/public/programs/program-people-placeholder.svg b/apps/docs/public/programs/program-people-placeholder.svg
new file mode 100644
index 00000000..daa35f8c
--- /dev/null
+++ b/apps/docs/public/programs/program-people-placeholder.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="320" height="28" rx="14" fill="#0F172A"/>
+  <rect x="1234" y="88" width="222" height="52" rx="16" fill="#0F172A"/>
+  <text x="1345" y="122" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">Invite People</text>
+  <rect x="96" y="182" width="760" height="52" rx="16" fill="#E2E8F0"/>
+  <rect x="884" y="182" width="180" height="52" rx="16" fill="#E2E8F0"/>
+  <rect x="96" y="286" width="1360" height="430" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="776" y="500" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Program People Placeholder</text>
+  <text x="776" y="558" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with the People page and membership table.</text>
+</svg>
diff --git a/apps/docs/public/programs/program-settings-placeholder.svg b/apps/docs/public/programs/program-settings-placeholder.svg
new file mode 100644
index 00000000..e690f355
--- /dev/null
+++ b/apps/docs/public/programs/program-settings-placeholder.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="340" height="28" rx="14" fill="#0F172A"/>
+  <rect x="1220" y="88" width="236" height="52" rx="16" fill="#0F172A"/>
+  <text x="1338" y="122" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">Save Changes</text>
+  <rect x="248" y="198" width="1104" height="470" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="800" y="432" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Program Settings Placeholder</text>
+  <text x="800" y="490" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with the Settings page showing status and general fields.</text>
+</svg>
diff --git a/apps/docs/public/programs/program-sidebar-placeholder.svg b/apps/docs/public/programs/program-sidebar-placeholder.svg
new file mode 100644
index 00000000..f0bd6a1f
--- /dev/null
+++ b/apps/docs/public/programs/program-sidebar-placeholder.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="280" height="660" rx="24" fill="#E2E8F0"/>
+  <rect x="136" y="150" width="200" height="22" rx="11" fill="#0F172A"/>
+  <rect x="136" y="224" width="200" height="56" rx="16" fill="#FFFFFF"/>
+  <rect x="136" y="300" width="200" height="56" rx="16" fill="#FFFFFF"/>
+  <rect x="136" y="376" width="200" height="56" rx="16" fill="#FFFFFF"/>
+  <rect x="136" y="452" width="200" height="56" rx="16" fill="#FFFFFF"/>
+  <rect x="424" y="96" width="1032" height="92" rx="24" fill="#E2E8F0"/>
+  <rect x="424" y="224" width="1032" height="532" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="940" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Program Shell Placeholder</text>
+  <text x="940" y="528" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with a screenshot showing the sidebar and header layout.</text>
+</svg>
diff --git a/apps/docs/public/programs/programs-list-placeholder.svg b/apps/docs/public/programs/programs-list-placeholder.svg
new file mode 100644
index 00000000..8062a58f
--- /dev/null
+++ b/apps/docs/public/programs/programs-list-placeholder.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="360" height="28" rx="14" fill="#0F172A"/>
+  <rect x="96" y="146" width="520" height="18" rx="9" fill="#94A3B8"/>
+  <rect x="1200" y="92" width="256" height="52" rx="16" fill="#0F172A"/>
+  <text x="1328" y="126" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">Create Program</text>
+  <rect x="96" y="206" width="960" height="52" rx="16" fill="#E2E8F0"/>
+  <rect x="1080" y="206" width="180" height="52" rx="16" fill="#E2E8F0"/>
+  <rect x="1280" y="206" width="176" height="52" rx="16" fill="#E2E8F0"/>
+  <rect x="96" y="296" width="1360" height="420" rx="24" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="776" y="500" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Programs List Placeholder</text>
+  <text x="776" y="558" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with the org dashboard programs index page.</text>
+</svg>
diff --git a/apps/docs/public/programs/programs-overview-placeholder.svg b/apps/docs/public/programs/programs-overview-placeholder.svg
new file mode 100644
index 00000000..ab985ff5
--- /dev/null
+++ b/apps/docs/public/programs/programs-overview-placeholder.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" fill="none">
+  <rect width="1600" height="900" fill="#F8FAFC"/>
+  <rect x="48" y="48" width="1504" height="804" rx="28" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="4"/>
+  <rect x="96" y="96" width="420" height="28" rx="14" fill="#0F172A"/>
+  <rect x="96" y="144" width="760" height="18" rx="9" fill="#94A3B8"/>
+  <rect x="96" y="210" width="1408" height="560" rx="24" fill="#E2E8F0"/>
+  <rect x="144" y="274" width="1312" height="96" rx="20" fill="#FFFFFF" stroke="#94A3B8" stroke-dasharray="14 10" stroke-width="4"/>
+  <text x="800" y="330" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#0F172A">Programs Overview Placeholder</text>
+  <text x="800" y="388" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" fill="#475569">Replace with a broad screenshot that explains the Programs feature at a glance.</text>
+</svg>
diff --git a/apps/docs/react-router.config.ts b/apps/docs/react-router.config.ts
new file mode 100644
index 00000000..b4efb3d3
--- /dev/null
+++ b/apps/docs/react-router.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  basename: '/docs'
+} satisfies Config;
diff --git a/apps/docs/src/lib/source.ts b/apps/docs/src/lib/source.ts
deleted file mode 100644
index b4d70bae..00000000
--- a/apps/docs/src/lib/source.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { loader } from 'fumadocs-core/source';
-import * as icons from 'lucide-static';
-import { docs } from 'fumadocs-mdx:collections/server';
-
-export const source = loader({
-  source: docs.toFumadocsSource(),
-  baseUrl: '/',
-  icon(icon) {
-    if (!icon) {
-      return;
-    }
-
-    if (icon in icons) return icons[icon as keyof typeof icons];
-  },
-});
diff --git a/apps/docs/src/router.tsx b/apps/docs/src/router.tsx
deleted file mode 100644
index cf81bef7..00000000
--- a/apps/docs/src/router.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NotFound } from '@/components/not-found';
-import { createRouter as createTanStackRouter } from '@tanstack/react-router';
-import { routeTree } from './routeTree.gen';
-
-export function getRouter() {
-  return createTanStackRouter({
-    basepath: '/docs',
-    defaultNotFoundComponent: NotFound,
-    defaultPreload: 'intent',
-    routeTree,
-    scrollRestoration: true
-  });
-}
diff --git a/apps/docs/src/routes/__root.tsx b/apps/docs/src/routes/__root.tsx
deleted file mode 100644
index 2100cf2a..00000000
--- a/apps/docs/src/routes/__root.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from 'react';
-
-import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router';
-
-import { RootProvider } from 'fumadocs-ui/provider/tanstack';
-import appCss from '@/styles/app.css?url';
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8'
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1'
-      },
-      {
-        title: 'ClassroomIO | The Open Source Learning Management System for Companies'
-      },
-      {
-        name: 'description',
-        content:
-          'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
-      },
-      {
-        property: 'og:url',
-        content: 'https://classroomio.com/docs'
-      },
-      {
-        property: 'og:type',
-        content: 'website'
-      },
-      {
-        property: 'og:title',
-        content: 'ClassroomIO | The Open Source Learning Management System for Companies'
-      },
-      {
-        property: 'og:description',
-        content:
-          'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
-      },
-      {
-        property: 'og:image:type',
-        content: 'image/png'
-      },
-      {
-        property: 'og:image:width',
-        content: '1920'
-      },
-      {
-        property: 'og:image:height',
-        content: '1080'
-      },
-      {
-        property: 'og:image:secure_url',
-        itemProp: 'image',
-        content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
-      },
-      {
-        name: 'twitter:card',
-        content: 'summary_large_image'
-      },
-      {
-        property: 'twitter:domain',
-        content: 'classroomio.com'
-      },
-      {
-        property: 'twitter:url',
-        content: 'https://classroomio.com/docs'
-      },
-      {
-        name: 'twitter:title',
-        content: 'ClassroomIO | The Open Source Learning Management System for Companies'
-      },
-      {
-        name: 'twitter:description',
-        content:
-          'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
-      },
-      {
-        name: 'twitter:creator',
-        content: '@classroomio'
-      },
-      {
-        name: 'twitter:image',
-        content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
-      }
-    ],
-    links: [
-      { rel: 'stylesheet', href: appCss },
-      { rel: 'icon', href: '/favicon.ico' }
-    ]
-  }),
-  component: RootComponent
-});
-
-function RootComponent() {
-  return (
-    <RootDocument>
-      <Outlet />
-    </RootDocument>
-  );
-}
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html suppressHydrationWarning>
-      <head>
-        <HeadContent />
-      </head>
-      <body className="flex min-h-screen flex-col">
-        <RootProvider>{children}</RootProvider>
-        <Scripts />
-      </body>
-    </html>
-  );
-}
diff --git a/apps/docs/src/routes/api/search.ts b/apps/docs/src/routes/api/search.ts
deleted file mode 100644
index df84716d..00000000
--- a/apps/docs/src/routes/api/search.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router';
-import { source } from '@/lib/source';
-import { createFromSource } from 'fumadocs-core/search/server';
-
-const server = createFromSource(source, {
-  // https://docs.orama.com/docs/orama-js/supported-languages
-  language: 'english',
-});
-
-export const Route = createFileRoute('/api/search')({
-  server: {
-    handlers: {
-      GET: async ({ request }) => server.GET(request),
-    },
-  },
-});
diff --git a/apps/docs/src/routes/index.tsx b/apps/docs/src/routes/index.tsx
deleted file mode 100644
index bfe77e1e..00000000
--- a/apps/docs/src/routes/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createFileRoute, redirect } from '@tanstack/react-router';
-
-export const Route = createFileRoute('/')({
-  beforeLoad: () => {
-    throw redirect({
-      to: '/$',
-      params: {
-        _splat: 'home'
-      }
-    });
-  }
-});
diff --git a/apps/docs/src/styles/app.css b/apps/docs/src/styles/app.css
deleted file mode 100644
index 729a14b8..00000000
--- a/apps/docs/src/styles/app.css
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'tailwindcss' source('../');
-@import 'fumadocs-ui/css/black.css';
-@import 'fumadocs-ui/css/preset.css';
-
-body {
-  --color-fd-primary: var(--color-blue-700);
-}
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 0f01ec5e..8ad3355f 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["app/**/*.ts", "app/**/*.tsx", "react-router.config.ts", "source.config.ts", "vite.config.ts"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
@@ -16,7 +16,7 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": ["./app/*"],
       "fumadocs-mdx:collections/*": [".source/*"]
     },
     "noEmit": true
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 622698e7..8bd26269 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -1,13 +1,12 @@
 import { defineConfig } from 'vite';
 import mdx from 'fumadocs-mdx/vite';
-import { nitro } from 'nitro/vite';
-import react from '@vitejs/plugin-react';
+import { reactRouter } from '@react-router/dev/vite';
 import tailwindcss from '@tailwindcss/vite';
-import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   server: {
+    host: '127.0.0.1',
     port: 3000
   },
   base: '/docs',
@@ -17,12 +16,6 @@ export default defineConfig({
     tsConfigPaths({
       projects: ['./tsconfig.json']
     }),
-    tanstackStart(),
-    react(),
-    // see https://tanstack.com/start/latest/docs/framework/react/guide/hosting for hosting config
-    // we configured nitro by default
-    nitro({
-      baseURL: '/docs'
-    })
+    reactRouter()
   ]
 });
diff --git a/apps/embeds/README.md b/apps/embeds/README.md
new file mode 100644
index 00000000..c6c85573
--- /dev/null
+++ b/apps/embeds/README.md
@@ -0,0 +1,130 @@
+# @cio/embeds
+
+Standalone **ES module** bundles for third-party sites (no dependency on `apps/website`). The question-type-picker entry shows a **small loading spinner** (same style as `@cio/ui` `Spinner`) as soon as the bootstrap script runs, then loads the main widget chunk—so slow connections see feedback while the larger bundle downloads.
+
+## Question type picker
+
+Build outputs **`dist/question-type-picker.js`** (bootstrap) plus **additional `question-type-picker-*.js` chunks**. Upload **every** `.js` file from `dist/` to the same directory on your CDN so dynamic `import()` resolves correctly.
+
+CSS for the widget is injected when the main chunk runs.
+
+### Develop
+
+```bash
+pnpm --filter @cio/embeds dev
+```
+
+Open the dev harness at `http://localhost:5180` (see root `index.html`).
+
+### Build
+
+```bash
+pnpm --filter @cio/embeds build
+```
+
+`prebuild` runs `@cio/ui` Tailwind generation so `@cio/ui/output.css` exists for `src/embed.css`.
+
+## Deploy to Cloudflare R2
+
+Built files are uploaded with the same S3-compatible credentials and **`assets`** bucket used for Storybook. Objects live under a **per-widget prefix** so future embeds do not clash:
+
+| Widget               | R2 key prefix                  |
+| -------------------- | ------------------------------ |
+| Question type picker | `embeds/question-type-picker/` |
+
+After upload, every file from `dist/` appears at `embeds/question-type-picker/<filename>`. The bootstrap script is always **`question-type-picker.js`**; lazy-loaded chunks use **content hashes** in the filename (for example `question-type-picker-embed-mount-7a3b2c1d.js`) so they can be cached for a long time. The upload script sets a **short TTL + `must-revalidate`** on the bootstrap only, so a normal refresh picks up new chunk URLs after you deploy. If you still see an old UI, hard-refresh or purge your CDN cache for `question-type-picker.js`.
+
+Map your **public CDN or custom domain** to this bucket (or path) so those URLs are reachable over HTTPS.
+
+### Environment variables
+
+Set these locally (e.g. `.env` in `apps/embeds`, loaded by the upload script) or in CI:
+
+- `CLOUDFLARE_ACCESS_KEY`
+- `CLOUDFLARE_SECRET_ACCESS_KEY`
+- `CLOUDFLARE_ACCOUNT_ID`
+
+**CDN cache purge (optional):** R2 is only storage; if `assets.cdn.clsrio.com` (or your public host) is **proxied through Cloudflare**, edge cache can still serve old bytes after upload. The upload script can call Cloudflare’s **Purge Cache** API for every file URL it just published.
+
+- `CLOUDFLARE_API_TOKEN` — API token with **Zone → Cache Purge → Purge** on the zone that serves the asset hostname (not the R2 S3 access key).
+- `CLOUDFLARE_ZONE_ID` — that zone’s ID (dashboard → site → Overview → API).
+- `EMBED_CDN_BASE_URL` — public origin for URLs to purge, default `https://assets.cdn.clsrio.com` (no trailing slash). Override if your embeds are served under another host.
+- `EMBED_SKIP_CDN_PURGE=1` — skip purge (e.g. local testing).
+
+If `CLOUDFLARE_API_TOKEN` or `CLOUDFLARE_ZONE_ID` is missing, upload still succeeds and purge is skipped.
+
+### Manual publish (build + upload)
+
+From the repo root:
+
+```bash
+pnpm --filter @cio/embeds run embeds:publish
+```
+
+Or from `apps/embeds` after a build:
+
+```bash
+pnpm upload:embeds
+```
+
+`pnpm upload:embeds` only uploads `dist/`; run `pnpm build` first if needed.
+
+### GitHub Actions
+
+Workflow: [`.github/workflows/deploy-embeds.yml`](../../.github/workflows/deploy-embeds.yml).
+
+- **When it runs:** push to **`main`** that touches `packages/ui/**`, `packages/question-types/**`, or `apps/embeds/**`, or **workflow_dispatch**.
+- **What it does:** `pnpm i`, then `pnpm --filter @cio/embeds run embeds:publish`.
+- **Secrets:** the job uses the **`production`** environment; configure the R2 `CLOUDFLARE_ACCESS_KEY`, `CLOUDFLARE_SECRET_ACCESS_KEY`, and `CLOUDFLARE_ACCOUNT_ID` there. Optionally add `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ZONE_ID` so each deploy purges the Cloudflare CDN cache for the published embed URLs. Optional repo variable `EMBED_CDN_BASE_URL` overrides the default public base URL used when building purge URLs.
+
+## Embed on a site
+
+The bootstrap file **`question-type-picker.js`** loads additional chunks via dynamic `import()`. Browsers resolve those URLs **relative to the bootstrap script’s URL**, so **every file from `dist/` must be served from the same directory** (same path prefix on your CDN). Do not host only the bootstrap file.
+
+### Production (CDN / R2 public URL)
+
+Use your public base URL for the picker folder—for example:
+
+```text
+https://<your-public-host>/embeds/question-type-picker/
+```
+
+Then reference the bootstrap script under that path.
+
+**Auto-mount** (looks for `[data-cio-widget="question-type-picker"]`):
+
+```html
+<div data-cio-widget="question-type-picker"></div>
+<script type="module" src="https://<your-public-host>/embeds/question-type-picker/question-type-picker.js"></script>
+```
+
+**Manual mount** (no `data-cio-widget` on that node—avoid double-mounting):
+
+```html
+<div id="qtp"></div>
+<script type="module">
+  await import('https://<your-public-host>/embeds/question-type-picker/question-type-picker.js');
+  const el = document.getElementById('qtp');
+  if (el) window.CIO?.questionTypePicker?.mount(el);
+</script>
+```
+
+### Local or any static host
+
+If you copy all of `dist/` to a single URL prefix, set `src` / `import()` to that prefix + `question-type-picker.js` (same pattern as above, with your host and path).
+
+Use a **`type="module"`** script in all cases; the bundle is ES modules with code-splitting.
+
+### Local smoke test
+
+From `apps/embeds`, after `pnpm build`, serve the folder and open `example-embed.html`:
+
+```bash
+pnpm build && npx serve . -p 5190
+# open http://localhost:5190/example-embed.html
+```
+
+## Adding another widget
+
+1. Add `src/widgets/<name>/widget.svelte` and a bootstrap entry (same pattern as `question-type-picker`).
+2. Add a dedicated `build.lib.entry` or Vite config if you need a separate publishable script.
diff --git a/apps/embeds/cdn.html b/apps/embeds/cdn.html
new file mode 100644
index 00000000..9f7f4f0e
--- /dev/null
+++ b/apps/embeds/cdn.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CDN</title>
+  </head>
+
+  <body>
+    <div data-cio-widget="question-type-picker"></div>
+    <script
+      type="module"
+      src="https://assets.cdn.clsrio.com/embeds/question-type-picker/question-type-picker.js"
+    ></script>
+  </body>
+</html>
diff --git a/apps/embeds/example-embed.html b/apps/embeds/example-embed.html
new file mode 100644
index 00000000..bf53e9e1
--- /dev/null
+++ b/apps/embeds/example-embed.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Question type picker embed (static test)</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <p style="max-width: 56rem; margin: 0 auto 1rem; color: #52525b; font-size: 0.875rem">
+      Serve this directory over HTTP (e.g. <code>npx serve .</code> from <code>apps/embeds</code> after
+      <code>pnpm build</code>). File URLs will not load the script correctly.
+    </p>
+    <div style="max-width: 56rem; margin: 0 auto" data-cio-widget="question-type-picker"></div>
+    <script type="module" src="./dist/question-type-picker.js"></script>
+  </body>
+</html>
diff --git a/apps/embeds/index.html b/apps/embeds/index.html
new file mode 100644
index 00000000..ddd09a61
--- /dev/null
+++ b/apps/embeds/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ClassroomIO embeds — dev harness</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        background: #f4f4f5;
+      }
+      .harness-note {
+        max-width: 56rem;
+        margin: 0 auto 1.5rem;
+        font-size: 0.875rem;
+        color: #52525b;
+      }
+      #demo {
+        max-width: 56rem;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <p class="harness-note">
+      Dev harness for the question-type-picker embed. Production sites load
+      <code>question-type-picker.js</code> and a mount target only.
+    </p>
+    <div id="demo" data-cio-widget="question-type-picker"></div>
+    <script type="module" src="/src/widgets/question-type-picker/bootstrap.ts"></script>
+  </body>
+</html>
diff --git a/apps/embeds/package.json b/apps/embeds/package.json
new file mode 100644
index 00000000..602415ee
--- /dev/null
+++ b/apps/embeds/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@cio/embeds",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 5180",
+    "prebuild": "pnpm --filter @cio/ui run build",
+    "build": "rm -rf dist && vite build",
+    "format": "prettier --write .",
+    "preview": "vite preview --port 4180",
+    "upload:embeds": "tsx scripts/upload-embeds.ts",
+    "embeds:publish": "pnpm build && pnpm upload:embeds"
+  },
+  "devDependencies": {
+    "@aws-sdk/client-s3": "^3.388.0",
+    "@cio/tsconfig": "workspace:*",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.16",
+    "svelte": "^5.39.11",
+    "dotenv": "^16.3.1",
+    "tsx": "^4.7.1",
+    "typescript": "^5.5.0",
+    "vite": "^7.1.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  },
+  "dependencies": {
+    "@cio/ui": "workspace:*",
+    "@cio/question-types": "workspace:*",
+    "@lucide/svelte": "^0.562.0"
+  }
+}
diff --git a/apps/embeds/scripts/upload-embeds.ts b/apps/embeds/scripts/upload-embeds.ts
new file mode 100644
index 00000000..6d3617ad
--- /dev/null
+++ b/apps/embeds/scripts/upload-embeds.ts
@@ -0,0 +1,267 @@
+#!/usr/bin/env tsx
+
+/**
+ * Upload built embed assets to Cloudflare R2 (S3-compatible), same bucket pattern as Storybook.
+ *
+ * Each widget gets its own prefix under `embeds/<widget>/` so future widgets stay isolated.
+ *
+ * @see packages/storybook/scripts/upload-storybook.ts
+ */
+
+import 'dotenv/config';
+
+import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
+import { join, relative } from 'node:path';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+
+const BUCKET = 'assets';
+
+/** R2 object key prefix (no trailing slash). */
+const EMBED_WIDGET_PREFIX = 'embeds/question-type-picker';
+
+/** Cloudflare allows a limited number of URLs per purge request. */
+const PURGE_URL_BATCH = 30;
+
+const DEFAULT_CDN_BASE = 'https://assets.cdn.clsrio.com';
+
+function normalizePublicBaseUrl(raw: string | undefined): string {
+  const value = raw != null && raw.trim() !== '' ? raw.trim() : DEFAULT_CDN_BASE;
+  const trimmed = value.replace(/\/$/, '');
+  if (!trimmed.startsWith('https://')) {
+    throw new Error('EMBED_CDN_BASE_URL must be an https URL (no trailing slash).');
+  }
+  return trimmed;
+}
+
+/**
+ * Purge Cloudflare **edge cache** for public URLs that map to R2 objects.
+ * R2 itself has no separate HTTP cache; purging fixes stale responses when the hostname is proxied through Cloudflare.
+ */
+async function purgeCloudflareCdnForUrls(urls: string[]): Promise<void> {
+  if (process.env.EMBED_SKIP_CDN_PURGE === '1' || process.env.EMBED_SKIP_CDN_PURGE === 'true') {
+    console.log('Skipping Cloudflare CDN purge (EMBED_SKIP_CDN_PURGE is set).');
+    return;
+  }
+
+  const token = process.env.CLOUDFLARE_API_TOKEN;
+  const zoneId = process.env.CLOUDFLARE_ZONE_ID;
+
+  if (!token || !zoneId) {
+    console.log(
+      'Skipping Cloudflare CDN cache purge. Set CLOUDFLARE_API_TOKEN and CLOUDFLARE_ZONE_ID to purge after upload.'
+    );
+    return;
+  }
+
+  if (urls.length === 0) {
+    return;
+  }
+
+  const uniqueUrls = [...new Set(urls)];
+
+  for (let i = 0; i < uniqueUrls.length; i += PURGE_URL_BATCH) {
+    const batch = uniqueUrls.slice(i, i + PURGE_URL_BATCH);
+    const response = await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/purge_cache`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ files: batch })
+    });
+
+    const payload: unknown = await response.json().catch(() => ({}));
+    const success =
+      response.ok &&
+      typeof payload === 'object' &&
+      payload !== null &&
+      'success' in payload &&
+      (payload as { success?: boolean }).success === true;
+
+    if (!success) {
+      throw new Error(`Cloudflare CDN purge failed: ${response.status} ${JSON.stringify(payload)}`);
+    }
+
+    console.log(`Purged Cloudflare CDN cache for ${batch.length} URL(s).`);
+  }
+}
+
+class EmbedsUploader {
+  private s3Client: S3Client | null = null;
+  private readonly buildDir: string;
+
+  constructor() {
+    this.buildDir = join(process.cwd(), 'dist');
+    this.initializeS3Client();
+  }
+
+  private initializeS3Client(): void {
+    const accessKey = process.env.CLOUDFLARE_ACCESS_KEY;
+    const secretKey = process.env.CLOUDFLARE_SECRET_ACCESS_KEY;
+    const accountId = process.env.CLOUDFLARE_ACCOUNT_ID;
+
+    if (accessKey && secretKey && accountId) {
+      this.s3Client = new S3Client({
+        region: 'auto',
+        endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
+        credentials: {
+          accessKeyId: accessKey,
+          secretAccessKey: secretKey
+        }
+      });
+      console.log('S3 client initialized for Cloudflare R2');
+    } else {
+      throw new Error(
+        'Missing Cloudflare R2 credentials (CLOUDFLARE_ACCESS_KEY, CLOUDFLARE_SECRET_ACCESS_KEY, CLOUDFLARE_ACCOUNT_ID)'
+      );
+    }
+  }
+
+  private getContentType(filePath: string): string {
+    const ext = filePath.split('.').pop()?.toLowerCase();
+    const contentTypes: Record<string, string> = {
+      html: 'text/html',
+      js: 'application/javascript',
+      mjs: 'application/javascript',
+      json: 'application/json',
+      css: 'text/css',
+      map: 'application/json',
+      txt: 'text/plain'
+    };
+    return contentTypes[ext || ''] || 'application/octet-stream';
+  }
+
+  private getCacheControl(filePath: string): string {
+    if (filePath.endsWith('.html')) {
+      return 'public, max-age=300';
+    }
+    if (filePath.match(/\.(js|mjs)$/)) {
+      const baseName = filePath.split(/[/\\]/).pop() ?? filePath;
+      // Stable bootstrap URL must revalidate quickly so new chunk hashes roll out after deploy.
+      if (baseName === 'question-type-picker.js') {
+        return 'public, max-age=300, must-revalidate';
+      }
+      return 'public, max-age=31536000, immutable';
+    }
+    if (filePath.endsWith('.css')) {
+      return 'public, max-age=3600';
+    }
+    return 'public, max-age=3600';
+  }
+
+  private getAllFiles(dir: string, baseDir: string = dir): string[] {
+    const files: string[] = [];
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      const relativePath = relative(baseDir, fullPath);
+
+      if (entry.isDirectory()) {
+        files.push(...this.getAllFiles(fullPath, baseDir));
+      } else {
+        files.push(relativePath);
+      }
+    }
+
+    return files;
+  }
+
+  async uploadFile(relativePath: string): Promise<void> {
+    if (!this.s3Client) {
+      throw new Error('S3 client not initialized');
+    }
+
+    const fullPath = join(this.buildDir, relativePath);
+    const content = readFileSync(fullPath);
+    const contentType = this.getContentType(relativePath);
+    const cacheControl = this.getCacheControl(relativePath);
+    const key = `${EMBED_WIDGET_PREFIX}/${relativePath.split('\\').join('/')}`;
+
+    const command = new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: key,
+      Body: content,
+      ContentType: contentType,
+      CacheControl: cacheControl
+    });
+
+    await this.s3Client.send(command);
+    console.log(`Uploaded: ${key}`);
+  }
+
+  async uploadAll(): Promise<void> {
+    try {
+      statSync(this.buildDir);
+    } catch {
+      throw new Error(`Build directory not found: ${this.buildDir}. Run pnpm build in apps/embeds first.`);
+    }
+
+    console.log('Uploading embeds to R2...');
+    console.log(`Build directory: ${this.buildDir}`);
+    console.log(`Key prefix: ${EMBED_WIDGET_PREFIX}/`);
+
+    const files = this.getAllFiles(this.buildDir);
+    if (files.length === 0) {
+      throw new Error('No files in dist/. Run pnpm build first.');
+    }
+
+    console.log(`Found ${files.length} files to upload`);
+
+    const batchSize = 10;
+    for (let i = 0; i < files.length; i += batchSize) {
+      const batch = files.slice(i, i + batchSize);
+      await Promise.all(batch.map((file) => this.uploadFile(file)));
+      console.log(`Batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(files.length / batchSize)}`);
+    }
+
+    console.log('Embeds upload completed.');
+
+    const publicBase = normalizePublicBaseUrl(process.env.EMBED_CDN_BASE_URL);
+    const purgeUrls = files.map(
+      (relativePath) => `${publicBase}/${EMBED_WIDGET_PREFIX}/${relativePath.split('\\').join('/')}`
+    );
+    await purgeCloudflareCdnForUrls(purgeUrls);
+  }
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(`
+Usage: tsx scripts/upload-embeds.ts
+
+Uploads apps/embeds/dist/* to R2 under ${EMBED_WIDGET_PREFIX}/
+
+Environment (same as Storybook R2 upload):
+  CLOUDFLARE_ACCESS_KEY
+  CLOUDFLARE_SECRET_ACCESS_KEY
+  CLOUDFLARE_ACCOUNT_ID
+
+Optional — purge Cloudflare CDN cache for the public asset host after upload (not R2; use when the domain is orange-clouded):
+  CLOUDFLARE_API_TOKEN   (Zone → Cache Purge → Purge)
+  CLOUDFLARE_ZONE_ID
+  EMBED_CDN_BASE_URL     (default ${DEFAULT_CDN_BASE})
+  EMBED_SKIP_CDN_PURGE=1 to skip purge
+
+Bucket: ${BUCKET}
+`);
+    return;
+  }
+
+  const uploader = new EmbedsUploader();
+  await uploader.uploadAll();
+}
+
+const isMain = process.argv[1]?.includes('upload-embeds');
+if (isMain) {
+  main()
+    .then(() => process.exit(0))
+    .catch((error) => {
+      console.error('Script failed:', error);
+      process.exit(1);
+    });
+}
+
+export { EmbedsUploader, EMBED_WIDGET_PREFIX };
diff --git a/apps/embeds/src/embed.css b/apps/embeds/src/embed.css
new file mode 100644
index 00000000..b763f210
--- /dev/null
+++ b/apps/embeds/src/embed.css
@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+@import '@cio/ui/output.css';
+
+@source '../node_modules/@cio/ui/src/**/*.svelte';
+@source './**/*.svelte';
diff --git a/apps/embeds/src/shared/mount.ts b/apps/embeds/src/shared/mount.ts
new file mode 100644
index 00000000..619d2ac5
--- /dev/null
+++ b/apps/embeds/src/shared/mount.ts
@@ -0,0 +1,20 @@
+import { mount, unmount } from 'svelte';
+import type { Component } from 'svelte';
+
+export type MountResult = {
+  destroy: () => void;
+};
+
+export function mountSvelteComponent<Props extends Record<string, unknown>>(
+  target: HTMLElement,
+  Component: Component<Props>,
+  props?: Props
+): MountResult {
+  const instance = mount(Component, { target, props: props ?? ({} as Props) });
+
+  return {
+    destroy: () => {
+      unmount(instance);
+    }
+  };
+}
diff --git a/apps/embeds/src/widgets/question-type-picker/bootstrap.ts b/apps/embeds/src/widgets/question-type-picker/bootstrap.ts
new file mode 100644
index 00000000..410d4ed8
--- /dev/null
+++ b/apps/embeds/src/widgets/question-type-picker/bootstrap.ts
@@ -0,0 +1,118 @@
+const WIDGET_ATTR = 'data-cio-widget';
+const WIDGET_VALUE = 'question-type-picker';
+const LOADING_CLASS = 'cio-embed-loading';
+
+/** Must stay in sync with `QuestionTypePicker` outer `min-h-[320px]` so the embed does not jump after load. */
+const EMBED_MIN_HEIGHT_PX = 320;
+
+export type QuestionTypePickerEmbedApi = {
+  mount: (element: HTMLElement) => { destroy: () => void };
+};
+
+declare global {
+  interface Window {
+    CIO?: {
+      questionTypePicker?: QuestionTypePickerEmbedApi;
+    };
+  }
+}
+
+let stylesInjected = false;
+
+function injectSpinnerStyles(): void {
+  if (stylesInjected) return;
+  stylesInjected = true;
+
+  const css = `
+@keyframes cio-embed-spin { to { transform: rotate(360deg); } }
+.${LOADING_CLASS} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: ${EMBED_MIN_HEIGHT_PX}px;
+  padding: 1rem;
+  color: oklch(0.556 0 0);
+}
+.${LOADING_CLASS} svg {
+  animation: cio-embed-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+`;
+
+  const styleEl = document.createElement('style');
+  styleEl.setAttribute('data-cio-embed', 'question-type-picker-loading');
+  styleEl.textContent = css;
+  document.head.appendChild(styleEl);
+}
+
+/** 16×16 — same multi-segment loader as `@cio/ui` Spinner (Lucide Loader, `size-4`). */
+const LOADER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v4"/><path d="m16.24 7.76 2.83-2.83"/><path d="M22 12h-4"/><path d="m16.24 16.24 2.83 2.83"/><path d="M12 22v-4"/><path d="m7.76 16.24-2.83 2.83"/><path d="M2 12h4"/><path d="m7.76 7.76-2.83-2.83"/></svg>`;
+
+function renderLoading(container: HTMLElement): void {
+  injectSpinnerStyles();
+
+  const root = document.createElement('div');
+  root.className = LOADING_CLASS;
+  root.setAttribute('role', 'status');
+  root.setAttribute('aria-live', 'polite');
+  root.setAttribute('aria-label', 'Loading');
+  root.innerHTML = LOADER_SVG;
+
+  container.replaceChildren(root);
+}
+
+function collectTargets(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>(`[${WIDGET_ATTR}="${WIDGET_VALUE}"]`)];
+}
+
+function scheduleMount(targets: HTMLElement[]): void {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      void import('./embed-mount.ts').then((mod) => {
+        mod.mountAllAuto(targets);
+      });
+    });
+  });
+}
+
+function manualMount(element: HTMLElement): { destroy: () => void } {
+  renderLoading(element);
+
+  let cancelled = false;
+  let destroyWidget: (() => void) | null = null;
+
+  void import('./embed-mount.ts').then((mod) => {
+    if (cancelled) return;
+    destroyWidget = mod.mountWidget(element).destroy;
+  });
+
+  return {
+    destroy: () => {
+      cancelled = true;
+      destroyWidget?.();
+      element.replaceChildren();
+    }
+  };
+}
+
+function init(): void {
+  const targets = collectTargets();
+
+  for (const element of targets) {
+    renderLoading(element);
+  }
+
+  window.CIO = window.CIO ?? {};
+  window.CIO.questionTypePicker = {
+    mount: manualMount
+  };
+
+  scheduleMount(targets);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init, { once: true });
+} else {
+  init();
+}
diff --git a/apps/embeds/src/widgets/question-type-picker/embed-mount.ts b/apps/embeds/src/widgets/question-type-picker/embed-mount.ts
new file mode 100644
index 00000000..261bf5c3
--- /dev/null
+++ b/apps/embeds/src/widgets/question-type-picker/embed-mount.ts
@@ -0,0 +1,22 @@
+import '../../embed.css';
+
+import { mount, unmount } from 'svelte';
+
+import Widget from './widget.svelte';
+
+export function mountWidget(target: HTMLElement): { destroy: () => void } {
+  target.replaceChildren();
+  const instance = mount(Widget, { target });
+
+  return {
+    destroy: () => {
+      unmount(instance);
+    }
+  };
+}
+
+export function mountAllAuto(targets: readonly HTMLElement[]): void {
+  for (const element of targets) {
+    mountWidget(element);
+  }
+}
diff --git a/apps/embeds/src/widgets/question-type-picker/widget.svelte b/apps/embeds/src/widgets/question-type-picker/widget.svelte
new file mode 100644
index 00000000..92fdd176
--- /dev/null
+++ b/apps/embeds/src/widgets/question-type-picker/widget.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  /** Subpath import avoids `@cio/ui` barrel `index.css` side effect (embed ships its own `embed.css`). */
+  import { QuestionTypePicker } from '@cio/ui/custom/question-type-picker';
+</script>
+
+<div
+  class="cio-embed-root cio-question-type-picker-embed ui:box-border ui:min-h-[320px] ui:min-w-0 ui:w-full ui:max-w-full"
+>
+  <QuestionTypePicker />
+</div>
diff --git a/apps/embeds/svelte.config.js b/apps/embeds/svelte.config.js
new file mode 100644
index 00000000..ecd54bd1
--- /dev/null
+++ b/apps/embeds/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
+const config = {
+  preprocess: vitePreprocess()
+};
+
+export default config;
diff --git a/apps/embeds/tsconfig.json b/apps/embeds/tsconfig.json
new file mode 100644
index 00000000..2a24b9d7
--- /dev/null
+++ b/apps/embeds/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@cio/tsconfig/base.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["svelte"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]
+}
diff --git a/apps/embeds/vite.config.ts b/apps/embeds/vite.config.ts
new file mode 100644
index 00000000..bc71cdb0
--- /dev/null
+++ b/apps/embeds/vite.config.ts
@@ -0,0 +1,50 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import tailwindcss from '@tailwindcss/vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ command }) => ({
+  root: dirname,
+  plugins: [tailwindcss(), svelte(), cssInjectedByJsPlugin()],
+  resolve: {
+    alias: {
+      '@cio/ui': path.resolve(dirname, 'node_modules/@cio/ui/src'),
+      '@cio/ui/*': path.resolve(dirname, 'node_modules/@cio/ui/src/*'),
+      $src: path.resolve(dirname, 'node_modules/@cio/ui/src')
+    },
+    conditions: ['svelte', 'browser', 'import']
+  },
+  optimizeDeps: {
+    include: ['svelte-tiptap'],
+    exclude: ['@tiptap/core', '@tiptap/pm']
+  },
+  build:
+    command === 'build'
+      ? {
+          outDir: 'dist',
+          emptyOutDir: true,
+          cssCodeSplit: false,
+          lib: {
+            entry: path.resolve(dirname, 'src/widgets/question-type-picker/bootstrap.ts'),
+            name: 'CIOEmbeds',
+            formats: ['es'],
+            fileName: () => 'question-type-picker.js'
+          },
+          rollupOptions: {
+            output: {
+              inlineDynamicImports: false,
+              // Hashed names so CDN/browser can cache chunks immutably; bootstrap entry stays `question-type-picker.js`.
+              chunkFileNames: 'question-type-picker-[name]-[hash].js'
+            }
+          }
+        }
+      : {},
+  server: {
+    port: 5180
+  }
+}));
diff --git a/apps/website/src/lib/components/ai-section.svelte b/apps/website/src/lib/components/ai-section.svelte
new file mode 100644
index 00000000..4c98dc63
--- /dev/null
+++ b/apps/website/src/lib/components/ai-section.svelte
@@ -0,0 +1,117 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
+
+  const aiFeatures = [
+    {
+      icon: '⚡',
+      title: 'Create a full course in seconds',
+      description:
+        'Tell your agent what to build. It creates the course, writes the lessons, and adds quizzes. What used to take days now takes seconds.'
+    },
+    {
+      icon: '🔄',
+      title: 'Update content instantly',
+      description:
+        'Policies changed? Tell your agent to update the course. It rewrites the affected lessons and adjusts the quiz questions to match.'
+    },
+    {
+      icon: '📄',
+      title: 'Turn any doc into training',
+      description:
+        'Point your agent at a Notion page, Google Doc, or PDF. It reads the source and builds a structured course with assessments.'
+    }
+  ];
+
+  const agents = [
+    { name: 'Cursor', logo: '/cursor-logo.png' },
+    { name: 'Claude Code', logo: '/claude-logo.svg' },
+    { name: 'Codex', logo: '/codex-logo.png' },
+    { name: 'OpenCode', logo: '/opencode-logo.svg' }
+  ];
+</script>
+
+<section
+  id="ai"
+  class="relative overflow-hidden bg-linear-to-br from-gray-950 to-[#0f1629] px-6 py-16 text-white lg:px-12 lg:py-24"
+>
+  <div
+    class="pointer-events-none absolute -top-[200px] -right-[200px] h-[600px] w-[600px] bg-[radial-gradient(circle,rgba(2,51,189,0.15)_0%,transparent_70%)]"
+  ></div>
+
+  <div class="mx-auto max-w-[1100px]">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+      <div>
+        <BlurFade once>
+          <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-400 uppercase">AI-Powered Content</div>
+          <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight text-white">
+            Let your agent do<br />the course building.
+          </h2>
+          <p class="mb-14 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+            Connect your favorite coding agent to ClassroomIO via MCP. Create, update, and publish entire courses from
+            your terminal in seconds.
+          </p>
+        </BlurFade>
+
+        <div class="flex flex-col gap-6">
+          {#each aiFeatures as feature, i}
+            <BlurFade delay={0.15 * i} once>
+              <div class="flex items-start gap-4 rounded-xl border border-white/[0.08] bg-white/[0.04] p-6">
+                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-700/20 text-2xl">
+                  {feature.icon}
+                </div>
+                <div>
+                  <h4 class="mb-1.5 text-sm font-medium text-white">{feature.title}</h4>
+                  <p class="text-sm leading-relaxed text-gray-500">{feature.description}</p>
+                </div>
+              </div>
+            </BlurFade>
+          {/each}
+        </div>
+      </div>
+
+      <BlurFade delay={0.2} once>
+        <div>
+          <!-- Code Block -->
+          <div class="relative overflow-hidden rounded-2xl border border-gray-800 bg-[#0d0d0d]">
+            <BorderBeam size={200} duration={10} colorFrom="#0233BD" colorTo="#6b8fff" />
+            <div class="flex items-center gap-2 border-b border-gray-800 bg-gray-900 px-5 py-3.5">
+              <div class="h-2.5 w-2.5 rounded-full bg-red-400"></div>
+              <div class="h-2.5 w-2.5 rounded-full bg-yellow-400"></div>
+              <div class="h-2.5 w-2.5 rounded-full bg-green-500"></div>
+              <span class="ml-2 text-xs text-gray-600">mcp.json</span>
+            </div>
+            <div class="p-6 font-mono text-xs leading-loose whitespace-pre text-gray-400 lg:text-sm">
+              {'{'}<br />{'    '}<span class="text-blue-400">"mcpServers"</span>: {'{'}<br />{'        '}<span
+                class="text-blue-400">"classroomio"</span
+              >: {'{'}<br />{'            '}<span class="text-blue-400">"command"</span>:
+              <span class="text-green-400">"npx"</span>,<br />{'            '}<span class="text-blue-400">"args"</span>:
+              [<span class="text-green-400">"-y"</span>, <span class="text-green-400">"@classroomio/mcp"</span>],<br
+              />{'            '}<span class="text-blue-400">"env"</span>: {'{'}<br />{'                '}<span
+                class="text-blue-400">"CLASSROOMIO_API_URL"</span
+              >: <span class="text-green-400">"https://api.classroomio.com"</span>,<br />{'                '}<span
+                class="text-blue-400">"CLASSROOMIO_API_KEY"</span
+              >: <span class="text-green-400">"&lt;your-mcp-key&gt;"</span><br />{'            }'}<br />{'        }'}<br
+              />{'    }'}<br />{'}'}
+            </div>
+          </div>
+
+          <!-- Supported Agents -->
+          <div class="mt-6">
+            <div class="mb-3 text-xs tracking-wider text-gray-600 uppercase">Works with</div>
+            <div class="flex flex-wrap gap-3">
+              {#each agents as agent}
+                <div
+                  class="flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.06] px-3.5 py-2"
+                >
+                  <img src={agent.logo} alt="{agent.name} logo" class="h-5 w-5 rounded-full" />
+                  <span class="text-xs text-gray-300">{agent.name}</span>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      </BlurFade>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/automate-section.svelte b/apps/website/src/lib/components/automate-section.svelte
new file mode 100644
index 00000000..cdd0eb95
--- /dev/null
+++ b/apps/website/src/lib/components/automate-section.svelte
@@ -0,0 +1,57 @@
+<script>
+  const integrations = [
+    {
+      icon: '🔌',
+      title: 'REST API',
+      description:
+        'Full API access to every object in your LMS. Create users, enroll learners, pull completions. All programmatically, at scale.'
+    },
+    {
+      icon: '⚡',
+      title: 'Zapier Integration',
+      comingSoon: true,
+      description:
+        'Connect to 6,000+ apps without writing a line of code. Auto-enroll from your CRM, send Slack alerts on completion, update your spreadsheet.'
+    },
+    {
+      icon: '🪝',
+      title: 'Webhooks',
+      comingSoon: true,
+      description:
+        'Real-time event notifications for every action. Course enrolled, lesson completed, certificate issued. Push to any endpoint instantly.'
+    }
+  ];
+</script>
+
+<section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px]">
+    <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-700 uppercase">Automate the boring parts</div>
+    <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight">
+      Set it up once.<br />Let it run.
+    </h2>
+    <p class="mb-14 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+      Connect ClassroomIO to everything you already use. New hire joins Slack? They're enrolled. Course completed? Your
+      HRIS knows.
+    </p>
+
+    <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
+      {#each integrations as item}
+        <div
+          class="rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-200 hover:border-gray-950 hover:shadow-lg hover:shadow-black/5"
+        >
+          <div class="mb-4 text-3xl">{item.icon}</div>
+          <h3 class="mb-2 text-base font-medium">
+            {item.title}
+            {#if item.comingSoon}
+              <span
+                class="ml-1 rounded-full bg-blue-700 px-1.5 py-0.5 align-middle text-[0.6rem] tracking-wide text-white uppercase"
+                >Soon</span
+              >
+            {/if}
+          </h3>
+          <p class="text-sm leading-relaxed text-gray-500">{item.description}</p>
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/cert-section.svelte b/apps/website/src/lib/components/cert-section.svelte
new file mode 100644
index 00000000..349d3a56
--- /dev/null
+++ b/apps/website/src/lib/components/cert-section.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { Meteors } from '@cio/ui/custom/animation/meteors';
+
+  const steps = [
+    {
+      number: '01',
+      title: 'Invite your team',
+      description:
+        'Add users individually, bulk import via CSV, or connect your HRIS. Assign courses automatically based on role or department.'
+    },
+    {
+      number: '02',
+      title: 'Publish your courses',
+      description:
+        'Build courses with video, text, quizzes, and assignments. Set pass thresholds, enforce order, and control who sees what.'
+    },
+    {
+      number: '03',
+      title: 'Set certification rules',
+      description:
+        'Define expiry dates, renewal requirements, and passing scores. Issue branded certificates automatically on completion.'
+    }
+  ];
+</script>
+
+<section id="features" class="bg-gray-950 px-6 py-16 text-white lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px]">
+    <BlurFade once>
+      <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-400 uppercase">Certifications & Compliance</div>
+      <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight text-white">
+        Go from zero to certified<br />in one afternoon.
+      </h2>
+      <p class="mb-14 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+        Everything you need to run a serious certification program. No duct tape, no spreadsheets, no chasing people
+        down.
+      </p>
+    </BlurFade>
+
+    <div class="grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl border border-gray-800 bg-gray-800 md:grid-cols-3">
+      {#each steps as step, i}
+        <BlurFade delay={0.1 * i} once>
+          <div
+            class="relative overflow-hidden bg-gray-900 p-8 transition-colors duration-200 hover:bg-gray-900/80 lg:p-9"
+          >
+            <Meteors number={6} />
+            <div class="mb-3.5 text-[2.8rem] leading-none font-medium text-blue-700 italic">
+              {step.number}
+            </div>
+            <h3 class="mb-2.5 text-base font-medium text-white">{step.title}</h3>
+            <p class="text-sm leading-relaxed text-gray-500">{step.description}</p>
+          </div>
+        </BlurFade>
+      {/each}
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/deploy-section.svelte b/apps/website/src/lib/components/deploy-section.svelte
new file mode 100644
index 00000000..ffbce78c
--- /dev/null
+++ b/apps/website/src/lib/components/deploy-section.svelte
@@ -0,0 +1,72 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+
+  const deployOptions = [
+    {
+      icon: '🚂',
+      title: 'Railway',
+      description: 'One-click deploy with our Railway template. Live in under 3 minutes.',
+      href: 'https://railway.app'
+    },
+    {
+      icon: '🐳',
+      title: 'Docker Compose',
+      description: 'Standard Docker setup for any Linux server or VPS. Full control.',
+      href: '/github'
+    },
+    {
+      icon: '❄️',
+      title: 'Coolify',
+      description: 'Self-hosted Heroku alternative. Deploy ClassroomIO alongside your stack.',
+      href: 'https://coolify.io'
+    }
+  ];
+</script>
+
+<section id="deploy" class="bg-white px-6 py-16 lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px]">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+      <BlurFade once>
+        <div>
+          <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-700 uppercase">Deploy to your servers</div>
+          <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight">
+            Your data.<br />Your servers.<br />Your call.
+          </h2>
+          <p class="mb-8 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+            No SaaS lock-in. No per-seat pricing surprises. Deploy ClassroomIO wherever you run your infrastructure.
+            Minutes, not days.
+          </p>
+
+          <div class="mt-3 rounded-xl border border-gray-200 bg-gray-50 p-5">
+            <div class="mb-2.5 text-xs font-medium tracking-wider text-gray-500 uppercase">One-line deploy</div>
+            <code class="font-mono text-sm text-gray-950">docker compose up -d</code>
+          </div>
+        </div>
+      </BlurFade>
+
+      <div class="flex flex-col gap-4">
+        {#each deployOptions as option, i}
+          <BlurFade delay={0.1 * i} once>
+            <a
+              href={option.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-5 rounded-xl border-[1.5px] border-gray-200 p-6 text-gray-950 no-underline transition-all duration-200 hover:border-blue-700 hover:bg-blue-50"
+            >
+              <div
+                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-xl"
+              >
+                {option.icon}
+              </div>
+              <div>
+                <h4 class="mb-0.5 text-sm font-medium">{option.title}</h4>
+                <p class="text-sm text-gray-500">{option.description}</p>
+              </div>
+              <span class="ml-auto text-lg text-gray-400">→</span>
+            </a>
+          </BlurFade>
+        {/each}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/enterprise-section.svelte b/apps/website/src/lib/components/enterprise-section.svelte
new file mode 100644
index 00000000..31960a10
--- /dev/null
+++ b/apps/website/src/lib/components/enterprise-section.svelte
@@ -0,0 +1,263 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
+
+  const features = [
+    {
+      icon: '🏢',
+      title: 'Multi-tenancy',
+      description: 'Isolated environments for each department, team, or client organization.'
+    },
+    {
+      icon: '📋',
+      title: 'Audit Logs',
+      description: 'Full visibility into every action, login, and change across your platform.'
+    },
+    {
+      icon: '🔌',
+      title: 'API Access',
+      description: 'Programmatic control over users, courses, enrollments, and completions.'
+    },
+    {
+      icon: '🔐',
+      title: 'RBAC',
+      description: 'Fine-grained roles and permissions for admins, teachers, and learners.'
+    },
+    {
+      icon: '🔑',
+      title: 'SSO / OIDC',
+      description: 'Single sign-on with your identity provider. SAML and OIDC supported.'
+    },
+    {
+      icon: '🛡️',
+      title: 'SLA & Support',
+      description: 'Guaranteed uptime, priority assistance, and a dedicated point of contact.'
+    },
+    {
+      icon: '🎨',
+      title: 'White Labeling',
+      description: 'Fully customize the look and feel so learners only see your brand.'
+    }
+  ];
+
+  const uiComponents = [
+    { label: 'Button', category: 'Atom' },
+    { label: 'Card', category: 'Molecule' },
+    { label: 'Dialog', category: 'Molecule' },
+    { label: 'Input', category: 'Atom' },
+    { label: 'Badge', category: 'Atom' },
+    { label: 'Table', category: 'Molecule' },
+    { label: 'Tabs', category: 'Atom' },
+    { label: 'Select', category: 'Atom' },
+    { label: 'Sidebar', category: 'Molecule' },
+    { label: 'Field', category: 'Molecule' },
+    { label: 'Editor', category: 'Molecule' },
+    { label: 'Accordion', category: 'Atom' }
+  ];
+</script>
+
+<section class="relative overflow-hidden bg-gray-950 px-6 py-16 text-white lg:px-12 lg:py-24">
+  <DotPattern
+    fillColor="rgb(255 255 255 / 0.05)"
+    class="absolute inset-0 h-full w-full [mask-image:radial-gradient(600px_circle_at_center,white,transparent)]"
+  />
+
+  <div class="relative z-10 mx-auto max-w-[1100px]">
+    <BlurFade once>
+      <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-400 uppercase">Enterprise</div>
+      <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight text-white">
+        Enterprise-grade, out of the box.
+      </h2>
+      <p class="mb-6 max-w-[560px] text-base leading-relaxed text-gray-500 lg:text-lg">
+        Everything in the open-source core, plus the control, security, and support that compliance teams need at scale.
+      </p>
+
+      <button
+        data-cal-link="classroomio/enterprise"
+        data-cal-config="'layout':'month_view'"
+        class="mb-14 inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-700 px-6 py-3 text-sm font-medium text-white transition-all duration-200 hover:bg-blue-800"
+      >
+        Talk to us →
+      </button>
+    </BlurFade>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {#each features as feature, i}
+        <BlurFade delay={0.08 * i} once>
+          <div
+            class="rounded-xl border border-white/[0.08] bg-white/[0.04] p-5 transition-all duration-200 hover:bg-white/[0.06]"
+          >
+            <div class="mb-3 text-2xl">{feature.icon}</div>
+            <h3 class="mb-1.5 text-sm font-medium text-white">{feature.title}</h3>
+            <p class="text-xs leading-relaxed text-gray-500">{feature.description}</p>
+          </div>
+        </BlurFade>
+      {/each}
+    </div>
+
+    <!-- Composable UI -->
+    <div class="mt-20">
+      <BlurFade delay={0.1} once>
+        <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+          <div>
+            <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-400 uppercase">Design System</div>
+            <h3 class="mb-4 text-[clamp(1.5rem,2.5vw,2.2rem)] leading-[1.2] font-medium tracking-tight text-white">
+              Composable UI.<br />Build it your way.
+            </h3>
+            <p class="mb-6 max-w-[480px] text-base leading-relaxed text-gray-500 lg:text-lg">
+              A library of 50+ accessible, themeable components built on Svelte 5 and Tailwind. Atoms, molecules, and
+              full templates you can compose into any learning experience.
+            </p>
+
+            <div class="mb-8 flex flex-wrap gap-2">
+              <span
+                class="rounded-full border border-white/[0.1] bg-white/[0.05] px-3 py-1 text-xs font-medium text-gray-300"
+              >
+                shadcn-svelte
+              </span>
+              <span
+                class="rounded-full border border-white/[0.1] bg-white/[0.05] px-3 py-1 text-xs font-medium text-gray-300"
+              >
+                Tailwind v4
+              </span>
+              <span
+                class="rounded-full border border-white/[0.1] bg-white/[0.05] px-3 py-1 text-xs font-medium text-gray-300"
+              >
+                Accessible
+              </span>
+              <span
+                class="rounded-full border border-white/[0.1] bg-white/[0.05] px-3 py-1 text-xs font-medium text-gray-300"
+              >
+                Themeable
+              </span>
+            </div>
+
+            <a
+              href="https://ui.classroomio.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 rounded-lg border border-white/[0.15] bg-white/[0.06] px-5 py-2.5 text-sm font-medium text-white no-underline transition-all duration-200 hover:border-blue-500/40 hover:bg-white/[0.1]"
+            >
+              Explore the design system
+              <span class="text-blue-400">→</span>
+            </a>
+          </div>
+
+          <div class="relative">
+            <div class="relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.03] p-6">
+              <BorderBeam colorFrom="#3b82f6" colorTo="#0233BD" size={200} duration={8} />
+
+              <div class="mb-5 flex items-center gap-2">
+                <div class="h-3 w-3 rounded-full bg-white/[0.15]"></div>
+                <div class="h-3 w-3 rounded-full bg-white/[0.1]"></div>
+                <div class="h-3 w-3 rounded-full bg-white/[0.1]"></div>
+                <span class="ml-2 text-xs text-gray-600">@cio/ui</span>
+              </div>
+
+              <!-- Mini component showcase -->
+              <div class="space-y-4">
+                <!-- Row 1: Buttons -->
+                <div class="flex flex-wrap items-center gap-2">
+                  <div class="rounded-md bg-blue-700 px-3 py-1.5 text-xs font-medium text-white">Primary</div>
+                  <div class="rounded-md border border-white/[0.15] px-3 py-1.5 text-xs font-medium text-gray-300">
+                    Outline
+                  </div>
+                  <div class="rounded-md bg-white/[0.08] px-3 py-1.5 text-xs font-medium text-gray-400">Ghost</div>
+                  <div class="rounded-full bg-blue-500/15 px-2.5 py-0.5 text-[10px] font-medium text-blue-400">
+                    Badge
+                  </div>
+                </div>
+
+                <!-- Row 2: Input + Select mock -->
+                <div class="flex gap-2">
+                  <div
+                    class="flex-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-3 py-2 text-xs text-gray-500"
+                  >
+                    Search courses...
+                  </div>
+                  <div
+                    class="flex items-center gap-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-3 py-2 text-xs text-gray-500"
+                  >
+                    Select
+                    <svg
+                      class="h-3 w-3 text-gray-600"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                    >
+                      <path d="M3 4.5L6 7.5L9 4.5" />
+                    </svg>
+                  </div>
+                </div>
+
+                <!-- Row 3: Card preview -->
+                <div class="rounded-lg border border-white/[0.08] bg-white/[0.03] p-3">
+                  <div class="mb-2 flex items-center gap-2">
+                    <div class="h-6 w-6 rounded-full bg-blue-700/30"></div>
+                    <div>
+                      <div class="text-xs font-medium text-gray-300">Card Component</div>
+                      <div class="text-[10px] text-gray-600">Composable header, body, footer</div>
+                    </div>
+                  </div>
+                  <div class="flex gap-1.5">
+                    <div class="h-1 flex-1 rounded-full bg-blue-700/30"></div>
+                    <div class="h-1 w-8 rounded-full bg-white/[0.06]"></div>
+                  </div>
+                </div>
+
+                <!-- Row 4: Toggle + Switch + Checkbox -->
+                <div class="flex items-center gap-4">
+                  <div class="flex items-center gap-1.5">
+                    <div class="h-4 w-7 rounded-full bg-blue-700 p-0.5">
+                      <div class="h-3 w-3 translate-x-3 rounded-full bg-white"></div>
+                    </div>
+                    <span class="text-[10px] text-gray-500">Switch</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <div class="flex h-4 w-4 items-center justify-center rounded border border-blue-700 bg-blue-700">
+                      <svg class="h-2.5 w-2.5 text-white" viewBox="0 0 12 12" fill="none">
+                        <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" />
+                      </svg>
+                    </div>
+                    <span class="text-[10px] text-gray-500">Checkbox</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <div class="flex h-4 w-4 items-center justify-center rounded-full border border-blue-700">
+                      <div class="h-2 w-2 rounded-full bg-blue-700"></div>
+                    </div>
+                    <span class="text-[10px] text-gray-500">Radio</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Component tags floating below -->
+            <div class="mt-4 flex flex-wrap items-center gap-1.5">
+              {#each uiComponents as comp, i}
+                <BlurFade delay={0.04 * i} once>
+                  <span
+                    class="rounded-md border px-2 py-0.5 text-[10px] font-medium transition-colors duration-200 {comp.category ===
+                    'Atom'
+                      ? 'border-blue-500/20 bg-blue-500/10 text-blue-400'
+                      : 'border-purple-500/20 bg-purple-500/10 text-purple-400'}"
+                  >
+                    {comp.label}
+                  </span>
+                </BlurFade>
+              {/each}
+              <BlurFade delay={0.04 * uiComponents.length} once>
+                <span
+                  class="rounded-md border border-white/[0.08] bg-white/[0.04] px-2 py-0.5 text-[10px] font-medium text-gray-500"
+                >
+                  +48 more
+                </span>
+              </BlurFade>
+            </div>
+          </div>
+        </div>
+      </BlurFade>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/features-section.svelte b/apps/website/src/lib/components/features-section.svelte
new file mode 100644
index 00000000..ff2d3aa3
--- /dev/null
+++ b/apps/website/src/lib/components/features-section.svelte
@@ -0,0 +1,71 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+
+  const features = [
+    {
+      icon: '🎨',
+      title: 'Full Theming',
+      description:
+        "Match your brand exactly. Custom colors, fonts, logos, and layouts. Your learners will never know it's ClassroomIO under the hood.",
+      tags: ['Custom colors', 'Logo upload', 'Font control']
+    },
+    {
+      icon: '🌐',
+      title: 'Custom Domain',
+      description:
+        'Serve your LMS from learn.yourcompany.com. Full SSL, zero ClassroomIO branding. Just your platform, your way.',
+      tags: ['SSL included', 'White label', 'DNS setup guide']
+    },
+    {
+      icon: '⚙️',
+      title: 'Deep LMS Customization',
+      description:
+        'Modern codebase means any developer can go in and change anything. No Moodle plugin archaeology. No undocumented hacks.',
+      tags: ['Modern stack', 'Clean codebase', 'Extensible']
+    },
+    {
+      icon: '📊',
+      title: 'Manager Dashboards',
+      description:
+        'See exactly where your team stands. Completion rates, overdue courses, certificate expiry dates, all in one view and exportable to CSV.',
+      tags: ['Team views', 'CSV export', 'Audit logs']
+    }
+  ];
+</script>
+
+<section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px]">
+    <BlurFade once>
+      <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-700 uppercase">Make it yours</div>
+      <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight">
+        Your brand.<br />Your domain. Your rules.
+      </h2>
+      <p class="mb-14 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+        ClassroomIO bends to fit your organization, not the other way around.
+      </p>
+    </BlurFade>
+
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      {#each features as feature, i}
+        <BlurFade delay={0.1 * i} once>
+          <div class="rounded-2xl border border-gray-200 bg-white p-8 lg:p-9">
+            <div class="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-2xl">
+              {feature.icon}
+            </div>
+            <h3 class="mb-2.5 text-xl font-medium tracking-tight">{feature.title}</h3>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500">{feature.description}</p>
+            <div class="flex flex-wrap gap-2">
+              {#each feature.tags as tag}
+                <span
+                  class="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-500"
+                >
+                  {tag}
+                </span>
+              {/each}
+            </div>
+          </div>
+        </BlurFade>
+      {/each}
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/footer-cta.svelte b/apps/website/src/lib/components/footer-cta.svelte
new file mode 100644
index 00000000..58f822eb
--- /dev/null
+++ b/apps/website/src/lib/components/footer-cta.svelte
@@ -0,0 +1,24 @@
+<section class="bg-gray-50 px-6 py-16 text-center lg:px-12 lg:py-24">
+  <h2 class="mb-4 text-[clamp(2rem,3.5vw,3rem)] font-bold tracking-tight">
+    Ready to replace Moodle<br />with something you'll <em class="text-blue-700 italic">actually enjoy?</em>
+  </h2>
+  <p class="mx-auto mb-9 max-w-[480px] text-base text-gray-500 lg:text-lg">
+    Get up and running in an afternoon. No vendor calls, no implementation fees, no surprises.
+  </p>
+  <div class="mb-9 flex flex-wrap justify-center gap-3.5">
+    <a
+      href="/signup"
+      class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-7 py-3.5 text-sm font-semibold text-white no-underline transition-all duration-200 hover:-translate-y-0.5 hover:bg-blue-700 lg:text-base"
+    >
+      Get Started Free →
+    </a>
+    <button
+      data-cal-link="classroomio/demo"
+      data-cal-config="'layout':'month_view'"
+      class="cursor-pointer rounded-lg border-[1.5px] border-gray-200 bg-transparent px-7 py-3.5 text-sm font-medium text-gray-950 transition-all duration-200 hover:border-gray-950 lg:text-base"
+    >
+      Book a Demo
+    </button>
+  </div>
+  <div class="text-sm text-gray-500">Open source · Self-hosted · No credit card required</div>
+</section>
diff --git a/apps/website/src/lib/components/footer.svelte b/apps/website/src/lib/components/footer.svelte
index 989e9f06..825e3ea6 100644
--- a/apps/website/src/lib/components/footer.svelte
+++ b/apps/website/src/lib/components/footer.svelte
@@ -11,7 +11,7 @@
       <p class="mr-2 mb-5 text-sm leading-7 tracking-wide text-gray-600 lg:text-base lg:leading-7">
         The Open Source Learning Management System for Companies
         <br />
-        ClassroomIO is the easiest way to grow your teaching business.
+        Nail your compliance training and your certification program.
       </p>
       <!-- <a
         href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
@@ -50,19 +50,16 @@
         <p class="mb-3 text-base leading-6 font-semibold text-gray-900 lg:mb-10 lg:text-base">Product</p>
         <ul class="space-y-2 lg:space-y-4">
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="/#coursemanagement"> Course Management </a>
+            <a href="/#features"> Certifications </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="/#customization"> Customizations </a>
+            <a href="/#ai"> AI Content </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="/#collaboration"> Forum </a>
+            <a href="/#deploy"> Deploy </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="/#ai"> AI Lesson Planner </a>
-          </li>
-          <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="/#student-dashboard"> Student Dashboard </a>
+            <a href="/#testimonial"> Testimonials </a>
           </li>
         </ul>
       </div>
@@ -113,17 +110,13 @@
             <a href="mailto:help@classroomio.com" target="_blank"> Support </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594" target="_blank">
-              Privacy policy
-            </a>
+            <a href="/privacy"> Privacy policy </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
             <a target="_blank" href="https://classroomio.com/docs/quickstart/signup"> Getting Started </a>
           </li>
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
-            <a href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594" target="_blank">
-              Terms of use
-            </a>
+            <a href="/tos"> Terms of use </a>
           </li>
         </ul>
       </div>
diff --git a/apps/website/src/lib/components/hero.svelte b/apps/website/src/lib/components/hero.svelte
index c813d3e7..241c90c7 100644
--- a/apps/website/src/lib/components/hero.svelte
+++ b/apps/website/src/lib/components/hero.svelte
@@ -1,220 +1,137 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { fly } from 'svelte/transition';
-  import { sineInOut } from 'svelte/easing';
-  import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
-  import { Button } from '@cio/ui/base/button';
-
-  const names = [
-    { label: 'Audience', color: '#3ADFEC' },
-    { label: 'Employees', color: '#BF0696' },
-    { label: 'Customers', color: '#0233BD' },
-    { label: 'Students', color: '#9747FF' }
-  ];
-  let animate = $state(false);
-  let titleIndex = $state(0);
-  let timeout: NodeJS.Timeout;
-
-  onMount(() => {
-    setTimeout(() => {
-      animate = true;
-    }, 70);
-
-    timeout = setInterval(() => {
-      const nextIndex = titleIndex + 1;
-      titleIndex = names[nextIndex] ? nextIndex : 0;
-    }, 3000);
-  });
-
-  onDestroy(() => {
-    clearTimeout(timeout);
-  });
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
+  import { Badge } from '@cio/ui/base/badge';
 </script>
 
-<div class="hero-bg relative h-full w-full border-b-2 bg-[#F5F8FE] pt-18 text-center">
-  <div class="w-full pt-24">
-    <div class="mb-10 ml-[5%] flex w-full items-center justify-start lg:ml-0 lg:justify-center">
-      <a
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        href="/github"
-        style="color: rgb(75, 85, 99);"
-        class="rounded-full border-2 border-[#C2D2FF] bg-[#DCE5FF] px-4 py-1 text-sm font-medium text-[#4B5563] hover:underline"
-        >We are <span class="ui:text-primary">100%</span> open source</a
-      >
-    </div>
+<section class="px-6 pt-32 pb-16 lg:px-12 lg:pt-40 lg:pb-24">
+  <div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+    <div>
+      <BlurFade delay={0} once>
+        <a href="/blog/learn-from-the-best" class="mb-7 inline-block">
+          <Badge variant="secondary" class="gap-2! px-3.5! py-1.5! text-xs! underline!">
+            <span class="relative flex h-2 w-2">
+              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+              <span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
+            </span>
+            Introducing ClassroomIO Version 2 →
+          </Badge>
+        </a>
+      </BlurFade>
 
-    <div class="absolute top-[10%] left-[5%] hidden w-[90%] justify-between lg:flex">
-      {#if animate}
-        <div
-          class="relative rotate-12 transition-all hover:scale-110"
-          transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
-        >
+      <BlurFade delay={0.1} once>
+        <h1 class="mb-6 text-[clamp(2.4rem,4vw,3.4rem)] leading-[1.12] font-medium tracking-tight text-gray-950">
+          Nail your compliance training and your
+          <em class="text-blue-700 not-italic">certification program.</em>
+        </h1>
+      </BlurFade>
+
+      <BlurFade delay={0.2} once>
+        <p class="mb-9 max-w-[480px] text-base leading-relaxed text-gray-500 lg:text-lg">
+          ClassroomIO is the open source LMS built for compliance-driven teams. Run your certification programs, track
+          completions, and prove training happened. No Moodle headaches.
+        </p>
+      </BlurFade>
+
+      <BlurFade delay={0.3} once>
+        <div class="flex flex-wrap items-center gap-3.5">
           <a
-            href="/#collaboration"
-            class="rounded-[4px] border-[1.5px] border-[#3ADFEC] bg-white px-6 py-2 text-lg font-bold text-[#3ADFEC]"
-            >Collaboration</a
+            href="/signup"
+            class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-7 py-3.5 text-sm font-medium text-white no-underline transition-all duration-200 hover:-translate-y-0.5 hover:bg-blue-700 lg:text-base"
           >
-          <svg
-            class="absolute -right-1 -bottom-2.5"
-            width="11"
-            height="11"
-            viewBox="0 0 11 11"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
+            Get Started Free →
+          </a>
+          <button
+            data-cal-link="classroomio/demo"
+            data-cal-config="'layout':'month_view'"
+            class="cursor-pointer rounded-lg border-[1.5px] border-gray-200 bg-transparent px-7 py-3.5 text-sm font-medium text-gray-950 transition-all duration-200 hover:border-gray-950 lg:text-base"
           >
-            <rect width="10.9223" height="10.9223" fill="#3ADFEC" />
-          </svg>
+            Book a Demo
+          </button>
         </div>
+      </BlurFade>
 
-        <div
-          class="relative -rotate-12 transition-all hover:scale-110"
-          transition:fly={{ x: 100, delay: 50, easing: sineInOut }}
-        >
-          <a
-            href="/github"
-            target="_blank"
-            class="rounded-[4px] border-[1.5px] border-[#BF0696] bg-white px-6 py-2 text-lg font-bold text-[#BF0696]"
-            >Open Source</a
-          >
-          <svg
-            class="absolute -right-1 -bottom-2.5"
-            width="11"
-            height="11"
-            viewBox="0 0 11 11"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="10.9223" height="10.9223" fill="#BF0696" />
-          </svg>
-        </div>
-      {/if}
-    </div>
-
-    <div class="w-full">
-      <div class="ml-6 text-left text-2xl font-semibold text-slate-900 lg:text-center lg:text-6xl">
-        <span>Educate Your</span>
-        <div class="mb-2 flex flex-wrap items-center justify-center lg:gap-3">
-          <span
-            class="relative mt-1 mb-0 inline-block h-[40px] w-full overflow-hidden md:mt-0 md:h-[50px] lg:-mb-4 lg:h-[75px] lg:w-[48%] lg:text-center"
-          >
-            {#key titleIndex}
-              <span
-                class="absolute right-[unset] left-0 w-full lg:right-0 lg:left-[unset]"
-                style="color: {names[titleIndex].color}"
-                transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
-              >
-                <span class="m-auto w-full text-center">
-                  {names[titleIndex].label}
-                </span>
-              </span>
-            {/key}
+      <BlurFade delay={0.4} once>
+        <div class="mt-7 flex flex-wrap items-center gap-5 text-xs text-gray-500">
+          <span class="flex items-center gap-1.5">
+            <span class="font-medium text-blue-700">✓</span> Open source
+          </span>
+          <span class="flex items-center gap-1.5">
+            <span class="font-medium text-blue-700">✓</span> Self-hosted
+          </span>
+          <span class="flex items-center gap-1.5">
+            <span class="font-medium text-blue-700">✓</span> No per-seat fees
           </span>
         </div>
-        <span>from one Platform</span>
-      </div>
-
-      <p class="ui:text-muted-foreground mx-auto mt-10 px-4 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
-        ClassroomIO is an open source learning management system for companies. We give you a suite of tools to help you
-        achieve your training, onboarding and certification goals.
-      </p>
+      </BlurFade>
     </div>
 
-    <div class="absolute top-[30%] left-[5%] hidden w-[90%] justify-between lg:flex">
-      {#if animate}
-        <div
-          class="relative -rotate-12 transition-all hover:scale-110"
-          transition:fly={{ x: -100, delay: 100, easing: sineInOut }}
-        >
-          <a
-            href="/#customization"
-            class="rounded-[4px] border-[1.5px] border-[#0233BD] bg-white px-6 py-2 text-lg font-bold text-[#0233BD]"
-          >
-            Customizable LMS
-          </a>
-
-          <svg
-            class="absolute -right-1 -bottom-2.5"
-            width="11"
-            height="11"
-            viewBox="0 0 11 11"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="10.9223" height="10.9223" fill="#0233BD" />
-          </svg>
+    <!-- Hero Visual -->
+    <BlurFade delay={0.2} once>
+      <div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 shadow-2xl/5">
+        <BorderBeam size={250} duration={12} colorFrom="#0233BD" colorTo="#6b8fff" delay={1} />
+        <div class="flex items-center gap-2 border-b border-gray-200 bg-white px-4 py-3.5">
+          <div class="h-2.5 w-2.5 rounded-full bg-red-400"></div>
+          <div class="h-2.5 w-2.5 rounded-full bg-yellow-400"></div>
+          <div class="h-2.5 w-2.5 rounded-full bg-green-500"></div>
         </div>
-        <div
-          class="relative rotate-12 transition-all hover:scale-110"
-          transition:fly={{ y: 100, delay: 150, easing: sineInOut }}
-        >
-          <a
-            href="/#ai"
-            class="rounded-[4px] border-[1.5px] border-[#9747FF] bg-white px-6 py-2 text-lg font-bold text-[#9747FF]"
-            >AI Support</a
-          >
+        <div class="p-6">
+          <div class="mb-3.5 text-xs font-medium tracking-wider text-gray-500 uppercase">Team Progress - This Week</div>
 
-          <svg
-            class="absolute -right-1 -bottom-2.5"
-            width="11"
-            height="11"
-            viewBox="0 0 11 11"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="10.9223" height="10.9223" fill="#9747FF" />
-          </svg>
-        </div>
-      {/if}
-    </div>
+          <div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-lg">📋</div>
+            <div class="min-w-0 flex-1">
+              <div class="mb-1 text-sm font-medium">Annual Compliance Training</div>
+              <div class="h-1 overflow-hidden rounded-full bg-gray-200">
+                <div class="h-full rounded-full bg-blue-700" style="width: 85%"></div>
+              </div>
+            </div>
+            <div
+              class="shrink-0 rounded-full bg-blue-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-blue-700"
+            >
+              85%
+            </div>
+          </div>
 
-    <div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
-      <Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">Book a demo</Button>
-      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
-      <!-- <a
-      class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
-      href="/github"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      View on Github
-    </a> -->
-    </div>
+          <div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-green-50 text-lg">🛡️</div>
+            <div class="min-w-0 flex-1">
+              <div class="mb-1 text-sm font-medium">Security & Compliance</div>
+              <div class="h-1 overflow-hidden rounded-full bg-gray-200">
+                <div class="h-full rounded-full bg-green-500" style="width: 100%"></div>
+              </div>
+            </div>
+            <div
+              class="shrink-0 rounded-full bg-green-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-green-600"
+            >
+              ✓ Done
+            </div>
+          </div>
 
-    <!-- <div class="relative my-5 md:my-10">
-      <img
-        width="710"
-        height="710"
-        src="./cio-hero.webp"
-        alt="hero section with dark vs light mode"
-        class=""
-      />
-      
-    </div> -->
-    <div style="position: relative; padding-bottom: calc(50% + 42px);" class="mx-auto w-[85%] lg:w-[70%]">
-      <iframe
-        title="ClassroomIO Live Demo"
-        src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
-        allow="clipboard-write"
-        frameborder="0"
-        webkitallowfullscreen="true"
-        mozallowfullscreen="true"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-      ></iframe>
-    </div>
+          <div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-orange-50 text-lg">🎯</div>
+            <div class="min-w-0 flex-1">
+              <div class="mb-1 text-sm font-medium">Product Certification</div>
+              <div class="h-1 overflow-hidden rounded-full bg-gray-200">
+                <div class="h-full rounded-full bg-blue-700" style="width: 42%"></div>
+              </div>
+            </div>
+            <div
+              class="shrink-0 rounded-full bg-blue-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-blue-700"
+            >
+              42%
+            </div>
+          </div>
 
-    {#if PUBLIC_ENABLE_USERS_COMPANIES}
-      <div class="mb-[10%] px-[15%]">
-        <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
-        <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
-          <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
-          <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
-          <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
-          <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
-          <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <div class="mt-4 flex items-center gap-3 rounded-lg bg-blue-50 p-4">
+            <span class="text-xl">🏆</span>
+            <div>
+              <div class="text-sm font-medium">3 certificates issued today</div>
+              <div class="text-xs text-gray-500">Sarah, Marcus & Priya completed their certs</div>
+            </div>
+          </div>
         </div>
       </div>
-    {/if}
+    </BlurFade>
   </div>
-</div>
+</section>
diff --git a/apps/website/src/lib/components/index.ts b/apps/website/src/lib/components/index.ts
index 1b85adb6..52002950 100644
--- a/apps/website/src/lib/components/index.ts
+++ b/apps/website/src/lib/components/index.ts
@@ -1,17 +1,26 @@
 // UI Components - Named exports for easy importing
+export { default as AiSection } from './ai-section.svelte';
+export { default as AutomateSection } from './automate-section.svelte';
 export { default as BlogListItem } from './blog-list-item.svelte';
+export { default as CertSection } from './cert-section.svelte';
 export { default as CoreFeatureSection } from './core-feature-section.svelte';
 export { default as CoreFeatures } from './core-features.svelte';
 export { default as CustomImg } from './custom-img.svelte';
+export { default as DeploySection } from './deploy-section.svelte';
+export { default as EnterpriseSection } from './enterprise-section.svelte';
 export { default as Faq } from './faq.svelte';
+export { default as FeaturesSection } from './features-section.svelte';
 export { default as Footer } from './footer.svelte';
+export { default as FooterCta } from './footer-cta.svelte';
 export { default as Hero } from './hero.svelte';
+export { default as LearnerSection } from './learner-section.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MoreFeatures } from './more-features.svelte';
 export { default as Navigation } from './navigation.svelte';
 export { default as NotFound } from './not-found.svelte';
 export { default as PageHeader } from './page-header.svelte';
 export { default as PageSignupCTA } from './page-signup-cta.svelte';
+export { default as QuestionTypes } from './question-types.svelte';
 export { default as SenjaEmbed } from './senja-embed.svelte';
 export { default as StudentDashboard } from './student-dashboard.svelte';
 export { default as Success } from './success.svelte';
diff --git a/apps/website/src/lib/components/learner-section.svelte b/apps/website/src/lib/components/learner-section.svelte
new file mode 100644
index 00000000..724cd382
--- /dev/null
+++ b/apps/website/src/lib/components/learner-section.svelte
@@ -0,0 +1,127 @@
+<script>
+  import { BlurFade } from '@cio/ui/custom/animation/blurfade';
+  import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
+
+  const learnerModes = [
+    {
+      icon: '📖',
+      title: 'Read it',
+      description: 'Standard lesson view for learners who prefer reading at their own pace.'
+    },
+    {
+      icon: '🎧',
+      title: 'Listen to it',
+      description:
+        'One click and AI reads the lesson aloud. Perfect for commuters, multitaskers, and auditory learners.',
+      comingSoon: true
+    },
+    {
+      icon: '⚡',
+      title: 'Get the summary',
+      description:
+        'AI condenses any lesson into 5 key bullet points. Great for reviewing before an assessment or when time is short.'
+    }
+  ];
+
+  const summaryItems = [
+    'Data privacy governs how personal information is collected, stored, and shared',
+    'Consent must be obtained before collecting any personal data',
+    'GDPR and CCPA set the global standard for data handling obligations',
+    'Breaches must be reported within 72 hours under most regulations',
+    'Employees are the most common cause of accidental data exposure'
+  ];
+</script>
+
+<section class="bg-white px-6 py-16 lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px]">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+      <div>
+        <BlurFade once>
+          <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-700 uppercase">
+            Built for learners, not just admins
+          </div>
+          <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight">
+            Every student learns differently.<br />We support <em class="text-blue-700 italic">all of them.</em>
+          </h2>
+          <p class="mb-10 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+            Most LMS platforms are built for the person running them. We built ClassroomIO for the person going through
+            them. Because a certification program only works if people actually retain what they learned.
+          </p>
+        </BlurFade>
+
+        <div class="flex flex-col gap-4">
+          {#each learnerModes as mode, i}
+            <BlurFade delay={0.1 * i} once>
+              <div class="flex items-start gap-3.5">
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-lg">
+                  {mode.icon}
+                </div>
+                <div>
+                  <h4 class="mb-1 text-sm font-medium">
+                    {mode.title}
+                    {#if mode.comingSoon}
+                      <span
+                        class="ml-1 rounded-full bg-blue-700 px-1.5 py-0.5 align-middle text-[0.6rem] tracking-wide text-white uppercase"
+                        >Soon</span
+                      >
+                    {/if}
+                  </h4>
+                  <p class="text-sm leading-relaxed text-gray-500">{mode.description}</p>
+                </div>
+              </div>
+            </BlurFade>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Lesson Mock UI -->
+      <BlurFade delay={0.2} once>
+        <div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 shadow-2xl/5">
+          <BorderBeam size={200} duration={14} colorFrom="#0233BD" colorTo="#93c5fd" />
+          <div class="flex items-center justify-between border-b border-gray-200 bg-white px-5 py-4">
+            <div class="text-sm font-medium">Data Privacy & Compliance</div>
+            <div class="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-xs text-gray-500">
+              Lesson 3 of 8
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="mb-5 text-sm leading-relaxed text-gray-500">
+              Data privacy refers to the proper handling, processing, and storage of personal information. Organizations
+              must ensure that customer data is collected with consent, stored securely, and never shared without
+              authorization...
+            </div>
+
+            <div class="mb-5 flex flex-wrap gap-2.5">
+              <button
+                class="flex items-center gap-1.5 rounded-lg border-none bg-gray-950 px-4 py-2 text-xs font-medium text-white"
+              >
+                🎧 Listen
+                <span
+                  class="ml-1 rounded-full bg-blue-700 px-1.5 py-0.5 text-[0.6rem] tracking-wide text-white uppercase"
+                  >Soon</span
+                >
+              </button>
+              <button
+                class="flex items-center gap-1.5 rounded-lg border-[1.5px] border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-950"
+              >
+                ⚡ Summarize
+              </button>
+            </div>
+
+            <div class="rounded-xl border border-gray-200 bg-white p-4">
+              <div class="mb-3 text-xs font-medium tracking-wider text-blue-700 uppercase">AI Summary</div>
+              <div class="flex flex-col gap-2.5">
+                {#each summaryItems as item}
+                  <div class="flex gap-2.5 text-xs leading-relaxed">
+                    <span class="shrink-0 font-medium text-blue-700">•</span>
+                    <span>{item}</span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        </div>
+      </BlurFade>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/lib/components/page-header.svelte b/apps/website/src/lib/components/page-header.svelte
index cc4fa16f..f3368273 100644
--- a/apps/website/src/lib/components/page-header.svelte
+++ b/apps/website/src/lib/components/page-header.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
+
   /**
    * @typedef {Object} Props
    * @property {string} [className]
@@ -9,6 +11,9 @@
   let { className = '', children } = $props();
 </script>
 
-<header class="hero-bg w-full border-b border-slate-100 pt-32 pb-16 lg:min-h-[20rem] {className}">
-  {@render children?.()}
+<header class="relative w-full overflow-hidden border-b border-slate-100 pt-32 pb-16 lg:min-h-[20rem]">
+  <DotPattern fillColor="rgb(2 51 189 / 0.25)" class="absolute inset-0 h-full w-full" />
+  <div class="relative z-10 {className}">
+    {@render children?.()}
+  </div>
 </header>
diff --git a/apps/website/src/lib/components/question-types.svelte b/apps/website/src/lib/components/question-types.svelte
new file mode 100644
index 00000000..f42c5906
--- /dev/null
+++ b/apps/website/src/lib/components/question-types.svelte
@@ -0,0 +1,23 @@
+<section class="bg-gray-50 py-16 lg:py-24">
+  <div class="mx-auto mb-10 max-w-[1100px] px-6 text-center lg:mb-14 lg:px-12">
+    <div class="mb-3.5 text-xs font-medium tracking-widest text-blue-700 uppercase">Assessments & Exams</div>
+    <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-medium tracking-tight">
+      Exams that go beyond multiple choice.
+    </h2>
+    <p class="mx-auto max-w-[560px] text-base leading-relaxed text-gray-500 lg:text-lg">
+      Most LMS platforms give you multiple choice and call it a day. ClassroomIO supports the full range so your exams
+      actually test what matters.
+    </p>
+  </div>
+
+  <div class="flex justify-center lg:px-12">
+    <div data-cio-widget="question-type-picker" class="w-full max-w-[900px]"></div>
+  </div>
+</section>
+
+<svelte:head>
+  <script
+    type="module"
+    src="https://assets.cdn.clsrio.com/embeds/question-type-picker/question-type-picker.js"
+  ></script>
+</svelte:head>
diff --git a/apps/website/src/lib/components/testimonial.svelte b/apps/website/src/lib/components/testimonial.svelte
index 8761a09f..da488592 100644
--- a/apps/website/src/lib/components/testimonial.svelte
+++ b/apps/website/src/lib/components/testimonial.svelte
@@ -1,19 +1,19 @@
 <script>
   import { SenjaEmbed } from '$lib/components';
-  import { Button } from '@cio/ui/base/button';
 </script>
 
-<section id="testimonial" class="flex flex-col items-center space-y-2 px-3 py-[5%] lg:px-0">
-  <h1 class="mx-auto my-0 flex flex-col items-center gap-4 text-3xl leading-normal font-normal md:text-4xl lg:text-5xl">
-    Hear from Happy ClassroomIO Users
-  </h1>
+<section id="testimonial" class="bg-white px-6 py-16 lg:px-12 lg:py-24">
+  <div class="mx-auto max-w-[1100px] text-center">
+    <div class="mb-3.5 text-xs font-bold tracking-widest text-blue-700 uppercase">Testimonials</div>
+    <h2 class="mb-4 text-[clamp(2rem,3vw,2.8rem)] leading-[1.15] font-bold tracking-tight">
+      Hear from happy ClassroomIO users
+    </h2>
+    <p class="mx-auto mb-10 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
+      See what excites them about building and managing training programs with ClassroomIO.
+    </p>
 
-  <p class="ui:text-muted-foreground mx-auto px-4 text-center text-base leading-6 tracking-wide lg:w-2/4 lg:p-0">
-    See what excites them about building and managing bootcamps with ClassroomIO.
-  </p>
-  <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
-
-  <div class="relative my-5 w-[85%] md:my-10 lg:w-[70%]">
-    <SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
+    <div class="relative mx-auto w-full">
+      <SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
+    </div>
   </div>
 </section>
diff --git a/apps/website/src/lib/components/tools-header.svelte b/apps/website/src/lib/components/tools-header.svelte
index abbbfc68..3d977f07 100644
--- a/apps/website/src/lib/components/tools-header.svelte
+++ b/apps/website/src/lib/components/tools-header.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
+
   /**
    * @typedef {Object} Props
    * @property {string} [className]
@@ -9,6 +11,9 @@
   let { className = '', children } = $props();
 </script>
 
-<header class="tools-hero-bg py-24 text-center {className} border-b border-slate-100 bg-white">
-  {@render children?.()}
+<header class="relative py-24 text-center {className} overflow-hidden border-b border-slate-100 bg-white">
+  <DotPattern fillColor="rgb(2 51 189 / 0.25)" class="absolute inset-0 h-full w-full" />
+  <div class="relative z-10">
+    {@render children?.()}
+  </div>
 </header>
diff --git a/apps/website/src/routes/(marketing)/employee-training/+page.svelte b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
index 080ba05e..5e6db39d 100644
--- a/apps/website/src/routes/(marketing)/employee-training/+page.svelte
+++ b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
@@ -6,23 +6,23 @@
   const benefitDetails = [
     {
       icon: 'light-bulb.svg',
-      title: 'Increased Engagement',
-      description: 'Interactive courses and collaborative features keep employees motivated.'
+      title: 'Grow from within',
+      description: 'Employees who learn new skills stay longer, perform better, and take on bigger challenges.'
     },
     {
       icon: 'learning.svg',
-      title: 'Streamlined Learning',
-      description: 'Centralized platform for all training materials and progress tracking.'
+      title: 'Training that sticks',
+      description: 'Structured courses with quizzes and certifications so your team actually retains what they learn.'
     },
     {
       icon: 'pie-chart.svg',
-      title: 'Data-Driven Insights',
-      description: 'Gain valuable insights into employee performance and learning patterns.'
+      title: 'See the ROI',
+      description: 'Track completion rates, skill gaps, and progress across every department in real time.'
     },
     {
       icon: 'paint-brush.svg',
-      title: 'Customizable Experience',
-      description: "Tailor the learning experience to your company's specific needs and branding."
+      title: 'Make it yours',
+      description: 'Your logo, your colors, your domain. Employees see your brand, not ours.'
     }
   ];
 
@@ -30,21 +30,22 @@
     {
       icon: 'team-mgnt.svg',
       img: 'team-mgnt2.svg',
-      title: 'Team management',
-      description: 'You can invite managers and employees to create and take trainings at scale in your organization.'
+      title: 'Enroll entire teams in minutes',
+      description:
+        'Invite managers and employees by department or role. Assign the right training to the right people without the back and forth.'
     },
     {
       icon: 'colour-pallete.svg',
       img: 'custom.svg',
-      title: 'Custom branding',
+      title: 'A learning platform that feels like yours',
       description:
-        'With our customizable platform, you can set your company logo, brand color and add a custom domain to your employee LMS.'
+        'Set your company logo, brand colors, and custom domain. Your employees get a seamless experience that looks and feels internal.'
     },
     {
       icon: 'cup.svg',
       img: 'progress.svg',
-      title: 'Track employee progress',
-      description: 'You can track the progress of your employees and assist whoever needs help.'
+      title: 'Know exactly where your team stands',
+      description: 'See who completed what, who needs a nudge, and where the skill gaps are. All in one dashboard.'
     }
   ];
 </script>
@@ -57,19 +58,20 @@
   <PageHeader
     className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
   >
-    <Badge class="px-4! py-2!" variant="outline">Unlock your team's potential</Badge>
+    <Badge class="px-4! py-2!" variant="outline">Invest in your people</Badge>
 
     <div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
       <div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
         <h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
-          Employee training software for
-          <br /><span class="relative text-blue-700">modern teams</span>
+          Your best investment is
+          <br /><span class="relative text-blue-700">your employees</span>
         </h1>
         <p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
-          With ClassroomIO, you can keep your teams in sync with company standards as they change quickly.
+          Companies that invest in employee growth outperform the ones that don't. Give your team the tools to learn,
+          grow, and lead.
         </p>
       </div>
-      <Button href="/signup" target="_blank">Get Started for Free 🚀</Button>
+      <Button href="/signup" target="_blank">Start investing in your team</Button>
     </div>
   </PageHeader>
 
@@ -77,12 +79,12 @@
     class="flex w-full max-w-7xl flex-col justify-center gap-x-6 gap-y-8 px-8 py-16 md:px-16 lg:flex-row lg:items-center lg:justify-between lg:px-28 lg:py-24"
   >
     <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
-      <Badge variant="outline">Amazing benefits</Badge>
+      <Badge variant="outline">Why it matters</Badge>
 
       <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
-        <h1 class="text-3xl">Unlock your team's potential</h1>
+        <h1 class="text-3xl">Great teams are built, not hired</h1>
         <p class="text-lg leading-8 text-gray-500">
-          Modern teams require solutions that are easy to use and allows them move quickly.
+          The companies people want to work for are the ones that help them grow. Training is how you get there.
         </p>
       </div>
     </div>
@@ -96,7 +98,7 @@
           <img
             class="h-[48px] w-[48px]"
             src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
-            alt="light-bulb"
+            alt={benefits.title}
           />
 
           <div class="align-start flex w-full flex-col justify-start gap-y-2">
@@ -114,15 +116,14 @@
     class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
   >
     <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
-      <Badge class="px-4! py-2!" variant="outline">Explore our features</Badge>
+      <Badge class="px-4! py-2!" variant="outline">How it works</Badge>
 
       <div
         class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
-        <h1 class="text-3xl">What makes us the right choice</h1>
+        <h1 class="text-3xl">Everything you need to grow your team</h1>
         <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
-          Discover why we’re the perfect partner for your employee training needs. Experience innovative solutions
-          designed to reduce stress and enhance productivity.
+          From onboarding to upskilling, ClassroomIO gives you the tools to build a culture of continuous learning.
         </p>
       </div>
     </div>
@@ -138,7 +139,7 @@
             <img
               class="h-[48px] w-[48px]"
               src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
-              alt="team icon"
+              alt={feature.title}
             />
             <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
               <h1 class="text-2xl">{feature.title}</h1>
@@ -155,7 +156,7 @@
             <img
               class="w-full lg:max-w-[380px]"
               src="https://assets.cdn.clsrio.com/www/employee-training/{feature.img}"
-              alt="team management feature ui"
+              alt={feature.title}
             />
           </div>
         </div>
@@ -171,9 +172,10 @@
     >
       <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[40%]">
         <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
-          <h1 class="text-2xl text-white">Did you know you can request for custom features?</h1>
+          <h1 class="text-2xl text-white">Need something specific for your team?</h1>
           <p class="text-base leading-8 text-[#DEDEDE]">
-            Companies get the opportunity to request custom features from us.
+            We work with companies to build custom training solutions. Tell us what your team needs and we'll make it
+            happen.
           </p>
         </div>
         <Button href="/demo" target="_blank" variant="outline">Talk to sales</Button>
@@ -188,9 +190,9 @@
   </section>
 
   <PageSignupCTA
-    header="Give your team the training they deserve"
-    subText="It's free to sign up and start getting value out of the product."
-    btnLabel="Sign me up"
+    header="The best time to invest in your team is now"
+    subText="Start for free. No credit card required."
+    btnLabel="Get started"
     link="/signup"
     demo={false}
   />
diff --git a/apps/website/src/routes/(redirects)/privacy/+layout.svelte b/apps/website/src/routes/(redirects)/privacy/+layout.svelte
new file mode 100644
index 00000000..cf4f1aa9
--- /dev/null
+++ b/apps/website/src/routes/(redirects)/privacy/+layout.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { PageHeader } from '$lib/components';
+
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
+</script>
+
+<PageHeader className="flex flex-col items-center justify-center bg-[#F5F8FE] text-center pb-8">
+  <div class="mb-2 flex w-full items-center justify-center">
+    <span
+      class="rounded-full border-2 border-[#C2D2FF] bg-[#DCE5FF] px-4 py-1 text-sm font-medium text-blue-700"
+      style="color: rgb(75, 85, 99);"
+    >
+      Legal
+    </span>
+  </div>
+  <h1 class="text-4xl font-semibold text-slate-900 md:text-5xl">Privacy Policy</h1>
+</PageHeader>
+
+<section class="mx-auto w-[90%] max-w-3xl px-4 py-12 lg:w-[60%]">
+  <article class="prose prose-slate prose-headings:scroll-mt-24 prose-a:text-blue-700 max-w-none">
+    {@render children?.()}
+  </article>
+</section>
diff --git a/apps/website/src/routes/(redirects)/privacy/+page.md b/apps/website/src/routes/(redirects)/privacy/+page.md
new file mode 100644
index 00000000..62d2cda9
--- /dev/null
+++ b/apps/website/src/routes/(redirects)/privacy/+page.md
@@ -0,0 +1,249 @@
+## 1. Introduction
+
+At ClassroomIO ("us", "we", "our" or the "Company") we value your privacy and the importance of safeguarding your data. This Privacy Policy (the "Policy") describes our privacy practices for the activities set out below. As per your rights, we inform you how we collect, store, access, and otherwise process information relating to individuals. In this Policy, personal data ("Personal Data") refers to any information that on its own, or in combination with other available information, can identify an individual.
+
+We are committed to protecting your privacy in accordance with the highest level of privacy regulation. As such, we follow the obligations under the below regulations:
+
+- Canada's Personal Information Protection and Electronic Documents Act (PIPEDA) and the applicable provincial legislations
+- Quebec Law 25
+- the EU's General Data Protection Regulation (GDPR)
+- Brazil's Data Protection Legislation (LGPD)
+- California's Consumer Privacy Act (CCPA) / California Privacy Rights Act (CPRA) and California Online Privacy Protection Act (CalOPPA)
+- Colorado Privacy Act (CPA)
+- Utah Consumer Privacy Act (UCPA)
+- Connecticut Data Privacy Act (CTDPA)
+- Virginia Consumer Data Protection Act (VCDPA)
+- Texas Data Privacy and Security Act (TDPSA)
+- Oregon Consumer Privacy Act (OCPA)
+- Montana Consumer Data Privacy Act
+- Delaware Personal Data Privacy Act
+- Nebraska Data Privacy Law
+- New Hampshire Data Privacy Act
+- New Jersey Data Privacy Act
+- Minnesota Consumer Data Privacy Act
+- Maryland Online Consumer Protection Act
+- Kentucky Consumer Data Privacy Act (KCDPA)
+- Tennessee Information Protection Act (TIPA)
+- The Rhode Island Data Transparency and Privacy Protection Act (RIDTPPA)
+- Indiana Consumer Data Privacy Act (INCDPA)
+- Iowa Consumer Data Privacy Act (ICDPA)
+- South Africa's Protection of Personal Information Act (POPIA)
+- Switzerland's Federal Act on Data Protection (FADP)
+- Saudi Arabia's Personal Data Protection Law (PDPL)
+
+### Scope
+
+This policy applies to the ClassroomIO websites, domains, applications, services, and products.
+
+This Policy does not apply to third-party applications, websites, products, services or platforms that may be accessed through (non-ClassroomIO) links that we may provide to you. These sites are owned and operated independently from us, and they have their own separate privacy and data collection practices. Any Personal Data that you provide to these websites will be governed by the third-party's own privacy policy. We cannot accept liability for the actions or policies of these independent sites, and we are not responsible for the content or privacy practices of such sites.
+
+### Processing Activities
+
+This Policy applies when you interact with us by doing any of the following:
+
+- Make use of our application and services as an authorized user
+- Visit any of our websites that link to this Privacy Statement
+
+## 2. Personal Data We Collect
+
+### What Personal Data We Collect
+
+When you make a purchase, or attempt to make a purchase, we collect the following types of Personal Data:
+
+This includes:
+
+- Account Information such as your name, email address, and password
+- Payment Information such as your billing address, phone number, credit card, debit card or other payment method
+
+When you use our products and/or features, we collect the following types of Personal Data:
+
+- Account Information such as your name, email address, and password
+- Payment Information such as your billing address, phone number, credit card, debit card or other payment method
+
+### How We Collect Your Personal Data
+
+We collect Personal Data from the following sources:
+
+**From you.** You may give us your Account Information, Payment Information, Financial Information, Demographic Data, Purchase Information, Content, Feedback, Product Information, by filling in forms, using our products or services, entering information online or by corresponding with us by post, phone, email or otherwise. This includes Personal Data you provide, for example, when you:
+
+- Create an account or purchase products on our website;
+- Use our products or services;
+- Create content through our products or services;
+- Express interest in our products or services;
+- Download software and/or our mobile application;
+- Subscribe to our newsletter;
+- Complete a voluntary market research survey;
+- Contact us with an inquiry or to report a problem (by phone, email, social media, or messaging service);
+- When you log in to our website via social media;
+
+**Automated technologies or interactions:** As you interact with our website, we may automatically collect the following types of data (all as described above): Device Data about your equipment, Usage Data about your browsing actions and patterns, and Contact Data where tasks carried out via our website remain uncompleted, such as incomplete orders or abandoned baskets. We collect this data by using cookies, server logs and other similar technologies. Please see our Cookie section (below) for further details.
+
+**Third parties:** We may receive Personal Data about you from various third parties, including:
+
+- Account Information and Payment Information from another individual when they purchase a gift for you on our website;
+- Device and Usage Data from third parties, including analytics providers;
+- Account Information and Payment Data from social media platforms when you log in to our website using such social media platforms;
+- Content from communication services, including email providers and social networks, when you give us permission to access your data on such third-party services or networks;
+- Account Information and Payment Data from third parties, including organizations (such as law enforcement agencies), associations and groups, who share data for the purposes of fraud prevention and detection and credit risk reduction; and
+- Account Information, Payment Data, and Financial Data from providers of technical, payment and delivery services.
+
+If you provide us, or our service providers, with any Personal Data relating to other individuals, you represent that you have the authority to do so and acknowledge that it will be used in accordance with this Policy. If you believe that your Personal Data has been provided to us improperly, or to otherwise exercise your rights relating to your Personal Data, please contact us by using the information set out in the "Contact us" section below.
+
+### Device and Usage Data
+
+When you visit a ClassroomIO website, we automatically collect and store information about your visit using browser cookies (files which are sent by us to your computer), or similar technology. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. The Help Feature on most browsers will provide information on how to accept cookies, disable cookies or to notify you when receiving a new cookie. If you do not accept cookies, you may not be able to use some features of our Service and we recommend that you leave them turned on.
+
+We also process information when you use our services and products. This information may include:
+
+- Device IDs
+- Login information
+- IP Address
+- Time stamps
+- Authentication records
+- Location information
+- Time zone
+
+### Data we collect from third parties
+
+We may receive your Personal Data from third parties such as companies subscribing to ClassroomIO services, partners and other sources. This Personal Data is not collected by us but by a third party and is subject to the relevant third party's own separate privacy and data collection policies. We do not have any control or input on how your Personal Data is handled by third parties. As always, you have the right to review and rectify this information. If you have any questions you should first contact the relevant third party for further information about your Personal Data. Where that third party is unresponsive to your rights, you may contact the Data Protection Officer at ClassroomIO (contact details below).
+
+Our websites and services may contain links to other websites, applications and services maintained by third parties. The information practices of such other services, or of social media networks that host our branded social media pages, are governed by third parties' privacy statements, which you should review to better understand those third parties' privacy practices.
+
+### Purpose and Legal Basis for the Processing of Personal Data
+
+We collect and use your Personal Data with your consent to provide, maintain, and develop our products and services and understand how to improve them.
+
+These purposes include:
+
+- To deliver your product or service
+- To fulfill orders including electronic and non-electronic shipment
+- Building a Safe and Secure Environment
+- To verify or authenticate your identity; and
+- Investigate and prevent security incidents such as breaches, attacks and hacks
+- Providing, Developing, and Improving our Products and Services
+- Deliver, maintain, debug and improve our products and services.
+- Enable you to access ClassroomIO services and set up accounts.
+- Provide you with technical and customer support
+
+Where we process your Personal Data to provide a product or service, we do so because it is necessary to perform contractual obligations. All of the above processing is necessary in our legitimate interests to provide products and services and to maintain our relationship with you and to protect our business for example against fraud. Consent will be required to initiate services with you. New consent will be required if any changes are made to the type of data collected. Within our contract, if you fail to provide consent, some services may not be available to you.
+
+### Third Party Tools
+
+We use these third party tools and subprocessors to operate our services and store or process information where applicable:
+
+- **Supabase** (database and authentication infrastructure for our application)
+- **PostHog** (product analytics on our server and, where implemented, in our applications)
+- **Umami** (privacy-focused website analytics on our marketing site)
+
+This list may change as we update our vendors; material changes will be reflected in this Policy when practical.
+
+### International Data Transfer and Storage
+
+Where possible, we store and process data on servers within the general geographical region where you reside (note: this may not be within the country in which you reside). Your Personal Data may also be transferred to, and maintained on, servers residing outside of your state, province, country or other governmental jurisdiction where the data laws may differ from those in your jurisdiction. We will take appropriate steps to ensure that your Personal Data is treated securely and in accordance with this Policy as well as applicable data protection law. More information about standard contractual clauses can be found here: [https://eur-lex.europa.eu/legal-content/en/TXT/?uri=CELEX%3A32021D0914](https://eur-lex.europa.eu/legal-content/en/TXT/?uri=CELEX%3A32021D0914)
+
+### Sharing and Disclosure
+
+We will share your Personal Data with third parties only in the ways set out in this Policy or set out at the point when the Personal Data is collected.
+
+### Legal Requirement
+
+We may use or disclose your Personal Data in order to comply with a legal obligation, in connection with a request from a public or government authority, or in connection with court or tribunal proceedings, to prevent loss of life or injury, or to protect our rights or property. Where possible and practical to do so, we will tell you in advance of such disclosure.
+
+### Service Providers and Other Third Parties
+
+We may use a third party service provider, independent contractors, agencies, or consultants to deliver and help us improve our products and services. We may share your Personal Data with marketing agencies, database service providers, backup and disaster recovery service providers, email service providers and others but only to maintain and improve our products and services. For further information on the recipients of your Personal Data, please contact us by using the information in the "Contacting us" section below.
+
+## 3. Cookies
+
+### What are Cookies?
+
+A cookie is a small file with information that your browser stores on your device. Information in this file is typically shared with the owner of the site in addition to potential partners and third parties to that business. The collection of this information may be used in the function of the site and/or to improve your experience.
+
+### How we use cookies
+
+To give you the best experience possible, we use the following types of cookies:
+
+- **Preference.** We use preference cookies to help us remember the way you like to use our service.
+- Some cookies are used to personalize content and present you with a tailored experience. For example, location could be used to give you services and offers in your area.
+
+## 4. Retention & Deletion
+
+We will only retain your Personal Data for as long as necessary for the purpose for which that data was collected and to the extent required by applicable law. When we no longer need Personal Data, we will remove it from our systems and/or take steps to anonymize it.
+
+## 5. Merger or Acquisition
+
+If we are involved in a merger, acquisition or asset sale, your personal information may be transferred. We will provide notice before your personal information is transferred and becomes subject to a different Privacy Policy. Under certain circumstances, we may be required to disclose your personal information if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
+
+## 6. How We Keep Your Data Safe
+
+We have appropriate organizational safeguards and security measures in place to protect your Personal Data from being accidentally lost, used or accessed in an unauthorized way, altered or disclosed.
+
+The communication between your browser and our website uses a secure encrypted connection wherever your Personal Data is involved.
+
+We require any third party who is contracted to process your Personal Data on our behalf to have security measures in place to protect your data and to treat such data in accordance with the law.
+
+In the unfortunate event of a Personal Data breach, we will notify you and any applicable regulator when we are legally required to do so.
+
+## 7. Your Rights for Your Personal Data
+
+Depending on your geographical location and citizenship, your rights are subject to local data privacy regulations. These rights may include:
+
+- **Right to Access** (PIPEDA, GDPR Article 15, CCPA/CPRA, CPA, VCDPA, CTDPA, UCPA, LGPD, POPIA)
+- **Right to Rectification** (PIPEDA, GDPR Article 16, CPRA, CPA, VCDPA, CTDPA, LGPD, POPIA)
+- **Right to be Forgotten (right to erasure)** (GDPR Article 17, CCPA/CPRA, CPA, VCDPA, CTDPA, UCPA, LGPD, POPIA)
+- **Right to Restriction of Processing** (GDPR Article 18, LGPD)
+- **Right to Portability** (PIPEDA, GDPR Article 20, LGPD)
+- **Right to Opt Out** (CPRA, CPA, VCDPA, CTDPA, UCPA)
+- **Right to Objection** (GDPR Article 21, LGPD, POPIA)
+- **Nondiscrimination and nonretaliation** (CCPA/CPRA, CPA, VCDPA, CTDPA, UCPA)
+- **File an Appeal** (CPA, VCDPA, CTDPA)
+- **File a Complaint** (GDPR Article 77, LGPD, POPIA)
+
+You have the right to file an appeal based on our response to you exercising any of these rights. In the event you disagree with how we resolved the appeal, you may have the right to contact your local data protection or consumer protection authority.
+
+If you are based in the EEA, please visit this website ([https://edpb.europa.eu/about-edpb/about-edpb/members_en](https://edpb.europa.eu/about-edpb/about-edpb/members_en)) for a list of local data protection authorities.
+
+You have the right to learn whether we are processing your Personal Data and to request a copy of the Personal Data we are processing about you.
+
+You have the right to have incomplete or inaccurate Personal Data that we process about you rectified.
+
+You have the right to request that we delete Personal Data that we process about you, unless we need to retain such data in order to comply with a legal obligation or to establish, exercise or defend legal claims.
+
+You have the right to restrict our processing of your Personal Data under certain circumstances. In this case, we will not process your Data for any purpose other than storing it.
+
+You have the right to obtain Personal Data we hold about you, in a structured, electronic format, and to transmit such Personal Data to another data controller, where this is (a) Personal Data which you have provided to us, and (b) if we are processing that data on the basis of your consent or to perform a contract with you or the third party that subscribes to services.
+
+You have the right to opt out of the processing of your Personal Data for purposes of: (1) Targeted advertising; (2) The sale of Personal Data; and/or (3) Profiling in furtherance of decisions that produce legal or similarly significant effects concerning you. Under CPRA, you have the right to opt out of the sharing of your Personal Data to third parties and our use and disclosure of your Sensitive Personal Data to uses necessary to provide the products and services reasonably expected by you.
+
+Where the legal justification for our processing of your Personal Data is our legitimate interest, you have the right to object to such processing on grounds relating to your particular situation. We will abide by your request unless we have compelling legitimate grounds for processing which override your interests and rights, or if we need to continue to process the Personal Data for the establishment, exercise or defense of a legal claim.
+
+You have the right not to be denied service or have an altered experience for exercising your rights.
+
+If you are based in Colorado, please visit this [website](https://complaints.coag.gov/s/contact-us) to file a complaint. If you are based in Virginia, please visit this [website](https://www.oag.state.va.us/consumer-protection/index.php/file-a-complaint) to file a complaint. If you are based in Connecticut, please visit this [website](https://portal.ct.gov/AG/Common/Complaint-Form-Landing-page) to file a complaint.
+
+### Withdrawing Consent
+
+If you have consented to our processing of your Personal Data, you have the right to withdraw your consent at any time, free of charge, such as where you wish to opt out from marketing messages that you receive from us. If you wish to withdraw your consent, please contact us using the information found at the bottom of this page.
+
+### How to Exercise Your Rights
+
+You can make a request to exercise any of these rights in relation to your Personal Data by contacting our team using the contact details below.
+
+For your own privacy and security, at our discretion, we may require you to prove your identity before providing the requested information.
+
+## 8. Changes
+
+We may modify this Policy at any time. If we make changes to this Policy then we will post an updated version of this Policy at this website. When using our services, you may be asked to review and accept our Privacy Policy. In this manner, we may record your acceptance and notify you of any future changes to this Policy.
+
+## 9. Contact Us
+
+To request a copy of your information, unsubscribe from our email list, request for your data to be deleted, or ask a question about your data privacy:
+
+Email [help@classroomio.com](mailto:help@classroomio.com)
+
+Write to us at:
+
+Data Privacy Officer of ClassroomIO  
+128 City Road, London, United Kingdom, EC1V 2NX
+
+**Last updated:** April 12, 2026
diff --git a/apps/website/src/routes/(redirects)/privacy/+page.server.ts b/apps/website/src/routes/(redirects)/privacy/+page.server.ts
index adabdef8..85353cae 100644
--- a/apps/website/src/routes/(redirects)/privacy/+page.server.ts
+++ b/apps/website/src/routes/(redirects)/privacy/+page.server.ts
@@ -1,4 +1,3 @@
-import { redirect } from '@sveltejs/kit';
 import { client } from '$lib/utils/posthog';
 
 export const prerender = false;
@@ -6,8 +5,14 @@ export const prerender = false;
 export const load = async ({ request }) => {
   client.capture({
     distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
-    event: 'privacy page visited'
+    event: 'privacy policy page visited'
   });
 
-  redirect(307, 'https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594');
+  return {
+    pageMetaTags: {
+      title: 'Privacy Policy | ClassroomIO',
+      description:
+        'How ClassroomIO collects, uses, stores, and protects personal data when you use our websites and services.'
+    }
+  };
 };
diff --git a/apps/website/src/routes/(redirects)/tos/+layout.svelte b/apps/website/src/routes/(redirects)/tos/+layout.svelte
new file mode 100644
index 00000000..7909bfa0
--- /dev/null
+++ b/apps/website/src/routes/(redirects)/tos/+layout.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { PageHeader } from '$lib/components';
+
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
+</script>
+
+<PageHeader className="flex flex-col items-center justify-center bg-[#F5F8FE] text-center pb-8">
+  <div class="mb-2 flex w-full items-center justify-center">
+    <span
+      class="rounded-full border-2 border-[#C2D2FF] bg-[#DCE5FF] px-4 py-1 text-sm font-medium text-blue-700"
+      style="color: rgb(75, 85, 99);"
+    >
+      Legal
+    </span>
+  </div>
+  <h1 class="text-4xl font-semibold text-slate-900 md:text-5xl">Terms of Service</h1>
+</PageHeader>
+
+<section class="mx-auto w-[90%] max-w-3xl px-4 py-12 lg:w-[60%]">
+  <article class="prose prose-slate prose-headings:scroll-mt-24 prose-a:text-blue-700 max-w-none">
+    {@render children?.()}
+  </article>
+</section>
diff --git a/apps/website/src/routes/(redirects)/tos/+page.md b/apps/website/src/routes/(redirects)/tos/+page.md
new file mode 100644
index 00000000..1781285f
--- /dev/null
+++ b/apps/website/src/routes/(redirects)/tos/+page.md
@@ -0,0 +1,136 @@
+## Introduction
+
+Our aim is to keep this Agreement as readable as possible, but in some cases for legal reasons, some of the language is required "legalese".
+
+## Your Acceptance of this Agreement
+
+These terms of service are entered into by and between You and ClassroomIO ("Company," "we," "our," or "us"). The following terms and conditions, together with any documents they expressly incorporate by reference (collectively "Terms of Service"), govern your access to and use of classroomio.com, including any content, functionality, and services offered on or through classroomio.com (the "Website").
+
+Please read the Terms of Service carefully before you start to use the Website.
+
+By using the Website [or by clicking to accept or agree to the Terms of Service when this option is made available to you], you accept and agree to be bound and abide by these Terms of Service and our [Privacy Policy](/privacy), incorporated herein by reference. If you do not want to agree to these Terms of Service, you must not access or use the Website.
+
+**BY ACCESSING AND USING THIS WEBSITE, YOU:**
+
+**ACCEPT AND AGREE TO BE BOUND AND COMPLY WITH THESE TERMS OF SERVICE; YOU REPRESENT AND WARRANT THAT YOU ARE THE LEGAL AGE OF MAJORITY UNDER APPLICABLE LAW TO FORM A BINDING CONTRACT WITH US; AND, YOU AGREE IF YOU ACCESS THE WEBSITE FROM A JURISDICTION WHERE IT IS NOT PERMITTED, YOU DO SO AT YOUR OWN RISK.**
+
+## Updates to Terms of Service
+
+We may revise and update these Terms of Service from time to time in our sole discretion. All changes are effective immediately when we post them and apply to all access to and use of the Website thereafter.
+
+Continuing to use the Website following the posting of revised Terms of Service means that you accept and agree to the changes. You are expected to check this page each time you access this Website so you are aware of any changes, as they are binding on you.
+
+## Your Responsibilities
+
+You are required to ensure that all persons who access the Website are aware of this Agreement and comply with it. It is a condition of your use of the Website that all the information you provide on the Website is correct, current, and complete.
+
+**YOU ARE SOLELY AND ENTIRELY RESPONSIBLE FOR YOUR USE OF THE WEBSITE AND YOUR COMPUTER, INTERNET AND DATA SECURITY.**
+
+## Prohibited Activities
+
+You may use the Website only for lawful purposes and in accordance with these Terms of Service. You agree not to use the Website:
+
+- In any way that violates any applicable federal, state, local or international law or regulation (including, without limitation, any laws regarding the exports of data software to and from the U.S. or other countries).
+- For the purpose of exploiting, harming, or attempting to exploit or harm minors in any way by exposing them to inappropriate content, asking for personally identifiable information or otherwise.
+- To send, knowingly receive, upload, download, use, or re-use any material that does not comply with the Submission Standards set out in these Terms of Service.
+- To transmit, or procure the sending of, any advertising or promotional material, including any "junk mail," "chain letter," "spam," or any other similar solicitation.
+- To impersonate or attempt to impersonate the Company, a Company employee, another user, or any other persona or entity (including, without limitation, by using email addresses associated with any of the foregoing).
+- To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of the website, or which as determined by us, may harm the Company or users of the website, or expose them to liability.
+
+Additionally, you agree not to:
+
+- Use the Website in any manner that could disable, overburden, damage, or impair the site or interfere with any other party's use of the Website, including their ability to engage in real-time activities through the Website.
+- Use any robot, spider, or other automatic device, process, or means to access the Website for any purpose, including monitoring or copying any of the material on the Website.
+- Use any manual process to monitor or copy any of the material on the Website, or for any other purpose not expressly authorized in these Terms of Service, without our prior written consent.
+- Use any device, software, or routine that interferes with the proper working of the Website.
+- Introduce any viruses, Trojan horses, worms, logic bombs, or other material that is malicious or technologically harmful.
+- Attempt to gain unauthorized access to, interfere with, damage, or disrupt any parts of the Website, the server on which the Website is stored, or any server, computer, or database connected to the Website.
+- Attack the Website via a denial-of-service attack or a distributed denial-of-service attack.
+- Otherwise attempting to interfere with the proper working of the Website.
+
+## Intellectual Property Rights
+
+The Website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof) are owned by the Company, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.
+
+You must not reproduce, distribute, modify, create derivative works of, publicly display, publicly perform, republish, download, store, or transmit any of the material on our Website, except as follows:
+
+- Your computer may temporarily store copies of such material in RAM incidental to your accessing and viewing those materials.
+- You may store files that are automatically cached by your Web browser for display enhancement purposes.
+- You may print or download one copy of a reasonable number of pages of the Website.
+- If we provide desktop, mobile or other applications for download, you may download a single copy to your computer or mobile device, provided you agree to be bound by our license terms for such applications (for example, our open source license for applicable software).
+
+You must not:
+
+- Modify copies of any materials from this site.
+- Delete or alter any of the copyright, trademark, or other proprietary rights notices from copies of materials from this site.
+
+If you print, copy, modify, download, or otherwise use or provide any other person with access to any part of the Website in breach of the Terms of Service, your right to use the Website will stop immediately and you must, at our option, return or destroy any copies of the materials you have made. No right, title, or interest in or to the Website or any content on the Website is transferred to you, and all rights not expressly granted are reserved by the Company. Any use of the Website not expressly permitted by these Terms of Service is a breach of these Terms of Service and may violate copyright, trademark, and other laws.
+
+## Our Rights
+
+We have the right, without provision of notice to:
+
+- Take appropriate legal action, including, without limitation, referral to or cooperation with law enforcement or regulatory authorities, or notifying the harmed party of any illegal or unauthorized use of the Website; and
+- Terminate or suspend your access to all or part of the Website for any or no reason, including, without limitation, any violation of these Terms of Service.
+
+**YOU WAIVE AND HOLD HARMLESS COMPANY AND ITS PARENT, SUBSIDIARIES, AFFILIATES, AND THEIR RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, AGENTS, SERVICE PROVIDERS, CONTRACTORS, LICENSORS, LICENSEES, SUPPLIERS, AND SUCCESSORS FROM ANY AND ALL CLAIMS RESULTING FROM ANY ACTION TAKEN BY THE COMPANY AND ANY OF THE FOREGOING PARTIES RELATING TO ANY, INVESTIGATIONS BY EITHER THE COMPANY OR BY LAW ENFORCEMENT AUTHORITIES.**
+
+## Third-Party Links and Content
+
+For your convenience, this Website may provide links or pointers to third-party sites or third-party content. We make no representations about any other websites or third-party content that may be accessed from this Website. If you choose to access any such sites, you do so at your own risk. We have no control over the third-party content or any such third-party sites and accept no responsibility for such sites or for any loss or damage that may arise from your use of them. You are subject to any terms and conditions of such third-party sites.
+
+## Software
+
+By downloading our software, you acknowledge and agree to the applicable open source or end user license terms published with that software (for example, our [LICENSE](https://github.com/classroomio/classroomio/blob/main/LICENSE) for the ClassroomIO project where applicable). Those terms will govern your use of the software.
+
+## Payment and Fees
+
+You may be required to purchase or pay a fee to access our services. We accept payment methods as shown on the Website at the time of purchase. However, Company does not guarantee the availability of any payment method at any moment and Company may add, remove or suspend any payment method temporarily or permanently at Company's sole discretion. You agree to provide current, complete, and accurate purchase and account information for all purchases made via the Website and to promptly update account and payment information, including email address, payment method, and payment card expiration date, in order to complete your purchases and contact you as needed. Sales tax will be added to the price of purchases as deemed required by us. We may change prices at any time. All payments shall be in the currency advertised on the website.
+
+You agree to pay all charges or fees at the prices then in effect for your purchases, and you authorize us to charge your chosen payment provider for any such amounts upon making your purchase.
+
+We reserve the right to correct any errors or mistakes in pricing, even if we have already requested or received payment. We also reserve the right to refuse any order placed through the Website.
+
+## Disclaimers, Liability and Indemnification
+
+YOU UNDERSTAND AND AGREE THAT YOUR USE OF THE WEBSITE, ITS CONTENT, AND ANY GOODS, DIGITAL PRODUCTS, SERVICES, INFORMATION OR ITEMS FOUND OR ATTAINED THROUGH THE WEBSITE IS AT YOUR OWN RISK. THE WEBSITE, ITS CONTENT, AND ANY GOODS, SERVICES, DIGITAL PRODUCTS, INFORMATION OR ITEMS FOUND OR ATTAINED THROUGH THE WEBSITE ARE PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS, WITHOUT ANY WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. THE FOREGOING DOES NOT AFFECT ANY WARRANTIES THAT CANNOT BE EXCLUDED OR LIMITED UNDER APPLICABLE LAW.
+
+YOU ACKNOWLEDGE AND AGREE THAT COMPANY OR ITS RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, AGENTS, SERVICE PROVIDERS, CONTRACTORS, LICENSORS, LICENSEES, SUPPLIERS, OR SUCCESSORS MAKE NO WARRANTY, REPRESENTATION, OR ENDORSEMENT WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, SUITABILITY, ACCURACY, CURRENCY, OR AVAILABILITY OF THE WEBSITE OR ITS CONTENTS OR THAT ANY GOODS, SERVICES, DIGITAL PRODUCTS, INFORMATION OR ITEMS FOUND OR ATTAINED THROUGH THE WEBSITE WILL BE ACCURATE, RELIABLE, ERROR-FREE, OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT OUR WEBSITE OR THE SERVER THAT MAKES IT AVAILABLE OR CONTENT ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS OR DESTRUCTIVE CODE.
+
+### How We Limit Our Liability to You
+
+EXCEPT WHERE SUCH EXCLUSIONS ARE PROHIBITED BY LAW, IN NO EVENT SHALL THE COMPANY NOR ITS RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, AGENTS, SERVICE PROVIDERS, CONTRACTORS, LICENSORS, LICENSEES, SUPPLIERS, OR SUCCESSORS BE LIABLE UNDER THESE TERMS OF SERVICE TO YOU OR ANY THIRD-PARTY FOR ANY CONSEQUENTIAL, INDIRECT, INCIDENTAL, EXEMPLARY, SPECIAL, OR PUNITIVE DAMAGES WHATSOEVER, INCLUDING ANY DAMAGES FOR BUSINESS INTERRUPTION, LOSS OF USE, DATA, REVENUE OR PROFIT, COST OF CAPITAL, LOSS OF BUSINESS OPPORTUNITY, LOSS OF GOODWILL, WHETHER ARISING OUT OF BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), ANY OTHER THEORY OF LIABILITY, OR OTHERWISE, REGARDLESS OF WHETHER SUCH DAMAGES WERE FORESEEABLE AND WHETHER OR NOT THE COMPANY WAS ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+### Indemnification
+
+To the maximum extent permitted by applicable law, you agree to defend, indemnify, and hold harmless Company, its parent, subsidiaries, affiliates, and their respective directors, officers, employees, agents, service providers, contractors, licensors, suppliers, successors, and assigns from and against any claims, liabilities, damages, judgments, awards, losses, costs, expenses, or fees (including reasonable attorneys' fees) arising out of or relating to your breach of these Terms of Service or your use of the Website including, but not limited to, third-party sites and content, any use of the Website's content and services other than as expressly authorized in these Terms of Service or any use of any goods, digital products and information purchased from this Website.
+
+## Privacy Policy
+
+Your provision of personal information through the Website is governed by our Privacy Policy located at [/privacy](/privacy) (the "Privacy Policy").
+
+## Governing Law
+
+The Website and these Terms of Service will be governed by and construed in accordance with the laws of Nigeria and any applicable federal laws applicable therein, without giving effect to any choice or conflict of law provision, principle, or rule and notwithstanding your domicile, residence, or physical location. Any action or proceeding arising out of or relating to this Website and/or under these Terms of Service will be instituted in the courts of the Country of Nigeria, and each party irrevocably submits to the exclusive jurisdiction of such courts in any such action or proceeding. You waive any and all objections to the exercise of jurisdiction over you by such courts and to the venue of such courts.
+
+The parties agree that the United Nations Convention on Contracts for the International Sale of Goods will not govern these Terms of Service or the rights and obligations of the parties under these Terms of Service.
+
+## Severability
+
+If any provision of these Terms of Service is illegal or unenforceable under applicable law, the remainder of the provision will be amended to achieve as closely as possible the effect of the original term and all other provisions of these Terms of Service will continue in full force and effect.
+
+## Entire Terms of Service
+
+These Terms of Service constitute the entire and only Terms of Service between the parties in relation to its subject matter and replaces and extinguishes all prior or simultaneous Terms of Services, undertakings, arrangements, understandings or statements of any nature made by the parties or any of them whether oral or written (and, if written, whether or not in draft form) with respect to such subject matter. Each of the parties acknowledges that they are not relying on any statements, warranties or representations given or made by any of them in relation to the subject matter of these Terms of Service, save those expressly set out in these Terms of Service, and that they shall have no rights or remedies with respect to such subject matter otherwise than under these Terms of Service save to the extent that they arise out of the fraud or fraudulent misrepresentation of another party. No variation of these Terms of Service shall be effective unless it is in writing and signed by or on behalf of Company.
+
+## Waiver
+
+No failure to exercise, and no delay in exercising, on the part of either party, any right or any power hereunder shall operate as a waiver thereof, nor shall any single or partial exercise of any right or power hereunder preclude further exercise of that or any other right hereunder.
+
+## Notice
+
+We may provide any notice to you under these Terms of Service by: (i) sending a message to the email address you provide to us and consent to us using; or (ii) by posting to the Website. Notices sent by email will be effective when we send the email and notices we provide by posting will be effective upon posting. It is your responsibility to keep your email address current.
+
+To give us notice under these Terms of Service, you must contact us as follows: (i) by personal delivery, overnight courier or registered or certified mail to ClassroomIO, 128 City Road, London, United Kingdom, EC1V 2NX. We may update the address for notices to us by posting a notice on this Website. Notices provided by personal delivery will be effective immediately once personally received by an authorized representative of Company. Notices provided by overnight courier or registered or certified mail will be effective once received and where confirmation has been provided to evidence the receipt of the notice.
+
+**Last updated:** April 12, 2026
diff --git a/apps/website/src/routes/(redirects)/tos/+page.server.ts b/apps/website/src/routes/(redirects)/tos/+page.server.ts
index 647af660..ac64640d 100644
--- a/apps/website/src/routes/(redirects)/tos/+page.server.ts
+++ b/apps/website/src/routes/(redirects)/tos/+page.server.ts
@@ -1,4 +1,3 @@
-import { redirect } from '@sveltejs/kit';
 import { client } from '$lib/utils/posthog';
 
 export const prerender = false;
@@ -6,8 +5,13 @@ export const prerender = false;
 export const load = async ({ request }) => {
   client.capture({
     distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
-    event: 'privacy page visited'
+    event: 'terms of service page visited'
   });
 
-  redirect(307, 'https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594');
+  return {
+    pageMetaTags: {
+      title: 'Terms of Service | ClassroomIO',
+      description: 'Terms governing your access to and use of ClassroomIO websites, content, and services.'
+    }
+  };
 };
diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index cdc4d26c..6aed3f02 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -1,20 +1,31 @@
 <script>
-  import { Hero, CoreFeatures, Faq, StudentDashboard, MoreFeatures, Testimonial } from '$lib/components';
-  import { PUBLIC_ENABLE_FAQ } from '$env/static/public';
-
-  import { onMount } from 'svelte';
-
-  onMount(() => {
-    console.log('Welcome to CIO');
-  });
+  import {
+    Hero,
+    CertSection,
+    FeaturesSection,
+    AiSection,
+    LearnerSection,
+    QuestionTypes,
+    AutomateSection,
+    DeploySection,
+    EnterpriseSection,
+    Testimonial,
+    PageSignupCTA
+  } from '$lib/components';
 </script>
 
 <Hero />
-<CoreFeatures />
-<StudentDashboard />
+<AiSection />
+<FeaturesSection />
+<CertSection />
+<LearnerSection />
+<QuestionTypes />
+<!-- <AutomateSection /> -->
+<DeploySection />
+<EnterpriseSection />
 <Testimonial />
-<MoreFeatures />
-
-{#if PUBLIC_ENABLE_FAQ}
-  <Faq />
-{/if}
+<PageSignupCTA
+  header="Ready to replace Moodle with something you'll actually enjoy?"
+  subText="Get up and running in an afternoon. No vendor calls, no implementation fees, no surprises."
+  btnLabel="Book a Demo"
+/>
diff --git a/apps/website/src/routes/pricing/+page.svelte b/apps/website/src/routes/pricing/+page.svelte
index a2b29a00..9df89d64 100644
--- a/apps/website/src/routes/pricing/+page.svelte
+++ b/apps/website/src/routes/pricing/+page.svelte
@@ -73,7 +73,7 @@
 </section>
 
 <PageSignupCTA
-  header="Bring your bootcamp vision online"
+  header="Migrate your certification program to ClassroomIO"
   subText="Try before you buy. No credit card required."
   btnLabel="Sign up for free"
   link="/signup"
diff --git a/apps/website/static/claude-logo.svg b/apps/website/static/claude-logo.svg
new file mode 100644
index 00000000..879ad812
--- /dev/null
+++ b/apps/website/static/claude-logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.6.17 -->
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+    <g id="g314">
+        <path id="path147" fill="#d97757" stroke="none" d="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z"/>
+    </g>
+</svg>
diff --git a/apps/website/static/codex-logo.png b/apps/website/static/codex-logo.png
new file mode 100644
index 00000000..912415ea
Binary files /dev/null and b/apps/website/static/codex-logo.png differ
diff --git a/apps/website/static/cursor-logo.png b/apps/website/static/cursor-logo.png
new file mode 100644
index 00000000..8fa4dfad
Binary files /dev/null and b/apps/website/static/cursor-logo.png differ
diff --git a/apps/website/static/opencode-logo.svg b/apps/website/static/opencode-logo.svg
new file mode 100644
index 00000000..b79140a5
--- /dev/null
+++ b/apps/website/static/opencode-logo.svg
@@ -0,0 +1 @@
+<svg width='240' height='300' viewBox='0 0 240 300' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(#clip0_1401_86274)'><mask id='mask0_1401_86274' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='240' height='300'><path d='M240 0H0V300H240V0Z' fill='white'/></mask><g mask='url(#mask0_1401_86274)'><path d='M180 240H60V120H180V240Z' fill='#CFCECD'/><path d='M180 60H60V240H180V60ZM240 300H0V0H240V300Z' fill='#211E1E'/></g></g><defs><clipPath id='clip0_1401_86274'><rect width='240' height='300' fill='white'/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/website/vite.config.js b/apps/website/vite.config.js
index 27ff84a0..b100defb 100644
--- a/apps/website/vite.config.js
+++ b/apps/website/vite.config.js
@@ -17,7 +17,7 @@ export default defineConfig({
     entries: ['src/routes/**/+*.{js,ts,svelte}']
   },
   ssr: {
-    noExternal: ['bits-ui', 'svelte-toolbelt', '@lucide/svelte', 'runed']
+    noExternal: ['bits-ui', 'svelte-toolbelt', '@lucide/svelte', 'runed', 'svelte-motion', 'svelte-inview']
   },
   resolve: {
     mainFields: ['browser']
diff --git a/package.json b/package.json
index 14d3b837..24587e51 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,14 @@
     "db:reset": "pnpm --filter @cio/db db:reset",
     "dashboard:dev": "pnpm dev --filter=@cio/dashboard --filter=@cio/ui --filter=@cio/question-types --filter=@cio/db --filter=@cio/utils",
     "api:dev": "pnpm dev --filter=@cio/api --filter=@cio/email --filter=@cio/db --filter=@cio/utils",
+    "docs:dev": "pnpm --filter @cio/docs dev",
+    "docs:build": "pnpm --filter @cio/docs build",
+    "docs:types:check": "pnpm --filter @cio/docs types:check",
     "website:dev": "pnpm dev --filter=@cio/website",
+    "embeds:dev": "pnpm dev --filter=@cio/embeds --filter=@cio/ui",
     "storybook:dev": "pnpm dev --filter=@cio/storybook --filter=@cio/ui --filter=@cio/question-types",
-    "mcp:build": "pnpm build --filter=@classroomio/mcp"
+    "mcp:build": "pnpm build --filter=@classroomio/mcp",
+    "db:push": "pnpm --filter @cio/db db push"
   },
   "license": "MIT",
   "dependencies": {
diff --git a/packages/db/src/drizzle.ts b/packages/db/src/drizzle.ts
index a222b023..1fe124d8 100644
--- a/packages/db/src/drizzle.ts
+++ b/packages/db/src/drizzle.ts
@@ -17,7 +17,7 @@ const globalDatabase = globalThis as typeof globalThis & {
 
 function createDatabaseClient() {
   return postgres(connectionString, {
-    max: process.env.NODE_ENV === 'production' ? 10 : 1,
+    max: Number.parseInt(process.env.DATABASE_POOL_MAX ?? '10', 10) || 5,
     idle_timeout: 20,
     connect_timeout: 10,
     max_lifetime: 60 * 30
diff --git a/packages/db/src/queries/course/course.ts b/packages/db/src/queries/course/course.ts
index e0edfaca..876961af 100644
--- a/packages/db/src/queries/course/course.ts
+++ b/packages/db/src/queries/course/course.ts
@@ -11,7 +11,7 @@ import {
   TNewCourseSection,
   TProfile
 } from '@db/types';
-import { and, desc, eq, inArray, isNull, or, sql } from 'drizzle-orm';
+import { and, count, desc, eq, ilike, inArray, isNotNull, isNull, or, sql } from 'drizzle-orm';
 
 import { ROLE } from '@cio/utils/constants';
 import { db, type DbOrTxClient } from '@db/drizzle';
@@ -23,6 +23,7 @@ import { getCourseContentItems, type CourseContentItemRow } from './content';
  */
 export interface TBaseCourse extends TCourse {
   lessonCount: number;
+  exerciseCount: number;
 }
 
 /**
@@ -40,7 +41,6 @@ export interface TAdminCourse extends TBaseCourse {
  */
 export interface TStudentCourse extends TBaseCourse {
   progressRate: number;
-  exerciseCount: number;
   exercisesCompleted: number;
 }
 
@@ -49,7 +49,11 @@ export interface TStudentCourse extends TBaseCourse {
  * @param siteName Organization site name
  * @returns Array of published courses with lesson counts
  */
-export const getPublishedCoursesBySiteName = async (siteName: string, courseIds?: string[]): Promise<TBaseCourse[]> => {
+export const getPublishedCoursesBySiteName = async (
+  siteName: string,
+  courseIds?: string[],
+  limit?: number
+): Promise<TBaseCourse[]> => {
   try {
     if (courseIds && courseIds.length === 0) {
       return [];
@@ -65,22 +69,46 @@ export const getPublishedCoursesBySiteName = async (siteName: string, courseIds?
       conditions.push(inArray(schema.course.id, courseIds));
     }
 
-    const result = await db
-      .select({
-        course: schema.course,
-        lessonCount: sql<number>`COUNT(${schema.lesson.id})`.as('lesson_count')
-      })
-      .from(schema.course)
-      .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
-      .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
-      .leftJoin(schema.lesson, eq(schema.course.id, schema.lesson.courseId))
-      .where(and(...conditions))
-      .groupBy(schema.course.id)
-      .orderBy(desc(schema.course.createdAt));
+    const exerciseCountSql = sql<number>`(
+      SELECT COUNT(*)::bigint
+      FROM ${schema.exercise} as ex
+      LEFT JOIN ${schema.lesson} as el ON el.id = ex.lesson_id
+      WHERE ${or(eq(sql`ex.course_id`, schema.course.id), eq(sql`el.course_id`, schema.course.id))}
+    )`.as('exercise_count');
+
+    const result = limit
+      ? await db
+          .select({
+            course: schema.course,
+            lessonCount: sql<number>`COUNT(${schema.lesson.id})`.as('lesson_count'),
+            exerciseCount: exerciseCountSql
+          })
+          .from(schema.course)
+          .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+          .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
+          .leftJoin(schema.lesson, eq(schema.course.id, schema.lesson.courseId))
+          .where(and(...conditions))
+          .groupBy(schema.course.id)
+          .orderBy(desc(schema.course.createdAt))
+          .limit(limit)
+      : await db
+          .select({
+            course: schema.course,
+            lessonCount: sql<number>`COUNT(${schema.lesson.id})`.as('lesson_count'),
+            exerciseCount: exerciseCountSql
+          })
+          .from(schema.course)
+          .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+          .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
+          .leftJoin(schema.lesson, eq(schema.course.id, schema.lesson.courseId))
+          .where(and(...conditions))
+          .groupBy(schema.course.id)
+          .orderBy(desc(schema.course.createdAt));
 
     return result.map((row) => ({
       ...row.course,
-      lessonCount: Number(row.lessonCount)
+      lessonCount: Number(row.lessonCount),
+      exerciseCount: Number(row.exerciseCount)
     }));
   } catch (error) {
     console.error('getCoursesBySiteName error:', error);
@@ -90,6 +118,40 @@ export const getPublishedCoursesBySiteName = async (siteName: string, courseIds?
   }
 };
 
+export const countPublishedCoursesBySiteName = async (siteName: string, courseIds?: string[]): Promise<number> => {
+  try {
+    if (courseIds && courseIds.length === 0) {
+      return 0;
+    }
+
+    const conditions = [
+      eq(schema.organization.siteName, siteName),
+      eq(schema.course.status, 'ACTIVE'),
+      eq(schema.course.isPublished, true)
+    ];
+
+    if (courseIds && courseIds.length > 0) {
+      conditions.push(inArray(schema.course.id, courseIds));
+    }
+
+    const [result] = await db
+      .select({
+        total: count(schema.course.id)
+      })
+      .from(schema.course)
+      .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+      .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
+      .where(and(...conditions));
+
+    return Number(result?.total ?? 0);
+  } catch (error) {
+    console.error('countPublishedCoursesBySiteName error:', error);
+    throw new Error(
+      `Failed to count courses by site name "${siteName}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+};
+
 /**
  * Gets courses by organization orgId
  * @param orgId Organization orgId
@@ -354,18 +416,18 @@ export async function getCourseWithRelations(
   }
 }
 
-export async function createCourse(newCourse: TNewCourse) {
+export async function createCourse(newCourse: TNewCourse, dbClient: DbOrTxClient = db) {
   try {
-    return await db.insert(schema.course).values(newCourse).returning();
+    return await dbClient.insert(schema.course).values(newCourse).returning();
   } catch (error) {
     console.error('createCourse error:', error);
     throw new Error(`Failed to create course: ${error instanceof Error ? error.message : 'Unknown error'}`);
   }
 }
 
-export async function createCourseNewsfeed(newsfeed: TNewCourseNewsfeed) {
+export async function createCourseNewsfeed(newsfeed: TNewCourseNewsfeed, dbClient: DbOrTxClient = db) {
   try {
-    return await db.insert(schema.courseNewsfeed).values(newsfeed).returning();
+    return await dbClient.insert(schema.courseNewsfeed).values(newsfeed).returning();
   } catch (error) {
     console.error('createCourseNewsfeed error:', error);
     throw new Error(`Failed to create course newsfeed: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -392,6 +454,18 @@ export async function updateCourse(courseId: string, data: Partial<TCourse>) {
   }
 }
 
+/**
+ * Bumps updatedAt on a course without changing any other fields.
+ * Call this whenever course content (lessons, exercises) changes.
+ */
+export async function touchCourseUpdatedAt(courseId: string) {
+  try {
+    await db.update(schema.course).set({ updatedAt: new Date().toISOString() }).where(eq(schema.course.id, courseId));
+  } catch (error) {
+    console.error('touchCourseUpdatedAt error:', error);
+  }
+}
+
 /**
  * Soft deletes a course by setting status to 'DELETED'
  * @param courseId Course ID
@@ -563,6 +637,20 @@ interface GetOrgCoursesOptions {
   profileId?: string;
   /** Optional course IDs filter */
   courseIds?: string[];
+  /** Optional search query against the course title */
+  search?: string;
+  /** Page number (1-indexed) */
+  page?: number;
+  /** Page size */
+  limit?: number;
+}
+
+export interface GetOrgCoursesResult {
+  items: TAdminCourse[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
 }
 
 /**
@@ -572,47 +660,101 @@ interface GetOrgCoursesOptions {
  * @param options.profileId Optional profile ID to filter by membership
  * @returns Array of courses with admin-level data
  */
-export const getOrgCourses = async ({ orgId, profileId, courseIds }: GetOrgCoursesOptions): Promise<TAdminCourse[]> => {
+export const getOrgCourses = async ({
+  orgId,
+  profileId,
+  courseIds,
+  search,
+  page = 1,
+  limit = 20
+}: GetOrgCoursesOptions): Promise<GetOrgCoursesResult> => {
   try {
     if (courseIds && courseIds.length === 0) {
-      return [];
+      return {
+        items: [],
+        total: 0,
+        page,
+        limit,
+        totalPages: 0
+      };
     }
 
+    const conditions = [eq(schema.group.organizationId, orgId), eq(schema.course.status, 'ACTIVE')];
+
+    if (courseIds && courseIds.length > 0) {
+      conditions.push(inArray(schema.course.id, courseIds));
+    }
+
+    if (search?.trim()) {
+      conditions.push(ilike(schema.course.title, `%${search.trim()}%`));
+    }
+
+    const totalQuery = profileId
+      ? db
+          .select({ count: count(schema.course.id) })
+          .from(schema.course)
+          .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+          .innerJoin(
+            schema.groupmember,
+            and(eq(schema.groupmember.groupId, schema.group.id), eq(schema.groupmember.profileId, profileId))
+          )
+          .where(and(...conditions))
+      : db
+          .select({ count: count(schema.course.id) })
+          .from(schema.course)
+          .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+          .where(and(...conditions));
+
+    const [countRow] = await totalQuery;
+    const total = Number(countRow?.count ?? 0);
+
     const baseQuery = db
       .select({
         course: schema.course,
         lessonCount: sql<number>`COUNT(DISTINCT ${schema.lesson.id})`.as('lesson_count'),
         studentCount: sql<number>`(SELECT COUNT(*)::bigint
           FROM ${schema.groupmember} as gm
-          WHERE gm.group_id = ${schema.course.groupId}
+          WHERE ${eq(sql`gm.group_id`, schema.course.groupId)}
           AND gm.role_id = ${ROLE.STUDENT}
-        )`.as('total_students')
+        )`.as('total_students'),
+        exerciseCount: sql<number>`(
+          SELECT COUNT(*)::bigint
+          FROM ${schema.exercise} as ex
+          LEFT JOIN ${schema.lesson} as el ON el.id = ex.lesson_id
+          WHERE ${or(eq(sql`ex.course_id`, schema.course.id), eq(sql`el.course_id`, schema.course.id))}
+        )`.as('exercise_count')
       })
       .from(schema.course)
       .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
       .leftJoin(schema.lesson, eq(schema.course.id, schema.lesson.courseId));
 
-    // Build conditions
-    const conditions = [eq(schema.group.organizationId, orgId), eq(schema.course.status, 'ACTIVE')];
-
-    if (courseIds && courseIds.length > 0) {
-      conditions.push(inArray(schema.course.id, courseIds));
-    }
-
-    // If profileId provided, join groupmember and filter by membership
-    const query = profileId
+    const itemsQuery = profileId
       ? baseQuery
-          .innerJoin(schema.groupmember, eq(schema.group.id, schema.groupmember.groupId))
-          .where(and(...conditions, eq(schema.groupmember.profileId, profileId)))
+          .innerJoin(
+            schema.groupmember,
+            and(eq(schema.groupmember.groupId, schema.group.id), eq(schema.groupmember.profileId, profileId))
+          )
+          .where(and(...conditions))
       : baseQuery.where(and(...conditions));
 
-    const result = await query.groupBy(schema.course.id).orderBy(desc(schema.course.createdAt));
+    const result = await itemsQuery
+      .groupBy(schema.course.id)
+      .orderBy(desc(schema.course.createdAt))
+      .limit(limit)
+      .offset((page - 1) * limit);
 
-    return result.map((row) => ({
-      ...row.course,
-      lessonCount: Number(row.lessonCount),
-      totalStudents: Number(row.studentCount)
-    }));
+    return {
+      items: result.map((row) => ({
+        ...row.course,
+        lessonCount: Number(row.lessonCount),
+        totalStudents: Number(row.studentCount),
+        exerciseCount: Number(row.exerciseCount)
+      })),
+      total,
+      page,
+      limit,
+      totalPages: total === 0 ? 0 : Math.ceil(total / limit)
+    };
   } catch (error) {
     console.error('getOrgCourses error:', error);
     throw new Error(`Failed to get org courses: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -638,6 +780,15 @@ export const getEnrolledCourses = async ({
   profileId
 }: GetEnrolledCoursesOptions): Promise<TStudentCourse[]> => {
   try {
+    // Single query covering both access paths:
+    //   1. Direct enrollment: student has a groupmember row for the course's group
+    //   2. Program membership: student is a program_member of a program that contains the course
+    //
+    // Profile filters are pushed into each LEFT JOIN's ON clause so the database
+    // can filter early. The WHERE then requires at least one path to have matched.
+    // GROUP BY course.id deduplicates courses accessible via both paths simultaneously.
+    // exercisesCompleted uses a profileId-based subquery so it doesn't depend on
+    // the outer groupmember join (which may be NULL for program-only access).
     const result = await db
       .select({
         course: schema.course,
@@ -646,7 +797,7 @@ export const getEnrolledCourses = async ({
           SELECT COUNT(*)::bigint
           FROM ${schema.lessonCompletion} as lc
           JOIN ${schema.lesson} as l ON l.id = lc.lesson_id
-          WHERE l.course_id = ${schema.course.id}
+          WHERE ${eq(sql`l.course_id`, schema.course.id)}
           AND lc.is_complete = true
           AND lc.profile_id = ${sql.raw(`'${profileId}'::uuid`)}
         )`.as('progress_rate'),
@@ -654,31 +805,49 @@ export const getEnrolledCourses = async ({
           SELECT COUNT(*)::bigint
           FROM ${schema.exercise} as ex
           LEFT JOIN ${schema.lesson} as el ON el.id = ex.lesson_id
-          WHERE ex.course_id = ${schema.course.id}
-          OR el.course_id = ${schema.course.id}
+          WHERE ${or(eq(sql`ex.course_id`, schema.course.id), eq(sql`el.course_id`, schema.course.id))}
         )`.as('exercise_count'),
         exercisesCompleted: sql<number>`(
           SELECT COUNT(DISTINCT s.exercise_id)::bigint
           FROM ${schema.submission} as s
           JOIN ${schema.exercise} as ex ON ex.id = s.exercise_id
           LEFT JOIN ${schema.lesson} as el ON el.id = ex.lesson_id
-          WHERE (ex.course_id = ${schema.course.id} OR el.course_id = ${schema.course.id})
-          AND s.submitted_by = ${schema.groupmember.id}
+          JOIN ${schema.groupmember} as gm ON gm.id = s.submitted_by
+          WHERE ${and(
+            or(eq(sql`ex.course_id`, schema.course.id), eq(sql`el.course_id`, schema.course.id)),
+            sql`gm.profile_id = ${sql.raw(`'${profileId}'::uuid`)}`
+          )}
         )`.as('exercises_completed')
       })
       .from(schema.course)
       .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
-      .innerJoin(schema.groupmember, eq(schema.group.id, schema.groupmember.groupId))
+      .leftJoin(
+        schema.groupmember,
+        and(eq(schema.group.id, schema.groupmember.groupId), eq(schema.groupmember.profileId, profileId))
+      )
+      .leftJoin(schema.programCourse, eq(schema.course.id, schema.programCourse.courseId))
+      .leftJoin(
+        schema.program,
+        and(
+          eq(schema.programCourse.programId, schema.program.id),
+          eq(schema.program.organizationId, orgId),
+          eq(schema.program.status, 'ACTIVE')
+        )
+      )
+      .leftJoin(
+        schema.programMember,
+        and(eq(schema.program.id, schema.programMember.programId), eq(schema.programMember.profileId, profileId))
+      )
       .leftJoin(schema.lesson, eq(schema.course.id, schema.lesson.courseId))
       .where(
         and(
           eq(schema.group.organizationId, orgId),
           eq(schema.course.status, 'ACTIVE'),
           eq(schema.course.isPublished, true),
-          eq(schema.groupmember.profileId, profileId)
+          or(isNotNull(schema.groupmember.id), isNotNull(schema.programMember.id))
         )
       )
-      .groupBy(schema.course.id, schema.groupmember.id)
+      .groupBy(schema.course.id)
       .orderBy(desc(schema.course.createdAt));
 
     return result.map((row) => ({
@@ -711,7 +880,13 @@ export const getExploreCourses = async ({ orgId, profileId }: GetExploreCoursesO
     const result = await db
       .select({
         course: schema.course,
-        lessonCount: sql<number>`COUNT(DISTINCT ${schema.lesson.id})`.as('total_lessons')
+        lessonCount: sql<number>`COUNT(DISTINCT ${schema.lesson.id})`.as('total_lessons'),
+        exerciseCount: sql<number>`(
+          SELECT COUNT(*)::bigint
+          FROM ${schema.exercise} as ex
+          LEFT JOIN ${schema.lesson} as el ON el.id = ex.lesson_id
+          WHERE ${or(eq(sql`ex.course_id`, schema.course.id), eq(sql`el.course_id`, schema.course.id))}
+        )`.as('exercise_count')
       })
       .from(schema.course)
       .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
@@ -733,7 +908,8 @@ export const getExploreCourses = async ({ orgId, profileId }: GetExploreCoursesO
 
     return result.map((row) => ({
       ...row.course,
-      lessonCount: Number(row.lessonCount)
+      lessonCount: Number(row.lessonCount),
+      exerciseCount: Number(row.exerciseCount)
     }));
   } catch (error) {
     console.error('getExploreCourses error:', error);
diff --git a/packages/db/src/queries/dash/dash.ts b/packages/db/src/queries/dash/dash.ts
index ca2efb28..a42a5e37 100644
--- a/packages/db/src/queries/dash/dash.ts
+++ b/packages/db/src/queries/dash/dash.ts
@@ -7,9 +7,9 @@ import {
   eq,
   group,
   groupmember,
+  isNotNull,
   lesson,
   lessonCompletion,
-  organization,
   profile,
   sql
 } from '@db/drizzle';
@@ -24,7 +24,11 @@ export function getCourseStats(orgId: string) {
       completedLessons: sql<number>`
         COUNT(DISTINCT ${lessonCompletion.id}) 
         FILTER (WHERE ${lessonCompletion.isComplete} = true)
-      `.as('completed_lessons')
+      `.as('completed_lessons'),
+      certificatesEarned: sql<number>`
+        COUNT(DISTINCT ${groupmember.id})
+        FILTER (WHERE ${groupmember.certificateEarnedAt} IS NOT NULL)
+      `.as('certificates_earned')
     })
     .from(course)
     .innerJoin(group, eq(group.id, course.groupId))
@@ -49,6 +53,12 @@ export function getCourseStats(orgId: string) {
           WHEN ${subquery.totalStudents} * ${subquery.totalLessons} = 0 THEN 0
           ELSE ROUND((${subquery.completedLessons}::numeric / (${subquery.totalStudents} * ${subquery.totalLessons})) * 100)::integer
         END
+      `,
+      certificationPercentage: sql<number>`
+        CASE
+          WHEN ${subquery.totalStudents} = 0 THEN 0
+          ELSE ROUND((${subquery.certificatesEarned}::numeric / ${subquery.totalStudents}) * 100)::integer
+        END
       `
     })
     .from(subquery)
@@ -76,6 +86,52 @@ export function getRecentEnrollments(orgId: string) {
     .limit(5);
 }
 
+/** Count of student enrollments that have earned a certificate (per org, active courses). */
+export function getTotalCertificatesIssued(orgId: string) {
+  return db
+    .select({
+      count: sql<number>`count(${groupmember.id})::int`
+    })
+    .from(groupmember)
+    .innerJoin(group, eq(groupmember.groupId, group.id))
+    .innerJoin(course, eq(course.groupId, group.id))
+    .where(
+      and(
+        eq(group.organizationId, orgId),
+        eq(course.status, 'ACTIVE'),
+        eq(groupmember.roleId, 3),
+        isNotNull(groupmember.certificateEarnedAt)
+      )
+    );
+}
+
+/** Most recent certificate earners for the org dashboard. */
+export function getRecentCertifications(orgId: string) {
+  return db
+    .select({
+      profileId: profile.id,
+      avatarUrl: profile.avatarUrl,
+      fullname: profile.fullname,
+      courseId: course.id,
+      courseTitle: course.title,
+      earnedAt: groupmember.certificateEarnedAt
+    })
+    .from(groupmember)
+    .innerJoin(group, eq(groupmember.groupId, group.id))
+    .innerJoin(course, eq(course.groupId, group.id))
+    .innerJoin(profile, eq(profile.id, groupmember.profileId))
+    .where(
+      and(
+        eq(group.organizationId, orgId),
+        eq(course.status, 'ACTIVE'),
+        eq(groupmember.roleId, 3),
+        isNotNull(groupmember.certificateEarnedAt)
+      )
+    )
+    .orderBy(desc(groupmember.certificateEarnedAt))
+    .limit(5);
+}
+
 export function getDashOrgStats(orgId: string) {
   return db.select().from(dashOrgStats).where(eq(dashOrgStats.orgId, orgId));
 }
diff --git a/packages/db/src/queries/dash/types.ts b/packages/db/src/queries/dash/types.ts
index 9fb11197..471de22b 100644
--- a/packages/db/src/queries/dash/types.ts
+++ b/packages/db/src/queries/dash/types.ts
@@ -1,5 +1,5 @@
 export interface OrganisationAnalytics {
-  revenue: number;
+  totalCertificates: number;
   numberOfCourses: number;
   totalStudents: number;
   topCourses: {
@@ -7,8 +7,9 @@ export interface OrganisationAnalytics {
     title: string;
     enrollments: number;
     completion: number;
+    certification: number;
   }[];
-  enrollments: {
+  recentCertifications: {
     id: string;
     avatarUrl: string;
     name: string;
diff --git a/packages/db/src/queries/exercise/exercise.ts b/packages/db/src/queries/exercise/exercise.ts
index 62d967c9..6417b5c3 100644
--- a/packages/db/src/queries/exercise/exercise.ts
+++ b/packages/db/src/queries/exercise/exercise.ts
@@ -210,6 +210,9 @@ export async function deleteExercise(exerciseId: string, dbClient: DbOrTxClient
 export async function createQuestions(values: TNewQuestion[], dbClient: DbOrTxClient = db) {
   if (values.length === 0) return [];
   try {
+    // Keep the identity sequence aligned before bulk inserts so restored data
+    // or manual imports cannot reuse an existing question id.
+    await syncQuestionIdSequence(dbClient);
     return dbClient.insert(schema.question).values(values).returning();
   } catch (error) {
     const err = error as Error & { code?: string; cause?: unknown };
@@ -268,6 +271,9 @@ export async function deleteQuestion(questionId: number, dbClient: DbOrTxClient
 export async function createOptions(values: TNewOption[], dbClient: DbOrTxClient = db) {
   if (values.length === 0) return [];
   try {
+    // Keep the identity sequence aligned before bulk inserts so restored data
+    // or manual imports cannot reuse an existing option id.
+    await syncOptionIdSequence(dbClient);
     return dbClient.insert(schema.option).values(values).returning();
   } catch (error) {
     console.error('createOptions error:', error);
@@ -524,3 +530,19 @@ export async function syncOptionIdSequence(dbClient: DbOrTxClient = db): Promise
     `
   );
 }
+
+/**
+ * Syncs the question table's identity sequence to the current max(id).
+ * Call before inserting questions to avoid duplicate key on question_pkey when the sequence is behind.
+ */
+export async function syncQuestionIdSequence(dbClient: DbOrTxClient = db): Promise<void> {
+  await dbClient.execute(
+    sql`
+      SELECT setval(
+        pg_get_serial_sequence('question', 'id'),
+        COALESCE((SELECT MAX(id) FROM question), 1),
+        EXISTS(SELECT 1 FROM question)
+      )
+    `
+  );
+}
diff --git a/packages/db/src/queries/group/group.ts b/packages/db/src/queries/group/group.ts
index 370f7851..a3cc7a28 100644
--- a/packages/db/src/queries/group/group.ts
+++ b/packages/db/src/queries/group/group.ts
@@ -1,23 +1,23 @@
 import * as schema from '@db/schema';
 
 import { TNewGroup, TNewGroupmember } from '@db/types';
-import { and, eq, inArray, isNotNull, or } from 'drizzle-orm';
+import { and, asc, eq, inArray, isNotNull, or } from 'drizzle-orm';
 
 import { ROLE } from '@cio/utils/constants';
-import { db } from '@db/drizzle';
+import { db, type DbOrTxClient } from '@db/drizzle';
 
-export async function createGroup(values: TNewGroup) {
+export async function createGroup(values: TNewGroup, dbClient: DbOrTxClient = db) {
   try {
-    return db.insert(schema.group).values(values).returning();
+    return dbClient.insert(schema.group).values(values).returning();
   } catch (error) {
     console.error('createGroup error:', error);
     throw new Error(`Failed to create group: ${error instanceof Error ? error.message : 'Unknown error'}`);
   }
 }
 
-export async function addGroupMember(values: TNewGroupmember) {
+export async function addGroupMember(values: TNewGroupmember, dbClient: DbOrTxClient = db) {
   try {
-    return db.insert(schema.groupmember).values(values).returning();
+    return dbClient.insert(schema.groupmember).values(values).returning();
   } catch (error) {
     console.error('addGroupMember error:', error);
     throw new Error(`Failed to add group member: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -223,6 +223,59 @@ export const isCourseTeamMemberOrOrgAdmin = async (courseId: string, profileId:
   return result.length > 0;
 };
 
+/**
+ * Resolves program-based access to a course.
+ * Returns the course group/org context plus the matched program member role.
+ */
+export async function getCourseProgramAccess(
+  courseId: string,
+  profileId: string
+): Promise<{
+  courseId: string;
+  courseGroupId: string;
+  organizationId: string | null;
+  profileEmail: string | null;
+  roleId: number;
+} | null> {
+  try {
+    const result = await db
+      .select({
+        courseId: schema.course.id,
+        courseGroupId: schema.group.id,
+        organizationId: schema.group.organizationId,
+        profileEmail: schema.profile.email,
+        roleId: schema.programMember.roleId
+      })
+      .from(schema.course)
+      .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+      .innerJoin(schema.programCourse, eq(schema.course.id, schema.programCourse.courseId))
+      .innerJoin(
+        schema.program,
+        and(eq(schema.program.id, schema.programCourse.programId), eq(schema.program.status, 'ACTIVE'))
+      )
+      .innerJoin(
+        schema.programMember,
+        and(eq(schema.programMember.programId, schema.program.id), eq(schema.programMember.profileId, profileId))
+      )
+      .leftJoin(schema.profile, eq(schema.programMember.profileId, schema.profile.id))
+      .where(eq(schema.course.id, courseId))
+      .orderBy(asc(schema.programMember.roleId))
+      .limit(1);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return {
+      ...result[0],
+      roleId: Number(result[0].roleId)
+    };
+  } catch (error) {
+    console.error('getCourseProgramAccess error:', error);
+    throw new Error(`Failed to get course program access: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
 /**
  * Gets the group member ID for a user in a course
  * @param courseId Course ID
diff --git a/packages/db/src/queries/index.ts b/packages/db/src/queries/index.ts
index de9d5f7d..9a5e32a7 100644
--- a/packages/db/src/queries/index.ts
+++ b/packages/db/src/queries/index.ts
@@ -12,3 +12,4 @@ export * from './newsfeed';
 export * from './submission';
 export * from './tag';
 export * from './course-import';
+export * from './program';
diff --git a/packages/db/src/queries/lesson/language.ts b/packages/db/src/queries/lesson/language.ts
index 5796ba0f..1a026717 100644
--- a/packages/db/src/queries/lesson/language.ts
+++ b/packages/db/src/queries/lesson/language.ts
@@ -44,6 +44,15 @@ export async function updateLessonLanguage(
   return language;
 }
 
+export async function deleteLessonLanguage(lessonId: string, locale: TLocale): Promise<TLessonLanguage | null> {
+  const [language] = await db
+    .delete(schema.lessonLanguage)
+    .where(and(eq(schema.lessonLanguage.lessonId, lessonId), eq(schema.lessonLanguage.locale, locale)))
+    .returning();
+
+  return language || null;
+}
+
 export async function upsertLessonLanguage(data: TNewLessonLanguage): Promise<TLessonLanguage> {
   // Check if exists
   const existing = await getLessonLanguageByLessonIdAndLocale(data.lessonId!, data.locale || 'en');
diff --git a/packages/db/src/queries/newsfeed/newsfeed.ts b/packages/db/src/queries/newsfeed/newsfeed.ts
index 31a57db2..f24b619a 100644
--- a/packages/db/src/queries/newsfeed/newsfeed.ts
+++ b/packages/db/src/queries/newsfeed/newsfeed.ts
@@ -482,7 +482,7 @@ function getCommentCount() {
           COALESCE(
             (SELECT COUNT(*)::int 
              FROM ${schema.courseNewsfeedComment} 
-             WHERE ${schema.courseNewsfeedComment.courseNewsfeedId} = ${schema.courseNewsfeed.id}),
+             WHERE ${eq(schema.courseNewsfeedComment.courseNewsfeedId, schema.courseNewsfeed.id)}),
             0
           )
         `.as('commentCount');
diff --git a/packages/db/src/queries/organization/invite.ts b/packages/db/src/queries/organization/invite.ts
index ceebad08..e061f7bd 100644
--- a/packages/db/src/queries/organization/invite.ts
+++ b/packages/db/src/queries/organization/invite.ts
@@ -272,6 +272,59 @@ export async function getLatestOrgInvitesByEmails(
   }
 }
 
+/**
+ * Returns the latest active (non-revoked, non-accepted, non-expired) org invite for a given org+email.
+ * Used to surface a pending invite to a logged-in student on the LMS dashboard.
+ */
+export async function getActivePendingOrgInviteForEmail(
+  organizationId: string,
+  email: string
+): Promise<TOrganizationInviteTokenData | null> {
+  const normalized = email.toLowerCase().trim();
+  if (!normalized) {
+    return null;
+  }
+
+  try {
+    const [row] = await db
+      .select({
+        invite: schema.organizationInvite,
+        organization: {
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName
+        }
+      })
+      .from(schema.organizationInvite)
+      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
+      .where(
+        and(
+          eq(schema.organizationInvite.organizationId, organizationId),
+          eq(schema.organizationInvite.email, normalized),
+          eq(schema.organizationInvite.isRevoked, false),
+          isNull(schema.organizationInvite.acceptedAt),
+          gt(schema.organizationInvite.expiresAt, sql`NOW()`)
+        )
+      )
+      .orderBy(desc(schema.organizationInvite.createdAt))
+      .limit(1);
+
+    if (!row) {
+      return null;
+    }
+
+    return {
+      ...row,
+      organization: { ...row.organization, siteName: row.organization.siteName ?? '' }
+    };
+  } catch (error) {
+    console.error('getActivePendingOrgInviteForEmail error:', error);
+    throw new Error(
+      `Failed to get active pending org invite: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
 /**
  * Latest organization_invite row for an org + email (by created_at), for metadata when resending.
  */
diff --git a/packages/db/src/queries/organization/organization.ts b/packages/db/src/queries/organization/organization.ts
index 3fe7f11a..3763fffc 100644
--- a/packages/db/src/queries/organization/organization.ts
+++ b/packages/db/src/queries/organization/organization.ts
@@ -268,6 +268,67 @@ export const deleteOrganizationAudienceMember = async (orgId: string, memberId:
   return deleted || null;
 };
 
+export const getOrganizationAudienceMember = async (orgId: string, memberId: number) => {
+  const [row] = await db
+    .select({
+      memberId: schema.organizationmember.id,
+      profileId: schema.organizationmember.profileId,
+      fullname: schema.profile.fullname,
+      email: sql<string>`coalesce(${schema.profile.email}, ${schema.organizationmember.email})`.as('email'),
+      avatarUrl: schema.profile.avatarUrl,
+      profileCreatedAt: schema.profile.createdAt,
+      memberCreatedAt: schema.organizationmember.createdAt
+    })
+    .from(schema.organizationmember)
+    .leftJoin(schema.profile, eq(schema.organizationmember.profileId, schema.profile.id))
+    .where(
+      and(
+        eq(schema.organizationmember.organizationId, orgId),
+        eq(schema.organizationmember.id, memberId),
+        eq(schema.organizationmember.roleId, ROLE.STUDENT)
+      )
+    )
+    .limit(1);
+
+  if (!row) {
+    return null;
+  }
+
+  const email = row.email?.trim() ?? '';
+  const name = row.fullname?.trim() || (email.includes('@') ? email.split('@')[0] : email) || '';
+  const createdAtRaw = row.profileId ? row.profileCreatedAt : row.memberCreatedAt;
+  const createdAt = createdAtRaw ? new Date(createdAtRaw).toDateString() : '';
+
+  return {
+    id: row.memberId,
+    profileId: row.profileId ?? null,
+    name,
+    email,
+    avatarUrl: row.avatarUrl || '',
+    createdAt
+  };
+};
+
+export const updateOrganizationAudienceMember = async (
+  orgId: string,
+  memberId: number,
+  data: Partial<Pick<TNewOrganizationmember, 'email' | 'verified'>>
+) => {
+  const [updated] = await db
+    .update(schema.organizationmember)
+    .set(data)
+    .where(
+      and(
+        eq(schema.organizationmember.organizationId, orgId),
+        eq(schema.organizationmember.id, memberId),
+        eq(schema.organizationmember.roleId, ROLE.STUDENT)
+      )
+    )
+    .returning();
+
+  return updated || null;
+};
+
 /**
  * Checks if a user is an admin of an organization
  * @param orgId Organization ID
diff --git a/packages/db/src/queries/program/index.ts b/packages/db/src/queries/program/index.ts
new file mode 100644
index 00000000..2851943d
--- /dev/null
+++ b/packages/db/src/queries/program/index.ts
@@ -0,0 +1 @@
+export * from './program';
diff --git a/packages/db/src/queries/program/program.ts b/packages/db/src/queries/program/program.ts
new file mode 100644
index 00000000..32a26de6
--- /dev/null
+++ b/packages/db/src/queries/program/program.ts
@@ -0,0 +1,699 @@
+import * as schema from '@db/schema';
+
+import { and, asc, desc, eq, inArray, sql } from 'drizzle-orm';
+
+import { ROLE } from '@cio/utils/constants';
+import { db } from '@db/drizzle';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type TProgram = typeof schema.program.$inferSelect;
+export type TNewProgram = typeof schema.program.$inferInsert;
+export type TProgramMember = typeof schema.programMember.$inferSelect;
+export type TNewProgramMember = typeof schema.programMember.$inferInsert;
+export type TProgramCourse = typeof schema.programCourse.$inferSelect;
+export type TProgramNewsfeed = typeof schema.programNewsfeed.$inferSelect;
+export type TNewProgramNewsfeed = typeof schema.programNewsfeed.$inferInsert;
+export type TProgramNewsfeedComment = typeof schema.programNewsfeedComment.$inferSelect;
+export type TNewProgramNewsfeedComment = typeof schema.programNewsfeedComment.$inferInsert;
+
+// ─── Program CRUD ────────────────────────────────────────────────────────────
+
+export async function createProgram(data: TNewProgram): Promise<TProgram> {
+  try {
+    const [program] = await db.insert(schema.program).values(data).returning();
+    if (!program) throw new Error('Failed to create program');
+    return program;
+  } catch (error) {
+    console.error('createProgram error:', error);
+    throw new Error(`Failed to create program: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+/** Inserts the program and adds `creatorProfileId` as a program team member (tutor) in one transaction. */
+export async function createProgramWithCreatorMembership(
+  programData: TNewProgram,
+  creatorProfileId: string
+): Promise<TProgram> {
+  try {
+    return await db.transaction(async (tx) => {
+      const [program] = await tx.insert(schema.program).values(programData).returning();
+      if (!program) {
+        throw new Error('Failed to create program');
+      }
+
+      await tx.insert(schema.programMember).values({
+        programId: program.id,
+        profileId: creatorProfileId,
+        roleId: ROLE.TUTOR
+      });
+
+      return program;
+    });
+  } catch (error) {
+    console.error('createProgramWithCreatorMembership error:', error);
+    throw new Error(`Failed to create program: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function getProgramById(programId: string): Promise<TProgram | null> {
+  try {
+    const [program] = await db.select().from(schema.program).where(eq(schema.program.id, programId)).limit(1);
+    return program || null;
+  } catch (error) {
+    console.error('getProgramById error:', error);
+    throw new Error(
+      `Failed to get program "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getProgramsByOrg(
+  organizationId: string,
+  programIds?: string[]
+): Promise<Array<TProgram & { courseCount: number; studentCount: number }>> {
+  try {
+    const whereCondition =
+      programIds && programIds.length > 0
+        ? and(eq(schema.program.organizationId, organizationId), inArray(schema.program.id, programIds))
+        : eq(schema.program.organizationId, organizationId);
+
+    const result = await db
+      .select({
+        program: schema.program,
+        courseCount: sql<number>`
+          COALESCE(
+            (SELECT COUNT(*)::int
+             FROM ${schema.programCourse}
+             WHERE ${eq(schema.programCourse.programId, schema.program.id)}),
+            0
+          )
+        `.as('courseCount'),
+        studentCount: sql<number>`
+          COALESCE(
+            (SELECT COUNT(*)::int
+             FROM ${schema.programMember}
+             WHERE ${and(
+               eq(schema.programMember.programId, schema.program.id),
+               eq(schema.programMember.roleId, ROLE.STUDENT)
+             )}),
+            0
+          )
+        `.as('studentCount')
+      })
+      .from(schema.program)
+      .where(whereCondition)
+      .orderBy(desc(schema.program.createdAt));
+
+    return result.map((row) => ({
+      ...row.program,
+      courseCount: Number(row.courseCount || 0),
+      studentCount: Number(row.studentCount || 0)
+    }));
+  } catch (error) {
+    console.error('getProgramsByOrg error:', error);
+    throw new Error(
+      `Failed to get programs for org "${organizationId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getExistingProgramMembers(
+  pairs: Array<{ programId: string; profileId: string }>
+): Promise<Set<string>> {
+  if (pairs.length === 0) {
+    return new Set();
+  }
+
+  try {
+    const programIds = [...new Set(pairs.map((pair) => pair.programId))];
+    const profileIds = [...new Set(pairs.map((pair) => pair.profileId))];
+
+    const rows = await db
+      .select({ programId: schema.programMember.programId, profileId: schema.programMember.profileId })
+      .from(schema.programMember)
+      .where(
+        and(inArray(schema.programMember.programId, programIds), inArray(schema.programMember.profileId, profileIds))
+      );
+
+    return new Set(
+      rows
+        .filter((row): row is { programId: string; profileId: string } => Boolean(row.programId && row.profileId))
+        .map((row) => `${row.programId}:${row.profileId}`)
+    );
+  } catch (error) {
+    console.error('getExistingProgramMembers error:', error);
+    throw new Error(
+      `Failed to check existing program members: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function updateProgram(programId: string, data: Partial<TNewProgram>): Promise<TProgram | null> {
+  try {
+    const [updated] = await db
+      .update(schema.program)
+      .set({ ...data, updatedAt: sql`now()` })
+      .where(eq(schema.program.id, programId))
+      .returning();
+    return updated || null;
+  } catch (error) {
+    console.error('updateProgram error:', error);
+    throw new Error(
+      `Failed to update program "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function deleteProgram(programId: string): Promise<TProgram | null> {
+  try {
+    const [deleted] = await db.delete(schema.program).where(eq(schema.program.id, programId)).returning();
+    return deleted || null;
+  } catch (error) {
+    console.error('deleteProgram error:', error);
+    throw new Error(
+      `Failed to delete program "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+// ─── Program Membership ──────────────────────────────────────────────────────
+
+export async function getProgramMemberByProfileId(
+  programId: string,
+  profileId: string
+): Promise<TProgramMember | null> {
+  try {
+    const [member] = await db
+      .select()
+      .from(schema.programMember)
+      .where(and(eq(schema.programMember.programId, programId), eq(schema.programMember.profileId, profileId)))
+      .limit(1);
+    return member || null;
+  } catch (error) {
+    console.error('getProgramMemberByProfileId error:', error);
+    throw new Error(`Failed to get program member: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function isProgramMember(programId: string, profileId: string): Promise<boolean> {
+  try {
+    const member = await getProgramMemberByProfileId(programId, profileId);
+    return member !== null;
+  } catch (error) {
+    console.error('isProgramMember error:', error);
+    throw new Error(`Failed to check program membership: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function getProgramMemberRole(programId: string, profileId: string): Promise<number | null> {
+  try {
+    const member = await getProgramMemberByProfileId(programId, profileId);
+    return member?.roleId || null;
+  } catch (error) {
+    console.error('getProgramMemberRole error:', error);
+    throw new Error(`Failed to get program member role: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function isOrgAdminByProgramId(programId: string, profileId: string): Promise<boolean> {
+  try {
+    const result = await db
+      .select({ orgMemberId: schema.organizationmember.id })
+      .from(schema.program)
+      .innerJoin(
+        schema.organizationmember,
+        and(
+          eq(schema.organizationmember.organizationId, schema.program.organizationId),
+          eq(schema.organizationmember.profileId, profileId),
+          eq(schema.organizationmember.roleId, ROLE.ADMIN)
+        )
+      )
+      .where(eq(schema.program.id, programId))
+      .limit(1);
+    return result.length > 0;
+  } catch (error) {
+    console.error('isOrgAdminByProgramId error:', error);
+    throw new Error(`Failed to check org admin status: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function addProgramMember(data: TNewProgramMember): Promise<TProgramMember> {
+  try {
+    const [member] = await db.insert(schema.programMember).values(data).returning();
+    if (!member) throw new Error('Failed to add program member');
+    return member;
+  } catch (error) {
+    console.error('addProgramMember error:', error);
+    throw new Error(`Failed to add program member: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function removeProgramMember(memberId: string): Promise<TProgramMember | null> {
+  try {
+    const [deleted] = await db.delete(schema.programMember).where(eq(schema.programMember.id, memberId)).returning();
+    return deleted || null;
+  } catch (error) {
+    console.error('removeProgramMember error:', error);
+    throw new Error(
+      `Failed to remove program member "${memberId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function updateProgramMember(
+  memberId: string,
+  data: Partial<TNewProgramMember>
+): Promise<TProgramMember | null> {
+  try {
+    const [updated] = await db
+      .update(schema.programMember)
+      .set(data)
+      .where(eq(schema.programMember.id, memberId))
+      .returning();
+    return updated || null;
+  } catch (error) {
+    console.error('updateProgramMember error:', error);
+    throw new Error(
+      `Failed to update program member "${memberId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getProgramMembers(programId: string): Promise<
+  Array<
+    TProgramMember & {
+      profile: {
+        id: string;
+        fullname: string | null;
+        username: string | null;
+        avatarUrl: string | null;
+        email: string | null;
+      } | null;
+    }
+  >
+> {
+  try {
+    const result = await db
+      .select({
+        member: schema.programMember,
+        profile: {
+          id: schema.profile.id,
+          fullname: schema.profile.fullname,
+          username: schema.profile.username,
+          avatarUrl: schema.profile.avatarUrl,
+          email: schema.profile.email
+        }
+      })
+      .from(schema.programMember)
+      .leftJoin(schema.profile, eq(schema.programMember.profileId, schema.profile.id))
+      .where(eq(schema.programMember.programId, programId))
+      .orderBy(asc(schema.programMember.createdAt));
+
+    return result.map((row) => ({
+      ...row.member,
+      profile: row.profile?.id ? row.profile : null
+    }));
+  } catch (error) {
+    console.error('getProgramMembers error:', error);
+    throw new Error(
+      `Failed to get program members for "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getEnrolledProgramsByProfile(
+  profileId: string
+): Promise<Array<TProgram & { roleId: number; courseCount: number; studentCount: number }>> {
+  try {
+    const result = await db
+      .select({
+        program: schema.program,
+        roleId: schema.programMember.roleId,
+        courseCount: sql<number>`
+          COALESCE(
+            (SELECT COUNT(*)::int
+             FROM ${schema.programCourse}
+             INNER JOIN ${schema.course}
+               ON ${schema.programCourse.courseId} = ${schema.course.id}
+             WHERE ${schema.programCourse.programId} = ${schema.program.id}
+               AND (
+                 ${schema.programMember.roleId} <> ${ROLE.STUDENT}
+                 OR ${schema.course.isPublished} = true
+               )),
+            0
+          )
+        `.as('courseCount'),
+        studentCount: sql<number>`
+          COALESCE(
+            (SELECT COUNT(*)::int
+             FROM ${schema.programMember} AS student_member
+             WHERE student_member.program_id = ${schema.program.id}
+               AND student_member.role_id = ${ROLE.STUDENT}),
+            0
+          )
+        `.as('studentCount')
+      })
+      .from(schema.programMember)
+      .innerJoin(schema.program, eq(schema.programMember.programId, schema.program.id))
+      .where(eq(schema.programMember.profileId, profileId))
+      .orderBy(desc(schema.program.createdAt));
+
+    return result.map((row) => ({
+      ...row.program,
+      roleId: row.roleId,
+      courseCount: Number(row.courseCount || 0),
+      studentCount: Number(row.studentCount || 0)
+    }));
+  } catch (error) {
+    console.error('getEnrolledProgramsByProfile error:', error);
+    throw new Error(
+      `Failed to get enrolled programs for profile "${profileId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+// ─── Program Courses ─────────────────────────────────────────────────────────
+
+export async function addCourseToProgram(programId: string, courseId: string): Promise<TProgramCourse> {
+  try {
+    const [row] = await db.insert(schema.programCourse).values({ programId, courseId }).returning();
+    if (!row) throw new Error('Failed to add course to program');
+    return row;
+  } catch (error) {
+    console.error('addCourseToProgram error:', error);
+    throw new Error(`Failed to add course to program: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function removeCourseFromProgram(programId: string, courseId: string): Promise<TProgramCourse | null> {
+  try {
+    const [deleted] = await db
+      .delete(schema.programCourse)
+      .where(and(eq(schema.programCourse.programId, programId), eq(schema.programCourse.courseId, courseId)))
+      .returning();
+    return deleted || null;
+  } catch (error) {
+    console.error('removeCourseFromProgram error:', error);
+    throw new Error(
+      `Failed to remove course from program: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getCoursesByProgram(
+  programId: string,
+  onlyPublished = false
+): Promise<
+  Array<
+    TProgramCourse & {
+      course: {
+        id: string;
+        title: string | null;
+        description: string | null;
+        coverImage: string | null;
+        slug: string | null;
+        status: string | null;
+      };
+    }
+  >
+> {
+  try {
+    const whereCondition = onlyPublished
+      ? and(eq(schema.programCourse.programId, programId), eq(schema.course.isPublished, true))
+      : eq(schema.programCourse.programId, programId);
+
+    const result = await db
+      .select({
+        programCourse: schema.programCourse,
+        course: {
+          id: schema.course.id,
+          title: schema.course.title,
+          description: schema.course.description,
+          coverImage: schema.course.logo,
+          slug: schema.course.slug,
+          status: schema.course.status,
+          isPublished: schema.course.isPublished
+        }
+      })
+      .from(schema.programCourse)
+      .innerJoin(schema.course, eq(schema.programCourse.courseId, schema.course.id))
+      .where(whereCondition)
+      .orderBy(asc(schema.programCourse.addedAt));
+
+    return result.map((row) => ({ ...row.programCourse, course: row.course }));
+  } catch (error) {
+    console.error('getCoursesByProgram error:', error);
+    throw new Error(
+      `Failed to get courses for program "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function isProgramCourse(programId: string, courseId: string): Promise<boolean> {
+  try {
+    const [row] = await db
+      .select({ id: schema.programCourse.id })
+      .from(schema.programCourse)
+      .where(and(eq(schema.programCourse.programId, programId), eq(schema.programCourse.courseId, courseId)))
+      .limit(1);
+    return !!row;
+  } catch (error) {
+    console.error('isProgramCourse error:', error);
+    throw new Error(`Failed to check program course: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+// ─── Program Newsfeed ────────────────────────────────────────────────────────
+
+export async function getProgramNewsfeed(
+  programId: string,
+  options: { cursor?: string; limit: number }
+): Promise<{
+  items: Array<
+    TProgramNewsfeed & {
+      authorProfileId: string | null;
+      authorFullname: string | null;
+      authorUsername: string | null;
+      authorAvatarUrl: string | null;
+      commentCount: number;
+    }
+  >;
+  totalCount: number;
+  hasMore: boolean;
+  nextCursor: string | null;
+}> {
+  try {
+    const { cursor, limit } = options;
+
+    const whereConditions = [eq(schema.programNewsfeed.programId, programId)];
+    if (cursor) {
+      whereConditions.push(sql`${schema.programNewsfeed.createdAt} < ${cursor}`);
+    }
+
+    const totalCountResult = await db
+      .select({ count: sql<number>`count(*)`.as('count') })
+      .from(schema.programNewsfeed)
+      .where(eq(schema.programNewsfeed.programId, programId));
+    const totalCount = Number(totalCountResult[0]?.count || 0);
+
+    const feeds = await db
+      .select({
+        feed: schema.programNewsfeed,
+        profile: schema.profile,
+        commentCount: sql<number>`
+          COALESCE(
+            (SELECT COUNT(*)::int
+             FROM ${schema.programNewsfeedComment}
+             WHERE ${eq(schema.programNewsfeedComment.programNewsfeedId, schema.programNewsfeed.id)}),
+            0
+          )
+        `.as('commentCount')
+      })
+      .from(schema.programNewsfeed)
+      .leftJoin(schema.programMember, eq(schema.programNewsfeed.authorId, schema.programMember.id))
+      .leftJoin(schema.profile, eq(schema.programMember.profileId, schema.profile.id))
+      .where(and(...whereConditions))
+      .orderBy(desc(schema.programNewsfeed.createdAt))
+      .limit(limit + 1);
+
+    const hasMore = feeds.length > limit;
+    const items = feeds.slice(0, limit);
+    const nextCursor = hasMore && items.length > 0 ? items[items.length - 1].feed.createdAt : null;
+
+    return {
+      items: items.map((row) => ({
+        ...row.feed,
+        authorProfileId: row.profile?.id || null,
+        authorFullname: row.profile?.fullname || null,
+        authorUsername: row.profile?.username || null,
+        authorAvatarUrl: row.profile?.avatarUrl || null,
+        commentCount: Number(row.commentCount || 0)
+      })),
+      totalCount,
+      hasMore,
+      nextCursor
+    };
+  } catch (error) {
+    console.error('getProgramNewsfeed error:', error);
+    throw new Error(
+      `Failed to get program newsfeed "${programId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getProgramNewsfeedById(feedId: string): Promise<TProgramNewsfeed | null> {
+  try {
+    const [feed] = await db.select().from(schema.programNewsfeed).where(eq(schema.programNewsfeed.id, feedId)).limit(1);
+    return feed || null;
+  } catch (error) {
+    console.error('getProgramNewsfeedById error:', error);
+    throw new Error(
+      `Failed to get program newsfeed item "${feedId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function createProgramNewsfeed(data: TNewProgramNewsfeed): Promise<TProgramNewsfeed> {
+  try {
+    const [feed] = await db.insert(schema.programNewsfeed).values(data).returning();
+    if (!feed) throw new Error('Failed to create program newsfeed');
+    return feed;
+  } catch (error) {
+    console.error('createProgramNewsfeed error:', error);
+    throw new Error(`Failed to create program newsfeed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function updateProgramNewsfeed(
+  feedId: string,
+  data: Partial<TNewProgramNewsfeed>
+): Promise<TProgramNewsfeed | null> {
+  try {
+    const [updated] = await db
+      .update(schema.programNewsfeed)
+      .set(data)
+      .where(eq(schema.programNewsfeed.id, feedId))
+      .returning();
+    return updated || null;
+  } catch (error) {
+    console.error('updateProgramNewsfeed error:', error);
+    throw new Error(
+      `Failed to update program newsfeed "${feedId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function updateProgramNewsfeedReaction(
+  feedId: string,
+  reaction: { clap: string[]; smile: string[]; thumbsup: string[]; thumbsdown: string[] }
+): Promise<TProgramNewsfeed | null> {
+  try {
+    const [updated] = await db
+      .update(schema.programNewsfeed)
+      .set({ reaction })
+      .where(eq(schema.programNewsfeed.id, feedId))
+      .returning();
+    return updated || null;
+  } catch (error) {
+    console.error('updateProgramNewsfeedReaction error:', error);
+    throw new Error(
+      `Failed to update program newsfeed reaction "${feedId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function deleteProgramNewsfeed(feedId: string): Promise<TProgramNewsfeed | null> {
+  try {
+    const [deleted] = await db.delete(schema.programNewsfeed).where(eq(schema.programNewsfeed.id, feedId)).returning();
+    return deleted || null;
+  } catch (error) {
+    console.error('deleteProgramNewsfeed error:', error);
+    throw new Error(
+      `Failed to delete program newsfeed "${feedId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+// ─── Program Newsfeed Comments ────────────────────────────────────────────────
+
+export async function getProgramNewsfeedComments(feedId: string): Promise<
+  Array<
+    TProgramNewsfeedComment & {
+      authorProfileId: string | null;
+      authorFullname: string | null;
+      authorUsername: string | null;
+      authorAvatarUrl: string | null;
+    }
+  >
+> {
+  try {
+    const result = await db
+      .select({
+        comment: schema.programNewsfeedComment,
+        profile: schema.profile
+      })
+      .from(schema.programNewsfeedComment)
+      .leftJoin(schema.programMember, eq(schema.programNewsfeedComment.authorId, schema.programMember.id))
+      .leftJoin(schema.profile, eq(schema.programMember.profileId, schema.profile.id))
+      .where(eq(schema.programNewsfeedComment.programNewsfeedId, feedId))
+      .orderBy(asc(schema.programNewsfeedComment.createdAt));
+
+    return result.map((row) => ({
+      ...row.comment,
+      authorProfileId: row.profile?.id || null,
+      authorFullname: row.profile?.fullname || null,
+      authorUsername: row.profile?.username || null,
+      authorAvatarUrl: row.profile?.avatarUrl || null
+    }));
+  } catch (error) {
+    console.error('getProgramNewsfeedComments error:', error);
+    throw new Error(
+      `Failed to get program newsfeed comments for "${feedId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function createProgramNewsfeedComment(data: TNewProgramNewsfeedComment): Promise<TProgramNewsfeedComment> {
+  try {
+    const [comment] = await db.insert(schema.programNewsfeedComment).values(data).returning();
+    if (!comment) throw new Error('Failed to create program newsfeed comment');
+    return comment;
+  } catch (error) {
+    console.error('createProgramNewsfeedComment error:', error);
+    throw new Error(
+      `Failed to create program newsfeed comment: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function deleteProgramNewsfeedComment(commentId: number): Promise<TProgramNewsfeedComment | null> {
+  try {
+    const [deleted] = await db
+      .delete(schema.programNewsfeedComment)
+      .where(eq(schema.programNewsfeedComment.id, commentId))
+      .returning();
+    return deleted || null;
+  } catch (error) {
+    console.error('deleteProgramNewsfeedComment error:', error);
+    throw new Error(
+      `Failed to delete program newsfeed comment "${commentId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function getProgramNewsfeedCommentById(commentId: number): Promise<TProgramNewsfeedComment | null> {
+  try {
+    const [comment] = await db
+      .select()
+      .from(schema.programNewsfeedComment)
+      .where(eq(schema.programNewsfeedComment.id, commentId))
+      .limit(1);
+    return comment || null;
+  } catch (error) {
+    console.error('getProgramNewsfeedCommentById error:', error);
+    throw new Error(
+      `Failed to get program newsfeed comment "${commentId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
diff --git a/packages/db/src/schema.ts b/packages/db/src/schema.ts
index c196220b..9fd1025c 100644
--- a/packages/db/src/schema.ts
+++ b/packages/db/src/schema.ts
@@ -701,7 +701,7 @@ export const lesson = pgTable(
     isUnlocked: boolean('is_unlocked').default(false),
     videos: jsonb().default([]).$type<
       {
-        type: 'youtube' | 'generic' | 'upload';
+        type: 'youtube' | 'generic' | 'upload' | 'google_drive';
         link: string;
         key?: string;
         assetId?: string;
@@ -1569,6 +1569,11 @@ export const questionAnswer = pgTable(
   ]
 );
 
+/**
+ * Exercise question kinds (`typename` matches `@cio/question-types` keys). Expected ids:
+ * 1 RADIO, 2 CHECKBOX, 3 TEXTAREA, 4 TRUE_FALSE, 5 SHORT_ANSWER, 6 NUMERIC, 7 FILL_BLANK,
+ * 8 FILE_UPLOAD, 9 MATCHING, 10 ORDERING, 11 HOTSPOT, 12 LINK, 13 WORD_BANK, 14 STAR.
+ */
 export const questionType = pgTable(
   'question_type',
   {
@@ -2114,3 +2119,157 @@ export const courseImportDraft = pgTable(
       .where(sql`${table.idempotencyKey} IS NOT NULL`)
   ]
 );
+
+// ─── Programs ────────────────────────────────────────────────────────────────
+
+export const programStatus = pgEnum('PROGRAM_STATUS', ['ACTIVE', 'INACTIVE', 'ARCHIVED']);
+
+export const program = pgTable(
+  'program',
+  {
+    id: uuid()
+      .default(sql`gen_random_uuid()`)
+      .primaryKey()
+      .notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+    organizationId: uuid('organization_id').notNull(),
+    name: varchar().notNull(),
+    description: text(),
+    coverImage: text('cover_image'),
+    status: programStatus().default('ACTIVE').notNull(),
+    createdByProfileId: uuid('created_by_profile_id')
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.organizationId],
+      foreignColumns: [organization.id],
+      name: 'program_organization_id_fkey'
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.createdByProfileId],
+      foreignColumns: [profile.id],
+      name: 'program_created_by_profile_id_fkey'
+    }),
+    index('idx_program_organization_id').on(table.organizationId)
+  ]
+);
+
+export const programCourse = pgTable(
+  'program_course',
+  {
+    id: uuid()
+      .default(sql`gen_random_uuid()`)
+      .primaryKey()
+      .notNull(),
+    programId: uuid('program_id').notNull(),
+    courseId: uuid('course_id').notNull(),
+    addedAt: timestamp('added_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.programId],
+      foreignColumns: [program.id],
+      name: 'program_course_program_id_fkey'
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.courseId],
+      foreignColumns: [course.id],
+      name: 'program_course_course_id_fkey'
+    }).onDelete('cascade'),
+    unique('program_course_program_id_course_id_unique').on(table.programId, table.courseId),
+    index('idx_program_course_program_id').on(table.programId)
+  ]
+);
+
+export const programMember = pgTable(
+  'program_member',
+  {
+    id: uuid()
+      .default(sql`gen_random_uuid()`)
+      .primaryKey()
+      .notNull(),
+    programId: uuid('program_id').notNull(),
+    profileId: uuid('profile_id'),
+    roleId: integer('role_id').notNull(),
+    email: text(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.programId],
+      foreignColumns: [program.id],
+      name: 'program_member_program_id_fkey'
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.profileId],
+      foreignColumns: [profile.id],
+      name: 'program_member_profile_id_fkey'
+    }),
+    foreignKey({
+      columns: [table.roleId],
+      foreignColumns: [role.id],
+      name: 'program_member_role_id_fkey'
+    }),
+    unique('program_member_program_id_profile_id_unique').on(table.programId, table.profileId),
+    index('idx_program_member_program_id').on(table.programId),
+    index('idx_program_member_profile_id').on(table.profileId)
+  ]
+);
+
+export const programNewsfeed = pgTable(
+  'program_newsfeed',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
+    authorId: uuid('author_id'),
+    programId: uuid('program_id'),
+    content: text(),
+    reaction: jsonb()
+      .default({ clap: [], smile: [], thumbsup: [], thumbsdown: [] })
+      .$type<{ clap: string[]; smile: string[]; thumbsup: string[]; thumbsdown: string[] }>(),
+    isPinned: boolean('is_pinned').default(false).notNull()
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.authorId],
+      foreignColumns: [programMember.id],
+      name: 'program_newsfeed_author_id_fkey'
+    }),
+    foreignKey({
+      columns: [table.programId],
+      foreignColumns: [program.id],
+      name: 'program_newsfeed_program_id_fkey'
+    }).onDelete('cascade'),
+    index('idx_program_newsfeed_program_id').on(table.programId)
+  ]
+);
+
+export const programNewsfeedComment = pgTable(
+  'program_newsfeed_comment',
+  {
+    id: bigint({ mode: 'number' }).primaryKey().generatedByDefaultAsIdentity({
+      name: 'program_newsfeed_comment_id_seq',
+      startWith: 1,
+      increment: 1,
+      minValue: 1,
+      cache: 1
+    }),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
+    authorId: uuid('author_id'),
+    content: text(),
+    programNewsfeedId: uuid('program_newsfeed_id')
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.authorId],
+      foreignColumns: [programMember.id],
+      name: 'program_newsfeed_comment_author_id_fkey'
+    }),
+    foreignKey({
+      columns: [table.programNewsfeedId],
+      foreignColumns: [programNewsfeed.id],
+      name: 'program_newsfeed_comment_program_newsfeed_id_fkey'
+    }).onDelete('cascade')
+  ]
+);
diff --git a/packages/db/src/scripts/backfill-lesson-assets.ts b/packages/db/src/scripts/backfill-lesson-assets.ts
index 025d0a0a..5cdecaf2 100644
--- a/packages/db/src/scripts/backfill-lesson-assets.ts
+++ b/packages/db/src/scripts/backfill-lesson-assets.ts
@@ -24,7 +24,7 @@ type LessonDocument = {
 };
 
 type AssetKind = 'video' | 'document' | 'image' | 'audio' | 'other';
-type AssetProvider = 'upload' | 'youtube' | 'generic' | 'external_url';
+type AssetProvider = 'upload' | 'youtube' | 'generic' | 'external_url' | 'google_drive';
 type SlotType = 'lesson_video' | 'lesson_document';
 
 type MediaSummaryKey =
diff --git a/packages/db/src/utils/seed/questionType.ts b/packages/db/src/utils/seed/questionType.ts
index ed88c77e..e3311083 100644
--- a/packages/db/src/utils/seed/questionType.ts
+++ b/packages/db/src/utils/seed/questionType.ts
@@ -64,6 +64,18 @@ export async function seedQuestionTypes() {
       typename: 'LINK',
       createdAt: '2021-08-07 18:49:46.246529+00',
       updatedAt: '2021-08-15 00:57:38.634665+00'
+    },
+    {
+      label: 'Word bank',
+      typename: 'WORD_BANK',
+      createdAt: '2021-08-07 18:49:46.246529+00',
+      updatedAt: '2021-08-15 00:57:38.634665+00'
+    },
+    {
+      label: 'Star rating',
+      typename: 'STAR',
+      createdAt: '2021-08-07 18:49:46.246529+00',
+      updatedAt: '2021-08-15 00:57:38.634665+00'
     }
   ].filter((q) => !questionTypeNames.includes(q.typename));
 
diff --git a/packages/email/src/emails/index.ts b/packages/email/src/emails/index.ts
index 6339601a..06e0399a 100644
--- a/packages/email/src/emails/index.ts
+++ b/packages/email/src/emails/index.ts
@@ -20,6 +20,7 @@ export * from './teacher-student-buy-request';
 export * from './student-prove-payment';
 export * from './teacher-course-welcome';
 export * from './student-org-invite';
+export * from './student-program-welcome';
 
 import type { newsfeedCommentEmail, newsfeedPostEmail } from './newsfeed';
 
@@ -32,6 +33,7 @@ import type { studentCourseCompletionEmail } from './student-course-completion';
 import type { studentCourseWelcomeEmail } from './student-course-welcome';
 import type { studentProvePaymentEmail } from './student-prove-payment';
 import type { studentOrgInviteEmail } from './student-org-invite';
+import type { studentProgramWelcomeEmail } from './student-program-welcome';
 import type { teacherCourseWelcomeEmail } from './teacher-course-welcome';
 import type { teacherStudentBuyRequestEmail } from './teacher-student-buy-request';
 import type { teacherStudentJoinedEmail } from './teacher-student-joined';
@@ -60,4 +62,5 @@ export type EmailSchemas = {
   studentProvePayment: typeof studentProvePaymentEmail.template.schema;
   teacherCourseWelcome: typeof teacherCourseWelcomeEmail.template.schema;
   studentOrgInvite: typeof studentOrgInviteEmail.template.schema;
+  studentProgramWelcome: typeof studentProgramWelcomeEmail.template.schema;
 };
diff --git a/packages/email/src/emails/student-program-welcome.ts b/packages/email/src/emails/student-program-welcome.ts
new file mode 100644
index 00000000..e869907b
--- /dev/null
+++ b/packages/email/src/emails/student-program-welcome.ts
@@ -0,0 +1,26 @@
+import * as z from 'zod';
+
+import { defineEmail } from '../send';
+import { getDefaultTemplate } from '../templates';
+
+export const studentProgramWelcomeEmail = defineEmail({
+  id: 'studentProgramWelcome',
+  subject: 'You have access to a program — sign in to get started',
+  schema: z.object({
+    orgName: z.string().min(1),
+    programName: z.string().min(1),
+    loginUrl: z.string().min(1)
+  }),
+  render: (fields) => {
+    const content = `
+      <p>Hi there,</p>
+      <p>You now have access to <strong>${fields.programName}</strong> in <strong>${fields.orgName}</strong>.</p>
+      <p><a href="${fields.loginUrl}">Sign in to ClassroomIO</a> to open the program and get started.</p>
+      <p>If you run into any issues, reach out to your instructor(s).</p>
+      <p>Cheers,</p>
+      <p>${fields.orgName}</p>
+    `;
+
+    return getDefaultTemplate(content);
+  }
+});
diff --git a/packages/email/src/templates/default.ts b/packages/email/src/templates/default.ts
index d959e311..b200d31b 100644
--- a/packages/email/src/templates/default.ts
+++ b/packages/email/src/templates/default.ts
@@ -177,11 +177,11 @@ export const getDefaultTemplate = (content: string): string =>
     </table>
     <p style="padding-top: 8px; line-height: initial">
       ClassroomIO ${new Date().getFullYear()}. All rights reserved.<br />
-      <a style="text-decoration: none" href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
+      <a style="text-decoration: none" href="https://classroomio.com/tos"
         target="_blank">Terms</a>
       |
       <a style="text-decoration: none"
-        href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594" target="_blank">Privacy
+        href="https://classroomio.com/privacy" target="_blank">Privacy
         Policy</a>
     </p>
   </div>
diff --git a/packages/email/src/utils/constants.ts b/packages/email/src/utils/constants.ts
index e8f62882..9bfefe6b 100644
--- a/packages/email/src/utils/constants.ts
+++ b/packages/email/src/utils/constants.ts
@@ -10,6 +10,7 @@ export const EMAIL_IDS = [
   'studentCourseCompletion',
   'studentCourseWelcome',
   'studentOrgInvite',
+  'studentProgramWelcome',
   'studentProvePayment',
   'teacherCourseWelcome',
   'teacherStudentBuyRequest',
diff --git a/packages/mcp/src/api-client.ts b/packages/mcp/src/api-client.ts
index 7c74bfef..509c4d13 100644
--- a/packages/mcp/src/api-client.ts
+++ b/packages/mcp/src/api-client.ts
@@ -91,7 +91,7 @@ export class ClassroomIoApiClient {
     });
   }
 
-  async listOrganizationCourses(query: TGetOrganizationCoursesQuery = {}) {
+  async listOrganizationCourses(query: Partial<TGetOrganizationCoursesQuery> = {}) {
     const searchParams = new URLSearchParams();
     if (query.tags) searchParams.set('tags', query.tags);
 
diff --git a/packages/mcp/src/tools/course-drafts.ts b/packages/mcp/src/tools/course-drafts.ts
index 187b60e4..8a8c1f5d 100644
--- a/packages/mcp/src/tools/course-drafts.ts
+++ b/packages/mcp/src/tools/course-drafts.ts
@@ -98,7 +98,7 @@ const publishCourseDraftToExistingCourseShape =
 const tagCoursesShape = ZAutomationCourseTagAssignment.shape as unknown as ZodRawShapeCompat;
 
 const SUPPORTED_QUESTION_TYPES_GUIDE =
-  'Supported questionTypeId values: RADIO=1 (Single answer), CHECKBOX=2 (Multiple answers), TEXTAREA=3 (Paragraph), TRUE_FALSE=4 (True/False), SHORT_ANSWER=5 (Short answer), NUMERIC=6 (Numeric answer), FILL_BLANK=7 (Fill in the blank), FILE_UPLOAD=8 (File upload), MATCHING=9 (Matching), ORDERING=10 (Ordering), HOTSPOT=11 (Hotspot), LINK=12 (Links). Use the numeric ids in exercise payloads.';
+  'Supported questionTypeId values: RADIO=1 (Single answer), CHECKBOX=2 (Multiple answers), TEXTAREA=3 (Paragraph), TRUE_FALSE=4 (True/False), SHORT_ANSWER=5 (Short answer), NUMERIC=6 (Numeric answer), FILL_BLANK=7 (Fill in the blank), FILE_UPLOAD=8 (File upload), MATCHING=9 (Matching), ORDERING=10 (Ordering), HOTSPOT=11 (Hotspot), LINK=12 (Links), WORD_BANK=13 (Word bank). Use the numeric ids in exercise payloads.';
 const LESSON_HTML_GUIDE =
   'For draft lesson HTML, put only the lesson body in lessonLanguages[].content. Do not include the lesson title. Do not use h1 or h2 anywhere in lesson HTML. Start headings at h3 because that is the highest heading level allowed in lesson content.';
 
diff --git a/packages/question-types/ADDING_A_QUESTION_TYPE.md b/packages/question-types/ADDING_A_QUESTION_TYPE.md
index 2981152c..27ebe7c7 100644
--- a/packages/question-types/ADDING_A_QUESTION_TYPE.md
+++ b/packages/question-types/ADDING_A_QUESTION_TYPE.md
@@ -9,7 +9,7 @@ This guide walks through adding a new question type to ClassroomIO. Question typ
 A question type flows through several layers:
 
 1. **`@cio/question-types`** — Keys, metadata, answer serialization (codecs)
-2. **`@cio/db`** — Database seed/migration for the `question_type` table
+2. **`@cio/db`** — Document the type in `schema.ts` and add a seed row for `question_type` (no migration file for reference data)
 3. **`@cio/ui`** — Edit, take, and preview renderers
 4. **`apps/dashboard`** — Translation keys, question type picker
 5. **`apps/api`** — Uses the above via `@cio/question-types`; no code changes usually needed
@@ -151,9 +151,17 @@ export type ExerciseQuestionLabelKey =
 
 ---
 
-## Step 6: Database — seed and migration
+## Step 6: Database — `schema.ts` and seed
 
-### 6a. Seed (for new environments)
+**Do not add a migration file** (nothing new under `packages/db/src/migrations/`) for a new question type. Reference data like `question_type` rows is not versioned via Drizzle migrations in this repo. Updating **`schema.ts`** (documentation only, unless you change table structure) and the **seed** is enough.
+
+### 6a. Update `schema.ts` documentation
+
+**File:** `packages/db/src/schema.ts`
+
+On the `questionType` table, extend the JSDoc comment that lists expected ids and typenames (e.g. `1 RADIO`, `2 CHECKBOX`, …) so it includes your new type and id. That keeps the database package aligned with `QUESTION_TYPE_REGISTRY` for anyone reading the schema.
+
+### 6b. Seed (for new environments)
 
 **File:** `packages/db/src/utils/seed/questionType.ts`
 
@@ -168,17 +176,11 @@ Add a seed entry so new databases get the type:
 }
 ```
 
-The `id` is auto-generated. Use the next sequential id (e.g. 13) in `QUESTION_TYPE_REGISTRY` so it matches after seed runs.
+The `id` is auto-generated. Use the next sequential id in `QUESTION_TYPE_REGISTRY` so it matches the order rows get when seed runs (or document the expected id in both places).
 
-### 6b. Migration (for existing databases)
+### 6c. Existing / production databases
 
-For existing production databases, add a migration that inserts the new question type:
-
-```sql
-INSERT INTO question_type (label, typename) VALUES ('My New Type', 'MY_NEW_TYPE');
-```
-
-If you need a specific `id` to match the registry, you may need to use `SELECT setval(...)` or an `ON CONFLICT`-style approach depending on your migration strategy.
+For databases that already exist and will not re-run seed, insert the `question_type` row **outside** the migration folder (e.g. a one-off SQL run in staging/production, or your ops playbook). Do **not** commit a migration whose only purpose is `INSERT INTO question_type`.
 
 ---
 
@@ -303,7 +305,8 @@ In `constants.ts`, you can:
 - [ ] `AnswerCodec` (`toApiPayload`, `fromApiPayload`) in `answer-codecs.ts` and registration in `ANSWER_CODECS`
 - [ ] Optional: payload in `question-answer-payload.ts`
 - [ ] Optional: label keys in `exercise-types.ts`
-- [ ] Seed in `questionType.ts` and migration for existing DBs
+- [ ] `schema.ts` comment on `questionType` updated with the new id/typename
+- [ ] Seed entry in `questionType.ts` (no new migration file for `INSERT INTO question_type`)
 - [ ] Three renderers (edit, take, preview) in `@cio/ui`
 - [ ] Registration in `EXERCISE_QUESTION_RENDERER_CONTRACT`
 - [ ] Translation keys in dashboard `constants.ts` and `en.json`
@@ -328,4 +331,4 @@ In `constants.ts`, you can:
 | HOTSPOT      | 11  | Auto-gradable, partial credit |
 | LINK         | 12  | Manual grading                |
 
-Use the next available id (13) for your new type, and ensure the DB `question_type` row has a matching id.
+Use the next available id for your new type, keep `QUESTION_TYPE_REGISTRY` and the `questionType` comment in `schema.ts` in sync, and ensure environments that need the row have it inserted (seed or one-off—**not** a committed migration for reference data).
diff --git a/packages/question-types/src/answer-codecs.ts b/packages/question-types/src/answer-codecs.ts
index a0e9db7f..ea37bd1f 100644
--- a/packages/question-types/src/answer-codecs.ts
+++ b/packages/question-types/src/answer-codecs.ts
@@ -9,14 +9,17 @@ import type {
   ShortAnswerData,
   NumericAnswerData,
   FillBlankAnswerData,
+  WordBankAnswerData,
   FileUploadAnswerData,
   MatchingAnswerData,
   OrderingAnswerData,
   LinkAnswerData,
-  HotspotAnswerData
+  HotspotAnswerData,
+  StarAnswerData
 } from './answer-data';
 
 import { QUESTION_TYPE_KEY } from './question-type-keys';
+import { getStarRatingMaxFromSettings, isValidStarRatingValue } from './star-rating-settings';
 
 export type ApiPayload = { questionId: number; optionId?: number; answer?: string };
 
@@ -129,6 +132,23 @@ const FILL_BLANK_CODEC: AnswerCodec<FillBlankAnswerData> = {
   }
 };
 
+const WORD_BANK_CODEC: AnswerCodec<WordBankAnswerData> = {
+  type: 'WORD_BANK',
+  toApiPayload(data, questionId) {
+    return { questionId, answer: JSON.stringify({ type: 'WORD_BANK', filledBlanks: data.filledBlanks }) };
+  },
+  fromApiPayload(payload) {
+    if (!payload.answer) return null;
+    try {
+      const parsed = JSON.parse(payload.answer) as { type?: string; filledBlanks?: string[] };
+      if (parsed?.type !== 'WORD_BANK' || !Array.isArray(parsed.filledBlanks)) return null;
+      return { type: 'WORD_BANK', filledBlanks: parsed.filledBlanks.map((v) => String(v ?? '')) };
+    } catch {
+      return null;
+    }
+  }
+};
+
 const FILE_UPLOAD_CODEC: AnswerCodec<FileUploadAnswerData> = {
   type: 'FILE_UPLOAD',
   toApiPayload(data, questionId) {
@@ -208,6 +228,25 @@ const HOTSPOT_CODEC: AnswerCodec<HotspotAnswerData> = {
   }
 };
 
+const STAR_CODEC: AnswerCodec<StarAnswerData> = {
+  type: 'STAR',
+  toApiPayload(data, questionId) {
+    return { questionId, answer: JSON.stringify({ type: 'STAR', value: data.value }) };
+  },
+  fromApiPayload(payload, question) {
+    if (!payload.answer) return null;
+    try {
+      const parsed = JSON.parse(payload.answer) as { type?: string; value?: unknown };
+      if (parsed?.type !== 'STAR') return null;
+      const maxStars = getStarRatingMaxFromSettings(question.settings);
+      if (!isValidStarRatingValue(parsed.value, maxStars)) return null;
+      return { type: 'STAR', value: parsed.value };
+    } catch {
+      return null;
+    }
+  }
+};
+
 export const ANSWER_CODECS: Record<QuestionTypeKey, AnswerCodec> = {
   [QUESTION_TYPE_KEY.RADIO]: RADIO_CODEC,
   [QUESTION_TYPE_KEY.CHECKBOX]: CHECKBOX_CODEC,
@@ -216,11 +255,13 @@ export const ANSWER_CODECS: Record<QuestionTypeKey, AnswerCodec> = {
   [QUESTION_TYPE_KEY.SHORT_ANSWER]: SHORT_ANSWER_CODEC,
   [QUESTION_TYPE_KEY.NUMERIC]: NUMERIC_CODEC,
   [QUESTION_TYPE_KEY.FILL_BLANK]: FILL_BLANK_CODEC,
+  [QUESTION_TYPE_KEY.WORD_BANK]: WORD_BANK_CODEC,
   [QUESTION_TYPE_KEY.FILE_UPLOAD]: FILE_UPLOAD_CODEC,
   [QUESTION_TYPE_KEY.MATCHING]: MATCHING_CODEC,
   [QUESTION_TYPE_KEY.ORDERING]: ORDERING_CODEC,
   [QUESTION_TYPE_KEY.LINK]: LINK_CODEC,
-  [QUESTION_TYPE_KEY.HOTSPOT]: HOTSPOT_CODEC
+  [QUESTION_TYPE_KEY.HOTSPOT]: HOTSPOT_CODEC,
+  [QUESTION_TYPE_KEY.STAR]: STAR_CODEC
 };
 
 /** Convert any answer to API submission payload */
@@ -267,8 +308,12 @@ export function extractAnswerDisplayValues(data: AnswerData): {
       return { selectedIds: [], selectedValues: [], text: data.text };
     case 'NUMERIC':
       return { selectedIds: [], selectedValues: [], text: String(data.value) };
+    case 'STAR':
+      return { selectedIds: [], selectedValues: [data.value], text: String(data.value) };
     case 'FILL_BLANK':
       return { selectedIds: [], selectedValues: [], text: data.values.join(', ') };
+    case 'WORD_BANK':
+      return { selectedIds: [], selectedValues: [], text: data.filledBlanks.filter(Boolean).join(', ') };
     case 'LINK':
       return { selectedIds: [], selectedValues: data.urls, text: data.urls.join(', ') };
     case 'MATCHING':
diff --git a/packages/question-types/src/answer-data.ts b/packages/question-types/src/answer-data.ts
index 7ea4a295..8e2e5f18 100644
--- a/packages/question-types/src/answer-data.ts
+++ b/packages/question-types/src/answer-data.ts
@@ -5,6 +5,7 @@ export type TextareaAnswerData = { type: 'TEXTAREA'; text: string };
 export type ShortAnswerData = { type: 'SHORT_ANSWER'; text: string };
 export type NumericAnswerData = { type: 'NUMERIC'; value: number };
 export type FillBlankAnswerData = { type: 'FILL_BLANK'; values: string[] };
+export type WordBankAnswerData = { type: 'WORD_BANK'; filledBlanks: string[] };
 export type FileUploadAnswerData = {
   type: 'FILE_UPLOAD';
   fileKey: string;
@@ -16,6 +17,7 @@ export type MatchingAnswerData = { type: 'MATCHING'; pairs: Array<{ left: string
 export type OrderingAnswerData = { type: 'ORDERING'; orderedValues: string[] };
 export type LinkAnswerData = { type: 'LINK'; urls: string[] };
 export type HotspotAnswerData = { type: 'HOTSPOT'; coordinates: Array<{ x: number; y: number }> };
+export type StarAnswerData = { type: 'STAR'; value: number };
 
 export type AnswerData =
   | RadioAnswerData
@@ -25,8 +27,10 @@ export type AnswerData =
   | ShortAnswerData
   | NumericAnswerData
   | FillBlankAnswerData
+  | WordBankAnswerData
   | FileUploadAnswerData
   | MatchingAnswerData
   | OrderingAnswerData
   | LinkAnswerData
-  | HotspotAnswerData;
+  | HotspotAnswerData
+  | StarAnswerData;
diff --git a/packages/question-types/src/exercise-types.ts b/packages/question-types/src/exercise-types.ts
index e6840560..399523a6 100644
--- a/packages/question-types/src/exercise-types.ts
+++ b/packages/question-types/src/exercise-types.ts
@@ -66,10 +66,35 @@ export type ExerciseQuestionLabelKey =
   | 'numeric.review.your_answer_label'
   | 'numeric.review.in_range'
   | 'numeric.review.out_of_range'
+  | 'star.edit.correct_value_label'
+  | 'star.edit.correct_value_info'
+  | 'star.edit.max_stars_label'
+  | 'star.edit.max_stars_info'
+  | 'star.edit.correct_value_placeholder'
+  | 'star.edit.max_stars_placeholder'
+  | 'star.take.helper'
+  | 'star.take.star_sr'
+  | 'star.preview.correct_label'
   | 'fill_blank.edit.accepted_answers_placeholder'
   | 'fill_blank.take.placeholder'
   | 'fill_blank.preview.accepted_answers_label'
   | 'fill_blank.review.your_answer_label'
+  | 'word_bank.edit.template_label'
+  | 'word_bank.edit.template_placeholder'
+  | 'word_bank.edit.template_helper'
+  | 'word_bank.edit.no_blanks_warning'
+  | 'word_bank.edit.correct_answers_heading'
+  | 'word_bank.edit.blank_label'
+  | 'word_bank.edit.correct_placeholder'
+  | 'word_bank.edit.distractors_heading'
+  | 'word_bank.edit.distractor_placeholder'
+  | 'word_bank.edit.add_distractor'
+  | 'word_bank.take.helper'
+  | 'word_bank.take.bank_heading'
+  | 'word_bank.take.clear_blank_sr'
+  | 'word_bank.preview.filled_label'
+  | 'word_bank.review.your_answer_label'
+  | 'word_bank.review.correct_label'
   | 'file_upload.edit.accepted_types_placeholder'
   | 'file_upload.edit.max_size_placeholder'
   | 'file_upload.take.selected_file_label'
diff --git a/packages/question-types/src/index.ts b/packages/question-types/src/index.ts
index bb7e3d4d..689f3300 100644
--- a/packages/question-types/src/index.ts
+++ b/packages/question-types/src/index.ts
@@ -14,3 +14,4 @@ export * from './answer-data';
 export * from './answer-codecs';
 export * from './renderer-registry';
 export * from './textarea-validation';
+export * from './star-rating-settings';
diff --git a/packages/question-types/src/question-answer-payload.ts b/packages/question-types/src/question-answer-payload.ts
index 4a8242a9..8710be65 100644
--- a/packages/question-types/src/question-answer-payload.ts
+++ b/packages/question-types/src/question-answer-payload.ts
@@ -8,11 +8,13 @@ export type QuestionAnswerPayload =
   | ShortAnswerPayload
   | NumericAnswerPayload
   | FillBlankAnswerPayload
+  | WordBankAnswerPayload
   | FileUploadAnswerPayload
   | MatchingAnswerPayload
   | OrderingAnswerPayload
   | HotspotAnswerPayload
-  | LinkAnswerPayload;
+  | LinkAnswerPayload
+  | StarAnswerPayload;
 
 interface BaseAnswerPayload {
   type: QuestionTypeKey;
@@ -53,6 +55,11 @@ export interface FillBlankAnswerPayload extends BaseAnswerPayload {
   answers: string[];
 }
 
+export interface WordBankAnswerPayload extends BaseAnswerPayload {
+  type: typeof QUESTION_TYPE_KEY.WORD_BANK;
+  filledBlanks: string[];
+}
+
 export interface FileUploadAnswerPayload extends BaseAnswerPayload {
   type: typeof QUESTION_TYPE_KEY.FILE_UPLOAD;
   fileId: string;
@@ -80,3 +87,8 @@ export interface LinkAnswerPayload extends BaseAnswerPayload {
   type: typeof QUESTION_TYPE_KEY.LINK;
   links: string[];
 }
+
+export interface StarAnswerPayload extends BaseAnswerPayload {
+  type: typeof QUESTION_TYPE_KEY.STAR;
+  value: number;
+}
diff --git a/packages/question-types/src/question-scoring.ts b/packages/question-types/src/question-scoring.ts
index 4c7bbc26..4ca9e126 100644
--- a/packages/question-types/src/question-scoring.ts
+++ b/packages/question-types/src/question-scoring.ts
@@ -4,6 +4,7 @@ import { QUESTION_TYPE_KEY } from './question-type-keys';
 import { getQuestionTypeById } from './question-type-lookup';
 import { QUESTION_TYPE_ID_TO_KEY } from './question-type-registry';
 import { supportsPartialCredit } from './question-type-capabilities';
+import { getStarRatingMaxFromSettings, isValidStarRatingValue } from './star-rating-settings';
 
 export type DbQuestionForScoring = {
   id: number;
@@ -129,6 +130,20 @@ function scoreTrueFalse(
   return answer.value === correctIsTrue ? maxPoints : 0;
 }
 
+function scoreStar(
+  question: ExerciseQuestionModel,
+  answer: Extract<AnswerData, { type: 'STAR' }>,
+  maxPoints: number
+): number {
+  const maxStars = getStarRatingMaxFromSettings(question.settings);
+  const rawCorrect = question.settings?.correctValue;
+  const correct = typeof rawCorrect === 'number' ? rawCorrect : rawCorrect != null ? Number(rawCorrect) : NaN;
+  if (!isValidStarRatingValue(correct, maxStars)) return 0;
+  if (!isValidStarRatingValue(answer.value, maxStars)) return 0;
+
+  return answer.value === correct ? maxPoints : 0;
+}
+
 function scoreNumeric(
   question: ExerciseQuestionModel,
   answer: Extract<AnswerData, { type: 'NUMERIC' }>,
@@ -169,6 +184,31 @@ function scoreFillBlank(
   return (correct / expected.length) * maxPoints;
 }
 
+function scoreWordBank(
+  question: ExerciseQuestionModel,
+  answer: Extract<AnswerData, { type: 'WORD_BANK' }>,
+  maxPoints: number,
+  partial: boolean
+): number {
+  const rawCorrect = question.settings?.correctAnswers;
+  const expected = Array.isArray(rawCorrect)
+    ? (rawCorrect as unknown[]).map((s) => String(s).trim().toLowerCase()).filter(Boolean)
+    : [];
+  if (expected.length === 0) return 0;
+
+  const studentVals = (answer.filledBlanks ?? []).map((v) => String(v).trim().toLowerCase());
+
+  let correct = 0;
+  for (let i = 0; i < expected.length; i++) {
+    if (studentVals[i] === expected[i]) correct++;
+  }
+
+  if (!partial) {
+    return correct === expected.length && studentVals.length === expected.length ? maxPoints : 0;
+  }
+  return (correct / expected.length) * maxPoints;
+}
+
 function pairKey(left: string, right: string): string {
   return `${normalizeText(left)}::${normalizeText(right)}`;
 }
@@ -298,9 +338,15 @@ export function scoreAnswerForQuestion(question: ExerciseQuestionModel, answer:
     case 'NUMERIC':
       if (key !== QUESTION_TYPE_KEY.NUMERIC) return 0;
       return scoreNumeric(question, answer, maxPoints);
+    case 'STAR':
+      if (key !== QUESTION_TYPE_KEY.STAR) return 0;
+      return scoreStar(question, answer, maxPoints);
     case 'FILL_BLANK':
       if (key !== QUESTION_TYPE_KEY.FILL_BLANK) return 0;
       return clampPoints(scoreFillBlank(question, answer, maxPoints, partial), maxPoints);
+    case 'WORD_BANK':
+      if (key !== QUESTION_TYPE_KEY.WORD_BANK) return 0;
+      return clampPoints(scoreWordBank(question, answer, maxPoints, partial), maxPoints);
     case 'MATCHING':
       if (key !== QUESTION_TYPE_KEY.MATCHING) return 0;
       return clampPoints(scoreMatching(question, answer, maxPoints, partial), maxPoints);
diff --git a/packages/question-types/src/question-type-keys.ts b/packages/question-types/src/question-type-keys.ts
index c8b40eeb..3f9c306d 100644
--- a/packages/question-types/src/question-type-keys.ts
+++ b/packages/question-types/src/question-type-keys.ts
@@ -10,7 +10,9 @@ export const QUESTION_TYPE_KEY = {
   MATCHING: 'MATCHING',
   ORDERING: 'ORDERING',
   HOTSPOT: 'HOTSPOT',
-  LINK: 'LINK'
+  LINK: 'LINK',
+  WORD_BANK: 'WORD_BANK',
+  STAR: 'STAR'
 } as const;
 
 export type QuestionTypeKey = (typeof QUESTION_TYPE_KEY)[keyof typeof QUESTION_TYPE_KEY];
diff --git a/packages/question-types/src/question-type-registry.ts b/packages/question-types/src/question-type-registry.ts
index 10fb8af7..c991d905 100644
--- a/packages/question-types/src/question-type-registry.ts
+++ b/packages/question-types/src/question-type-registry.ts
@@ -109,6 +109,24 @@ export const QUESTION_TYPE_REGISTRY: readonly QuestionTypeMetadata[] = [
     autoGradable: false,
     supportsPartialCredit: false,
     manualGradingRequired: true
+  },
+  {
+    key: QUESTION_TYPE_KEY.WORD_BANK,
+    typename: 'WORD_BANK',
+    label: 'Word bank',
+    id: 13,
+    autoGradable: true,
+    supportsPartialCredit: true,
+    manualGradingRequired: false
+  },
+  {
+    key: QUESTION_TYPE_KEY.STAR,
+    typename: 'STAR',
+    label: 'Star rating',
+    id: 14,
+    autoGradable: true,
+    supportsPartialCredit: false,
+    manualGradingRequired: false
   }
 ] as const;
 
diff --git a/packages/question-types/src/star-rating-settings.ts b/packages/question-types/src/star-rating-settings.ts
new file mode 100644
index 00000000..97b070be
--- /dev/null
+++ b/packages/question-types/src/star-rating-settings.ts
@@ -0,0 +1,17 @@
+import type { ExerciseQuestionModel } from './exercise-types';
+
+const STAR_RATING_DEFAULT_MAX = 5;
+const STAR_RATING_ABSOLUTE_MAX = 10;
+
+/** Max star count for STAR questions (from `question.settings.maxStars`, clamped). */
+export function getStarRatingMaxFromSettings(settings: ExerciseQuestionModel['settings']): number {
+  const raw = settings?.maxStars;
+  const parsed = typeof raw === 'number' ? raw : raw != null ? Number(raw) : NaN;
+  if (!Number.isFinite(parsed) || parsed < 1) return STAR_RATING_DEFAULT_MAX;
+
+  return Math.min(STAR_RATING_ABSOLUTE_MAX, Math.max(1, Math.floor(parsed)));
+}
+
+export function isValidStarRatingValue(value: unknown, maxStars: number): value is number {
+  return typeof value === 'number' && Number.isInteger(value) && value >= 1 && value <= maxStars;
+}
diff --git a/packages/question-types/tests/question-type-registry.test.ts b/packages/question-types/tests/question-type-registry.test.ts
index 31777e96..cee5d3f0 100644
--- a/packages/question-types/tests/question-type-registry.test.ts
+++ b/packages/question-types/tests/question-type-registry.test.ts
@@ -111,6 +111,22 @@ const EXPECTED_REGISTRY = [
     autoGradable: false,
     supportsPartialCredit: false,
     manualGradingRequired: true
+  },
+  {
+    key: QUESTION_TYPE_KEY.WORD_BANK,
+    typename: 'WORD_BANK',
+    id: 13,
+    autoGradable: true,
+    supportsPartialCredit: true,
+    manualGradingRequired: false
+  },
+  {
+    key: QUESTION_TYPE_KEY.STAR,
+    typename: 'STAR',
+    id: 14,
+    autoGradable: true,
+    supportsPartialCredit: false,
+    manualGradingRequired: false
   }
 ] as const;
 
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 424507fe..e7628522 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -13,7 +13,9 @@
     "storybook:publish": "pnpm build-storybook && pnpm storybook:upload"
   },
   "dependencies": {
-    "@cio/ui": "workspace:*"
+    "@cio/ui": "workspace:*",
+    "svelte-inview": "^4.0.4",
+    "svelte-motion": "^0.12.2"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.388.0",
diff --git a/packages/storybook/src/atoms/item/item.stories.svelte b/packages/storybook/src/atoms/item/item.stories.svelte
index 698a7242..296a3ede 100644
--- a/packages/storybook/src/atoms/item/item.stories.svelte
+++ b/packages/storybook/src/atoms/item/item.stories.svelte
@@ -8,7 +8,7 @@
 
   import BadgeCheckIcon from '@lucide/svelte/icons/badge-check';
   import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
   import ShieldAlertIcon from '@lucide/svelte/icons/shield-alert';
   import PlusIcon from '@lucide/svelte/icons/plus';
   import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
@@ -362,15 +362,19 @@
       </Item.Root>
       <Item.Root variant="outline">
         {#snippet child({ props })}
-          <a href="#/" target="_blank" rel="noopener noreferrer" {...props}>
-            <Item.Content>
-              <Item.Title>External resource</Item.Title>
-              <Item.Description>Opens in a new tab with security attributes.</Item.Description>
-            </Item.Content>
-            <Item.Actions>
-              <ExternalLinkIcon class="size-4" />
-            </Item.Actions>
-          </a>
+          <HoverableItem>
+            {#snippet children(isHovered)}
+              <a href="#/" target="_blank" rel="noopener noreferrer" {...props}>
+                <Item.Content>
+                  <Item.Title>External resource</Item.Title>
+                  <Item.Description>Opens in a new tab with security attributes.</Item.Description>
+                </Item.Content>
+                <Item.Actions>
+                  <ExternalLinkIcon {isHovered} size={16} ariaHidden={true} />
+                </Item.Actions>
+              </a>
+            {/snippet}
+          </HoverableItem>
         {/snippet}
       </Item.Root>
     </div>
diff --git a/packages/storybook/src/index.css b/packages/storybook/src/index.css
index 52c884a8..538d05b7 100644
--- a/packages/storybook/src/index.css
+++ b/packages/storybook/src/index.css
@@ -2,4 +2,17 @@
 
 @import 'tailwindcss';
 
+/* Unprefixed animation utilities for packages/ui/custom/animation.
+   @cio/ui/output.css is built with prefix(ui), so animate-* must be declared for Storybook's scan. */
+@theme inline {
+  --animate-magicslide: magicslide var(--speed) ease-in-out infinite alternate;
+  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
+  --animate-meteor: meteor 5s linear infinite;
+}
+
 @import '@cio/ui/output.css';
+
+@import '../../ui/src/custom/animation/marketing-layers.css';
+
+@source '../../ui/src/custom/animation/**/*.svelte';
+@source inline('animate-magicslide animate-spin-around animate-meteor');
diff --git a/packages/storybook/src/molecules/animation/animation.stories.svelte b/packages/storybook/src/molecules/animation/animation.stories.svelte
new file mode 100644
index 00000000..3cd94481
--- /dev/null
+++ b/packages/storybook/src/molecules/animation/animation.stories.svelte
@@ -0,0 +1,176 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import {
+    BlurFade,
+    BlurIn,
+    BorderBeam,
+    CardBody,
+    CardContainer,
+    DotPattern,
+    GradualSpacing,
+    HeroVideoDialog,
+    MagicCard,
+    Meteors,
+    ShimmerButton,
+    ShinnyText,
+    Sparkle,
+    SquareCardBody,
+    SquareCardIcon
+  } from '@cio/ui/custom/animation';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/Animation',
+    parameters: {
+      layout: 'fullscreen'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="BorderBeam">
+  {#snippet template()}
+    <div
+      class="ui:relative ui:mx-auto ui:flex ui:h-48 ui:w-80 ui:items-center ui:justify-center ui:rounded-xl ui:border ui:bg-muted"
+    >
+      <BorderBeam />
+      <span class="ui:relative ui:z-10 ui:text-sm ui:font-medium">Border beam</span>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="DotPattern">
+  {#snippet template()}
+    <div class="ui:relative ui:mx-auto ui:h-48 ui:w-80 ui:overflow-hidden ui:rounded-xl ui:border ui:bg-background">
+      <DotPattern />
+      <div class="ui:relative ui:z-10 ui:flex ui:h-full ui:items-center ui:justify-center ui:text-sm">Dot pattern</div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="CardContainer">
+  {#snippet template()}
+    <CardContainer className="ui:max-w-lg">
+      {#snippet children()}
+        <CardBody>
+          {#snippet children()}
+            <p class="ui:text-center ui:text-sm">Card container with body</p>
+          {/snippet}
+        </CardBody>
+      {/snippet}
+    </CardContainer>
+  {/snippet}
+</Story>
+
+<Story name="BlurFade">
+  {#snippet template()}
+    <div class="ui:p-8">
+      <BlurFade>
+        {#snippet children()}
+          <p class="ui:text-lg">Scroll into view (blur fade)</p>
+        {/snippet}
+      </BlurFade>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="BlurIn">
+  {#snippet template()}
+    <div class="ui:p-8 ui:text-center">
+      <BlurIn>
+        {#snippet children()}
+          Blur in heading
+        {/snippet}
+      </BlurIn>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Meteors">
+  {#snippet template()}
+    <div
+      class="ui:relative ui:mx-auto ui:min-h-64 ui:w-full ui:max-w-xl ui:overflow-visible ui:rounded-xl ui:border ui:bg-slate-950 ui:p-4"
+    >
+      <Meteors number={12} />
+      <p class="ui:relative ui:z-10 ui:p-6 ui:text-center ui:text-sm ui:text-slate-300">
+        Meteors (absolute layer behind this copy)
+      </p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="ShimmerButton">
+  {#snippet template()}
+    <div class="ui:flex ui:justify-center ui:bg-neutral-950 ui:p-8">
+      <ShimmerButton href="https://example.com" target="_blank" rel="noreferrer">
+        {#snippet children()}
+          Shimmer CTA
+        {/snippet}
+      </ShimmerButton>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Sparkle">
+  {#snippet template()}
+    <div class="ui:flex ui:justify-center ui:bg-background ui:p-12">
+      <Sparkle text="Sparkle text" sparklesCount={6} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="HeroVideoDialog">
+  {#snippet template()}
+    <div class="ui:mx-auto ui:max-w-2xl ui:p-8">
+      <HeroVideoDialog
+        thumbnailSrc="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1200&q=80"
+        videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ"
+        thumbnailAlt="Sample"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="ShinnyText">
+  {#snippet template()}
+    <div class="ui:flex ui:justify-center ui:bg-background ui:p-12">
+      <ShinnyText shimmerWidth={120}>
+        {#snippet children()}
+          Shiny marketing copy
+        {/snippet}
+      </ShinnyText>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="MagicCard">
+  {#snippet template()}
+    <div class="ui:mx-auto ui:h-40 ui:max-w-sm ui:p-4">
+      <MagicCard>
+        {#snippet children()}
+          <p class="ui:text-center ui:text-sm">Hover for gradient</p>
+        {/snippet}
+      </MagicCard>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="GradualSpacing">
+  {#snippet template()}
+    <div class="ui:bg-background ui:p-12">
+      <GradualSpacing words="Hello" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="SquareCard">
+  {#snippet template()}
+    <div class="ui:relative ui:mx-auto ui:w-64 ui:rounded-lg ui:border ui:p-6">
+      <SquareCardIcon class="ui:right-2 ui:top-2" />
+      <SquareCardBody>
+        {#snippet children()}
+          <p class="ui:text-sm">Square card body with icon</p>
+        {/snippet}
+      </SquareCardBody>
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte b/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
index 59e32063..9d4a75e6 100644
--- a/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
+++ b/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
@@ -13,8 +13,10 @@
     ORDERING_FIXTURE,
     RADIO_FIXTURE,
     SHORT_ANSWER_FIXTURE,
+    STAR_FIXTURE,
     TEXTAREA_FIXTURE,
-    TRUE_FALSE_FIXTURE
+    TRUE_FALSE_FIXTURE,
+    WORD_BANK_FIXTURE
   } from './question-fixtures';
 
   const { Story } = defineMeta({
@@ -57,6 +59,16 @@
   {/snippet}
 </Story>
 
+<Story name="WordBank">
+  {#snippet template()}
+    <QuestionTypeModes
+      question={WORD_BANK_FIXTURE.question}
+      answer={WORD_BANK_FIXTURE.answer}
+      wrongAnswer={WORD_BANK_FIXTURE.wrongAnswer}
+    />
+  {/snippet}
+</Story>
+
 <Story
   name="Hotspot"
   parameters={{
@@ -127,6 +139,25 @@
   {/snippet}
 </Story>
 
+<Story
+  name="Star"
+  parameters={{
+    docs: {
+      description: {
+        story: '**Premium in the app** – Gated behind a paid plan in the exercise editor.'
+      }
+    }
+  }}
+>
+  {#snippet template()}
+    <QuestionTypeModes
+      question={STAR_FIXTURE.question}
+      answer={STAR_FIXTURE.answer}
+      wrongAnswer={STAR_FIXTURE.wrongAnswer}
+    />
+  {/snippet}
+</Story>
+
 <Story name="Ordering">
   {#snippet template()}
     <QuestionTypeModes
diff --git a/packages/storybook/src/molecules/exercise-question/question-fixtures.ts b/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
index ea1841bb..1861b2c4 100644
--- a/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
+++ b/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
@@ -131,6 +131,18 @@ export const NUMERIC_FIXTURE: QuestionStoryFixture = {
   wrongAnswer: { type: 'NUMERIC', value: 42 }
 };
 
+export const STAR_FIXTURE: QuestionStoryFixture = {
+  question: {
+    id: 'q-star',
+    key: 'q-star',
+    title: 'How clear were the lesson objectives? [STAR]',
+    questionType: 'STAR',
+    settings: { correctValue: 4, maxStars: 5 }
+  },
+  answer: { type: 'STAR', value: 4 },
+  wrongAnswer: { type: 'STAR', value: 2 }
+};
+
 export const FILL_BLANK_FIXTURE: QuestionStoryFixture = {
   question: {
     id: 'q-fill-blank',
@@ -143,6 +155,29 @@ export const FILL_BLANK_FIXTURE: QuestionStoryFixture = {
   wrongAnswer: { type: 'FILL_BLANK', values: ['SOAP'] }
 };
 
+export const WORD_BANK_FIXTURE: QuestionStoryFixture = {
+  question: {
+    id: 'q-word-bank',
+    key: 'q-word-bank',
+    title: 'Match each term with the sentence. [WORD_BANK]',
+    questionType: 'WORD_BANK',
+    settings: {
+      template:
+        'Measurements to describe our data are called ___. The ___ shows values and how often they occur. Outliers appear when data is skewed or has ___.',
+      correctAnswers: ['summary statistics', 'distribution', 'outliers'],
+      distractors: ['categorical variables', 'linear relationships', 'numeric variables']
+    }
+  },
+  answer: {
+    type: 'WORD_BANK',
+    filledBlanks: ['summary statistics', 'distribution', 'outliers']
+  },
+  wrongAnswer: {
+    type: 'WORD_BANK',
+    filledBlanks: ['numeric variables', 'distribution', 'linear relationships']
+  }
+};
+
 export const FILE_UPLOAD_FIXTURE: QuestionStoryFixture = {
   question: {
     id: 'q-file-upload',
diff --git a/packages/storybook/src/molecules/exercise-question/question-labels.ts b/packages/storybook/src/molecules/exercise-question/question-labels.ts
index 8a230e9d..58f95f5b 100644
--- a/packages/storybook/src/molecules/exercise-question/question-labels.ts
+++ b/packages/storybook/src/molecules/exercise-question/question-labels.ts
@@ -66,10 +66,35 @@ export const QUESTION_LABELS = {
   'numeric.review.your_answer_label': 'Submitted:',
   'numeric.review.in_range': 'Within tolerance',
   'numeric.review.out_of_range': 'Outside tolerance',
+  'star.edit.correct_value_label': 'Correct star value',
+  'star.edit.correct_value_info': 'Expected star count for full credit.',
+  'star.edit.max_stars_label': 'Maximum stars',
+  'star.edit.max_stars_info': 'Stars shown to learners (1–10).',
+  'star.edit.correct_value_placeholder': 'e.g. 3',
+  'star.edit.max_stars_placeholder': 'e.g. 5',
+  'star.take.helper': 'Select your rating.',
+  'star.take.star_sr': 'Star {n} of {max}',
+  'star.preview.correct_label': 'Correct answer',
   'fill_blank.edit.accepted_answers_placeholder': 'Accepted answers (comma separated)',
   'fill_blank.take.placeholder': 'Enter answers separated by commas',
   'fill_blank.preview.accepted_answers_label': 'Accepted answers',
   'fill_blank.review.your_answer_label': 'Submitted:',
+  'word_bank.edit.template_label': 'Sentence template',
+  'word_bank.edit.template_placeholder': 'Use ___ for each blank...',
+  'word_bank.edit.template_helper': 'Use three underscores (___) for each blank.',
+  'word_bank.edit.no_blanks_warning': 'Add at least one ___ blank marker in your template.',
+  'word_bank.edit.correct_answers_heading': 'Correct answer for each blank',
+  'word_bank.edit.blank_label': 'Blank',
+  'word_bank.edit.correct_placeholder': 'Correct term or phrase',
+  'word_bank.edit.distractors_heading': 'Extra words (distractors)',
+  'word_bank.edit.distractor_placeholder': 'Wrong option',
+  'word_bank.edit.add_distractor': 'Add distractor',
+  'word_bank.take.helper': 'Click or drag words into blanks.',
+  'word_bank.take.bank_heading': 'Word bank',
+  'word_bank.take.clear_blank_sr': 'Remove word from blank',
+  'word_bank.preview.filled_label': 'Expected answers in context',
+  'word_bank.review.your_answer_label': 'Your answers',
+  'word_bank.review.correct_label': 'Correct answers',
   'file_upload.edit.accepted_types_placeholder': 'Select accepted file formats',
   'file_upload.edit.max_size_placeholder': 'Max size (MB)',
   'file_upload.take.selected_file_label': 'Selected file',
diff --git a/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte b/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
index 5dd17a18..198a2e24 100644
--- a/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
+++ b/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
@@ -63,11 +63,45 @@
         return { type: 'SHORT_ANSWER', text: 'Use deterministic fixtures' };
       case 'NUMERIC':
         return { type: 'NUMERIC', value: 88 + (index % 6) };
+      case 'STAR': {
+        const rawMax = storyQuestion.settings?.maxStars;
+        const maxStars =
+          typeof rawMax === 'number' && Number.isFinite(rawMax) ? Math.min(10, Math.max(1, Math.floor(rawMax))) : 5;
+        const rawCorrect = storyQuestion.settings?.correctValue;
+        const correct =
+          typeof rawCorrect === 'number' && Number.isFinite(rawCorrect)
+            ? Math.min(maxStars, Math.max(1, Math.floor(rawCorrect)))
+            : Math.min(3, maxStars);
+        if (index % 4 === 0) return { type: 'STAR', value: correct };
+        return { type: 'STAR', value: (index % maxStars) + 1 };
+      }
       case 'FILL_BLANK':
         return {
           type: 'FILL_BLANK',
           values: index % 2 === 0 ? ['API'] : ['endpoint']
         };
+      case 'WORD_BANK': {
+        const correct = Array.isArray(storyQuestion.settings?.correctAnswers)
+          ? (storyQuestion.settings.correctAnswers as string[]).map((s) => String(s ?? ''))
+          : ['alpha', 'beta'];
+        const blankCount = Math.max(1, correct.length);
+        if (index % 4 === 0) {
+          return { type: 'WORD_BANK', filledBlanks: correct.slice(0, blankCount) };
+        }
+        if (index % 4 === 1) {
+          const wrongFirst = ['wrong term', ...correct.slice(1)].slice(0, blankCount);
+          return { type: 'WORD_BANK', filledBlanks: wrongFirst };
+        }
+        if (index % 4 === 2 && blankCount > 1) {
+          const swapped = [...correct.slice(0, blankCount)];
+          [swapped[0], swapped[1]] = [swapped[1], swapped[0]];
+          return { type: 'WORD_BANK', filledBlanks: swapped };
+        }
+        return {
+          type: 'WORD_BANK',
+          filledBlanks: Array.from({ length: blankCount }, () => '')
+        };
+      }
       case 'FILE_UPLOAD':
         return {
           type: 'FILE_UPLOAD',
diff --git a/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte b/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte
new file mode 100644
index 00000000..e1abb7ac
--- /dev/null
+++ b/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte
@@ -0,0 +1,112 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import {
+    NewsfeedReactions,
+    type NewsfeedReactionCounts,
+    type NewsfeedReactionType
+  } from '@cio/ui/custom/newsfeed-reactions';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/NewsfeedReactions',
+    component: NewsfeedReactions,
+    parameters: {
+      layout: 'centered'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<script lang="ts">
+  let summaryReactionCounts = $state<NewsfeedReactionCounts>({
+    clap: 12,
+    smile: 4,
+    thumbsup: 8,
+    thumbsdown: 1
+  });
+  let summarySelectedReaction = $state<NewsfeedReactionType | null>('smile');
+
+  let openReactionCounts = $state<NewsfeedReactionCounts>({
+    clap: 6,
+    smile: 3,
+    thumbsup: 5,
+    thumbsdown: 2
+  });
+  let openSelectedReaction = $state<NewsfeedReactionType | null>('clap');
+  let openPopover = $state(true);
+
+  let interactiveReactionCounts = $state<NewsfeedReactionCounts>({
+    clap: 2,
+    smile: 7,
+    thumbsup: 1
+  });
+  let interactiveSelectedReaction = $state<NewsfeedReactionType | null>('smile');
+  let interactivePopover = $state(false);
+
+  function updateCounts(
+    reactionCounts: NewsfeedReactionCounts,
+    nextReactionType: NewsfeedReactionType,
+    currentReactionType: NewsfeedReactionType | null
+  ) {
+    const nextCounts: NewsfeedReactionCounts = {
+      clap: reactionCounts.clap ?? 0,
+      smile: reactionCounts.smile ?? 0,
+      thumbsup: reactionCounts.thumbsup ?? 0,
+      thumbsdown: reactionCounts.thumbsdown ?? 0
+    };
+
+    if (currentReactionType === nextReactionType) {
+      nextCounts[nextReactionType] = Math.max(0, (nextCounts[nextReactionType] ?? 0) - 1);
+      return nextCounts;
+    }
+
+    if (currentReactionType) {
+      nextCounts[currentReactionType] = Math.max(0, (nextCounts[currentReactionType] ?? 0) - 1);
+    }
+
+    nextCounts[nextReactionType] = (nextCounts[nextReactionType] ?? 0) + 1;
+    return nextCounts;
+  }
+</script>
+
+<Story name="Summary">
+  {#snippet template()}
+    <div class="ui:w-[360px] ui:rounded-2xl ui:border ui:bg-background ui:p-4">
+      <NewsfeedReactions reactionCounts={summaryReactionCounts} selectedReactionType={summarySelectedReaction} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Popover Open">
+  {#snippet template()}
+    <div class="ui:w-[360px] ui:rounded-2xl ui:border ui:bg-background ui:p-4">
+      <NewsfeedReactions
+        bind:open={openPopover}
+        reactionCounts={openReactionCounts}
+        selectedReactionType={openSelectedReaction}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Interactive">
+  {#snippet template()}
+    <div class="ui:w-[360px] ui:rounded-2xl ui:border ui:bg-background ui:p-4">
+      <NewsfeedReactions
+        bind:open={interactivePopover}
+        reactionCounts={interactiveReactionCounts}
+        selectedReactionType={interactiveSelectedReaction}
+        onReactionToggle={(reactionType) => {
+          interactiveReactionCounts = updateCounts(
+            interactiveReactionCounts,
+            reactionType,
+            interactiveSelectedReaction
+          );
+          interactiveSelectedReaction = interactiveSelectedReaction === reactionType ? null : reactionType;
+        }}
+      />
+      <p class="ui:mt-3 ui:text-sm ui:text-muted-foreground">
+        Click the trigger, pick a reaction, then click the active reaction again to clear it.
+      </p>
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/molecules/question-type-picker/question-type-picker.stories.svelte b/packages/storybook/src/molecules/question-type-picker/question-type-picker.stories.svelte
new file mode 100644
index 00000000..31fb672a
--- /dev/null
+++ b/packages/storybook/src/molecules/question-type-picker/question-type-picker.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { QuestionTypePicker } from '@cio/ui';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/QuestionTypePicker',
+    component: QuestionTypePicker,
+    parameters: {
+      layout: 'padded',
+      docs: {
+        description: {
+          component:
+            'Marketing-style question type picker with a left nav and live take-mode previews. Also published as a CDN embed (`apps/embeds`).'
+        }
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="ui:max-w-5xl">
+      <QuestionTypePicker />
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/molecules/resource-list-row/fields.ts b/packages/storybook/src/molecules/resource-list-row/fields.ts
new file mode 100644
index 00000000..9fd6e786
--- /dev/null
+++ b/packages/storybook/src/molecules/resource-list-row/fields.ts
@@ -0,0 +1,2 @@
+/** Controls surfaced in Storybook for `ResourceListRow.Root`. */
+export const FIELDS = ['variant', 'size', 'align', 'density', 'class'] as string[];
diff --git a/packages/storybook/src/molecules/resource-list-row/resource-list-row.stories.svelte b/packages/storybook/src/molecules/resource-list-row/resource-list-row.stories.svelte
new file mode 100644
index 00000000..26727fe7
--- /dev/null
+++ b/packages/storybook/src/molecules/resource-list-row/resource-list-row.stories.svelte
@@ -0,0 +1,449 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
+  import * as Item from '@cio/ui/base/item';
+  import * as Avatar from '@cio/ui/base/avatar';
+  import * as Checkbox from '@cio/ui/base/checkbox';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import { Badge } from '@cio/ui/base/badge';
+  import { Button } from '@cio/ui/base/button';
+
+  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+  import ListChecksIcon from '@lucide/svelte/icons/list-checks';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import GitBranchIcon from '@lucide/svelte/icons/git-branch';
+  import GitCommitHorizontalIcon from '@lucide/svelte/icons/git-commit-horizontal';
+  import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+  import UserIcon from '@lucide/svelte/icons/user';
+
+  import { FIELDS } from './fields';
+
+  /** Storybook-only sample data for the courses-style list row. */
+  const sampleCourses = [
+    {
+      title: 'Introduction to Python',
+      type: 'Self-paced',
+      lastUpdated: 'Last updated Mar 28, 2026',
+      tags: ['Beginner', 'Programming'],
+      lessons: 24,
+      exercises: 12,
+      students: 128,
+      published: true
+    },
+    {
+      title: 'Advanced TypeScript',
+      type: 'Live',
+      lastUpdated: 'Last updated Mar 26, 2026',
+      tags: ['TypeScript', 'Advanced'],
+      lessons: 18,
+      exercises: 9,
+      students: 42,
+      published: true
+    },
+    {
+      title: 'Draft: Data visualization',
+      type: 'Self-paced',
+      lastUpdated: 'Last updated Mar 20, 2026',
+      tags: [],
+      lessons: 6,
+      exercises: 2,
+      students: 0,
+      published: false
+    }
+  ];
+
+  const { Story } = defineMeta({
+    title: 'Molecules/ResourceListRow',
+    component: ResourceListRow.Root,
+    args: {
+      variant: 'default',
+      size: 'sm',
+      align: 'start',
+      density: 'default',
+      class: ''
+    },
+    argTypes: {
+      variant: {
+        control: 'select',
+        options: ['default', 'outline', 'muted', 'muted-border'],
+        description: 'Passed through to `Item.Root` (border / background).'
+      },
+      size: {
+        control: 'select',
+        options: ['default', 'sm'],
+        description: 'Item padding and gap (`Item` size variant).'
+      },
+      align: {
+        control: 'select',
+        options: ['center', 'start'],
+        description: 'Vertical alignment of row sections (e.g. start for multi-line cells).'
+      },
+      density: {
+        control: 'select',
+        options: ['default', 'toolbar'],
+        description: '`toolbar` tightens padding for a “select all” style header; otherwise use default.'
+      },
+      class: {
+        control: 'text',
+        description: 'Extra classes merged onto the row (Tailwind / `ui:`).'
+      },
+      child: { control: false },
+      children: { control: false },
+      ref: { control: false }
+    },
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    {@const studentAvatarSrc = [
+      'https://github.com/shadcn.png',
+      'https://github.com/maxleiter.png',
+      'https://github.com/evilrabbit.png'
+    ]}
+    <ResourceListRow.Group class="w-3xl">
+      {#each sampleCourses as course (course.title)}
+        <ResourceListRow.Root variant="default" align="start" class="ui:cursor-pointer ui:py-3">
+          <div
+            class="ui:grid ui:w-full ui:items-start ui:gap-3"
+            style="grid-template-columns: 2fr 5.5rem 2fr 4.5rem 6rem 2.5rem"
+          >
+            <!-- Title -->
+            <div class="ui:flex ui:min-w-0 ui:flex-col ui:gap-0.5">
+              <p class="ui:line-clamp-1 ui:font-semibold ui:text-sm">{course.title}</p>
+              <p class="ui:text-muted-foreground ui:mt-0.5 ui:text-sm">{course.type}</p>
+              <p class="ui:text-muted-foreground ui:mt-0.5 ui:text-xs">{course.lastUpdated}</p>
+            </div>
+
+            <!-- Published -->
+            <div>
+              {#if course.published}
+                <Badge variant="success" class="ui:whitespace-nowrap">Published</Badge>
+              {:else}
+                <Badge variant="secondary" class="ui:whitespace-nowrap">Draft</Badge>
+              {/if}
+            </div>
+
+            <!-- Tags -->
+            <div class="ui:flex ui:min-w-0 ui:flex-wrap ui:items-center ui:gap-1">
+              {#if course.tags.length === 0}
+                <span class="ui:text-muted-foreground ui:text-xs">—</span>
+              {:else}
+                {#each course.tags as tag (tag)}
+                  <Badge variant="outline" class="ui:max-w-[140px] ui:truncate">{tag}</Badge>
+                {/each}
+              {/if}
+            </div>
+
+            <!-- Lessons / exercises -->
+            <div class="ui:flex ui:flex-col ui:gap-1 ui:tabular-nums">
+              <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm" aria-label="{course.lessons} lessons">
+                <BookOpenIcon class="ui:text-muted-foreground ui:size-3.5 ui:shrink-0" aria-hidden="true" />
+                <span class="ui:font-medium">{course.lessons}</span>
+              </p>
+              <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm" aria-label="{course.exercises} exercises">
+                <ListChecksIcon class="ui:text-muted-foreground ui:size-3.5 ui:shrink-0" aria-hidden="true" />
+                <span class="ui:font-medium">{course.exercises}</span>
+              </p>
+            </div>
+
+            <!-- Students -->
+            <div class="flex items-center gap-1">
+              {#if course.students > 0}
+                <div class="flex -space-x-2">
+                  {#each studentAvatarSrc as src, index (src)}
+                    {#if index < Math.min(2, course.students)}
+                      <Avatar.Root class="ui:size-6 ui:border-2 ui:border-background">
+                        <Avatar.Image {src} alt="" />
+                        <Avatar.Fallback>?</Avatar.Fallback>
+                      </Avatar.Root>
+                    {/if}
+                  {/each}
+                  {#if course.students > 2}
+                    <Avatar.Root class="ui:size-6 ui:border-2 ui:border-background">
+                      <Avatar.Fallback class="ui:text-[10px]">+{course.students - 2}</Avatar.Fallback>
+                    </Avatar.Root>
+                  {/if}
+                </div>
+              {:else}
+                <Avatar.Root class="ui:size-6">
+                  <Avatar.Fallback>
+                    <UserIcon class="ui:size-3 ui:text-muted-foreground" />
+                  </Avatar.Fallback>
+                </Avatar.Root>
+                <p class="ui:text-xs">0</p>
+              {/if}
+            </div>
+
+            <!-- Actions -->
+            <div class="ui:flex ui:justify-end">
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                  {#snippet child({ props })}
+                    <Button
+                      {...props}
+                      variant="ghost"
+                      size="icon"
+                      class="ui:size-8"
+                      aria-label="Course actions"
+                      onclick={(e) => e.stopPropagation()}
+                    >
+                      <EllipsisVerticalIcon class="ui:size-4" />
+                    </Button>
+                  {/snippet}
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  <DropdownMenu.Item>Open</DropdownMenu.Item>
+                  <DropdownMenu.Item>Clone</DropdownMenu.Item>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Item variant="destructive">Delete</DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+          </div>
+        </ResourceListRow.Root>
+      {/each}
+    </ResourceListRow.Group>
+  {/snippet}
+</Story>
+
+<Story name="DomainStyle">
+  {#snippet template()}
+    <ResourceListRow.Group class="w-3xl!">
+      <ResourceListRow.Root density="toolbar">
+        <ResourceListRow.Lead>
+          <Checkbox.Root aria-label="Select all domains" />
+        </ResourceListRow.Lead>
+        <ResourceListRow.Main>
+          <span class="ui:text-sm ui:font-semibold">Select all</span>
+        </ResourceListRow.Main>
+        <Item.Actions>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              {#snippet child({ props })}
+                <Button {...props} variant="ghost" size="icon" class="ui:size-8" aria-label="Bulk actions">
+                  <MoreHorizontalIcon class="ui:size-4" />
+                </Button>
+              {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+              <DropdownMenu.Item>Export</DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Item.Actions>
+      </ResourceListRow.Root>
+      <ResourceListRow.Root>
+        <ResourceListRow.Lead>
+          <Checkbox.Root aria-label="Select fastlearner.io" />
+        </ResourceListRow.Lead>
+        <ResourceListRow.Main>
+          <Item.Title class="ui:font-semibold">fastlearner.io</Item.Title>
+          <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm ui:text-amber-800 dark:ui:text-amber-200">
+            <ClockIcon class="ui:size-3.5 ui:shrink-0" />
+            Expires 16 Jan 2027
+          </p>
+        </ResourceListRow.Main>
+        <ResourceListRow.End>
+          <span class="ui:text-muted-foreground ui:text-sm">Jan 16</span>
+          <Avatar.Root class="ui:size-8">
+            <Avatar.Image src="https://github.com/shadcn.png" alt="" />
+            <Avatar.Fallback>CN</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+        <Item.Actions>
+          <Button variant="ghost" size="icon" class="ui:size-8" aria-label="Row actions">
+            <MoreHorizontalIcon class="ui:size-4" />
+          </Button>
+        </Item.Actions>
+      </ResourceListRow.Root>
+      <ResourceListRow.Root>
+        <ResourceListRow.Lead>
+          <Checkbox.Root aria-label="Select macusaone.com" />
+        </ResourceListRow.Lead>
+        <ResourceListRow.Main>
+          <Item.Title class="ui:font-semibold">macusaone.com</Item.Title>
+          <p class="ui:text-muted-foreground ui:text-sm">Third Party</p>
+        </ResourceListRow.Main>
+        <ResourceListRow.End>
+          <span class="ui:text-muted-foreground ui:text-sm">11/20/25</span>
+          <Avatar.Root class="ui:size-8">
+            <Avatar.Image src="https://github.com/maxleiter.png" alt="" />
+            <Avatar.Fallback>ML</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+        <Item.Actions>
+          <Button variant="ghost" size="icon" class="ui:size-8" aria-label="Row actions">
+            <MoreHorizontalIcon class="ui:size-4" />
+          </Button>
+        </Item.Actions>
+      </ResourceListRow.Root>
+    </ResourceListRow.Group>
+  {/snippet}
+</Story>
+
+<Story name="WithoutSelection">
+  {#snippet template()}
+    <ResourceListRow.Group class="w-3xl!">
+      <ResourceListRow.Root>
+        <ResourceListRow.Main>
+          <Item.Title class="ui:font-semibold">fastlearner.io</Item.Title>
+          <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm ui:text-amber-800 dark:ui:text-amber-200">
+            <ClockIcon class="ui:size-3.5 ui:shrink-0" />
+            Expires 16 Jan 2027
+          </p>
+        </ResourceListRow.Main>
+        <ResourceListRow.End>
+          <span class="ui:text-muted-foreground ui:text-sm">Jan 16</span>
+          <Avatar.Root class="ui:size-8">
+            <Avatar.Image src="https://github.com/shadcn.png" alt="" />
+            <Avatar.Fallback>CN</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+        <Item.Actions>
+          <Button variant="ghost" size="icon" class="ui:size-8" aria-label="Row actions">
+            <MoreHorizontalIcon class="ui:size-4" />
+          </Button>
+        </Item.Actions>
+      </ResourceListRow.Root>
+      <ResourceListRow.Root>
+        <ResourceListRow.Main>
+          <Item.Title class="ui:font-semibold">macusaone.com</Item.Title>
+          <p class="ui:text-muted-foreground ui:text-sm">Third Party</p>
+        </ResourceListRow.Main>
+        <ResourceListRow.End>
+          <span class="ui:text-muted-foreground ui:text-sm">11/20/25</span>
+          <Avatar.Root class="ui:size-8">
+            <Avatar.Image src="https://github.com/maxleiter.png" alt="" />
+            <Avatar.Fallback>ML</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+        <Item.Actions>
+          <Button variant="ghost" size="icon" class="ui:size-8" aria-label="Row actions">
+            <MoreHorizontalIcon class="ui:size-4" />
+          </Button>
+        </Item.Actions>
+      </ResourceListRow.Root>
+    </ResourceListRow.Group>
+  {/snippet}
+</Story>
+
+<Story name="Density">
+  {#snippet template()}
+    <div class="ui:text-muted-foreground ui:mb-3 ui:w-full ui:max-w-md ui:text-xs">
+      Use rows inside <code>ResourceListGroup</code>. Optional <code>density=&quot;toolbar&quot;</code> shortens the row
+      for a “select all” header.
+    </div>
+    <ResourceListRow.Group class="max-w-md">
+      <ResourceListRow.Root density="default">
+        <ResourceListRow.Main>
+          <span class="ui:text-sm ui:font-medium">density=&quot;default&quot;</span>
+        </ResourceListRow.Main>
+      </ResourceListRow.Root>
+      <ResourceListRow.Root density="toolbar">
+        <ResourceListRow.Main>
+          <span class="ui:text-sm ui:font-medium">density=&quot;toolbar&quot;</span>
+        </ResourceListRow.Main>
+      </ResourceListRow.Root>
+    </ResourceListRow.Group>
+  {/snippet}
+</Story>
+
+<Story name="DeploymentStyle">
+  {#snippet template()}
+    <ResourceListRow.Group class="w-5xl">
+      <ResourceListRow.Root align="start" class="ui:py-3">
+        <ResourceListRow.Main class="ui:max-w-[140px]">
+          <span class="ui:font-mono ui:text-sm ui:font-semibold">2CSQFANmQ</span>
+          <button
+            type="button"
+            class="ui:text-primary ui:w-fit ui:text-left ui:text-xs ui:underline ui:underline-offset-2"
+          >
+            Preview
+          </button>
+        </ResourceListRow.Main>
+        <div class="ui:flex ui:min-w-0 ui:shrink-0 ui:items-center ui:gap-2 ui:px-2">
+          <span class="ui:bg-destructive ui:size-2 ui:shrink-0 ui:rounded-full" aria-hidden="true"></span>
+          <div class="ui:flex ui:min-w-0 ui:flex-col ui:gap-0.5">
+            <span class="ui:text-sm ui:font-medium">Error</span>
+            <span class="ui:text-muted-foreground ui:text-xs">3s</span>
+          </div>
+        </div>
+        <div class="ui:flex ui:shrink-0 ui:items-center ui:gap-2 ui:px-2">
+          <span class="ui:flex ui:size-6 ui:items-center ui:justify-center ui:rounded-full ui:bg-blue-600/15">
+            <span class="ui:size-2 ui:rounded-full ui:bg-blue-600"></span>
+          </span>
+          <span class="ui:text-sm">cio-com</span>
+        </div>
+        <div class="ui:min-w-0 ui:flex-1 ui:px-2">
+          <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm">
+            <GitBranchIcon class="ui:text-muted-foreground ui:size-3.5 ui:shrink-0" />
+            <span class="ui:truncate">release-v2/debug-course</span>
+          </p>
+          <p class="ui:text-muted-foreground ui:flex ui:items-center ui:gap-1.5 ui:truncate ui:text-xs">
+            <GitCommitHorizontalIcon class="ui:size-3.5 ui:shrink-0" />
+            <span class="ui:truncate">b00bf14 fix: move org id into the inv…</span>
+          </p>
+        </div>
+        <ResourceListRow.End class="ui:flex-col ui:items-end ui:gap-1 ui:self-start">
+          <span class="ui:text-muted-foreground ui:text-xs">Mar 30</span>
+          <span class="ui:text-muted-foreground ui:text-xs">by Chifez</span>
+          <Avatar.Root class="ui:size-6">
+            <Avatar.Image src="https://github.com/shadcn.png" alt="" />
+            <Avatar.Fallback>C</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+      </ResourceListRow.Root>
+      <ResourceListRow.Root align="start" class="ui:py-3">
+        <ResourceListRow.Main class="ui:max-w-[140px]">
+          <span class="ui:font-mono ui:text-sm ui:font-semibold">AiS1LEGci</span>
+          <button
+            type="button"
+            class="ui:text-primary ui:w-fit ui:text-left ui:text-xs ui:underline ui:underline-offset-2"
+          >
+            Preview
+          </button>
+        </ResourceListRow.Main>
+        <div class="ui:flex ui:min-w-0 ui:shrink-0 ui:items-center ui:gap-2 ui:px-2">
+          <span class="ui:bg-destructive ui:size-2 ui:shrink-0 ui:rounded-full" aria-hidden="true"></span>
+          <div class="ui:flex ui:min-w-0 ui:flex-col ui:gap-0.5">
+            <span class="ui:text-sm ui:font-medium">Error</span>
+            <span class="ui:text-muted-foreground ui:text-xs">8s</span>
+          </div>
+        </div>
+        <div class="ui:flex ui:shrink-0 ui:items-center ui:gap-2 ui:px-2">
+          <span class="ui:flex ui:size-6 ui:items-center ui:justify-center ui:rounded-full ui:bg-blue-600/15">
+            <span class="ui:size-2 ui:rounded-full ui:bg-blue-600"></span>
+          </span>
+          <span class="ui:text-sm">cio-docs</span>
+        </div>
+        <div class="ui:min-w-0 ui:flex-1 ui:px-2">
+          <p class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm">
+            <GitBranchIcon class="ui:text-muted-foreground ui:size-3.5 ui:shrink-0" />
+            <span class="ui:truncate">feat/release-v2</span>
+          </p>
+          <p class="ui:text-muted-foreground ui:flex ui:items-center ui:gap-1.5 ui:truncate ui:text-xs">
+            <GitCommitHorizontalIcon class="ui:size-3.5 ui:shrink-0" />
+            <span class="ui:truncate">a1b2c3d docs: update API reference</span>
+          </p>
+        </div>
+        <ResourceListRow.End class="ui:flex-col ui:items-end ui:gap-1 ui:self-start">
+          <span class="ui:text-muted-foreground ui:text-xs">Mar 29</span>
+          <span class="ui:text-muted-foreground ui:text-xs">by rotimi-best</span>
+          <Avatar.Root class="ui:size-6">
+            <Avatar.Image src="https://github.com/maxleiter.png" alt="" />
+            <Avatar.Fallback>R</Avatar.Fallback>
+          </Avatar.Root>
+        </ResourceListRow.End>
+      </ResourceListRow.Root>
+    </ResourceListRow.Group>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/templates/org-landing-page/fixtures.ts b/packages/storybook/src/templates/org-landing-page/fixtures.ts
new file mode 100644
index 00000000..7f93f53d
--- /dev/null
+++ b/packages/storybook/src/templates/org-landing-page/fixtures.ts
@@ -0,0 +1,133 @@
+import type { OrgLandingPageProps } from '@cio/ui/custom/org-landing-page/types';
+
+export const mockProps: OrgLandingPageProps = {
+  orgName: 'Certifi Academy',
+  logoUrl: 'https://ui-avatars.com/api/?name=CA&background=0f172a&color=fff',
+  navItems: [
+    { label: 'Programs', href: '#courses' },
+    { label: 'About', href: '#about' },
+    { label: 'Contact', href: '#contact' },
+    { label: 'Sign In', href: '#signin' }
+  ],
+  hero: {
+    heading: 'Become a Certified AI Engineer',
+    subheading: 'Master the skills, earn your certification, and prove your expertise with hands-on training programs.',
+    primaryAction: { label: 'Get Started', href: '#courses' },
+    secondaryAction: { label: 'View Programs', href: '#about' },
+    image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80'
+  },
+  courses: [
+    {
+      id: '1',
+      slug: 'workplace-safety-certification',
+      title: 'Workplace Safety Certification',
+      description:
+        'OSHA-aligned training covering hazard identification, emergency procedures, and workplace safety best practices.',
+      logo: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+      cost: 0,
+      currency: 'USD',
+      type: 'SELF_PACED',
+      lessonCount: 12,
+      exerciseCount: 6,
+      totalStudents: 4350,
+      duration: '3 hours',
+      tags: [
+        { id: 'tag-1', name: 'Required', slug: 'required', color: '#dc2626' },
+        { id: 'tag-2', name: 'Safety', slug: 'safety', color: '#16a34a' }
+      ]
+    },
+    {
+      id: '2',
+      slug: 'data-privacy-gdpr',
+      title: 'Data Privacy & GDPR Compliance',
+      description:
+        'Comprehensive program covering data handling, privacy regulations, GDPR requirements, and breach response protocols.',
+      logo: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+      cost: 49.0,
+      currency: 'USD',
+      type: 'SELF_PACED',
+      lessonCount: 18,
+      exerciseCount: 10,
+      totalStudents: 2800,
+      duration: '5 hours',
+      tags: [
+        { id: 'tag-3', name: 'Compliance', slug: 'compliance', color: '#2563eb' },
+        { id: 'tag-4', name: 'Privacy', slug: 'privacy', color: '#7c3aed' }
+      ]
+    },
+    {
+      id: '3',
+      slug: 'anti-harassment-training',
+      title: 'Anti-Harassment & DEI Training',
+      description:
+        'State-mandated harassment prevention training with modules on inclusive workplace culture and bystander intervention.',
+      logo: 'https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+      cost: 0,
+      currency: 'USD',
+      type: 'SELF_PACED',
+      lessonCount: 8,
+      exerciseCount: 4,
+      totalStudents: 6100,
+      duration: '2 hours',
+      tags: [
+        { id: 'tag-5', name: 'Required', slug: 'required', color: '#dc2626' },
+        { id: 'tag-6', name: 'HR', slug: 'hr', color: '#f59e0b' }
+      ]
+    },
+    {
+      id: '4',
+      slug: 'information-security-certification',
+      title: 'Information Security Certification',
+      description:
+        'Prepare for SOC 2 and ISO 27001 audits with training on access controls, incident response, and security policies.',
+      logo: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+      cost: 99.0,
+      currency: 'USD',
+      type: 'SELF_PACED',
+      lessonCount: 24,
+      exerciseCount: 12,
+      totalStudents: 1920,
+      duration: '8 hours',
+      tags: [
+        { id: 'tag-7', name: 'Security', slug: 'security', color: '#0ea5e9' },
+        { id: 'tag-8', name: 'Certification', slug: 'certification', color: '#64748b' }
+      ],
+      metadata: {
+        showDiscount: true,
+        discount: 15
+      }
+    }
+  ],
+  embed: {
+    title: 'How Automated Certification Works',
+    description:
+      'See how teams use ClassroomIO to assign programs, track progress, and generate certificates — automatically.',
+    code: `
+      <div style="width: 100%; max-width: 720px; margin: 0 auto; border-radius: 24px; border: 1px solid rgba(148,163,184,.35); background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(15,23,42,.04)); padding: 32px; box-sizing: border-box;">
+        <div style="font-family: sans-serif;">
+          <p style="margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #64748b;">Platform demo</p>
+          <h4 style="margin: 0 0 12px; font-size: 28px; line-height: 1.1; color: #0f172a;">Automate Your Certification Workflow</h4>
+          <p style="margin: 0; font-size: 16px; line-height: 1.7; color: #334155;">
+            Assign programs to teams, set deadlines, and let the platform handle reminders, grading, and certificate generation.
+          </p>
+        </div>
+      </div>
+    `,
+    secondaryAction: {
+      label: 'Request a Demo',
+      href: '#contact'
+    }
+  },
+  callout: {
+    heading: 'Ready to simplify compliance?',
+    description:
+      'Launch your first certification program in minutes. Automate tracking, reduce risk, and keep your team certified.',
+    action: { label: 'Start Free', href: '#courses' }
+  },
+  footerLinks: [
+    { label: 'Terms of Service', href: '#terms' },
+    { label: 'Privacy Policy', href: '#privacy' },
+    { label: 'Support', href: '#support' }
+  ],
+  footerText: '© 2026 Certifi Academy. All rights reserved.'
+};
diff --git a/packages/storybook/src/templates/org-landing-page/org-landing-page.stories.svelte b/packages/storybook/src/templates/org-landing-page/org-landing-page.stories.svelte
new file mode 100644
index 00000000..7fa33588
--- /dev/null
+++ b/packages/storybook/src/templates/org-landing-page/org-landing-page.stories.svelte
@@ -0,0 +1,25 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { MinimalLandingPage, BoldLandingPage, ClassicLandingPage } from '@cio/ui/custom/org-landing-page';
+  import { mockProps } from './fixtures';
+
+  const { Story } = defineMeta({
+    title: 'Templates/Org Landing Page',
+    parameters: {
+      layout: 'fullscreen'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Minimal">
+  <MinimalLandingPage {...mockProps} />
+</Story>
+
+<Story name="Bold">
+  <BoldLandingPage {...mockProps} />
+</Story>
+
+<Story name="Classic">
+  <ClassicLandingPage {...mockProps} />
+</Story>
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 7450a155..69693ab6 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -63,6 +63,7 @@ Components in the `custom` directory come from various sources or are built on t
 - `custom/editor/` - Rich text editor based on Edra/Tiptap
 - `custom/image-cropper/` - Custom image cropping component
 - `custom/checkbox-field/` - Field component built on top of base Checkbox
+- `custom/newsfeed-reactions/` - Newsfeed reaction picker and summary used by course and program feeds
 
 ### Exercise question (`src/custom/exercise-question/`)
 
@@ -74,6 +75,10 @@ Learner and author UIs for exercise questions (take, preview, review, submission
 
 **Types with heavier or distinct UIs** (textarea editor, file upload, matching/hotspot authoring, link lists) intentionally keep separate `take` / `preview` implementations until a second consumer (for example a dedicated `review` mode) justifies extracting more shared fragments.
 
+### Question type picker (`src/custom/question-type-picker/`)
+
+Marketing / demo widget: left-hand list of question types and a live **take**-mode preview using `ExerciseQuestion.QuestionRenderer`. Copy is English-only (no dashboard i18n). Also consumed by the **`@cio/embeds`** app as a CDN bundle (`apps/embeds`).
+
 ### Hooks (`src/hooks/`)
 
 Reusable Svelte hooks are located in the `src/hooks/` directory. These are Svelte 5 runes-based utilities that can be used across components.
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 79b28615..3128eaa4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -78,6 +78,9 @@
     "tiptap-extension-auto-joiner": "^0.1.3"
   },
   "peerDependencies": {
-    "bits-ui": "^2.14.4"
+    "bits-ui": "^2.14.4",
+    "@lucide/svelte": "^0.545.0 || ^0.562.0",
+    "svelte-inview": "^4.0.4",
+    "svelte-motion": "^0.12.2"
   }
 }
diff --git a/packages/ui/src/base/dialog/dialog-description.svelte b/packages/ui/src/base/dialog/dialog-description.svelte
index 3dfc28f4..15a6c440 100644
--- a/packages/ui/src/base/dialog/dialog-description.svelte
+++ b/packages/ui/src/base/dialog/dialog-description.svelte
@@ -2,12 +2,21 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '../../tools';
 
-  let { ref = $bindable(null), class: className, ...restProps }: DialogPrimitive.DescriptionProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    children,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
 </script>
 
 <DialogPrimitive.Description
   bind:ref
   data-slot="dialog-description"
   class={cn('ui:text-muted-foreground ui:text-sm', className)}
+  {child}
   {...restProps}
-/>
+>
+  {@render children?.()}
+</DialogPrimitive.Description>
diff --git a/packages/ui/src/base/dialog/dialog-title.svelte b/packages/ui/src/base/dialog/dialog-title.svelte
index 5e530259..c4b9c6c3 100644
--- a/packages/ui/src/base/dialog/dialog-title.svelte
+++ b/packages/ui/src/base/dialog/dialog-title.svelte
@@ -2,12 +2,15 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '../../tools';
 
-  let { ref = $bindable(null), class: className, ...restProps }: DialogPrimitive.TitleProps = $props();
+  let { ref = $bindable(null), class: className, child, children, ...restProps }: DialogPrimitive.TitleProps = $props();
 </script>
 
 <DialogPrimitive.Title
   bind:ref
   data-slot="dialog-title"
   class={cn('ui:text-lg ui:font-semibold ui:leading-none', className)}
+  {child}
   {...restProps}
-/>
+>
+  {@render children?.()}
+</DialogPrimitive.Title>
diff --git a/packages/ui/src/base/dialog/dialog-trigger.svelte b/packages/ui/src/base/dialog/dialog-trigger.svelte
index a2e7178d..be91d751 100644
--- a/packages/ui/src/base/dialog/dialog-trigger.svelte
+++ b/packages/ui/src/base/dialog/dialog-trigger.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from 'bits-ui';
 
-  let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+  let { ref = $bindable(null), child, children, ...restProps }: DialogPrimitive.TriggerProps = $props();
 </script>
 
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {child} {...restProps}>
+  {@render children?.()}
+</DialogPrimitive.Trigger>
diff --git a/packages/ui/src/base/item/item.svelte b/packages/ui/src/base/item/item.svelte
index e3d810ed..f432b470 100644
--- a/packages/ui/src/base/item/item.svelte
+++ b/packages/ui/src/base/item/item.svelte
@@ -7,7 +7,8 @@
       variant: {
         default: 'ui:bg-transparent',
         outline: 'ui:border-border',
-        muted: 'ui:bg-muted/50'
+        muted: 'ui:bg-muted/50',
+        'muted-border': 'ui:border-border ui:bg-muted/50'
       },
       size: {
         default: 'ui:gap-4 ui:p-4',
diff --git a/packages/ui/src/base/page/page-header.svelte b/packages/ui/src/base/page/page-header.svelte
index 58613be1..a543ce5a 100644
--- a/packages/ui/src/base/page/page-header.svelte
+++ b/packages/ui/src/base/page/page-header.svelte
@@ -16,7 +16,11 @@
 <div
   bind:this={ref}
   data-slot="page-header"
-  class={cn('ui:flex ui:my-4 ui:py-2 ui:flex-col', isSticky && 'ui:sticky ui:top-13 ui:z-10 ui:bg-white', className)}
+  class={cn(
+    'ui:flex ui:my-4 ui:py-2 ui:flex-col',
+    isSticky && 'ui:sticky ui:top-13 ui:z-10 ui:bg-background',
+    className
+  )}
   {...restProps}
 >
   <div class="ui:flex ui:items-start ui:justify-between ui:gap-4 ui:flex-col ui:md:flex-row">
diff --git a/apps/course-app/src/lib/components/animation/blurfade/blurfade.svelte b/packages/ui/src/custom/animation/blurfade/blurfade.svelte
similarity index 63%
rename from apps/course-app/src/lib/components/animation/blurfade/blurfade.svelte
rename to packages/ui/src/custom/animation/blurfade/blurfade.svelte
index 91b933f7..a0e09e47 100644
--- a/apps/course-app/src/lib/components/animation/blurfade/blurfade.svelte
+++ b/packages/ui/src/custom/animation/blurfade/blurfade.svelte
@@ -1,7 +1,19 @@
 <script lang="ts">
   import { Motion, AnimatePresence } from 'svelte-motion';
   import { inview } from 'svelte-inview';
-  import { cn } from '$lib/utils';
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    duration?: number;
+    delay?: number;
+    yOffset?: number;
+    inViewMargin?: string;
+    blur?: string;
+    once?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
 
   let {
     duration = 0.4,
@@ -10,15 +22,17 @@
     inViewMargin = '-50px',
     blur = '6px',
     once = false,
-    class: className = ''
-  } = $props();
-  let id = $state(crypto.randomUUID().slice(0, 8));
-  let isInView = $state('hidden');
+    class: className = '',
+    children
+  }: Props = $props();
 
-  let defaultVariants = {
+  const id = crypto.randomUUID().slice(0, 8);
+  let isInView = $state<'hidden' | 'visible'>('hidden');
+
+  const defaultVariants = $derived({
     hidden: { opacity: 0, y: yOffset, filter: `blur(${blur})` },
     visible: { opacity: 1, y: 0, filter: `blur(0px)` }
-  };
+  });
 </script>
 
 <AnimatePresence let:item list={[{ key: id }]}>
@@ -42,7 +56,7 @@
       }}
       class={cn(className)}
     >
-      <slot>Default</slot>
+      {@render children?.()}
     </div>
   </Motion>
 </AnimatePresence>
diff --git a/apps/course-app/src/lib/components/animation/blurfade/index.ts b/packages/ui/src/custom/animation/blurfade/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/blurfade/index.ts
rename to packages/ui/src/custom/animation/blurfade/index.ts
diff --git a/packages/ui/src/custom/animation/blurin/blurin.svelte b/packages/ui/src/custom/animation/blurin/blurin.svelte
new file mode 100644
index 00000000..5c31a92c
--- /dev/null
+++ b/packages/ui/src/custom/animation/blurin/blurin.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import { Motion } from 'svelte-motion';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: {
+      hidden: { filter: string; opacity: number };
+      visible: { filter: string; opacity: number };
+    };
+    duration?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant,
+    duration = 1,
+    class: className = 'text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-20',
+    children
+  }: Props = $props();
+
+  const defaultVariants = {
+    hidden: { filter: 'blur(10px)', opacity: 0 },
+    visible: { filter: 'blur(0px)', opacity: 1 }
+  };
+  const combinedVariants = $derived(variant ?? defaultVariants);
+</script>
+
+<Motion initial="hidden" animate="visible" transition={{ duration }} variants={combinedVariants} let:motion>
+  <h1 class={cn(className)} use:motion>
+    {@render children?.()}
+  </h1>
+</Motion>
diff --git a/apps/course-app/src/lib/components/animation/blurin/index.ts b/packages/ui/src/custom/animation/blurin/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/blurin/index.ts
rename to packages/ui/src/custom/animation/blurin/index.ts
diff --git a/packages/ui/src/custom/animation/border-beam/border-beam.svelte b/packages/ui/src/custom/animation/border-beam/border-beam.svelte
new file mode 100644
index 00000000..ca73f848
--- /dev/null
+++ b/packages/ui/src/custom/animation/border-beam/border-beam.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+
+  interface Props {
+    size?: number;
+    duration?: number;
+    anchor?: number;
+    borderWidth?: number;
+    colorFrom?: string;
+    colorTo?: string;
+    delay?: number;
+    class?: string;
+  }
+
+  let {
+    size = 200,
+    duration = 15,
+    anchor = 90,
+    borderWidth = 1.5,
+    colorFrom = '#ffaa40',
+    colorTo = '#9c40ff',
+    delay = 0,
+    class: className = ''
+  }: Props = $props();
+</script>
+
+<div
+  style:--border-width={borderWidth}
+  style:--size={size}
+  style:--color-from={colorFrom}
+  style:--color-to={colorTo}
+  style:--delay="{delay}s"
+  style:--anchor={anchor}
+  style:--duration={duration}
+  class={cn('cio-marketing-border-beam', className)}
+></div>
diff --git a/apps/course-app/src/lib/components/animation/border-beam/index.ts b/packages/ui/src/custom/animation/border-beam/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/border-beam/index.ts
rename to packages/ui/src/custom/animation/border-beam/index.ts
diff --git a/packages/ui/src/custom/animation/card/body.svelte b/packages/ui/src/custom/animation/card/body.svelte
new file mode 100644
index 00000000..78ac48ad
--- /dev/null
+++ b/packages/ui/src/custom/animation/card/body.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    className?: string;
+    children: Snippet;
+  }
+
+  let { children, className }: Props = $props();
+</script>
+
+<div class={cn('p-4 text-left', className)}>
+  {@render children()}
+</div>
diff --git a/apps/course-app/src/lib/components/animation/card/container.svelte b/packages/ui/src/custom/animation/card/container.svelte
similarity index 50%
rename from apps/course-app/src/lib/components/animation/card/container.svelte
rename to packages/ui/src/custom/animation/card/container.svelte
index 48b492ba..ad684a28 100644
--- a/apps/course-app/src/lib/components/animation/card/container.svelte
+++ b/packages/ui/src/custom/animation/card/container.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+  import { cn } from '../../../tools';
   import Ellipses from './ellipses.svelte';
+  import type { Snippet } from 'svelte';
 
-  type Props = {
+  interface Props {
     className?: string;
-  };
+    children?: Snippet;
+  }
 
-  let { className }: Props = $props();
+  let { className, children }: Props = $props();
 </script>
 
 <div
@@ -15,16 +17,12 @@
     className
   )}
 >
-  <div
-    class="absolute left-0 top-4 -z-0 h-px w-full bg-zinc-400 sm:top-6 md:top-8 dark:bg-zinc-700"
-  ></div>
-  <div
-    class="absolute bottom-4 left-0 z-0 h-px w-full bg-zinc-400 sm:bottom-6 md:bottom-8 dark:bg-zinc-700"
-  ></div>
+  <div class="absolute top-4 left-0 z-0 h-px w-full bg-zinc-400 sm:top-6 md:top-8 dark:bg-zinc-700"></div>
+  <div class="absolute bottom-4 left-0 z-0 h-px w-full bg-zinc-400 sm:bottom-6 md:bottom-8 dark:bg-zinc-700"></div>
   <div class="relative w-full border-x border-zinc-400 dark:border-zinc-700">
     <Ellipses />
     <div class="relative z-20 mx-auto py-8">
-      <slot>Default</slot>
+      {@render children?.()}
     </div>
   </div>
 </div>
diff --git a/packages/ui/src/custom/animation/card/ellipses.svelte b/packages/ui/src/custom/animation/card/ellipses.svelte
new file mode 100644
index 00000000..68e0c976
--- /dev/null
+++ b/packages/ui/src/custom/animation/card/ellipses.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  const sharedClass =
+    'rounded-full outline outline-8 dark:outline-gray-950 sm:my-6 md:my-8 size-1 my-4 outline-gray-50 bg-green-400';
+</script>
+
+<div class="absolute z-0 grid h-full w-full items-center gap-8 lg:grid-cols-2">
+  <section class="absolute z-0 grid h-full w-full grid-cols-2 place-content-between">
+    <div class={`${sharedClass} -mx-[2.5px]`}></div>
+    <div class={`${sharedClass} -mx-[2px] place-self-end`}></div>
+    <div class={`${sharedClass} -mx-[2.5px]`}></div>
+    <div class={`${sharedClass} -mx-[2px] place-self-end`}></div>
+  </section>
+</div>
diff --git a/apps/course-app/src/lib/components/animation/card/index.ts b/packages/ui/src/custom/animation/card/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/card/index.ts
rename to packages/ui/src/custom/animation/card/index.ts
diff --git a/packages/ui/src/custom/animation/dot-pattern/dot-pattern.svelte b/packages/ui/src/custom/animation/dot-pattern/dot-pattern.svelte
new file mode 100644
index 00000000..ffa22a18
--- /dev/null
+++ b/packages/ui/src/custom/animation/dot-pattern/dot-pattern.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    width?: string | number;
+    height?: string | number;
+    x?: number;
+    y?: number;
+    cx?: number;
+    cy?: number;
+    cr?: number;
+    fillColor?: string;
+    class?: string;
+  }
+
+  let {
+    width = 16,
+    height = 16,
+    x = 0,
+    y = 0,
+    cx = 1,
+    cy = 1,
+    cr = 1,
+    fillColor = 'rgb(163 163 163 / 0.8)',
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const patternId = crypto.randomUUID().toString().slice(0, 10);
+</script>
+
+<svg
+  aria-hidden="true"
+  class={cn('pointer-events-none absolute inset-0 h-full w-full', className)}
+  {...restProps}
+  fill={fillColor}
+>
+  <defs>
+    <pattern id={patternId} {width} {height} patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" {x} {y}>
+      <circle id="pattern-circle" {cx} {cy} r={cr} />
+    </pattern>
+  </defs>
+  <rect width="100%" height="100%" stroke-width={0} fill={`url(#${patternId})`} />
+</svg>
diff --git a/apps/course-app/src/lib/components/animation/dot-pattern/index.ts b/packages/ui/src/custom/animation/dot-pattern/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/dot-pattern/index.ts
rename to packages/ui/src/custom/animation/dot-pattern/index.ts
diff --git a/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte b/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte
new file mode 100644
index 00000000..af505ca1
--- /dev/null
+++ b/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import { AnimatePresence, Motion } from 'svelte-motion';
+
+  interface Props {
+    class?: string;
+    /** Applied to the flex row wrapper (e.g. alignment). */
+    containerClass?: string;
+    words?: string;
+    duration?: number;
+    delayMultiple?: number;
+    framerProps?: {
+      hidden: { opacity: number; x: number };
+      visible: { opacity: number; x: number };
+    };
+  }
+
+  let {
+    class: className = 'drop-shadow-sm',
+    containerClass = '',
+    words = 'Gradual Spacing',
+    duration = 0.5,
+    delayMultiple = 0.04,
+    framerProps = {
+      hidden: { opacity: 0, x: -20 },
+      visible: { opacity: 1, x: 0 }
+    }
+  }: Props = $props();
+
+  const wordsspilit = $derived(words.split(''));
+</script>
+
+<div class={cn('flex justify-center space-x-1', containerClass)}>
+  <AnimatePresence let:item list={[{ key: wordsspilit }]}>
+    {#each wordsspilit as char, i}
+      <Motion
+        initial="hidden"
+        animate="visible"
+        exit="hidden"
+        variants={framerProps}
+        transition={{
+          duration,
+          delay: i * delayMultiple
+        }}
+        let:motion
+      >
+        <span use:motion class={cn(className)}>
+          {#if char === ' '}
+            <span>&nbsp;</span>
+          {:else}
+            {char}
+          {/if}
+        </span>
+      </Motion>
+    {/each}
+  </AnimatePresence>
+</div>
diff --git a/apps/course-app/src/lib/components/animation/gradual-spacing/index.ts b/packages/ui/src/custom/animation/gradual-spacing/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/gradual-spacing/index.ts
rename to packages/ui/src/custom/animation/gradual-spacing/index.ts
diff --git a/apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte b/packages/ui/src/custom/animation/hero-video-dialog/hero-video-dialog.svelte
similarity index 58%
rename from apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte
rename to packages/ui/src/custom/animation/hero-video-dialog/hero-video-dialog.svelte
index 3d4df369..3af37852 100644
--- a/apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte
+++ b/packages/ui/src/custom/animation/hero-video-dialog/hero-video-dialog.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
   import { AnimatePresence, Motion } from 'svelte-motion';
-  import { Play, X } from 'lucide-svelte';
+  import { Play, X } from '@lucide/svelte';
 
   type AnimationStyle =
     | 'from-bottom'
@@ -13,32 +12,38 @@
     | 'top-in-bottom-out'
     | 'left-in-right-out';
 
-  // interface HeroVideoProps {
-  // 	animationStyle?: AnimationStyle;
-  // 	videoSrc: string;
-  // 	thumbnailSrc: string;
-  // 	thumbnailAlt?: string;
-  // }
+  interface Props {
+    animationStyle?: AnimationStyle;
+    videoSrc: string;
+    thumbnailSrc: string;
+    thumbnailAlt?: string;
+    iconColor?: string;
+  }
 
-  export let animationStyle: AnimationStyle = 'from-center';
-  export let videoSrc: string;
-  export let thumbnailSrc: string;
-  export let thumbnailAlt: string = 'Video thumbnail';
-  export let iconColor: string = 'white';
+  let {
+    animationStyle = 'from-center',
+    videoSrc,
+    thumbnailSrc,
+    thumbnailAlt = 'Video thumbnail',
+    iconColor = 'white'
+  }: Props = $props();
 
-  const isVideoOpen = writable(false);
-  const isCloseHovered = writable(false);
-  const isPlayHovered = writable(false);
+  let isVideoOpen = $state(false);
+  let isCloseHovered = $state(false);
+  let isPlayHovered = $state(false);
 
   function openVideo() {
-    isVideoOpen.set(true);
+    isVideoOpen = true;
   }
 
   function closeVideo() {
-    isVideoOpen.set(false);
+    isVideoOpen = false;
   }
 
-  let animationVariants = {
+  const animationVariants: Record<
+    AnimationStyle,
+    { initial: Record<string, number>; animate: Record<string, number>; exit: Record<string, number> }
+  > = {
     'from-bottom': {
       initial: { y: 100, opacity: 0 },
       animate: { y: 0, opacity: 1 },
@@ -81,14 +86,13 @@
     }
   };
 
-  $: selectedAnimation = animationVariants[animationStyle];
+  const selectedAnimation = $derived(animationVariants[animationStyle]);
 </script>
 
 <div class="relative">
-  <!-- Thumbnail -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="relative cursor-pointer" on:click={openVideo}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="relative cursor-pointer" onclick={openVideo} role="presentation">
     <img
       src={thumbnailSrc}
       alt={thumbnailAlt}
@@ -96,38 +100,33 @@
       height={1080}
       class="w-full rounded-2xl transition-all duration-200"
     />
-    <!-- {$isPlayHovered===true ? 'blur-[2px]' :'' } to make background blur put this in above img class -->
     <div class="absolute inset-0 flex items-center justify-center">
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         class="flex size-24 items-center justify-center rounded-full border border-neutral-400 bg-black backdrop-blur-md transition-transform duration-300 ease-out"
-        on:mouseenter={() => isPlayHovered.set(true)}
-        on:mouseleave={() => isPlayHovered.set(false)}
+        onmouseenter={() => (isPlayHovered = true)}
+        onmouseleave={() => (isPlayHovered = false)}
+        role="presentation"
       >
         <div
           class="relative flex size-20 items-center justify-center rounded-full border border-neutral-400 bg-black backdrop-blur-2xl transition-all duration-300 ease-out"
-          class:isPlayHovered={$isPlayHovered}
         >
-          <Play
-            strokeWidth={1.7}
-            class="size-8"
-            style="transform: scale({$isPlayHovered ? 1.1 : 1}); transition: transform 0.3s ease;
-			color: {iconColor};
-			"
-          />
+          <span
+            class="inline-flex size-8 items-center justify-center transition-transform duration-300 ease-out"
+            style:transform={`scale(${isPlayHovered ? 1.1 : 1})`}
+            style:color={iconColor}
+          >
+            <Play strokeWidth={1.7} class="size-full" />
+          </span>
         </div>
       </div>
     </div>
   </div>
 
-  <AnimatePresence let:item list={[{ key: $isVideoOpen }]}>
+  <AnimatePresence let:item list={[{ key: isVideoOpen }]}>
     {#if item.key}
       <Motion initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} let:motion>
-        <div
-          use:motion
-          class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
-        >
-          <!-- Modal Content -->
+        <div use:motion class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md">
           <Motion
             initial={selectedAnimation.initial}
             animate={selectedAnimation.animate}
@@ -138,29 +137,27 @@
             <div use:motion class="relative mx-4 aspect-video w-full max-w-4xl md:mx-0">
               <Motion let:motion whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
                 <button
+                  type="button"
                   use:motion
                   class="absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md"
-                  on:click={closeVideo}
-                  on:mouseenter={() => isCloseHovered.set(true)}
-                  on:mouseleave={() => isCloseHovered.set(false)}
+                  onclick={closeVideo}
+                  onmouseenter={() => (isCloseHovered = true)}
+                  onmouseleave={() => (isCloseHovered = false)}
                 >
-                  <X class="size-5" />
+                  <X class="size-5 text-white" />
                 </button>
               </Motion>
-              <Motion
-                animate={{ scale: $isCloseHovered ? 0.98 : 1 }}
-                transition={{ duration: 0.2 }}
-                let:motion
-              >
+              <Motion animate={{ scale: isCloseHovered ? 0.98 : 1 }} transition={{ duration: 0.2 }} let:motion>
                 <div
                   use:motion
-                  class="relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white"
+                  class="relative isolate z-1 size-full overflow-hidden rounded-2xl border-2 border-white"
                 >
-                  <!-- svelte-ignore a11y-missing-attribute -->
+                  <!-- svelte-ignore a11y_missing_attribute -->
                   <iframe
                     src={videoSrc}
                     class="size-full rounded-2xl"
                     allowfullscreen
+                    title="Video"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   ></iframe>
                 </div>
@@ -172,22 +169,3 @@
     {/if}
   </AnimatePresence>
 </div>
-
-<style>
-  .size-24 {
-    width: 6rem;
-    height: 6rem;
-  }
-  .size-20 {
-    width: 5rem;
-    height: 5rem;
-  }
-  .size-8 {
-    width: 2rem;
-    height: 2rem;
-  }
-  .size-full {
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/apps/course-app/src/lib/components/animation/hero-video-dialog/index.ts b/packages/ui/src/custom/animation/hero-video-dialog/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/hero-video-dialog/index.ts
rename to packages/ui/src/custom/animation/hero-video-dialog/index.ts
diff --git a/packages/ui/src/custom/animation/index.ts b/packages/ui/src/custom/animation/index.ts
new file mode 100644
index 00000000..6be2db5b
--- /dev/null
+++ b/packages/ui/src/custom/animation/index.ts
@@ -0,0 +1,13 @@
+export * from './border-beam';
+export * from './dot-pattern';
+export * from './card';
+export * from './blurfade';
+export * from './blurin';
+export * from './meteors';
+export * from './shimmerbutton';
+export * from './sparkle';
+export * from './hero-video-dialog';
+export * from './shinny-text';
+export * from './magic-card';
+export * from './gradual-spacing';
+export * from './square-card';
diff --git a/apps/course-app/src/lib/components/animation/magic-card/index.ts b/packages/ui/src/custom/animation/magic-card/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/magic-card/index.ts
rename to packages/ui/src/custom/animation/magic-card/index.ts
diff --git a/packages/ui/src/custom/animation/magic-card/magic-card.svelte b/packages/ui/src/custom/animation/magic-card/magic-card.svelte
new file mode 100644
index 00000000..857012aa
--- /dev/null
+++ b/packages/ui/src/custom/animation/magic-card/magic-card.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { Motion, useMotionValue, useMotionTemplate } from 'svelte-motion';
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    gradientSize?: number;
+    gradientColor?: string;
+    gradientOpacity?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    gradientSize = 200,
+    gradientColor = '#262626',
+    gradientOpacity = 0.8,
+    class: className = '',
+    children
+  }: Props = $props();
+
+  const gradSize = useMotionValue(200);
+  const gradColor = useMotionValue('#262626');
+  const mouseX = useMotionValue(-200);
+  const mouseY = useMotionValue(-200);
+
+  $effect(() => {
+    gradSize.set(gradientSize);
+    gradColor.set(gradientColor);
+    mouseX.set(-gradientSize);
+    mouseY.set(-gradientSize);
+  });
+
+  function handleMouseMove(e: MouseEvent) {
+    const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }
+
+  function handleMouseLeave() {
+    mouseX.set(-gradientSize);
+    mouseY.set(-gradientSize);
+  }
+
+  const bg = useMotionTemplate`radial-gradient(${gradSize}px circle at ${mouseX}px ${mouseY}px, ${gradColor}, transparent 100%)`;
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
+  class={cn(
+    'group relative flex size-full justify-center overflow-hidden rounded-xl border bg-neutral-100 py-4 text-black dark:bg-neutral-900 dark:text-white',
+    className
+  )}
+>
+  <div class="relative z-10">
+    {#if children}
+      {@render children()}
+    {:else}
+      <div class="flex h-full items-center justify-center text-center">
+        <p class="text-2xl">Magic Card</p>
+      </div>
+    {/if}
+  </div>
+  <Motion
+    style={{
+      background: bg,
+      opacity: gradientOpacity
+    }}
+    let:motion
+  >
+    <div
+      use:motion
+      class="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+    ></div>
+  </Motion>
+</div>
diff --git a/packages/ui/src/custom/animation/marketing-layers.css b/packages/ui/src/custom/animation/marketing-layers.css
new file mode 100644
index 00000000..c57b96fb
--- /dev/null
+++ b/packages/ui/src/custom/animation/marketing-layers.css
@@ -0,0 +1,81 @@
+/* Shared by @cio/ui index.css and course-app (no Tailwind prefix; no global theme reset). */
+
+@keyframes border-beam {
+  100% {
+    offset-distance: 100%;
+  }
+}
+
+@keyframes meteor {
+  0% {
+    transform: rotate(215deg) translateX(0);
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(215deg) translateX(-500px);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer-marketing {
+  0%,
+  90%,
+  100% {
+    background-position: calc(-100% - var(--shimmer-width)) 0;
+  }
+  30%,
+  60% {
+    background-position: calc(100% + var(--shimmer-width)) 0;
+  }
+}
+
+@keyframes spin-around {
+  0% {
+    transform: translateZ(0) rotate(0);
+  }
+  15%,
+  35% {
+    transform: translateZ(0) rotate(90deg);
+  }
+  65%,
+  85% {
+    transform: translateZ(0) rotate(270deg);
+  }
+  100% {
+    transform: translateZ(0) rotate(360deg);
+  }
+}
+
+@keyframes magicslide {
+  to {
+    transform: translate(calc(100cqw - 100%), 0);
+  }
+}
+
+@layer components {
+  .cio-marketing-border-beam {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: calc(var(--border-width) * 1px) solid transparent;
+    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
+    mask-clip: padding-box, border-box;
+    mask-composite: intersect;
+  }
+
+  .cio-marketing-border-beam::after {
+    content: '';
+    position: absolute;
+    aspect-ratio: 1;
+    width: calc(var(--size) * 1px);
+    animation-delay: var(--delay);
+    background: linear-gradient(to left, var(--color-from), var(--color-to), transparent);
+    offset-anchor: calc(var(--anchor) * 1%) 50%;
+    offset-path: rect(0 auto auto 0 round calc(var(--size) * 1px));
+    animation: border-beam calc(var(--duration) * 1s) infinite linear;
+  }
+}
diff --git a/apps/course-app/src/lib/components/animation/meteors/index.ts b/packages/ui/src/custom/animation/meteors/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/meteors/index.ts
rename to packages/ui/src/custom/animation/meteors/index.ts
diff --git a/packages/ui/src/custom/animation/meteors/meteors.svelte b/packages/ui/src/custom/animation/meteors/meteors.svelte
new file mode 100644
index 00000000..773bfefb
--- /dev/null
+++ b/packages/ui/src/custom/animation/meteors/meteors.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+
+  interface Props {
+    number?: number;
+  }
+
+  let { number = 10 }: Props = $props();
+
+  type MeteorStyle = {
+    top: number;
+    left: string;
+    animationDelay: string;
+    animationDuration: string;
+  };
+
+  let meteorStyles = $state<MeteorStyle[]>([]);
+
+  function changeMeteors(num: number) {
+    meteorStyles = [...Array(num)].map(() => ({
+      // Keep within typical card heights so parents with overflow-hidden still show meteors
+      top: Math.floor(Math.random() * 160) + 8,
+      left: Math.floor(Math.random() * 100) + '%',
+      animationDelay: Math.random() * 1 + 0.2 + 's',
+      animationDuration: Math.floor(Math.random() * 8 + 2.9) + 's'
+    }));
+  }
+
+  $effect(() => {
+    const count = number;
+    if (typeof window === 'undefined') return;
+    changeMeteors(count);
+  });
+</script>
+
+{#each meteorStyles as style, idx}
+  <span
+    id="meteor-{idx + 1}"
+    class={cn(
+      'ui:animate-meteor ui:pointer-events-none ui:absolute ui:size-[2.4px] ui:origin-center ui:rounded-full ui:bg-slate-500 ui:shadow-[0_0_0_1px_#ffffff10]'
+    )}
+    style="top: {style.top}px; left: {style.left}; animation-delay: {style.animationDelay}; animation-duration: {style.animationDuration};"
+  >
+    <div
+      class="ui:pointer-events-none ui:absolute ui:top-1/2 ui:-z-10 ui:h-px ui:w-[50px] ui:-translate-y-1/2 ui:bg-linear-to-r ui:from-slate-500 ui:via-blue-600/30 ui:to-transparent"
+    ></div>
+  </span>
+{/each}
diff --git a/apps/course-app/src/lib/components/animation/shimmerbutton/index.ts b/packages/ui/src/custom/animation/shimmerbutton/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/shimmerbutton/index.ts
rename to packages/ui/src/custom/animation/shimmerbutton/index.ts
diff --git a/packages/ui/src/custom/animation/shimmerbutton/shimmerbutton.svelte b/packages/ui/src/custom/animation/shimmerbutton/shimmerbutton.svelte
new file mode 100644
index 00000000..d973e579
--- /dev/null
+++ b/packages/ui/src/custom/animation/shimmerbutton/shimmerbutton.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    href: string;
+    target?: string;
+    rel?: string;
+    shimmerColor?: string;
+    shimmerSize?: string;
+    shimmerDuration?: string;
+    borderRadius?: string;
+    background?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    href,
+    target = '',
+    rel = '',
+    shimmerColor = '#ffffff',
+    shimmerSize = '0.05em',
+    shimmerDuration = '3s',
+    borderRadius = '100px',
+    background = 'rgba(0, 0, 0, 1)',
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<a
+  style:--spread="90deg"
+  style:--shimmer-color={shimmerColor}
+  style:--radius={borderRadius}
+  style:--speed={shimmerDuration}
+  style:--cut={shimmerSize}
+  style:--bg={background}
+  class={cn(
+    'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden rounded-(--radius) border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)] dark:text-white',
+    'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
+    className
+  )}
+  {href}
+  {target}
+  {rel}
+  data-rewardful
+>
+  <div class={cn('-z-30 blur-[2px]', '@container-[size] absolute inset-0 overflow-visible')}>
+    <div class="animate-magicslide absolute inset-0 aspect-[1] h-[100cqh] rounded-none [mask:none]">
+      <div
+        class="animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"
+      ></div>
+    </div>
+  </div>
+  {@render children?.()}
+  <div
+    class={cn(
+      'absolute inset-0 h-full w-full',
+      'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+      'transform-gpu transition-all duration-300 ease-in-out',
+      'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+      'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
+    )}
+  ></div>
+  <div class={cn('absolute inset-(--cut) -z-20 rounded-(--radius) [background:var(--bg)]')}></div>
+</a>
diff --git a/apps/course-app/src/lib/components/animation/shinny-text/index.ts b/packages/ui/src/custom/animation/shinny-text/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/shinny-text/index.ts
rename to packages/ui/src/custom/animation/shinny-text/index.ts
diff --git a/packages/ui/src/custom/animation/shinny-text/shinny-text.svelte b/packages/ui/src/custom/animation/shinny-text/shinny-text.svelte
new file mode 100644
index 00000000..73758e5f
--- /dev/null
+++ b/packages/ui/src/custom/animation/shinny-text/shinny-text.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    shimmerWidth?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { shimmerWidth = 100, class: className, children }: Props = $props();
+</script>
+
+<p
+  style:--shimmer-width="{shimmerWidth}px"
+  class={cn(
+    'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50',
+    'animate-shimmer bg-size-[var(--shimmer-width)_100%] bg-clip-text bg-position-[0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
+    'bg-linear-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80',
+    className
+  )}
+>
+  {@render children?.()}
+</p>
diff --git a/apps/course-app/src/lib/components/animation/sparkle/index.ts b/packages/ui/src/custom/animation/sparkle/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/sparkle/index.ts
rename to packages/ui/src/custom/animation/sparkle/index.ts
diff --git a/packages/ui/src/custom/animation/sparkle/sparkle-particle.svelte b/packages/ui/src/custom/animation/sparkle/sparkle-particle.svelte
new file mode 100644
index 00000000..d957f706
--- /dev/null
+++ b/packages/ui/src/custom/animation/sparkle/sparkle-particle.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Motion } from 'svelte-motion';
+
+  interface Props {
+    id: string;
+    x: string;
+    y: string;
+    color: string;
+    delay: number;
+    scale: number;
+  }
+
+  let { id, x, y, color, delay, scale }: Props = $props();
+</script>
+
+<Motion
+  initial={{ opacity: 0, left: x, top: y }}
+  animate={{
+    opacity: [0, 1, 0],
+    scale: [0, scale, 0],
+    rotate: [75, 120, 150]
+  }}
+  transition={{ duration: 0.8, repeat: Infinity, delay }}
+  let:motion
+>
+  <div {id} use:motion class="pointer-events-none absolute z-20" style:left={x} style:top={y}>
+    <svg width="21" height="21" viewBox="0 0 21 21" class="block">
+      <path
+        d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
+        fill={color}
+      />
+    </svg>
+  </div>
+</Motion>
diff --git a/packages/ui/src/custom/animation/sparkle/sparkle-text.svelte b/packages/ui/src/custom/animation/sparkle/sparkle-text.svelte
new file mode 100644
index 00000000..34f52ba6
--- /dev/null
+++ b/packages/ui/src/custom/animation/sparkle/sparkle-text.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import SparkleParticle from './sparkle-particle.svelte';
+
+  interface TSparkle {
+    id: string;
+    x: string;
+    y: string;
+    color: string;
+    delay: number;
+    scale: number;
+    lifespan: number;
+  }
+
+  interface Props {
+    text?: string;
+    colors?: { first: string; second: string };
+    sparklesCount?: number;
+    class?: string;
+  }
+
+  let {
+    text = 'Hello World',
+    colors = { first: '#9E7AFF', second: '#FE8BBB' },
+    sparklesCount = 5,
+    class: className = ''
+  }: Props = $props();
+
+  let sparkles = $state<TSparkle[]>([]);
+
+  function generateStar(): TSparkle {
+    const starX = `${Math.random() * 100}%`;
+    const starY = `${Math.random() * 100}%`;
+    const color = Math.random() > 0.5 ? colors.first : colors.second;
+    const delay = Math.random() * 4;
+    const scale = Math.random() * 1 + 0.3;
+    const lifespan = Math.random() * 10 + 5;
+    const id = `${starX}-${starY}-${Date.now()}`;
+    return { id, x: starX, y: starY, color, delay, scale, lifespan };
+  }
+
+  function initializeStars() {
+    sparkles = Array.from({ length: sparklesCount }, generateStar);
+  }
+
+  function updateStars() {
+    sparkles = sparkles.map((star) => {
+      if (star.lifespan <= 0) {
+        return generateStar();
+      }
+      return { ...star, lifespan: star.lifespan - 0.1 };
+    });
+  }
+
+  let interval: ReturnType<typeof setInterval>;
+
+  onMount(() => {
+    initializeStars();
+    interval = setInterval(updateStars, 100);
+  });
+
+  onDestroy(() => clearInterval(interval));
+</script>
+
+<div style:--sparkles-first-color="{colors.first};" style:--sparkles-second-color="{colors.second};" class={className}>
+  <span class="relative inline-block">
+    {#each sparkles as item}
+      <SparkleParticle {...item} />
+    {/each}
+    <strong>{text}</strong>
+  </span>
+</div>
diff --git a/packages/ui/src/custom/animation/square-card/body.svelte b/packages/ui/src/custom/animation/square-card/body.svelte
new file mode 100644
index 00000000..0c60099f
--- /dev/null
+++ b/packages/ui/src/custom/animation/square-card/body.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    className?: string;
+    children: Snippet;
+  }
+
+  let { children, className }: Props = $props();
+</script>
+
+<div class={cn('text-left', className)}>
+  {@render children()}
+</div>
diff --git a/packages/ui/src/custom/animation/square-card/icon.svelte b/packages/ui/src/custom/animation/square-card/icon.svelte
new file mode 100644
index 00000000..a914558c
--- /dev/null
+++ b/packages/ui/src/custom/animation/square-card/icon.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cn } from '../../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<SVGElement> {
+    class?: string;
+  }
+
+  let { class: className = '', ...rest }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  width={24}
+  height={24}
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke="currentColor"
+  class={cn('absolute text-black dark:text-white', className)}
+  {...rest}
+>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+</svg>
diff --git a/apps/course-app/src/lib/components/animation/square-card/index.ts b/packages/ui/src/custom/animation/square-card/index.ts
similarity index 100%
rename from apps/course-app/src/lib/components/animation/square-card/index.ts
rename to packages/ui/src/custom/animation/square-card/index.ts
diff --git a/packages/ui/src/custom/course-card/constants.ts b/packages/ui/src/custom/course-card/constants.ts
new file mode 100644
index 00000000..988adeb4
--- /dev/null
+++ b/packages/ui/src/custom/course-card/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_COURSE_BANNER_IMAGE = '/images/classroomio-course-img-template.jpg';
diff --git a/packages/ui/src/custom/course-card/course-card.svelte b/packages/ui/src/custom/course-card/course-card.svelte
new file mode 100644
index 00000000..8dd62964
--- /dev/null
+++ b/packages/ui/src/custom/course-card/course-card.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { cn } from '../../tools';
+  import { Badge } from '../../base/badge';
+  import { Separator } from '../../base/separator';
+  import * as Item from '../../base/item';
+  import { DEFAULT_COURSE_BANNER_IMAGE } from './constants';
+
+  interface Props {
+    href?: string;
+    title: string;
+    description: string;
+    /** Used when `media` snippet is not provided */
+    bannerImage?: string;
+    bannerAlt?: string;
+    typeBadge?: {
+      label: string;
+      icon: Component;
+      iconClass?: string;
+    };
+    class?: string;
+    /** Custom banner area (e.g. optimized `Image`); overrides `bannerImage` */
+    media?: Snippet;
+    /** Optional overlay inside the link (e.g. dropdown), typically absolutely positioned */
+    overlay?: Snippet;
+    tags?: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    href,
+    title,
+    description,
+    bannerImage,
+    bannerAlt = 'Course banner image',
+    typeBadge,
+    class: className = '',
+    media,
+    overlay,
+    tags,
+    footer
+  }: Props = $props();
+
+  const resolvedBannerImage = $derived(bannerImage?.trim() ? bannerImage : DEFAULT_COURSE_BANNER_IMAGE);
+</script>
+
+<Item.Root variant="outline" class={cn('ui:group ui:relative ui:max-w-[320px] ui:p-3!', className)}>
+  {#snippet child({ props })}
+    {#if href}
+      <a {href} {...props} class={cn('ui:block', props.class as string)}>
+        {@render overlay?.()}
+
+        <Item.Header>
+          <Item.Media variant="image" class="ui:relative ui:h-50! ui:w-full!">
+            {#if media}
+              {@render media()}
+            {:else}
+              <img
+                src={resolvedBannerImage}
+                alt={bannerAlt}
+                class="ui:w-full ui:h-full ui:rounded-sm ui:object-cover"
+              />
+            {/if}
+
+            {#if typeBadge}
+              {@const Icon = typeBadge.icon}
+              <Badge
+                class="ui:absolute ui:bottom-2 ui:left-2 ui:z-10 ui:flex ui:items-center ui:rounded-md! ui:capitalize"
+                variant="secondary"
+              >
+                <Icon class={typeBadge.iconClass} />
+                {typeBadge.label}
+              </Badge>
+            {/if}
+          </Item.Media>
+        </Item.Header>
+
+        <Item.Content>
+          <Item.Title class="ui:flex ui:w-full ui:min-h-14 ui:items-center ui:text-base!">
+            <span class="ui:line-clamp-2">{title}</span>
+          </Item.Title>
+
+          <Item.Description class="ui:min-h-[63px]">{description}</Item.Description>
+
+          {#if tags}
+            {@render tags()}
+          {/if}
+
+          {#if footer}
+            <Separator class="ui:my-3" />
+            {@render footer()}
+          {/if}
+        </Item.Content>
+      </a>
+    {:else}
+      <div {...props} class={cn('ui:block', props.class as string)}>
+        {@render overlay?.()}
+
+        <Item.Header>
+          <Item.Media variant="image" class="ui:relative ui:h-50! ui:w-full!">
+            {#if media}
+              {@render media()}
+            {:else}
+              <img
+                src={resolvedBannerImage}
+                alt={bannerAlt}
+                class="ui:w-full ui:h-full ui:rounded-sm ui:object-cover"
+              />
+            {/if}
+
+            {#if typeBadge}
+              {@const Icon = typeBadge.icon}
+              <Badge
+                class="ui:absolute ui:bottom-2 ui:left-2 ui:z-10 ui:flex ui:items-center ui:rounded-md! ui:capitalize"
+                variant="secondary"
+              >
+                <Icon class={typeBadge.iconClass} />
+                {typeBadge.label}
+              </Badge>
+            {/if}
+          </Item.Media>
+        </Item.Header>
+
+        <Item.Content>
+          <Item.Title class="ui:flex ui:w-full ui:min-h-14 ui:items-center ui:text-base!">
+            <span class="ui:line-clamp-2">{title}</span>
+          </Item.Title>
+
+          <Item.Description class="ui:min-h-[63px]">{description}</Item.Description>
+
+          {#if tags}
+            {@render tags()}
+          {/if}
+
+          {#if footer}
+            <Separator class="ui:my-3" />
+            {@render footer()}
+          {/if}
+        </Item.Content>
+      </div>
+    {/if}
+  {/snippet}
+</Item.Root>
diff --git a/packages/ui/src/custom/course-card/index.ts b/packages/ui/src/custom/course-card/index.ts
new file mode 100644
index 00000000..f5243d4c
--- /dev/null
+++ b/packages/ui/src/custom/course-card/index.ts
@@ -0,0 +1,2 @@
+export { default as CourseCard } from './course-card.svelte';
+export { DEFAULT_COURSE_BANNER_IMAGE } from './constants';
diff --git a/packages/ui/src/custom/exercise-question/renderer-contract.ts b/packages/ui/src/custom/exercise-question/renderer-contract.ts
index 67d97148..961dc421 100644
--- a/packages/ui/src/custom/exercise-question/renderer-contract.ts
+++ b/packages/ui/src/custom/exercise-question/renderer-contract.ts
@@ -18,7 +18,9 @@ import { default as NumericEdit } from './renderers/numeric/edit.svelte';
 import { default as OrderingEdit } from './renderers/ordering/edit.svelte';
 import { default as RadioEdit } from './renderers/radio/edit.svelte';
 import { default as LinkEdit } from './renderers/link/edit.svelte';
+import { default as WordBankEdit } from './renderers/word-bank/edit.svelte';
 import { default as ShortAnswerEdit } from './renderers/short-answer/edit.svelte';
+import { default as StarEdit } from './renderers/star/edit.svelte';
 import { default as TextareaEdit } from './renderers/textarea/edit.svelte';
 import { default as TrueFalseEdit } from './renderers/true-false/edit.svelte';
 
@@ -31,7 +33,9 @@ import { default as NumericTake } from './renderers/numeric/take.svelte';
 import { default as OrderingTake } from './renderers/ordering/take.svelte';
 import { default as RadioTake } from './renderers/radio/take.svelte';
 import { default as LinkTake } from './renderers/link/take.svelte';
+import { default as WordBankTake } from './renderers/word-bank/take.svelte';
 import { default as ShortAnswerTake } from './renderers/short-answer/take.svelte';
+import { default as StarTake } from './renderers/star/take.svelte';
 import { default as TextareaTake } from './renderers/textarea/take.svelte';
 import { default as TrueFalseTake } from './renderers/true-false/take.svelte';
 
@@ -44,7 +48,9 @@ import { default as NumericPreview } from './renderers/numeric/preview.svelte';
 import { default as OrderingPreview } from './renderers/ordering/preview.svelte';
 import { default as RadioPreview } from './renderers/radio/preview.svelte';
 import { default as LinkPreview } from './renderers/link/preview.svelte';
+import { default as WordBankPreview } from './renderers/word-bank/preview.svelte';
 import { default as ShortAnswerPreview } from './renderers/short-answer/preview.svelte';
+import { default as StarPreview } from './renderers/star/preview.svelte';
 import { default as TextareaPreview } from './renderers/textarea/preview.svelte';
 import { default as TrueFalsePreview } from './renderers/true-false/preview.svelte';
 
@@ -57,7 +63,9 @@ import { default as NumericSubmission } from './renderers/numeric/submission.sve
 import { default as OrderingSubmission } from './renderers/ordering/submission.svelte';
 import { default as RadioSubmission } from './renderers/radio/submission.svelte';
 import { default as LinkSubmission } from './renderers/link/submission.svelte';
+import { default as WordBankSubmission } from './renderers/word-bank/submission.svelte';
 import { default as ShortAnswerSubmission } from './renderers/short-answer/submission.svelte';
+import { default as StarSubmission } from './renderers/star/submission.svelte';
 import { default as TextareaSubmission } from './renderers/textarea/submission.svelte';
 import { default as TrueFalseSubmission } from './renderers/true-false/submission.svelte';
 
@@ -66,6 +74,7 @@ import { default as CheckboxReview } from './renderers/checkbox/review.svelte';
 import { default as NumericReview } from './renderers/numeric/review.svelte';
 import { default as ShortAnswerReview } from './renderers/short-answer/review.svelte';
 import { default as FillBlankReview } from './renderers/fill-blank/review.svelte';
+import { default as WordBankReview } from './renderers/word-bank/review.svelte';
 import { default as OrderingReview } from './renderers/ordering/review.svelte';
 import { default as TrueFalseReview } from './renderers/true-false/review.svelte';
 
@@ -150,6 +159,19 @@ export const EXERCISE_QUESTION_RENDERER_CONTRACT: ExerciseRendererRegistry<Share
     take: LinkTake,
     preview: LinkPreview,
     submission: LinkSubmission
+  },
+  [QUESTION_TYPE_KEY.WORD_BANK]: {
+    edit: WordBankEdit,
+    take: WordBankTake,
+    preview: WordBankPreview,
+    submission: WordBankSubmission,
+    review: WordBankReview
+  },
+  [QUESTION_TYPE_KEY.STAR]: {
+    edit: StarEdit,
+    take: StarTake,
+    preview: StarPreview,
+    submission: StarSubmission
   }
 };
 
diff --git a/packages/ui/src/custom/exercise-question/renderers/link/preview.svelte b/packages/ui/src/custom/exercise-question/renderers/link/preview.svelte
index 13663b72..3f2ee877 100644
--- a/packages/ui/src/custom/exercise-question/renderers/link/preview.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/link/preview.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getExerciseQuestionLabel, type ExerciseQuestionRendererProps } from '@cio/question-types';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import { ExternalLinkIcon, HoverableItem } from '../../../moving-icons';
 
   let { question, answer = null, labels }: ExerciseQuestionRendererProps = $props();
   const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
@@ -35,15 +35,19 @@
       {#each links as link, index}
         <div class="ui:bg-background ui:rounded-md ui:border ui:p-2">
           {#if isValidLink(link)}
-            <a
-              href={link}
-              target="_blank"
-              rel="noreferrer"
-              class="ui:text-primary ui:inline-flex ui:items-center ui:gap-2 ui:text-sm ui:underline"
-            >
-              <span>{formatLinkLabel(index)}</span>
-              <ExternalLinkIcon class="ui:size-3.5" />
-            </a>
+            <HoverableItem>
+              {#snippet children(isHovered)}
+                <a
+                  href={link}
+                  target="_blank"
+                  rel="noreferrer"
+                  class="ui:text-primary ui:inline-flex ui:items-center ui:gap-2 ui:text-sm ui:underline"
+                >
+                  <span>{formatLinkLabel(index)}</span>
+                  <ExternalLinkIcon {isHovered} size={14} class="ui:shrink-0" ariaHidden={true} />
+                </a>
+              {/snippet}
+            </HoverableItem>
             <p class="ui:text-muted-foreground ui:mt-1 ui:text-xs">{link}</p>
           {:else}
             <p class="ui:text-sm">{link}</p>
diff --git a/packages/ui/src/custom/exercise-question/renderers/star/edit.svelte b/packages/ui/src/custom/exercise-question/renderers/star/edit.svelte
new file mode 100644
index 00000000..e9d07059
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/star/edit.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+  import {
+    getExerciseQuestionLabel,
+    getStarRatingMaxFromSettings,
+    type ExerciseQuestionModel,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+  import CircleQuestionMarkIcon from '@lucide/svelte/icons/circle-question-mark';
+  import { Input } from '../../../../base/input';
+  import { IconButton } from '../../../icon-button';
+
+  let { question, disabled = false, labels, onQuestionChange = () => {} }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  function patchQuestion(partial: Partial<ExerciseQuestionModel>) {
+    onQuestionChange({ ...question, ...partial });
+  }
+
+  function patchSettings(next: Record<string, unknown>) {
+    patchQuestion({ settings: { ...(question.settings ?? {}), ...next } });
+  }
+
+  const maxStars = $derived(getStarRatingMaxFromSettings(question.settings));
+
+  function onCorrectValueChange(raw: string) {
+    const parsed = Number(raw);
+    if (raw.trim() === '' || Number.isNaN(parsed)) {
+      patchSettings({ correctValue: undefined });
+      return;
+    }
+
+    const clamped = Math.min(maxStars, Math.max(1, Math.floor(parsed)));
+    patchSettings({ correctValue: clamped });
+  }
+
+  function onMaxStarsChange(raw: string) {
+    const parsed = Number(raw);
+    if (raw.trim() === '' || Number.isNaN(parsed)) {
+      patchSettings({ maxStars: undefined });
+      return;
+    }
+
+    const nextMax = Math.min(10, Math.max(1, Math.floor(parsed)));
+    const rawCorrect = question.settings?.correctValue;
+    const currentCorrect = typeof rawCorrect === 'number' ? rawCorrect : rawCorrect != null ? Number(rawCorrect) : NaN;
+    const nextCorrect = Number.isFinite(currentCorrect)
+      ? Math.min(nextMax, Math.max(1, Math.floor(currentCorrect)))
+      : undefined;
+
+    if (nextCorrect !== undefined) {
+      patchSettings({ maxStars: nextMax, correctValue: nextCorrect });
+      return;
+    }
+
+    patchSettings({ maxStars: nextMax });
+  }
+</script>
+
+<div class="ui:space-y-3">
+  <div class="ui:grid ui:gap-3 ui:md:grid-cols-2">
+    <div class="ui:space-y-1">
+      <div class="ui:flex ui:items-center ui:gap-1">
+        <p class="ui:text-sm ui:font-medium">{label('star.edit.correct_value_label')}</p>
+        <IconButton type="button" class="ui:h-6 ui:w-6" {disabled} tooltip={label('star.edit.correct_value_info')}>
+          <CircleQuestionMarkIcon class="ui:size-3.5" />
+          <span class="ui:sr-only">{label('star.edit.correct_value_info')}</span>
+        </IconButton>
+      </div>
+      <Input
+        type="number"
+        min="1"
+        max={maxStars}
+        placeholder={label('star.edit.correct_value_placeholder')}
+        value={String((question.settings?.correctValue as number | undefined) ?? '')}
+        {disabled}
+        onchange={(event) => onCorrectValueChange(event.currentTarget.value)}
+      />
+    </div>
+
+    <div class="ui:space-y-1">
+      <div class="ui:flex ui:items-center ui:gap-1">
+        <p class="ui:text-sm ui:font-medium">{label('star.edit.max_stars_label')}</p>
+        <IconButton type="button" class="ui:h-6 ui:w-6" {disabled} tooltip={label('star.edit.max_stars_info')}>
+          <CircleQuestionMarkIcon class="ui:size-3.5" />
+          <span class="ui:sr-only">{label('star.edit.max_stars_info')}</span>
+        </IconButton>
+      </div>
+      <Input
+        type="number"
+        min="1"
+        max="10"
+        placeholder={label('star.edit.max_stars_placeholder')}
+        value={String((question.settings?.maxStars as number | undefined) ?? '')}
+        {disabled}
+        onchange={(event) => onMaxStarsChange(event.currentTarget.value)}
+      />
+    </div>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/star/preview.svelte b/packages/ui/src/custom/exercise-question/renderers/star/preview.svelte
new file mode 100644
index 00000000..696e35a1
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/star/preview.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import {
+    getExerciseQuestionLabel,
+    getStarRatingMaxFromSettings,
+    isValidStarRatingValue,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+
+  import StarRow from './star-row.svelte';
+
+  let { question, labels }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const maxStars = $derived(getStarRatingMaxFromSettings(question.settings));
+
+  const correctValue = $derived.by(() => {
+    const rawCorrect = question.settings?.correctValue;
+    const parsed = typeof rawCorrect === 'number' ? rawCorrect : rawCorrect != null ? Number(rawCorrect) : NaN;
+    if (!isValidStarRatingValue(parsed, maxStars)) return 0;
+    return parsed;
+  });
+</script>
+
+<div class="ui:space-y-2">
+  <p class="ui:text-sm ui:font-medium">{label('star.preview.correct_label')}</p>
+  <StarRow
+    {maxStars}
+    value={correctValue}
+    disabled={true}
+    starLabel={(starIndex) =>
+      label('star.take.star_sr', 'Star {n} of {max}')
+        .replace('{n}', String(starIndex))
+        .replace('{max}', String(maxStars))}
+  />
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/star/star-row.svelte b/packages/ui/src/custom/exercise-question/renderers/star/star-row.svelte
new file mode 100644
index 00000000..49085a66
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/star/star-row.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Star from '@lucide/svelte/icons/star';
+
+  let {
+    maxStars,
+    value,
+    disabled = false,
+    starLabel,
+    onPick
+  }: {
+    maxStars: number;
+    value: number;
+    disabled?: boolean;
+    starLabel: (starIndex: number) => string;
+    onPick?: (starIndex: number) => void;
+  } = $props();
+
+  const starIndices = $derived(Array.from({ length: maxStars }, (_, index) => index + 1));
+</script>
+
+<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-1" role="group">
+  {#each starIndices as starIndex (starIndex)}
+    {#if onPick && !disabled}
+      <button
+        type="button"
+        class="ui:rounded-md ui:p-1 ui:text-amber-600 ui:transition-colors ui:hover:bg-amber-500/10 focus-visible:ui:ring-ring ui:outline-none focus-visible:ui:ring-2 ui:dark:text-amber-400"
+        aria-label={starLabel(starIndex)}
+        aria-pressed={value >= starIndex}
+        {disabled}
+        onclick={() => onPick(starIndex)}
+      >
+        <Star
+          class="ui:size-8 {starIndex <= value
+            ? 'ui:fill-amber-400 ui:text-amber-500 ui:dark:fill-amber-400 ui:dark:text-amber-300'
+            : 'ui:fill-none ui:text-amber-200 ui:dark:text-amber-500/40'}"
+        />
+      </button>
+    {:else}
+      <span class="ui:inline-flex ui:p-1" aria-hidden="true">
+        <Star
+          class="ui:size-8 {starIndex <= value
+            ? 'ui:fill-amber-400 ui:text-amber-500 ui:dark:fill-amber-400 ui:dark:text-amber-300'
+            : 'ui:fill-none ui:text-amber-200 ui:dark:text-amber-500/40'}"
+        />
+      </span>
+    {/if}
+  {/each}
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/star/submission.svelte b/packages/ui/src/custom/exercise-question/renderers/star/submission.svelte
new file mode 100644
index 00000000..a178ca7a
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/star/submission.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { ExerciseQuestionRendererProps } from '@cio/question-types';
+
+  import GenericSubmission from '../submission-generic.svelte';
+
+  let {
+    question,
+    submissions = [],
+    labels,
+    maxSubmissionItems
+  }: Pick<ExerciseQuestionRendererProps, 'question' | 'submissions' | 'labels' | 'maxSubmissionItems'> = $props();
+</script>
+
+<GenericSubmission {question} {submissions} {labels} {maxSubmissionItems} />
diff --git a/packages/ui/src/custom/exercise-question/renderers/star/take.svelte b/packages/ui/src/custom/exercise-question/renderers/star/take.svelte
new file mode 100644
index 00000000..8973489d
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/star/take.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import {
+    getExerciseQuestionLabel,
+    getStarRatingMaxFromSettings,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+
+  import StarRow from './star-row.svelte';
+
+  let {
+    question,
+    answer = null,
+    disabled = false,
+    labels,
+    onAnswerChange = () => {}
+  }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const maxStars = $derived(getStarRatingMaxFromSettings(question.settings));
+
+  const selectedValue = $derived.by(() => {
+    if (answer?.type !== 'STAR') return 0;
+    const value = answer.value;
+    if (typeof value !== 'number' || !Number.isInteger(value) || value < 1 || value > maxStars) return 0;
+    return value;
+  });
+
+  function starLabel(starIndex: number) {
+    return label('star.take.star_sr', 'Star {n} of {max}')
+      .replace('{n}', String(starIndex))
+      .replace('{max}', String(maxStars));
+  }
+</script>
+
+<div class="ui:space-y-2">
+  <p class="ui:text-muted-foreground ui:text-sm">{label('star.take.helper')}</p>
+  <StarRow
+    {maxStars}
+    value={selectedValue}
+    {disabled}
+    {starLabel}
+    onPick={(starIndex) => onAnswerChange({ type: 'STAR', value: starIndex })}
+  />
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/submission-generic.svelte b/packages/ui/src/custom/exercise-question/renderers/submission-generic.svelte
index da08be45..9d903c00 100644
--- a/packages/ui/src/custom/exercise-question/renderers/submission-generic.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/submission-generic.svelte
@@ -17,6 +17,8 @@
         return [answer.text];
       case 'NUMERIC':
         return [String(answer.value)];
+      case 'STAR':
+        return [String(answer.value)];
       case 'LINK':
         return answer.urls;
       case 'FILE_UPLOAD':
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/edit.svelte b/packages/ui/src/custom/exercise-question/renderers/word-bank/edit.svelte
new file mode 100644
index 00000000..2c389e2c
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/edit.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+  import {
+    getExerciseQuestionLabel,
+    type ExerciseQuestionModel,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+  import PlusIcon from '@lucide/svelte/icons/plus';
+  import Trash2Icon from '@lucide/svelte/icons/trash-2';
+  import { Button } from '../../../../base/button';
+  import { Input } from '../../../../base/input';
+  import { Textarea } from '../../../../base/textarea';
+  import { IconButton } from '../../../icon-button';
+  import { countWordBankBlanks } from './word-bank-utils';
+
+  let { question, disabled = false, labels, onQuestionChange = () => {} }: ExerciseQuestionRendererProps = $props();
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  function patchQuestion(partial: Partial<ExerciseQuestionModel>) {
+    onQuestionChange({ ...question, ...partial });
+  }
+
+  function patchSettings(next: Record<string, unknown>) {
+    patchQuestion({ settings: { ...(question.settings ?? {}), ...next } });
+  }
+
+  const template = $derived(String((question.settings?.template as string | undefined) ?? ''));
+
+  const correctAnswers = $derived.by(() => {
+    const raw = question.settings?.correctAnswers;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const distractors = $derived.by(() => {
+    const raw = question.settings?.distractors;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const blankCount = $derived(countWordBankBlanks(template));
+
+  function onTemplateInput(value: string) {
+    const nextBlankCount = countWordBankBlanks(value);
+    const prev = correctAnswers;
+    const nextCorrect: string[] = [];
+    for (let i = 0; i < nextBlankCount; i++) {
+      nextCorrect.push(prev[i] ?? '');
+    }
+    patchSettings({ template: value, correctAnswers: nextCorrect });
+  }
+
+  function setCorrectAnswerAt(index: number, value: string) {
+    const next = [...correctAnswers];
+    next[index] = value;
+    patchSettings({ correctAnswers: next });
+  }
+
+  function addDistractor() {
+    patchSettings({ distractors: [...distractors, ''] });
+  }
+
+  function setDistractorAt(index: number, value: string) {
+    const next = [...distractors];
+    next[index] = value;
+    patchSettings({ distractors: next });
+  }
+
+  function removeDistractorAt(index: number) {
+    patchSettings({ distractors: distractors.filter((_, i) => i !== index) });
+  }
+</script>
+
+<div class="ui:space-y-4">
+  <div class="ui:space-y-2">
+    <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.edit.template_label')}</p>
+    <Textarea
+      class="ui:w-full"
+      rows={4}
+      value={template}
+      placeholder={label('word_bank.edit.template_placeholder')}
+      {disabled}
+      onchange={(event) => onTemplateInput(event.currentTarget.value)}
+    />
+    <p class="ui:text-muted-foreground ui:text-xs">
+      {label('word_bank.edit.template_helper')}
+    </p>
+    {#if blankCount === 0 && template.trim().length > 0}
+      <p class="ui:text-destructive ui:text-xs">{label('word_bank.edit.no_blanks_warning')}</p>
+    {/if}
+  </div>
+
+  {#if blankCount > 0}
+    <div class="ui:space-y-2">
+      <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.edit.correct_answers_heading')}</p>
+      <div class="ui:flex ui:flex-col ui:gap-2">
+        {#each Array.from({ length: blankCount }, (_, i) => i) as blankIndex (blankIndex)}
+          <div class="ui:flex ui:flex-col ui:gap-1 sm:ui:flex-row sm:ui:items-center sm:ui:gap-3">
+            <span class="ui:text-muted-foreground ui:min-w-18 ui:text-sm"
+              >{label('word_bank.edit.blank_label')} {blankIndex + 1}</span
+            >
+            <Input
+              class="ui:flex-1"
+              value={correctAnswers[blankIndex] ?? ''}
+              placeholder={label('word_bank.edit.correct_placeholder')}
+              {disabled}
+              onchange={(event) => setCorrectAnswerAt(blankIndex, event.currentTarget.value)}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <div class="ui:space-y-2">
+    <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.edit.distractors_heading')}</p>
+    <div class="ui:flex ui:flex-col ui:gap-2">
+      {#each distractors as _, distractorIndex (distractorIndex)}
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <Input
+            class="ui:flex-1"
+            value={distractors[distractorIndex] ?? ''}
+            placeholder={label('word_bank.edit.distractor_placeholder')}
+            {disabled}
+            onchange={(event) => setDistractorAt(distractorIndex, event.currentTarget.value)}
+          />
+          <IconButton
+            type="button"
+            class="ui:shrink-0 ui:text-muted-foreground"
+            {disabled}
+            tooltip={label('common.remove')}
+            onclick={() => removeDistractorAt(distractorIndex)}
+          >
+            <Trash2Icon class="ui:size-4" />
+          </IconButton>
+        </div>
+      {/each}
+    </div>
+    <Button type="button" variant="outline" size="sm" {disabled} onclick={addDistractor}>
+      <PlusIcon class="ui:mr-1 ui:size-4" />
+      {label('word_bank.edit.add_distractor')}
+    </Button>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/preview.svelte b/packages/ui/src/custom/exercise-question/renderers/word-bank/preview.svelte
new file mode 100644
index 00000000..5a598f3b
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/preview.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { getExerciseQuestionLabel, type ExerciseQuestionRendererProps } from '@cio/question-types';
+  import { countWordBankBlanks, parseWordBankTemplate } from './word-bank-utils';
+
+  let { question, labels }: ExerciseQuestionRendererProps = $props();
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const template = $derived(String((question.settings?.template as string | undefined) ?? ''));
+
+  const correctAnswers = $derived.by(() => {
+    const raw = question.settings?.correctAnswers;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const blankCount = $derived(countWordBankBlanks(template));
+  const segments = $derived(parseWordBankTemplate(template));
+</script>
+
+<div class="ui:space-y-2">
+  {#if blankCount === 0}
+    <p class="ui:text-muted-foreground ui:text-sm">
+      {label('word_bank.preview.filled_label')}: {label('common.not_set')}
+    </p>
+  {:else}
+    <p class="ui:text-muted-foreground ui:text-sm">{label('word_bank.preview.filled_label')}</p>
+    <div class="ui:bg-muted/30 ui:rounded-lg ui:border ui:p-4 ui:font-mono ui:text-sm ui:leading-relaxed">
+      {#each segments as segment, segmentIndex (segmentIndex)}
+        {#if segment.type === 'text'}
+          <span>{segment.value}</span>
+        {:else}
+          {@const expected = correctAnswers[segment.index]?.trim()}
+          <span
+            class="ui:inline-flex ui:mx-0.5 ui:min-h-8 ui:min-w-[5rem] ui:items-center ui:justify-center ui:rounded ui:border-2 ui:border-solid ui:border-primary ui:bg-background ui:px-2 ui:py-0.5"
+          >
+            {expected || label('common.not_set')}
+          </span>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/review.svelte b/packages/ui/src/custom/exercise-question/renderers/word-bank/review.svelte
new file mode 100644
index 00000000..4dad2be8
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/review.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { getExerciseQuestionLabel, type ExerciseQuestionRendererProps } from '@cio/question-types';
+  import LabeledValueRow from '../shared/labeled-value-row.svelte';
+  import { countWordBankBlanks, parseWordBankTemplate } from './word-bank-utils';
+
+  let { question, answer = null, labels }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const template = $derived(String((question.settings?.template as string | undefined) ?? ''));
+
+  const correctAnswers = $derived.by(() => {
+    const raw = question.settings?.correctAnswers;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const blankCount = $derived(countWordBankBlanks(template));
+  const segments = $derived(parseWordBankTemplate(template));
+
+  const studentFilled = $derived(answer?.type === 'WORD_BANK' ? answer.filledBlanks : []);
+
+  function studentAtBlank(index: number): string {
+    const v = studentFilled[index];
+    return v != null && String(v).trim() ? String(v).trim() : label('common.not_set');
+  }
+
+  function correctAtBlank(index: number): string {
+    const v = correctAnswers[index];
+    return v != null && String(v).trim() ? String(v).trim() : label('common.not_set');
+  }
+</script>
+
+<div class="ui:space-y-3">
+  {#if blankCount === 0}
+    <p class="ui:text-muted-foreground ui:text-sm">{label('common.not_set')}</p>
+  {:else}
+    <div class="ui:space-y-2">
+      <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.review.your_answer_label')}</p>
+      <div class="ui:bg-muted/30 ui:rounded-lg ui:border ui:p-4 ui:font-mono ui:text-sm ui:leading-relaxed">
+        {#each segments as segment, segmentIndex (segmentIndex)}
+          {#if segment.type === 'text'}
+            <span>{segment.value}</span>
+          {:else}
+            <span
+              class="ui:inline-flex ui:mx-0.5 ui:min-h-8 ui:min-w-[5rem] ui:items-center ui:justify-center ui:rounded ui:border-2 ui:border-solid ui:border-muted-foreground/40 ui:px-2 ui:py-0.5"
+            >
+              {studentAtBlank(segment.index)}
+            </span>
+          {/if}
+        {/each}
+      </div>
+    </div>
+
+    <div class="ui:space-y-2">
+      <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.review.correct_label')}</p>
+      <div class="ui:bg-muted/30 ui:rounded-lg ui:border ui:p-4 ui:font-mono ui:text-sm ui:leading-relaxed">
+        {#each segments as segment, segmentIndex (segmentIndex)}
+          {#if segment.type === 'text'}
+            <span>{segment.value}</span>
+          {:else}
+            <span
+              class="ui:inline-flex ui:mx-0.5 ui:min-h-8 ui:min-w-[5rem] ui:items-center ui:justify-center ui:rounded ui:border-2 ui:border-solid ui:border-primary ui:px-2 ui:py-0.5"
+            >
+              {correctAtBlank(segment.index)}
+            </span>
+          {/if}
+        {/each}
+      </div>
+    </div>
+
+    <div class="ui:space-y-1">
+      {#each Array.from({ length: blankCount }, (_, i) => i) as blankIndex (blankIndex)}
+        <LabeledValueRow
+          label={`${label('word_bank.edit.blank_label')} ${blankIndex + 1}`}
+          value={`${studentAtBlank(blankIndex)} → ${correctAtBlank(blankIndex)}`}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/submission.svelte b/packages/ui/src/custom/exercise-question/renderers/word-bank/submission.svelte
new file mode 100644
index 00000000..94b8d0a9
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/submission.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import * as Chart from '../../../../base/chart';
+  import type { ExerciseQuestionRendererProps } from '@cio/question-types';
+
+  import { getAnswerForQuestion, getSubmissionLabel, normalizeLabel, withChartColors } from '../submission-utils';
+
+  let {
+    question,
+    submissions = [],
+    labels,
+    maxSubmissionItems = 8
+  }: Pick<ExerciseQuestionRendererProps, 'question' | 'submissions' | 'labels' | 'maxSubmissionItems'> = $props();
+
+  const chartConfig = $derived({
+    responses: {
+      label: getSubmissionLabel(labels, 'submission.chart.responses', 'Responses'),
+      color: 'var(--chart-1)'
+    }
+  } satisfies Chart.ChartConfig);
+
+  const series = $derived([
+    {
+      key: 'responses',
+      value: 'responses',
+      label: chartConfig.responses.label,
+      color: 'var(--color-responses)'
+    }
+  ]);
+
+  function summarizeWordBankAnswer(answer: { filledBlanks: string[] } | null): string {
+    if (!answer || !Array.isArray(answer.filledBlanks)) return '';
+    return answer.filledBlanks.map((v) => String(v || '').trim()).join(' | ');
+  }
+
+  const chartData = $derived.by(() => {
+    const byValue = new Map<string, { key: string; label: string; responses: number }>();
+    let noAnswerCount = 0;
+
+    for (const submission of submissions || []) {
+      const answer = getAnswerForQuestion(submission, question);
+      if (!answer || answer.type !== 'WORD_BANK') {
+        noAnswerCount += 1;
+        continue;
+      }
+
+      const summary = summarizeWordBankAnswer(answer).trim().toLowerCase();
+      if (!summary) {
+        noAnswerCount += 1;
+        continue;
+      }
+
+      const key = summary;
+      const current = byValue.get(key);
+
+      if (!current) {
+        byValue.set(key, {
+          key,
+          label: summarizeWordBankAnswer(answer).trim() || key,
+          responses: 1
+        });
+        continue;
+      }
+
+      current.responses += 1;
+    }
+
+    const sorted = [...byValue.values()].sort((a, b) => b.responses - a.responses);
+
+    let rows = sorted;
+
+    if (rows.length > maxSubmissionItems) {
+      const kept = rows.slice(0, maxSubmissionItems);
+      const otherCount = rows.slice(maxSubmissionItems).reduce((sum, item) => sum + item.responses, 0);
+
+      rows = [
+        ...kept,
+        {
+          key: 'other',
+          label: getSubmissionLabel(labels, 'submission.common.other', 'Other'),
+          responses: otherCount
+        }
+      ];
+    }
+
+    if (noAnswerCount > 0) {
+      rows.push({
+        key: 'no-answer',
+        label: getSubmissionLabel(labels, 'submission.common.no_answer', 'No answer'),
+        responses: noAnswerCount
+      });
+    }
+
+    return withChartColors(rows.map((row) => ({ ...row, label: normalizeLabel(row.label, row.key) })));
+  });
+</script>
+
+{#if chartData.length > 0}
+  <Chart.Container config={chartConfig} class="ui:h-[280px] ui:w-full">
+    <Chart.BarChart
+      data={chartData}
+      xScale={Chart.scaleBand().padding(0.25)}
+      x="label"
+      axis="x"
+      tooltip={false}
+      {series}
+    />
+  </Chart.Container>
+{:else}
+  <p class="ui:text-muted-foreground ui:text-sm">
+    {getSubmissionLabel(labels, 'submission.chart.no_data', 'No responses yet')}
+  </p>
+{/if}
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/take.svelte b/packages/ui/src/custom/exercise-question/renderers/word-bank/take.svelte
new file mode 100644
index 00000000..647e6e78
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/take.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { getExerciseQuestionLabel, type ExerciseQuestionRendererProps } from '@cio/question-types';
+  import { scale } from 'svelte/transition';
+  import {
+    buildWordBankChips,
+    countWordBankBlanks,
+    filledBlanksFromPlacements,
+    matchFilledBlanksToChipIds,
+    parseWordBankTemplate,
+    shuffleWordBankChips,
+    type WordBankChip
+  } from './word-bank-utils';
+
+  let {
+    question,
+    answer,
+    disabled = false,
+    labels,
+    onAnswerChange = () => {}
+  }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const template = $derived(String((question.settings?.template as string | undefined) ?? ''));
+
+  const correctAnswers = $derived.by(() => {
+    const raw = question.settings?.correctAnswers;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const distractors = $derived.by(() => {
+    const raw = question.settings?.distractors;
+    return Array.isArray(raw) ? (raw as string[]).map((s) => String(s ?? '')) : [];
+  });
+
+  const blankCount = $derived(countWordBankBlanks(template));
+  const segments = $derived(parseWordBankTemplate(template));
+
+  const baseChips = $derived(buildWordBankChips(correctAnswers, distractors));
+  let shuffledChips = $state<WordBankChip[]>([]);
+  let chipsSourceKey = $state('');
+
+  /** chip id placed in each blank, or null */
+  let placementByBlank = $state<(string | null)[]>([]);
+  let placementSyncedKey = $state('');
+
+  const chipById = $derived.by(() => {
+    const map = new Map<string, WordBankChip>();
+    for (const c of baseChips) {
+      map.set(c.id, c);
+    }
+    return map;
+  });
+
+  function emitFromPlacements(next: (string | null)[]) {
+    placementByBlank = next;
+    const filled = filledBlanksFromPlacements(next, chipById);
+    onAnswerChange({ type: 'WORD_BANK', filledBlanks: filled });
+  }
+
+  function syncChipsOrder() {
+    const key = JSON.stringify({ template, ca: correctAnswers, d: distractors });
+    if (key === chipsSourceKey) return;
+    chipsSourceKey = key;
+    shuffledChips = shuffleWordBankChips(baseChips);
+  }
+
+  function syncPlacementFromAnswer() {
+    const key = `${chipsSourceKey}:${answer?.type === 'WORD_BANK' ? answer.filledBlanks.join('\0') : ''}:${blankCount}`;
+    if (key === placementSyncedKey) return;
+    placementSyncedKey = key;
+
+    const nextPlacement: (string | null)[] = Array.from({ length: blankCount }, () => null);
+    if (answer?.type === 'WORD_BANK' && answer.filledBlanks.length > 0) {
+      const matched = matchFilledBlanksToChipIds(answer.filledBlanks, baseChips);
+      for (let i = 0; i < blankCount; i++) {
+        nextPlacement[i] = matched[i] ?? null;
+      }
+    }
+    placementByBlank = nextPlacement;
+  }
+
+  $effect(() => {
+    syncChipsOrder();
+    syncPlacementFromAnswer();
+  });
+
+  function isChipPlaced(chipId: string): boolean {
+    return placementByBlank.some((id) => id === chipId);
+  }
+
+  function firstEmptyBlankIndex(): number {
+    const idx = placementByBlank.findIndex((id) => id === null);
+    return idx;
+  }
+
+  function placeChipInBlank(blankIndex: number, chipId: string) {
+    if (disabled || blankIndex < 0 || blankIndex >= blankCount) return;
+
+    const next = [...placementByBlank];
+    const prevChip = next[blankIndex];
+    if (prevChip === chipId) return;
+
+    for (let i = 0; i < next.length; i++) {
+      if (next[i] === chipId) next[i] = null;
+    }
+
+    if (prevChip) {
+      // returned to bank implicitly
+    }
+
+    next[blankIndex] = chipId;
+    emitFromPlacements(next);
+  }
+
+  function onChipClick(chip: WordBankChip) {
+    if (disabled || isChipPlaced(chip.id)) return;
+    const blankIndex = firstEmptyBlankIndex();
+    if (blankIndex < 0) return;
+    placeChipInBlank(blankIndex, chip.id);
+  }
+
+  function clearBlank(blankIndex: number) {
+    if (disabled) return;
+    const next = [...placementByBlank];
+    next[blankIndex] = null;
+    emitFromPlacements(next);
+  }
+
+  function onDragStart(event: DragEvent, chipId: string) {
+    if (disabled) return;
+    event.dataTransfer?.setData('text/plain', chipId);
+    event.dataTransfer!.effectAllowed = 'move';
+  }
+
+  function onBlankDragOver(event: DragEvent) {
+    if (disabled) return;
+    event.preventDefault();
+    event.dataTransfer!.dropEffect = 'move';
+  }
+
+  function onBlankDrop(event: DragEvent, blankIndex: number) {
+    if (disabled) return;
+    event.preventDefault();
+    const chipId = event.dataTransfer?.getData('text/plain');
+    if (!chipId) return;
+    if (isChipPlaced(chipId)) return;
+    placeChipInBlank(blankIndex, chipId);
+  }
+</script>
+
+<div class="ui:space-y-4">
+  <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.take.helper')}</p>
+
+  <div class="ui:bg-muted/30 ui:rounded-lg ui:border ui:p-4 ui:font-mono ui:text-sm ui:leading-relaxed">
+    {#if blankCount === 0}
+      <span class="ui:text-muted-foreground">{template || label('common.not_set')}</span>
+    {:else}
+      {#each segments as segment, segmentIndex (segmentIndex)}
+        {#if segment.type === 'text'}
+          <span>{segment.value}</span>
+        {:else}
+          {@const blankIndex = segment.index}
+          {@const chipId = placementByBlank[blankIndex] ?? null}
+          {@const text = chipId ? (chipById.get(chipId)?.label ?? '') : ''}
+          <button
+            type="button"
+            class="ui:inline-flex ui:align-middle ui:mx-0.5 ui:min-h-8 ui:min-w-[5rem] ui:max-w-[16rem] ui:items-center ui:justify-center ui:rounded ui:border-2 ui:px-2 ui:py-0.5 ui:text-left ui:text-sm ui:transition-all ui:duration-200 ui:border-primary disabled:ui:cursor-not-allowed"
+            class:ui:border-dashed={!text}
+            class:ui:bg-background={!text}
+            class:ui:border-solid={!!text}
+            {disabled}
+            onclick={() => text && clearBlank(blankIndex)}
+            aria-label={label('word_bank.take.clear_blank_sr')}
+            ondragover={onBlankDragOver}
+            ondrop={(e) => onBlankDrop(e, blankIndex)}
+          >
+            {#if text}
+              <span in:scale={{ duration: 180, start: 0.92 }}>{text}</span>
+            {:else}
+              <span class="ui:text-muted-foreground ui:select-none">&nbsp;</span>
+            {/if}
+          </button>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+
+  <div class="ui:space-y-2">
+    <p class="ui:text-muted-foreground ui:text-xs">{label('word_bank.take.bank_heading')}</p>
+    <div class="ui:flex ui:flex-wrap ui:gap-2">
+      {#each shuffledChips as chip (chip.id)}
+        {@const placed = isChipPlaced(chip.id)}
+        <button
+          type="button"
+          draggable={!disabled && !placed}
+          class="ui:rounded ui:border-2 ui:border-primary ui:bg-primary ui:px-3 ui:py-1.5 ui:text-sm ui:text-primary-foreground ui:transition-opacity disabled:ui:cursor-not-allowed"
+          class:ui:opacity-40={placed}
+          class:ui:pointer-events-none={placed}
+          {disabled}
+          onclick={() => onChipClick(chip)}
+          ondragstart={(e) => onDragStart(e, chip.id)}
+        >
+          {chip.label || '—'}
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/word-bank/word-bank-utils.ts b/packages/ui/src/custom/exercise-question/renderers/word-bank/word-bank-utils.ts
new file mode 100644
index 00000000..0412a86c
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/word-bank/word-bank-utils.ts
@@ -0,0 +1,99 @@
+/** Marker teachers use in the template for each blank (three underscores). */
+export const WORD_BANK_BLANK_MARKER = '___';
+
+export type WordBankSegment = { type: 'text'; value: string } | { type: 'blank'; index: number };
+
+export function countWordBankBlanks(template: string): number {
+  if (!template) return 0;
+  const parts = template.split(WORD_BANK_BLANK_MARKER);
+  return Math.max(0, parts.length - 1);
+}
+
+/** Splits template into alternating text runs and blank slots (indices0..n-1). */
+export function parseWordBankTemplate(template: string): WordBankSegment[] {
+  const segments: WordBankSegment[] = [];
+  if (!template) return segments;
+
+  const parts = template.split(WORD_BANK_BLANK_MARKER);
+  let blankIndex = 0;
+
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i].length > 0) {
+      segments.push({ type: 'text', value: parts[i] });
+    }
+    if (i < parts.length - 1) {
+      segments.push({ type: 'blank', index: blankIndex });
+      blankIndex += 1;
+    }
+  }
+
+  return segments;
+}
+
+export type WordBankChip = { id: string; label: string };
+
+/** One chip per correct blank (by index) plus each distractor; labels may repeat. */
+export function buildWordBankChips(correctAnswers: string[], distractors: string[]): WordBankChip[] {
+  const chips: WordBankChip[] = [];
+
+  correctAnswers.forEach((raw, index) => {
+    const label = String(raw ?? '').trim();
+    chips.push({ id: `correct-${index}`, label });
+  });
+
+  distractors.forEach((raw, index) => {
+    const label = String(raw ?? '').trim();
+    if (!label) return;
+    chips.push({ id: `distractor-${index}`, label });
+  });
+
+  return chips;
+}
+
+/** Fisher–Yates shuffle (copy). */
+export function shuffleWordBankChips<T>(items: T[]): T[] {
+  const copy = [...items];
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [copy[i], copy[j]] = [copy[j], copy[i]];
+  }
+  return copy;
+}
+
+/**
+ * Maps student answer strings to chip ids (first unused chip matching each label, in order).
+ */
+export function matchFilledBlanksToChipIds(filledBlanks: string[], chips: WordBankChip[]): (string | null)[] {
+  const used = new Set<string>();
+  const result: (string | null)[] = [];
+
+  for (const raw of filledBlanks) {
+    const target = String(raw ?? '')
+      .trim()
+      .toLowerCase();
+    if (!target) {
+      result.push(null);
+      continue;
+    }
+
+    const chip = chips.find((c) => !used.has(c.id) && String(c.label).trim().toLowerCase() === target);
+    if (chip) {
+      used.add(chip.id);
+      result.push(chip.id);
+    } else {
+      result.push(null);
+    }
+  }
+
+  return result;
+}
+
+export function filledBlanksFromPlacements(
+  placementByBlank: (string | null)[],
+  chipById: Map<string, WordBankChip>
+): string[] {
+  return placementByBlank.map((id) => {
+    if (!id) return '';
+    return chipById.get(id)?.label ?? '';
+  });
+}
diff --git a/packages/ui/src/custom/media-player/media-player.svelte b/packages/ui/src/custom/media-player/media-player.svelte
index ea9cc70c..85ded527 100644
--- a/packages/ui/src/custom/media-player/media-player.svelte
+++ b/packages/ui/src/custom/media-player/media-player.svelte
@@ -12,12 +12,32 @@
   let { source, options = {}, class: className = '' }: Props = $props();
 
   const isMuse = $derived.by(() => source.type === 'muse' && source.metadata?.svid);
+  const isGoogleDrive = $derived(source.type === 'google_drive');
   const poster = $derived(source.type === 'upload' ? source.metadata?.thumbnailUrl : undefined);
+
+  const iframeTitle = $derived(source.metadata?.title?.trim() || 'Video');
+  const iframeMaxHeight = $derived(options.maxHeight ?? '400px');
+  const iframeWidth = $derived(options.width ?? '100%');
 </script>
 
 <div class={className}>
   {#if isMuse}
     <MusePlayer svid={source.metadata?.svid} {options} />
+  {:else if isGoogleDrive}
+    <div
+      class="ui:relative ui:overflow-hidden ui:rounded-md ui:border ui:border-border"
+      style:max-height={iframeMaxHeight}
+      style:width={iframeWidth}
+    >
+      <iframe
+        src={source.url}
+        title={iframeTitle}
+        class="ui:block ui:h-full ui:min-h-[240px] ui:w-full ui:border-0"
+        style:aspect-ratio="16 / 9"
+        allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </div>
   {:else}
     <PlyrPlayer src={source.url} {poster} {options} />
   {/if}
diff --git a/packages/ui/src/custom/media-player/types.ts b/packages/ui/src/custom/media-player/types.ts
index 029947cf..8f9e2822 100644
--- a/packages/ui/src/custom/media-player/types.ts
+++ b/packages/ui/src/custom/media-player/types.ts
@@ -1,4 +1,4 @@
-export type VideoType = 'youtube' | 'generic' | 'upload' | 'muse';
+export type VideoType = 'youtube' | 'generic' | 'upload' | 'muse' | 'google_drive';
 
 export interface VideoSource {
   type: VideoType;
@@ -6,6 +6,7 @@ export interface VideoSource {
   metadata?: {
     svid?: string;
     thumbnailUrl?: string;
+    title?: string;
   };
 }
 
diff --git a/packages/ui/src/custom/moving-icons/api.svelte b/packages/ui/src/custom/moving-icons/api.svelte
new file mode 100644
index 00000000..0b54d5ed
--- /dev/null
+++ b/packages/ui/src/custom/moving-icons/api.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  interface IconProps {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+  }
+
+  let {
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    isHovered: isParentHovered = false,
+    class: className = ''
+  }: IconProps = $props();
+
+  let localMotion = $state(false);
+
+  const showMotion = $derived(isParentHovered || localMotion);
+
+  function handleMouseEnter() {
+    if (isParentHovered || localMotion) return;
+    localMotion = true;
+
+    setTimeout(() => {
+      localMotion = false;
+    }, 650);
+  }
+</script>
+
+<div class={className} aria-label="braces" role="img" onmouseenter={handleMouseEnter}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="braces-icon"
+    class:motion-active={showMotion}
+  >
+    <g class="brace-left-wrap">
+      <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2v5a2 2 0 0 0 2 2h1" />
+    </g>
+    <g class="brace-right-wrap">
+      <path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-1" />
+    </g>
+  </svg>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+
+  .braces-icon {
+    overflow: visible;
+  }
+
+  .brace-left-wrap,
+  .brace-right-wrap {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+  .braces-icon.motion-active .brace-left-wrap {
+    animation: braceLeft 0.58s cubic-bezier(0.34, 1.15, 0.64, 1) forwards;
+  }
+
+  .braces-icon.motion-active .brace-right-wrap {
+    animation: braceRight 0.58s cubic-bezier(0.34, 1.15, 0.64, 1) 0.07s forwards;
+  }
+
+  @keyframes braceLeft {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    18% {
+      transform: translateX(-2.5px);
+    }
+    42% {
+      transform: translateX(0.6px);
+    }
+    65% {
+      transform: translateX(-0.35px);
+    }
+  }
+
+  @keyframes braceRight {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    18% {
+      transform: translateX(2.5px);
+    }
+    42% {
+      transform: translateX(-0.6px);
+    }
+    65% {
+      transform: translateX(0.35px);
+    }
+  }
+</style>
diff --git a/packages/ui/src/custom/moving-icons/dashboard.svelte b/packages/ui/src/custom/moving-icons/dashboard.svelte
index b6a036cd..03dc7bab 100644
--- a/packages/ui/src/custom/moving-icons/dashboard.svelte
+++ b/packages/ui/src/custom/moving-icons/dashboard.svelte
@@ -1,26 +1,36 @@
-<script>
-  /**
-   * @typedef {Object} Props
-   * @property {string} [color]
-   * @property {number} [size]
-   * @property {number} [strokeWidth]
-   * @property {boolean} [isHovered]
-   * @property {string} [class]
-   */
+<script lang="ts">
+  interface IconProps {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+  }
 
-  /** @type {Props} */
-  let { color = 'currentColor', size = 24, strokeWidth = 2, isHovered = false, class: className = '' } = $props();
+  let {
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    isHovered: isParentHovered = false,
+    class: className = ''
+  }: IconProps = $props();
+
+  /** Local pulse when the icon itself is moused; row hover uses the `isHovered` prop from `HoverableItem`. */
+  let localMotion = $state(false);
+
+  const showMotion = $derived(isParentHovered || localMotion);
 
   function handleMouseEnter() {
-    isHovered = true;
+    if (isParentHovered || localMotion) return;
+    localMotion = true;
 
     setTimeout(() => {
-      isHovered = false;
+      localMotion = false;
     }, 650);
   }
 </script>
 
-<div class={className} aria-label="layout-dashboard" role="img" onmouseenter={handleMouseEnter}>
+<div class={className} aria-label="layout-grid" role="img" onmouseenter={handleMouseEnter}>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -31,13 +41,13 @@
     stroke-width={strokeWidth}
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="layout-dashboard-icon"
-    class:animate={isHovered}
+    class="layout-grid-icon"
+    class:motion-active={showMotion}
   >
-    <rect width="7" height="9" x="3" y="3" rx="1" class="ui:top-left-panel" />
-    <rect width="7" height="5" x="14" y="3" rx="1" class="ui:top-right-panel" />
-    <rect width="7" height="9" x="14" y="12" rx="1" class="ui:bottom-right-panel" />
-    <rect width="7" height="5" x="3" y="16" rx="1" class="ui:bottom-left-panel" />
+    <rect width="7" height="7" x="3" y="3" rx="1" class="top-left-panel" />
+    <rect width="7" height="7" x="14" y="3" rx="1" class="top-right-panel" />
+    <rect width="7" height="7" x="14" y="14" rx="1" class="bottom-right-panel" />
+    <rect width="7" height="7" x="3" y="14" rx="1" class="bottom-left-panel" />
   </svg>
 </div>
 
@@ -45,28 +55,29 @@
   div {
     display: inline-block;
   }
-  .layout-dashboard-icon {
+
+  .layout-grid-icon {
     overflow: visible;
   }
 
-  .layout-dashboard-icon.animate .top-left-panel {
+  .layout-grid-icon.motion-active .top-right-panel {
     opacity: 0;
-    animation: fadeInLeft 0.35s ease-out forwards;
+    animation: fadeInTop 0.35s ease-out forwards;
   }
 
-  .layout-dashboard-icon.animate .bottom-right-panel {
+  .layout-grid-icon.motion-active .bottom-right-panel {
     opacity: 0;
     animation: fadeInRight 0.35s ease-out 0.1s forwards;
   }
 
-  .layout-dashboard-icon.animate .top-right-panel {
+  .layout-grid-icon.motion-active .bottom-left-panel {
     opacity: 0;
-    animation: fadeInTop 0.35s ease-out 0.2s forwards;
+    animation: fadeInBottom 0.35s ease-out 0.2s forwards;
   }
 
-  .layout-dashboard-icon.animate .bottom-left-panel {
+  .layout-grid-icon.motion-active .top-left-panel {
     opacity: 0;
-    animation: fadeInBottom 0.35s ease-out 0.3s forwards;
+    animation: fadeInLeft 0.35s ease-out 0.3s forwards;
   }
 
   @keyframes fadeInLeft {
diff --git a/packages/ui/src/custom/moving-icons/external-link.svelte b/packages/ui/src/custom/moving-icons/external-link.svelte
new file mode 100644
index 00000000..7db051a7
--- /dev/null
+++ b/packages/ui/src/custom/moving-icons/external-link.svelte
@@ -0,0 +1,81 @@
+<script>
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [isHovered] - from parent HoverableItem; combined with internal mouseenter pulse
+   * @property {string} [color]
+   * @property {number} [size]
+   * @property {number} [strokeWidth]
+   * @property {boolean} [ariaHidden] - when true, icon is treated as decorative (e.g. next to visible text)
+   * @property {string} [class]
+   */
+
+  /** @type {Props} */
+  let {
+    isHovered = false,
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    ariaHidden = false,
+    class: className = ''
+  } = $props();
+
+  let pulseFromMouseEnter = $state(false);
+
+  function handleMouseEnter() {
+    if (pulseFromMouseEnter) return;
+
+    pulseFromMouseEnter = true;
+    setTimeout(() => {
+      pulseFromMouseEnter = false;
+    }, 500);
+  }
+
+  const arrowAnimates = $derived(isHovered || pulseFromMouseEnter);
+</script>
+
+<div
+  class={className}
+  aria-hidden={ariaHidden ? true : undefined}
+  aria-label={ariaHidden ? undefined : 'square-arrow-out-up-right'}
+  role={ariaHidden ? undefined : 'img'}
+  onmouseenter={handleMouseEnter}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+    <g class="arrow" class:animate={arrowAnimates}>
+      <path d="m21 3-9 9" />
+      <path d="M15 3h6v6" />
+    </g>
+  </svg>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+  .arrow path {
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  .animate {
+    animation: moveUpRight 0.5s;
+  }
+  @keyframes moveUpRight {
+    0%,
+    100% {
+      transform: translate(0, 0);
+    }
+    50% {
+      transform: translate(-2px, 2px);
+    }
+  }
+</style>
diff --git a/packages/ui/src/custom/moving-icons/home.svelte b/packages/ui/src/custom/moving-icons/home.svelte
index d40d7ec1..a242f3c4 100644
--- a/packages/ui/src/custom/moving-icons/home.svelte
+++ b/packages/ui/src/custom/moving-icons/home.svelte
@@ -1,25 +1,45 @@
 <script>
   /**
    * @typedef {Object} Props
+   * @property {boolean} [isHovered] - from parent HoverableItem; combined with internal mouseenter pulse
    * @property {string} [color]
    * @property {number} [size]
    * @property {number} [strokeWidth]
-   * @property {boolean} [isHovered]
+   * @property {boolean} [ariaHidden] - when true, icon is treated as decorative (e.g. next to visible text)
    * @property {string} [class]
    */
 
   /** @type {Props} */
-  let { color = 'currentColor', size = 24, strokeWidth = 2, isHovered = false, class: className = '' } = $props();
+  let {
+    isHovered = false,
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    ariaHidden = false,
+    class: className = ''
+  } = $props();
+
+  let pulseFromMouseEnter = $state(false);
 
   function handleMouseEnter() {
-    isHovered = true;
+    if (pulseFromMouseEnter) return;
+
+    pulseFromMouseEnter = true;
     setTimeout(() => {
-      isHovered = false;
+      pulseFromMouseEnter = false;
     }, 800);
   }
+
+  const iconAnimates = $derived(isHovered || pulseFromMouseEnter);
 </script>
 
-<div class={className} aria-label="house" role="img" onmouseenter={handleMouseEnter}>
+<div
+  class={className}
+  aria-hidden={ariaHidden ? true : undefined}
+  aria-label={ariaHidden ? undefined : 'house'}
+  role={ariaHidden ? undefined : 'img'}
+  onmouseenter={handleMouseEnter}
+>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -31,7 +51,7 @@
     stroke-linecap="round"
     stroke-linejoin="round"
     class="house-icon"
-    class:animate={isHovered}
+    class:animate={iconAnimates}
   >
     <path
       d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
diff --git a/packages/ui/src/custom/moving-icons/index.ts b/packages/ui/src/custom/moving-icons/index.ts
index df99ad1d..b0dddb1f 100644
--- a/packages/ui/src/custom/moving-icons/index.ts
+++ b/packages/ui/src/custom/moving-icons/index.ts
@@ -1,4 +1,5 @@
 export { default as AnalyticsIcon } from './analytics.svelte';
+export { default as ApiIcon } from './api.svelte';
 export { default as AttendanceIcon } from './attendance.svelte';
 export { default as AttachmentIcon } from './attachment.svelte';
 export { default as CertificateIcon } from './certificate.svelte';
@@ -9,6 +10,7 @@ export { default as CourseIcon } from './course.svelte';
 export { default as DashboardIcon } from './dashboard.svelte';
 export { default as ExerciseIcon } from './exercise.svelte';
 export { default as ExploreIcon } from './explore.svelte';
+export { default as ExternalLinkIcon } from './external-link.svelte';
 export { default as GoalIcon } from './goal.svelte';
 export { default as HeaderIcon } from './header.svelte';
 export { default as HomeIcon } from './home.svelte';
@@ -26,4 +28,6 @@ export { default as ReviewIcon } from './review.svelte';
 export { default as SettingsIcon } from './settings.svelte';
 export { default as SetupIcon } from './setup.svelte';
 export { default as SubmissionIcon } from './submission.svelte';
+export { default as TagIcon } from './tag.svelte';
 export { default as UploadIcon } from './upload.svelte';
+export { default as ZapIcon } from './zap.svelte';
diff --git a/packages/ui/src/custom/moving-icons/tag.svelte b/packages/ui/src/custom/moving-icons/tag.svelte
new file mode 100644
index 00000000..0e2877db
--- /dev/null
+++ b/packages/ui/src/custom/moving-icons/tag.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  interface IconProps {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+  }
+
+  let {
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    isHovered = false,
+    class: className = ''
+  }: IconProps = $props();
+
+  function handleMouseEnter() {
+    if (isHovered) return;
+    isHovered = true;
+
+    setTimeout(() => {
+      isHovered = false;
+    }, 500);
+  }
+</script>
+
+<div class={className} aria-label="tag" role="img" onmouseenter={handleMouseEnter}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="tag-icon"
+    class:animate={isHovered}
+  >
+    <path
+      d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+    />
+    <circle cx="7.5" cy="7.5" r=".5" fill={color} />
+  </svg>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+
+  .tag-icon {
+    overflow: visible;
+  }
+
+  .tag-icon.animate {
+    transform-origin: top left;
+    animation: tagRotate 0.5s ease-in-out;
+  }
+
+  @keyframes tagRotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    40% {
+      transform: rotate(10deg);
+    }
+    80% {
+      transform: rotate(-5deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+</style>
diff --git a/packages/ui/src/custom/moving-icons/zap.svelte b/packages/ui/src/custom/moving-icons/zap.svelte
new file mode 100644
index 00000000..9c3130f9
--- /dev/null
+++ b/packages/ui/src/custom/moving-icons/zap.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  interface IconProps {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+  }
+
+  let {
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    isHovered: isParentHovered = false,
+    class: className = ''
+  }: IconProps = $props();
+
+  let localMotion = $state(false);
+
+  const showMotion = $derived(isParentHovered || localMotion);
+
+  function handleMouseEnter() {
+    if (isParentHovered || localMotion) return;
+    localMotion = true;
+
+    setTimeout(() => {
+      localMotion = false;
+    }, 650);
+  }
+</script>
+
+<div class={className} aria-label="zap" role="img" onmouseenter={handleMouseEnter}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="zap-icon"
+    class:motion-active={showMotion}
+  >
+    <g class="zap-wrap">
+      <path
+        d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
+      />
+    </g>
+  </svg>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+
+  .zap-icon {
+    overflow: visible;
+  }
+
+  .zap-wrap {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+  .zap-icon.motion-active .zap-wrap {
+    animation: zapJolt 0.58s cubic-bezier(0.34, 1.15, 0.64, 1) forwards;
+  }
+
+  @keyframes zapJolt {
+    0%,
+    100% {
+      transform: translate(0, 0) rotate(0deg) scale(1);
+    }
+    18% {
+      transform: translate(0.5px, -2px) rotate(-9deg) scale(1.07);
+    }
+    40% {
+      transform: translate(-0.5px, 1px) rotate(7deg) scale(1.03);
+    }
+    62% {
+      transform: translate(0.25px, -0.25px) rotate(-3deg) scale(1.01);
+    }
+  }
+</style>
diff --git a/packages/ui/src/custom/newsfeed-reactions/index.ts b/packages/ui/src/custom/newsfeed-reactions/index.ts
new file mode 100644
index 00000000..e75891f4
--- /dev/null
+++ b/packages/ui/src/custom/newsfeed-reactions/index.ts
@@ -0,0 +1,22 @@
+import NewsfeedReactions from './newsfeed-reactions.svelte';
+import {
+  NEWSFEED_REACTION_OPTIONS,
+  buildNextNewsfeedReaction,
+  getNewsfeedReactionCounts,
+  getSelectedNewsfeedReactionType,
+  type NewsfeedReactionCounts,
+  type NewsfeedReactionRecord,
+  type NewsfeedReactionType
+} from './newsfeed-reactions';
+
+export {
+  NewsfeedReactions,
+  NEWSFEED_REACTION_OPTIONS,
+  buildNextNewsfeedReaction,
+  getNewsfeedReactionCounts,
+  getSelectedNewsfeedReactionType,
+  type NewsfeedReactionCounts,
+  type NewsfeedReactionRecord,
+  type NewsfeedReactionType
+};
+export { NewsfeedReactions as default };
diff --git a/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.svelte b/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.svelte
new file mode 100644
index 00000000..1829d040
--- /dev/null
+++ b/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import * as Popover from '../../base/popover';
+  import { Button } from '../../base/button';
+  import { cn } from '../../tools';
+  import SmileIcon from '@lucide/svelte/icons/smile';
+  import {
+    NEWSFEED_REACTION_OPTIONS,
+    type NewsfeedReactionCounts,
+    type NewsfeedReactionType
+  } from './newsfeed-reactions';
+
+  interface Props {
+    reactionCounts?: NewsfeedReactionCounts;
+    selectedReactionType?: NewsfeedReactionType | null;
+    disabled?: boolean;
+    class?: string;
+    open?: boolean;
+    onReactionToggle?: (reactionType: NewsfeedReactionType) => void | Promise<void>;
+  }
+
+  let {
+    reactionCounts = {},
+    selectedReactionType = null,
+    disabled = false,
+    class: className = '',
+    open = $bindable(false),
+    onReactionToggle = () => {}
+  }: Props = $props();
+
+  const hasVisibleReactions = $derived(
+    NEWSFEED_REACTION_OPTIONS.some((reactionOption) => (reactionCounts[reactionOption.type] ?? 0) > 0)
+  );
+
+  function handleReactionToggle(reactionType: NewsfeedReactionType) {
+    if (disabled) {
+      return;
+    }
+
+    open = false;
+    void onReactionToggle(reactionType);
+  }
+</script>
+
+<div class={cn('ui:flex ui:items-center ui:gap-2', className)}>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          type="button"
+          variant={open ? 'light-default' : 'outline'}
+          size="icon-sm"
+          class="ui:rounded-xl ui:shadow-none"
+          {disabled}
+          aria-label="Open reactions"
+        >
+          <SmileIcon class="ui:size-4" />
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+
+    <Popover.Content side="top" align="start" sideOffset={10} class="ui:w-auto ui:max-w-none ui:p-1!">
+      <div class="ui:grid ui:grid-cols-4 ui:gap-2">
+        {#each NEWSFEED_REACTION_OPTIONS as reactionOption (reactionOption.type)}
+          <Button
+            type="button"
+            variant={selectedReactionType === reactionOption.type ? 'light-default' : 'ghost'}
+            size="icon-xs"
+            class="ui:rounded-full"
+            {disabled}
+            aria-label={reactionOption.label}
+            onclick={() => handleReactionToggle(reactionOption.type)}
+          >
+            <span>{reactionOption.emoji}</span>
+          </Button>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+
+  {#if hasVisibleReactions}
+    <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-1">
+      {#each NEWSFEED_REACTION_OPTIONS as reactionOption (reactionOption.type)}
+        {@const count = reactionCounts[reactionOption.type] ?? 0}
+        {#if count > 0}
+          <Button
+            type="button"
+            variant={selectedReactionType === reactionOption.type ? 'light-default' : 'ghost'}
+            size="sm"
+            class="ui:h-8 ui:rounded-full ui:px-3"
+            {disabled}
+            aria-label={reactionOption.label}
+            onclick={() => handleReactionToggle(reactionOption.type)}
+          >
+            <span aria-hidden="true" class="ui:text-sm ui:leading-none">{reactionOption.emoji}</span>
+            <span class="ui:text-xs ui:font-medium">{count}</span>
+          </Button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.ts b/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.ts
new file mode 100644
index 00000000..a98da660
--- /dev/null
+++ b/packages/ui/src/custom/newsfeed-reactions/newsfeed-reactions.ts
@@ -0,0 +1,78 @@
+export const NEWSFEED_REACTION_OPTIONS = [
+  { type: 'clap', emoji: '👏', label: 'Clap' },
+  { type: 'smile', emoji: '😀', label: 'Smile' },
+  { type: 'thumbsup', emoji: '👍', label: 'Thumbs up' },
+  { type: 'thumbsdown', emoji: '👎', label: 'Thumbs down' }
+] as const;
+
+export type NewsfeedReactionType = (typeof NEWSFEED_REACTION_OPTIONS)[number]['type'];
+
+export type NewsfeedReactionCounts = Partial<Record<NewsfeedReactionType, number>>;
+export type NewsfeedReactionRecord = Record<NewsfeedReactionType, string[]>;
+
+const EMPTY_REACTION_RECORD: NewsfeedReactionRecord = {
+  clap: [],
+  smile: [],
+  thumbsup: [],
+  thumbsdown: []
+};
+
+function cloneReactionRecord(reaction: Partial<NewsfeedReactionRecord> | undefined): NewsfeedReactionRecord {
+  return {
+    clap: [...(reaction?.clap ?? EMPTY_REACTION_RECORD.clap)],
+    smile: [...(reaction?.smile ?? EMPTY_REACTION_RECORD.smile)],
+    thumbsup: [...(reaction?.thumbsup ?? EMPTY_REACTION_RECORD.thumbsup)],
+    thumbsdown: [...(reaction?.thumbsdown ?? EMPTY_REACTION_RECORD.thumbsdown)]
+  };
+}
+
+export function getNewsfeedReactionCounts(
+  reaction: Partial<NewsfeedReactionRecord> | undefined
+): NewsfeedReactionCounts {
+  return {
+    clap: reaction?.clap?.length ?? 0,
+    smile: reaction?.smile?.length ?? 0,
+    thumbsup: reaction?.thumbsup?.length ?? 0,
+    thumbsdown: reaction?.thumbsdown?.length ?? 0
+  };
+}
+
+export function getSelectedNewsfeedReactionType(
+  reaction: Partial<NewsfeedReactionRecord> | undefined,
+  authorId: string
+): NewsfeedReactionType | null {
+  if (!authorId) {
+    return null;
+  }
+
+  for (const option of NEWSFEED_REACTION_OPTIONS) {
+    if (reaction?.[option.type]?.includes(authorId)) {
+      return option.type;
+    }
+  }
+
+  return null;
+}
+
+export function buildNextNewsfeedReaction(
+  reaction: Partial<NewsfeedReactionRecord> | undefined,
+  reactionType: NewsfeedReactionType,
+  authorId: string
+): NewsfeedReactionRecord {
+  if (!authorId) {
+    return cloneReactionRecord(reaction);
+  }
+
+  const nextReaction = cloneReactionRecord(reaction);
+  const selectedReactionType = getSelectedNewsfeedReactionType(reaction, authorId);
+
+  for (const option of NEWSFEED_REACTION_OPTIONS) {
+    nextReaction[option.type] = nextReaction[option.type].filter((memberId) => memberId !== authorId);
+  }
+
+  if (selectedReactionType !== reactionType) {
+    nextReaction[reactionType] = [...nextReaction[reactionType], authorId];
+  }
+
+  return nextReaction;
+}
diff --git a/packages/ui/src/custom/org-landing-page/bold.svelte b/packages/ui/src/custom/org-landing-page/bold.svelte
new file mode 100644
index 00000000..d57bd669
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/bold.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from './types';
+  import OrgLandingPageEmbed from './embed.svelte';
+  import OrgLandingPageCallout from './callout.svelte';
+  import OrgLandingPageFooter from './landing-page-footer.svelte';
+  import BoldNav from './bold/nav.svelte';
+  import BoldHero from './bold/hero.svelte';
+  import { Button } from '../../base/button';
+  import * as Card from '../../base/card';
+  import { BlurFade } from '../animation/blurfade';
+  import { BorderBeam } from '../animation/border-beam';
+  import { DotPattern } from '../animation/dot-pattern';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import { getPrimaryCourseTag } from './landing-page-utils';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    footerLinks,
+    footerText
+  }: OrgLandingPageProps = $props();
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+  <BoldNav {orgName} {logoUrl} {navItems} {authAction} />
+
+  <main>
+    <BoldHero {hero} />
+
+    <section class="ui:relative ui:bg-muted/30 ui:px-6 ui:overflow-hidden">
+      <DotPattern class="ui:opacity-[0.15]" />
+      <div class="ui:relative ui:max-w-7xl ui:mx-auto">
+        <div class="ui:flex ui:items-end ui:justify-between ui:mb-12">
+          <h2 class="ui:text-4xl ui:font-black ui:tracking-tight">Latest Courses</h2>
+        </div>
+        <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-8">
+          {#each courses as course, index (course.id)}
+            {@const primaryTag = getPrimaryCourseTag(course)}
+            <BlurFade delay={0.1 * index} once={true}>
+              <Card.Root
+                class="ui:group ui:relative ui:overflow-hidden ui:bg-background ui:rounded-3xl ui:p-4 ui:flex-col ui:sm:flex-row ui:gap-6 ui:duration-300 ui:h-full ui:border-border/50 {disableCourseLinks
+                  ? ''
+                  : 'ui:hover:shadow-xl ui:hover:shadow-primary/5 ui:transition-all'}"
+              >
+                <BorderBeam
+                  size={120}
+                  duration={8}
+                  colorFrom="var(--primary)"
+                  colorTo="color-mix(in oklab, var(--primary) 65%, white)"
+                />
+                {#if course.logo}
+                  <img
+                    src={course.logo}
+                    alt={course.title}
+                    class="ui:w-full ui:sm:w-48 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
+                  />
+                {/if}
+                <Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
+                  <Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
+                  <Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
+
+                  <div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
+                    {#if course.duration}
+                      <div
+                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
+                      >
+                        <ClockIcon class="ui:size-3.5" />
+                        <span>{course.duration}</span>
+                      </div>
+                    {/if}
+                    {#if primaryTag}
+                      <div
+                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
+                      >
+                        <TagIcon class="ui:size-3.5 ui:text-primary" />
+                        {#if primaryTag.color}
+                          <span
+                            class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
+                            style={`background-color: ${primaryTag.color}`}
+                            aria-hidden="true"
+                          ></span>
+                        {/if}
+                        <span>{primaryTag.name}</span>
+                      </div>
+                    {/if}
+                  </div>
+
+                  <div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
+                    <span class="ui:font-black ui:text-lg"
+                      >{course.price || formatCurrency(course.cost, course.currency)}</span
+                    >
+                    <Button
+                      href={disableCourseLinks ? undefined : course.link}
+                      variant="outline"
+                      class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
+                        ? 'ui:pointer-events-none'
+                        : 'ui:group-hover:bg-primary ui:group-hover:text-primary-foreground ui:transition-colors'}"
+                      aria-disabled={disableCourseLinks}
+                      tabindex={disableCourseLinks ? -1 : undefined}
+                    >
+                      Details
+                    </Button>
+                  </div>
+                </Card.Content>
+              </Card.Root>
+            </BlurFade>
+          {/each}
+        </div>
+
+        {#if hasMoreCourses}
+          <div class="ui:mt-12 ui:flex ui:justify-center">
+            <Button
+              href={disableCourseLinks ? undefined : '/courses'}
+              size="lg"
+              class="ui:rounded-xl ui:px-8"
+              disabled={disableCourseLinks}
+            >
+              View more courses
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </section>
+  </main>
+
+  <OrgLandingPageEmbed {embed} variant="bold" />
+
+  <OrgLandingPageCallout {callout} variant="bold" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footerLinks} {footerText} variant="bold" />
+</div>
diff --git a/packages/ui/src/custom/org-landing-page/bold/hero.svelte b/packages/ui/src/custom/org-landing-page/bold/hero.svelte
new file mode 100644
index 00000000..df3b2263
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/bold/hero.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from '../types';
+  import SecondaryActionButton from '../secondary-action-button.svelte';
+  import { Button } from '../../../base/button';
+  import { BlurFade } from '../../animation/blurfade';
+
+  interface Props {
+    hero: OrgLandingPageProps['hero'];
+  }
+
+  let { hero }: Props = $props();
+</script>
+
+<section class="ui:py-10 ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center">
+  <div>
+    <BlurFade delay={0} once={true} class="ui:mb-6">
+      <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-black ui:leading-[1.1] ui:tracking-tighter">{hero.heading}</h1>
+    </BlurFade>
+    <BlurFade delay={0.15} once={true}>
+      <p class="ui:text-xl ui:text-muted-foreground ui:mb-10 ui:leading-relaxed">{hero.subheading}</p>
+    </BlurFade>
+    <BlurFade delay={0.3} once={true}>
+      <div class="ui:flex ui:flex-wrap ui:gap-4">
+        <Button
+          href={hero.primaryAction.href}
+          size="lg"
+          class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-primary/20 ui:hover:-translate-y-1 ui:transition-all"
+        >
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
+        {/if}
+      </div>
+    </BlurFade>
+  </div>
+  {#if hero.image}
+    <BlurFade delay={0.2} once={true} class="ui:relative ui:hidden ui:lg:block">
+      <div
+        class="ui:absolute ui:inset-0 ui:bg-primary/5 ui:rounded-3xl ui:transform ui:translate-x-4 ui:translate-y-4"
+      ></div>
+      <img src={hero.image} alt="Hero" class="ui:relative ui:rounded-3xl ui:w-full ui:h-[500px] ui:object-cover" />
+    </BlurFade>
+  {/if}
+</section>
diff --git a/packages/ui/src/custom/org-landing-page/bold/nav.svelte b/packages/ui/src/custom/org-landing-page/bold/nav.svelte
new file mode 100644
index 00000000..fb2170f8
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/bold/nav.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { NavItem } from '../types';
+  import { Button } from '../../../base/button';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    navItems: NavItem[];
+    authAction?: {
+      label: string;
+      href: string;
+    };
+  }
+
+  let { orgName, logoUrl, navItems, authAction }: Props = $props();
+</script>
+
+<header class="ui:sticky ui:top-0 ui:z-10 ui:bg-background/90 ui:backdrop-blur-xl ui:border-b ui:border-border/40">
+  <div class="ui:flex ui:items-center ui:justify-between ui:px-6 ui:py-5 ui:max-w-7xl ui:mx-auto">
+    <a href="/" class="ui:font-black ui:text-2xl ui:tracking-tighter ui:flex ui:items-center ui:gap-3 ui:no-underline">
+      {#if logoUrl}
+        <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
+      {/if}
+      {orgName}
+    </a>
+    <div class="ui:flex ui:items-center ui:gap-4">
+      <nav class="ui:hidden ui:md:flex ui:gap-8 ui:items-center">
+        {#each navItems as item}
+          <a
+            href={item.href}
+            class="ui:text-sm ui:font-bold ui:uppercase ui:tracking-widest ui:hover:text-primary ui:transition-colors"
+            >{item.label}</a
+          >
+        {/each}
+      </nav>
+      {#if authAction}
+        <Button href={authAction.href} variant="outline" class="ui:rounded-xl ui:font-bold">
+          {authAction.label}
+        </Button>
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/packages/ui/src/custom/org-landing-page/callout.svelte b/packages/ui/src/custom/org-landing-page/callout.svelte
new file mode 100644
index 00000000..25dbe942
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/callout.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { LandingPageCallout } from './types';
+  import { Button } from '../../base/button';
+  import { BlurFade } from '../animation/blurfade';
+
+  let { callout, variant = 'minimal' }: { callout?: LandingPageCallout; variant?: 'minimal' | 'bold' | 'classic' } =
+    $props();
+
+  const sectionClasses: Record<string, string> = {
+    minimal: 'ui:py-20 ui:px-6',
+    bold: 'ui:py-24 ui:px-6 ui:bg-foreground ui:text-background',
+    classic: 'ui:py-20 ui:px-6 ui:bg-foreground ui:text-background'
+  };
+
+  const headingClasses: Record<string, string> = {
+    minimal: 'ui:text-3xl ui:font-semibold ui:tracking-tight',
+    bold: 'ui:text-4xl ui:lg:text-5xl ui:font-black ui:tracking-tighter',
+    classic: 'ui:text-3xl ui:font-bold ui:tracking-tight'
+  };
+
+  const descriptionClasses: Record<string, string> = {
+    minimal: 'ui:text-lg ui:text-foreground/70',
+    bold: 'ui:text-xl ui:text-background/70',
+    classic: 'ui:text-lg ui:text-background/80'
+  };
+
+  const buttonClasses: Record<string, string> = {
+    minimal: 'ui:rounded-full',
+    bold: 'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-primary/20',
+    classic: 'ui:px-8 ui:font-semibold'
+  };
+
+  const minimalBackground = `
+    linear-gradient(
+      135deg,
+      color-mix(in oklab, var(--primary) 10%, var(--background)) 0%,
+      color-mix(in oklab, var(--primary) 4%, var(--background)) 100%
+    )
+  `;
+</script>
+
+{#if callout}
+  <section
+    class={sectionClasses[variant]}
+    style={variant === 'minimal' ? `background: ${minimalBackground};` : undefined}
+  >
+    <div class="ui:mx-auto ui:flex ui:max-w-3xl ui:flex-col ui:items-center ui:gap-6 ui:text-center">
+      <BlurFade delay={0} once={true}>
+        <h2 class={headingClasses[variant]}>{callout.heading}</h2>
+      </BlurFade>
+
+      {#if callout.description}
+        <BlurFade delay={0.15} once={true}>
+          <p class={descriptionClasses[variant]}>{callout.description}</p>
+        </BlurFade>
+      {/if}
+
+      <BlurFade delay={0.3} once={true}>
+        <Button
+          href={callout.action.href}
+          size="lg"
+          class={buttonClasses[variant]}
+          variant={variant === 'bold' || variant === 'classic' ? 'secondary' : 'default'}
+        >
+          {callout.action.label}
+        </Button>
+      </BlurFade>
+    </div>
+  </section>
+{/if}
diff --git a/packages/ui/src/custom/org-landing-page/classic.svelte b/packages/ui/src/custom/org-landing-page/classic.svelte
new file mode 100644
index 00000000..eb209367
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/classic.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import type { OrgLandingPageProps } from './types';
+  import OrgLandingPageEmbed from './embed.svelte';
+  import OrgLandingPageCallout from './callout.svelte';
+  import OrgLandingPageFooter from './landing-page-footer.svelte';
+  import ClassicNav from './classic/nav.svelte';
+  import ClassicHero from './classic/hero.svelte';
+  import { Button } from '../../base/button';
+  import * as Item from '../../base/item';
+  import { BlurFade } from '../animation/blurfade';
+  import { CourseCard } from '../course-card';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import { calcCourseDiscount, formatExerciseCountLabel, getPrimaryCourseTag } from './landing-page-utils';
+  import { cn } from '../../tools';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    footerLinks,
+    footerText
+  }: OrgLandingPageProps = $props();
+
+  const COURSE_TAG_ICON: Component = TagIcon;
+</script>
+
+<div class="ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans">
+  <ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
+
+  <main>
+    <ClassicHero {hero} />
+
+    <section class="ui:py-10 ui:px-6 ui:lg:px-8 ui:max-w-7xl ui:mx-auto">
+      <div class="ui:text-center ui:mb-8">
+        <BlurFade delay={0} once={true}>
+          <h2 class="ui:text-3xl ui:font-bold ui:text-foreground">Featured Programs</h2>
+        </BlurFade>
+        <BlurFade delay={0.15} once={true}>
+          <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-border ui:mx-auto"></div>
+        </BlurFade>
+      </div>
+
+      <div class="ui:grid ui:grid-cols-1 ui:sm:grid-cols-2 ui:lg:grid-cols-3 ui:gap-8 ui:justify-items-center">
+        {#each courses as course, index (course.id)}
+          {@const primaryTag = getPrimaryCourseTag(course)}
+          {@const pricingData = {
+            cost: course.cost ?? 0,
+            discount: course.metadata?.discount ?? 0,
+            showDiscount: !!course.metadata?.showDiscount
+          }}
+          {@const displayCost = calcCourseDiscount(pricingData.discount, pricingData.cost, pricingData.showDiscount)}
+          {@const currencyFormatter = new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: course.currency ?? 'USD'
+          })}
+          <BlurFade delay={0.1 * index} once={true} class="ui:w-full ui:flex ui:justify-center">
+            <CourseCard
+              href={disableCourseLinks ? undefined : course.link || `/course/${course.slug || course.id}`}
+              bannerImage={course.logo || ''}
+              bannerAlt={course.title}
+              title={course.title}
+              description={course.description}
+              typeBadge={primaryTag
+                ? {
+                    label: primaryTag.name,
+                    icon: COURSE_TAG_ICON,
+                    iconClass: primaryTag.color ? '' : 'custom ui:text-primary'
+                  }
+                : undefined}
+              class={cn('ui:group ui:relative', !disableCourseLinks && 'ui:hover:shadow-md ui:transition-shadow')}
+            >
+              {#snippet tags()}
+                {#if course.tags && course.tags.length > 0}
+                  <div class="ui:flex ui:flex-wrap ui:gap-1 ui:min-w-0">
+                    {#each course.tags as tag (tag.id)}
+                      <Item.SubDescription
+                        class="ui:border-border ui:inline-flex ui:shrink-0 ui:items-center ui:gap-1.5 ui:rounded-full ui:border ui:px-2"
+                      >
+                        <span
+                          class="ui:bg-primary/60 ui:inline-block ui:h-1.5 ui:w-1.5 ui:shrink-0 ui:rounded-full"
+                          style={tag.color ? `background-color: ${tag.color}` : undefined}
+                          aria-hidden="true"
+                        ></span>
+                        <span>{tag.name}</span>
+                      </Item.SubDescription>
+                    {/each}
+                  </div>
+                {/if}
+              {/snippet}
+
+              {#snippet footer()}
+                <div class="ui:flex ui:justify-between ui:w-full">
+                  <div class="ui:w-[80%]">
+                    <p class="ui:text-xs ui:pl-2 ui:dark:text-white">
+                      <span>{course.lessonCount || 0} lessons</span>
+                      &
+                      <span>{formatExerciseCountLabel(course.exerciseCount ?? 0)}</span>
+                    </p>
+                    <div class="ui:py-2 ui:text-xs">
+                      {#if course.price != null && String(course.price).length > 0}
+                        <span class="ui:px-2">{course.price}</span>
+                      {:else if !displayCost}
+                        <span class="ui:px-2">Free</span>
+                      {:else if pricingData.showDiscount}
+                        <span class="ui:px-2">
+                          {currencyFormatter.format(displayCost)}
+                          <span class="line-through">
+                            {currencyFormatter.format(pricingData.cost)}
+                          </span>
+                        </span>
+                      {:else}
+                        <span class="ui:px-2">{currencyFormatter.format(displayCost)}</span>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              {/snippet}
+            </CourseCard>
+          </BlurFade>
+        {/each}
+      </div>
+
+      {#if hasMoreCourses}
+        <div class="ui:mt-12 ui:flex ui:justify-center">
+          <Button
+            href={disableCourseLinks ? undefined : '/courses'}
+            variant="outline"
+            size="lg"
+            class="ui:px-8"
+            disabled={disableCourseLinks}
+          >
+            View more courses
+          </Button>
+        </div>
+      {/if}
+    </section>
+  </main>
+
+  <OrgLandingPageEmbed {embed} variant="classic" />
+
+  <OrgLandingPageCallout {callout} variant="classic" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footerLinks} {footerText} variant="classic" />
+</div>
diff --git a/packages/ui/src/custom/org-landing-page/classic/hero.svelte b/packages/ui/src/custom/org-landing-page/classic/hero.svelte
new file mode 100644
index 00000000..a1c6f8e2
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/classic/hero.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from '../types';
+  import SecondaryActionButton from '../secondary-action-button.svelte';
+  import { Button } from '../../../base/button';
+  import { BlurFade } from '../../animation/blurfade';
+  import { BlurIn } from '../../animation/blurin';
+  import { DotPattern } from '../../animation/dot-pattern';
+
+  interface Props {
+    hero: OrgLandingPageProps['hero'];
+  }
+
+  let { hero }: Props = $props();
+</script>
+
+<section
+  class="ui:relative ui:bg-foreground ui:text-background ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
+>
+  {#if hero.image}
+    <div class="ui:absolute ui:inset-0 ui:opacity-10">
+      <img src={hero.image} alt="Background" class="ui:w-full ui:h-full ui:object-cover ui:grayscale" />
+    </div>
+  {/if}
+  <DotPattern fillColor="rgb(255 255 255 / 0.35)" class="ui:opacity-[0.06]" />
+  <div class="ui:relative ui:max-w-3xl ui:mx-auto ui:text-center">
+    <BlurIn
+      class="ui:text-4xl ui:sm:text-5xl ui:lg:text-6xl ui:font-bold ui:tracking-tight ui:mb-6 ui:leading-tight ui:drop-shadow-none"
+    >
+      {hero.heading}
+    </BlurIn>
+    <BlurFade delay={0.15} once={true}>
+      <p class="ui:text-lg ui:sm:text-xl ui:text-background/80 ui:mb-10">{hero.subheading}</p>
+    </BlurFade>
+    <BlurFade delay={0.3} once={true}>
+      <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
+        <Button href={hero.primaryAction.href} size="lg" class="ui:px-8 ui:font-semibold">
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton
+            href={hero.secondaryAction.href}
+            label={hero.secondaryAction.label}
+            variant="classic"
+          />
+        {/if}
+      </div>
+    </BlurFade>
+  </div>
+</section>
diff --git a/packages/ui/src/custom/org-landing-page/classic/nav.svelte b/packages/ui/src/custom/org-landing-page/classic/nav.svelte
new file mode 100644
index 00000000..02659fcb
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/classic/nav.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { NavItem } from '../types';
+  import { Button } from '../../../base/button';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    navItems: NavItem[];
+    authAction?: {
+      label: string;
+      href: string;
+    };
+  }
+
+  let { orgName, logoUrl, navItems, authAction }: Props = $props();
+</script>
+
+<header class="ui:bg-foreground ui:text-background">
+  <div class="ui:flex ui:items-center ui:justify-between ui:px-6 ui:lg:px-8 ui:h-20 ui:max-w-7xl ui:mx-auto">
+    <a href="/" class="ui:flex ui:items-center ui:gap-3 ui:text-xl ui:font-bold ui:tracking-wide ui:no-underline">
+      {#if logoUrl}
+        <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
+      {/if}
+      {orgName}
+    </a>
+    <div class="ui:flex ui:items-center ui:gap-4">
+      <nav class="ui:hidden ui:md:flex ui:space-x-8">
+        {#each navItems as item}
+          <a
+            href={item.href}
+            class="ui:text-sm ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors"
+            >{item.label}</a
+          >
+        {/each}
+      </nav>
+      {#if authAction}
+        <Button
+          href={authAction.href}
+          variant="outline"
+          class="ui:bg-transparent ui:text-background ui:border-background/40 ui:hover:bg-background/10 ui:hover:text-background ui:hover:border-background/60"
+        >
+          {authAction.label}
+        </Button>
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/packages/ui/src/custom/org-landing-page/embed.svelte b/packages/ui/src/custom/org-landing-page/embed.svelte
new file mode 100644
index 00000000..3692b63b
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/embed.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { OrgLandingPageTheme, LandingPageEmbed } from './types';
+  import SecondaryActionButton from './secondary-action-button.svelte';
+  import { BlurFade } from '../animation/blurfade';
+
+  let { embed, variant = 'minimal' }: { embed?: LandingPageEmbed; variant?: OrgLandingPageTheme } = $props();
+</script>
+
+{#if embed}
+  <section class="ui:py-12 ui:px-6 ui:md:px-8">
+    <div class="ui:mx-auto ui:flex ui:max-w-7xl ui:flex-col ui:items-center ui:gap-6 ui:text-center">
+      <BlurFade delay={0} once={true}>
+        <h3 class="ui:text-center ui:text-2xl ui:font-semibold ui:tracking-tight">{embed.title}</h3>
+      </BlurFade>
+      {#if embed.description?.trim()}
+        <BlurFade delay={0.12} once={true}>
+          <p class="ui:max-w-3xl ui:text-center ui:text-base ui:leading-7 ui:text-muted-foreground">
+            {embed.description}
+          </p>
+        </BlurFade>
+      {/if}
+      {#if embed.secondaryAction?.label && embed.secondaryAction?.href}
+        <BlurFade delay={0.2} once={true}>
+          <SecondaryActionButton href={embed.secondaryAction.href} label={embed.secondaryAction.label} {variant} />
+        </BlurFade>
+      {/if}
+      {#if embed.code}
+        <BlurFade delay={0.28} once={true}>
+          <div class="ui:flex ui:w-full ui:justify-center">
+            {@html embed.code}
+          </div>
+        </BlurFade>
+      {/if}
+    </div>
+  </section>
+{/if}
diff --git a/packages/ui/src/custom/org-landing-page/index.ts b/packages/ui/src/custom/org-landing-page/index.ts
new file mode 100644
index 00000000..a3d63ad5
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/index.ts
@@ -0,0 +1,14 @@
+export { default as MinimalLandingPage } from './minimal.svelte';
+export { default as BoldLandingPage } from './bold.svelte';
+export { default as ClassicLandingPage } from './classic.svelte';
+export { default as BoldLandingNav } from './bold/nav.svelte';
+export { default as BoldLandingHero } from './bold/hero.svelte';
+export { default as ClassicLandingNav } from './classic/nav.svelte';
+export { default as ClassicLandingHero } from './classic/hero.svelte';
+export { default as MinimalLandingNav } from './minimal/nav.svelte';
+export { default as MinimalLandingHero } from './minimal/hero.svelte';
+export { default as OrgLandingPageEmbed } from './embed.svelte';
+export { default as OrgLandingPageCallout } from './callout.svelte';
+export { default as OrgLandingPageFooter } from './landing-page-footer.svelte';
+export { default as SecondaryActionButton } from './secondary-action-button.svelte';
+export * from './types';
diff --git a/packages/ui/src/custom/org-landing-page/landing-page-footer.svelte b/packages/ui/src/custom/org-landing-page/landing-page-footer.svelte
new file mode 100644
index 00000000..8a1af46f
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/landing-page-footer.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { OrgLandingPageProps, OrgLandingPageTheme } from './types';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    footerLinks: OrgLandingPageProps['footerLinks'];
+    footerText: string;
+    variant: OrgLandingPageTheme;
+  }
+
+  let { orgName, logoUrl, footerLinks, footerText, variant }: Props = $props();
+</script>
+
+{#if variant === 'minimal'}
+  <footer
+    class="ui:py-12 ui:px-8 ui:max-w-[1200px] ui:mx-auto ui:border-t ui:border-border/50 ui:flex ui:flex-col ui:md:flex-row ui:items-center ui:justify-between ui:gap-4 ui:text-sm ui:text-muted-foreground"
+  >
+    <a href="/" class="ui:font-semibold ui:text-xl ui:text-foreground ui:flex ui:items-center ui:gap-2 ui:no-underline">
+      {#if logoUrl}
+        <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
+      {/if}
+      {orgName}
+    </a>
+    <div class="ui:flex ui:flex-wrap ui:justify-center ui:gap-8">
+      {#each footerLinks as link}
+        <a href={link.href} class="ui:hover:text-foreground ui:transition-colors">{link.label}</a>
+      {/each}
+    </div>
+    <p>{footerText}</p>
+  </footer>
+{:else}
+  <footer class="ui:bg-foreground ui:text-background/60 ui:py-16 ui:px-6">
+    <div class="ui:max-w-7xl ui:mx-auto ui:flex ui:flex-col ui:md:flex-row ui:items-center ui:justify-between ui:gap-8">
+      <a
+        href="/"
+        class="ui:font-black ui:text-2xl ui:text-background ui:tracking-tighter ui:flex ui:items-center ui:gap-3 ui:no-underline"
+      >
+        {#if logoUrl}
+          <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto ui:grayscale ui:brightness-200" />
+        {/if}
+        {orgName}
+      </a>
+      <div class="ui:flex ui:flex-wrap ui:justify-center ui:gap-8">
+        {#each footerLinks as link}
+          <a href={link.href} class="ui:hover:text-background ui:font-medium ui:transition-colors">{link.label}</a>
+        {/each}
+      </div>
+      <p class="ui:text-sm">{footerText}</p>
+    </div>
+  </footer>
+{/if}
diff --git a/packages/ui/src/custom/org-landing-page/landing-page-utils.ts b/packages/ui/src/custom/org-landing-page/landing-page-utils.ts
new file mode 100644
index 00000000..bee82799
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/landing-page-utils.ts
@@ -0,0 +1,19 @@
+import type { CourseItem } from './types';
+
+export function getPrimaryCourseTag(course: CourseItem) {
+  return course.tags?.[0];
+}
+
+/** Plain copy for org landing templates (no dashboard i18n). */
+export function formatExerciseCountLabel(count: number) {
+  if (count === 1) return '1 exercise';
+  return `${count} exercises`;
+}
+
+/** Mirrors dashboard `calcCourseDiscount` for landing-page course cards. */
+export function calcCourseDiscount(percent = 0, cost: number, showDiscount: boolean) {
+  if (!percent || !showDiscount) return cost;
+  const discountAmount = (percent / 100) * cost;
+  const discountedPrice = cost - discountAmount;
+  return Math.round(discountedPrice);
+}
diff --git a/packages/ui/src/custom/org-landing-page/minimal.svelte b/packages/ui/src/custom/org-landing-page/minimal.svelte
new file mode 100644
index 00000000..a4400510
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/minimal.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from './types';
+  import OrgLandingPageEmbed from './embed.svelte';
+  import OrgLandingPageCallout from './callout.svelte';
+  import OrgLandingPageFooter from './landing-page-footer.svelte';
+  import MinimalNav from './minimal/nav.svelte';
+  import MinimalHero from './minimal/hero.svelte';
+  import { Button } from '../../base/button';
+  import { BlurFade } from '../animation/blurfade';
+  import * as Card from '../../base/card';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import { getPrimaryCourseTag } from './landing-page-utils';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    footerLinks,
+    footerText
+  }: OrgLandingPageProps = $props();
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+  <main>
+    <MinimalHero {hero}>
+      {#snippet navigation()}
+        <MinimalNav {orgName} {logoUrl} {navItems} {authAction} />
+      {/snippet}
+    </MinimalHero>
+
+    <section class="ui:py-20 ui:px-4">
+      <div class="ui:max-w-[1200px] ui:mx-auto">
+        <h2 class="ui:text-2xl ui:font-semibold ui:mb-8">Our Courses</h2>
+        <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6">
+          {#each courses as course, index (course.id)}
+            {@const primaryTag = getPrimaryCourseTag(course)}
+            <BlurFade delay={0.1 * index} once={true}>
+              <a
+                href={disableCourseLinks ? undefined : course.link || `/course/${course.slug || course.id}`}
+                class="ui:block ui:h-full ui:no-underline {disableCourseLinks
+                  ? 'ui:cursor-default'
+                  : 'ui:transition-colors'}"
+                aria-disabled={disableCourseLinks}
+                tabindex={disableCourseLinks ? -1 : undefined}
+              >
+                <Card.Root
+                  class="ui:rounded-none ui:border-border/60 ui:shadow-none ui:h-full ui:p-0 ui:gap-0 {disableCourseLinks
+                    ? ''
+                    : 'ui:hover:border-border ui:transition-colors'}"
+                >
+                  <Card.Content class="ui:p-8 ui:flex ui:flex-col ui:flex-1">
+                    <Card.Title class="ui:text-xl ui:font-normal ui:mb-4">{course.title}</Card.Title>
+                    <Card.Description class="ui:mb-8 ui:line-clamp-3 ui:text-base ui:leading-relaxed">
+                      {course.description}
+                    </Card.Description>
+
+                    <div class="ui:flex ui:items-center ui:gap-6 ui:text-sm ui:mt-auto">
+                      {#if course.duration}
+                        <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground">
+                          <ClockIcon class="ui:size-4" />
+                          <span>{course.duration}</span>
+                        </div>
+                      {/if}
+                      {#if primaryTag}
+                        <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground">
+                          <TagIcon class="ui:size-4" />
+                          {#if primaryTag.color}
+                            <span
+                              class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
+                              style={`background-color: ${primaryTag.color}`}
+                              aria-hidden="true"
+                            ></span>
+                          {/if}
+                          <span>{primaryTag.name}</span>
+                        </div>
+                      {/if}
+                      <div class="ui:ml-auto ui:font-semibold">
+                        {course.price || formatCurrency(course.cost, course.currency)}
+                      </div>
+                    </div>
+                  </Card.Content>
+                </Card.Root>
+              </a>
+            </BlurFade>
+          {/each}
+        </div>
+
+        {#if hasMoreCourses}
+          <div class="ui:mt-10 ui:flex ui:justify-center">
+            <Button
+              href={disableCourseLinks ? undefined : '/courses'}
+              variant="outline"
+              size="lg"
+              disabled={disableCourseLinks}
+            >
+              View more courses
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </section>
+  </main>
+
+  <OrgLandingPageEmbed {embed} variant="minimal" />
+
+  <OrgLandingPageCallout {callout} variant="minimal" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footerLinks} {footerText} variant="minimal" />
+</div>
diff --git a/packages/ui/src/custom/org-landing-page/minimal/hero.svelte b/packages/ui/src/custom/org-landing-page/minimal/hero.svelte
new file mode 100644
index 00000000..dd25d5b0
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/minimal/hero.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from '../types';
+  import type { Snippet } from 'svelte';
+  import SecondaryActionButton from '../secondary-action-button.svelte';
+  import { Button } from '../../../base/button';
+  import { BlurFade } from '../../animation/blurfade';
+  import { DotPattern } from '../../animation/dot-pattern';
+  import { ShinnyText } from '../../animation/shinny-text';
+
+  interface Props {
+    hero: OrgLandingPageProps['hero'];
+    navigation: Snippet;
+  }
+
+  let { hero, navigation }: Props = $props();
+
+  const heroGradientBackground = `
+    radial-gradient(
+      circle at top center,
+      color-mix(in oklab, var(--primary) 24%, transparent) 0%,
+      transparent 58%
+    ),
+    linear-gradient(
+      135deg,
+      color-mix(in oklab, var(--primary) 12%, var(--background)) 0%,
+      color-mix(in oklab, var(--primary) 6%, var(--background)) 48%,
+      var(--background) 100%
+    )
+  `;
+</script>
+
+<section
+  class="ui:relative ui:overflow-hidden ui:px-4 ui:pt-4 ui:pb-16 ui:md:pb-24"
+  style={`background: ${heroGradientBackground};`}
+>
+  <DotPattern class="ui:opacity-[0.08]" />
+  <div class="ui:relative ui:max-w-[1200px] ui:mx-auto">
+    {@render navigation()}
+  </div>
+
+  <div class="ui:relative ui:py-20 ui:text-center ui:max-w-4xl ui:mx-auto">
+    <BlurFade delay={0} once={true}>
+      <h1 class="ui:text-5xl ui:md:text-6xl ui:font-semibold ui:tracking-tight ui:mb-6">{hero.heading}</h1>
+    </BlurFade>
+    <BlurFade delay={0.15} once={true}>
+      <ShinnyText
+        shimmerWidth={120}
+        class="ui:text-xl ui:mb-10 ui:max-w-2xl ui:mx-auto ui:font-light ui:text-foreground/72"
+      >
+        {hero.subheading}
+      </ShinnyText>
+    </BlurFade>
+    <BlurFade delay={0.3} once={true}>
+      <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
+        <Button href={hero.primaryAction.href} size="lg" class="ui:rounded-full">
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton
+            href={hero.secondaryAction.href}
+            label={hero.secondaryAction.label}
+            variant="minimal"
+          />
+        {/if}
+      </div>
+    </BlurFade>
+  </div>
+</section>
diff --git a/packages/ui/src/custom/org-landing-page/minimal/nav.svelte b/packages/ui/src/custom/org-landing-page/minimal/nav.svelte
new file mode 100644
index 00000000..346b5cc7
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/minimal/nav.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { NavItem } from '../types';
+  import { Button } from '../../../base/button';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    navItems: NavItem[];
+    authAction?: {
+      label: string;
+      href: string;
+    };
+  }
+
+  let { orgName, logoUrl, navItems, authAction }: Props = $props();
+
+  const navigationGradientBackground = `
+    linear-gradient(
+      135deg,
+      color-mix(in oklab, var(--primary) 16%, var(--background)) 0%,
+      color-mix(in oklab, var(--primary) 8%, var(--background)) 100%
+    )
+  `;
+</script>
+
+<header
+  class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:px-6 ui:py-4 ui:rounded-full ui:border ui:border-border/60 ui:backdrop-blur-sm"
+  style={`background: ${navigationGradientBackground};`}
+>
+  <a href="/" class="ui:font-semibold ui:text-xl ui:flex ui:items-center ui:gap-2 ui:no-underline">
+    {#if logoUrl}
+      <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
+    {/if}
+    {orgName}
+  </a>
+  <div class="ui:flex ui:items-center ui:gap-4">
+    <nav class="ui:hidden ui:md:flex ui:gap-8">
+      {#each navItems as item}
+        <a href={item.href} class="ui:text-sm ui:text-foreground/70 ui:hover:text-foreground ui:transition-colors"
+          >{item.label}</a
+        >
+      {/each}
+    </nav>
+    {#if authAction}
+      <Button href={authAction.href} variant="outline" class="ui:rounded-full">
+        {authAction.label}
+      </Button>
+    {/if}
+  </div>
+</header>
diff --git a/packages/ui/src/custom/org-landing-page/secondary-action-button.svelte b/packages/ui/src/custom/org-landing-page/secondary-action-button.svelte
new file mode 100644
index 00000000..11f034f2
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/secondary-action-button.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { OrgLandingPageTheme } from './types';
+  import { Button } from '../../base/button';
+
+  interface Props {
+    href: string;
+    label: string;
+    variant: OrgLandingPageTheme;
+  }
+
+  let { href, label, variant }: Props = $props();
+
+  const themeButtonClasses: Record<
+    OrgLandingPageTheme,
+    {
+      className: string;
+      variant: 'outline';
+    }
+  > = {
+    minimal: {
+      className: 'ui:rounded-full',
+      variant: 'outline'
+    },
+    bold: {
+      className:
+        'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:border-2 ui:hover:border-primary ui:transition-all',
+      variant: 'outline'
+    },
+    classic: {
+      className: 'ui:px-8 ui:font-semibold ui:bg-background ui:text-foreground ui:border-border ui:transition-colors',
+      variant: 'outline'
+    }
+  };
+</script>
+
+<Button {href} variant={themeButtonClasses[variant].variant} size="lg" class={themeButtonClasses[variant].className}>
+  {label}
+</Button>
diff --git a/packages/ui/src/custom/org-landing-page/types.ts b/packages/ui/src/custom/org-landing-page/types.ts
new file mode 100644
index 00000000..0db860da
--- /dev/null
+++ b/packages/ui/src/custom/org-landing-page/types.ts
@@ -0,0 +1,78 @@
+export type NavItem = { label: string; href: string };
+
+export type OrgLandingPageTheme = 'minimal' | 'bold' | 'classic';
+
+export type CourseItem = {
+  id: string;
+  slug?: string;
+  logo?: string | null;
+  title: string;
+  description: string;
+  type?: string;
+  isPublished?: boolean;
+  cost?: number;
+  currency?: string;
+  lessonCount?: number;
+  exerciseCount?: number;
+  totalStudents?: number;
+  metadata?: {
+    discount?: number;
+    showDiscount?: boolean;
+  };
+  tags?: Array<{
+    id: string;
+    name: string;
+    slug: string;
+    color?: string | null;
+  }>;
+  // Fallbacks for specific templates that might still want to use these
+  image?: string;
+  link?: string;
+  price?: string;
+  duration?: string;
+  level?: string;
+};
+
+export type FooterLink = { label: string; href: string };
+export type LandingPageEmbed = {
+  title: string;
+  description?: string;
+  code: string;
+  secondaryAction?: {
+    label: string;
+    href: string;
+  };
+};
+
+export type LandingPageCallout = {
+  heading: string;
+  description: string;
+  action: {
+    label: string;
+    href: string;
+  };
+};
+
+export interface OrgLandingPageProps {
+  orgName: string;
+  logoUrl?: string;
+  navItems: NavItem[];
+  authAction?: {
+    label: string;
+    href: string;
+  };
+  hero: {
+    heading: string;
+    subheading: string;
+    primaryAction: { label: string; href: string };
+    secondaryAction?: { label: string; href: string };
+    image?: string;
+  };
+  courses: CourseItem[];
+  hasMoreCourses?: boolean;
+  disableCourseLinks?: boolean;
+  embed?: LandingPageEmbed;
+  callout?: LandingPageCallout;
+  footerLinks: FooterLink[];
+  footerText: string;
+}
diff --git a/packages/ui/src/custom/question-type-picker/exercise-labels.ts b/packages/ui/src/custom/question-type-picker/exercise-labels.ts
new file mode 100644
index 00000000..e060e3c0
--- /dev/null
+++ b/packages/ui/src/custom/question-type-picker/exercise-labels.ts
@@ -0,0 +1,147 @@
+import type { ExerciseQuestionLabels } from '@cio/question-types';
+
+/**
+ * English labels for QuestionTypePicker embed demos (no dashboard i18n).
+ * Keep aligned with packages/storybook/src/molecules/exercise-question/question-labels.ts.
+ */
+export const QUESTION_TYPE_PICKER_EXERCISE_LABELS: ExerciseQuestionLabels = {
+  'common.option_prefix': 'Option',
+  'common.remove': 'Remove',
+  'common.add_option': 'Add option',
+  'common.correct_badge': 'Correct',
+  'common.incorrect_badge': 'Incorrect',
+  'common.not_set': 'Not set',
+  'navigation.previous': 'Previous',
+  'navigation.next': 'Next',
+  'navigation.finish': 'Finish',
+  'question.edit.title_label': 'Title',
+  'question.edit.title_placeholder': 'Question prompt',
+  'question.edit.description_label': 'Description (optional)',
+  'question.edit.description_placeholder': 'Add additional context for this question',
+  'question.edit.add_description': 'Add description',
+  'question.edit.remove_description': 'Remove description',
+  'question.edit.media_menu_sr': 'Question extras menu',
+  'question.edit.add_image': 'Add image',
+  'question.edit.add_video': 'Add video',
+  'question.edit.remove_image_tooltip': 'Remove image',
+  'question.edit.remove_image_sr': 'Remove image',
+  'question.edit.remove_video_tooltip': 'Remove video',
+  'question.edit.remove_video_sr': 'Remove video',
+  'question.edit.image_alt': 'Question context',
+  'question.edit.video_modal_title': 'Add YouTube video',
+  'question.edit.video_link_label': 'YouTube link',
+  'question.edit.video_link_placeholder': 'https://www.youtube.com/watch?v=',
+  'question.edit.video_add_button': 'Add video',
+  'question.edit.video_invalid_link': 'Please enter a valid YouTube link.',
+  'question.edit.upload_error_only_images': 'Only image files are supported.',
+  'question.edit.upload_error_skipped': 'Some files were skipped because they are not images.',
+  'question.edit.upload_error_failed': 'Failed to upload image. Try again.',
+  'radio.edit.helper': 'Select exactly one correct option.',
+  'radio.edit.correct_selected_tooltip': 'Correct answer selected',
+  'radio.edit.mark_correct_tooltip': 'Mark as correct answer',
+  'radio.edit.mark_correct_sr': 'Mark option as correct',
+  'checkbox.edit.helper': 'Mark one or more options as correct.',
+  'checkbox.edit.correct_selected_tooltip': 'Correct answer selected',
+  'checkbox.edit.toggle_correct_tooltip': 'Toggle correct answer',
+  'checkbox.edit.toggle_correct_sr': 'Toggle option as correct',
+  'true_false.true_label': 'True',
+  'true_false.false_label': 'False',
+  'true_false.edit.correct_answer_label': 'Correct answer',
+  'true_false.preview.correct_value_label': 'Correct value',
+  'short_answer.edit.instructions_placeholder': 'Optional instructions',
+  'short_answer.take.placeholder': 'Type your answer',
+  'short_answer.preview.helper': 'Free-text answer question.',
+  'short_answer.review.your_answer_label': 'Submitted:',
+  'short_answer.review.accepted_label': 'Accepted answers',
+  'numeric.edit.correct_value_label': 'Correct value',
+  'numeric.edit.correct_value_info': 'Expected numeric answer to mark as correct.',
+  'numeric.edit.tolerance_label': 'Tolerance',
+  'numeric.edit.tolerance_info': 'Allowed +/- range from the correct value.',
+  'numeric.edit.correct_value_placeholder': 'Correct value',
+  'numeric.edit.tolerance_placeholder': 'Tolerance',
+  'numeric.take.placeholder': 'Enter a number',
+  'numeric.preview.correct_value_label': 'Correct value',
+  'numeric.preview.tolerance_label': 'Tolerance',
+  'numeric.review.your_answer_label': 'Submitted:',
+  'numeric.review.in_range': 'Within tolerance',
+  'numeric.review.out_of_range': 'Outside tolerance',
+  'star.edit.correct_value_label': 'Correct star value',
+  'star.edit.correct_value_info': 'Expected star count for full credit.',
+  'star.edit.max_stars_label': 'Maximum stars',
+  'star.edit.max_stars_info': 'Stars shown to learners (1–10).',
+  'star.edit.correct_value_placeholder': 'e.g. 3',
+  'star.edit.max_stars_placeholder': 'e.g. 5',
+  'star.take.helper': 'Select your rating.',
+  'star.take.star_sr': 'Star {n} of {max}',
+  'star.preview.correct_label': 'Correct answer',
+  'fill_blank.edit.accepted_answers_placeholder': 'Accepted answers (comma separated)',
+  'fill_blank.take.placeholder': 'Enter answers separated by commas',
+  'fill_blank.preview.accepted_answers_label': 'Accepted answers',
+  'fill_blank.review.your_answer_label': 'Submitted:',
+  'word_bank.edit.template_label': 'Sentence template',
+  'word_bank.edit.template_placeholder': 'Use ___ for each blank...',
+  'word_bank.edit.template_helper': 'Use three underscores (___) for each blank.',
+  'word_bank.edit.no_blanks_warning': 'Add at least one ___ blank marker in your template.',
+  'word_bank.edit.correct_answers_heading': 'Correct answer for each blank',
+  'word_bank.edit.blank_label': 'Blank',
+  'word_bank.edit.correct_placeholder': 'Correct term or phrase',
+  'word_bank.edit.distractors_heading': 'Extra words (distractors)',
+  'word_bank.edit.distractor_placeholder': 'Wrong option',
+  'word_bank.edit.add_distractor': 'Add distractor',
+  'word_bank.take.helper': 'Click or drag words into blanks.',
+  'word_bank.take.bank_heading': 'Word bank',
+  'word_bank.take.clear_blank_sr': 'Remove word from blank',
+  'word_bank.preview.filled_label': 'Expected answers in context',
+  'word_bank.review.your_answer_label': 'Your answers',
+  'word_bank.review.correct_label': 'Correct answers',
+  'file_upload.edit.accepted_types_placeholder': 'Select accepted file formats',
+  'file_upload.edit.max_size_placeholder': 'Max size (MB)',
+  'file_upload.take.selected_file_label': 'Selected file',
+  'file_upload.take.upload_button': 'Upload',
+  'file_upload.take.upload_progress': 'Uploading...',
+  'file_upload.take.upload_error': 'Upload failed',
+  'file_upload.take.view': 'View',
+  'file_upload.take.download': 'Download',
+  'file_upload.preview.accepted_types_label': 'Accepted types',
+  'file_upload.preview.max_size_label': 'Max size (MB)',
+  'link.edit.instructions_placeholder': 'Optional instructions for learners',
+  'link.edit.helper': 'Learners can submit one or more valid URLs (http/https).',
+  'link.take.helper': 'Add one or more links. Only valid http/https URLs are accepted.',
+  'link.take.placeholder': 'https://example.com/resource',
+  'link.take.remove_tooltip': 'Remove link',
+  'link.take.remove_sr': 'Remove link',
+  'link.take.invalid_url_error': 'Please enter a valid URL (http/https).',
+  'link.take.add_button': 'Add link',
+  'link.preview.empty': 'No links submitted.',
+  'link.preview.item_label': 'Link {index}',
+  'matching.edit.helper': 'Configure pairs in question settings via host app controls.',
+  'matching.take.placeholder': 'Provide matching pairs as JSON',
+  'matching.preview.helper': 'Matching pairs preview is provided by host app settings.',
+  'ordering.fallback_step_prefix': 'Step',
+  'ordering.edit.helper': 'Drag items to define the correct order.',
+  'ordering.edit.add_step': 'Add step',
+  'ordering.edit.empty': 'Add steps, then drag to set the expected order.',
+  'ordering.edit.step_placeholder': 'Step {index}',
+  'ordering.edit.remove_step_tooltip': 'Remove step',
+  'ordering.take.helper': 'Drag and drop to arrange the items in the correct order.',
+  'ordering.take.empty': 'No ordering items are configured for this question yet.',
+  'ordering.preview.submitted_label': 'Submitted order',
+  'ordering.preview.expected_label': 'Expected order',
+  'ordering.preview.matches': 'Submitted order matches expected order.',
+  'ordering.preview.differs': 'Submitted order differs from expected order.',
+  'hotspot.edit.helper': 'Configure hotspot image and zones in question settings via host app controls.',
+  'hotspot.take.placeholder': 'Provide hotspot coordinates as JSON',
+  'hotspot.preview.helper': 'Hotspot preview is provided by host app image and hotspot settings.',
+  'textarea.edit.placeholder': 'Learners will answer with long-form text',
+  'textarea.edit.min_characters_label': 'Minimum characters',
+  'textarea.edit.min_characters_placeholder': 'Minimum characters',
+  'textarea.edit.max_characters_label': 'Maximum characters',
+  'textarea.edit.max_characters_placeholder': 'Maximum characters',
+  'textarea.take.placeholder': 'Write your answer',
+  'submission.common.no_answer': 'No answer',
+  'submission.common.other': 'Other',
+  'submission.chart.responses': 'Responses',
+  'submission.chart.no_data': 'No responses yet',
+  'submission.list.responses': 'Responses',
+  'submission.list.no_responses': 'No responses yet'
+};
diff --git a/packages/ui/src/custom/question-type-picker/index.ts b/packages/ui/src/custom/question-type-picker/index.ts
new file mode 100644
index 00000000..4914898a
--- /dev/null
+++ b/packages/ui/src/custom/question-type-picker/index.ts
@@ -0,0 +1,4 @@
+export { default as QuestionTypePicker } from './question-type-picker.svelte';
+export { QUESTION_TYPE_PICKER_ITEMS, getQuestionTypePickerItem } from './picker-data';
+export type { QuestionTypePickerEntry } from './picker-data';
+export { QUESTION_TYPE_PICKER_EXERCISE_LABELS } from './exercise-labels';
diff --git a/packages/ui/src/custom/question-type-picker/picker-data.ts b/packages/ui/src/custom/question-type-picker/picker-data.ts
new file mode 100644
index 00000000..5af23f4d
--- /dev/null
+++ b/packages/ui/src/custom/question-type-picker/picker-data.ts
@@ -0,0 +1,308 @@
+import { QUESTION_TYPE_KEY, type QuestionTypeKey } from '@cio/question-types';
+
+/** Hidden in the exercise editor; omitted from the marketing picker. */
+const HIDDEN_QUESTION_TYPE_KEYS = new Set<QuestionTypeKey>([QUESTION_TYPE_KEY.MATCHING, QUESTION_TYPE_KEY.HOTSPOT]);
+
+export type QuestionTypePickerEntry = {
+  key: QuestionTypeKey;
+  /** Sidebar label */
+  displayLabel: string;
+  /** One-line benefit shown above the preview */
+  description: string;
+  /** Letter or symbol shown inside the sidebar icon tile (design); omit to use a Lucide icon. */
+  sidebarGlyph?: string;
+  /** Passed to QuestionRenderer as `question` */
+  demoQuestion: Record<string, unknown>;
+};
+
+/**
+ * Option images: Unsplash (free to use under the Unsplash License).
+ * https://unsplash.com/license
+ */
+const UNSPLASH = {
+  /** Small group collaborative learning */
+  teamWorkshop: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=640&q=80',
+  /** Focused individual on laptop */
+  selfPacedOnline: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=640&q=80',
+  /** Books / reading */
+  readingStudy: 'https://images.unsplash.com/photo-1456513080510-7bf3a84b82fc?auto=format&fit=crop&w=640&q=80',
+  /** Documents / paperwork — PDFs and policy packs */
+  documentStack: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?auto=format&fit=crop&w=640&q=80',
+  /** Large meeting / town hall */
+  townHall: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=640&q=80',
+  /** Desk with notes — formative practice */
+  notesPractice: 'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=640&q=80',
+  /** Lecture hall — evokes long recorded sessions */
+  lectureRecording: 'https://images.unsplash.com/photo-1544531586-fde5298cdd40?auto=format&fit=crop&w=640&q=80',
+  /** Diverse team discussion */
+  peerDiscussion: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=640&q=80',
+  /** Deep work / concentration */
+  focusedWork: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=640&q=80'
+} as const;
+
+/** Order matches the product marketing layout (see question type picker design). */
+const QUESTION_TYPE_PICKER_ENTRIES: QuestionTypePickerEntry[] = [
+  {
+    key: QUESTION_TYPE_KEY.RADIO,
+    displayLabel: 'Single answer',
+    description: 'Several options, one correct choice — the classic multiple-choice format.',
+    demoQuestion: {
+      id: 'picker-radio',
+      key: 'picker-radio',
+      title:
+        'Your company is redesigning onboarding. Which approach typically improves completion rates for mandatory compliance training?',
+      questionType: 'RADIO',
+      settings: {
+        description: 'Choose the option that best matches evidence-based practice for busy professionals.'
+      },
+      options: [
+        {
+          id: 1001,
+          label: 'Short modules (about 5–10 minutes) learners can finish between meetings',
+          value: 'microlearning',
+          isCorrect: true,
+          settings: { imageUrl: UNSPLASH.selfPacedOnline }
+        },
+        {
+          id: 1002,
+          label: 'A single long video recording of a live session',
+          value: 'long-lecture',
+          isCorrect: false,
+          settings: { imageUrl: UNSPLASH.lectureRecording }
+        },
+        {
+          id: 1003,
+          label: 'Printable PDFs only, with no knowledge checks',
+          value: 'pdf-only',
+          isCorrect: false,
+          settings: { imageUrl: UNSPLASH.documentStack }
+        },
+        {
+          id: 1004,
+          label: 'A once-a-year company briefing with no tracked follow-up online',
+          value: 'annual-only',
+          isCorrect: false,
+          settings: { imageUrl: UNSPLASH.townHall }
+        }
+      ]
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.CHECKBOX,
+    displayLabel: 'Multiple answers',
+    description: 'Learners choose every correct option — ideal for “select all that apply.”',
+    demoQuestion: {
+      id: 'picker-checkbox',
+      key: 'picker-checkbox',
+      title:
+        'Which of these habits most often help adults remember and apply what they learned? Select all that apply.',
+      questionType: 'CHECKBOX',
+      settings: {
+        description: 'There is more than one correct answer.'
+      },
+      options: [
+        {
+          id: 2001,
+          label: 'Revisiting key ideas on a schedule over several days or weeks',
+          value: 'spaced-practice',
+          isCorrect: true,
+          settings: { imageUrl: UNSPLASH.notesPractice }
+        },
+        {
+          id: 2002,
+          label: 'Cramming everything the night before a deadline',
+          value: 'cramming',
+          isCorrect: false,
+          settings: { imageUrl: UNSPLASH.focusedWork }
+        },
+        {
+          id: 2003,
+          label: 'Practicing with realistic tasks soon after the lesson',
+          value: 'immediate-practice',
+          isCorrect: true,
+          settings: { imageUrl: UNSPLASH.teamWorkshop }
+        },
+        {
+          id: 2004,
+          label: 'Discussing takeaways with peers and comparing approaches',
+          value: 'peer-discussion',
+          isCorrect: true,
+          settings: { imageUrl: UNSPLASH.peerDiscussion }
+        }
+      ]
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.TRUE_FALSE,
+    displayLabel: 'True / false',
+    sidebarGlyph: 'T',
+    description: 'Binary judgment — fast to answer, easy to score.',
+    demoQuestion: {
+      id: 'picker-true-false',
+      key: 'picker-true-false',
+      title:
+        'Spaced practice—reviewing material over time—usually leads to better long-term retention than cramming the same amount of study into one session.',
+      questionType: 'TRUE_FALSE',
+      options: [
+        { id: 4001, label: 'True', value: 'true', isCorrect: true },
+        { id: 4002, label: 'False', value: 'false', isCorrect: false }
+      ],
+      settings: {
+        correctValue: true
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.SHORT_ANSWER,
+    displayLabel: 'Short answer',
+    sidebarGlyph: 'A',
+    description: 'Brief free text — ideal for definitions and one-line explanations.',
+    demoQuestion: {
+      id: 'picker-short-answer',
+      key: 'picker-short-answer',
+      title:
+        'In instructional design, what do we call a concise statement that describes what a learner will be able to do after a lesson? (One or two words.)',
+      questionType: 'SHORT_ANSWER',
+      settings: {
+        instructions: 'Use the term educators often write at the top of a lesson plan.',
+        acceptedAnswers: 'learning objective,objective,learning outcome,outcome'
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.TEXTAREA,
+    displayLabel: 'Long answer',
+    sidebarGlyph: '\u00B6',
+    description: 'Paragraph responses — rubrics and manual review when you need depth.',
+    demoQuestion: {
+      id: 'picker-textarea',
+      key: 'picker-textarea',
+      title:
+        'You are launching a customer service course for new hires. In a short paragraph, describe two ways you would use feedback loops so learners improve before they go live with customers.',
+      questionType: 'TEXTAREA',
+      settings: {
+        description: 'Aim for 2–4 sentences (about 40–220 characters).',
+        minCharacters: 40,
+        maxCharacters: 220
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.NUMERIC,
+    displayLabel: 'Numeric',
+    sidebarGlyph: '#',
+    description: 'Numbers with optional tolerance — perfect for STEM and data tasks.',
+    demoQuestion: {
+      id: 'picker-numeric',
+      key: 'picker-numeric',
+      title:
+        'A certification exam allows 90 minutes of working time. How many hours is that? (Enter a decimal—e.g. 1.5 for one and a half hours.)',
+      questionType: 'NUMERIC',
+      settings: { correctValue: 1.5, tolerance: 0 }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.FILL_BLANK,
+    displayLabel: 'Fill in blank',
+    sidebarGlyph: '_',
+    description: 'Cloze-style prompts — quick checks of vocabulary and facts.',
+    demoQuestion: {
+      id: 'picker-fill-blank',
+      key: 'picker-fill-blank',
+      title:
+        'Every strong course begins with a ___ of learner needs, then aligns ___ and practice activities to stated goals.',
+      questionType: 'FILL_BLANK',
+      settings: { acceptedAnswers: 'analysis,content' }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.WORD_BANK,
+    displayLabel: 'Word bank',
+    description: 'Drag-and-drop terms — engaging without giving away the answer.',
+    demoQuestion: {
+      id: 'picker-word-bank',
+      key: 'picker-word-bank',
+      title: 'Complete the sentence with the correct terms from the word bank.',
+      questionType: 'WORD_BANK',
+      settings: {
+        template:
+          'A well-designed lesson ___ states the goal up front, builds in timely ___, and closes with a quick check for ___.',
+        correctAnswers: ['objective', 'feedback', 'understanding'],
+        distractors: ['deadline', 'marketing', 'entertainment']
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.ORDERING,
+    displayLabel: 'Ordering',
+    description: 'Sequence steps — ideal for processes, timelines, and procedures.',
+    demoQuestion: {
+      id: 'picker-ordering',
+      key: 'picker-ordering',
+      title: 'Put these steps in the order you would run a typical training pilot before a company-wide rollout.',
+      questionType: 'ORDERING',
+      options: [
+        { id: 'order-1', label: 'Confirm goals and success metrics with stakeholders', value: 'order-1' },
+        { id: 'order-2', label: 'Run a small pilot with one team and collect feedback', value: 'order-2' },
+        { id: 'order-3', label: 'Revise content and assessments based on pilot results', value: 'order-3' },
+        { id: 'order-4', label: 'Launch to all eligible employees with support resources', value: 'order-4' }
+      ],
+      settings: {}
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.FILE_UPLOAD,
+    displayLabel: 'File upload',
+    description: 'Collect documents and artifacts — great for assignments and portfolios.',
+    demoQuestion: {
+      id: 'picker-file-upload',
+      key: 'picker-file-upload',
+      title:
+        'Upload your one-page training outline (PDF or Word). Include the topic, target audience, and three learning objectives.',
+      questionType: 'FILE_UPLOAD',
+      settings: {
+        acceptedTypes: [
+          'application/pdf',
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'application/msword'
+        ],
+        maxSizeMb: 10
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.LINK,
+    displayLabel: 'Link',
+    description: 'Learners share URLs — useful for references, portfolios, and research.',
+    demoQuestion: {
+      id: 'picker-link',
+      key: 'picker-link',
+      title:
+        'Share one reputable article, talk, or resource that shaped how you designed your lesson. Paste a full https:// link.',
+      questionType: 'LINK',
+      settings: {
+        instructions: 'Use a stable URL (avoid expiring share links when possible).'
+      }
+    }
+  },
+  {
+    key: QUESTION_TYPE_KEY.STAR,
+    displayLabel: 'Star rating',
+    description: 'Quick sentiment — lightweight feedback on clarity or difficulty.',
+    demoQuestion: {
+      id: 'picker-star',
+      key: 'picker-star',
+      title: 'How clear were this module’s outcomes and expectations before you started the activities?',
+      questionType: 'STAR',
+      settings: { correctValue: 4, maxStars: 5 }
+    }
+  }
+];
+
+export const QUESTION_TYPE_PICKER_ITEMS = QUESTION_TYPE_PICKER_ENTRIES.filter(
+  (entry) => !HIDDEN_QUESTION_TYPE_KEYS.has(entry.key)
+);
+
+export function getQuestionTypePickerItem(key: QuestionTypeKey): QuestionTypePickerEntry | undefined {
+  return QUESTION_TYPE_PICKER_ITEMS.find((item) => item.key === key);
+}
diff --git a/packages/ui/src/custom/question-type-picker/question-type-picker.svelte b/packages/ui/src/custom/question-type-picker/question-type-picker.svelte
new file mode 100644
index 00000000..115ad42a
--- /dev/null
+++ b/packages/ui/src/custom/question-type-picker/question-type-picker.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { AnswerData } from '@cio/question-types';
+  import { QUESTION_TYPE_KEY, type QuestionTypeKey } from '@cio/question-types';
+  import { cubicOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down';
+  import CircleDotIcon from '@lucide/svelte/icons/circle-dot';
+  import LayoutGridIcon from '@lucide/svelte/icons/layout-grid';
+  import Link2Icon from '@lucide/svelte/icons/link-2';
+  import SquareCheckIcon from '@lucide/svelte/icons/square-check';
+  import StarIcon from '@lucide/svelte/icons/star';
+  import UploadIcon from '@lucide/svelte/icons/upload';
+  import type { Component } from 'svelte';
+  import { QuestionRenderer } from '../exercise-question';
+  import { QUESTION_TYPE_PICKER_EXERCISE_LABELS } from './exercise-labels';
+  import { QUESTION_TYPE_PICKER_ITEMS, getQuestionTypePickerItem } from './picker-data';
+  import { cn } from '../../tools';
+
+  /** Lucide icons for types without `sidebarGlyph` in picker data. */
+  function iconForKey(key: QuestionTypeKey): Component<{ class?: string; 'aria-hidden'?: string | boolean }> {
+    switch (key) {
+      case QUESTION_TYPE_KEY.RADIO:
+        return CircleDotIcon;
+      case QUESTION_TYPE_KEY.CHECKBOX:
+        return SquareCheckIcon;
+      case QUESTION_TYPE_KEY.WORD_BANK:
+        return LayoutGridIcon;
+      case QUESTION_TYPE_KEY.ORDERING:
+        return ArrowUpDownIcon;
+      case QUESTION_TYPE_KEY.FILE_UPLOAD:
+        return UploadIcon;
+      case QUESTION_TYPE_KEY.LINK:
+        return Link2Icon;
+      case QUESTION_TYPE_KEY.STAR:
+        return StarIcon;
+      default:
+        return CircleDotIcon;
+    }
+  }
+
+  let selectedKey = $state<QuestionTypeKey>(QUESTION_TYPE_PICKER_ITEMS[0]!.key);
+  let answer = $state<AnswerData | null>(null);
+
+  const currentItem = $derived(getQuestionTypePickerItem(selectedKey));
+  const previewHeading = $derived(currentItem?.displayLabel ?? '');
+  const previewDescription = $derived(currentItem?.description ?? '');
+  const activeQuestion = $derived(
+    currentItem?.demoQuestion ?? {
+      id: 'picker-fallback',
+      key: 'picker-fallback',
+      title: '',
+      questionType: 'SHORT_ANSWER',
+      settings: {}
+    }
+  );
+
+  function selectItem(key: QuestionTypeKey) {
+    selectedKey = key;
+    answer = null;
+  }
+
+  async function demoFileUpload(file: File) {
+    await new Promise<void>((resolve) => {
+      setTimeout(resolve, 350);
+    });
+
+    return {
+      fileKey: `demo/${file.name}`,
+      fileName: file.name,
+      fileUrl: URL.createObjectURL(file)
+    };
+  }
+</script>
+
+<div
+  class={cn(
+    'ui:box-border ui:flex ui:min-h-[320px] ui:w-full ui:max-w-full ui:min-w-0 ui:flex-col ui:overflow-hidden ui:rounded-xl ui:border ui:border-border ui:bg-background ui:text-foreground ui:md:flex-row'
+  )}
+>
+  <nav
+    class="ui:flex ui:w-full ui:shrink-0 ui:flex-row ui:gap-0 ui:overflow-x-auto ui:overflow-y-hidden ui:border-b ui:border-border ui:bg-background ui:p-0 ui:md:w-52 ui:md:flex-col ui:md:overflow-x-visible ui:md:overflow-y-visible ui:md:border-b-0 ui:md:border-r"
+    aria-label="Question types"
+  >
+    {#each QUESTION_TYPE_PICKER_ITEMS as item (item.key)}
+      {@const isActive = item.key === selectedKey}
+
+      <button
+        type="button"
+        class={cn(
+          'ui:flex ui:shrink-0 ui:cursor-pointer ui:items-center ui:gap-2.5 ui:rounded-none ui:px-3 ui:py-2 ui:text-left ui:text-sm ui:transition-colors ui:border-l-4 ui:border-solid ui:md:w-full',
+          isActive
+            ? 'ui:border-l-foreground ui:bg-secondary ui:text-secondary-foreground'
+            : 'ui:border-l-transparent ui:bg-transparent ui:text-foreground',
+          !isActive && 'hover:ui:bg-muted/40'
+        )}
+        aria-current={isActive ? 'true' : undefined}
+        onclick={() => selectItem(item.key)}
+      >
+        <span
+          class={cn(
+            'ui:flex ui:size-8 ui:shrink-0 ui:items-center ui:justify-center ui:rounded-md ui:bg-muted ui:text-foreground'
+          )}
+          aria-hidden="true"
+        >
+          {#if item.sidebarGlyph}
+            <span class="ui:text-[13px] ui:font-semibold ui:leading-none">{item.sidebarGlyph}</span>
+          {:else}
+            {@const Icon = iconForKey(item.key)}
+            <Icon class="ui:size-4 ui:opacity-90" aria-hidden="true" />
+          {/if}
+        </span>
+        <span class="ui:leading-tight">{item.displayLabel}</span>
+      </button>
+    {/each}
+  </nav>
+
+  <div class="ui:flex ui:min-h-0 ui:min-w-0 ui:flex-1 ui:flex-col ui:bg-background ui:p-4 ui:sm:p-6">
+    <p class="ui:text-xs ui:font-semibold ui:tracking-wide ui:text-muted-foreground">
+      {previewHeading.toUpperCase()}
+    </p>
+    <p class="ui:mt-1 ui:text-sm ui:text-muted-foreground">
+      {previewDescription}
+    </p>
+
+    <div class="ui:mt-4 ui:grid ui:min-h-0 ui:flex-1 ui:overflow-hidden" style="grid-template-areas: 'slot';">
+      {#key selectedKey}
+        <div class="ui:min-w-0 [grid-area:slot]" in:fly={{ y: 14, duration: 400, opacity: 0, easing: cubicOut }}>
+          <QuestionRenderer
+            showContainer={false}
+            contract={{
+              mode: 'take',
+              question: activeQuestion,
+              answer,
+              labels: QUESTION_TYPE_PICKER_EXERCISE_LABELS,
+              onFileUpload: demoFileUpload
+            }}
+            onAnswerChange={(nextAnswer) => {
+              answer = nextAnswer;
+            }}
+          />
+        </div>
+      {/key}
+    </div>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/resource-list-row/index.ts b/packages/ui/src/custom/resource-list-row/index.ts
new file mode 100644
index 00000000..c6498a2f
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/index.ts
@@ -0,0 +1,8 @@
+import End from './resource-list-row-end.svelte';
+import Group from './resource-list-group.svelte';
+import Lead from './resource-list-row-lead.svelte';
+import Main from './resource-list-row-main.svelte';
+import Root from './resource-list-row.svelte';
+
+export { Root, Lead, Main, End, Group };
+export type { ResourceListRowAlign, ResourceListRowDensity } from './resource-list-row.svelte';
diff --git a/packages/ui/src/custom/resource-list-row/resource-list-group.svelte b/packages/ui/src/custom/resource-list-row/resource-list-group.svelte
new file mode 100644
index 00000000..15a0a390
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/resource-list-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="list"
+  data-slot="resource-list-group"
+  class={cn('ui:group/resource-list ui:flex ui:w-full ui:flex-col ui:rounded-md ui:border ui:border-border', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/packages/ui/src/custom/resource-list-row/resource-list-row-end.svelte b/packages/ui/src/custom/resource-list-row/resource-list-row-end.svelte
new file mode 100644
index 00000000..8f896703
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/resource-list-row-end.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="resource-list-row-end"
+  class={cn('ui:flex ui:shrink-0 ui:items-center ui:justify-end ui:gap-2 ui:self-center', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/packages/ui/src/custom/resource-list-row/resource-list-row-lead.svelte b/packages/ui/src/custom/resource-list-row/resource-list-row-lead.svelte
new file mode 100644
index 00000000..26fec962
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/resource-list-row-lead.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="resource-list-row-lead"
+  class={cn('ui:flex ui:shrink-0 ui:items-center ui:justify-center ui:self-center', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/packages/ui/src/custom/resource-list-row/resource-list-row-main.svelte b/packages/ui/src/custom/resource-list-row/resource-list-row-main.svelte
new file mode 100644
index 00000000..a80aaf64
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/resource-list-row-main.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="resource-list-row-main"
+  class={cn('ui:flex ui:min-w-0 ui:flex-1 ui:flex-col ui:gap-0.5', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/packages/ui/src/custom/resource-list-row/resource-list-row.svelte b/packages/ui/src/custom/resource-list-row/resource-list-row.svelte
new file mode 100644
index 00000000..b38edca9
--- /dev/null
+++ b/packages/ui/src/custom/resource-list-row/resource-list-row.svelte
@@ -0,0 +1,72 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const resourceListRowVariants = tv({
+    base: 'ui:flex-nowrap! ui:rounded-none ui:border-0 ui:border-b ui:border-border last:ui:border-b-0 ui:hover:bg-muted/50',
+    variants: {
+      align: {
+        center: 'ui:items-center',
+        start: 'ui:items-start'
+      },
+      /** Tighter block padding than `Item` size alone (e.g. toolbar / “select all” row). */
+      density: {
+        default: '',
+        toolbar: 'ui:gap-2 ui:py-1.5'
+      }
+    },
+    defaultVariants: {
+      align: 'center',
+      density: 'default'
+    }
+  });
+
+  export type ResourceListRowAlign = VariantProps<typeof resourceListRowVariants>['align'];
+  export type ResourceListRowDensity = VariantProps<typeof resourceListRowVariants>['density'];
+</script>
+
+<script lang="ts">
+  import * as Item from '../../base/item';
+  import { cn, type WithElementRef } from '../../tools';
+  import type { ItemSize, ItemVariant } from '../../base/item/item.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    children,
+    variant = 'outline',
+    size = 'sm',
+    align = 'center',
+    density = 'default',
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    children?: Snippet;
+    variant?: ItemVariant;
+    size?: ItemSize;
+    align?: ResourceListRowAlign;
+    density?: ResourceListRowDensity;
+  } = $props();
+
+  const layoutClass = $derived(cn(resourceListRowVariants({ align, density }), className));
+</script>
+
+{#if child}
+  <Item.Root {variant} {size} data-density={density} {...restProps}>
+    {#snippet child({ props })}
+      {@render child!({
+        props: {
+          ...props,
+          'data-density': density,
+          class: cn(props.class as string | undefined, layoutClass)
+        }
+      })}
+    {/snippet}
+  </Item.Root>
+{:else}
+  <Item.Root bind:ref {variant} {size} class={layoutClass} data-density={density} {...restProps}>
+    {@render children?.()}
+  </Item.Root>
+{/if}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index e29b3782..c3070eab 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss' prefix(ui);
 @import 'tw-animate-css';
+@import './custom/animation/marketing-layers.css';
 
 @source './**/*.{html,js,ts,svelte}';
 @source '../node_modules/layerchart/dist';
@@ -114,6 +115,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Course-app style animations (marketing / landing) */
+  --animate-meteor: meteor 5s linear infinite;
+  --animate-shimmer-marketing: shimmer-marketing 8s infinite;
+  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
+  --animate-magicslide: magicslide var(--speed) ease-in-out infinite alternate;
 }
 
 @layer base {
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 7b206647..5f4b062b 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -63,9 +63,14 @@ export { TextareaField } from './custom/textarea-field';
 export { CheckboxField } from './custom/checkbox-field';
 export { RadioItem } from './custom/radio-item';
 export { RadioOptionCard, RadioOptionCardGroup, type RadioOptionCardOption } from './custom/radio-option-card';
+export * as ResourceListRow from './custom/resource-list-row';
 export { DocumentCard } from './custom/document-card';
 export * as ExerciseQuestion from './custom/exercise-question';
+export { QuestionTypePicker } from './custom/question-type-picker';
 export * as MediaPlayer from './custom/media-player';
 export { MultiSelectList, type MultiSelectListItem } from './custom/multi-select-list';
 export * as YoutubeLinkForm from './custom/youtube-link-form';
 export { BackButton } from './custom/back-button';
+export { CourseCard, DEFAULT_COURSE_BANNER_IMAGE } from './custom/course-card';
+export { NewsfeedReactions } from './custom/newsfeed-reactions';
+export * from './custom/animation';
diff --git a/packages/ui/src/output.css b/packages/ui/src/output.css
index aaa6a0a0..bf2c7fc1 100644
--- a/packages/ui/src/output.css
+++ b/packages/ui/src/output.css
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--border-angle:0deg}}}@layer theme{:root,:host{--ui-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--ui-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ui-color-red-50:oklch(97.1% .013 17.38);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-600:oklch(57.7% .245 27.325);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-orange-500:oklch(70.5% .213 47.604);--ui-color-amber-50:oklch(98.7% .022 95.277);--ui-color-amber-200:oklch(92.4% .12 95.746);--ui-color-amber-400:oklch(82.8% .189 84.429);--ui-color-amber-500:oklch(76.9% .188 70.08);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-amber-900:oklch(41.4% .112 45.904);--ui-color-amber-950:oklch(27.9% .077 45.635);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-emerald-50:oklch(97.9% .021 166.113);--ui-color-emerald-300:oklch(84.5% .143 164.978);--ui-color-emerald-400:oklch(76.5% .177 163.223);--ui-color-emerald-500:oklch(69.6% .17 162.48);--ui-color-emerald-600:oklch(59.6% .145 163.225);--ui-color-emerald-950:oklch(26.2% .051 172.552);--ui-color-sky-50:oklch(97.7% .013 236.62);--ui-color-sky-200:oklch(90.1% .058 230.902);--ui-color-sky-900:oklch(39.1% .09 240.876);--ui-color-sky-950:oklch(29.3% .066 243.157);--ui-color-pink-500:oklch(65.6% .241 354.308);--ui-color-slate-800:oklch(27.9% .041 260.031);--ui-color-slate-950:oklch(12.9% .042 264.695);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-sm:24rem;--ui-container-lg:32rem;--ui-container-xl:36rem;--ui-container-3xl:48rem;--ui-text-xs:.75rem;--ui-text-xs--line-height:calc(1 / .75);--ui-text-sm:.875rem;--ui-text-sm--line-height:calc(1.25 / .875);--ui-text-base:1rem;--ui-text-base--line-height:calc(1.5 / 1);--ui-text-lg:1.125rem;--ui-text-lg--line-height:calc(1.75 / 1.125);--ui-text-xl:1.25rem;--ui-text-xl--line-height:calc(1.75 / 1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2 / 1.5);--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-tracking-tight:-.025em;--ui-tracking-widest:.1em;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-ease-in-out:cubic-bezier(.4, 0, .2, 1);--ui-animate-spin:spin 1s linear infinite;--ui-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--ui-blur-sm:8px;--ui-aspect-video:16 / 9;--ui-default-transition-duration:.15s;--ui-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--ui-default-mono-font-family:var(--ui-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font-cio,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--ui-default-font-feature-settings,normal);font-variation-settings:var(--ui-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--ui-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--ui-default-mono-font-feature-settings,normal);font-variation-settings:var(--ui-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);font-family:var(--font-sans);color:var(--foreground)}button,input,select,optgroup,textarea{font-family:var(--font-sans)}::file-selector-button{font-family:var(--font-sans)}.toaster{--normal-bg:var(--color-popover);--normal-text:var(--color-popover-foreground);--normal-border:var(--color-border)}}@layer components;@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:pointer-events-none{pointer-events:none}.ui\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ui\:absolute{position:absolute}.ui\:fixed{position:fixed}.ui\:relative{position:relative}.ui\:sticky{position:sticky}.ui\:inset-0{inset:calc(var(--ui-spacing) * 0)}.ui\:inset-x-0{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:inset-y-0{inset-block:calc(var(--ui-spacing) * 0)}.ui\:start-0{inset-inline-start:calc(var(--ui-spacing) * 0)}.ui\:end-4{inset-inline-end:calc(var(--ui-spacing) * 4)}.ui\:-top-2{top:calc(var(--ui-spacing) * -2)}.ui\:-top-3{top:calc(var(--ui-spacing) * -3)}.ui\:top-0{top:calc(var(--ui-spacing) * 0)}.ui\:top-1\.5{top:calc(var(--ui-spacing) * 1.5)}.ui\:top-1\/2{top:50%}.ui\:top-2{top:calc(var(--ui-spacing) * 2)}.ui\:top-3\.5{top:calc(var(--ui-spacing) * 3.5)}.ui\:top-4{top:calc(var(--ui-spacing) * 4)}.ui\:top-13{top:calc(var(--ui-spacing) * 13)}.ui\:top-\[-12px\]{top:-12px}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:-right-4{right:calc(var(--ui-spacing) * -4)}.ui\:right-0{right:calc(var(--ui-spacing) * 0)}.ui\:right-1{right:calc(var(--ui-spacing) * 1)}.ui\:right-2{right:calc(var(--ui-spacing) * 2)}.ui\:right-3{right:calc(var(--ui-spacing) * 3)}.ui\:right-4{right:calc(var(--ui-spacing) * 4)}.ui\:right-9{right:calc(var(--ui-spacing) * 9)}.ui\:right-\[-12px\]{right:-12px}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing) * 0)}.ui\:bottom-2{bottom:calc(var(--ui-spacing) * 2)}.ui\:left-0{left:calc(var(--ui-spacing) * 0)}.ui\:left-1\/2{left:50%}.ui\:left-2{left:calc(var(--ui-spacing) * 2)}.ui\:left-\[50\%\]{left:50%}.ui\:left-\[calc\(50\%-3rem\)\]{left:calc(50% - 3rem)}.ui\:isolate{isolation:isolate}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:z-20{z-index:20}.ui\:z-50{z-index:50}.ui\:z-200{z-index:200}.ui\:z-999{z-index:999}.ui\:z-\[1\]{z-index:1}.ui\:order-first{order:-9999}.ui\:order-last{order:9999}.ui\:col-start-2{grid-column-start:2}.ui\:row-span-2{grid-row:span 2/span 2}.ui\:row-start-1{grid-row-start:1}.ui\:m-0{margin:calc(var(--ui-spacing) * 0)}.ui\:m-0\!{margin:calc(var(--ui-spacing) * 0)!important}.ui\:-mx-1{margin-inline:calc(var(--ui-spacing) * -1)}.ui\:mx-auto{margin-inline:auto}.ui\:my-0{margin-block:calc(var(--ui-spacing) * 0)}.ui\:my-0\.5{margin-block:calc(var(--ui-spacing) * .5)}.ui\:my-1{margin-block:calc(var(--ui-spacing) * 1)}.ui\:my-2{margin-block:calc(var(--ui-spacing) * 2)}.ui\:my-4{margin-block:calc(var(--ui-spacing) * 4)}.ui\:ms-1{margin-inline-start:calc(var(--ui-spacing) * 1)}.ui\:ms-4{margin-inline-start:calc(var(--ui-spacing) * 4)}.ui\:mt-0\.5{margin-top:calc(var(--ui-spacing) * .5)}.ui\:mt-1{margin-top:calc(var(--ui-spacing) * 1)}.ui\:mt-1\.5{margin-top:calc(var(--ui-spacing) * 1.5)}.ui\:mt-3{margin-top:calc(var(--ui-spacing) * 3)}.ui\:mt-4{margin-top:calc(var(--ui-spacing) * 4)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing) * 1)}.ui\:mr-2{margin-right:calc(var(--ui-spacing) * 2)}.ui\:mb-1{margin-bottom:calc(var(--ui-spacing) * 1)}.ui\:mb-2{margin-bottom:calc(var(--ui-spacing) * 2)}.ui\:mb-3{margin-bottom:calc(var(--ui-spacing) * 3)}.ui\:mb-4{margin-bottom:calc(var(--ui-spacing) * 4)}.ui\:ml-1{margin-left:calc(var(--ui-spacing) * 1)}.ui\:ml-2{margin-left:calc(var(--ui-spacing) * 2)}.ui\:ml-2\.5{margin-left:calc(var(--ui-spacing) * 2.5)}.ui\:ml-auto{margin-left:auto}.ui\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:block{display:block}.ui\:flex{display:flex}.ui\:grid{display:grid}.ui\:hidden{display:none}.ui\:inline-block{display:inline-block}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.ui\:size-2{width:calc(var(--ui-spacing) * 2);height:calc(var(--ui-spacing) * 2)}.ui\:size-2\.5{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:size-3{width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:size-3\.5{width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:size-4{width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:size-5{width:calc(var(--ui-spacing) * 5);height:calc(var(--ui-spacing) * 5)}.ui\:size-6{width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:size-7{width:calc(var(--ui-spacing) * 7);height:calc(var(--ui-spacing) * 7)}.ui\:size-8{width:calc(var(--ui-spacing) * 8);height:calc(var(--ui-spacing) * 8)}.ui\:size-9{width:calc(var(--ui-spacing) * 9);height:calc(var(--ui-spacing) * 9)}.ui\:size-10{width:calc(var(--ui-spacing) * 10);height:calc(var(--ui-spacing) * 10)}.ui\:size-14{width:calc(var(--ui-spacing) * 14);height:calc(var(--ui-spacing) * 14)}.ui\:size-14\!{width:calc(var(--ui-spacing) * 14)!important;height:calc(var(--ui-spacing) * 14)!important}.ui\:size-20{width:calc(var(--ui-spacing) * 20);height:calc(var(--ui-spacing) * 20)}.ui\:size-fit{width:fit-content;height:fit-content}.ui\:size-full{width:100%;height:100%}.ui\:h-\(--bits-navigation-menu-viewport-height\){height:var(--bits-navigation-menu-viewport-height)}.ui\:h-\(--bits-select-anchor-height\){height:var(--bits-select-anchor-height)}.ui\:h-0\.5{height:calc(var(--ui-spacing) * .5)}.ui\:h-1\.5{height:calc(var(--ui-spacing) * 1.5)}.ui\:h-2{height:calc(var(--ui-spacing) * 2)}.ui\:h-4{height:calc(var(--ui-spacing) * 4)}.ui\:h-5{height:calc(var(--ui-spacing) * 5)}.ui\:h-6{height:calc(var(--ui-spacing) * 6)}.ui\:h-7{height:calc(var(--ui-spacing) * 7)}.ui\:h-8{height:calc(var(--ui-spacing) * 8)}.ui\:h-9{height:calc(var(--ui-spacing) * 9)}.ui\:h-10{height:calc(var(--ui-spacing) * 10)}.ui\:h-12{height:calc(var(--ui-spacing) * 12)}.ui\:h-24{height:calc(var(--ui-spacing) * 24)}.ui\:h-28{height:calc(var(--ui-spacing) * 28)}.ui\:h-40{height:calc(var(--ui-spacing) * 40)}.ui\:h-48{height:calc(var(--ui-spacing) * 48)}.ui\:h-96{height:calc(var(--ui-spacing) * 96)}.ui\:h-128{height:calc(var(--ui-spacing) * 128)}.ui\:h-\[1\.2rem\]{height:1.2rem}.ui\:h-\[1\.15rem\]{height:1.15rem}.ui\:h-\[6px\]{height:6px}.ui\:h-\[70px\]{height:70px}.ui\:h-\[280px\]{height:280px}.ui\:h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.ui\:h-\[calc\(100\%-3px\)\]{height:calc(100% - 3px)}.ui\:h-auto{height:auto}.ui\:h-fit{height:fit-content}.ui\:h-fit\!{height:fit-content!important}.ui\:h-full{height:100%}.ui\:h-px{height:1px}.ui\:h-screen{height:100vh}.ui\:max-h-\(--bits-dropdown-menu-content-available-height\){max-height:var(--bits-dropdown-menu-content-available-height)}.ui\:max-h-\(--bits-select-content-available-height\){max-height:var(--bits-select-content-available-height)}.ui\:max-h-60{max-height:calc(var(--ui-spacing) * 60)}.ui\:max-h-64{max-height:calc(var(--ui-spacing) * 64)}.ui\:max-h-72{max-height:calc(var(--ui-spacing) * 72)}.ui\:max-h-80{max-height:calc(var(--ui-spacing) * 80)}.ui\:max-h-90{max-height:calc(var(--ui-spacing) * 90)}.ui\:max-h-96{max-height:calc(var(--ui-spacing) * 96)}.ui\:max-h-\[300px\]{max-height:300px}.ui\:max-h-svh{max-height:100svh}.ui\:min-h-0{min-height:calc(var(--ui-spacing) * 0)}.ui\:min-h-4{min-height:calc(var(--ui-spacing) * 4)}.ui\:min-h-16{min-height:calc(var(--ui-spacing) * 16)}.ui\:min-h-40{min-height:calc(var(--ui-spacing) * 40)}.ui\:min-h-96{min-height:calc(var(--ui-spacing) * 96)}.ui\:min-h-\[44px\]{min-height:44px}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:w-\(--sidebar-width\){width:var(--sidebar-width)}.ui\:w-0{width:calc(var(--ui-spacing) * 0)}.ui\:w-1{width:calc(var(--ui-spacing) * 1)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing) * 2)}.ui\:w-2\/4{width:50%}.ui\:w-3\/4{width:75%}.ui\:w-4{width:calc(var(--ui-spacing) * 4)}.ui\:w-5{width:calc(var(--ui-spacing) * 5)}.ui\:w-6{width:calc(var(--ui-spacing) * 6)}.ui\:w-7{width:calc(var(--ui-spacing) * 7)}.ui\:w-8{width:calc(var(--ui-spacing) * 8)}.ui\:w-24{width:calc(var(--ui-spacing) * 24)}.ui\:w-28{width:calc(var(--ui-spacing) * 28)}.ui\:w-40{width:calc(var(--ui-spacing) * 40)}.ui\:w-64{width:calc(var(--ui-spacing) * 64)}.ui\:w-72{width:calc(var(--ui-spacing) * 72)}.ui\:w-88{width:calc(var(--ui-spacing) * 88)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[100px\]{width:100px}.ui\:w-fit{width:fit-content}.ui\:w-fit\!{width:fit-content!important}.ui\:w-full{width:100%}.ui\:w-full\!{width:100%!important}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing) * 6)}.ui\:max-w-80{max-width:calc(var(--ui-spacing) * 80)}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[200px\]{max-width:200px}.ui\:max-w-\[300px\]{max-width:300px}.ui\:max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.ui\:max-w-full{max-width:100%}.ui\:max-w-max{max-width:max-content}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:max-w-xl{max-width:var(--ui-container-xl)}.ui\:min-w-\(--bits-select-anchor-width\){min-width:var(--bits-select-anchor-width)}.ui\:min-w-0{min-width:calc(var(--ui-spacing) * 0)}.ui\:min-w-5{min-width:calc(var(--ui-spacing) * 5)}.ui\:min-w-8{min-width:calc(var(--ui-spacing) * 8)}.ui\:min-w-9{min-width:calc(var(--ui-spacing) * 9)}.ui\:min-w-10{min-width:calc(var(--ui-spacing) * 10)}.ui\:min-w-32{min-width:calc(var(--ui-spacing) * 32)}.ui\:min-w-48{min-width:calc(var(--ui-spacing) * 48)}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:min-w-full{min-width:100%}.ui\:flex-1{flex:1}.ui\:shrink{flex-shrink:1}.ui\:shrink-0{flex-shrink:0}.ui\:basis-full{flex-basis:100%}.ui\:origin-\(--bits-dropdown-menu-content-transform-origin\){transform-origin:var(--bits-dropdown-menu-content-transform-origin)}.ui\:origin-\(--bits-menubar-content-transform-origin\){transform-origin:var(--bits-menubar-content-transform-origin)}.ui\:origin-\(--bits-popover-content-transform-origin\){transform-origin:var(--bits-popover-content-transform-origin)}.ui\:origin-\(--bits-select-content-transform-origin\){transform-origin:var(--bits-select-content-transform-origin)}.ui\:origin-\(--bits-tooltip-content-transform-origin\){transform-origin:var(--bits-tooltip-content-transform-origin)}.ui\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-y-0\.5{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:rotate-0{rotate:none}.ui\:rotate-5{rotate:5deg}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-default\!{cursor:default!important}.ui\:cursor-grab{cursor:grab}.ui\:cursor-not-allowed{cursor:not-allowed}.ui\:cursor-pointer{cursor:pointer}.ui\:cursor-text{cursor:text}.ui\:resize-none{resize:none}.ui\:scroll-my-1{scroll-margin-block:calc(var(--ui-spacing) * 1)}.ui\:scroll-py-1{scroll-padding-block:calc(var(--ui-spacing) * 1)}.ui\:list-disc{list-style-type:disc}.ui\:list-none{list-style-type:none}.ui\:auto-rows-min{grid-auto-rows:min-content}.ui\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.ui\:grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.ui\:flex-col{flex-direction:column}.ui\:flex-col-reverse{flex-direction:column-reverse}.ui\:flex-row{flex-direction:row}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-items-center{place-items:center}.ui\:items-baseline{align-items:baseline}.ui\:items-center{align-items:center}.ui\:items-end{align-items:flex-end}.ui\:items-start{align-items:flex-start}.ui\:items-stretch{align-items:stretch}.ui\:justify-between{justify-content:space-between}.ui\:justify-center{justify-content:center}.ui\:justify-end{justify-content:flex-end}.ui\:justify-start{justify-content:flex-start}.ui\:justify-start\!{justify-content:flex-start!important}.ui\:justify-items-start{justify-items:start}.ui\:gap-0{gap:calc(var(--ui-spacing) * 0)}.ui\:gap-0\.5{gap:calc(var(--ui-spacing) * .5)}.ui\:gap-1{gap:calc(var(--ui-spacing) * 1)}.ui\:gap-1\.5{gap:calc(var(--ui-spacing) * 1.5)}.ui\:gap-2{gap:calc(var(--ui-spacing) * 2)}.ui\:gap-2\.5{gap:calc(var(--ui-spacing) * 2.5)}.ui\:gap-3{gap:calc(var(--ui-spacing) * 3)}.ui\:gap-4{gap:calc(var(--ui-spacing) * 4)}.ui\:gap-6{gap:calc(var(--ui-spacing) * 6)}.ui\:gap-7{gap:calc(var(--ui-spacing) * 7)}:where(.ui\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.ui\:gap-x-6{column-gap:calc(var(--ui-spacing) * 6)}.ui\:gap-y-0\.5{row-gap:calc(var(--ui-spacing) * .5)}.ui\:gap-y-2{row-gap:calc(var(--ui-spacing) * 2)}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui\:overflow-auto{overflow:auto}.ui\:overflow-hidden{overflow:hidden}.ui\:overflow-visible{overflow:visible}.ui\:overflow-x-auto{overflow-x:auto}.ui\:overflow-x-hidden{overflow-x:hidden}.ui\:overflow-y-auto{overflow-y:auto}.ui\:overflow-y-hidden{overflow-y:hidden}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-\[2px\]{border-radius:2px}.ui\:rounded-\[4px\]{border-radius:4px}.ui\:rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.ui\:rounded-full{border-radius:3.40282e38px}.ui\:rounded-lg{border-radius:var(--radius)}.ui\:rounded-md{border-radius:calc(var(--radius) - 2px)}.ui\:rounded-none{border-radius:0}.ui\:rounded-sm{border-radius:calc(var(--radius) - 4px)}.ui\:rounded-xl{border-radius:calc(var(--radius) + 4px)}.ui\:rounded-xs{border-radius:var(--ui-radius-xs)}.ui\:border{border-style:var(--tw-border-style);border-width:1px}.ui\:border-0{border-style:var(--tw-border-style);border-width:0}.ui\:border-2{border-style:var(--tw-border-style);border-width:2px}.ui\:border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.ui\:border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.ui\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-none{--tw-border-style:none;border-style:none}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-amber-200{border-color:var(--ui-color-amber-200)}.ui\:border-amber-400{border-color:var(--ui-color-amber-400)}.ui\:border-border,.ui\:border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:border-emerald-300{border-color:var(--ui-color-emerald-300)}.ui\:border-emerald-400{border-color:var(--ui-color-emerald-400)}.ui\:border-emerald-500{border-color:var(--ui-color-emerald-500)}.ui\:border-input{border-color:var(--input)}.ui\:border-muted{border-color:var(--muted)}.ui\:border-muted-foreground{border-color:var(--muted-foreground)}.ui\:border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/30{border-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-sky-200{border-color:var(--ui-color-sky-200)}.ui\:border-transparent{border-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-amber-50,.ui\:bg-amber-50\/30{background-color:var(--ui-color-amber-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-amber-50\/30{background-color:color-mix(in oklab, var(--ui-color-amber-50) 30%, transparent)}}.ui\:bg-amber-600{background-color:var(--ui-color-amber-600)}.ui\:bg-background,.ui\:bg-background\/50{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/50{background-color:color-mix(in oklab, var(--background) 50%, transparent)}}.ui\:bg-black\/50{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-black\/50{background-color:color-mix(in oklab, var(--ui-color-black) 50%, transparent)}}.ui\:bg-border{background-color:var(--border)}.ui\:bg-card{background-color:var(--card)}.ui\:bg-destructive{background-color:var(--destructive)}.ui\:bg-emerald-50\/20{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/20{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 20%, transparent)}}.ui\:bg-emerald-50\/30{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/30{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 30%, transparent)}}.ui\:bg-emerald-50\/40{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/40{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 40%, transparent)}}.ui\:bg-emerald-600{background-color:var(--ui-color-emerald-600)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.ui\:bg-green-500{background-color:var(--ui-color-green-500)}.ui\:bg-inherit{background-color:inherit}.ui\:bg-input{background-color:var(--input)}.ui\:bg-muted,.ui\:bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:bg-popover{background-color:var(--popover)}.ui\:bg-primary{background-color:var(--primary)}.ui\:bg-primary-foreground{background-color:var(--primary-foreground)}.ui\:bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.ui\:bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/20{background-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.ui\:bg-red-50\/40{background-color:var(--ui-color-red-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-red-50\/40{background-color:color-mix(in oklab, var(--ui-color-red-50) 40%, transparent)}}.ui\:bg-red-500{background-color:var(--ui-color-red-500)}.ui\:bg-secondary,.ui\:bg-secondary\/50{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-secondary\/50{background-color:color-mix(in oklab, var(--secondary) 50%, transparent)}}.ui\:bg-sidebar{background-color:var(--sidebar)}.ui\:bg-sidebar-border{background-color:var(--sidebar-border)}.ui\:bg-sky-50{background-color:var(--ui-color-sky-50)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-r{--tw-gradient-position:to right in oklab}}.ui\:bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-t{--tw-gradient-position:to top in oklab}}.ui\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:from-background{--tw-gradient-from:var(--background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-pink-500{--tw-gradient-from:var(--ui-color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-orange-500{--tw-gradient-to:var(--ui-color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-current{fill:currentColor}.ui\:fill-primary{fill:var(--primary)}.ui\:object-cover{object-fit:cover}.ui\:p-0{padding:calc(var(--ui-spacing) * 0)}.ui\:p-0\.5{padding:calc(var(--ui-spacing) * .5)}.ui\:p-1{padding:calc(var(--ui-spacing) * 1)}.ui\:p-2{padding:calc(var(--ui-spacing) * 2)}.ui\:p-3{padding:calc(var(--ui-spacing) * 3)}.ui\:p-3\!{padding:calc(var(--ui-spacing) * 3)!important}.ui\:p-4{padding:calc(var(--ui-spacing) * 4)}.ui\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:p-8{padding:calc(var(--ui-spacing) * 8)}.ui\:p-\[3px\]{padding:3px}.ui\:px-1{padding-inline:calc(var(--ui-spacing) * 1)}.ui\:px-1\.5{padding-inline:calc(var(--ui-spacing) * 1.5)}.ui\:px-2{padding-inline:calc(var(--ui-spacing) * 2)}.ui\:px-2\.5{padding-inline:calc(var(--ui-spacing) * 2.5)}.ui\:px-3{padding-inline:calc(var(--ui-spacing) * 3)}.ui\:px-4{padding-inline:calc(var(--ui-spacing) * 4)}.ui\:px-6{padding-inline:calc(var(--ui-spacing) * 6)}.ui\:py-0\.5{padding-block:calc(var(--ui-spacing) * .5)}.ui\:py-1{padding-block:calc(var(--ui-spacing) * 1)}.ui\:py-1\.5{padding-block:calc(var(--ui-spacing) * 1.5)}.ui\:py-2{padding-block:calc(var(--ui-spacing) * 2)}.ui\:py-3{padding-block:calc(var(--ui-spacing) * 3)}.ui\:py-4{padding-block:calc(var(--ui-spacing) * 4)}.ui\:py-6{padding-block:calc(var(--ui-spacing) * 6)}.ui\:ps-3{padding-inline-start:calc(var(--ui-spacing) * 3)}.ui\:pe-3{padding-inline-end:calc(var(--ui-spacing) * 3)}.ui\:pt-0{padding-top:calc(var(--ui-spacing) * 0)}.ui\:pt-1\.5{padding-top:calc(var(--ui-spacing) * 1.5)}.ui\:pt-3{padding-top:calc(var(--ui-spacing) * 3)}.ui\:pt-3\!{padding-top:calc(var(--ui-spacing) * 3)!important}.ui\:pr-1{padding-right:calc(var(--ui-spacing) * 1)}.ui\:pr-2{padding-right:calc(var(--ui-spacing) * 2)}.ui\:pr-8{padding-right:calc(var(--ui-spacing) * 8)}.ui\:pr-9{padding-right:calc(var(--ui-spacing) * 9)}.ui\:pr-18{padding-right:calc(var(--ui-spacing) * 18)}.ui\:pb-2{padding-bottom:calc(var(--ui-spacing) * 2)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing) * 4)}.ui\:pl-2{padding-left:calc(var(--ui-spacing) * 2)}.ui\:pl-3{padding-left:calc(var(--ui-spacing) * 3)}.ui\:pl-8{padding-left:calc(var(--ui-spacing) * 8)}.ui\:text-center{text-align:center}.ui\:text-left{text-align:left}.ui\:text-right{text-align:right}.ui\:font-mono{font-family:var(--ui-font-mono)}.ui\:font-sans{font-family:var(--ui-font-sans)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-base\!{font-size:var(--ui-text-base)!important;line-height:var(--tw-leading,var(--ui-text-base--line-height))!important}.ui\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:text-sm\/relaxed{font-size:var(--ui-text-sm);line-height:var(--ui-leading-relaxed)}.ui\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:text-\[10px\]{font-size:10px}.ui\:leading-none{--tw-leading:1;line-height:1}.ui\:leading-normal{--tw-leading:var(--ui-leading-normal);line-height:var(--ui-leading-normal)}.ui\:leading-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-medium{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:font-normal{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:font-semibold{--tw-font-weight:var(--ui-font-weight-semibold);font-weight:var(--ui-font-weight-semibold)}.ui\:tracking-tight{--tw-tracking:var(--ui-tracking-tight);letter-spacing:var(--ui-tracking-tight)}.ui\:tracking-widest{--tw-tracking:var(--ui-tracking-widest);letter-spacing:var(--ui-tracking-widest)}.ui\:text-balance{text-wrap:balance}.ui\:break-words{overflow-wrap:break-word}.ui\:break-all{word-break:break-all}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-amber-900{color:var(--ui-color-amber-900)}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-emerald-600{color:var(--ui-color-emerald-600)}.ui\:text-foreground,.ui\:text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground,.ui\:text-muted-foreground\/75{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/75{color:color-mix(in oklab, var(--muted-foreground) 75%, transparent)}}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-red-600{color:var(--ui-color-red-600)}.ui\:text-red-700{color:var(--ui-color-red-700)}.ui\:text-secondary-foreground{color:var(--secondary-foreground)}.ui\:text-sidebar-foreground,.ui\:text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-sidebar-foreground\/70{color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent)}}.ui\:text-sky-900{color:var(--ui-color-sky-900)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\!{color:var(--ui-color-white)!important}.ui\:capitalize{text-transform:capitalize}.ui\:underline{text-decoration-line:underline}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-50{opacity:.5}.ui\:opacity-70{opacity:.7}.ui\:opacity-100{opacity:1}.ui\:shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-2xs{--tw-shadow:0 1px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-\[0_0_0_1px_var\(--sidebar-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-border\/50{--tw-ring-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:ring-border\/50{--tw-ring-color:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:ring-sidebar-ring{--tw-ring-color:var(--sidebar-ring)}.ui\:ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:ring-offset-background{--tw-ring-offset-color:var(--background)}.ui\:outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:outline-hidden{outline-offset:2px;outline:2px solid #0000}}.ui\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--ui-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.ui\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-none{transition-property:none}.ui\:duration-100{--tw-duration:.1s;transition-duration:.1s}.ui\:duration-200{--tw-duration:.2s;transition-duration:.2s}.ui\:duration-300{--tw-duration:.3s;transition-duration:.3s}.ui\:duration-500{--tw-duration:.5s;transition-duration:.5s}.ui\:ease-in-out{--tw-ease:var(--ui-ease-in-out);transition-timing-function:var(--ui-ease-in-out)}.ui\:ease-linear{--tw-ease:linear;transition-timing-function:linear}.ui\:fade-in-0{--tw-enter-opacity:0}.ui\:outline-none{--tw-outline-style:none;outline-style:none}.ui\:select-none{-webkit-user-select:none;user-select:none}.ui\:zoom-in-95{--tw-enter-scale:.95}.ui\:ring-inset{--tw-ring-inset:inset}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-focus-within\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.ui\:group-hover\:opacity-100:is(:where(.ui\:group):hover *),.ui\:group-hover\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):hover *){opacity:1}}.ui\:group-has-data-\[orientation\=horizontal\]\/field\:text-balance:is(:where(.ui\:group\/field):has([data-orientation=horizontal]) *){text-wrap:balance}.ui\:group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.ui\:group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--ui-spacing) * 8)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){align-self:flex-start}.ui\:group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-top:calc(var(--ui-spacing) * 2.5)}.ui\:group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-bottom:calc(var(--ui-spacing) * 2.5)}.ui\:group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.ui\:group)[data-collapsible=icon] *){margin-top:calc(var(--ui-spacing) * -8)}.ui\:group-data-\[collapsible\=icon\]\:hidden:is(:where(.ui\:group)[data-collapsible=icon] *){display:none}.ui\:group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.ui\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.ui\:group)[data-collapsible=icon] *){width:var(--sidebar-width-icon)}.ui\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + (calc(var(--ui-spacing) * 4)) + 2px)}.ui\:group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.ui\:group)[data-collapsible=icon] *){overflow:hidden}.ui\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing) * 0)!important}.ui\:group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing) * 2)!important}.ui\:group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.ui\:group)[data-collapsible=icon] *){opacity:0}.ui\:group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width) * -1)}.ui\:group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width) * -1)}.ui\:group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){width:calc(var(--ui-spacing) * 0)}.ui\:group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){--tw-translate-x:calc(var(--ui-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.ui\:group)[data-disabled=true] *){pointer-events:none}.ui\:group-data-\[disabled\=true\]\:opacity-50:is(:where(.ui\:group)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.ui\:group\/field)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.ui\:group\/input-group)[data-disabled=true] *){opacity:.5}.ui\:group-data-\[side\=left\]\:-right-4:is(:where(.ui\:group)[data-side=left] *){right:calc(var(--ui-spacing) * -4)}.ui\:group-data-\[side\=left\]\:border-r:is(:where(.ui\:group)[data-side=left] *){border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:group-data-\[side\=right\]\:left-0:is(:where(.ui\:group)[data-side=right] *){left:calc(var(--ui-spacing) * 0)}.ui\:group-data-\[side\=right\]\:rotate-180:is(:where(.ui\:group)[data-side=right] *){rotate:180deg}.ui\:group-data-\[side\=right\]\:border-l:is(:where(.ui\:group)[data-side=right] *){border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:group-data-\[variant\=floating\]\:rounded-lg:is(:where(.ui\:group)[data-variant=floating] *){border-radius:var(--radius)}.ui\:group-data-\[variant\=floating\]\:border:is(:where(.ui\:group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.ui\:group)[data-variant=floating] *){border-color:var(--sidebar-border)}.ui\:group-data-\[variant\=floating\]\:shadow-sm:is(:where(.ui\:group)[data-variant=floating] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:group-data-\[variant\=outline\]\/field-group\:-mb-2:is(:where(.ui\:group\/field-group)[data-variant=outline] *){margin-bottom:calc(var(--ui-spacing) * -2)}.ui\:group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.ui\:group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){top:100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){margin-top:calc(var(--ui-spacing) * 1.5)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){overflow:hidden}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-radius:calc(var(--radius) - 2px)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:border:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){background-color:var(--popover)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){color:var(--popover-foreground)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:shadow:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.ui\:peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.ui\:peer-disabled\:cursor-not-allowed:is(:where(.ui\:peer):disabled~*){cursor:not-allowed}.ui\:peer-disabled\:opacity-50:is(:where(.ui\:peer):disabled~*){opacity:.5}.ui\:peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.ui\:peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.ui\:peer\/menu-button)[data-size=default]~*){top:calc(var(--ui-spacing) * 1.5)}.ui\:peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.ui\:peer\/menu-button)[data-size=lg]~*){top:calc(var(--ui-spacing) * 2.5)}.ui\:peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.ui\:peer\/menu-button)[data-size=sm]~*){top:calc(var(--ui-spacing) * 1)}.ui\:selection\:bg-primary ::selection{background-color:var(--primary)}.ui\:selection\:bg-primary::selection{background-color:var(--primary)}.ui\:selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.ui\:selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.ui\:placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.ui\:after\:absolute:after{content:var(--tw-content);position:absolute}.ui\:after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--ui-spacing) * -2)}.ui\:after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--ui-spacing) * 0)}.ui\:after\:left-\[calc\(1\/2\*100\%-1px\)\]:after{content:var(--tw-content);left:calc(50% - 1px)}.ui\:after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.ui\:group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.ui\:last\:mt-0:last-child{margin-top:calc(var(--ui-spacing) * 0)}.ui\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.ui\:hover\:cursor-pointer:hover{cursor:pointer}.ui\:hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.ui\:hover\:bg-accent:hover,.ui\:hover\:bg-accent\/25:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-accent\/25:hover{background-color:color-mix(in oklab, var(--accent) 25%, transparent)}}.ui\:hover\:bg-muted:hover{background-color:var(--muted)}.ui\:hover\:bg-sidebar-accent:hover{background-color:var(--sidebar-accent)}.ui\:hover\:bg-transparent\!:hover{background-color:#0000!important}.ui\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.ui\:hover\:underline:hover{text-decoration-line:underline}.ui\:hover\:opacity-100:hover{opacity:1}.ui\:hover\:shadow-2xs:hover{--tw-shadow:0 1px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover:is(:where(.ui\:group)[data-collapsible=offcanvas] *){background-color:var(--sidebar)}.ui\:hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.ui\:focus\:bg-accent:focus{background-color:var(--accent)}.ui\:focus\:text-accent-foreground:focus{color:var(--accent-foreground)}.ui\:focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.ui\:focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.ui\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.ui\:focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.ui\:focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:focus-visible\:ring-ring:focus-visible,.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.ui\:focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:focus-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.ui\:focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.ui\:focus-visible\:outline-ring:focus-visible{outline-color:var(--ring)}.ui\:active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.ui\:active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.ui\:disabled\:pointer-events-none:disabled{pointer-events:none}.ui\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.ui\:disabled\:opacity-50:disabled{opacity:.5}:where([data-side=left]) .ui\:in-data-\[side\=left\]\:cursor-w-resize{cursor:w-resize}:where([data-side=right]) .ui\:in-data-\[side\=right\]\:cursor-e-resize{cursor:e-resize}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:color-mix(in oklab, var(--background) 20%, transparent)}}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:text-background{color:var(--background)}.ui\:has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.ui\:has-data-\[state\=checked\]\:border-primary:has([data-state=checked]){border-color:var(--primary)}.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot=input-group-control]:focus-visible){border-color:var(--ring)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot=input-group-control]:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid=true]){border-color:var(--destructive)}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.ui\:has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.ui\:has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.ui\:has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.ui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(>[data-slot=checkbox-group]){gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]){align-items:flex-start}.ui\:has-\[\>\[data-slot\=field\]\]\:w-full:has(>[data-slot=field]){width:100%}.ui\:has-\[\>\[data-slot\=field\]\]\:flex-col:has(>[data-slot=field]){flex-direction:column}.ui\:has-\[\>\[data-slot\=field\]\]\:rounded-md:has(>[data-slot=field]){border-radius:calc(var(--radius) - 2px)}.ui\:has-\[\>\[data-slot\=field\]\]\:border:has(>[data-slot=field]){border-style:var(--tw-border-style);border-width:1px}.ui\:has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(>[data-slot=radio-group]){gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>button\]\:ms-\[-0\.45rem\]:has(>button){margin-inline-start:-.45rem}.ui\:has-\[\>button\]\:me-\[-0\.45rem\]:has(>button){margin-inline-end:-.45rem}.ui\:has-\[\>kbd\]\:ms-\[-0\.35rem\]:has(>kbd){margin-inline-start:-.35rem}.ui\:has-\[\>kbd\]\:me-\[-0\.35rem\]:has(>kbd){margin-inline-end:-.35rem}.ui\:has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.ui\:has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--ui-spacing) * 0)}.ui\:has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--ui-spacing) * 2.5)}.ui\:has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--ui-spacing) * 4)}.ui\:has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.ui\:aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.ui\:aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.ui\:aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:aria-selected\:bg-accent[aria-selected=true]{background-color:var(--accent)}.ui\:aria-selected\:text-accent-foreground[aria-selected=true]{color:var(--accent-foreground)}:is(.ui\:\*\*\:data-command-group\:px-2 *)[data-command-group]{padding-inline:calc(var(--ui-spacing) * 2)}:is(.ui\:\*\*\:data-command-input\:h-12 *)[data-command-input]{height:calc(var(--ui-spacing) * 12)}:is(.ui\:\*\*\:data-command-item\:px-2 *)[data-command-item]{padding-inline:calc(var(--ui-spacing) * 2)}:is(.ui\:\*\*\:data-command-item\:py-3 *)[data-command-item]{padding-block:calc(var(--ui-spacing) * 3)}.ui\:data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.ui\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.ui\:data-disabled\:opacity-50[data-disabled]{opacity:.5}.ui\:data-highlighted\:bg-accent[data-highlighted]{background-color:var(--accent)}.ui\:data-highlighted\:text-accent-foreground[data-highlighted]{color:var(--accent-foreground)}.ui\:data-inset\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing) * 8)}.ui\:data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.ui\:data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.ui\:data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:data-\[active\=true\]\:text-accent-foreground[data-active=true]{color:var(--accent-foreground)}.ui\:data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}@media (hover:hover){.ui\:data-\[active\=true\]\:hover\:bg-accent[data-active=true]:hover{background-color:var(--accent)}}.ui\:data-\[active\=true\]\:focus\:bg-accent[data-active=true]:focus{background-color:var(--accent)}.ui\:data-\[current\=true\]\:bg-muted[data-current=true]{background-color:var(--muted)}.ui\:data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.ui\:data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.ui\:data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing) * 8)}.ui\:data-\[invalid\=true\]\:text-destructive[data-invalid=true]{color:var(--destructive)}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(rtl),[dir=rtl]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity:0}.ui\:data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{--tw-exit-opacity:0}.ui\:data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.ui\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.ui\:data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}.ui\:data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.ui\:data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.ui\:data-\[side\=bottom\]\:-translate-x-1\/2[data-side=bottom]{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\][data-side=bottom]{--tw-translate-y:calc(calc(-50% + 1px) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:calc(var(--ui-spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\][data-side=left]{--tw-translate-y:calc(calc(50% - 3px) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:calc(var(--ui-spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\][data-side=right]{--tw-translate-x:calc(50% + 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-y-1\/2[data-side=right]{--tw-translate-y:calc(1 / 2 * 100%);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=top\]\:translate-x-1\/2[data-side=top]{--tw-translate-x:calc(1 / 2 * 100%);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\][data-side=top]{--tw-translate-y:calc(-50% + 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.ui\:data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--ui-spacing) * 9)}.ui\:data-\[size\=sm\]\:h-8[data-size=sm]{height:calc(var(--ui-spacing) * 8)}.ui\:data-\[slot\=checkbox-group\]\:gap-3[data-slot=checkbox-group]{gap:calc(var(--ui-spacing) * 3)}:is(.ui\:\*\:data-\[slot\=field\]\:p-4>*)[data-slot=field]{padding:calc(var(--ui-spacing) * 4)}:is(.ui\:\*\:data-\[slot\=field-group\]\:gap-4>*)[data-slot=field-group]{gap:calc(var(--ui-spacing) * 4)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot=navigation-menu-link]:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot=navigation-menu-link]:focus{--tw-outline-style:none;outline-style:none}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:line-clamp-1 *)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:flex *)[data-slot=select-value]{display:flex}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:items-center *)[data-slot=select-value]{align-items:center}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:gap-2 *)[data-slot=select-value]{gap:calc(var(--ui-spacing) * 2)}.ui\:data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.ui\:data-\[state\=active\]\:shadow-sm[data-state=active]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--primary)}.ui\:data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.ui\:data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.ui\:data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.ui\:data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.ui\:data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.ui\:data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.ui\:data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.ui\:data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity:0}.ui\:data-\[state\=off\]\:text-muted-foreground[data-state=off]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=off\]\:text-accent-foreground:hover[data-state=off]{color:var(--accent-foreground)}}.ui\:data-\[state\=on\]\:bg-accent[data-state=on]{background-color:var(--accent)}.ui\:data-\[state\=on\]\:bg-transparent[data-state=on]{background-color:#0000}.ui\:data-\[state\=on\]\:text-accent-foreground[data-state=on]{color:var(--accent-foreground)}.ui\:data-\[state\=on\]\:text-muted-foreground[data-state=on]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=on\]\:text-accent-foreground:hover[data-state=on]{color:var(--accent-foreground)}}.ui\:data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.ui\:data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.ui\:data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.ui\:data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}.ui\:data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.ui\:data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:.9}.ui\:data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.ui\:data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.ui\:data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.ui\:data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.ui\:data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-scale:.95}@media (hover:hover){.ui\:data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.ui\:data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.ui\:data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.ui\:data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--ui-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:var(--input)}.ui\:data-\[state\=visible\]\:animate-in[data-state=visible]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity:0}.ui\:data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.ui\:data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.ui\:data-\[variant\=destructive\]\:data-highlighted\:text-destructive[data-variant=destructive][data-highlighted]{color:var(--destructive)}.ui\:data-\[variant\=label\]\:text-sm[data-variant=label]{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:data-\[variant\=legend\]\:text-base[data-variant=legend]{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--ui-spacing) * 24)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=left\]\:start-0[data-vaul-drawer-direction=left]{inset-inline-start:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.ui\:data-\[vaul-drawer-direction\=left\]\:border-e[data-vaul-drawer-direction=left]{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.ui\:data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=right\]\:end-0[data-vaul-drawer-direction=right]{inset-inline-end:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.ui\:data-\[vaul-drawer-direction\=right\]\:border-s[data-vaul-drawer-direction=right]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.ui\:data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--ui-spacing) * 24)}.ui\:data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:nth-last-2\:-mt-1:nth-last-child(2){margin-top:calc(var(--ui-spacing) * -1)}@media (min-width:40rem){.ui\:sm\:flex{display:flex}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:flex-row{flex-direction:row}.ui\:sm\:justify-end{justify-content:flex-end}.ui\:sm\:gap-2\.5{gap:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:pr-2\.5{padding-right:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:pl-2\.5{padding-left:calc(var(--ui-spacing) * 2.5)}.ui\:data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.ui\:data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--ui-container-sm)}}@media (min-width:48rem){.ui\:md\:block{display:block}.ui\:md\:flex{display:flex}.ui\:md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:md\:flex-row{flex-direction:row}.ui\:md\:p-12{padding:calc(var(--ui-spacing) * 12)}.ui\:md\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:md\:opacity-0{opacity:0}.ui\:md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.ui\:peer)[data-variant=inset]~*){margin:calc(var(--ui-spacing) * 2)}.ui\:md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.ui\:peer)[data-variant=inset]~*){margin-left:calc(var(--ui-spacing) * 0)}.ui\:md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.ui\:peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.ui\:md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.ui\:peer)[data-variant=inset]~*){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.ui\:peer)[data-variant=inset]~*):is(:where(.ui\:peer)[data-state=collapsed]~*){margin-left:calc(var(--ui-spacing) * 2)}.ui\:md\:after\:hidden:after{content:var(--tw-content);display:none}}.ui\:dark\:scale-0:where(.dark,.dark *){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:dark\:scale-100:where(.dark,.dark *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:dark\:-rotate-90:where(.dark,.dark *){rotate:-90deg}.ui\:dark\:rotate-0:where(.dark,.dark *){rotate:none}.ui\:dark\:border-amber-900:where(.dark,.dark *){border-color:var(--ui-color-amber-900)}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:border-sky-900:where(.dark,.dark *){border-color:var(--ui-color-sky-900)}.ui\:dark\:border-slate-800:where(.dark,.dark *){border-color:var(--ui-color-slate-800)}.ui\:dark\:bg-amber-500:where(.dark,.dark *){background-color:var(--ui-color-amber-500)}.ui\:dark\:bg-amber-950:where(.dark,.dark *){background-color:var(--ui-color-amber-950)}.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:color-mix(in oklab, var(--destructive) 60%, transparent)}}.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:color-mix(in oklab, var(--destructive) 70%, transparent)}}.ui\:dark\:bg-emerald-500:where(.dark,.dark *){background-color:var(--ui-color-emerald-500)}.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:color-mix(in oklab, var(--input) 30%, transparent)}}.ui\:dark\:bg-sky-950:where(.dark,.dark *){background-color:var(--ui-color-sky-950)}.ui\:dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--ui-color-slate-950)}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:text-amber-50:where(.dark,.dark *){color:var(--ui-color-amber-50)}.ui\:dark\:text-amber-950:where(.dark,.dark *){color:var(--ui-color-amber-950)}.ui\:dark\:text-emerald-950:where(.dark,.dark *){color:var(--ui-color-emerald-950)}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}.ui\:dark\:text-sky-50:where(.dark,.dark *){color:var(--ui-color-sky-50)}.ui\:dark\:text-white:where(.dark,.dark *){color:var(--ui-color-white)}@media (hover:hover){.ui\:dark\:hover\:border-input:where(.dark,.dark *):hover{border-color:var(--input)}.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--input) 50%, transparent)}}}.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.ui\:dark\:data-\[state\=active\]\:border-input:where(.dark,.dark *)[data-state=active]{border-color:var(--input)}.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:color-mix(in oklab, var(--input) 30%, transparent)}}.ui\:dark\:data-\[state\=active\]\:text-foreground:where(.dark,.dark *)[data-state=active]{color:var(--foreground)}.ui\:dark\:data-\[state\=checked\]\:bg-primary:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary)}.ui\:dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary-foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-foreground:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:color-mix(in oklab, var(--input) 80%, transparent)}}.ui\:\[\&_\.lc-area-path\]\:opacity-100 .lc-area-path{opacity:1}.ui\:\[\&_\.lc-axis-tick\]\:stroke-0 .lc-axis-tick{stroke-width:0}.ui\:\[\&_\.lc-axis-tick-label\]\:fill-muted-foreground .lc-axis-tick-label{fill:var(--muted-foreground)}.ui\:\[\&_\.lc-axis-tick-label\]\:font-normal .lc-axis-tick-label{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:\[\&_\.lc-grid-x-radial-circle\]\:stroke-border .lc-grid-x-radial-circle,.ui\:\[\&_\.lc-grid-x-radial-line\]\:stroke-border .lc-grid-x-radial-line,.ui\:\[\&_\.lc-grid-y-radial-circle\]\:stroke-border .lc-grid-y-radial-circle,.ui\:\[\&_\.lc-grid-y-radial-line\]\:stroke-border .lc-grid-y-radial-line{stroke:var(--border)}.ui\:\[\&_\.lc-highlight-line\]\:stroke-0 .lc-highlight-line{stroke-width:0}.ui\:\[\&_\.lc-highlight-line\]\:opacity-100 .lc-highlight-line,.ui\:\[\&_\.lc-highlight-point\]\:opacity-100 .lc-highlight-point{opacity:1}.ui\:\[\&_\.lc-labels-text\:not\(\[fill\]\)\]\:fill-foreground .lc-labels-text:not([fill]){fill:var(--foreground)}.ui\:\[\&_\.lc-layout-svg-g\]\:fill-transparent .lc-layout-svg-g{fill:#0000}.ui\:\[\&_\.lc-legend-swatch\]\:size-2\.5 .lc-legend-swatch{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&_\.lc-legend-swatch\]\:rounded-\[2px\] .lc-legend-swatch{border-radius:2px}.ui\:\[\&_\.lc-legend-swatch-button\]\:items-center .lc-legend-swatch-button{align-items:center}.ui\:\[\&_\.lc-legend-swatch-button\]\:gap-1\.5 .lc-legend-swatch-button{gap:calc(var(--ui-spacing) * 1.5)}.ui\:\[\&_\.lc-legend-swatch-group\]\:items-center .lc-legend-swatch-group{align-items:center}.ui\:\[\&_\.lc-legend-swatch-group\]\:gap-4 .lc-legend-swatch-group{gap:calc(var(--ui-spacing) * 4)}.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:\[\&_\.lc-root-container\]\:w-full .lc-root-container{width:100%}.ui\:\[\&_\.lc-rule-x-line\:not\(\.lc-grid-x-rule\)\]\:stroke-0 .lc-rule-x-line:not(.lc-grid-x-rule),.ui\:\[\&_\.lc-rule-y-line\:not\(\.lc-grid-y-rule\)\]\:stroke-0 .lc-rule-y-line:not(.lc-grid-y-rule){stroke-width:0}.ui\:\[\&_\.lc-spline-path\]\:opacity-100 .lc-spline-path{opacity:1}.ui\:\[\&_\.lc-text\]\:text-xs .lc-text{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:\[\&_\.lc-text-svg\]\:overflow-visible .lc-text-svg{overflow:visible}.ui\:\[\&_\.lc-tooltip-rects-g\]\:fill-transparent .lc-tooltip-rects-g{fill:#0000}.ui\:\[\&_\.stroke-white\]\:stroke-transparent .stroke-white{stroke:#0000}.ui\:\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0 [data-command-group]:not([hidden])~[data-command-group]{padding-top:calc(var(--ui-spacing) * 0)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:h-5 [data-command-input-wrapper] svg{height:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:w-5 [data-command-input-wrapper] svg{width:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-item\]_svg\]\:h-5 [data-command-item] svg{height:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-item\]_svg\]\:w-5 [data-command-item] svg{width:calc(var(--ui-spacing) * 5)}.ui\:\[\&_img\]\:size-full img{width:100%;height:100%}.ui\:\[\&_img\]\:object-cover img{object-fit:cover}.ui\:\[\&_p\]\:leading-relaxed p{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:size-8\! svg{width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.ui\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-6 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:\[\&_text\]\:stroke-transparent text{stroke:#0000}.ui\:\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.ui\:\[\&\+\[data-slot\=item-content\]\]\:flex-none+[data-slot=item-content]{flex:none}.ui\:\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--ui-spacing) * 0)}.ui\:\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--ui-spacing) * 6)}.ui\:\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--ui-spacing) * 3)}.ui\:\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--ui-spacing) * 6)}.ui\:\[a\]\:transition-colors:is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}@media (hover:hover){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}}:is(.ui\:\*\:\[span\]\:last\:flex>*):is(span):last-child{display:flex}:is(.ui\:\*\:\[span\]\:last\:items-center>*):is(span):last-child{align-items:center}:is(.ui\:\*\:\[span\]\:last\:gap-2>*):is(span):last-child{gap:calc(var(--ui-spacing) * 2)}:is(.ui\:data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.ui\:\[\&\>\*\]\:focus-visible\:relative>:focus-visible{position:relative}.ui\:\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-s-none>:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-s-0>:not(:first-child){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-e-none>:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.ui\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label]{flex:auto}.ui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-e-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-start-end-radius:calc(var(--radius) - 2px);border-end-end-radius:calc(var(--radius) - 2px)}.ui\:\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'ui\:w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=ui\:w-]){width:fit-content}.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]{margin-top:1px}.ui\:\[\&\>a\]\:underline>a{text-decoration-line:underline}.ui\:\[\&\>a\]\:underline-offset-4>a{text-underline-offset:4px}.ui\:\[\&\>a\:hover\]\:text-primary>a:hover{color:var(--primary)}.ui\:\[\&\>button\]\:hidden>button{display:none}.ui\:\[\&\>input\]\:flex-1>input{flex:1}.ui\:has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pe-2:has(>[data-align=inline-end])>input{padding-inline-end:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:ps-2:has(>[data-align=inline-start])>input{padding-inline-start:calc(var(--ui-spacing) * 2)}.ui\:\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.ui\:\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui\:\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.ui\:\[\&\>svg\]\:size-2\.5>svg{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&\>svg\]\:size-3>svg{width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\]\:size-4>svg{width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.ui\:\[\&\>svg\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:\[\&\>svg\]\:text-current>svg{color:currentColor}.ui\:\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.ui\:\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-3\.5>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}@media (hover:hover){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}}.ui\:\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left][data-collapsible=offcanvas] .ui\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:calc(var(--ui-spacing) * -2)}[data-side=left][data-state=collapsed] .ui\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-collapsible=offcanvas] .ui\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:calc(var(--ui-spacing) * -2)}[data-side=right][data-state=collapsed] .ui\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-variant=legend]+.ui\:\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5{margin-top:calc(var(--ui-spacing) * -1.5)}@media (hover:hover){a.ui\:\[a\&\]\:hover\:bg-accent:hover{background-color:var(--accent)}a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:var(--ui-color-amber-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-amber-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:var(--ui-color-emerald-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-emerald-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab, var(--secondary) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}a.ui\:\[a\&\]\:hover\:text-primary:hover{color:var(--primary)}a.ui\:\[a\&\]\:hover\:underline:hover{text-decoration-line:underline}a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.25);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.25);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.25);--primary:oklch(21.6% .006 56.043);--primary-foreground:oklch(98.5% .001 106.423);--secondary:oklch(97% .001 106.424);--secondary-foreground:oklch(21.6% .006 56.043);--muted:oklch(97% .001 106.424);--muted-foreground:oklch(55.3% .013 58.071);--accent:oklch(96.7% .001 286.375);--accent-foreground:oklch(21.6% .006 56.043);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.3% .003 48.717);--input:oklch(92.3% .003 48.717);--ring:oklch(70.9% .01 56.259);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(100% 0 0);--sidebar-foreground:oklch(14.7% .004 49.25);--sidebar-primary:oklch(21.6% .006 56.043);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(97% .001 106.424);--sidebar-accent-foreground:oklch(21.6% .006 56.043);--sidebar-border:oklch(92.3% .003 48.717);--sidebar-ring:oklch(70.9% .01 56.259)}.dark{--background:oklch(14.7% .004 49.25);--foreground:oklch(98.5% .001 106.423);--card:oklch(21.6% .006 56.043);--card-foreground:oklch(98.5% .001 106.423);--popover:oklch(21.6% .006 56.043);--popover-foreground:oklch(98.5% .001 106.423);--primary:oklch(92.3% .003 48.717);--primary-foreground:oklch(21.6% .006 56.043);--secondary:oklch(26.8% .007 34.298);--secondary-foreground:oklch(98.5% .001 106.423);--muted:oklch(26.8% .007 34.298);--muted-foreground:oklch(70.9% .01 56.259);--accent:oklch(26.8% .007 34.298);--accent-foreground:oklch(98.5% .001 106.423);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.3% .013 58.071);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(0% 0 0);--sidebar-foreground:oklch(98.5% .001 106.423);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(26.8% .007 34.298);--sidebar-accent-foreground:oklch(98.5% .001 106.423);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.3% .013 58.071)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border{to{--border-angle:360deg}}.animate-gradient-border{background:linear-gradient(45deg, white, white) padding-box, conic-gradient(from var(--border-angle), #94a3b84d 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,white) 88%, var(--primary,#1d4ee2) 92%, #94a3b84d 100%) border-box;border:1px solid #0000;transition:--border-angle 3s ease-in-out}.animate-gradient-border:hover{animation:4s ease-in-out infinite border}.dark.animate-gradient-border{background:linear-gradient(45deg, #000, #000) padding-box, conic-gradient(from var(--border-angle), #4755697a 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,black) 88%, var(--primary,#1d4ee2) 92%, #4755697a 100%) border-box}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}
\ No newline at end of file
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--border-angle:0deg}}}@layer theme{:root,:host{--ui-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--ui-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ui-color-red-50:oklch(97.1% .013 17.38);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-600:oklch(57.7% .245 27.325);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-orange-500:oklch(70.5% .213 47.604);--ui-color-amber-50:oklch(98.7% .022 95.277);--ui-color-amber-200:oklch(92.4% .12 95.746);--ui-color-amber-300:oklch(87.9% .169 91.605);--ui-color-amber-400:oklch(82.8% .189 84.429);--ui-color-amber-500:oklch(76.9% .188 70.08);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-amber-900:oklch(41.4% .112 45.904);--ui-color-amber-950:oklch(27.9% .077 45.635);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-emerald-50:oklch(97.9% .021 166.113);--ui-color-emerald-300:oklch(84.5% .143 164.978);--ui-color-emerald-400:oklch(76.5% .177 163.223);--ui-color-emerald-500:oklch(69.6% .17 162.48);--ui-color-emerald-600:oklch(59.6% .145 163.225);--ui-color-emerald-950:oklch(26.2% .051 172.552);--ui-color-sky-50:oklch(97.7% .013 236.62);--ui-color-sky-200:oklch(90.1% .058 230.902);--ui-color-sky-900:oklch(39.1% .09 240.876);--ui-color-sky-950:oklch(29.3% .066 243.157);--ui-color-blue-600:oklch(54.6% .245 262.881);--ui-color-pink-500:oklch(65.6% .241 354.308);--ui-color-slate-500:oklch(55.4% .046 257.417);--ui-color-slate-800:oklch(27.9% .041 260.031);--ui-color-slate-950:oklch(12.9% .042 264.695);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-sm:24rem;--ui-container-lg:32rem;--ui-container-xl:36rem;--ui-container-2xl:42rem;--ui-container-3xl:48rem;--ui-container-4xl:56rem;--ui-container-7xl:80rem;--ui-text-xs:.75rem;--ui-text-xs--line-height:calc(1 / .75);--ui-text-sm:.875rem;--ui-text-sm--line-height:calc(1.25 / .875);--ui-text-base:1rem;--ui-text-base--line-height:calc(1.5 / 1);--ui-text-lg:1.125rem;--ui-text-lg--line-height:calc(1.75 / 1.125);--ui-text-xl:1.25rem;--ui-text-xl--line-height:calc(1.75 / 1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2 / 1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25 / 1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5 / 2.25);--ui-text-5xl:3rem;--ui-text-5xl--line-height:1;--ui-text-6xl:3.75rem;--ui-text-6xl--line-height:1;--ui-text-7xl:4.5rem;--ui-text-7xl--line-height:1;--ui-font-weight-light:300;--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-font-weight-black:900;--ui-tracking-tighter:-.05em;--ui-tracking-tight:-.025em;--ui-tracking-wide:.025em;--ui-tracking-widest:.1em;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-radius-2xl:1rem;--ui-radius-3xl:1.5rem;--ui-ease-in-out:cubic-bezier(.4, 0, .2, 1);--ui-animate-spin:spin 1s linear infinite;--ui-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--ui-blur-sm:8px;--ui-blur-xl:24px;--ui-aspect-video:16 / 9;--ui-default-transition-duration:.15s;--ui-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--ui-default-mono-font-family:var(--ui-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font-cio,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--ui-default-font-feature-settings,normal);font-variation-settings:var(--ui-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--ui-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--ui-default-mono-font-feature-settings,normal);font-variation-settings:var(--ui-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);font-family:var(--font-sans);color:var(--foreground)}button,input,select,optgroup,textarea{font-family:var(--font-sans)}::file-selector-button{font-family:var(--font-sans)}.toaster{--normal-bg:var(--color-popover);--normal-text:var(--color-popover-foreground);--normal-border:var(--color-border)}}@layer components{.cio-marketing-border-beam{pointer-events:none;border-radius:inherit;border:calc(var(--border-width) * 1px) solid transparent;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cio-marketing-border-beam:after{content:"";aspect-ratio:1;width:calc(var(--size) * 1px);animation-delay:var(--delay);background:linear-gradient(to left, var(--color-from), var(--color-to), transparent);offset-anchor:calc(var(--anchor) * 1%) 50%;offset-path:rect(0 auto auto 0 round calc(var(--size) * 1px));animation:border-beam calc(var(--duration) * 1s) infinite linear;position:absolute}}@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:pointer-events-none{pointer-events:none}.ui\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ui\:absolute{position:absolute}.ui\:fixed{position:fixed}.ui\:relative{position:relative}.ui\:sticky{position:sticky}.ui\:inset-0{inset:calc(var(--ui-spacing) * 0)}.ui\:inset-x-0{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:inset-y-0{inset-block:calc(var(--ui-spacing) * 0)}.ui\:start-0{inset-inline-start:calc(var(--ui-spacing) * 0)}.ui\:end-4{inset-inline-end:calc(var(--ui-spacing) * 4)}.ui\:-top-2{top:calc(var(--ui-spacing) * -2)}.ui\:-top-3{top:calc(var(--ui-spacing) * -3)}.ui\:top-0{top:calc(var(--ui-spacing) * 0)}.ui\:top-1\.5{top:calc(var(--ui-spacing) * 1.5)}.ui\:top-1\/2{top:50%}.ui\:top-2{top:calc(var(--ui-spacing) * 2)}.ui\:top-3\.5{top:calc(var(--ui-spacing) * 3.5)}.ui\:top-4{top:calc(var(--ui-spacing) * 4)}.ui\:top-13{top:calc(var(--ui-spacing) * 13)}.ui\:top-\[-12px\]{top:-12px}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:-right-4{right:calc(var(--ui-spacing) * -4)}.ui\:right-0{right:calc(var(--ui-spacing) * 0)}.ui\:right-1{right:calc(var(--ui-spacing) * 1)}.ui\:right-2{right:calc(var(--ui-spacing) * 2)}.ui\:right-3{right:calc(var(--ui-spacing) * 3)}.ui\:right-4{right:calc(var(--ui-spacing) * 4)}.ui\:right-9{right:calc(var(--ui-spacing) * 9)}.ui\:right-\[-12px\]{right:-12px}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing) * 0)}.ui\:bottom-2{bottom:calc(var(--ui-spacing) * 2)}.ui\:left-0{left:calc(var(--ui-spacing) * 0)}.ui\:left-1\/2{left:50%}.ui\:left-2{left:calc(var(--ui-spacing) * 2)}.ui\:left-\[50\%\]{left:50%}.ui\:left-\[calc\(50\%-3rem\)\]{left:calc(50% - 3rem)}.ui\:isolate{isolation:isolate}.ui\:-z-10{z-index:calc(10 * -1)}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:z-20{z-index:20}.ui\:z-50{z-index:50}.ui\:z-200{z-index:200}.ui\:z-999{z-index:999}.ui\:z-\[1\]{z-index:1}.ui\:order-first{order:-9999}.ui\:order-last{order:9999}.ui\:col-start-2{grid-column-start:2}.ui\:row-span-2{grid-row:span 2/span 2}.ui\:row-start-1{grid-row-start:1}.ui\:m-0{margin:calc(var(--ui-spacing) * 0)}.ui\:m-0\!{margin:calc(var(--ui-spacing) * 0)!important}.ui\:-mx-1{margin-inline:calc(var(--ui-spacing) * -1)}.ui\:mx-0\.5{margin-inline:calc(var(--ui-spacing) * .5)}.ui\:mx-auto{margin-inline:auto}.ui\:my-0{margin-block:calc(var(--ui-spacing) * 0)}.ui\:my-0\.5{margin-block:calc(var(--ui-spacing) * .5)}.ui\:my-1{margin-block:calc(var(--ui-spacing) * 1)}.ui\:my-2{margin-block:calc(var(--ui-spacing) * 2)}.ui\:my-3{margin-block:calc(var(--ui-spacing) * 3)}.ui\:my-4{margin-block:calc(var(--ui-spacing) * 4)}.ui\:ms-1{margin-inline-start:calc(var(--ui-spacing) * 1)}.ui\:ms-4{margin-inline-start:calc(var(--ui-spacing) * 4)}.ui\:mt-0\.5{margin-top:calc(var(--ui-spacing) * .5)}.ui\:mt-1{margin-top:calc(var(--ui-spacing) * 1)}.ui\:mt-1\.5{margin-top:calc(var(--ui-spacing) * 1.5)}.ui\:mt-3{margin-top:calc(var(--ui-spacing) * 3)}.ui\:mt-4{margin-top:calc(var(--ui-spacing) * 4)}.ui\:mt-6{margin-top:calc(var(--ui-spacing) * 6)}.ui\:mt-10{margin-top:calc(var(--ui-spacing) * 10)}.ui\:mt-12{margin-top:calc(var(--ui-spacing) * 12)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing) * 1)}.ui\:mr-2{margin-right:calc(var(--ui-spacing) * 2)}.ui\:mb-1{margin-bottom:calc(var(--ui-spacing) * 1)}.ui\:mb-2{margin-bottom:calc(var(--ui-spacing) * 2)}.ui\:mb-3{margin-bottom:calc(var(--ui-spacing) * 3)}.ui\:mb-4{margin-bottom:calc(var(--ui-spacing) * 4)}.ui\:mb-6{margin-bottom:calc(var(--ui-spacing) * 6)}.ui\:mb-8{margin-bottom:calc(var(--ui-spacing) * 8)}.ui\:mb-10{margin-bottom:calc(var(--ui-spacing) * 10)}.ui\:mb-12{margin-bottom:calc(var(--ui-spacing) * 12)}.ui\:ml-1{margin-left:calc(var(--ui-spacing) * 1)}.ui\:ml-2{margin-left:calc(var(--ui-spacing) * 2)}.ui\:ml-2\.5{margin-left:calc(var(--ui-spacing) * 2.5)}.ui\:ml-auto{margin-left:auto}.ui\:box-border{box-sizing:border-box}.ui\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:block{display:block}.ui\:flex{display:flex}.ui\:grid{display:grid}.ui\:hidden{display:none}.ui\:inline-block{display:inline-block}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.ui\:size-2{width:calc(var(--ui-spacing) * 2);height:calc(var(--ui-spacing) * 2)}.ui\:size-2\.5{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:size-3{width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:size-3\.5{width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:size-4{width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:size-5{width:calc(var(--ui-spacing) * 5);height:calc(var(--ui-spacing) * 5)}.ui\:size-6{width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:size-7{width:calc(var(--ui-spacing) * 7);height:calc(var(--ui-spacing) * 7)}.ui\:size-8{width:calc(var(--ui-spacing) * 8);height:calc(var(--ui-spacing) * 8)}.ui\:size-9{width:calc(var(--ui-spacing) * 9);height:calc(var(--ui-spacing) * 9)}.ui\:size-10{width:calc(var(--ui-spacing) * 10);height:calc(var(--ui-spacing) * 10)}.ui\:size-14{width:calc(var(--ui-spacing) * 14);height:calc(var(--ui-spacing) * 14)}.ui\:size-14\!{width:calc(var(--ui-spacing) * 14)!important;height:calc(var(--ui-spacing) * 14)!important}.ui\:size-20{width:calc(var(--ui-spacing) * 20);height:calc(var(--ui-spacing) * 20)}.ui\:size-\[2\.4px\]{width:2.4px;height:2.4px}.ui\:size-fit{width:fit-content;height:fit-content}.ui\:size-full{width:100%;height:100%}.ui\:h-\(--bits-navigation-menu-viewport-height\){height:var(--bits-navigation-menu-viewport-height)}.ui\:h-\(--bits-select-anchor-height\){height:var(--bits-select-anchor-height)}.ui\:h-0\.5{height:calc(var(--ui-spacing) * .5)}.ui\:h-1\.5{height:calc(var(--ui-spacing) * 1.5)}.ui\:h-2{height:calc(var(--ui-spacing) * 2)}.ui\:h-4{height:calc(var(--ui-spacing) * 4)}.ui\:h-5{height:calc(var(--ui-spacing) * 5)}.ui\:h-6{height:calc(var(--ui-spacing) * 6)}.ui\:h-7{height:calc(var(--ui-spacing) * 7)}.ui\:h-8{height:calc(var(--ui-spacing) * 8)}.ui\:h-9{height:calc(var(--ui-spacing) * 9)}.ui\:h-10{height:calc(var(--ui-spacing) * 10)}.ui\:h-12{height:calc(var(--ui-spacing) * 12)}.ui\:h-20{height:calc(var(--ui-spacing) * 20)}.ui\:h-24{height:calc(var(--ui-spacing) * 24)}.ui\:h-28{height:calc(var(--ui-spacing) * 28)}.ui\:h-40{height:calc(var(--ui-spacing) * 40)}.ui\:h-48{height:calc(var(--ui-spacing) * 48)}.ui\:h-50\!{height:calc(var(--ui-spacing) * 50)!important}.ui\:h-96{height:calc(var(--ui-spacing) * 96)}.ui\:h-128{height:calc(var(--ui-spacing) * 128)}.ui\:h-\[1\.2rem\]{height:1.2rem}.ui\:h-\[1\.15rem\]{height:1.15rem}.ui\:h-\[6px\]{height:6px}.ui\:h-\[70px\]{height:70px}.ui\:h-\[280px\]{height:280px}.ui\:h-\[500px\]{height:500px}.ui\:h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.ui\:h-\[calc\(100\%-3px\)\]{height:calc(100% - 3px)}.ui\:h-auto{height:auto}.ui\:h-fit{height:fit-content}.ui\:h-fit\!{height:fit-content!important}.ui\:h-full{height:100%}.ui\:h-px{height:1px}.ui\:h-screen{height:100vh}.ui\:max-h-\(--bits-dropdown-menu-content-available-height\){max-height:var(--bits-dropdown-menu-content-available-height)}.ui\:max-h-\(--bits-select-content-available-height\){max-height:var(--bits-select-content-available-height)}.ui\:max-h-60{max-height:calc(var(--ui-spacing) * 60)}.ui\:max-h-64{max-height:calc(var(--ui-spacing) * 64)}.ui\:max-h-72{max-height:calc(var(--ui-spacing) * 72)}.ui\:max-h-80{max-height:calc(var(--ui-spacing) * 80)}.ui\:max-h-90{max-height:calc(var(--ui-spacing) * 90)}.ui\:max-h-96{max-height:calc(var(--ui-spacing) * 96)}.ui\:max-h-\[300px\]{max-height:300px}.ui\:max-h-svh{max-height:100svh}.ui\:min-h-0{min-height:calc(var(--ui-spacing) * 0)}.ui\:min-h-4{min-height:calc(var(--ui-spacing) * 4)}.ui\:min-h-8{min-height:calc(var(--ui-spacing) * 8)}.ui\:min-h-14{min-height:calc(var(--ui-spacing) * 14)}.ui\:min-h-16{min-height:calc(var(--ui-spacing) * 16)}.ui\:min-h-40{min-height:calc(var(--ui-spacing) * 40)}.ui\:min-h-96{min-height:calc(var(--ui-spacing) * 96)}.ui\:min-h-\[44px\]{min-height:44px}.ui\:min-h-\[63px\]{min-height:63px}.ui\:min-h-\[240px\]{min-height:240px}.ui\:min-h-\[320px\]{min-height:320px}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:min-h-screen{min-height:100vh}.ui\:w-\(--sidebar-width\){width:var(--sidebar-width)}.ui\:w-0{width:calc(var(--ui-spacing) * 0)}.ui\:w-1{width:calc(var(--ui-spacing) * 1)}.ui\:w-1\.5{width:calc(var(--ui-spacing) * 1.5)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing) * 2)}.ui\:w-2\/4{width:50%}.ui\:w-3\/4{width:75%}.ui\:w-4{width:calc(var(--ui-spacing) * 4)}.ui\:w-5{width:calc(var(--ui-spacing) * 5)}.ui\:w-6{width:calc(var(--ui-spacing) * 6)}.ui\:w-7{width:calc(var(--ui-spacing) * 7)}.ui\:w-8{width:calc(var(--ui-spacing) * 8)}.ui\:w-24{width:calc(var(--ui-spacing) * 24)}.ui\:w-28{width:calc(var(--ui-spacing) * 28)}.ui\:w-40{width:calc(var(--ui-spacing) * 40)}.ui\:w-64{width:calc(var(--ui-spacing) * 64)}.ui\:w-72{width:calc(var(--ui-spacing) * 72)}.ui\:w-88{width:calc(var(--ui-spacing) * 88)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[50px\]{width:50px}.ui\:w-\[80\%\]{width:80%}.ui\:w-\[100px\]{width:100px}.ui\:w-auto{width:auto}.ui\:w-fit{width:fit-content}.ui\:w-fit\!{width:fit-content!important}.ui\:w-full{width:100%}.ui\:w-full\!{width:100%!important}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-2xl{max-width:var(--ui-container-2xl)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing) * 6)}.ui\:max-w-7xl{max-width:var(--ui-container-7xl)}.ui\:max-w-80{max-width:calc(var(--ui-spacing) * 80)}.ui\:max-w-\[16rem\]{max-width:16rem}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[200px\]{max-width:200px}.ui\:max-w-\[300px\]{max-width:300px}.ui\:max-w-\[320px\]{max-width:320px}.ui\:max-w-\[1200px\]{max-width:1200px}.ui\:max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.ui\:max-w-full{max-width:100%}.ui\:max-w-max{max-width:max-content}.ui\:max-w-none{max-width:none}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:max-w-xl{max-width:var(--ui-container-xl)}.ui\:min-w-\(--bits-select-anchor-width\){min-width:var(--bits-select-anchor-width)}.ui\:min-w-0{min-width:calc(var(--ui-spacing) * 0)}.ui\:min-w-5{min-width:calc(var(--ui-spacing) * 5)}.ui\:min-w-8{min-width:calc(var(--ui-spacing) * 8)}.ui\:min-w-9{min-width:calc(var(--ui-spacing) * 9)}.ui\:min-w-10{min-width:calc(var(--ui-spacing) * 10)}.ui\:min-w-18{min-width:calc(var(--ui-spacing) * 18)}.ui\:min-w-32{min-width:calc(var(--ui-spacing) * 32)}.ui\:min-w-48{min-width:calc(var(--ui-spacing) * 48)}.ui\:min-w-\[5rem\]{min-width:5rem}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:min-w-full{min-width:100%}.ui\:flex-1{flex:1}.ui\:shrink{flex-shrink:1}.ui\:shrink-0{flex-shrink:0}.ui\:basis-full{flex-basis:100%}.ui\:origin-\(--bits-dropdown-menu-content-transform-origin\){transform-origin:var(--bits-dropdown-menu-content-transform-origin)}.ui\:origin-\(--bits-menubar-content-transform-origin\){transform-origin:var(--bits-menubar-content-transform-origin)}.ui\:origin-\(--bits-popover-content-transform-origin\){transform-origin:var(--bits-popover-content-transform-origin)}.ui\:origin-\(--bits-select-content-transform-origin\){transform-origin:var(--bits-select-content-transform-origin)}.ui\:origin-\(--bits-tooltip-content-transform-origin\){transform-origin:var(--bits-tooltip-content-transform-origin)}.ui\:origin-center{transform-origin:50%}.ui\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-x-4{--tw-translate-x:calc(var(--ui-spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-y-0\.5{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-y-4{--tw-translate-y:calc(var(--ui-spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:rotate-0{rotate:none}.ui\:rotate-5{rotate:5deg}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.ui\:animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:animate-meteor{animation:5s linear infinite meteor}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-default\!{cursor:default!important}.ui\:cursor-grab{cursor:grab}.ui\:cursor-not-allowed{cursor:not-allowed}.ui\:cursor-pointer{cursor:pointer}.ui\:cursor-text{cursor:text}.ui\:resize-none{resize:none}.ui\:scroll-my-1{scroll-margin-block:calc(var(--ui-spacing) * 1)}.ui\:scroll-py-1{scroll-padding-block:calc(var(--ui-spacing) * 1)}.ui\:list-disc{list-style-type:disc}.ui\:list-none{list-style-type:none}.ui\:auto-rows-min{grid-auto-rows:min-content}.ui\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.ui\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ui\:grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.ui\:grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.ui\:flex-col{flex-direction:column}.ui\:flex-col-reverse{flex-direction:column-reverse}.ui\:flex-row{flex-direction:row}.ui\:flex-nowrap\!{flex-wrap:nowrap!important}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-items-center{place-items:center}.ui\:items-baseline{align-items:baseline}.ui\:items-center{align-items:center}.ui\:items-end{align-items:flex-end}.ui\:items-start{align-items:flex-start}.ui\:items-stretch{align-items:stretch}.ui\:justify-between{justify-content:space-between}.ui\:justify-center{justify-content:center}.ui\:justify-end{justify-content:flex-end}.ui\:justify-start{justify-content:flex-start}.ui\:justify-start\!{justify-content:flex-start!important}.ui\:justify-items-center{justify-items:center}.ui\:justify-items-start{justify-items:start}.ui\:gap-0{gap:calc(var(--ui-spacing) * 0)}.ui\:gap-0\.5{gap:calc(var(--ui-spacing) * .5)}.ui\:gap-1{gap:calc(var(--ui-spacing) * 1)}.ui\:gap-1\.5{gap:calc(var(--ui-spacing) * 1.5)}.ui\:gap-2{gap:calc(var(--ui-spacing) * 2)}.ui\:gap-2\.5{gap:calc(var(--ui-spacing) * 2.5)}.ui\:gap-3{gap:calc(var(--ui-spacing) * 3)}.ui\:gap-4{gap:calc(var(--ui-spacing) * 4)}.ui\:gap-6{gap:calc(var(--ui-spacing) * 6)}.ui\:gap-7{gap:calc(var(--ui-spacing) * 7)}.ui\:gap-8{gap:calc(var(--ui-spacing) * 8)}.ui\:gap-16{gap:calc(var(--ui-spacing) * 16)}:where(.ui\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.ui\:gap-x-6{column-gap:calc(var(--ui-spacing) * 6)}:where(.ui\:space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--ui-spacing) * 8) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--ui-spacing) * 8) * calc(1 - var(--tw-space-x-reverse)))}.ui\:gap-y-0\.5{row-gap:calc(var(--ui-spacing) * .5)}.ui\:gap-y-2{row-gap:calc(var(--ui-spacing) * 2)}.ui\:self-center{align-self:center}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui\:overflow-auto{overflow:auto}.ui\:overflow-hidden{overflow:hidden}.ui\:overflow-visible{overflow:visible}.ui\:overflow-x-auto{overflow-x:auto}.ui\:overflow-x-hidden{overflow-x:hidden}.ui\:overflow-y-auto{overflow-y:auto}.ui\:overflow-y-hidden{overflow-y:hidden}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-2xl{border-radius:var(--ui-radius-2xl)}.ui\:rounded-3xl{border-radius:var(--ui-radius-3xl)}.ui\:rounded-\[2px\]{border-radius:2px}.ui\:rounded-\[4px\]{border-radius:4px}.ui\:rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.ui\:rounded-full{border-radius:3.40282e38px}.ui\:rounded-lg{border-radius:var(--radius)}.ui\:rounded-md{border-radius:calc(var(--radius) - 2px)}.ui\:rounded-md\!{border-radius:calc(var(--radius) - 2px)!important}.ui\:rounded-none{border-radius:0}.ui\:rounded-sm{border-radius:calc(var(--radius) - 4px)}.ui\:rounded-xl{border-radius:calc(var(--radius) + 4px)}.ui\:rounded-xs{border-radius:var(--ui-radius-xs)}.ui\:border{border-style:var(--tw-border-style);border-width:1px}.ui\:border-0{border-style:var(--tw-border-style);border-width:0}.ui\:border-2{border-style:var(--tw-border-style);border-width:2px}.ui\:border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.ui\:border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.ui\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-none{--tw-border-style:none;border-style:none}.ui\:border-solid{--tw-border-style:solid;border-style:solid}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-amber-200{border-color:var(--ui-color-amber-200)}.ui\:border-amber-400{border-color:var(--ui-color-amber-400)}.ui\:border-background\/40{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:border-background\/40{border-color:color-mix(in oklab, var(--background) 40%, transparent)}}.ui\:border-border,.ui\:border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.ui\:border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:border-border\/60{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/60{border-color:color-mix(in oklab, var(--border) 60%, transparent)}}.ui\:border-emerald-300{border-color:var(--ui-color-emerald-300)}.ui\:border-emerald-400{border-color:var(--ui-color-emerald-400)}.ui\:border-emerald-500{border-color:var(--ui-color-emerald-500)}.ui\:border-input{border-color:var(--input)}.ui\:border-muted{border-color:var(--muted)}.ui\:border-muted-foreground,.ui\:border-muted-foreground\/40{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:border-muted-foreground\/40{border-color:color-mix(in oklab, var(--muted-foreground) 40%, transparent)}}.ui\:border-primary,.ui\:border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/30{border-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-sky-200{border-color:var(--ui-color-sky-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-l-foreground{border-left-color:var(--foreground)}.ui\:border-l-transparent{border-left-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-amber-50,.ui\:bg-amber-50\/30{background-color:var(--ui-color-amber-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-amber-50\/30{background-color:color-mix(in oklab, var(--ui-color-amber-50) 30%, transparent)}}.ui\:bg-amber-600{background-color:var(--ui-color-amber-600)}.ui\:bg-background,.ui\:bg-background\/50{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/50{background-color:color-mix(in oklab, var(--background) 50%, transparent)}}.ui\:bg-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.ui\:bg-black\/50{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-black\/50{background-color:color-mix(in oklab, var(--ui-color-black) 50%, transparent)}}.ui\:bg-border{background-color:var(--border)}.ui\:bg-card{background-color:var(--card)}.ui\:bg-destructive{background-color:var(--destructive)}.ui\:bg-emerald-50\/20{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/20{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 20%, transparent)}}.ui\:bg-emerald-50\/30{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/30{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 30%, transparent)}}.ui\:bg-emerald-50\/40{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/40{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 40%, transparent)}}.ui\:bg-emerald-600{background-color:var(--ui-color-emerald-600)}.ui\:bg-foreground{background-color:var(--foreground)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.ui\:bg-green-500{background-color:var(--ui-color-green-500)}.ui\:bg-inherit{background-color:inherit}.ui\:bg-input{background-color:var(--input)}.ui\:bg-muted,.ui\:bg-muted\/10{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/10{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}.ui\:bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.ui\:bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:bg-popover{background-color:var(--popover)}.ui\:bg-primary{background-color:var(--primary)}.ui\:bg-primary-foreground{background-color:var(--primary-foreground)}.ui\:bg-primary\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.ui\:bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/20{background-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.ui\:bg-primary\/60{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/60{background-color:color-mix(in oklab, var(--primary) 60%, transparent)}}.ui\:bg-red-50\/40{background-color:var(--ui-color-red-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-red-50\/40{background-color:color-mix(in oklab, var(--ui-color-red-50) 40%, transparent)}}.ui\:bg-red-500{background-color:var(--ui-color-red-500)}.ui\:bg-secondary,.ui\:bg-secondary\/50{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-secondary\/50{background-color:color-mix(in oklab, var(--secondary) 50%, transparent)}}.ui\:bg-sidebar{background-color:var(--sidebar)}.ui\:bg-sidebar-border{background-color:var(--sidebar-border)}.ui\:bg-sky-50{background-color:var(--ui-color-sky-50)}.ui\:bg-slate-500{background-color:var(--ui-color-slate-500)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-r{--tw-gradient-position:to right in oklab}}.ui\:bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-t{--tw-gradient-position:to top in oklab}}.ui\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:from-background{--tw-gradient-from:var(--background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-pink-500{--tw-gradient-from:var(--ui-color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-slate-500{--tw-gradient-from:var(--ui-color-slate-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:via-blue-600\/30{--tw-gradient-via:var(--ui-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.ui\:via-blue-600\/30{--tw-gradient-via:color-mix(in oklab, var(--ui-color-blue-600) 30%, transparent)}}.ui\:via-blue-600\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-orange-500{--tw-gradient-to:var(--ui-color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-amber-400{fill:var(--ui-color-amber-400)}.ui\:fill-current{fill:currentColor}.ui\:fill-none{fill:none}.ui\:fill-primary{fill:var(--primary)}.ui\:object-cover{object-fit:cover}.ui\:p-0{padding:calc(var(--ui-spacing) * 0)}.ui\:p-0\.5{padding:calc(var(--ui-spacing) * .5)}.ui\:p-1{padding:calc(var(--ui-spacing) * 1)}.ui\:p-1\!{padding:calc(var(--ui-spacing) * 1)!important}.ui\:p-2{padding:calc(var(--ui-spacing) * 2)}.ui\:p-3{padding:calc(var(--ui-spacing) * 3)}.ui\:p-3\!{padding:calc(var(--ui-spacing) * 3)!important}.ui\:p-4{padding:calc(var(--ui-spacing) * 4)}.ui\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:p-8{padding:calc(var(--ui-spacing) * 8)}.ui\:p-\[3px\]{padding:3px}.ui\:px-1{padding-inline:calc(var(--ui-spacing) * 1)}.ui\:px-1\.5{padding-inline:calc(var(--ui-spacing) * 1.5)}.ui\:px-2{padding-inline:calc(var(--ui-spacing) * 2)}.ui\:px-2\.5{padding-inline:calc(var(--ui-spacing) * 2.5)}.ui\:px-3{padding-inline:calc(var(--ui-spacing) * 3)}.ui\:px-4{padding-inline:calc(var(--ui-spacing) * 4)}.ui\:px-6{padding-inline:calc(var(--ui-spacing) * 6)}.ui\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:py-0\.5{padding-block:calc(var(--ui-spacing) * .5)}.ui\:py-1{padding-block:calc(var(--ui-spacing) * 1)}.ui\:py-1\.5{padding-block:calc(var(--ui-spacing) * 1.5)}.ui\:py-2{padding-block:calc(var(--ui-spacing) * 2)}.ui\:py-3{padding-block:calc(var(--ui-spacing) * 3)}.ui\:py-4{padding-block:calc(var(--ui-spacing) * 4)}.ui\:py-5{padding-block:calc(var(--ui-spacing) * 5)}.ui\:py-6{padding-block:calc(var(--ui-spacing) * 6)}.ui\:py-10{padding-block:calc(var(--ui-spacing) * 10)}.ui\:py-12{padding-block:calc(var(--ui-spacing) * 12)}.ui\:py-16{padding-block:calc(var(--ui-spacing) * 16)}.ui\:py-20{padding-block:calc(var(--ui-spacing) * 20)}.ui\:py-24{padding-block:calc(var(--ui-spacing) * 24)}.ui\:ps-3{padding-inline-start:calc(var(--ui-spacing) * 3)}.ui\:pe-3{padding-inline-end:calc(var(--ui-spacing) * 3)}.ui\:pt-0{padding-top:calc(var(--ui-spacing) * 0)}.ui\:pt-1\.5{padding-top:calc(var(--ui-spacing) * 1.5)}.ui\:pt-3{padding-top:calc(var(--ui-spacing) * 3)}.ui\:pt-3\!{padding-top:calc(var(--ui-spacing) * 3)!important}.ui\:pt-4{padding-top:calc(var(--ui-spacing) * 4)}.ui\:pr-1{padding-right:calc(var(--ui-spacing) * 1)}.ui\:pr-2{padding-right:calc(var(--ui-spacing) * 2)}.ui\:pr-8{padding-right:calc(var(--ui-spacing) * 8)}.ui\:pr-9{padding-right:calc(var(--ui-spacing) * 9)}.ui\:pr-18{padding-right:calc(var(--ui-spacing) * 18)}.ui\:pb-2{padding-bottom:calc(var(--ui-spacing) * 2)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing) * 4)}.ui\:pb-16{padding-bottom:calc(var(--ui-spacing) * 16)}.ui\:pl-2{padding-left:calc(var(--ui-spacing) * 2)}.ui\:pl-3{padding-left:calc(var(--ui-spacing) * 3)}.ui\:pl-8{padding-left:calc(var(--ui-spacing) * 8)}.ui\:text-center{text-align:center}.ui\:text-left{text-align:left}.ui\:text-right{text-align:right}.ui\:align-middle{vertical-align:middle}.ui\:font-mono{font-family:var(--ui-font-mono)}.ui\:font-sans{font-family:var(--ui-font-sans)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-base\!{font-size:var(--ui-text-base)!important;line-height:var(--tw-leading,var(--ui-text-base--line-height))!important}.ui\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:text-sm\/relaxed{font-size:var(--ui-text-sm);line-height:var(--ui-leading-relaxed)}.ui\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:text-\[10px\]{font-size:10px}.ui\:text-\[13px\]{font-size:13px}.ui\:leading-7{--tw-leading:calc(var(--ui-spacing) * 7);line-height:calc(var(--ui-spacing) * 7)}.ui\:leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.ui\:leading-none{--tw-leading:1;line-height:1}.ui\:leading-normal{--tw-leading:var(--ui-leading-normal);line-height:var(--ui-leading-normal)}.ui\:leading-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-black{--tw-font-weight:var(--ui-font-weight-black);font-weight:var(--ui-font-weight-black)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-light{--tw-font-weight:var(--ui-font-weight-light);font-weight:var(--ui-font-weight-light)}.ui\:font-medium{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:font-normal{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:font-semibold{--tw-font-weight:var(--ui-font-weight-semibold);font-weight:var(--ui-font-weight-semibold)}.ui\:tracking-tight{--tw-tracking:var(--ui-tracking-tight);letter-spacing:var(--ui-tracking-tight)}.ui\:tracking-tighter{--tw-tracking:var(--ui-tracking-tighter);letter-spacing:var(--ui-tracking-tighter)}.ui\:tracking-wide{--tw-tracking:var(--ui-tracking-wide);letter-spacing:var(--ui-tracking-wide)}.ui\:tracking-widest{--tw-tracking:var(--ui-tracking-widest);letter-spacing:var(--ui-tracking-widest)}.ui\:text-balance{text-wrap:balance}.ui\:break-words{overflow-wrap:break-word}.ui\:break-all{word-break:break-all}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-amber-200{color:var(--ui-color-amber-200)}.ui\:text-amber-500{color:var(--ui-color-amber-500)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-amber-900{color:var(--ui-color-amber-900)}.ui\:text-background,.ui\:text-background\/60{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/60{color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:text-background\/70{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/70{color:color-mix(in oklab, var(--background) 70%, transparent)}}.ui\:text-background\/80{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/80{color:color-mix(in oklab, var(--background) 80%, transparent)}}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-emerald-600{color:var(--ui-color-emerald-600)}.ui\:text-foreground,.ui\:text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.ui\:text-foreground\/72{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/72{color:color-mix(in oklab, var(--foreground) 72%, transparent)}}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground,.ui\:text-muted-foreground\/75{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/75{color:color-mix(in oklab, var(--muted-foreground) 75%, transparent)}}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-red-600{color:var(--ui-color-red-600)}.ui\:text-red-700{color:var(--ui-color-red-700)}.ui\:text-secondary-foreground{color:var(--secondary-foreground)}.ui\:text-sidebar-foreground,.ui\:text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-sidebar-foreground\/70{color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent)}}.ui\:text-sky-900{color:var(--ui-color-sky-900)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\!{color:var(--ui-color-white)!important}.ui\:capitalize{text-transform:capitalize}.ui\:uppercase{text-transform:uppercase}.ui\:no-underline{text-decoration-line:none}.ui\:underline{text-decoration-line:underline}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-10{opacity:.1}.ui\:opacity-40{opacity:.4}.ui\:opacity-50{opacity:.5}.ui\:opacity-70{opacity:.7}.ui\:opacity-90{opacity:.9}.ui\:opacity-100{opacity:1}.ui\:opacity-\[0\.06\]{opacity:.06}.ui\:opacity-\[0\.08\]{opacity:.08}.ui\:opacity-\[0\.15\]{opacity:.15}.ui\:shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-2xs{--tw-shadow:0 1px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-\[0_0_0_1px_\#ffffff10\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffff10);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-\[0_0_0_1px_var\(--sidebar-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:shadow-primary\/20{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:shadow-primary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-border\/50{--tw-ring-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:ring-border\/50{--tw-ring-color:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:ring-sidebar-ring{--tw-ring-color:var(--sidebar-ring)}.ui\:ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:ring-offset-background{--tw-ring-offset-color:var(--background)}.ui\:outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:outline-hidden{outline-offset:2px;outline:2px solid #0000}}.ui\:brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:drop-shadow-none{--tw-drop-shadow: ;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--ui-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.ui\:backdrop-blur-xl{--tw-backdrop-blur:blur(var(--ui-blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.ui\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-none{transition-property:none}.ui\:duration-100{--tw-duration:.1s;transition-duration:.1s}.ui\:duration-200{--tw-duration:.2s;transition-duration:.2s}.ui\:duration-300{--tw-duration:.3s;transition-duration:.3s}.ui\:duration-500{--tw-duration:.5s;transition-duration:.5s}.ui\:ease-in-out{--tw-ease:var(--ui-ease-in-out);transition-timing-function:var(--ui-ease-in-out)}.ui\:ease-linear{--tw-ease:linear;transition-timing-function:linear}.ui\:fade-in-0{--tw-enter-opacity:0}.ui\:outline-none{--tw-outline-style:none;outline-style:none}.ui\:select-none{-webkit-user-select:none;user-select:none}.ui\:zoom-in-95{--tw-enter-scale:.95}.ui\:ring-inset{--tw-ring-inset:inset}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-focus-within\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.ui\:group-hover\:scale-\[1\.02\]:is(:where(.ui\:group):hover *){scale:1.02}.ui\:group-hover\:bg-primary:is(:where(.ui\:group):hover *){background-color:var(--primary)}.ui\:group-hover\:text-primary-foreground:is(:where(.ui\:group):hover *){color:var(--primary-foreground)}.ui\:group-hover\:opacity-100:is(:where(.ui\:group):hover *),.ui\:group-hover\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):hover *){opacity:1}}.ui\:group-has-data-\[orientation\=horizontal\]\/field\:text-balance:is(:where(.ui\:group\/field):has([data-orientation=horizontal]) *){text-wrap:balance}.ui\:group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.ui\:group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--ui-spacing) * 8)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){align-self:flex-start}.ui\:group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-top:calc(var(--ui-spacing) * 2.5)}.ui\:group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-bottom:calc(var(--ui-spacing) * 2.5)}.ui\:group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.ui\:group)[data-collapsible=icon] *){margin-top:calc(var(--ui-spacing) * -8)}.ui\:group-data-\[collapsible\=icon\]\:hidden:is(:where(.ui\:group)[data-collapsible=icon] *){display:none}.ui\:group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.ui\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.ui\:group)[data-collapsible=icon] *){width:var(--sidebar-width-icon)}.ui\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + (calc(var(--ui-spacing) * 4)) + 2px)}.ui\:group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.ui\:group)[data-collapsible=icon] *){overflow:hidden}.ui\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing) * 0)!important}.ui\:group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing) * 2)!important}.ui\:group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.ui\:group)[data-collapsible=icon] *){opacity:0}.ui\:group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width) * -1)}.ui\:group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width) * -1)}.ui\:group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){width:calc(var(--ui-spacing) * 0)}.ui\:group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){--tw-translate-x:calc(var(--ui-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.ui\:group)[data-disabled=true] *){pointer-events:none}.ui\:group-data-\[disabled\=true\]\:opacity-50:is(:where(.ui\:group)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.ui\:group\/field)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.ui\:group\/input-group)[data-disabled=true] *){opacity:.5}.ui\:group-data-\[side\=left\]\:-right-4:is(:where(.ui\:group)[data-side=left] *){right:calc(var(--ui-spacing) * -4)}.ui\:group-data-\[side\=left\]\:border-r:is(:where(.ui\:group)[data-side=left] *){border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:group-data-\[side\=right\]\:left-0:is(:where(.ui\:group)[data-side=right] *){left:calc(var(--ui-spacing) * 0)}.ui\:group-data-\[side\=right\]\:rotate-180:is(:where(.ui\:group)[data-side=right] *){rotate:180deg}.ui\:group-data-\[side\=right\]\:border-l:is(:where(.ui\:group)[data-side=right] *){border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:group-data-\[variant\=floating\]\:rounded-lg:is(:where(.ui\:group)[data-variant=floating] *){border-radius:var(--radius)}.ui\:group-data-\[variant\=floating\]\:border:is(:where(.ui\:group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.ui\:group)[data-variant=floating] *){border-color:var(--sidebar-border)}.ui\:group-data-\[variant\=floating\]\:shadow-sm:is(:where(.ui\:group)[data-variant=floating] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:group-data-\[variant\=outline\]\/field-group\:-mb-2:is(:where(.ui\:group\/field-group)[data-variant=outline] *){margin-bottom:calc(var(--ui-spacing) * -2)}.ui\:group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.ui\:group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){top:100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){margin-top:calc(var(--ui-spacing) * 1.5)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){overflow:hidden}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-radius:calc(var(--radius) - 2px)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:border:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){background-color:var(--popover)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){color:var(--popover-foreground)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:shadow:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.ui\:peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.ui\:peer-disabled\:cursor-not-allowed:is(:where(.ui\:peer):disabled~*){cursor:not-allowed}.ui\:peer-disabled\:opacity-50:is(:where(.ui\:peer):disabled~*){opacity:.5}.ui\:peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.ui\:peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.ui\:peer\/menu-button)[data-size=default]~*){top:calc(var(--ui-spacing) * 1.5)}.ui\:peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.ui\:peer\/menu-button)[data-size=lg]~*){top:calc(var(--ui-spacing) * 2.5)}.ui\:peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.ui\:peer\/menu-button)[data-size=sm]~*){top:calc(var(--ui-spacing) * 1)}.ui\:selection\:bg-primary ::selection{background-color:var(--primary)}.ui\:selection\:bg-primary::selection{background-color:var(--primary)}.ui\:selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.ui\:selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.ui\:placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.ui\:after\:absolute:after{content:var(--tw-content);position:absolute}.ui\:after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--ui-spacing) * -2)}.ui\:after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--ui-spacing) * 0)}.ui\:after\:left-\[calc\(1\/2\*100\%-1px\)\]:after{content:var(--tw-content);left:calc(50% - 1px)}.ui\:after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.ui\:group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.ui\:last\:mt-0:last-child{margin-top:calc(var(--ui-spacing) * 0)}.ui\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.ui\:hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:hover\:cursor-pointer:hover{cursor:pointer}.ui\:hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.ui\:hover\:border-background\/60:hover{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:border-background\/60:hover{border-color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:hover\:border-border:hover{border-color:var(--border)}.ui\:hover\:border-primary:hover{border-color:var(--primary)}.ui\:hover\:bg-accent:hover,.ui\:hover\:bg-accent\/25:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-accent\/25:hover{background-color:color-mix(in oklab, var(--accent) 25%, transparent)}}.ui\:hover\:bg-amber-500\/10:hover{background-color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-amber-500\/10:hover{background-color:color-mix(in oklab, var(--ui-color-amber-500) 10%, transparent)}}.ui\:hover\:bg-background\/10:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-background\/10:hover{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:hover\:bg-muted:hover,.ui\:hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:hover\:bg-sidebar-accent:hover{background-color:var(--sidebar-accent)}.ui\:hover\:bg-transparent\!:hover{background-color:#0000!important}.ui\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.ui\:hover\:text-background:hover{color:var(--background)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-primary:hover{color:var(--primary)}.ui\:hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.ui\:hover\:underline:hover{text-decoration-line:underline}.ui\:hover\:opacity-100:hover{opacity:1}.ui\:hover\:shadow-2xs:hover{--tw-shadow:0 1px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:hover\:shadow-primary\/5:hover{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:shadow-primary\/5:hover{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.ui\:hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover:is(:where(.ui\:group)[data-collapsible=offcanvas] *){background-color:var(--sidebar)}.ui\:hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.ui\:focus\:bg-accent:focus{background-color:var(--accent)}.ui\:focus\:text-accent-foreground:focus{color:var(--accent-foreground)}.ui\:focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.ui\:focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.ui\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.ui\:focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.ui\:focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:focus-visible\:ring-ring:focus-visible,.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.ui\:focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui\:focus-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.ui\:focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.ui\:focus-visible\:outline-ring:focus-visible{outline-color:var(--ring)}.ui\:active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.ui\:active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.ui\:disabled\:pointer-events-none:disabled{pointer-events:none}.ui\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.ui\:disabled\:opacity-50:disabled{opacity:.5}:where([data-side=left]) .ui\:in-data-\[side\=left\]\:cursor-w-resize{cursor:w-resize}:where([data-side=right]) .ui\:in-data-\[side\=right\]\:cursor-e-resize{cursor:e-resize}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:color-mix(in oklab, var(--background) 20%, transparent)}}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:text-background{color:var(--background)}.ui\:has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.ui\:has-data-\[state\=checked\]\:border-primary:has([data-state=checked]){border-color:var(--primary)}.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot=input-group-control]:focus-visible){border-color:var(--ring)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot=input-group-control]:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid=true]){border-color:var(--destructive)}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.ui\:has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.ui\:has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.ui\:has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.ui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(>[data-slot=checkbox-group]){gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]){align-items:flex-start}.ui\:has-\[\>\[data-slot\=field\]\]\:w-full:has(>[data-slot=field]){width:100%}.ui\:has-\[\>\[data-slot\=field\]\]\:flex-col:has(>[data-slot=field]){flex-direction:column}.ui\:has-\[\>\[data-slot\=field\]\]\:rounded-md:has(>[data-slot=field]){border-radius:calc(var(--radius) - 2px)}.ui\:has-\[\>\[data-slot\=field\]\]\:border:has(>[data-slot=field]){border-style:var(--tw-border-style);border-width:1px}.ui\:has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(>[data-slot=radio-group]){gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>button\]\:ms-\[-0\.45rem\]:has(>button){margin-inline-start:-.45rem}.ui\:has-\[\>button\]\:me-\[-0\.45rem\]:has(>button){margin-inline-end:-.45rem}.ui\:has-\[\>kbd\]\:ms-\[-0\.35rem\]:has(>kbd){margin-inline-start:-.35rem}.ui\:has-\[\>kbd\]\:me-\[-0\.35rem\]:has(>kbd){margin-inline-end:-.35rem}.ui\:has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.ui\:has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--ui-spacing) * 0)}.ui\:has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--ui-spacing) * 2.5)}.ui\:has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--ui-spacing) * 4)}.ui\:has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.ui\:aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.ui\:aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.ui\:aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.ui\:aria-selected\:bg-accent[aria-selected=true]{background-color:var(--accent)}.ui\:aria-selected\:text-accent-foreground[aria-selected=true]{color:var(--accent-foreground)}:is(.ui\:\*\*\:data-command-group\:px-2 *)[data-command-group]{padding-inline:calc(var(--ui-spacing) * 2)}:is(.ui\:\*\*\:data-command-input\:h-12 *)[data-command-input]{height:calc(var(--ui-spacing) * 12)}:is(.ui\:\*\*\:data-command-item\:px-2 *)[data-command-item]{padding-inline:calc(var(--ui-spacing) * 2)}:is(.ui\:\*\*\:data-command-item\:py-3 *)[data-command-item]{padding-block:calc(var(--ui-spacing) * 3)}.ui\:data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.ui\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.ui\:data-disabled\:opacity-50[data-disabled]{opacity:.5}.ui\:data-highlighted\:bg-accent[data-highlighted]{background-color:var(--accent)}.ui\:data-highlighted\:text-accent-foreground[data-highlighted]{color:var(--accent-foreground)}.ui\:data-inset\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing) * 8)}.ui\:data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.ui\:data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.ui\:data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:data-\[active\=true\]\:text-accent-foreground[data-active=true]{color:var(--accent-foreground)}.ui\:data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}@media (hover:hover){.ui\:data-\[active\=true\]\:hover\:bg-accent[data-active=true]:hover{background-color:var(--accent)}}.ui\:data-\[active\=true\]\:focus\:bg-accent[data-active=true]:focus{background-color:var(--accent)}.ui\:data-\[current\=true\]\:bg-muted[data-current=true]{background-color:var(--muted)}.ui\:data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.ui\:data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.ui\:data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing) * 8)}.ui\:data-\[invalid\=true\]\:text-destructive[data-invalid=true]{color:var(--destructive)}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(rtl),[dir=rtl]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity:0}.ui\:data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{--tw-exit-opacity:0}.ui\:data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.ui\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.ui\:data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}.ui\:data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.ui\:data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.ui\:data-\[side\=bottom\]\:-translate-x-1\/2[data-side=bottom]{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\][data-side=bottom]{--tw-translate-y:calc(calc(-50% + 1px) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:calc(var(--ui-spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\][data-side=left]{--tw-translate-y:calc(calc(50% - 3px) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:calc(var(--ui-spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\][data-side=right]{--tw-translate-x:calc(50% + 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-y-1\/2[data-side=right]{--tw-translate-y:calc(1 / 2 * 100%);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=top\]\:translate-x-1\/2[data-side=top]{--tw-translate-x:calc(1 / 2 * 100%);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\][data-side=top]{--tw-translate-y:calc(-50% + 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.ui\:data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--ui-spacing) * 9)}.ui\:data-\[size\=sm\]\:h-8[data-size=sm]{height:calc(var(--ui-spacing) * 8)}.ui\:data-\[slot\=checkbox-group\]\:gap-3[data-slot=checkbox-group]{gap:calc(var(--ui-spacing) * 3)}:is(.ui\:\*\:data-\[slot\=field\]\:p-4>*)[data-slot=field]{padding:calc(var(--ui-spacing) * 4)}:is(.ui\:\*\:data-\[slot\=field-group\]\:gap-4>*)[data-slot=field-group]{gap:calc(var(--ui-spacing) * 4)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot=navigation-menu-link]:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot=navigation-menu-link]:focus{--tw-outline-style:none;outline-style:none}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:line-clamp-1 *)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:flex *)[data-slot=select-value]{display:flex}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:items-center *)[data-slot=select-value]{align-items:center}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:gap-2 *)[data-slot=select-value]{gap:calc(var(--ui-spacing) * 2)}.ui\:data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.ui\:data-\[state\=active\]\:shadow-sm[data-state=active]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--primary)}.ui\:data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.ui\:data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.ui\:data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.ui\:data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.ui\:data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.ui\:data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.ui\:data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.ui\:data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity:0}.ui\:data-\[state\=off\]\:text-muted-foreground[data-state=off]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=off\]\:text-accent-foreground:hover[data-state=off]{color:var(--accent-foreground)}}.ui\:data-\[state\=on\]\:bg-accent[data-state=on]{background-color:var(--accent)}.ui\:data-\[state\=on\]\:bg-transparent[data-state=on]{background-color:#0000}.ui\:data-\[state\=on\]\:text-accent-foreground[data-state=on]{color:var(--accent-foreground)}.ui\:data-\[state\=on\]\:text-muted-foreground[data-state=on]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=on\]\:text-accent-foreground:hover[data-state=on]{color:var(--accent-foreground)}}.ui\:data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.ui\:data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.ui\:data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.ui\:data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}.ui\:data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.ui\:data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:.9}.ui\:data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.ui\:data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.ui\:data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.ui\:data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.ui\:data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-scale:.95}@media (hover:hover){.ui\:data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.ui\:data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.ui\:data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.ui\:data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--ui-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:var(--input)}.ui\:data-\[state\=visible\]\:animate-in[data-state=visible]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity:0}.ui\:data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.ui\:data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.ui\:data-\[variant\=destructive\]\:data-highlighted\:text-destructive[data-variant=destructive][data-highlighted]{color:var(--destructive)}.ui\:data-\[variant\=label\]\:text-sm[data-variant=label]{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:data-\[variant\=legend\]\:text-base[data-variant=legend]{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--ui-spacing) * 24)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=left\]\:start-0[data-vaul-drawer-direction=left]{inset-inline-start:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.ui\:data-\[vaul-drawer-direction\=left\]\:border-e[data-vaul-drawer-direction=left]{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.ui\:data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=right\]\:end-0[data-vaul-drawer-direction=right]{inset-inline-end:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.ui\:data-\[vaul-drawer-direction\=right\]\:border-s[data-vaul-drawer-direction=right]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.ui\:data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:calc(var(--ui-spacing) * 0)}.ui\:data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--ui-spacing) * 24)}.ui\:data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:nth-last-2\:-mt-1:nth-last-child(2){margin-top:calc(var(--ui-spacing) * -1)}@media (min-width:40rem){.ui\:sm\:flex{display:flex}.ui\:sm\:w-48{width:calc(var(--ui-spacing) * 48)}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:sm\:flex-row{flex-direction:row}.ui\:sm\:justify-end{justify-content:flex-end}.ui\:sm\:gap-2\.5{gap:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:sm\:py-32{padding-block:calc(var(--ui-spacing) * 32)}.ui\:sm\:pr-2\.5{padding-right:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:pl-2\.5{padding-left:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.ui\:data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--ui-container-sm)}}@media (min-width:48rem){.ui\:md\:block{display:block}.ui\:md\:flex{display:flex}.ui\:md\:w-52{width:calc(var(--ui-spacing) * 52)}.ui\:md\:w-full{width:100%}.ui\:md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:md\:flex-col{flex-direction:column}.ui\:md\:flex-row{flex-direction:row}.ui\:md\:overflow-x-visible{overflow-x:visible}.ui\:md\:overflow-y-visible{overflow-y:visible}.ui\:md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:md\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:md\:p-12{padding:calc(var(--ui-spacing) * 12)}.ui\:md\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:md\:pb-24{padding-bottom:calc(var(--ui-spacing) * 24)}.ui\:md\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.ui\:md\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:md\:opacity-0{opacity:0}.ui\:md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.ui\:peer)[data-variant=inset]~*){margin:calc(var(--ui-spacing) * 2)}.ui\:md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.ui\:peer)[data-variant=inset]~*){margin-left:calc(var(--ui-spacing) * 0)}.ui\:md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.ui\:peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.ui\:md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.ui\:peer)[data-variant=inset]~*){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ui\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.ui\:peer)[data-variant=inset]~*):is(:where(.ui\:peer)[data-state=collapsed]~*){margin-left:calc(var(--ui-spacing) * 2)}.ui\:md\:after\:hidden:after{content:var(--tw-content);display:none}}@media (min-width:64rem){.ui\:lg\:block{display:block}.ui\:lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui\:lg\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:lg\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:lg\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.ui\:lg\:text-7xl{font-size:var(--ui-text-7xl);line-height:var(--tw-leading,var(--ui-text-7xl--line-height))}}.ui\:dark\:scale-0:where(.dark,.dark *){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:dark\:scale-100:where(.dark,.dark *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.ui\:dark\:-rotate-90:where(.dark,.dark *){rotate:-90deg}.ui\:dark\:rotate-0:where(.dark,.dark *){rotate:none}.ui\:dark\:border-amber-900:where(.dark,.dark *){border-color:var(--ui-color-amber-900)}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:border-sky-900:where(.dark,.dark *){border-color:var(--ui-color-sky-900)}.ui\:dark\:border-slate-800:where(.dark,.dark *){border-color:var(--ui-color-slate-800)}.ui\:dark\:bg-amber-500:where(.dark,.dark *){background-color:var(--ui-color-amber-500)}.ui\:dark\:bg-amber-950:where(.dark,.dark *){background-color:var(--ui-color-amber-950)}.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:color-mix(in oklab, var(--destructive) 60%, transparent)}}.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:color-mix(in oklab, var(--destructive) 70%, transparent)}}.ui\:dark\:bg-emerald-500:where(.dark,.dark *){background-color:var(--ui-color-emerald-500)}.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:color-mix(in oklab, var(--input) 30%, transparent)}}.ui\:dark\:bg-sky-950:where(.dark,.dark *){background-color:var(--ui-color-sky-950)}.ui\:dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--ui-color-slate-950)}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:fill-amber-400:where(.dark,.dark *){fill:var(--ui-color-amber-400)}.ui\:dark\:text-amber-50:where(.dark,.dark *){color:var(--ui-color-amber-50)}.ui\:dark\:text-amber-300:where(.dark,.dark *){color:var(--ui-color-amber-300)}.ui\:dark\:text-amber-400:where(.dark,.dark *){color:var(--ui-color-amber-400)}.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:color-mix(in oklab, var(--ui-color-amber-500) 40%, transparent)}}.ui\:dark\:text-amber-950:where(.dark,.dark *){color:var(--ui-color-amber-950)}.ui\:dark\:text-emerald-950:where(.dark,.dark *){color:var(--ui-color-emerald-950)}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}.ui\:dark\:text-sky-50:where(.dark,.dark *){color:var(--ui-color-sky-50)}.ui\:dark\:text-white:where(.dark,.dark *){color:var(--ui-color-white)}@media (hover:hover){.ui\:dark\:hover\:border-input:where(.dark,.dark *):hover{border-color:var(--input)}.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--input) 50%, transparent)}}}.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.ui\:dark\:data-\[state\=active\]\:border-input:where(.dark,.dark *)[data-state=active]{border-color:var(--input)}.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:color-mix(in oklab, var(--input) 30%, transparent)}}.ui\:dark\:data-\[state\=active\]\:text-foreground:where(.dark,.dark *)[data-state=active]{color:var(--foreground)}.ui\:dark\:data-\[state\=checked\]\:bg-primary:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary)}.ui\:dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary-foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-foreground:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:color-mix(in oklab, var(--input) 80%, transparent)}}.ui\:\[\&_\.lc-area-path\]\:opacity-100 .lc-area-path{opacity:1}.ui\:\[\&_\.lc-axis-tick\]\:stroke-0 .lc-axis-tick{stroke-width:0}.ui\:\[\&_\.lc-axis-tick-label\]\:fill-muted-foreground .lc-axis-tick-label{fill:var(--muted-foreground)}.ui\:\[\&_\.lc-axis-tick-label\]\:font-normal .lc-axis-tick-label{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:\[\&_\.lc-grid-x-radial-circle\]\:stroke-border .lc-grid-x-radial-circle,.ui\:\[\&_\.lc-grid-x-radial-line\]\:stroke-border .lc-grid-x-radial-line,.ui\:\[\&_\.lc-grid-y-radial-circle\]\:stroke-border .lc-grid-y-radial-circle,.ui\:\[\&_\.lc-grid-y-radial-line\]\:stroke-border .lc-grid-y-radial-line{stroke:var(--border)}.ui\:\[\&_\.lc-highlight-line\]\:stroke-0 .lc-highlight-line{stroke-width:0}.ui\:\[\&_\.lc-highlight-line\]\:opacity-100 .lc-highlight-line,.ui\:\[\&_\.lc-highlight-point\]\:opacity-100 .lc-highlight-point{opacity:1}.ui\:\[\&_\.lc-labels-text\:not\(\[fill\]\)\]\:fill-foreground .lc-labels-text:not([fill]){fill:var(--foreground)}.ui\:\[\&_\.lc-layout-svg-g\]\:fill-transparent .lc-layout-svg-g{fill:#0000}.ui\:\[\&_\.lc-legend-swatch\]\:size-2\.5 .lc-legend-swatch{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&_\.lc-legend-swatch\]\:rounded-\[2px\] .lc-legend-swatch{border-radius:2px}.ui\:\[\&_\.lc-legend-swatch-button\]\:items-center .lc-legend-swatch-button{align-items:center}.ui\:\[\&_\.lc-legend-swatch-button\]\:gap-1\.5 .lc-legend-swatch-button{gap:calc(var(--ui-spacing) * 1.5)}.ui\:\[\&_\.lc-legend-swatch-group\]\:items-center .lc-legend-swatch-group{align-items:center}.ui\:\[\&_\.lc-legend-swatch-group\]\:gap-4 .lc-legend-swatch-group{gap:calc(var(--ui-spacing) * 4)}.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:\[\&_\.lc-root-container\]\:w-full .lc-root-container{width:100%}.ui\:\[\&_\.lc-rule-x-line\:not\(\.lc-grid-x-rule\)\]\:stroke-0 .lc-rule-x-line:not(.lc-grid-x-rule),.ui\:\[\&_\.lc-rule-y-line\:not\(\.lc-grid-y-rule\)\]\:stroke-0 .lc-rule-y-line:not(.lc-grid-y-rule){stroke-width:0}.ui\:\[\&_\.lc-spline-path\]\:opacity-100 .lc-spline-path{opacity:1}.ui\:\[\&_\.lc-text\]\:text-xs .lc-text{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:\[\&_\.lc-text-svg\]\:overflow-visible .lc-text-svg{overflow:visible}.ui\:\[\&_\.lc-tooltip-rects-g\]\:fill-transparent .lc-tooltip-rects-g{fill:#0000}.ui\:\[\&_\.stroke-white\]\:stroke-transparent .stroke-white{stroke:#0000}.ui\:\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0 [data-command-group]:not([hidden])~[data-command-group]{padding-top:calc(var(--ui-spacing) * 0)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:h-5 [data-command-input-wrapper] svg{height:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:w-5 [data-command-input-wrapper] svg{width:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-item\]_svg\]\:h-5 [data-command-item] svg{height:calc(var(--ui-spacing) * 5)}.ui\:\[\&_\[data-command-item\]_svg\]\:w-5 [data-command-item] svg{width:calc(var(--ui-spacing) * 5)}.ui\:\[\&_img\]\:size-full img{width:100%;height:100%}.ui\:\[\&_img\]\:object-cover img{object-fit:cover}.ui\:\[\&_p\]\:leading-relaxed p{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:size-8\! svg{width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.ui\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-6 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:\[\&_text\]\:stroke-transparent text{stroke:#0000}.ui\:\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.ui\:\[\&\+\[data-slot\=item-content\]\]\:flex-none+[data-slot=item-content]{flex:none}.ui\:\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--ui-spacing) * 0)}.ui\:\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--ui-spacing) * 6)}.ui\:\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--ui-spacing) * 3)}.ui\:\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--ui-spacing) * 6)}.ui\:\[a\]\:transition-colors:is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}@media (hover:hover){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}}:is(.ui\:\*\:\[span\]\:last\:flex>*):is(span):last-child{display:flex}:is(.ui\:\*\:\[span\]\:last\:items-center>*):is(span):last-child{align-items:center}:is(.ui\:\*\:\[span\]\:last\:gap-2>*):is(span):last-child{gap:calc(var(--ui-spacing) * 2)}:is(.ui\:data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.ui\:\[\&\>\*\]\:focus-visible\:relative>:focus-visible{position:relative}.ui\:\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-s-none>:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-s-0>:not(:first-child){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-e-none>:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.ui\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label]{flex:auto}.ui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-e-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-start-end-radius:calc(var(--radius) - 2px);border-end-end-radius:calc(var(--radius) - 2px)}.ui\:\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'ui\:w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=ui\:w-]){width:fit-content}.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]{margin-top:1px}.ui\:\[\&\>a\]\:underline>a{text-decoration-line:underline}.ui\:\[\&\>a\]\:underline-offset-4>a{text-underline-offset:4px}.ui\:\[\&\>a\:hover\]\:text-primary>a:hover{color:var(--primary)}.ui\:\[\&\>button\]\:hidden>button{display:none}.ui\:\[\&\>input\]\:flex-1>input{flex:1}.ui\:has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pe-2:has(>[data-align=inline-end])>input{padding-inline-end:calc(var(--ui-spacing) * 2)}.ui\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:ps-2:has(>[data-align=inline-start])>input{padding-inline-start:calc(var(--ui-spacing) * 2)}.ui\:\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.ui\:\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui\:\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.ui\:\[\&\>svg\]\:size-2\.5>svg{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&\>svg\]\:size-3>svg{width:calc(var(--ui-spacing) * 3);height:calc(var(--ui-spacing) * 3)}.ui\:\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\]\:size-4>svg{width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.ui\:\[\&\>svg\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:\[\&\>svg\]\:text-current>svg{color:currentColor}.ui\:\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.ui\:\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-3\.5>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}@media (hover:hover){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}}.ui\:\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left][data-collapsible=offcanvas] .ui\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:calc(var(--ui-spacing) * -2)}[data-side=left][data-state=collapsed] .ui\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-collapsible=offcanvas] .ui\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:calc(var(--ui-spacing) * -2)}[data-side=right][data-state=collapsed] .ui\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-variant=legend]+.ui\:\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5{margin-top:calc(var(--ui-spacing) * -1.5)}@media (hover:hover){a.ui\:\[a\&\]\:hover\:bg-accent:hover{background-color:var(--accent)}a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:var(--ui-color-amber-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-amber-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:var(--ui-color-emerald-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-emerald-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab, var(--secondary) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}a.ui\:\[a\&\]\:hover\:text-primary:hover{color:var(--primary)}a.ui\:\[a\&\]\:hover\:underline:hover{text-decoration-line:underline}a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@keyframes border-beam{to{offset-distance:100%}}@keyframes meteor{0%{opacity:1;transform:rotate(215deg)translate(0)}70%{opacity:1}to{opacity:0;transform:rotate(215deg)translate(-500px)}}@keyframes shimmer-marketing{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}@keyframes spin-around{0%{transform:translateZ(0)rotate(0)}15%,35%{transform:translateZ(0)rotate(90deg)}65%,85%{transform:translateZ(0)rotate(270deg)}to{transform:translateZ(0)rotate(360deg)}}@keyframes magicslide{to{transform:translate(calc(100cqw - 100%))}}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.25);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.25);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.25);--primary:oklch(21.6% .006 56.043);--primary-foreground:oklch(98.5% .001 106.423);--secondary:oklch(97% .001 106.424);--secondary-foreground:oklch(21.6% .006 56.043);--muted:oklch(97% .001 106.424);--muted-foreground:oklch(55.3% .013 58.071);--accent:oklch(96.7% .001 286.375);--accent-foreground:oklch(21.6% .006 56.043);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.3% .003 48.717);--input:oklch(92.3% .003 48.717);--ring:oklch(70.9% .01 56.259);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(100% 0 0);--sidebar-foreground:oklch(14.7% .004 49.25);--sidebar-primary:oklch(21.6% .006 56.043);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(97% .001 106.424);--sidebar-accent-foreground:oklch(21.6% .006 56.043);--sidebar-border:oklch(92.3% .003 48.717);--sidebar-ring:oklch(70.9% .01 56.259)}.dark{--background:oklch(14.7% .004 49.25);--foreground:oklch(98.5% .001 106.423);--card:oklch(21.6% .006 56.043);--card-foreground:oklch(98.5% .001 106.423);--popover:oklch(21.6% .006 56.043);--popover-foreground:oklch(98.5% .001 106.423);--primary:oklch(92.3% .003 48.717);--primary-foreground:oklch(21.6% .006 56.043);--secondary:oklch(26.8% .007 34.298);--secondary-foreground:oklch(98.5% .001 106.423);--muted:oklch(26.8% .007 34.298);--muted-foreground:oklch(70.9% .01 56.259);--accent:oklch(26.8% .007 34.298);--accent-foreground:oklch(98.5% .001 106.423);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.3% .013 58.071);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(0% 0 0);--sidebar-foreground:oklch(98.5% .001 106.423);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(26.8% .007 34.298);--sidebar-accent-foreground:oklch(98.5% .001 106.423);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.3% .013 58.071)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border{to{--border-angle:360deg}}.animate-gradient-border{background:linear-gradient(45deg, white, white) padding-box, conic-gradient(from var(--border-angle), #94a3b84d 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,white) 88%, var(--primary,#1d4ee2) 92%, #94a3b84d 100%) border-box;border:1px solid #0000;transition:--border-angle 3s ease-in-out}.animate-gradient-border:hover{animation:4s ease-in-out infinite border}.dark.animate-gradient-border{background:linear-gradient(45deg, #000, #000) padding-box, conic-gradient(from var(--border-angle), #4755697a 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,black) 88%, var(--primary,#1d4ee2) 92%, #4755697a 100%) border-box}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}
\ No newline at end of file
diff --git a/packages/utils/src/constants/error-codes.ts b/packages/utils/src/constants/error-codes.ts
new file mode 100644
index 00000000..78c33fb9
--- /dev/null
+++ b/packages/utils/src/constants/error-codes.ts
@@ -0,0 +1,156 @@
+/**
+ * Wire `code` values returned in API JSON error bodies (`success: false`).
+ * Shared by `@cio/api` and clients (e.g. dashboard snackbar mapping).
+ */
+export const ErrorCodes = {
+  // Common errors
+  NOT_FOUND: 'NOT_FOUND',
+  UNAUTHORIZED: 'UNAUTHORIZED',
+
+  // Dashboard Analytics errors
+  ORG_ANALYTICS_FETCH_FAILED: 'ORG_ANALYTICS_FETCH_FAILED',
+  NO_ORG_ID_PROVIDED: 'NO_ORG_ID_PROVIDED',
+
+  // Community errors
+  UPDATE_COMMUNITY_QUESTION_FAILED: 'UPDATE_COMMUNITY_QUESTION_FAILED',
+  ADD_COMMUNITY_QUESTION_FAILED: 'ADD_COMMUNITY_QUESTION_FAILED',
+  COMMUNITY_QUESTIONS_FETCH_FAILED: 'COMMUNITY_QUESTIONS_FETCH_FAILED',
+  COMMUNITY_QUESTION_NOT_FOUND: 'COMMUNITY_QUESTION_NOT_FOUND',
+  COMMENT_SUBMISSION_FAILED: 'COMMENT_SUBMISSION_FAILED',
+  UPVOTE_FAILED: 'UPVOTE_FAILED',
+  DELETE_COMMENT_FAILED: 'DELETE_COMMENT_FAILED',
+  DELETE_QUESTION_FAILED: 'DELETE_QUESTION_FAILED',
+
+  // Organization errors
+  SITENAME_EXISTS: 'SITENAME_EXISTS',
+  ORG_CREATE_FAILED: 'ORG_CREATE_FAILED',
+  ORG_NOT_FOUND: 'ORG_NOT_FOUND',
+  ORGANIZATION_NOT_FOUND: 'ORGANIZATION_NOT_FOUND',
+  ORG_TEAM_FETCH_FAILED: 'ORG_TEAM_FETCH_FAILED',
+  ORG_AUDIENCE_FETCH_FAILED: 'ORG_AUDIENCE_FETCH_FAILED',
+  COURSES_FETCH_FAILED: 'COURSES_FETCH_FAILED',
+  ORG_PLAN_CREATE_FAILED: 'ORG_PLAN_CREATE_FAILED',
+  ORG_PLAN_UPDATE_FAILED: 'ORG_PLAN_UPDATE_FAILED',
+  ORG_PLAN_CANCEL_FAILED: 'ORG_PLAN_CANCEL_FAILED',
+  ORG_PLAN_NOT_FOUND: 'ORG_PLAN_NOT_FOUND',
+  ORG_TEAM_INVITE_FAILED: 'ORG_TEAM_INVITE_FAILED',
+  ORG_TEAM_REMOVE_FAILED: 'ORG_TEAM_REMOVE_FAILED',
+  ORG_AUDIENCE_REMOVE_FAILED: 'ORG_AUDIENCE_REMOVE_FAILED',
+  ORG_TEAM_EMAIL_EXISTS: 'ORG_TEAM_EMAIL_EXISTS',
+  ORG_TEAM_NOT_AUTHORIZED: 'ORG_TEAM_NOT_AUTHORIZED',
+  ORGANIZATION_API_KEY_NOT_FOUND: 'ORGANIZATION_API_KEY_NOT_FOUND',
+  ORGANIZATION_API_KEY_CREATE_FAILED: 'ORGANIZATION_API_KEY_CREATE_FAILED',
+  ORGANIZATION_API_KEY_FETCH_FAILED: 'ORGANIZATION_API_KEY_FETCH_FAILED',
+  ORGANIZATION_API_KEY_REVOKE_FAILED: 'ORGANIZATION_API_KEY_REVOKE_FAILED',
+  ORGANIZATION_API_KEY_ROTATE_FAILED: 'ORGANIZATION_API_KEY_ROTATE_FAILED',
+  AUTOMATION_KEY_LIMIT_EXCEEDED: 'AUTOMATION_KEY_LIMIT_EXCEEDED',
+  AUTOMATION_CREDIT_LIMIT_EXCEEDED: 'AUTOMATION_CREDIT_LIMIT_EXCEEDED',
+  AUTOMATION_RATE_LIMIT_EXCEEDED: 'AUTOMATION_RATE_LIMIT_EXCEEDED',
+  TAG_GROUP_NOT_FOUND: 'TAG_GROUP_NOT_FOUND',
+  TAG_NOT_FOUND: 'TAG_NOT_FOUND',
+  TAG_FETCH_FAILED: 'TAG_FETCH_FAILED',
+  TAG_CREATE_FAILED: 'TAG_CREATE_FAILED',
+  TAG_UPDATE_FAILED: 'TAG_UPDATE_FAILED',
+  TAG_ASSIGNMENT_FAILED: 'TAG_ASSIGNMENT_FAILED',
+
+  // Asset errors
+  ASSET_NOT_FOUND: 'ASSET_NOT_FOUND',
+  ASSET_IN_USE: 'ASSET_IN_USE',
+  ASSET_USAGE_NOT_FOUND: 'ASSET_USAGE_NOT_FOUND',
+  ASSET_CREATE_FAILED: 'ASSET_CREATE_FAILED',
+  ASSET_FETCH_FAILED: 'ASSET_FETCH_FAILED',
+  ASSET_LIST_FAILED: 'ASSET_LIST_FAILED',
+  ASSET_UPDATE_FAILED: 'ASSET_UPDATE_FAILED',
+  ASSET_DELETE_FAILED: 'ASSET_DELETE_FAILED',
+  ASSET_ATTACH_FAILED: 'ASSET_ATTACH_FAILED',
+  ASSET_DETACH_FAILED: 'ASSET_DETACH_FAILED',
+  ASSET_USAGE_FETCH_FAILED: 'ASSET_USAGE_FETCH_FAILED',
+  ASSET_EXPORT_FAILED: 'ASSET_EXPORT_FAILED',
+  ASSET_STORAGE_FETCH_FAILED: 'ASSET_STORAGE_FETCH_FAILED',
+
+  // Profile errors
+  PROFILE_UPDATE_FAILED: 'PROFILE_UPDATE_FAILED',
+  PROFILE_NOT_FOUND: 'PROFILE_NOT_FOUND',
+
+  // Account errors
+  ACCOUNT_NOT_FOUND: 'ACCOUNT_NOT_FOUND',
+
+  // Auth errors
+  FORBIDDEN: 'FORBIDDEN',
+
+  // Course errors
+  COURSE_NOT_FOUND: 'COURSE_NOT_FOUND',
+  COURSE_FETCH_FAILED: 'COURSE_FETCH_FAILED',
+  COURSE_IMPORT_DRAFT_NOT_FOUND: 'COURSE_IMPORT_DRAFT_NOT_FOUND',
+  COURSE_IMPORT_CREATE_FAILED: 'COURSE_IMPORT_CREATE_FAILED',
+  COURSE_IMPORT_FETCH_FAILED: 'COURSE_IMPORT_FETCH_FAILED',
+  COURSE_IMPORT_UPDATE_FAILED: 'COURSE_IMPORT_UPDATE_FAILED',
+  COURSE_IMPORT_PUBLISH_FAILED: 'COURSE_IMPORT_PUBLISH_FAILED',
+
+  // Lesson errors
+  LESSON_NOT_FOUND: 'LESSON_NOT_FOUND',
+  LESSON_FETCH_FAILED: 'LESSON_FETCH_FAILED',
+  COURSE_SECTION_NOT_FOUND: 'COURSE_SECTION_NOT_FOUND',
+
+  // Exercise errors
+  EXERCISE_NOT_FOUND: 'EXERCISE_NOT_FOUND',
+  EXERCISE_FETCH_FAILED: 'EXERCISE_FETCH_FAILED',
+
+  // Submission errors
+  SUBMISSION_NOT_FOUND: 'SUBMISSION_NOT_FOUND',
+  SUBMISSION_FETCH_FAILED: 'SUBMISSION_FETCH_FAILED',
+
+  // Comment errors
+  COMMENT_NOT_FOUND: 'COMMENT_NOT_FOUND',
+  LESSON_COMMENT_UPDATE_FAILED: 'LESSON_COMMENT_UPDATE_FAILED',
+  NEWSFEED_COMMENT_UPDATE_FAILED: 'NEWSFEED_COMMENT_UPDATE_FAILED',
+
+  // Quiz errors
+  QUIZ_NOT_FOUND: 'QUIZ_NOT_FOUND',
+  QUIZ_FETCH_FAILED: 'QUIZ_FETCH_FAILED',
+  QUIZ_CREATE_FAILED: 'QUIZ_CREATE_FAILED',
+  QUIZ_UPDATE_FAILED: 'QUIZ_UPDATE_FAILED',
+  QUIZ_DELETE_FAILED: 'QUIZ_DELETE_FAILED',
+
+  // Lesson Language errors
+  LESSON_LANGUAGE_NOT_FOUND: 'LESSON_LANGUAGE_NOT_FOUND',
+  LESSON_LANGUAGE_FETCH_FAILED: 'LESSON_LANGUAGE_FETCH_FAILED',
+  LESSON_LANGUAGE_CREATE_FAILED: 'LESSON_LANGUAGE_CREATE_FAILED',
+  LESSON_LANGUAGE_UPDATE_FAILED: 'LESSON_LANGUAGE_UPDATE_FAILED',
+  LESSON_LANGUAGE_DELETE_FAILED: 'LESSON_LANGUAGE_DELETE_FAILED',
+
+  // SSO errors
+  SSO_REGISTRATION_FAILED: 'SSO_REGISTRATION_FAILED',
+  SSO_NOT_FOUND: 'SSO_NOT_FOUND',
+  SSO_NOT_ENABLED: 'SSO_NOT_ENABLED',
+  UPGRADE_REQUIRED: 'UPGRADE_REQUIRED',
+  CONFLICT: 'CONFLICT',
+
+  // Token exchange errors
+  TOKEN_EXCHANGE_INVALID_TOKEN: 'TOKEN_EXCHANGE_INVALID_TOKEN',
+  TOKEN_EXCHANGE_EXPIRED: 'TOKEN_EXCHANGE_EXPIRED',
+  TOKEN_EXCHANGE_ORG_NOT_FOUND: 'TOKEN_EXCHANGE_ORG_NOT_FOUND',
+  TOKEN_EXCHANGE_NOT_ENABLED: 'TOKEN_EXCHANGE_NOT_ENABLED',
+
+  // Token auth admin errors
+  TOKEN_AUTH_ALREADY_EXISTS: 'TOKEN_AUTH_ALREADY_EXISTS',
+
+  // Program errors
+  PROGRAM_NOT_FOUND: 'PROGRAM_NOT_FOUND',
+  PROGRAM_FORBIDDEN: 'PROGRAM_FORBIDDEN',
+  PROGRAM_CREATE_FAILED: 'PROGRAM_CREATE_FAILED',
+  PROGRAM_UPDATE_FAILED: 'PROGRAM_UPDATE_FAILED',
+  PROGRAM_DELETE_FAILED: 'PROGRAM_DELETE_FAILED',
+  COURSE_ALREADY_IN_PROGRAM: 'COURSE_ALREADY_IN_PROGRAM',
+  MEMBER_ALREADY_IN_PROGRAM: 'MEMBER_ALREADY_IN_PROGRAM',
+  PROGRAM_MEMBER_NOT_FOUND: 'PROGRAM_MEMBER_NOT_FOUND',
+  PROGRAM_NEWSFEED_NOT_FOUND: 'PROGRAM_NEWSFEED_NOT_FOUND',
+  PROGRAM_NEWSFEED_COMMENT_NOT_FOUND: 'PROGRAM_NEWSFEED_COMMENT_NOT_FOUND',
+  PROGRAM_MEMBER_CHECK_FAILED: 'PROGRAM_MEMBER_CHECK_FAILED',
+
+  // Generic
+  VALIDATION_ERROR: 'VALIDATION_ERROR',
+  INTERNAL_ERROR: 'INTERNAL_ERROR'
+} as const;
+
+export type ErrorCode = (typeof ErrorCodes)[keyof typeof ErrorCodes];
diff --git a/packages/utils/src/constants/index.ts b/packages/utils/src/constants/index.ts
index 1a725d28..7cd6241f 100644
--- a/packages/utils/src/constants/index.ts
+++ b/packages/utils/src/constants/index.ts
@@ -1,3 +1,4 @@
 export * from './roles';
 export * from './org';
 export * from './content';
+export * from './error-codes';
diff --git a/packages/utils/src/plans/data.ts b/packages/utils/src/plans/data.ts
index 745e2163..c47424c2 100644
--- a/packages/utils/src/plans/data.ts
+++ b/packages/utils/src/plans/data.ts
@@ -11,8 +11,9 @@ export default {
     FEATURES: [
       'Unlimited Courses',
       'Unlimited Q/A',
+      'Unlimited Programs',
       '20 Students',
-      'AI Course Builder (no video upload)',
+      'Advanced Course Builder (no video upload)',
       'MCP access with 20 automation credits / month',
       'ClassroomIO branding'
     ],
@@ -37,10 +38,11 @@ export default {
       'Everything in Basic',
       'Unlimited Collaborators',
       '10K Students',
-      'Advanced AI Course Builder (Video upload & Certificate)',
+      'Course Builder with Video Upload & Certificate',
       'MCP access with 500 automation credits / month',
       'Custom Branding',
-      'Slack Invite',
+      'Custom Domain',
+      'API with limits',
       'Includes all upcoming features'
     ],
     CTA: {
@@ -65,8 +67,8 @@ export default {
     FEATURES: [
       'Everything in Early Adopters plus:',
       'Unlimited students',
-      'Custom Domain',
-      'MCP access with 5,000 automation credits / month',
+      'Unlimited API requests',
+      'SSO',
       '24/7 Support'
     ],
     CTA: {
diff --git a/packages/utils/src/validation/assets/assets.ts b/packages/utils/src/validation/assets/assets.ts
index 6c9d2b31..8061864a 100644
--- a/packages/utils/src/validation/assets/assets.ts
+++ b/packages/utils/src/validation/assets/assets.ts
@@ -1,7 +1,8 @@
 import * as z from 'zod';
 
 const AssetKind = z.enum(['video', 'document', 'image', 'audio', 'other']);
-const AssetProvider = z.enum(['upload', 'youtube', 'generic', 'external_url']);
+const AssetProvider = z.enum(['upload', 'youtube', 'generic', 'external_url', 'google_drive']);
+export type TAssetProvider = z.infer<typeof AssetProvider>;
 const AssetStatus = z.enum(['active', 'archived']);
 const AssetTargetType = z.enum(['lesson', 'exercise', 'question']);
 
diff --git a/packages/utils/src/validation/course-import/course-import.ts b/packages/utils/src/validation/course-import/course-import.ts
index a69f8d2d..32c0084f 100644
--- a/packages/utils/src/validation/course-import/course-import.ts
+++ b/packages/utils/src/validation/course-import/course-import.ts
@@ -228,6 +228,7 @@ export const ZCourseImportDraftPublish = z.object({
 export type TCourseImportDraftPublish = z.infer<typeof ZCourseImportDraftPublish>;
 
 export const ZCourseImportDraftPublishToCourse = ZCourseImportDraftPublish.extend({
-  courseId: z.string().min(1)
+  courseId: z.string().min(1),
+  syncMode: z.enum(['merge', 'replace']).default('merge')
 });
 export type TCourseImportDraftPublishToCourse = z.infer<typeof ZCourseImportDraftPublishToCourse>;
diff --git a/packages/utils/src/validation/exercise/exercise.ts b/packages/utils/src/validation/exercise/exercise.ts
index db8f460c..fb072fba 100644
--- a/packages/utils/src/validation/exercise/exercise.ts
+++ b/packages/utils/src/validation/exercise/exercise.ts
@@ -1,5 +1,7 @@
 import * as z from 'zod';
 
+import { getStarRatingMaxFromSettings, isValidStarRatingValue } from '@cio/question-types';
+
 import { QUESTION_TYPE } from '../constants';
 
 const EXERCISE_QUESTION_TYPE_ID_LITERALS = [
@@ -14,16 +16,20 @@ const EXERCISE_QUESTION_TYPE_ID_LITERALS = [
   z.literal(QUESTION_TYPE.MATCHING),
   z.literal(QUESTION_TYPE.ORDERING),
   z.literal(QUESTION_TYPE.HOTSPOT),
-  z.literal(QUESTION_TYPE.LINK)
+  z.literal(QUESTION_TYPE.LINK),
+  z.literal(QUESTION_TYPE.WORD_BANK),
+  z.literal(QUESTION_TYPE.STAR)
 ] as const;
 
 export const ZExerciseQuestionTypeId = z.union(EXERCISE_QUESTION_TYPE_ID_LITERALS);
 export type TExerciseQuestionTypeId = z.infer<typeof ZExerciseQuestionTypeId>;
 
-const QUESTION_VALIDATION_RULES: Record<
-  number,
-  Array<(question: { options?: Array<{ isCorrect: boolean }> }) => string | null>
-> = {
+type QuestionRuleInput = {
+  options?: Array<{ isCorrect: boolean }>;
+  settings?: Record<string, unknown>;
+};
+
+const QUESTION_VALIDATION_RULES: Record<number, Array<(question: QuestionRuleInput) => string | null>> = {
   [QUESTION_TYPE.RADIO]: [
     (question) => {
       const options = question.options || [];
@@ -72,7 +78,41 @@ const QUESTION_VALIDATION_RULES: Record<
       return null;
     }
   ],
-  [QUESTION_TYPE.TEXTAREA]: []
+  [QUESTION_TYPE.TEXTAREA]: [],
+  [QUESTION_TYPE.WORD_BANK]: [
+    (question) => {
+      const settings = question.settings;
+      const template = String(settings?.template ?? '');
+      const blankCount = Math.max(0, template.split('___').length - 1);
+      if (blankCount < 1) {
+        return 'Word bank questions need at least one ___ blank in the template';
+      }
+      const raw = settings?.correctAnswers;
+      const answers = Array.isArray(raw) ? (raw as unknown[]) : [];
+      if (answers.length < blankCount) {
+        return 'Provide a correct answer for each blank';
+      }
+      for (let i = 0; i < blankCount; i++) {
+        if (!String(answers[i] ?? '').trim()) {
+          return `Correct answer for blank ${i + 1} is required`;
+        }
+      }
+      return null;
+    }
+  ],
+  [QUESTION_TYPE.STAR]: [
+    (question) => {
+      const settings = question.settings ?? {};
+      const maxStars = getStarRatingMaxFromSettings(settings);
+      const rawCorrect = settings.correctValue;
+      const correct = typeof rawCorrect === 'number' ? rawCorrect : rawCorrect != null ? Number(rawCorrect) : NaN;
+      if (!isValidStarRatingValue(correct, maxStars)) {
+        return 'Set a correct star value from 1 up to the maximum number of stars';
+      }
+
+      return null;
+    }
+  ]
 };
 
 // Base schema for exercise update question (without refinement)
diff --git a/packages/utils/src/validation/index.ts b/packages/utils/src/validation/index.ts
index c1ce6620..f1145128 100644
--- a/packages/utils/src/validation/index.ts
+++ b/packages/utils/src/validation/index.ts
@@ -12,6 +12,8 @@ export * from './media';
 export * from './newsfeed';
 export * from './onboarding';
 export * from './organization';
+export * from './public-api';
 export * from './submission';
 export * from './dash';
 export * from './tag';
+export * from './program';
diff --git a/packages/utils/src/validation/lesson/lesson.ts b/packages/utils/src/validation/lesson/lesson.ts
index d1f2e6a3..0f28388e 100644
--- a/packages/utils/src/validation/lesson/lesson.ts
+++ b/packages/utils/src/validation/lesson/lesson.ts
@@ -30,7 +30,7 @@ export const ZLessonUpdate = z.object({
   videos: z
     .array(
       z.object({
-        type: z.enum(['youtube', 'generic', 'upload']),
+        type: z.enum(['youtube', 'generic', 'upload', 'google_drive']),
         link: z.string(),
         key: z.string().optional(),
         assetId: z.string().uuid().optional(),
diff --git a/packages/utils/src/validation/organization/audience.ts b/packages/utils/src/validation/organization/audience.ts
index 925a3d50..f1adc8c0 100644
--- a/packages/utils/src/validation/organization/audience.ts
+++ b/packages/utils/src/validation/organization/audience.ts
@@ -18,17 +18,25 @@ export type TGetAudienceQuery = z.infer<typeof ZGetAudienceQuery>;
 export const ZImportAudienceMembers = z.object({
   recipientCsv: z.string().max(25000),
   courseIds: z.array(z.string().uuid()).optional(),
+  programIds: z.array(z.string().uuid()).optional(),
   allCourses: z.boolean().optional().default(false),
+  allPrograms: z.boolean().optional().default(false),
   sendEmail: z.boolean().default(true)
 });
 
 export type TImportAudienceMembers = z.infer<typeof ZImportAudienceMembers>;
 
-export const ZAssignAudienceCourses = z.object({
-  profileIds: z.array(z.uuid()).min(1).max(500),
-  courseIds: z.array(z.uuid()).min(1),
-  sendEmail: z.boolean().default(true)
-});
+export const ZAssignAudienceCourses = z
+  .object({
+    profileIds: z.array(z.uuid()).min(1).max(500),
+    courseIds: z.array(z.uuid()).optional(),
+    programIds: z.array(z.uuid()).optional(),
+    sendEmail: z.boolean().default(true)
+  })
+  .refine((data) => (data.courseIds?.length ?? 0) > 0 || (data.programIds?.length ?? 0) > 0, {
+    message: 'At least one course or program must be selected',
+    path: ['courseIds']
+  });
 
 export type TAssignAudienceCourses = z.infer<typeof ZAssignAudienceCourses>;
 
diff --git a/packages/utils/src/validation/organization/organization.ts b/packages/utils/src/validation/organization/organization.ts
index 078235d6..3a75a6bf 100644
--- a/packages/utils/src/validation/organization/organization.ts
+++ b/packages/utils/src/validation/organization/organization.ts
@@ -18,6 +18,9 @@ export const ZGetCoursesBySiteName = z.object({
 export type TGetCoursesBySiteName = z.infer<typeof ZGetCoursesBySiteName>;
 
 export const ZGetOrganizationCoursesQuery = z.object({
+  page: z.coerce.number().int().min(1).default(1),
+  limit: z.coerce.number().int().min(1).max(100).default(20),
+  search: z.string().trim().optional(),
   tags: z.string().optional()
 });
 
diff --git a/packages/utils/src/validation/program/index.ts b/packages/utils/src/validation/program/index.ts
new file mode 100644
index 00000000..2851943d
--- /dev/null
+++ b/packages/utils/src/validation/program/index.ts
@@ -0,0 +1 @@
+export * from './program';
diff --git a/packages/utils/src/validation/program/program.ts b/packages/utils/src/validation/program/program.ts
new file mode 100644
index 00000000..60808acc
--- /dev/null
+++ b/packages/utils/src/validation/program/program.ts
@@ -0,0 +1,71 @@
+import * as z from 'zod';
+import { ROLE } from '@cio/utils/constants';
+
+export const ZCreateProgram = z.object({
+  name: z.string().min(1).max(255),
+  description: z.string().max(2000).optional(),
+  coverImage: z.string().url().optional()
+});
+export type TCreateProgram = z.infer<typeof ZCreateProgram>;
+
+export const ZUpdateProgram = z.object({
+  name: z.string().min(1).max(255).optional(),
+  description: z.string().max(2000).nullable().optional(),
+  coverImage: z.string().url().nullable().optional(),
+  status: z.enum(['ACTIVE', 'INACTIVE', 'ARCHIVED']).optional()
+});
+export type TUpdateProgram = z.infer<typeof ZUpdateProgram>;
+
+export const ZAddCourseToProgram = z.object({
+  courseId: z.string().uuid()
+});
+export type TAddCourseToProgram = z.infer<typeof ZAddCourseToProgram>;
+
+export const ZAddProgramMembers = z.object({
+  members: z
+    .array(
+      z.object({
+        profileId: z.string().uuid().optional(),
+        email: z.string().email().optional(),
+        name: z.string().optional(),
+        roleId: z.union([z.literal(ROLE.TUTOR), z.literal(ROLE.STUDENT)])
+      })
+    )
+    .min(1)
+    .refine((members) => members.every((member) => member.profileId || member.email), {
+      message: 'Each member must include a profileId or email'
+    })
+});
+export type TAddProgramMembers = z.infer<typeof ZAddProgramMembers>;
+
+export const ZUpdateProgramMember = z.object({
+  roleId: z.union([z.literal(ROLE.TUTOR), z.literal(ROLE.STUDENT)])
+});
+export type TUpdateProgramMember = z.infer<typeof ZUpdateProgramMember>;
+
+export const ZCreateProgramNewsfeed = z.object({
+  content: z.string().min(1),
+  isPinned: z.boolean().optional()
+});
+export type TCreateProgramNewsfeed = z.infer<typeof ZCreateProgramNewsfeed>;
+
+export const ZUpdateProgramNewsfeed = z.object({
+  content: z.string().min(1).optional(),
+  isPinned: z.boolean().optional()
+});
+export type TUpdateProgramNewsfeed = z.infer<typeof ZUpdateProgramNewsfeed>;
+
+export const ZUpdateProgramReaction = z.object({
+  reaction: z.object({
+    clap: z.array(z.string()),
+    smile: z.array(z.string()),
+    thumbsup: z.array(z.string()),
+    thumbsdown: z.array(z.string())
+  })
+});
+export type TUpdateProgramReaction = z.infer<typeof ZUpdateProgramReaction>;
+
+export const ZCreateProgramNewsfeedComment = z.object({
+  content: z.string().min(1)
+});
+export type TCreateProgramNewsfeedComment = z.infer<typeof ZCreateProgramNewsfeedComment>;
diff --git a/packages/utils/src/validation/public-api/audience.ts b/packages/utils/src/validation/public-api/audience.ts
new file mode 100644
index 00000000..62a13844
--- /dev/null
+++ b/packages/utils/src/validation/public-api/audience.ts
@@ -0,0 +1,27 @@
+import * as z from 'zod';
+
+import { ZAssignAudienceCourses, ZGetAudienceQuery } from '../organization';
+
+export const ZPublicApiAudienceQuery = ZGetAudienceQuery;
+export type TPublicApiAudienceQuery = z.infer<typeof ZPublicApiAudienceQuery>;
+
+export const ZPublicApiCreateAudience = z.object({
+  email: z.string().email(),
+  courseIds: z.array(z.string().uuid()).optional(),
+  sendEmail: z.boolean().default(true)
+});
+export type TPublicApiCreateAudience = z.infer<typeof ZPublicApiCreateAudience>;
+
+export const ZPublicApiUpdateAudience = z.object({
+  email: z.string().email(),
+  sendEmail: z.boolean().default(true)
+});
+export type TPublicApiUpdateAudience = z.infer<typeof ZPublicApiUpdateAudience>;
+
+export const ZPublicApiAssignAudienceCourses = ZAssignAudienceCourses;
+export type TPublicApiAssignAudienceCourses = z.infer<typeof ZPublicApiAssignAudienceCourses>;
+
+export const ZPublicApiAudienceMemberParam = z.object({
+  memberId: z.coerce.number().int().positive()
+});
+export type TPublicApiAudienceMemberParam = z.infer<typeof ZPublicApiAudienceMemberParam>;
diff --git a/packages/utils/src/validation/public-api/course.ts b/packages/utils/src/validation/public-api/course.ts
new file mode 100644
index 00000000..52b7efad
--- /dev/null
+++ b/packages/utils/src/validation/public-api/course.ts
@@ -0,0 +1,33 @@
+import * as z from 'zod';
+
+import { ZCourseCreate, ZCourseUpdate } from '../course/course';
+import { ZCourseImportDraftPayload } from '../course-import/course-import';
+
+export const ZPublicApiCoursesQuery = z.object({
+  tags: z.string().optional()
+});
+export type TPublicApiCoursesQuery = z.infer<typeof ZPublicApiCoursesQuery>;
+
+export const ZPublicApiCourseParam = z.object({
+  courseId: z.string().uuid()
+});
+export type TPublicApiCourseParam = z.infer<typeof ZPublicApiCourseParam>;
+
+export const ZPublicApiCreateCourse = ZCourseCreate.omit({
+  organizationId: true
+});
+export type TPublicApiCreateCourse = z.infer<typeof ZPublicApiCreateCourse>;
+
+export const ZPublicApiUpdateCourse = ZCourseUpdate.omit({
+  tagIds: true
+});
+export type TPublicApiUpdateCourse = z.infer<typeof ZPublicApiUpdateCourse>;
+
+export const ZPublicApiUpdateCourseStructure = z.object({
+  mode: z.enum(['merge', 'replace']).default('merge'),
+  idempotencyKey: z.string().min(1).optional(),
+  summary: z.record(z.string(), z.unknown()).optional(),
+  sourceArtifacts: z.array(z.record(z.string(), z.unknown())).optional(),
+  draft: ZCourseImportDraftPayload
+});
+export type TPublicApiUpdateCourseStructure = z.infer<typeof ZPublicApiUpdateCourseStructure>;
diff --git a/packages/utils/src/validation/public-api/index.ts b/packages/utils/src/validation/public-api/index.ts
new file mode 100644
index 00000000..0ad516a6
--- /dev/null
+++ b/packages/utils/src/validation/public-api/index.ts
@@ -0,0 +1,2 @@
+export * from './audience';
+export * from './course';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de9a8806..9d2a3f7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,7 +94,7 @@ importers:
         version: 4.11.3
       hono-openapi:
         specifier: ^1.0.8
-        version: 1.1.2(@hono/standard-validator@0.1.5(@standard-schema/spec@1.1.0)(hono@4.11.3))(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1))(@types/json-schema@7.0.15)(hono@4.11.3)(openapi-types@12.1.3)
+        version: 1.1.2(@hono/standard-validator@0.1.5(@standard-schema/spec@1.1.0)(hono@4.11.3))(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(valibot@1.3.1(typescript@5.9.3))(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1))(@types/json-schema@7.0.15)(hono@4.11.3)(openapi-types@12.1.3)
       hono-rate-limiter:
         specifier: ^0.4.2
         version: 0.4.2(hono@4.11.3)
@@ -134,7 +134,7 @@ importers:
         version: 7.0.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@vitest/coverage-v8':
         specifier: ^1.2.2
-        version: 1.6.1(vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))
+        version: 1.6.1(vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))
       eslint:
         specifier: ^9.31.0
         version: 9.39.2(jiti@2.6.1)
@@ -155,22 +155,19 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.2.2
-        version: 1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+        version: 1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
       wrangler:
         specifier: 4.21.x
         version: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
 
   apps/course-app:
     dependencies:
-      '@tailwindcss/container-queries':
-        specifier: ^0.1.1
-        version: 0.1.1(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))
-      '@tailwindcss/forms':
-        specifier: ^0.5.9
-        version: 0.5.11(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))
-      '@tailwindcss/typography':
-        specifier: ^0.5.15
-        version: 0.5.19(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))
+      '@cio/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@lucide/svelte':
+        specifier: ^0.562.0
+        version: 0.562.0(svelte@5.46.0)
       lucide-svelte:
         specifier: ^0.468.0
         version: 0.468.0(svelte@5.46.0)
@@ -192,22 +189,25 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))
+        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))
       '@sveltejs/kit':
         specifier: ^2.9.0
-        version: 2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.0
-        version: 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
-      autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.23(postcss@8.5.6)
+        version: 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       bits-ui:
-        specifier: ^0.21.16
-        version: 0.21.16(svelte@5.46.0)
+        specifier: ^2.16.1
+        version: 2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
       prettier:
         specifier: ^3.3.2
         version: 3.7.4
@@ -215,8 +215,8 @@ importers:
         specifier: ^3.2.6
         version: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.5
-        version: 0.6.14(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4)
+        specifier: ^0.7.2
+        version: 0.7.2(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4)
       svelte:
         specifier: ^5.0.0
         version: 5.46.0
@@ -231,25 +231,25 @@ importers:
         version: 2.6.0
       tailwind-variants:
         specifier: ^0.3.0
-        version: 0.3.1(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))
+        version: 0.3.1(tailwindcss@4.2.2)
       tailwindcss:
-        specifier: ^3.4.9
-        version: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
+        specifier: ^4.2.2
+        version: 4.2.2
       typescript:
         specifier: ^5.0.0
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       vitest:
         specifier: ^2.0.4
-        version: 2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+        version: 2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
 
   apps/dashboard:
     dependencies:
       '@better-auth/sso':
         specifier: 1.4.18
-        version: 1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))
+        version: 1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))
       '@cio/api':
         specifier: workspace:*
         version: link:../api
@@ -270,16 +270,16 @@ importers:
         version: 0.545.0(svelte@5.46.0)
       '@polar-sh/sveltekit':
         specifier: ^0.2.1
-        version: 0.2.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(zod@4.2.1)
+        version: 0.2.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(zod@4.2.1)
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))
+        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))
       '@sveltejs/adapter-node':
         specifier: ^2.0.0
-        version: 2.1.2(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))
+        version: 2.1.2(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))
       '@sveltejs/adapter-vercel':
         specifier: ^4.0.0
-        version: 4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(encoding@0.1.13)
+        version: 4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(encoding@0.1.13)
       '@sveltekit-i18n/base':
         specifier: ^1.3.7
         version: 1.3.7(svelte@5.46.0)
@@ -303,10 +303,10 @@ importers:
         version: 1.13.2
       better-auth:
         specifier: ^1.4.18
-        version: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
+        version: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
       bits-ui:
         specifier: ^2.14.4
-        version: 2.14.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)
+        version: 2.14.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)
       body-parser:
         specifier: ^1.20.2
         version: 1.20.4
@@ -442,13 +442,13 @@ importers:
         version: 6.0.3(rollup@4.54.0)
       '@sveltejs/adapter-cloudflare':
         specifier: ^7.2.8
-        version: 7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))
+        version: 7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@tailwindcss/typography':
         specifier: ^0.5.9
         version: 0.5.19(tailwindcss@4.1.18)
@@ -541,31 +541,37 @@ importers:
         version: 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       vite:
         specifier: ^5.4.4
-        version: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+        version: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
       wrangler:
         specifier: 4.21.2
         version: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
 
   apps/docs:
     dependencies:
-      '@tanstack/react-router':
-        specifier: ^1.134.12
-        version: 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-router-devtools':
-        specifier: ^1.134.12
-        version: 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.143.4)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)
-      '@tanstack/react-start':
-        specifier: ^1.143.4
-        version: 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@react-router/dev':
+        specifier: ^7.9.4
+        version: 7.13.2(@react-router/serve@7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3))(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(sass@1.97.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(yaml@2.8.2)
+      '@react-router/node':
+        specifier: ^7.9.4
+        version: 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@react-router/serve':
+        specifier: ^7.9.4
+        version: 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@scalar/core':
+        specifier: ^0.3.28
+        version: 0.3.28
       fumadocs-core:
         specifier: 16.2.1
-        version: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       fumadocs-mdx:
         specifier: 14.0.4
-        version: 14.0.4(fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 14.0.4(fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       fumadocs-ui:
         specifier: 16.2.1
-        version: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+        version: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+      isbot:
+        specifier: ^5.1.30
+        version: 5.1.32
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@19.2.3)
@@ -578,16 +584,19 @@ importers:
       react-dom:
         specifier: ^19.2.0
         version: 19.2.3(react@19.2.3)
+      react-router:
+        specifier: ^7.9.4
+        version: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.4.0
       vite:
         specifier: ^7.2.0
-        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@types/mdx':
         specifier: ^2.0.13
         version: 2.0.13
@@ -600,12 +609,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.2
         version: 19.2.3(@types/react@19.2.7)
-      '@vitejs/plugin-react':
-        specifier: ^5.1.0
-        version: 5.1.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
-      nitro:
-        specifier: 3.0.1-alpha.1
-        version: 3.0.1-alpha.1(chokidar@4.0.3)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(ioredis@5.8.2)(lru-cache@11.2.7)(rollup@4.54.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       tailwindcss:
         specifier: ^4.1.16
         version: 4.1.18
@@ -614,10 +617,41 @@ importers:
         version: 5.9.3
       vite-tsconfig-paths:
         specifier: ^5.1.4
-        version: 5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
-      wrangler:
-        specifier: ^4.21.2
-        version: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
+        version: 5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+
+  apps/embeds:
+    dependencies:
+      '@cio/question-types':
+        specifier: workspace:*
+        version: link:../../packages/question-types
+      '@cio/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@lucide/svelte':
+        specifier: ^0.562.0
+        version: 0.562.0(svelte@5.46.0)
+    devDependencies:
+      '@cio/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^6.2.1
+        version: 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tailwindcss/vite':
+        specifier: ^4.1.16
+        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      svelte:
+        specifier: ^5.39.11
+        version: 5.46.0
+      typescript:
+        specifier: ^5.5.0
+        version: 5.9.3
+      vite:
+        specifier: ^7.1.4
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite-plugin-css-injected-by-js:
+        specifier: ^3.5.2
+        version: 3.5.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
 
   apps/website:
     dependencies:
@@ -663,13 +697,13 @@ importers:
         version: link:../../packages/tsconfig
       '@sveltejs/adapter-cloudflare':
         specifier: ^7.0.0
-        version: 7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))
+        version: 7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       '@tailwindcss/typography':
         specifier: ^0.5.9
         version: 0.5.19(tailwindcss@4.1.18)
@@ -693,7 +727,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.4.4
-        version: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+        version: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
       wrangler:
         specifier: ^4.21.2
         version: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
@@ -727,7 +761,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.0.3
-        version: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+        version: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
 
   packages/course-app/src/template:
     dependencies:
@@ -761,19 +795,19 @@ importers:
         version: 1.57.0
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))
+        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+        version: 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
       '@testing-library/svelte':
         specifier: ^5.2.4
-        version: 5.3.0(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))(vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.31.1)(sass@1.97.1))
+        version: 5.3.0(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))(vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.32.0)(sass@1.97.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -815,16 +849,16 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.4.4
-        version: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+        version: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
       vitest:
         specifier: ^2.1.4
-        version: 2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.31.1)(sass@1.97.1)
+        version: 2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.32.0)(sass@1.97.1)
 
   packages/db:
     dependencies:
       '@better-auth/sso':
         specifier: ^1.4.18
-        version: 1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))
+        version: 1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))
       '@cio/email':
         specifier: workspace:*
         version: link:../email
@@ -842,7 +876,7 @@ importers:
         version: 6.0.0
       better-auth:
         specifier: ^1.4.18
-        version: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
+        version: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
       drizzle-kit:
         specifier: ^0.31.8
         version: 0.31.8
@@ -960,13 +994,19 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.2.2
-        version: 1.6.1(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+        version: 1.6.1(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
 
   packages/storybook:
     dependencies:
       '@cio/ui':
         specifier: workspace:*
         version: link:../ui
+      svelte-inview:
+        specifier: ^4.0.4
+        version: 4.0.4(svelte@5.46.0)
+      svelte-motion:
+        specifier: ^0.12.2
+        version: 0.12.2(svelte@5.46.0)
     devDependencies:
       '@aws-sdk/client-s3':
         specifier: ^3.388.0
@@ -985,7 +1025,7 @@ importers:
         version: 8.6.15(react@19.2.3)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))
       '@storybook/addon-svelte-csf':
         specifier: ^5.0.6
-        version: 5.0.10(@storybook/svelte@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0))(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.0.10(@storybook/svelte@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0))(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/blocks':
         specifier: ^8.4.2
         version: 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))
@@ -994,19 +1034,19 @@ importers:
         version: 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)
       '@storybook/svelte-vite':
         specifier: ^10.0.2
-        version: 10.1.10(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 10.1.10(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/sveltekit':
         specifier: ^8.4.2
-        version: 8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/test':
         specifier: ^8.4.2
         version: 8.6.14(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.1
-        version: 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tiptap/core':
         specifier: ^3.7.1
         version: 3.14.0(@tiptap/pm@3.14.0)
@@ -1039,7 +1079,7 @@ importers:
         version: 0.3.50(svelte@5.46.0)(typescript@5.9.3)
       vite:
         specifier: ^7.1.4
-        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/tsconfig: {}
 
@@ -1135,6 +1175,12 @@ importers:
       svelte-dnd-action:
         specifier: ^0.9.68
         version: 0.9.68(svelte@5.46.0)
+      svelte-inview:
+        specifier: ^4.0.4
+        version: 4.0.4(svelte@5.46.0)
+      svelte-motion:
+        specifier: ^0.12.2
+        version: 0.12.2(svelte@5.46.0)
       svelte-tiptap:
         specifier: ^2.2.0
         version: 2.2.0(@tiptap/core@3.14.0(@tiptap/pm@3.14.0))(@tiptap/extension-bubble-menu@3.14.0(@tiptap/core@3.14.0(@tiptap/pm@3.14.0))(@tiptap/pm@3.14.0))(@tiptap/extension-floating-menu@3.14.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.14.0(@tiptap/pm@3.14.0))(@tiptap/pm@3.14.0))(@tiptap/pm@3.14.0)(svelte@5.46.0)
@@ -1159,13 +1205,13 @@ importers:
         version: 3.22.0
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
-        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))
+        version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.1
-        version: 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tailwindcss/cli':
         specifier: ^4.1.18
         version: 4.2.1
@@ -1189,7 +1235,7 @@ importers:
         version: 3.0.2
       bits-ui:
         specifier: ^2.16.1
-        version: 2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+        version: 2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1204,7 +1250,7 @@ importers:
         version: 1.1.0(svelte@5.46.0)
       runed:
         specifier: ^0.37.1
-        version: 0.37.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(zod@4.3.6)
+        version: 0.37.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(zod@4.3.6)
       shiki:
         specifier: ^3.22.0
         version: 3.22.0
@@ -1219,7 +1265,7 @@ importers:
         version: 1.0.7(svelte@5.46.0)
       svelte-toolbelt:
         specifier: ^0.10.6
-        version: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+        version: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
@@ -1954,18 +2000,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-transform-regenerator@7.28.4':
     resolution: {integrity: sha512-+ZEdQlBoRg9m2NnzvEeLgtvBMO4tkFBw5SQIUgLICgTrumLoU7lr+Oghi6km2PFj+dbUt2u1oby2w3BDO9YQnA==}
     engines: {node: '>=6.9.0'}
@@ -3451,9 +3485,6 @@ packages:
   '@internationalized/date@3.10.1':
     resolution: {integrity: sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==}
 
-  '@ioredis/commands@1.4.0':
-    resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
-
   '@istanbuljs/load-nyc-config@1.1.0':
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -3582,10 +3613,8 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@melt-ui/svelte@0.76.2':
-    resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
-    peerDependencies:
-      svelte: '>=3 <5'
+  '@mjackson/node-fetch-server@0.2.0':
+    resolution: {integrity: sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==}
 
   '@modelcontextprotocol/sdk@1.27.1':
     resolution: {integrity: sha512-sr6GbP+4edBwFndLbM60gf07z0FQ79gaExpnsjMGePXqFcSSb7t6iscpjk9DhFhwd+mTEQrzNafGP8/iGGFYaA==}
@@ -3597,9 +3626,6 @@ packages:
       '@cfworker/json-schema':
         optional: true
 
-  '@napi-rs/wasm-runtime@1.1.0':
-    resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
-
   '@napi-rs/wasm-runtime@1.1.1':
     resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
 
@@ -3643,95 +3669,6 @@ packages:
     resolution: {integrity: sha512-a61ljmRVVyG5MC/698C8/FfFDw5a8LOIvyOLW5fztgUXqUpc1jOfQzOitSCbge657OgXXThmY3Tk8fpiDb4UcA==}
     engines: {node: '>= 20.0.0'}
 
-  '@oxc-minify/binding-android-arm64@0.96.0':
-    resolution: {integrity: sha512-lzeIEMu/v6Y+La5JSesq4hvyKtKBq84cgQpKYTYM/yGuNk2tfd5Ha31hnC+mTh48lp/5vZH+WBfjVUjjINCfug==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-minify/binding-darwin-arm64@0.96.0':
-    resolution: {integrity: sha512-i0LkJAUXb4BeBFrJQbMKQPoxf8+cFEffDyLSb7NEzzKuPcH8qrVsnEItoOzeAdYam8Sr6qCHVwmBNEQzl7PWpw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-minify/binding-darwin-x64@0.96.0':
-    resolution: {integrity: sha512-C5vI0WPR+KPIFAD5LMOJk2J8iiT+Nv65vDXmemzXEXouzfEOLYNqnW+u6NSsccpuZHHWAiLyPFkYvKFduveAUQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-minify/binding-freebsd-x64@0.96.0':
-    resolution: {integrity: sha512-3//5DNx+xUjVBMLLk2sl6hfe4fwfENJtjVQUBXjxzwPuv8xgZUqASG4cRG3WqG5Qe8dV6SbCI4EgKQFjO4KCZA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-minify/binding-linux-arm-gnueabihf@0.96.0':
-    resolution: {integrity: sha512-WXChFKV7VdDk1NePDK1J31cpSvxACAVztJ7f7lJVYBTkH+iz5D0lCqPcE7a9eb7nC3xvz4yk7DM6dA9wlUQkQg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-arm-musleabihf@0.96.0':
-    resolution: {integrity: sha512-7B18glYMX4Z/YoqgE3VRLs/2YhVLxlxNKSgrtsRpuR8xv58xca+hEhiFwZN1Rn+NSMZ29Z33LWD7iYWnqYFvRA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-arm64-gnu@0.96.0':
-    resolution: {integrity: sha512-Yl+KcTldsEJNcaYxxonwAXZ2q3gxIzn3kXYQWgKWdaGIpNhOCWqF+KE5WLsldoh5Ro5SHtomvb8GM6cXrIBMog==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-arm64-musl@0.96.0':
-    resolution: {integrity: sha512-rNqoFWOWaxwMmUY5fspd/h5HfvgUlA3sv9CUdA2MpnHFiyoJNovR7WU8tGh+Yn0qOAs0SNH0a05gIthHig14IA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-riscv64-gnu@0.96.0':
-    resolution: {integrity: sha512-3paajIuzGnukHwSI3YBjYVqbd72pZd8NJxaayaNFR0AByIm8rmIT5RqFXbq8j2uhtpmNdZRXiu0em1zOmIScWA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-s390x-gnu@0.96.0':
-    resolution: {integrity: sha512-9ESrpkB2XG0lQ89JlsxlZa86iQCOs+jkDZLl6O+u5wb7ynUy21bpJJ1joauCOSYIOUlSy3+LbtJLiqi7oSQt5Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-x64-gnu@0.96.0':
-    resolution: {integrity: sha512-UMM1jkns+p+WwwmdjC5giI3SfR2BCTga18x3C0cAu6vDVf4W37uTZeTtSIGmwatTBbgiq++Te24/DE0oCdm1iQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-x64-musl@0.96.0':
-    resolution: {integrity: sha512-8b1naiC7MdP7xeMi7cQ5tb9W1rZAP9Qz/jBRqp1Y5EOZ1yhSGnf1QWuZ/0pCc+XiB9vEHXEY3Aki/H+86m2eOg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-minify/binding-wasm32-wasi@0.96.0':
-    resolution: {integrity: sha512-bjGDjkGzo3GWU9Vg2qiFUrfoo5QxojPNV/2RHTlbIB5FWkkV4ExVjsfyqihFiAuj0NXIZqd2SAiEq9htVd3RFw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-minify/binding-win32-arm64-msvc@0.96.0':
-    resolution: {integrity: sha512-4L4DlHUT47qMWQuTyUghpncR3NZHWtxvd0G1KgSjVgXf+cXzFdWQCWZZtCU0yrmOoVCNUf4S04IFCJyAe+Ie7A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-minify/binding-win32-x64-msvc@0.96.0':
-    resolution: {integrity: sha512-T2ijfqZLpV2bgGGocXV4SXTuMoouqN0asYTIm+7jVOLvT5XgDogf3ZvCmiEnSWmxl21+r5wHcs8voU2iUROXAg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@oxc-parser/binding-android-arm-eabi@0.112.0':
     resolution: {integrity: sha512-retxBzJ39Da7Lh/eZTn9+HJgTeDUxZIpuI0urOsmcFsBKXAth3lc1jIvwseQ9qbAI/VrsoFOXiGIzgclARbAHg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3854,95 +3791,6 @@ packages:
   '@oxc-project/types@0.112.0':
     resolution: {integrity: sha512-m6RebKHIRsax2iCwVpYW2ErQwa4ywHJrE4sCK3/8JK8ZZAWOKXaRJFl/uP51gaVyyXlaS4+chU1nSCdzYf6QqQ==}
 
-  '@oxc-transform/binding-android-arm64@0.96.0':
-    resolution: {integrity: sha512-wOm+ZsqFvyZ7B9RefUMsj0zcXw77Z2pXA51nbSQyPXqr+g0/pDGxriZWP8Sdpz/e4AEaKPA9DvrwyOZxu7GRDQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-transform/binding-darwin-arm64@0.96.0':
-    resolution: {integrity: sha512-td1sbcvzsyuoNRiNdIRodPXRtFFwxzPpC/6/yIUtRRhKn30XQcizxupIvQQVpJWWchxkphbBDh6UN+u+2CJ8Zw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-transform/binding-darwin-x64@0.96.0':
-    resolution: {integrity: sha512-xgqxnqhPYH2NYkgbqtnCJfhbXvxIf/pnhF/ig5UBK8PYpCEWIP/cfLpQRQ9DcQnRfuxi7RMIF6LdmB1AiS6Fkg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-transform/binding-freebsd-x64@0.96.0':
-    resolution: {integrity: sha512-1i67OXdl/rvSkcTXqDlh6qGRXYseEmf0rl/R+/i88scZ/o3A+FzlX56sThuaPzSSv9eVgesnoYUjIBJELFc1oA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-transform/binding-linux-arm-gnueabihf@0.96.0':
-    resolution: {integrity: sha512-9MJBs0SWODsqyzO3eAnacXgJ/sZu1xqinjEwBzkcZ3tQI8nKhMADOzu2NzbVWDWujeoC8DESXaO08tujvUru+Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-arm-musleabihf@0.96.0':
-    resolution: {integrity: sha512-BQom57I2ScccixljNYh2Wy+5oVZtF1LXiiUPxSLtDHbsanpEvV/+kzCagQpTjk1BVzSQzOxfEUWjvL7mY53pRQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-arm64-gnu@0.96.0':
-    resolution: {integrity: sha512-kaqvUzNu8LL4aBSXqcqGVLFG13GmJEplRI2+yqzkgAItxoP/LfFMdEIErlTWLGyBwd0OLiNMHrOvkcCQRWadVg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-arm64-musl@0.96.0':
-    resolution: {integrity: sha512-EiG/L3wEkPgTm4p906ufptyblBgtiQWTubGg/JEw82f8uLRroayr5zhbUqx40EgH037a3SfJthIyLZi7XPRFJw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-riscv64-gnu@0.96.0':
-    resolution: {integrity: sha512-r01CY6OxKGtVeYnvH4mGmtkQMlLkXdPWWNXwo5o7fE2s/fgZPMpqh8bAuXEhuMXipZRJrjxTk1+ZQ4KCHpMn3Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-s390x-gnu@0.96.0':
-    resolution: {integrity: sha512-4djg2vYLGbVeS8YiA2K4RPPpZE4fxTGCX5g/bOMbCYyirDbmBAIop4eOAj8vOA9i1CcWbDtmp+PVJ1dSw7f3IQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-x64-gnu@0.96.0':
-    resolution: {integrity: sha512-f6pcWVz57Y8jXa2OS7cz3aRNuks34Q3j61+3nQ4xTE8H1KbalcEvHNmM92OEddaJ8QLs9YcE0kUC6eDTbY34+A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-x64-musl@0.96.0':
-    resolution: {integrity: sha512-NSiRtFvR7Pbhv3mWyPMkTK38czIjcnK0+K5STo3CuzZRVbX1TM17zGdHzKBUHZu7v6IQ6/XsQ3ELa1BlEHPGWQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-transform/binding-wasm32-wasi@0.96.0':
-    resolution: {integrity: sha512-A91ARLiuZHGN4hBds9s7bW3czUuLuHLsV+cz44iF9j8e1zX9m2hNGXf/acQRbg/zcFUXmjz5nmk8EkZyob876w==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-transform/binding-win32-arm64-msvc@0.96.0':
-    resolution: {integrity: sha512-IedJf40djKgDObomhYjdRAlmSYUEdfqX3A3M9KfUltl9AghTBBLkTzUMA7O09oo71vYf5TEhbFM7+Vn5vqw7AQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-transform/binding-win32-x64-msvc@0.96.0':
-    resolution: {integrity: sha512-0fI0P0W7bSO/GCP/N5dkmtB9vBqCA4ggo1WmXTnxNJVmFFOtcA1vYm1I9jl8fxo+sucW2WnlpnI4fjKdo3JKxA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -4418,6 +4266,58 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
+  '@react-router/dev@7.13.2':
+    resolution: {integrity: sha512-8Lgf+WCEIPDhp22YB3fyoiWnNyM39sjkfWnSxAwy+Sg83OHxnQFQg0OK1oPM9lm1n/hxJe4lLYOPNwDSyeGiog==}
+    engines: {node: '>=20.0.0'}
+    hasBin: true
+    peerDependencies:
+      '@react-router/serve': ^7.13.2
+      '@vitejs/plugin-rsc': ~0.5.7
+      react-router: ^7.13.2
+      react-server-dom-webpack: ^19.2.3
+      typescript: ^5.1.0
+      vite: ^5.1.0 || ^6.0.0 || ^7.0.0
+      wrangler: ^3.28.2 || ^4.0.0
+    peerDependenciesMeta:
+      '@react-router/serve':
+        optional: true
+      '@vitejs/plugin-rsc':
+        optional: true
+      react-server-dom-webpack:
+        optional: true
+      typescript:
+        optional: true
+      wrangler:
+        optional: true
+
+  '@react-router/express@7.13.2':
+    resolution: {integrity: sha512-OuhenOg3LmCLT23+WA6CU/nIyhGv0/3kmyqpQuXxearj6Gbn1ufI+mkejFWPXsNJf+/y1ttY6P6XL8PzNX5E8w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      express: ^4.17.1 || ^5
+      react-router: 7.13.2
+      typescript: ^5.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/node@7.13.2':
+    resolution: {integrity: sha512-1q0v1gclPga2mNQ7Q+MLuLdEPRpDefAmz25jOlrEz+jSyYkaFt9qbSdkTUPw/QIg/DDnnT3QV8lhgr6r5iIAOA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react-router: 7.13.2
+      typescript: ^5.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/serve@7.13.2':
+    resolution: {integrity: sha512-H/clM2tMw7daRd7bTM0kYYim4ZLrcWd30DY+R/xu8h2t2YvdfLAfHD0GfqGu3Ds8yAOrWFqH5Ly7BM7jk7fvCg==}
+    engines: {node: '>=20.0.0'}
+    hasBin: true
+    peerDependencies:
+      react-router: 7.13.2
+
   '@redis/bloom@1.2.0':
     resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==}
     peerDependencies:
@@ -4450,12 +4350,12 @@ packages:
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
+  '@remix-run/node-fetch-server@0.13.0':
+    resolution: {integrity: sha512-1EsNo0ZpgXu/90AWoRZf/oE3RVTUS80tiTUpt+hv5pjtAkw7icN4WskDwz/KdAw5ARbJLMhZBrO1NqThmy/McA==}
+
   '@rolldown/pluginutils@1.0.0-beta.40':
     resolution: {integrity: sha512-s3GeJKSQOwBlzdUrj4ISjJj5SfSh+aqn0wjOar4Bx95iV1ETI7F6S/5hLcfAxZ9kXDcyrAkxPlqmd1ZITttf+w==}
 
-  '@rolldown/pluginutils@1.0.0-beta.53':
-    resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
-
   '@rollup/plugin-commonjs@25.0.8':
     resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
     engines: {node: '>=14.0.0'}
@@ -5333,11 +5233,6 @@ packages:
     resolution: {integrity: sha512-b7MGn51IA80oSG+7fuAgzfQ+7pZBgjzbqwmiv6NO7/+a1sev32cGqnwhscT7h0EcAvMa9r7gjRylqOH8Xhc4DA==}
     hasBin: true
 
-  '@tailwindcss/container-queries@0.1.1':
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
-    peerDependencies:
-      tailwindcss: '>=3.2.0'
-
   '@tailwindcss/forms@0.5.11':
     resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
     peerDependencies:
@@ -5349,6 +5244,9 @@ packages:
   '@tailwindcss/node@4.2.1':
     resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
 
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
   '@tailwindcss/oxide-android-arm64@4.1.18':
     resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
     engines: {node: '>= 10'}
@@ -5361,6 +5259,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
   '@tailwindcss/oxide-darwin-arm64@4.1.18':
     resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
     engines: {node: '>= 10'}
@@ -5373,6 +5277,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-x64@4.1.18':
     resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
     engines: {node: '>= 10'}
@@ -5385,6 +5295,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
   '@tailwindcss/oxide-freebsd-x64@4.1.18':
     resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
     engines: {node: '>= 10'}
@@ -5397,6 +5313,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
     engines: {node: '>= 10'}
@@ -5409,6 +5331,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
     engines: {node: '>= 10'}
@@ -5421,6 +5349,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
@@ -5433,6 +5367,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
@@ -5445,6 +5385,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
@@ -5457,6 +5403,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
     engines: {node: '>=14.0.0'}
@@ -5481,6 +5433,18 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
     engines: {node: '>= 10'}
@@ -5493,6 +5457,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
     engines: {node: '>= 10'}
@@ -5505,6 +5475,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
   '@tailwindcss/oxide@4.1.18':
     resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
     engines: {node: '>= 10'}
@@ -5513,9 +5489,16 @@ packages:
     resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
   '@tailwindcss/postcss@4.1.18':
     resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==}
 
+  '@tailwindcss/postcss@4.2.2':
+    resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
+
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
@@ -5536,18 +5519,6 @@ packages:
     resolution: {integrity: sha512-LS54XNyxyTs5m/pl1lkwlg7uZM3lvsv2FIIV1rsJgnfwVCnI+n4ZGZ2CcjNT13BPu/3hPP+iHmliBSscJxW5FQ==}
     engines: {node: '>=12'}
 
-  '@tanstack/react-router-devtools@1.143.4':
-    resolution: {integrity: sha512-+AKGHkC2aDL93XCWDMB9/cf8+N4awGylCK0mk0kJ5BUBVSoZpNVLtZiBFCxRuvZCQtY5PbdYT4xeUA0dbgH9Eg==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      '@tanstack/react-router': ^1.143.4
-      '@tanstack/router-core': ^1.143.4
-      react: '>=18.0.0 || >=19.0.0'
-      react-dom: '>=18.0.0 || >=19.0.0'
-    peerDependenciesMeta:
-      '@tanstack/router-core':
-        optional: true
-
   '@tanstack/react-router@1.143.4':
     resolution: {integrity: sha512-7Tz7YwJc8RKDQga3yNY03zNc/ey+AIDA1A5ppGYqIM+UR47uGdAKc/4MSpItznqkSUi1Csrw2nVtICSkGanKdQ==}
     engines: {node: '>=12'}
@@ -5587,17 +5558,6 @@ packages:
     resolution: {integrity: sha512-VlSXrYQ/oBoUUGJx6t93KfzGHeBvL6GOmKRouPbHNqKi4ueVnQ2PdRX+s9eZoDAdcVsgmS7YlTCRgIbh2sAQpA==}
     engines: {node: '>=12'}
 
-  '@tanstack/router-devtools-core@1.143.4':
-    resolution: {integrity: sha512-f5uatl8LIlMS4O2uIQ/oh58pF62/N1qKrBPtYvc7B1Tvf16ER8Nr1t8d4a85MiQyyA4kgiqfnYryOfW+diLjwg==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      '@tanstack/router-core': ^1.143.4
-      csstype: ^3.0.10
-      solid-js: '>=1.9.5'
-    peerDependenciesMeta:
-      csstype:
-        optional: true
-
   '@tanstack/router-generator@1.143.4':
     resolution: {integrity: sha512-QBqJCNoXJQmWkoAR6VqSuA7nBUSf3y5p8t4JpbtLGUgQ7pLu03nUSjcnLqN84BednhpZXnh/Mw3jxnpA//UWCQ==}
     engines: {node: '>=12'}
@@ -6235,12 +6195,6 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  '@vitejs/plugin-react@5.1.2':
-    resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-
   '@vitest/coverage-v8@1.6.1':
     resolution: {integrity: sha512-6YeRZwuO4oTGKxD3bijok756oktHSIm3eczVVzNe3scqzuhLwltIF3S9ZL/vwOVIpURmU6SnZhziXXAfw8/Qlw==}
     peerDependencies:
@@ -6369,6 +6323,10 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -6528,6 +6486,9 @@ packages:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
@@ -6646,6 +6607,10 @@ packages:
     resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
     hasBin: true
 
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
   bcrypt@6.0.0:
     resolution: {integrity: sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==}
     engines: {node: '>= 18'}
@@ -6734,11 +6699,6 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  bits-ui@0.21.16:
-    resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==}
-    peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.118
-
   bits-ui@2.14.4:
     resolution: {integrity: sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg==}
     engines: {node: '>=20'}
@@ -7061,6 +7021,14 @@ packages:
   compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
 
+  compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+
+  compression@1.8.1:
+    resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
+    engines: {node: '>= 0.8.0'}
+
   compute-scroll-into-view@3.1.1:
     resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
@@ -7079,13 +7047,16 @@ packages:
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
 
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@1.0.1:
     resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
     engines: {node: '>=18'}
@@ -7189,6 +7160,10 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
@@ -7444,29 +7419,6 @@ packages:
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
-  db0@0.3.4:
-    resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
-    peerDependencies:
-      '@electric-sql/pglite': '*'
-      '@libsql/client': '*'
-      better-sqlite3: '*'
-      drizzle-orm: '*'
-      mysql2: '*'
-      sqlite3: '*'
-    peerDependenciesMeta:
-      '@electric-sql/pglite':
-        optional: true
-      '@libsql/client':
-        optional: true
-      better-sqlite3:
-        optional: true
-      drizzle-orm:
-        optional: true
-      mysql2:
-        optional: true
-      sqlite3:
-        optional: true
-
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -7553,10 +7505,6 @@ packages:
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
-  denque@2.1.0:
-    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
-    engines: {node: '>=0.10'}
-
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -7815,10 +7763,6 @@ packages:
   encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
 
-  enhanced-resolve@5.18.4:
-    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
-    engines: {node: '>=10.13.0'}
-
   enhanced-resolve@5.19.0:
     resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
@@ -8116,6 +8060,10 @@ packages:
     peerDependencies:
       express: '>= 4.11'
 
+  express@4.22.1:
+    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
+    engines: {node: '>= 0.10.0'}
+
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
@@ -8202,6 +8150,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@1.3.2:
+    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
+    engines: {node: '>= 0.8'}
+
   finalhandler@2.1.1:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
     engines: {node: '>= 18.0.0'}
@@ -8233,9 +8185,6 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  focus-trap@7.7.0:
-    resolution: {integrity: sha512-DJJDHpEgoSbP8ZE1MNeU2IzCpfFyFdNZZRilqmfH2XiQsPK6PtD8AfJqWzEBudUQB2yHwZc5iq54rjTaGQ+ljw==}
-
   follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
     engines: {node: '>=4.0'}
@@ -8263,6 +8212,10 @@ packages:
   framesync@6.1.2:
     resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
 
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -8415,6 +8368,10 @@ packages:
     engines: {node: '>=6.9.0'}
     hasBin: true
 
+  get-port@5.1.1:
+    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
+    engines: {node: '>=8'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -8492,11 +8449,6 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
-  goober@2.1.18:
-    resolution: {integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==}
-    peerDependencies:
-      csstype: ^3.0.10
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -8507,15 +8459,6 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  h3@2.0.1-rc.5:
-    resolution: {integrity: sha512-qkohAzCab0nLzXNm78tBjZDvtKMTmtygS8BJLT3VPczAQofdqlFXDPkXdLMJN4r05+xqneG8snZJ0HgkERCZTg==}
-    engines: {node: '>=20.11.1'}
-    peerDependencies:
-      crossws: ^0.4.1
-    peerDependenciesMeta:
-      crossws:
-        optional: true
-
   h3@2.0.1-rc.6:
     resolution: {integrity: sha512-kKLFVFNJlDVTbQjakz1ZTFSHB9+oi9+Khf0v7xQsUKU3iOqu2qmrFzTD56YsDvvj2nBgqVDphGRXB2VRursw4w==}
     engines: {node: '>=20.11.1'}
@@ -8767,10 +8710,6 @@ packages:
   intl-messageformat@10.7.18:
     resolution: {integrity: sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==}
 
-  ioredis@5.8.2:
-    resolution: {integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==}
-    engines: {node: '>=12.22.0'}
-
   ip-address@10.1.0:
     resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
     engines: {node: '>= 12'}
@@ -9188,6 +9127,11 @@ packages:
       canvas:
         optional: true
 
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -9310,6 +9254,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
   lightningcss-darwin-arm64@1.30.2:
     resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
     engines: {node: '>= 12.0.0'}
@@ -9322,6 +9272,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.30.2:
     resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
     engines: {node: '>= 12.0.0'}
@@ -9334,6 +9290,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-freebsd-x64@1.30.2:
     resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
     engines: {node: '>= 12.0.0'}
@@ -9346,6 +9308,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-linux-arm-gnueabihf@1.30.2:
     resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
     engines: {node: '>= 12.0.0'}
@@ -9358,6 +9326,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.30.2:
     resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
     engines: {node: '>= 12.0.0'}
@@ -9370,6 +9344,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
@@ -9382,6 +9362,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
@@ -9394,6 +9380,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
@@ -9406,6 +9398,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
     engines: {node: '>= 12.0.0'}
@@ -9418,6 +9416,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.30.2:
     resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
     engines: {node: '>= 12.0.0'}
@@ -9430,6 +9434,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss@1.30.2:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
@@ -9438,6 +9448,10 @@ packages:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
 
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -9491,12 +9505,6 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
-  lodash.defaults@4.2.0:
-    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
-
-  lodash.isarguments@3.1.0:
-    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
-
   lodash.ismatch@4.4.0:
     resolution: {integrity: sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==}
 
@@ -9697,6 +9705,9 @@ packages:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
 
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -9708,6 +9719,10 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -9833,6 +9848,11 @@ packages:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
 
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -9918,6 +9938,10 @@ packages:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
 
+  morgan@1.10.1:
+    resolution: {integrity: sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==}
+    engines: {node: '>= 0.8.0'}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -9974,6 +9998,14 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
+    engines: {node: '>= 0.6'}
+
   negotiator@1.0.0:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
@@ -9987,28 +10019,6 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  nf3@0.1.12:
-    resolution: {integrity: sha512-qbMXT7RTGh74MYWPeqTIED8nDW70NXOULVHpdWcdZ7IVHVnAsMV9fNugSNnvooipDc1FMOzpis7T9nXJEbJhvQ==}
-
-  nitro@3.0.1-alpha.1:
-    resolution: {integrity: sha512-U4AxIsXxdkxzkFrK0XAw0e5Qbojk8jQ50MjjRBtBakC4HurTtQoiZvF+lSe382jhuQZCfAyywGWOFa9QzXLFaw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      rolldown: '*'
-      rollup: ^4
-      vite: ^7
-      xml2js: ^0.6.2
-    peerDependenciesMeta:
-      rolldown:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      xml2js:
-        optional: true
-
   node-abi@3.85.0:
     resolution: {integrity: sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==}
     engines: {node: '>=10'}
@@ -10112,16 +10122,21 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  ofetch@2.0.0-alpha.3:
-    resolution: {integrity: sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA==}
-
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
+  on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
 
+  on-headers@1.1.0:
+    resolution: {integrity: sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==}
+    engines: {node: '>= 0.8'}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -10173,18 +10188,10 @@ packages:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
 
-  oxc-minify@0.96.0:
-    resolution: {integrity: sha512-dXeeGrfPJJ4rMdw+NrqiCRtbzVX2ogq//R0Xns08zql2HjV3Zi2SBJ65saqfDaJzd2bcHqvGWH+M44EQCHPAcA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-
   oxc-parser@0.112.0:
     resolution: {integrity: sha512-7rQ3QdJwobMQLMZwQaPuPYMEF2fDRZwf51lZ//V+bA37nejjKW5ifMHbbCwvA889Y4RLhT+/wLJpPRhAoBaZYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-transform@0.96.0:
-    resolution: {integrity: sha512-dQPNIF+gHpSkmC0+Vg9IktNyhcn28Y8R3eTLyzn52UNymkasLicl3sFAtz7oEVuFmCpgGjaUTKkwk+jW2cHpDQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-
   p-limit@1.3.0:
     resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
     engines: {node: '>=4'}
@@ -10217,6 +10224,10 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-map@7.0.4:
+    resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
+    engines: {node: '>=18'}
+
   p-try@1.0.0:
     resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
     engines: {node: '>=4'}
@@ -10288,6 +10299,9 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
@@ -10386,6 +10400,9 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
   playwright-core@1.57.0:
     resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
     engines: {node: '>=18'}
@@ -10535,67 +10552,6 @@ packages:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier-plugin-tailwindcss@0.6.14:
-    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
-    engines: {node: '>=14.21.3'}
-    peerDependencies:
-      '@ianvs/prettier-plugin-sort-imports': '*'
-      '@prettier/plugin-hermes': '*'
-      '@prettier/plugin-oxc': '*'
-      '@prettier/plugin-pug': '*'
-      '@shopify/prettier-plugin-liquid': '*'
-      '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig': '*'
-      prettier: ^3.0
-      prettier-plugin-astro: '*'
-      prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
-      prettier-plugin-jsdoc: '*'
-      prettier-plugin-marko: '*'
-      prettier-plugin-multiline-arrays: '*'
-      prettier-plugin-organize-attributes: '*'
-      prettier-plugin-organize-imports: '*'
-      prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
-      prettier-plugin-svelte: '*'
-    peerDependenciesMeta:
-      '@ianvs/prettier-plugin-sort-imports':
-        optional: true
-      '@prettier/plugin-hermes':
-        optional: true
-      '@prettier/plugin-oxc':
-        optional: true
-      '@prettier/plugin-pug':
-        optional: true
-      '@shopify/prettier-plugin-liquid':
-        optional: true
-      '@trivago/prettier-plugin-sort-imports':
-        optional: true
-      '@zackad/prettier-plugin-twig':
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-css-order:
-        optional: true
-      prettier-plugin-import-sort:
-        optional: true
-      prettier-plugin-jsdoc:
-        optional: true
-      prettier-plugin-marko:
-        optional: true
-      prettier-plugin-multiline-arrays:
-        optional: true
-      prettier-plugin-organize-attributes:
-        optional: true
-      prettier-plugin-organize-imports:
-        optional: true
-      prettier-plugin-sort-imports:
-        optional: true
-      prettier-plugin-style-order:
-        optional: true
-      prettier-plugin-svelte:
-        optional: true
-
   prettier-plugin-tailwindcss@0.7.2:
     resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
     engines: {node: '>=20.19'}
@@ -10843,8 +10799,8 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-refresh@0.18.0:
-    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+  react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
   react-remove-scroll-bar@2.3.8:
@@ -10867,6 +10823,16 @@ packages:
       '@types/react':
         optional: true
 
+  react-router@7.13.2:
+    resolution: {integrity: sha512-tX1Aee+ArlKQP+NIUd7SE6Li+CiGKwQtbS+FfRxPX6Pe4vHOo6nr9d++u5cwg+Z8K/x8tP+7qLmujDtfrAoUJA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -10941,14 +10907,6 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  redis-errors@1.2.0:
-    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
-    engines: {node: '>=4'}
-
-  redis-parser@3.0.0:
-    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
-    engines: {node: '>=4'}
-
   redis@4.7.1:
     resolution: {integrity: sha512-S1bJDnqLftzHXHP8JsT5II/CtHWQrASX5K96REjWjlmWKrviSOLWmM7QnRLstAWsu1VBBV1ffV6DzCvxNP0UJQ==}
 
@@ -11226,6 +11184,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@0.19.2:
+    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
+    engines: {node: '>= 0.8.0'}
+
   send@1.2.1:
     resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
     engines: {node: '>= 18'}
@@ -11250,6 +11212,10 @@ packages:
     resolution: {integrity: sha512-9GOc+8T6LN4aByLN75uRvMbrwY5RDBW6lSlknsY4LEa9ZmWcxKcRe1G/Q3HZXjltxMHTrStnvrwAICxZrhldtg==}
     engines: {node: '>=10'}
 
+  serve-static@1.16.3:
+    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
+    engines: {node: '>= 0.8.0'}
+
   serve-static@2.2.1:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
@@ -11434,9 +11400,6 @@ packages:
   stacktracey@2.1.8:
     resolution: {integrity: sha512-Kpij9riA+UNg7TnphqjH7/CzctQ/owJGNbFkfEeve4Z4uxT5+JapVLFXcsurIfN34gnTWZNJ/f7NMG0E8JDzTw==}
 
-  standard-as-callback@2.1.0:
-    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
-
   standard-version@9.5.0:
     resolution: {integrity: sha512-3zWJ/mmZQsOaO+fOlsa0+QK90pwhNd042qEcw6hKFNoLFs7peGyvPffpEBbK/DSGPbyOvli0mUIFv5A4qTjh2Q==}
     engines: {node: '>=10'}
@@ -11847,6 +11810,9 @@ packages:
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -12229,10 +12195,6 @@ packages:
     resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
     engines: {node: '>=14.0'}
 
-  undici@7.16.0:
-    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
-    engines: {node: '>=20.18.1'}
-
   undici@7.24.6:
     resolution: {integrity: sha512-Xi4agocCbRzt0yYMZGMA6ApD7gvtUFaxm4ZmeacWI4cZxaF6C+8I8QfofC20NAePiB/IcvZmzkJ7XPa471AEtA==}
     engines: {node: '>=20.18.1'}
@@ -12240,9 +12202,6 @@ packages:
   unenv@2.0.0-rc.17:
     resolution: {integrity: sha512-B06u0wXkEd+o5gOCMl/ZHl5cfpYbDZKAT+HWTL+Hws6jWu7dCiqBBXXXzMFcFVJb8D4ytAnYmxJA83uwOQRSsg==}
 
-  unenv@2.0.0-rc.24:
-    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
-
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -12306,80 +12265,6 @@ packages:
     resolution: {integrity: sha512-0IzJGKbD6qHm0wg5sNndcCjhNDrtAr08/mySr9TGJ6biD7N03ZldidqXopkOvhAABaeFtRGYBrX1YkgMhKrFOQ==}
     engines: {node: '>=10'}
 
-  unstorage@2.0.0-alpha.4:
-    resolution: {integrity: sha512-ywXZMZRfrvmO1giJeMTCw6VUn0ALYxVl8pFqJPStiyQUvgJImejtAHrKvXPj4QGJAoS/iLGcVGF6ljN/lkh1bw==}
-    peerDependencies:
-      '@azure/app-configuration': ^1.8.0
-      '@azure/cosmos': ^4.2.0
-      '@azure/data-tables': ^13.3.0
-      '@azure/identity': ^4.6.0
-      '@azure/keyvault-secrets': ^4.9.0
-      '@azure/storage-blob': ^12.26.0
-      '@capacitor/preferences': ^6.0.3 || ^7.0.0
-      '@deno/kv': '>=0.9.0'
-      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
-      '@planetscale/database': ^1.19.0
-      '@upstash/redis': ^1.34.3
-      '@vercel/blob': '>=0.27.1'
-      '@vercel/functions': ^2.2.12 || ^3.0.0
-      '@vercel/kv': ^1.0.1
-      aws4fetch: ^1.0.20
-      chokidar: ^4.0.3
-      db0: '>=0.2.1'
-      idb-keyval: ^6.2.1
-      ioredis: ^5.4.2
-      lru-cache: ^11.2.2
-      mongodb: ^6.20.0
-      ofetch: '*'
-      uploadthing: ^7.4.4
-    peerDependenciesMeta:
-      '@azure/app-configuration':
-        optional: true
-      '@azure/cosmos':
-        optional: true
-      '@azure/data-tables':
-        optional: true
-      '@azure/identity':
-        optional: true
-      '@azure/keyvault-secrets':
-        optional: true
-      '@azure/storage-blob':
-        optional: true
-      '@capacitor/preferences':
-        optional: true
-      '@deno/kv':
-        optional: true
-      '@netlify/blobs':
-        optional: true
-      '@planetscale/database':
-        optional: true
-      '@upstash/redis':
-        optional: true
-      '@vercel/blob':
-        optional: true
-      '@vercel/functions':
-        optional: true
-      '@vercel/kv':
-        optional: true
-      aws4fetch:
-        optional: true
-      chokidar:
-        optional: true
-      db0:
-        optional: true
-      idb-keyval:
-        optional: true
-      ioredis:
-        optional: true
-      lru-cache:
-        optional: true
-      mongodb:
-        optional: true
-      ofetch:
-        optional: true
-      uploadthing:
-        optional: true
-
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -12427,6 +12312,10 @@ packages:
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
 
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
   utrie@1.0.2:
     resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
 
@@ -12448,6 +12337,14 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
+  valibot@1.3.1:
+    resolution: {integrity: sha512-sfdRir/QFM0JaF22hqTroPc5xy4DimuGQVKFrzF1YfGwaS1nJot3Y8VqMdLO2Lg27fMzat2yD3pY5PbAYO39Gg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -12480,6 +12377,16 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite-plugin-css-injected-by-js@3.5.2:
+    resolution: {integrity: sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==}
+    peerDependencies:
+      vite: '>2.0.0-0'
+
   vite-tsconfig-paths@5.1.4:
     resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
     peerDependencies:
@@ -13549,6 +13456,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
+    optional: true
 
   '@babel/code-frame@7.27.1':
     dependencies:
@@ -14114,16 +14022,6 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -14346,21 +14244,21 @@ snapshots:
       nanostores: 1.1.0
       zod: 4.3.6
 
-  '@better-auth/sso@1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))':
+  '@better-auth/sso@1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))':
     dependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
+      better-auth: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
       fast-xml-parser: 5.2.5
       jose: 6.1.3
       samlify: 2.10.2
       zod: 4.3.6
 
-  '@better-auth/sso@1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))':
+  '@better-auth/sso@1.4.18(@better-auth/utils@0.3.0)(better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)))':
     dependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
+      better-auth: 1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3))
       fast-xml-parser: 5.2.5
       jose: 6.1.3
       samlify: 2.10.2
@@ -15263,9 +15161,6 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.17
 
-  '@ioredis/commands@1.4.0':
-    optional: true
-
   '@istanbuljs/load-nyc-config@1.1.0':
     dependencies:
       camelcase: 5.3.1
@@ -15546,15 +15441,7 @@ snapshots:
       '@types/react': 19.2.7
       react: 19.2.3
 
-  '@melt-ui/svelte@0.76.2(svelte@5.46.0)':
-    dependencies:
-      '@floating-ui/core': 1.7.3
-      '@floating-ui/dom': 1.7.4
-      '@internationalized/date': 3.10.1
-      dequal: 2.0.3
-      focus-trap: 7.7.0
-      nanoid: 5.1.6
-      svelte: 5.46.0
+  '@mjackson/node-fetch-server@0.2.0': {}
 
   '@modelcontextprotocol/sdk@1.27.1(zod@4.3.6)':
     dependencies:
@@ -15578,13 +15465,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@napi-rs/wasm-runtime@1.1.0':
-    dependencies:
-      '@emnapi/core': 1.7.1
-      '@emnapi/runtime': 1.7.1
-      '@tybys/wasm-util': 0.10.1
-    optional: true
-
   '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
       '@emnapi/core': 1.7.1
@@ -15613,67 +15493,24 @@ snapshots:
       '@oozcitak/infra': 2.0.2
       '@oozcitak/url': 3.0.0
       '@oozcitak/util': 10.0.0
+    optional: true
 
   '@oozcitak/infra@2.0.2':
     dependencies:
       '@oozcitak/util': 10.0.0
+    optional: true
 
   '@oozcitak/url@3.0.0':
     dependencies:
       '@oozcitak/infra': 2.0.2
       '@oozcitak/util': 10.0.0
+    optional: true
 
-  '@oozcitak/util@10.0.0': {}
+  '@oozcitak/util@10.0.0':
+    optional: true
 
   '@orama/orama@3.1.18': {}
 
-  '@oxc-minify/binding-android-arm64@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-darwin-arm64@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-darwin-x64@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-freebsd-x64@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-arm-gnueabihf@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-arm-musleabihf@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-arm64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-arm64-musl@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-riscv64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-s390x-gnu@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-x64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-linux-x64-musl@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-wasm32-wasi@0.96.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.0
-    optional: true
-
-  '@oxc-minify/binding-win32-arm64-msvc@0.96.0':
-    optional: true
-
-  '@oxc-minify/binding-win32-x64-msvc@0.96.0':
-    optional: true
-
   '@oxc-parser/binding-android-arm-eabi@0.112.0':
     optional: true
 
@@ -15738,53 +15575,6 @@ snapshots:
 
   '@oxc-project/types@0.112.0': {}
 
-  '@oxc-transform/binding-android-arm64@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-darwin-arm64@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-darwin-x64@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-freebsd-x64@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-arm-gnueabihf@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-arm-musleabihf@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-arm64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-arm64-musl@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-riscv64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-s390x-gnu@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-x64-gnu@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-linux-x64-musl@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-wasm32-wasi@0.96.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.0
-    optional: true
-
-  '@oxc-transform/binding-win32-arm64-msvc@0.96.0':
-    optional: true
-
-  '@oxc-transform/binding-win32-x64-msvc@0.96.0':
-    optional: true
-
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -15854,10 +15644,10 @@ snapshots:
       standardwebhooks: 1.0.0
       zod: 4.2.1
 
-  '@polar-sh/sveltekit@0.2.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(zod@4.2.1)':
+  '@polar-sh/sveltekit@0.2.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(zod@4.2.1)':
     dependencies:
       '@polar-sh/sdk': 0.20.2(zod@4.2.1)
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
     transitivePeerDependencies:
       - zod
 
@@ -16229,6 +16019,87 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@react-router/dev@7.13.2(@react-router/serve@7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3))(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(sass@1.97.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(yaml@2.8.2)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@react-router/node': 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@remix-run/node-fetch-server': 0.13.0
+      arg: 5.0.2
+      babel-dead-code-elimination: 1.0.11
+      chokidar: 4.0.3
+      dedent: 1.7.1
+      es-module-lexer: 1.7.0
+      exit-hook: 2.2.1
+      isbot: 5.1.32
+      jsesc: 3.0.2
+      lodash: 4.17.21
+      p-map: 7.0.4
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      pkg-types: 2.3.0
+      prettier: 3.7.4
+      react-refresh: 0.14.2
+      react-router: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      valibot: 1.3.1(typescript@5.9.3)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+    optionalDependencies:
+      '@react-router/serve': 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      typescript: 5.9.3
+      wrangler: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  '@react-router/express@7.13.2(express@4.22.1)(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@react-router/node': 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      express: 4.22.1
+      react-router: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/node@7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      react-router: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/serve@7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      '@react-router/express': 7.13.2(express@4.22.1)(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@react-router/node': 7.13.2(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      compression: 1.8.1
+      express: 4.22.1
+      get-port: 5.1.1
+      morgan: 1.10.1
+      react-router: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      source-map-support: 0.5.21
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@redis/bloom@1.2.0(@redis/client@1.6.1)':
     dependencies:
       '@redis/client': 1.6.1
@@ -16257,9 +16128,10 @@ snapshots:
 
   '@remirror/core-constants@3.0.0': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.40': {}
+  '@remix-run/node-fetch-server@0.13.0': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.53': {}
+  '@rolldown/pluginutils@1.0.0-beta.40':
+    optional: true
 
   '@rollup/plugin-commonjs@25.0.8(rollup@4.54.0)':
     dependencies:
@@ -16866,21 +16738,23 @@ snapshots:
 
   '@stablelib/base64@1.0.1': {}
 
-  '@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)':
+  '@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/json-schema': 7.0.15
       quansync: 1.0.0
     optionalDependencies:
+      valibot: 1.3.1(typescript@5.9.3)
       zod: 4.2.1
       zod-to-json-schema: 3.25.1(zod@4.2.1)
 
-  '@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1)':
+  '@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(valibot@1.3.1(typescript@5.9.3))(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1)':
     dependencies:
-      '@standard-community/standard-json': 0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)
+      '@standard-community/standard-json': 0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)
       '@standard-schema/spec': 1.1.0
       openapi-types: 12.1.3
     optionalDependencies:
+      valibot: 1.3.1(typescript@5.9.3)
       zod: 4.2.1
       zod-openapi: 5.4.5(zod@4.2.1)
 
@@ -16981,11 +16855,11 @@ snapshots:
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-svelte-csf@5.0.10(@storybook/svelte@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0))(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/addon-svelte-csf@5.0.10(@storybook/svelte@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0))(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@storybook/csf': 0.1.13
       '@storybook/svelte': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       dedent: 1.7.1
       es-toolkit: 1.43.0
       esrap: 1.4.9
@@ -16993,7 +16867,7 @@ snapshots:
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       svelte: 5.46.0
       svelte-ast-print: 0.4.2(svelte@5.46.0)
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       zimmerframe: 1.1.4
     transitivePeerDependencies:
       - babel-plugin-macros
@@ -17016,26 +16890,26 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  '@storybook/builder-vite@10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/builder-vite@10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@storybook/csf-plugin': 10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
-      '@vitest/mocker': 3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@storybook/csf-plugin': 10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/mocker': 3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       ts-dedent: 2.2.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - esbuild
       - msw
       - rollup
       - webpack
 
-  '@storybook/builder-vite@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/builder-vite@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@storybook/csf-plugin': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))
       browser-assert: 1.2.1
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       ts-dedent: 2.2.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@storybook/components@8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))':
     dependencies:
@@ -17062,14 +16936,14 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/csf-plugin@10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.25.12
       rollup: 4.54.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@storybook/csf-plugin@8.6.14(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))':
     dependencies:
@@ -17116,28 +16990,28 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
 
-  '@storybook/svelte-vite@10.1.10(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/svelte-vite@10.1.10(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@storybook/builder-vite': 10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@storybook/builder-vite': 10.1.10(esbuild@0.25.12)(rollup@4.54.0)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/svelte': 10.1.10(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       magic-string: 0.30.21
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       svelte: 5.46.0
       svelte2tsx: 0.7.46(svelte@5.46.0)(typescript@5.9.3)
       typescript: 5.9.3
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - esbuild
       - msw
       - rollup
       - webpack
 
-  '@storybook/svelte-vite@8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/svelte-vite@8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@storybook/builder-vite': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@storybook/builder-vite': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/svelte': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       magic-string: 0.30.21
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       svelte: 5.46.0
@@ -17146,7 +17020,7 @@ snapshots:
       sveltedoc-parser: 4.2.1
       ts-dedent: 2.2.0
       typescript: 5.9.3
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
@@ -17182,15 +17056,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/sveltekit@8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@storybook/sveltekit@8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@storybook/addon-actions': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))
-      '@storybook/builder-vite': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@storybook/builder-vite': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@storybook/svelte': 8.6.15(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)
-      '@storybook/svelte-vite': 8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@storybook/svelte-vite': 8.6.15(@babel/core@7.28.5)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(postcss@8.5.6)(sass@1.97.1)(storybook@8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       storybook: 8.6.15(bufferutil@4.1.0)(prettier@3.7.4)(utf-8-validate@6.0.6)
       svelte: 5.46.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@babel/core'
       - '@sveltejs/vite-plugin-svelte'
@@ -17223,62 +17097,62 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))':
     dependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       import-meta-resolve: 4.2.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))':
     dependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       import-meta-resolve: 4.2.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))':
     dependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       import-meta-resolve: 4.2.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))':
     dependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       import-meta-resolve: 4.2.0
 
-  '@sveltejs/adapter-cloudflare@7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))':
+  '@sveltejs/adapter-cloudflare@7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))':
     dependencies:
       '@cloudflare/workers-types': 4.20260313.1
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       worktop: 0.8.0-next.18
       wrangler: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
 
-  '@sveltejs/adapter-cloudflare@7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))':
+  '@sveltejs/adapter-cloudflare@7.2.8(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(wrangler@4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6))':
     dependencies:
       '@cloudflare/workers-types': 4.20260313.1
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       worktop: 0.8.0-next.18
       wrangler: 4.21.2(@cloudflare/workers-types@4.20260313.1)(bufferutil@4.1.0)(utf-8-validate@6.0.6)
 
-  '@sveltejs/adapter-node@2.1.2(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))':
+  '@sveltejs/adapter-node@2.1.2(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))':
     dependencies:
       '@rollup/plugin-commonjs': 25.0.8(rollup@4.54.0)
       '@rollup/plugin-json': 6.1.0(rollup@4.54.0)
       '@rollup/plugin-node-resolve': 15.3.1(rollup@4.54.0)
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       rollup: 4.54.0
 
-  '@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(encoding@0.1.13)':
+  '@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(encoding@0.1.13)':
     dependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@vercel/nft': 0.26.5(encoding@0.1.13)
       esbuild: 0.19.12
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -17291,13 +17165,13 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
 
-  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -17310,13 +17184,13 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
 
-  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -17329,13 +17203,13 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
 
-  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -17348,13 +17222,13 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.46.0
-      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -17367,114 +17241,114 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.46.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       debug: 4.4.3
       svelte: 5.46.0
-      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       debug: 4.4.3
       svelte: 5.46.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.21
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
-      vitefu: 1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
+      vitefu: 1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.21
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
-      vitefu: 1.1.1(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
+      vitefu: 1.1.1(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       debug: 4.4.3
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.21
       svelte: 5.46.0
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
-      vitefu: 1.1.1(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
+      vitefu: 1.1.1(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       debug: 4.4.3
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.21
       svelte: 5.46.0
-      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       debug: 4.4.3
       deepmerge: 4.3.1
       magic-string: 0.30.21
       svelte: 5.46.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -17502,15 +17376,6 @@ snapshots:
       picocolors: 1.1.1
       tailwindcss: 4.2.1
 
-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))':
-    dependencies:
-      tailwindcss: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
-
-  '@tailwindcss/forms@0.5.11(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))':
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
-
   '@tailwindcss/forms@0.5.11(tailwindcss@4.1.18)':
     dependencies:
       mini-svg-data-uri: 1.4.4
@@ -17519,7 +17384,7 @@ snapshots:
   '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
+      enhanced-resolve: 5.19.0
       jiti: 2.6.1
       lightningcss: 1.30.2
       magic-string: 0.30.21
@@ -17536,78 +17401,124 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.2.1
 
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
   '@tailwindcss/oxide-android-arm64@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-android-arm64@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-darwin-arm64@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-darwin-arm64@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-darwin-x64@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-darwin-x64@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-freebsd-x64@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-freebsd-x64@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     optional: true
 
   '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
     optional: true
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
   '@tailwindcss/oxide@4.1.18':
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64': 4.1.18
@@ -17638,6 +17549,21 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
       '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
 
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
   '@tailwindcss/postcss@4.1.18':
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -17646,24 +17572,27 @@ snapshots:
       postcss: 8.5.6
       tailwindcss: 4.1.18
 
-  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))':
+  '@tailwindcss/postcss@4.2.2':
     dependencies:
-      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      postcss: 8.5.6
+      tailwindcss: 4.2.2
 
   '@tailwindcss/typography@0.5.19(tailwindcss@4.1.18)':
     dependencies:
       postcss-selector-parser: 6.0.10
       tailwindcss: 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@tanstack/directive-functions-plugin@1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@tanstack/directive-functions-plugin@1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.28.5
@@ -17673,12 +17602,12 @@ snapshots:
       babel-dead-code-elimination: 1.0.11
       pathe: 2.0.3
       tiny-invariant: 1.3.3
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
     optional: true
 
-  '@tanstack/directive-functions-plugin@1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/directive-functions-plugin@1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.28.5
@@ -17688,23 +17617,13 @@ snapshots:
       babel-dead-code-elimination: 1.0.11
       pathe: 2.0.3
       tiny-invariant: 1.3.3
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
-  '@tanstack/history@1.141.0': {}
-
-  '@tanstack/react-router-devtools@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.143.4)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)':
-    dependencies:
-      '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/router-devtools-core': 1.143.4(@tanstack/router-core@1.143.4)(csstype@3.2.3)(solid-js@1.9.10)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@tanstack/router-core': 1.143.4
-    transitivePeerDependencies:
-      - csstype
-      - solid-js
+  '@tanstack/history@1.141.0':
+    optional: true
 
   '@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
@@ -17716,6 +17635,7 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
+    optional: true
 
   '@tanstack/react-start-client@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
@@ -17726,6 +17646,7 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
+    optional: true
 
   '@tanstack/react-start-server@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
@@ -17738,20 +17659,21 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - crossws
+    optional: true
 
-  '@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start-client': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start-server': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/router-utils': 1.141.0
       '@tanstack/start-client-core': 1.143.4
-      '@tanstack/start-plugin-core': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@tanstack/start-plugin-core': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@tanstack/start-server-core': 1.143.4(crossws@0.4.1(srvx@0.9.8))
       pathe: 2.0.3
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@rsbuild/core'
       - crossws
@@ -17760,25 +17682,26 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start-client': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start-server': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/router-utils': 1.141.0
       '@tanstack/start-client-core': 1.143.4
-      '@tanstack/start-plugin-core': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.143.4(crossws@0.4.1(srvx@0.9.8))
       pathe: 2.0.3
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@rsbuild/core'
       - crossws
       - supports-color
       - vite-plugin-solid
       - webpack
+    optional: true
 
   '@tanstack/react-store@0.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
@@ -17786,6 +17709,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
       use-sync-external-store: 1.6.0(react@19.2.3)
+    optional: true
 
   '@tanstack/router-core@1.143.4':
     dependencies:
@@ -17796,16 +17720,7 @@ snapshots:
       seroval-plugins: 1.4.0(seroval@1.4.1)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
-
-  '@tanstack/router-devtools-core@1.143.4(@tanstack/router-core@1.143.4)(csstype@3.2.3)(solid-js@1.9.10)':
-    dependencies:
-      '@tanstack/router-core': 1.143.4
-      clsx: 2.1.1
-      goober: 2.1.18(csstype@3.2.3)
-      solid-js: 1.9.10
-      tiny-invariant: 1.3.3
-    optionalDependencies:
-      csstype: 3.2.3
+    optional: true
 
   '@tanstack/router-generator@1.143.4':
     dependencies:
@@ -17819,8 +17734,9 @@ snapshots:
       zod: 3.25.76
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
-  '@tanstack/router-plugin@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@tanstack/router-plugin@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
@@ -17838,12 +17754,12 @@ snapshots:
       zod: 3.25.76
     optionalDependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
     optional: true
 
-  '@tanstack/router-plugin@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
@@ -17861,9 +17777,10 @@ snapshots:
       zod: 3.25.76
     optionalDependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   '@tanstack/router-utils@1.141.0':
     dependencies:
@@ -17877,8 +17794,9 @@ snapshots:
       tinyglobby: 0.2.15
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
-  '@tanstack/server-functions-plugin@1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@tanstack/server-functions-plugin@1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.28.5
@@ -17887,7 +17805,7 @@ snapshots:
       '@babel/template': 7.27.2
       '@babel/traverse': 7.28.5
       '@babel/types': 7.28.5
-      '@tanstack/directive-functions-plugin': 1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@tanstack/directive-functions-plugin': 1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       babel-dead-code-elimination: 1.0.11
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
@@ -17895,7 +17813,7 @@ snapshots:
       - vite
     optional: true
 
-  '@tanstack/server-functions-plugin@1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/server-functions-plugin@1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.28.5
@@ -17904,12 +17822,13 @@ snapshots:
       '@babel/template': 7.27.2
       '@babel/traverse': 7.28.5
       '@babel/types': 7.28.5
-      '@tanstack/directive-functions-plugin': 1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/directive-functions-plugin': 1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       babel-dead-code-elimination: 1.0.11
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
       - supports-color
       - vite
+    optional: true
 
   '@tanstack/start-client-core@1.143.4':
     dependencies:
@@ -17919,10 +17838,12 @@ snapshots:
       seroval: 1.4.1
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
+    optional: true
 
-  '@tanstack/start-fn-stubs@1.142.9': {}
+  '@tanstack/start-fn-stubs@1.142.9':
+    optional: true
 
-  '@tanstack/start-plugin-core@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@tanstack/start-plugin-core@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.28.5
@@ -17930,9 +17851,9 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.40
       '@tanstack/router-core': 1.143.4
       '@tanstack/router-generator': 1.143.4
-      '@tanstack/router-plugin': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@tanstack/router-plugin': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@tanstack/router-utils': 1.141.0
-      '@tanstack/server-functions-plugin': 1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@tanstack/server-functions-plugin': 1.142.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@tanstack/start-client-core': 1.143.4
       '@tanstack/start-server-core': 1.143.4(crossws@0.4.1(srvx@0.9.8))
       babel-dead-code-elimination: 1.0.11
@@ -17942,8 +17863,8 @@ snapshots:
       srvx: 0.9.8
       tinyglobby: 0.2.15
       ufo: 1.6.1
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
-      vitefu: 1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
+      vitefu: 1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       xmlbuilder2: 4.0.3
       zod: 3.25.76
     transitivePeerDependencies:
@@ -17955,7 +17876,7 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/start-plugin-core@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(crossws@0.4.1(srvx@0.9.8))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.28.5
@@ -17963,9 +17884,9 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.40
       '@tanstack/router-core': 1.143.4
       '@tanstack/router-generator': 1.143.4
-      '@tanstack/router-plugin': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.143.4(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tanstack/router-utils': 1.141.0
-      '@tanstack/server-functions-plugin': 1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/server-functions-plugin': 1.142.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@tanstack/start-client-core': 1.143.4
       '@tanstack/start-server-core': 1.143.4(crossws@0.4.1(srvx@0.9.8))
       babel-dead-code-elimination: 1.0.11
@@ -17975,8 +17896,8 @@ snapshots:
       srvx: 0.9.8
       tinyglobby: 0.2.15
       ufo: 1.6.1
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
       zod: 3.25.76
     transitivePeerDependencies:
@@ -17986,6 +17907,7 @@ snapshots:
       - supports-color
       - vite-plugin-solid
       - webpack
+    optional: true
 
   '@tanstack/start-server-core@1.143.4(crossws@0.4.1(srvx@0.9.8))':
     dependencies:
@@ -17998,14 +17920,18 @@ snapshots:
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
       - crossws
+    optional: true
 
   '@tanstack/start-storage-context@1.143.4':
     dependencies:
       '@tanstack/router-core': 1.143.4
+    optional: true
 
-  '@tanstack/store@0.8.0': {}
+  '@tanstack/store@0.8.0':
+    optional: true
 
-  '@tanstack/virtual-file-routes@1.141.0': {}
+  '@tanstack/virtual-file-routes@1.141.0':
+    optional: true
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -18068,14 +17994,14 @@ snapshots:
       '@testing-library/dom': 9.3.4
       svelte: 5.46.0
 
-  '@testing-library/svelte@5.3.0(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))(vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.31.1)(sass@1.97.1))':
+  '@testing-library/svelte@5.3.0(svelte@5.46.0)(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))(vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@testing-library/dom': 10.4.1
       '@testing-library/svelte-core': 1.0.0(svelte@5.46.0)
       svelte: 5.46.0
     optionalDependencies:
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
-      vitest: 2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
+      vitest: 2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.32.0)(sass@1.97.1)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -18695,19 +18621,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-react@5.1.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
-      '@rolldown/pluginutils': 1.0.0-beta.53
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.18.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitest/coverage-v8@1.6.1(vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))':
+  '@vitest/coverage-v8@1.6.1(vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -18722,7 +18636,7 @@ snapshots:
       std-env: 3.10.0
       strip-literal: 2.1.1
       test-exclude: 6.0.0
-      vitest: 1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+      vitest: 1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -18746,38 +18660,38 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     optional: true
 
-  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
 
-  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))':
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
 
-  '@vitest/mocker@3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/mocker@3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -18919,6 +18833,11 @@ snapshots:
 
   abbrev@1.1.1: {}
 
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -19011,7 +18930,8 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
-  ansis@4.2.0: {}
+  ansis@4.2.0:
+    optional: true
 
   any-promise@1.3.0: {}
 
@@ -19056,6 +18976,8 @@ snapshots:
       call-bound: 1.0.4
       is-array-buffer: 3.0.5
 
+  array-flatten@1.1.1: {}
+
   array-ify@1.0.0: {}
 
   array-union@2.1.0: {}
@@ -19206,12 +19128,16 @@ snapshots:
 
   baseline-browser-mapping@2.9.11: {}
 
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   bcrypt@6.0.0:
     dependencies:
       node-addon-api: 8.5.0
       node-gyp-build: 4.8.4
 
-  better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)):
+  better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       '@better-auth/core': 1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/telemetry': 1.4.18(@better-auth/core@1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
@@ -19226,8 +19152,8 @@ snapshots:
       nanostores: 1.1.0
       zod: 4.3.6
     optionalDependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
-      '@tanstack/react-start': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
+      '@tanstack/react-start': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       drizzle-kit: 0.31.8
       drizzle-orm: 0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)
       pg: 8.18.0
@@ -19235,10 +19161,10 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       solid-js: 1.9.10
       svelte: 5.46.0
-      vitest: 2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+      vitest: 2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
       vue: 3.5.26(typescript@5.9.3)
 
-  better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)):
+  better-auth@1.4.18(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(@tanstack/react-start@1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(drizzle-kit@0.31.8)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(pg@8.18.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.0)(vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1))(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       '@better-auth/core': 1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/telemetry': 1.4.18(@better-auth/core@1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
@@ -19253,8 +19179,8 @@ snapshots:
       nanostores: 1.1.0
       zod: 4.3.6
     optionalDependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
-      '@tanstack/react-start': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/react-start': 1.143.4(crossws@0.4.1(srvx@0.9.8))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       drizzle-kit: 0.31.8
       drizzle-orm: 0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)
       pg: 8.18.0
@@ -19262,7 +19188,7 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       solid-js: 1.9.10
       svelte: 5.46.0
-      vitest: 2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1)
+      vitest: 2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1)
       vue: 3.5.26(typescript@5.9.3)
 
   better-call@1.1.8(zod@4.3.6):
@@ -19288,35 +19214,41 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  bits-ui@0.21.16(svelte@5.46.0):
-    dependencies:
-      '@internationalized/date': 3.10.1
-      '@melt-ui/svelte': 0.76.2(svelte@5.46.0)
-      nanoid: 5.1.6
-      svelte: 5.46.0
-
-  bits-ui@2.14.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0):
+  bits-ui@2.14.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
       '@internationalized/date': 3.10.1
       esm-env: 1.2.2
-      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)
       svelte: 5.46.0
-      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)
       tabbable: 6.3.0
     transitivePeerDependencies:
       - '@sveltejs/kit'
 
-  bits-ui@2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
+  bits-ui@2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
       '@internationalized/date': 3.10.1
       esm-env: 1.2.2
-      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       svelte: 5.46.0
-      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      tabbable: 6.3.0
+    transitivePeerDependencies:
+      - '@sveltejs/kit'
+
+  bits-ui@2.16.1(@internationalized/date@3.10.1)(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/dom': 1.7.4
+      '@internationalized/date': 3.10.1
+      esm-env: 1.2.2
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      svelte: 5.46.0
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       tabbable: 6.3.0
     transitivePeerDependencies:
       - '@sveltejs/kit'
@@ -19354,7 +19286,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  boolbase@1.0.0: {}
+  boolbase@1.0.0:
+    optional: true
 
   bowser@2.13.1: {}
 
@@ -19516,6 +19449,7 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
       domutils: 3.2.2
+    optional: true
 
   cheerio@1.1.2:
     dependencies:
@@ -19528,8 +19462,9 @@ snapshots:
       parse5: 7.3.0
       parse5-htmlparser2-tree-adapter: 7.1.0
       parse5-parser-stream: 7.1.2
-      undici: 7.16.0
+      undici: 7.24.6
       whatwg-mimetype: 4.0.0
+    optional: true
 
   chokidar@3.6.0:
     dependencies:
@@ -19652,6 +19587,22 @@ snapshots:
       array-ify: 1.0.0
       dot-prop: 5.3.0
 
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.54.0
+
+  compression@1.8.1:
+    dependencies:
+      bytes: 3.1.2
+      compressible: 2.0.18
+      debug: 2.6.9
+      negotiator: 0.6.4
+      on-headers: 1.1.0
+      safe-buffer: 5.2.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   compute-scroll-into-view@3.1.1: {}
 
   concat-map@0.0.1: {}
@@ -19677,10 +19628,14 @@ snapshots:
 
   confbox@0.1.8: {}
 
-  consola@3.4.2: {}
+  confbox@0.2.4: {}
 
   console-control-strings@1.1.0: {}
 
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
   content-disposition@1.0.1: {}
 
   content-type@1.0.5: {}
@@ -19799,7 +19754,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
-  cookie-es@2.0.0: {}
+  cookie-es@2.0.0:
+    optional: true
 
   cookie-parser@1.4.7:
     dependencies:
@@ -19814,6 +19770,8 @@ snapshots:
 
   cookie@0.7.2: {}
 
+  cookie@1.1.1: {}
+
   copy-to-clipboard@3.3.3:
     dependencies:
       toggle-selection: 1.0.6
@@ -19859,6 +19817,7 @@ snapshots:
   crossws@0.4.1(srvx@0.9.8):
     optionalDependencies:
       srvx: 0.9.8
+    optional: true
 
   css-line-break@2.1.0:
     dependencies:
@@ -19872,13 +19831,15 @@ snapshots:
       domhandler: 5.0.3
       domutils: 3.2.2
       nth-check: 2.1.1
+    optional: true
 
   css-tree@3.2.1:
     dependencies:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
 
-  css-what@6.2.2: {}
+  css-what@6.2.2:
+    optional: true
 
   css.escape@1.5.1: {}
 
@@ -20106,10 +20067,6 @@ snapshots:
 
   dayjs@1.11.19: {}
 
-  db0@0.3.4(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)):
-    optionalDependencies:
-      drizzle-orm: 0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)
-
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -20190,9 +20147,6 @@ snapshots:
 
   delegates@1.0.0: {}
 
-  denque@2.1.0:
-    optional: true
-
   depd@2.0.0: {}
 
   dequal@2.0.3: {}
@@ -20223,7 +20177,8 @@ snapshots:
 
   diff@5.2.0: {}
 
-  diff@8.0.2: {}
+  diff@8.0.2:
+    optional: true
 
   dijkstrajs@1.0.3: {}
 
@@ -20344,16 +20299,12 @@ snapshots:
     dependencies:
       iconv-lite: 0.6.3
       whatwg-encoding: 3.1.1
+    optional: true
 
   encoding@0.1.13:
     dependencies:
       iconv-lite: 0.6.3
 
-  enhanced-resolve@5.18.4:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
   enhanced-resolve@5.19.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -20873,6 +20824,42 @@ snapshots:
       express: 5.2.1
       ip-address: 10.1.0
 
+  express@4.22.1:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.4
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.13
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   express@5.2.1:
     dependencies:
       accepts: 2.0.0
@@ -20978,6 +20965,18 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@1.3.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   finalhandler@2.1.1:
     dependencies:
       debug: 4.4.3
@@ -21020,10 +21019,6 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  focus-trap@7.7.0:
-    dependencies:
-      tabbable: 6.3.0
-
   follow-redirects@1.15.11: {}
 
   for-each@0.3.5:
@@ -21046,6 +21041,8 @@ snapshots:
     dependencies:
       tslib: 2.4.0
 
+  fresh@0.5.2: {}
+
   fresh@2.0.0: {}
 
   fs-extra@11.3.3:
@@ -21066,7 +21063,7 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.6.2
       '@orama/orama': 3.1.18
@@ -21092,17 +21089,18 @@ snapshots:
       lucide-react: 0.562.0(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
+      react-router: 7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-mdx@14.0.4(fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+  fumadocs-mdx@14.0.4(fumadocs-core@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.1.0
       chokidar: 5.0.0
       esbuild: 0.27.2
       estree-util-value-to-estree: 3.5.0
-      fumadocs-core: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      fumadocs-core: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       js-yaml: 4.1.1
       lru-cache: 11.2.4
       mdast-util-to-markdown: 2.1.2
@@ -21118,11 +21116,11 @@ snapshots:
       zod: 4.3.6
     optionalDependencies:
       react: 19.2.3
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
+  fumadocs-ui@16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
     dependencies:
       '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -21135,7 +21133,7 @@ snapshots:
       '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.3)
       '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority: 0.7.1
-      fumadocs-core: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      fumadocs-core: 16.2.1(@tanstack/react-router@1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@types/react@19.2.7)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       lodash.merge: 4.6.2
       next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       postcss-selector-parser: 7.1.1
@@ -21212,6 +21210,8 @@ snapshots:
       through2: 2.0.5
       yargs: 16.2.0
 
+  get-port@5.1.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -21300,29 +21300,19 @@ snapshots:
 
   globrex@0.1.2: {}
 
-  goober@2.1.18(csstype@3.2.3):
-    dependencies:
-      csstype: 3.2.3
-
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
 
-  h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.8)):
-    dependencies:
-      rou3: 0.7.12
-      srvx: 0.9.8
-    optionalDependencies:
-      crossws: 0.4.1(srvx@0.9.8)
-
   h3@2.0.1-rc.6(crossws@0.4.1(srvx@0.9.8)):
     dependencies:
       rou3: 0.7.12
       srvx: 0.9.8
     optionalDependencies:
       crossws: 0.4.1(srvx@0.9.8)
+    optional: true
 
   handlebars@4.7.8:
     dependencies:
@@ -21437,10 +21427,10 @@ snapshots:
 
   highlight.js@11.11.1: {}
 
-  hono-openapi@1.1.2(@hono/standard-validator@0.1.5(@standard-schema/spec@1.1.0)(hono@4.11.3))(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1))(@types/json-schema@7.0.15)(hono@4.11.3)(openapi-types@12.1.3):
+  hono-openapi@1.1.2(@hono/standard-validator@0.1.5(@standard-schema/spec@1.1.0)(hono@4.11.3))(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-community/standard-openapi@0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(valibot@1.3.1(typescript@5.9.3))(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1))(@types/json-schema@7.0.15)(hono@4.11.3)(openapi-types@12.1.3):
     dependencies:
-      '@standard-community/standard-json': 0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)
-      '@standard-community/standard-openapi': 0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1)
+      '@standard-community/standard-json': 0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1)
+      '@standard-community/standard-openapi': 0.2.9(@standard-community/standard-json@0.3.5(@standard-schema/spec@1.1.0)(@types/json-schema@7.0.15)(quansync@1.0.0)(valibot@1.3.1(typescript@5.9.3))(zod-to-json-schema@3.25.1(zod@4.2.1))(zod@4.2.1))(@standard-schema/spec@1.1.0)(openapi-types@12.1.3)(valibot@1.3.1(typescript@5.9.3))(zod-openapi@5.4.5(zod@4.2.1))(zod@4.2.1)
       '@types/json-schema': 7.0.15
       openapi-types: 12.1.3
     optionalDependencies:
@@ -21609,21 +21599,6 @@ snapshots:
       '@formatjs/icu-messageformat-parser': 2.11.4
       tslib: 2.8.1
 
-  ioredis@5.8.2:
-    dependencies:
-      '@ioredis/commands': 1.4.0
-      cluster-key-slot: 1.1.2
-      debug: 4.4.3
-      denque: 2.1.0
-      lodash.defaults: 4.2.0
-      lodash.isarguments: 3.1.0
-      redis-errors: 1.2.0
-      redis-parser: 3.0.0
-      standard-as-callback: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   ip-address@10.1.0: {}
 
   ipaddr.js@1.9.1: {}
@@ -22276,6 +22251,8 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  jsesc@3.0.2: {}
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -22397,66 +22374,99 @@ snapshots:
   lightningcss-android-arm64@1.31.1:
     optional: true
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
   lightningcss-darwin-arm64@1.30.2:
     optional: true
 
   lightningcss-darwin-arm64@1.31.1:
     optional: true
 
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
   lightningcss-darwin-x64@1.30.2:
     optional: true
 
   lightningcss-darwin-x64@1.31.1:
     optional: true
 
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
   lightningcss-freebsd-x64@1.30.2:
     optional: true
 
   lightningcss-freebsd-x64@1.31.1:
     optional: true
 
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.30.2:
     optional: true
 
   lightningcss-linux-arm-gnueabihf@1.31.1:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.30.2:
     optional: true
 
   lightningcss-linux-arm64-gnu@1.31.1:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.30.2:
     optional: true
 
   lightningcss-linux-arm64-musl@1.31.1:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.30.2:
     optional: true
 
   lightningcss-linux-x64-gnu@1.31.1:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
   lightningcss-linux-x64-musl@1.30.2:
     optional: true
 
   lightningcss-linux-x64-musl@1.31.1:
     optional: true
 
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.30.2:
     optional: true
 
   lightningcss-win32-arm64-msvc@1.31.1:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.30.2:
     optional: true
 
   lightningcss-win32-x64-msvc@1.31.1:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
   lightningcss@1.30.2:
     dependencies:
       detect-libc: 2.1.2
@@ -22489,6 +22499,22 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
 
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.3: {}
@@ -22539,12 +22565,6 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
-  lodash.defaults@4.2.0:
-    optional: true
-
-  lodash.isarguments@3.1.0:
-    optional: true
-
   lodash.ismatch@4.4.0: {}
 
   lodash.memoize@4.1.2: {}
@@ -22858,12 +22878,16 @@ snapshots:
       type-fest: 0.18.1
       yargs-parser: 20.2.9
 
+  merge-descriptors@1.0.3: {}
+
   merge-descriptors@2.0.0: {}
 
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
 
+  methods@1.1.2: {}
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.2.0
@@ -23145,6 +23169,8 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
+  mime@1.6.0: {}
+
   mime@3.0.0: {}
 
   mimic-fn@2.1.0: {}
@@ -23231,6 +23257,16 @@ snapshots:
 
   modify-values@1.0.1: {}
 
+  morgan@1.10.1:
+    dependencies:
+      basic-auth: 2.0.1
+      debug: 2.6.9
+      depd: 2.0.0
+      on-finished: 2.3.0
+      on-headers: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -23263,6 +23299,10 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@0.6.3: {}
+
+  negotiator@0.6.4: {}
+
   negotiator@1.0.0: {}
 
   neo-async@2.6.2: {}
@@ -23272,56 +23312,6 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  nf3@0.1.12: {}
-
-  nitro@3.0.1-alpha.1(chokidar@4.0.3)(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))(ioredis@5.8.2)(lru-cache@11.2.7)(rollup@4.54.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
-    dependencies:
-      consola: 3.4.2
-      crossws: 0.4.1(srvx@0.9.8)
-      db0: 0.3.4(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))
-      h3: 2.0.1-rc.5(crossws@0.4.1(srvx@0.9.8))
-      jiti: 2.6.1
-      nf3: 0.1.12
-      ofetch: 2.0.0-alpha.3
-      ohash: 2.0.11
-      oxc-minify: 0.96.0
-      oxc-transform: 0.96.0
-      srvx: 0.9.8
-      undici: 7.16.0
-      unenv: 2.0.0-rc.24
-      unstorage: 2.0.0-alpha.4(chokidar@4.0.3)(db0@0.3.4(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)))(ioredis@5.8.2)(lru-cache@11.2.7)(ofetch@2.0.0-alpha.3)
-    optionalDependencies:
-      rollup: 4.54.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@electric-sql/pglite'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - better-sqlite3
-      - chokidar
-      - drizzle-orm
-      - idb-keyval
-      - ioredis
-      - lru-cache
-      - mongodb
-      - mysql2
-      - sqlite3
-      - uploadthing
-
   node-abi@3.85.0:
     dependencies:
       semver: 7.7.3
@@ -23390,6 +23380,7 @@ snapshots:
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
+    optional: true
 
   nwsapi@2.2.23: {}
 
@@ -23415,14 +23406,18 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  ofetch@2.0.0-alpha.3: {}
-
   ohash@2.0.11: {}
 
+  on-finished@2.3.0:
+    dependencies:
+      ee-first: 1.1.1
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
 
+  on-headers@1.1.0: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -23488,24 +23483,6 @@ snapshots:
 
   os-tmpdir@1.0.2: {}
 
-  oxc-minify@0.96.0:
-    optionalDependencies:
-      '@oxc-minify/binding-android-arm64': 0.96.0
-      '@oxc-minify/binding-darwin-arm64': 0.96.0
-      '@oxc-minify/binding-darwin-x64': 0.96.0
-      '@oxc-minify/binding-freebsd-x64': 0.96.0
-      '@oxc-minify/binding-linux-arm-gnueabihf': 0.96.0
-      '@oxc-minify/binding-linux-arm-musleabihf': 0.96.0
-      '@oxc-minify/binding-linux-arm64-gnu': 0.96.0
-      '@oxc-minify/binding-linux-arm64-musl': 0.96.0
-      '@oxc-minify/binding-linux-riscv64-gnu': 0.96.0
-      '@oxc-minify/binding-linux-s390x-gnu': 0.96.0
-      '@oxc-minify/binding-linux-x64-gnu': 0.96.0
-      '@oxc-minify/binding-linux-x64-musl': 0.96.0
-      '@oxc-minify/binding-wasm32-wasi': 0.96.0
-      '@oxc-minify/binding-win32-arm64-msvc': 0.96.0
-      '@oxc-minify/binding-win32-x64-msvc': 0.96.0
-
   oxc-parser@0.112.0:
     dependencies:
       '@oxc-project/types': 0.112.0
@@ -23531,24 +23508,6 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.112.0
       '@oxc-parser/binding-win32-x64-msvc': 0.112.0
 
-  oxc-transform@0.96.0:
-    optionalDependencies:
-      '@oxc-transform/binding-android-arm64': 0.96.0
-      '@oxc-transform/binding-darwin-arm64': 0.96.0
-      '@oxc-transform/binding-darwin-x64': 0.96.0
-      '@oxc-transform/binding-freebsd-x64': 0.96.0
-      '@oxc-transform/binding-linux-arm-gnueabihf': 0.96.0
-      '@oxc-transform/binding-linux-arm-musleabihf': 0.96.0
-      '@oxc-transform/binding-linux-arm64-gnu': 0.96.0
-      '@oxc-transform/binding-linux-arm64-musl': 0.96.0
-      '@oxc-transform/binding-linux-riscv64-gnu': 0.96.0
-      '@oxc-transform/binding-linux-s390x-gnu': 0.96.0
-      '@oxc-transform/binding-linux-x64-gnu': 0.96.0
-      '@oxc-transform/binding-linux-x64-musl': 0.96.0
-      '@oxc-transform/binding-wasm32-wasi': 0.96.0
-      '@oxc-transform/binding-win32-arm64-msvc': 0.96.0
-      '@oxc-transform/binding-win32-x64-msvc': 0.96.0
-
   p-limit@1.3.0:
     dependencies:
       p-try: 1.0.0
@@ -23581,6 +23540,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  p-map@7.0.4: {}
+
   p-try@1.0.0: {}
 
   p-try@2.2.0: {}
@@ -23621,10 +23582,12 @@ snapshots:
     dependencies:
       domhandler: 5.0.3
       parse5: 7.3.0
+    optional: true
 
   parse5-parser-stream@7.1.2:
     dependencies:
       parse5: 7.3.0
+    optional: true
 
   parse5@7.3.0:
     dependencies:
@@ -23648,6 +23611,8 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-to-regexp@0.1.13: {}
+
   path-to-regexp@6.3.0: {}
 
   path-to-regexp@8.3.0: {}
@@ -23728,6 +23693,12 @@ snapshots:
       mlly: 1.8.0
       pathe: 2.0.3
 
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
   playwright-core@1.57.0: {}
 
   playwright@1.57.0:
@@ -23886,18 +23857,18 @@ snapshots:
       prettier: 3.7.4
       svelte: 5.46.0
 
-  prettier-plugin-tailwindcss@0.6.14(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4):
-    dependencies:
-      prettier: 3.7.4
-    optionalDependencies:
-      prettier-plugin-svelte: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
-
   prettier-plugin-tailwindcss@0.7.2(prettier-plugin-svelte@3.4.1(prettier@3.6.2)(svelte@5.46.0))(prettier@3.6.2):
     dependencies:
       prettier: 3.6.2
     optionalDependencies:
       prettier-plugin-svelte: 3.4.1(prettier@3.6.2)(svelte@5.46.0)
 
+  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4):
+    dependencies:
+      prettier: 3.7.4
+    optionalDependencies:
+      prettier-plugin-svelte: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
+
   prettier@3.6.2: {}
 
   prettier@3.7.4: {}
@@ -24110,7 +24081,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  react-refresh@0.18.0: {}
+  react-refresh@0.14.2: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
     dependencies:
@@ -24131,6 +24102,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  react-router@7.13.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.3
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
+
   react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       get-nonce: 1.0.1
@@ -24235,14 +24214,6 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  redis-errors@1.2.0:
-    optional: true
-
-  redis-parser@3.0.0:
-    dependencies:
-      redis-errors: 1.2.0
-    optional: true
-
   redis@4.7.1:
     dependencies:
       '@redis/bloom': 1.2.0(@redis/client@1.6.1)
@@ -24503,32 +24474,41 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.46.0
 
-  runed@0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0):
+  runed@0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0):
     dependencies:
       dequal: 2.0.3
       esm-env: 1.2.2
       lz-string: 1.5.0
       svelte: 5.46.0
     optionalDependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
 
-  runed@0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
+  runed@0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
     dependencies:
       dequal: 2.0.3
       esm-env: 1.2.2
       lz-string: 1.5.0
       svelte: 5.46.0
     optionalDependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
 
-  runed@0.37.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(zod@4.3.6):
+  runed@0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
     dependencies:
       dequal: 2.0.3
       esm-env: 1.2.2
       lz-string: 1.5.0
       svelte: 5.46.0
     optionalDependencies:
-      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+
+  runed@0.37.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(zod@4.3.6):
+    dependencies:
+      dequal: 2.0.3
+      esm-env: 1.2.2
+      lz-string: 1.5.0
+      svelte: 5.46.0
+    optionalDependencies:
+      '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       zod: 4.3.6
 
   rusha@0.8.14: {}
@@ -24613,6 +24593,24 @@ snapshots:
 
   semver@7.7.3: {}
 
+  send@0.19.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   send@1.2.1:
     dependencies:
       debug: 4.4.3
@@ -24636,10 +24634,21 @@ snapshots:
   seroval-plugins@1.4.0(seroval@1.4.1):
     dependencies:
       seroval: 1.4.1
+    optional: true
 
   seroval@1.3.2: {}
 
-  seroval@1.4.1: {}
+  seroval@1.4.1:
+    optional: true
+
+  serve-static@1.16.3:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.2
+    transitivePeerDependencies:
+      - supports-color
 
   serve-static@2.2.1:
     dependencies:
@@ -24866,7 +24875,8 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  srvx@0.9.8: {}
+  srvx@0.9.8:
+    optional: true
 
   sswr@2.0.0(svelte@5.46.0):
     dependencies:
@@ -24887,9 +24897,6 @@ snapshots:
       as-table: 1.0.55
       get-source: 2.0.12
 
-  standard-as-callback@2.1.0:
-    optional: true
-
   standard-version@9.5.0:
     dependencies:
       chalk: 2.4.2
@@ -25158,19 +25165,28 @@ snapshots:
       '@tiptap/pm': 3.14.0
       svelte: 5.46.0
 
-  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0):
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0):
     dependencies:
       clsx: 2.1.1
-      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)))(svelte@5.46.0)
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)
       style-to-object: 1.0.14
       svelte: 5.46.0
     transitivePeerDependencies:
       - '@sveltejs/kit'
 
-  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
     dependencies:
       clsx: 2.1.1
-      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
+      style-to-object: 1.0.14
+      svelte: 5.46.0
+    transitivePeerDependencies:
+      - '@sveltejs/kit'
+
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.35.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.0)
       style-to-object: 1.0.14
       svelte: 5.46.0
     transitivePeerDependencies:
@@ -25257,10 +25273,10 @@ snapshots:
       tailwind-merge: 2.6.0
       tailwindcss: 3.4.19(ts-node@10.9.2(@types/node@22.19.3)(typescript@5.9.3))
 
-  tailwind-variants@0.3.1(tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))):
+  tailwind-variants@0.3.1(tailwindcss@4.2.2):
     dependencies:
       tailwind-merge: 2.5.4
-      tailwindcss: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
+      tailwindcss: 4.2.2
 
   tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18):
     dependencies:
@@ -25299,37 +25315,12 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.1.0(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
-      postcss-nested: 6.2.0(postcss@8.5.6)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.11
-      sucrase: 3.35.1
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@4.1.18: {}
 
   tailwindcss@4.2.1: {}
 
+  tailwindcss@4.2.2: {}
+
   tapable@2.3.0: {}
 
   tar@6.2.1:
@@ -25377,7 +25368,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
-  tiny-warning@1.0.3: {}
+  tiny-warning@1.0.3:
+    optional: true
 
   tinybench@2.9.0: {}
 
@@ -25694,8 +25686,6 @@ snapshots:
     dependencies:
       '@fastify/busboy': 2.1.1
 
-  undici@7.16.0: {}
-
   undici@7.24.6: {}
 
   unenv@2.0.0-rc.17:
@@ -25706,10 +25696,6 @@ snapshots:
       pathe: 2.0.3
       ufo: 1.6.1
 
-  unenv@2.0.0-rc.24:
-    dependencies:
-      pathe: 2.0.3
-
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -25785,14 +25771,6 @@ snapshots:
 
   unsplash-js@7.0.20: {}
 
-  unstorage@2.0.0-alpha.4(chokidar@4.0.3)(db0@0.3.4(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7)))(ioredis@5.8.2)(lru-cache@11.2.7)(ofetch@2.0.0-alpha.3):
-    optionalDependencies:
-      chokidar: 4.0.3
-      db0: 0.3.4(drizzle-orm@0.44.7(@cloudflare/workers-types@4.20260313.1)(@types/pg@8.16.0)(kysely@0.28.9)(pg@8.18.0)(postgres@3.4.7))
-      ioredis: 5.8.2
-      lru-cache: 11.2.7
-      ofetch: 2.0.0-alpha.3
-
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -25838,6 +25816,8 @@ snapshots:
       is-typed-array: 1.1.15
       which-typed-array: 1.1.19
 
+  utils-merge@1.0.1: {}
+
   utrie@1.0.2:
     dependencies:
       base64-arraybuffer: 1.0.2
@@ -25857,6 +25837,10 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
+  valibot@1.3.1(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -25885,13 +25869,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-node@1.6.1(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1):
+  vite-node@1.6.1(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25903,13 +25887,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@1.6.1(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1):
+  vite-node@1.6.1(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25921,13 +25905,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@2.1.9(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1):
+  vite-node@2.1.9(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25940,13 +25924,13 @@ snapshots:
       - terser
     optional: true
 
-  vite-node@2.1.9(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1):
+  vite-node@2.1.9(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25958,13 +25942,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@2.1.9(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1):
+  vite-node@2.1.9(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25976,18 +25960,43 @@ snapshots:
       - supports-color
       - terser
 
-  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-node@3.2.4(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-plugin-css-injected-by-js@3.5.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+    dependencies:
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.9.3)
     optionalDependencies:
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1):
+  vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
@@ -25995,10 +26004,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.27
       fsevents: 2.3.3
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       sass: 1.97.1
 
-  vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1):
+  vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
@@ -26006,10 +26015,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.3
       fsevents: 2.3.3
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       sass: 1.97.1
 
-  vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1):
+  vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
@@ -26017,10 +26026,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.10.4
       fsevents: 2.3.3
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       sass: 1.97.1
 
-  vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -26032,12 +26041,12 @@ snapshots:
       '@types/node': 24.10.4
       fsevents: 2.3.3
       jiti: 2.6.1
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       sass: 1.97.1
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -26049,32 +26058,32 @@ snapshots:
       '@types/node': 24.10.4
       fsevents: 2.3.3
       jiti: 2.6.1
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       sass: 1.97.1
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vitefu@1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)):
+  vitefu@1.1.1(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)):
     optionalDependencies:
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
 
-  vitefu@1.1.1(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)):
+  vitefu@1.1.1(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)):
     optionalDependencies:
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
 
-  vitefu@1.1.1(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)):
+  vitefu@1.1.1(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)):
     optionalDependencies:
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
 
-  vitefu@1.1.1(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vitefu@1.1.1(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  vitefu@1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vitefu@1.1.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1):
+  vitest@1.6.1(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -26093,8 +26102,8 @@ snapshots:
       strip-literal: 2.1.1
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
-      vite-node: 1.6.1(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
+      vite-node: 1.6.1(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.19.27
@@ -26109,7 +26118,7 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@1.6.1(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1):
+  vitest@1.6.1(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -26128,8 +26137,8 @@ snapshots:
       strip-literal: 2.1.1
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
-      vite-node: 1.6.1(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
+      vite-node: 1.6.1(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.4
@@ -26144,10 +26153,10 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1):
+  vitest@2.1.9(@types/node@20.19.27)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1))
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -26163,8 +26172,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
-      vite-node: 2.1.9(@types/node@20.19.27)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
+      vite-node: 2.1.9(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.19.27
@@ -26181,10 +26190,10 @@ snapshots:
       - terser
     optional: true
 
-  vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.31.1)(sass@1.97.1):
+  vitest@2.1.9(@types/node@22.19.3)(jsdom@25.0.1(bufferutil@4.1.0)(utf-8-validate@6.0.6))(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1))
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -26200,8 +26209,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
-      vite-node: 2.1.9(@types/node@22.19.3)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
+      vite-node: 2.1.9(@types/node@22.19.3)(lightningcss@1.32.0)(sass@1.97.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.19.3
@@ -26217,10 +26226,10 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.31.1)(sass@1.97.1):
+  vitest@2.1.9(@types/node@24.10.4)(jsdom@29.0.1(@noble/hashes@2.0.1))(lightningcss@1.32.0)(sass@1.97.1):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1))
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -26236,8 +26245,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
-      vite-node: 2.1.9(@types/node@24.10.4)(lightningcss@1.31.1)(sass@1.97.1)
+      vite: 5.4.21(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
+      vite-node: 2.1.9(@types/node@24.10.4)(lightningcss@1.32.0)(sass@1.97.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.4
@@ -26444,6 +26453,7 @@ snapshots:
       '@oozcitak/infra': 2.0.2
       '@oozcitak/util': 10.0.0
       js-yaml: 4.1.1
+    optional: true
 
   xmlchars@2.2.0: {}
 
@@ -26547,7 +26557,8 @@ snapshots:
 
   zod@3.22.3: {}
 
-  zod@3.25.76: {}
+  zod@3.25.76:
+    optional: true
 
   zod@4.2.1: {}
 
diff --git a/prd/ai-course-assistant/README.md b/prd/ai-course-assistant/README.md
index e75dab3f..1f97ed85 100644
--- a/prd/ai-course-assistant/README.md
+++ b/prd/ai-course-assistant/README.md
@@ -1,280 +1,828 @@
----
-name: AI Course Assistant
-overview: An AI-powered assistant embedded in the course UI that helps teachers organize content—update lesson text, tag exercises, generate questions from existing content, and draft lessons. Cloud-only; self-hosted instances cannot use this feature.
-todos:
-  - id: prd-review
-    content: Finalize PRD with stakeholders, resolve open questions
-    status: pending
-  - id: architecture-decision
-    content: Decide agent execution model (API-first vs local-first)
-    status: pending
-  - id: package-scaffold
-    content: Create packages/ai-assistant package with API client
-    status: pending
-  - id: agent-api-routes
-    content: Design and implement agent API routes with auth + org scoping
-    status: pending
-  - id: chat-ui
-    content: Build chat interface in right sidebar (Sheet)
-    status: pending
-  - id: nav-integration
-    content: Add AI assistant button to course navigation/header
-    status: pending
-  - id: self-host-gate
-    content: Hide assistant and block agent routes when PUBLIC_IS_SELFHOSTED
-    status: pending
-  - id: safeguards
-    content: Enforce org/course permission checks in all agent actions
-    status: pending
-isProject: false
----
-
 # AI Course Assistant
 
 ## Purpose
 
 Deliver an AI assistant inside the course UI that teachers can use to:
 
-- **Update content**: "Update this piece of text in this lesson"
-- **Tag exercises**: Tag an exercise and provide context
-- **Generate questions**: "Given this text, come up with 5 new questions"
+- **Upload a document** (PDF/DOCX) and have the AI propose a full course structure
+- **Review a course plan** with sections, lessons, and short descriptions before any content is created
+- **Execute the plan** — the agent creates sections, lessons, and populates content automatically
+- **Update content**: "Rewrite the introduction paragraph to be more engaging"
+- **Generate questions**: "Given this lesson, come up with 5 MCQ questions"
 - **Draft lessons**: Ask the agent to write the initial draft of a lesson
 
-The assistant operates in a right sidebar chat interface, triggered by an "AI Assistant" button in the course navigation.
+The assistant has two modes:
+
+- **Plan Mode** — AI analyzes input (document or prompt) and proposes a course structure. The teacher reviews, edits, and approves before anything is created.
+- **Agent Mode** — AI executes approved actions: creating sections, lessons, exercises, and populating content. Shows real-time progress.
 
 ## Goals
 
-- Help teachers organize and author course content faster
+- Help teachers go from a source document to a fully structured course in minutes
 - Operate strictly within the current org/course context (no cross-org access)
-- Integrate natively with existing ClassroomIO APIs (lessons, exercises, content)
-- Cloud-only; self-hosted users cannot use the AI assistant
+- Integrate natively with existing ClassroomIO services (sections, lessons, exercises, content)
+- Give teachers full control — always review before destructive or bulk actions
 
 ## Non-Goals (v1)
 
-- Student-facing AI (tutors/teachers only)
+- Student-facing AI (teachers/admins only)
 - Cross-course or cross-org operations
-- Offline or fully local execution without API
 - Custom model selection or fine-tuning
+- Real-time collaboration (multi-user editing via agent)
+- Internet/web search from the agent
 
 ---
 
 ## Architecture Overview
 
-```mermaid
-flowchart TB
-    subgraph client [Dashboard Client]
-        NavButton["AI Assistant Button"]
-        ChatUI["Right Sidebar Chat"]
-    end
-    subgraph cloud [Cloud / API]
-        AgentService["Agent Service (packages/ai-assistant or API)"]
-        CourseAPI["Course / Lesson / Exercise APIs"]
-    end
-    subgraph db [Database]
-        LessonTable["lesson / lesson_language"]
-        ExerciseTable["exercise / exercise_template"]
-        ContentTable["course_content"]
-    end
+### Execution Model: Hybrid (Client Context + API Writes)
 
-    NavButton -->|"Open"| ChatUI
-    ChatUI -->|"User message + context"| AgentService
-    AgentService -->|"Validate + Call"| CourseAPI
-    CourseAPI -->|"Persist"| db
-    CourseAPI -->|"Response"| ChatUI
+The client already has course content loaded in Svelte stores when the teacher is on a page. The agent:
+
+- **Reads context from the client** — current lesson text, exercise questions, course structure are passed with each message. No extra API calls to "read" content.
+- **Writes through the API** — all mutations route through existing service functions with the full middleware stack (`authMiddleware` -> `orgMemberMiddleware` -> `courseTeamMemberMiddleware`). Permission enforcement, single source of truth, and auditability for free.
+- **Previews before bulk changes** — Plan Mode shows the full proposed structure before creating anything. For individual edits, the agent presents changes for review before applying.
+
+### Agent Architecture: Tool-Calling Pattern
+
+The agent uses LLM function/tool calling:
+
+```
+Teacher -> Chat UI -> Agent API -> LLM -> tool_call -> Existing Services -> result -> LLM -> streamed response -> Chat UI
 ```
 
----
+The LLM sees a set of **tools** (mapped to existing service functions) and decides which to call based on the teacher's message. The agent API executes the tool with full permission checks, then feeds the result back to the LLM for a human-friendly summary.
 
-## 1. Execution Model: API vs Local
+### SDK: Vercel AI SDK
 
-**Open question**: How does the agent apply changes—via API directly, or by suggesting edits locally in the UI?
-
-### Option A: API-First (Recommended for v1)
-
-- Agent sends **structured intents** (e.g. `{ type: "update_lesson_text", lessonId, locale, payload }`) to a dedicated **agent API**
-- Agent API validates permissions, calls existing services (`updateLessonService`, `updateLessonLanguageService`, etc.), returns results
-- Client receives success/failure and refreshes or updates the relevant store
-- **Pros**: Single source of truth, audit trail, reuses existing safeguards
-- **Cons**: Slightly more latency; requires agent backend
-
-### Option B: Local-First
-
-- Agent returns **edit suggestions** as structured data (e.g. JSON patches)
-- Client applies changes in the editor UI; user must explicitly accept (e.g. "Apply" button)
-- Actual persistence happens through existing APIs when user saves
-- **Pros**: Lower latency, no new backend routes
-- **Cons**: More complex client logic; risk of sync drift; harder to audit
-
-### Recommendation
-
-**Start with Option A (API-First)**:
-
-1. Reuse existing `courseTeamMemberMiddleware`, `orgMemberMiddleware`, and org/course checks
-2. Agent executes actions via the same services used by the UI
-3. Simpler mental model: agent is a "programmatic teacher" that talks to the same API
-4. Easier to add rate limits, logging, and abuse prevention later
+- `ai` — core (`streamText`, `tool`, types) — in `packages/ai-assistant` and `apps/api`
+- `@ai-sdk/svelte` — Svelte 5 `Chat` class (runes-based, matches project's `LessonApi` / `BaseApiWithErrors` pattern)
+- `@ai-sdk/openai` + `@ai-sdk/anthropic` — provider packages
+- `streamText()` returns `toUIMessageStreamResponse()` which works directly as a Hono response
+- Tool calling is built-in with Zod schemas; SDK handles function-calling protocol, multi-step execution, streaming tool results
+- Provider abstraction lets us swap between OpenAI and Anthropic by changing one line
 
 ---
 
-## 2. UI Specification
+## Plan Mode & Agent Mode
 
-### Placement
+The two modes represent different phases of a workflow, not a toggle. A typical flow:
 
-- **Button**: "AI Assistant" in the **course header** (alongside Search, Notifications), visible only to teachers (not students)
-- **Panel**: Right sidebar implemented with `@cio/ui` Sheet (`side="right"`), ~400px width on desktop
-- **Mobile**: Full-screen sheet or drawer (reuse `lesson-version-history.svelte` pattern)
+### Plan Mode
 
-### Chat Interface
+**Trigger**: Teacher uploads a document or asks the agent to design a course structure.
 
-- Message list with user/assistant turns
-- Text input at bottom with send button
-- Optional: quick actions / suggested prompts (e.g. "Draft a lesson", "Generate 5 questions")
-- Loading state while agent processes
-- Error states with retry
+**What happens**:
 
-### Context Awareness
+1. Teacher uploads a PDF/DOCX (or pastes text, or describes a topic)
+2. Agent parses the document, extracts text content
+3. Agent analyzes the content and generates a **course plan** — a structured proposal:
 
-- Pass `courseId`, `orgId`, `lessonId` (if viewing a lesson), `exerciseId` (if viewing an exercise) to the agent
-- Agent can reference: "Update the text in the lesson you're viewing" without the user specifying IDs
+```json
+{
+  "title": "Introduction to Biology",
+  "sections": [
+    {
+      "title": "Cell Biology",
+      "order": 1,
+      "lessons": [
+        {
+          "title": "Cell Structure and Function",
+          "description": "Overview of cell organelles, their roles, and how they work together",
+          "order": 1,
+          "hasExercise": true
+        },
+        {
+          "title": "Cell Division: Mitosis and Meiosis",
+          "description": "The processes of cell division, their stages, and biological significance",
+          "order": 2,
+          "hasExercise": true
+        }
+      ]
+    }
+  ]
+}
+```
+
+4. The chat UI renders this as a **structured plan view** — a tree with sections and lessons, each showing title and description
+5. Teacher can:
+   - **Approve as-is**: "Looks good, implement it"
+   - **Request changes**: "Add a section on genetics" / "Merge the first two lessons" / "Remove the exercise from lesson 3"
+   - **Edit inline**: Modify titles/descriptions directly in the plan view
+   - **Reject**: "Start over with a different structure"
+6. The agent refines the plan based on feedback (still in Plan Mode)
+7. Once approved, transitions to Agent Mode
+
+**Key constraint**: Plan Mode is purely conversational. Nothing is created in the database until the teacher explicitly approves.
+
+### Agent Mode
+
+**Trigger**: Teacher approves a plan, or asks the agent to perform a specific action (create lesson, update content, generate questions).
+
+**What happens for plan execution**:
+
+1. Agent receives the approved plan
+2. Creates sections first (in order), capturing the returned section IDs
+3. Creates lessons within each section (in order), capturing lesson IDs
+4. For each lesson, generates full content based on the source document + lesson description, then calls `update_lesson_content` to populate it
+5. Optionally creates exercises with generated questions for lessons marked `hasExercise`
+6. Shows real-time progress via tool status cards in the chat:
+   - "Creating section: Cell Biology..." -> checkmark
+   - "Creating lesson: Cell Structure and Function..." -> checkmark
+   - "Writing lesson content..." -> checkmark
+   - "Creating exercise with 5 questions..." -> checkmark
+7. After completion, `onFinish` callback refreshes the course content tree
+
+**What happens for individual actions** (update lesson, generate questions, etc.):
+
+Same as the standard agent flow — LLM decides which tool to call, executes it, streams the result.
+
+**Progress tracking**: During plan execution, the agent emits structured progress events that the UI renders as a checklist:
+
+```
+[x] Section 1: Cell Biology (created)
+[x]   Lesson 1: Cell Structure and Function (created)
+[x]   Lesson 1: Content written (2,400 words)
+[ ]   Lesson 1: Exercise (5 questions) — in progress...
+[ ]   Lesson 2: Cell Division
+[ ] Section 2: Genetics
+```
+
+### Mode Detection
+
+The mode is implicit based on context, not explicitly toggled by the user:
+
+- If the agent is analyzing a document or proposing structure -> **Plan Mode** behavior (present plan, wait for approval)
+- If the agent is executing a tool or the user said "implement it" -> **Agent Mode** behavior (execute and report)
+- Regular chat (explain something, answer a question about the course) -> neither mode, just conversation
+
+The system prompt instructs the LLM on when to propose vs. when to execute.
 
 ---
 
-## 3. Safeguards
+## Document Upload & Parsing
 
-### Authorization (Reuse Existing Middleware)
+### Plan Gating: EARLY_ADOPTER+ Only
 
-All agent API routes must use:
+Document upload is a premium feature — only available to orgs on the **EARLY_ADOPTER** plan or higher. BASIC (free) plan users cannot upload documents.
 
-| Middleware | Purpose |
-|------------|---------|
-| `authMiddleware` | Require authenticated user |
-| `orgMemberMiddleware` | Require `cio-org-id` and org membership |
-| `courseTeamMemberMiddleware` | Require course team (ADMIN/TUTOR) or org admin |
+**Client-side behavior**:
+- The attachment icon in the chat input is visible to all teachers (so they discover the feature)
+- When a BASIC plan user clicks it, the file picker does NOT open. Instead, the **upgrade modal** is triggered immediately (same `openUpgradeModal()` pattern used by certificates, team invites, etc.)
+- For EARLY_ADOPTER+ users, the file picker opens normally
 
-### Scoping Rules
+**Server-side enforcement**:
+- `POST /agent/upload` checks the org's plan before processing
+- If the org is on the BASIC plan, the endpoint returns `403 { error: "document_upload_requires_upgrade", upgradeRequired: true }`
+- The client handles this 403 by calling `openUpgradeModal()`
+- This double-gating (client + server) prevents bypassing the restriction
 
-1. **Org scope**: Every action is scoped to the org in `cio-org-id` header
-2. **Course scope**: Lesson/exercise edits must belong to a course where the user is a team member
-3. **No cross-org**: Agent must never accept or execute requests for lessons/exercises in another org
+### File Size Limit
 
-### Implementation
+Maximum upload size: **5MB** (aligns with the existing `MAX_DOCUMENT_SIZE` constant in `apps/api/src/constants/upload.ts`).
 
-- Agent API extracts `courseId`, `lessonId`, `exerciseId` from request payload
-- Before any mutation, verify:
-  - Course belongs to the org
-  - User is `courseTeamMember` or `orgAdmin`
-- Reuse `isCourseTeamMemberOrOrgAdmin` and `isUserOrgTeamMember` from `@cio/db/queries`
+- Server validates file size before parsing. Files over 5MB are rejected with `413 { error: "file_too_large", maxSize: 5242880 }`
+- Client validates before upload as well (check `file.size` on selection) and shows an inline error: "File is too large. Maximum size is 5MB."
+- 5MB is sufficient for most textbook chapters, syllabi, and course outlines. Full textbook PDFs (50MB+) are out of scope — teachers should upload individual chapters.
+
+### Upload Flow
+
+1. Teacher clicks the attachment icon in the chat input
+2. **Plan check**: if BASIC plan, trigger upgrade modal and stop. If EARLY_ADOPTER+, continue.
+3. Selects a PDF or DOCX file
+4. **Size check**: if file > 5MB, show inline error and stop
+5. File is uploaded to `POST /agent/upload` which:
+   - Validates plan (EARLY_ADOPTER+ required)
+   - Validates file type (PDF/DOCX only) and size (max 5MB)
+   - Extracts text content server-side
+   - Returns `{ documentId, fileName, pageCount, textPreview }` (first ~200 chars)
+   - Stores extracted text in Redis with a TTL (keyed by `documentId`, expires after 1 hour)
+6. The `documentId` is attached to the next chat message
+7. When the agent processes the message, it retrieves the full extracted text from Redis and includes it in the LLM context
+
+### Text Extraction
+
+**PDF**: Use `pdf-parse` (lightweight, pure JS, no native dependencies). Extracts text content from all pages. Handles multi-column layouts reasonably well for structured content like textbooks/syllabi.
+
+**DOCX**: Use `mammoth` (pure JS). Extracts text content preserving heading structure (H1, H2, etc.) which helps the LLM understand document hierarchy for course structure generation.
+
+### Why Server-Side Extraction
+
+- Keeps document parsing out of the client bundle
+- Text is extracted once and cached in Redis — subsequent agent turns reference the same extracted text without re-uploading
+- The LLM never sees the raw binary file — only clean text, which is more token-efficient
+- File validation and size limits are enforced server-side
+
+### Upload API
+
+```
+POST /agent/upload
+  Content-Type: multipart/form-data
+  Body: file (PDF or DOCX, max 5MB)
+  Auth: authMiddleware + orgMemberMiddleware + courseTeamMemberMiddleware
+  Plan: EARLY_ADOPTER+ required (BASIC returns 403)
+
+  Success Response (200): {
+    documentId: string,
+    fileName: string,
+    mimeType: string,
+    pageCount: number | null,    // PDF only
+    wordCount: number,
+    textPreview: string           // first ~200 chars
+  }
+
+  Error Responses:
+    403: { error: "document_upload_requires_upgrade", upgradeRequired: true }  // BASIC plan
+    413: { error: "file_too_large", maxSize: 5242880 }                         // > 5MB
+    415: { error: "unsupported_file_type", allowed: ["application/pdf", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"] }
+```
+
+The extracted text is NOT returned in the upload response (it can be very large). It lives in Redis and is fetched internally by the agent chat endpoint when `documentId` is provided in the chat message.
+
+### Redis Key
+
+```
+agent:document:{documentId} -> { text, fileName, mimeType, uploadedAt }
+TTL: 3600 seconds (1 hour)
+```
+
+Uses the existing Redis infrastructure (`apps/api/src/utils/redis/`).
 
 ---
 
-## 4. Self-Hosted vs Cloud
+## Package: `packages/ai-assistant`
 
-### Cloud (ClassroomIO-Hosted)
+A thin, backend-focused package consumed by `apps/api`. No UI code. The heavy lifting is done by the Vercel AI SDK; this package provides project-specific configuration on top.
 
-- AI assistant is **enabled** for teachers (within plan limits, if any)
-- ClassroomIO provides the LLM API keys; no user configuration needed
+### Responsibilities
 
-### Self-Hosted
+- **Provider factory** — creates the right AI SDK `LanguageModel` from env vars (`AI_PROVIDER`, `AI_API_KEY`, `AI_MODEL`)
+- **Role-aware tool registry** — `getToolSchemas(role)` returns Zod schemas per role
+- **Role-aware system prompt** — `buildSystemPrompt(context)` generates different LLM instructions for teachers vs students, including Plan Mode vs Agent Mode behavior
+- **Course plan types** — `CoursePlan`, `CoursePlanSection`, `CoursePlanLesson` types used by both API and dashboard
+- **Shared types** — `AgentRole`, `AgentContext`, tool names, config types
 
-- AI assistant is **not available**. Self-hosters cannot use this feature.
-- **Implementation**: Hide the "AI Assistant" button when `PUBLIC_IS_SELFHOSTED === 'true'`. Agent API routes return `403` or are not registered when self-hosted.
-
----
-
-## 5. Package Design: `packages/ai-assistant`
-
-The agent should live in a **package** that works natively with ClassroomIO APIs.
-
-### Package Responsibilities
-
-- **SDK / client**: Types and helpers for calling the agent API from the dashboard
-- **Shared types**: Intent schemas, message formats
-- **No UI**: UI stays in `apps/dashboard`; package is backend + types
-
-### Suggested Structure
+### Structure
 
 ```
 packages/ai-assistant/
   src/
-    index.ts           # Public exports
-    types.ts           # Message, intent, response types
-    client.ts          # Agent API client (optional; dashboard may use classroomio RPC)
+    index.ts                 # Public exports
+    types.ts                 # AgentRole, AgentContext, CoursePlan, AIProviderConfig
+    providers/
+      index.ts               # createModel(config) factory
+    tools/
+      index.ts               # getToolSchemas(role) registry
+      shared.ts              # Read-only tool schemas (both roles)
+      teacher.ts             # Mutation tool schemas (teacher only, v1)
+      student.ts             # Learning tool schemas (student only, v2 stubs)
+    prompt/
+      system-prompt.ts       # buildSystemPrompt(context) — role-aware
+      teacher.ts             # Teacher prompt template (includes Plan/Agent mode instructions)
+      student.ts             # Student prompt template (v2 stub)
   package.json
   tsconfig.json
 ```
 
-### Agent API (in `apps/api`)
-
-- New routes under e.g. `/course/:courseId/agent` or `/organization/agent`
-- Routes: `POST /chat` (stream or non-stream), `POST /execute` (for structured intents)
-- Agent service: interpret user message, map to intents, call lesson/exercise services, return result
-
-### Complexity Estimate
-
-| Component | Complexity | Notes |
-|-----------|------------|-------|
-| Package scaffold | Low | Thin wrapper around types + optional client |
-| Agent API routes | Medium | Auth, validation, orchestration |
-| LLM integration | Medium–High | Depends on provider (OpenAI, Anthropic, etc.) |
-| Chat UI | Medium | Standard chat + Sheet |
-| Self-host gate | Low | Env check + conditional render |
+The agent loop itself is NOT in this package — `streamText()` from `ai` core handles the full loop (prompt -> LLM -> tool call -> execute -> respond -> repeat). The Hono route assembles tools (schema from package + execute from services) and calls `streamText`.
 
 ---
 
-## 6. Data Sources & APIs (Existing)
+## Foundation Layer: Role-Aware Design
 
-| Action | API / Service | Auth |
-|--------|---------------|------|
-| Update lesson text | `PUT /course/:courseId/lesson/:lessonId/language/:locale` | courseTeamMember |
-| Update lesson metadata | `PUT /course/:courseId/lesson/:lessonId` | courseTeamMember |
-| Tag exercise (template tag) | Exercise template has `tag`; create/update exercise | courseTeamMember |
-| Tag course (org tags) | `PUT /course/:courseId/tags` | courseTeamMember |
-| Create lesson | `POST /course/:courseId/lesson` | courseTeamMember |
-| Create exercise | Exercise creation flow | courseTeamMember |
-| Get lesson content | `GET /course/:courseId/lesson/:lessonId` | courseMember |
+### AgentRole — the core discriminator
 
-Agent actions should call these through the existing service layer, not bypass them.
+- `'teacher'` — can read AND mutate course content (create sections, update lessons, generate questions, execute plans)
+- `'student'` — can only read and discuss content (explain concepts, answer questions, quiz on material). Gated off in v1.
+
+### Role detection — server-side, automatic
+
+- API route checks user's course membership via existing `isCourseTeamMemberOrOrgAdmin`
+- Team members (ADMIN/TUTOR role in `groupmember`) get `role: 'teacher'`
+- Regular members (STUDENT role) get `role: 'student'`
+- In v1, `role: 'student'` returns 403
+
+### Tool registry — `getToolSchemas(role)`
+
+- `shared` tools (read-only): available to both roles
+- `teacher` tools (mutations): teacher only — includes section/lesson creation, content updates, plan execution
+- `student` tools (v2): student only, stubs for now
+
+Teachers get `shared + teacher`. Students get `shared + student`. Students can never access mutation tools, even via prompt injection.
+
+### Single API endpoint
+
+`/agent/chat` serves both roles. Role is detected server-side (not passed by the client, preventing spoofing). The endpoint loads tools and prompt based on the detected role.
 
 ---
 
-## 7. Suggested Implementation Phases
+## Agent Tools
+
+### V1 Core Tools (9 tools)
+
+| Tool                    | Type  | Description                                          | Service                                               |
+| ----------------------- | ----- | ---------------------------------------------------- | ----------------------------------------------------- |
+| `get_course_structure`  | read  | Get sections, lessons, exercises tree                | `getCourseContentItems` + `listCourseSections`        |
+| `get_lesson_content`    | read  | Get a specific lesson's content (HTML)               | `getLesson` + lesson language query                   |
+| `get_exercise_details`  | read  | Get exercise with all questions and options          | `getExercise`                                         |
+| `create_section`        | write | Create a new section in the course                   | `createCourseSection(courseId, { title, order })`     |
+| `create_lesson`         | write | Create a new lesson in a section                     | `createLesson(courseId, { title, sectionId, order })` |
+| `update_lesson_content` | write | Update lesson text content                           | `upsertLessonLanguageService(lessonId, { locale, content })` |
+| `create_exercise`       | write | Create exercise with questions and options           | `createExercise({ courseId, lessonId, sectionId, title, questions })` |
+| `add_questions`         | write | Add questions to an existing exercise                | `updateExerciseService` (diff-based)                  |
+| `generate_course_plan`  | agent | Analyze text and return structured CoursePlan JSON   | No service call — LLM generates the plan structure    |
+
+**Note on `generate_course_plan`**: This is a special tool. Unlike other tools that call services, this tool's "execution" is the LLM itself generating a structured JSON response conforming to the `CoursePlan` schema. The tool schema defines the output format so the LLM returns valid, parseable JSON rather than free-form text. The chat UI detects this tool's result and renders the plan view component.
+
+### Phase 2+ Tools
+
+**Lessons**: `update_lesson_metadata`, `delete_lesson`, `reorder_lessons`
+**Sections**: `update_section`, `reorder_sections`, `delete_section`
+**Exercises**: `update_exercise_metadata`, `update_question`, `delete_question`, `delete_exercise`
+**Other**: `update_course_tags`, `create_newsfeed_post`
+
+### Phase 4 Student Tools (v2)
+
+`explain_concept`, `quiz_me`, `clarify_exercise`, `get_my_progress`, `get_my_submissions`
+
+### Tool Execution Rules
+
+Each tool handler in the API will:
+
+1. Extract IDs from tool arguments
+2. Verify the target resource belongs to the course/org in context
+3. Verify user is course team member or org admin
+4. Check token balance before LLM call (see Token Usage section)
+5. Call the existing service function
+6. Return structured result to the agent
+
+### No-Hallucination Boundary
+
+The system prompt includes an explicit list of what the agent CANNOT do. The agent must **never**:
+
+- Pretend to perform an action it doesn't have a tool for
+- Fabricate data it hasn't retrieved via a tool call
+- Claim to have made a change unless a tool call succeeded
+- Create content without presenting it for review first (in Plan Mode)
+
+**Explicit CANNOT-do list (included verbatim in system prompt):**
+
+- Cannot create, delete, or clone courses
+- Cannot update course-level settings (title, description, logo, status)
+- Cannot manage course members, invitations, or roles
+- Cannot grade submissions or assign marks
+- Cannot handle payments or attendance
+- Cannot upload files, images, videos, or documents to lessons (the agent can receive documents for analysis, but cannot attach media to course content)
+- Cannot delete sections, lessons, or exercises (v1 — added in Phase 2)
+- Cannot reorder content (v1 — added in Phase 2)
+- Cannot manage org settings, members, or billing
+- Cannot access data from other courses or organizations
+- Cannot browse the internet or fetch external URLs
+- Cannot send emails or notifications
+
+---
+
+## Token-Based Usage Tracking
+
+AI usage is metered by tokens. Each org gets a monthly base allowance from their plan, with the option to buy extra credit packs when exhausted.
+
+### How It Works
+
+1. **Before LLM call**: check `ai_token_usage` for current month + `ai_credit_balance`. If `remaining <= 0`, return 402.
+2. **After LLM call**: `streamText()` result exposes `usage` with `promptTokens` and `completionTokens`. Insert row into `ai_token_usage`.
+3. **Deduction logic**: monthly allowance consumed first. Credits only touched when `used_this_month > allowance`.
+
+### Plan-Based Allowances
+
+Tied to existing `organization_plan` table. Each plan gets a monthly token allowance and feature access:
+
+| Plan | Token Allowance | Chat | Document Upload |
+|------|----------------|------|-----------------|
+| **BASIC** | 0 tokens | Not available | Not available — triggers upgrade modal |
+| **EARLY_ADOPTER** | 500K tokens/month (~50-100 conversations) | Available | Available (max 5MB per file) |
+| **ENTERPRISE** | 2M tokens/month (or unlimited) | Available | Available (max 5MB per file) |
+
+Allowance resets on the 1st of each month.
+
+Document upload is gated by plan, not by token balance. Even if an EARLY_ADOPTER has tokens remaining, a BASIC user still cannot upload. This is a feature gate, not a usage gate.
+
+### Extra Credit Packs
+
+- One-time purchases, do NOT expire, do NOT reset monthly
+- Deduction order: monthly allowance first, then credits
+- Purchase flow: org settings -> payment -> credits added to `ai_credit_balance`
+
+### Database Tables
+
+```sql
+CREATE TABLE ai_token_usage (
+  id            BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+  org_id        UUID NOT NULL REFERENCES organization(id),
+  user_id       UUID NOT NULL,
+  course_id     UUID NOT NULL,
+  prompt_tokens INTEGER NOT NULL,
+  completion_tokens INTEGER NOT NULL,
+  total_tokens  INTEGER GENERATED ALWAYS AS (prompt_tokens + completion_tokens) STORED,
+  model         TEXT NOT NULL,
+  created_at    TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX idx_ai_token_usage_org_month ON ai_token_usage (org_id, created_at);
+
+CREATE TABLE ai_credit_balance (
+  id            BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+  org_id        UUID NOT NULL REFERENCES organization(id) UNIQUE,
+  balance       INTEGER NOT NULL DEFAULT 0,
+  updated_at    TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+```
+
+---
+
+## Safeguards
+
+Four layers:
+
+1. **Route-level middleware** — `authMiddleware` + `orgMemberMiddleware` + `courseMemberMiddleware`. Role detection inside handler.
+2. **Tool-level permission checks** — tool set IS the security boundary. Students cannot call mutation tools. Each tool's execute function re-verifies resource ownership.
+3. **Token budget enforcement** — every LLM call checks remaining balance. 402 if exhausted.
+4. **Rate limiting** — per-user, per-org rate limits (requests/minute). Self-hosted is uncapped.
+
+---
+
+## Self-Hosted vs Cloud
+
+- **Cloud**: AI assistant enabled by default. ClassroomIO provides the LLM API key server-side. Usage metered per plan tier.
+- **Self-hosted**: AI assistant **disabled by default**. To enable, admin sets `AI_API_KEY` and optionally `AI_PROVIDER` / `AI_MODEL` in env. When configured, assistant becomes available. When not configured, button is hidden. No token metering for self-hosted (user's own API key, their cost).
+
+---
+
+## UI Specification
+
+### Trigger
+
+"AI Assistant" button in the course sidebar navigation. In v1, only visible to teachers/admins. Hidden when self-hosted and no AI key configured.
+
+### Panel
+
+Right sidebar using `@cio/ui` Sheet (`side="right"`, ~420px). Does NOT replace the left sidebar — both can be open simultaneously.
+
+### Chat Interface
+
+- Message list with user/assistant turns
+- Text input at bottom with send button and **attachment icon** (for PDF/DOCX upload)
+- Streaming token display (ChatGPT-like typing)
+- Quick-action chips (context-dependent)
+- Stop button while streaming
+
+### File Upload in Chat
+
+- Attachment icon next to the text input (paperclip icon)
+- **BASIC plan users**: clicking the attachment icon triggers the upgrade modal (`openUpgradeModal()`). File picker does not open. A subtle tooltip or label can hint "Upgrade to upload documents".
+- **EARLY_ADOPTER+ users**: clicking opens file picker filtered to `.pdf, .docx`
+- **Client-side size check**: if selected file exceeds 5MB, show inline error below the input: "File is too large. Maximum size is 5MB." File is not uploaded.
+- Selected file shows as a chip above the input: `[Biology-Textbook.pdf (24 pages)] [x]`
+- On send, file is uploaded first (`POST /agent/upload`), then `documentId` is included in the chat message
+- While uploading: chip shows spinner. While parsing: "Analyzing document..."
+- If server returns 403 (`document_upload_requires_upgrade`): trigger upgrade modal
+- After parsing: agent enters Plan Mode and proposes a course structure
+
+### Plan View Component
+
+When the agent returns a `generate_course_plan` tool result, the chat renders a **plan card** instead of plain text:
+
+```
++------------------------------------------+
+| Course Plan                              |
+|                                          |
+| Section 1: Cell Biology                  |
+|   1. Cell Structure and Function         |
+|      Overview of cell organelles...      |
+|   2. Cell Division: Mitosis & Meiosis    |
+|      The processes of cell division...   |
+|                                          |
+| Section 2: Genetics                      |
+|   3. DNA and Gene Expression             |
+|      Structure of DNA, transcription...  |
+|   4. Heredity and Genetic Variation      |
+|      Mendelian genetics, Punnett...      |
+|                                          |
+| [Implement Plan]  [Ask for Changes]      |
++------------------------------------------+
+```
+
+- Sections are collapsible
+- Each lesson shows title + short description
+- "Implement Plan" button -> triggers Agent Mode execution
+- "Ask for Changes" button -> focuses the text input with a prompt to describe changes
+- Teacher can also just type feedback naturally: "Add a section on ecology"
+
+### Agent Mode Progress
+
+During plan execution, a progress card replaces the plan card:
+
+```
++------------------------------------------+
+| Implementing Course Plan                 |
+|                                          |
+| [x] Section: Cell Biology                |
+|   [x] Lesson: Cell Structure             |
+|   [x] Content written (1,850 words)      |
+|   [x] Exercise: 5 MCQ questions          |
+|   [~] Lesson: Cell Division              |
+|   [ ] Content                            |
+|   [ ] Exercise                           |
+| [ ] Section: Genetics                    |
+|   [ ] Lesson: DNA and Gene Expression    |
+|   [ ] Lesson: Heredity                   |
+|                                          |
+| Creating lesson content...               |
+| [Stop]                                   |
++------------------------------------------+
+```
+
+- Checkmarks for completed steps
+- Spinner for in-progress step
+- Empty circles for pending steps
+- Stop button to halt execution (already-created content is kept)
+
+### Role-Aware Quick Actions
+
+Teacher (v1):
+- "Upload a document to create a course"
+- "Draft a lesson"
+- "Generate questions from this lesson"
+- "Improve this lesson's text"
+
+Student (v2):
+- "Explain this lesson"
+- "Quiz me on this topic"
+- "Help me with this exercise"
+
+### Context Awareness
+
+Client passes `courseId`, current `lessonId` or `exerciseId`. The role is NOT sent from the client — detected server-side. The system prompt includes: "The teacher is currently viewing lesson/exercise ID: {id}".
+
+### Store Refresh
+
+`onFinish` callback fires after the agent completes. Refreshes the relevant store:
+- After plan execution: full course content tree refresh
+- After lesson update: `lessonApi.get()` reload
+- After exercise creation/update: exercise data reload
+
+---
+
+## Streaming
+
+The Vercel AI SDK provides structured SSE via `toUIMessageStreamResponse()`:
+
+- Text chunks (tokens stream one by one)
+- Tool call events (when LLM decides to call a tool)
+- Tool results (when tool execution completes)
+- Finish signals
+
+On the frontend, the `Chat` class from `@ai-sdk/svelte` consumes this protocol automatically. No manual SSE parsing.
+
+---
+
+## API Routes
+
+New route domain: `/agent`
+
+| Method | Route | Description | Auth |
+|--------|-------|-------------|------|
+| `GET` | `/agent/status` | Feature flag + role + usage info | auth + orgMember |
+| `POST` | `/agent/chat` | Main chat endpoint (SSE stream) | auth + orgMember + courseMember |
+| `POST` | `/agent/upload` | Upload PDF/DOCX for parsing | auth + orgMember + courseTeamMember |
+| `GET` | `/agent/usage` | Detailed usage stats | auth + orgMember |
+| `POST` | `/agent/credits` | Purchase credits | auth + orgAdmin |
+
+### POST /agent/chat
+
+```typescript
+{
+  courseId: string,
+  messages: UIMessage[],      // Vercel AI SDK message format
+  context?: {
+    lessonId?: string,
+    exerciseId?: string,
+    documentId?: string        // References uploaded document in Redis
+  }
+}
+```
+
+Returns: SSE stream (`toUIMessageStreamResponse()`)
+
+Flow:
+1. Detect role from course membership
+2. Check token balance
+3. If `documentId` provided, fetch extracted text from Redis and inject into context
+4. Load tools + system prompt based on role
+5. Call `streamText()` with `maxSteps: 10` (plan execution may need more steps than simple queries)
+6. Stream response to client
+7. Record token usage after completion
+
+### POST /agent/upload
+
+```typescript
+// Request: multipart/form-data with 'file' field
+// Response:
+{
+  documentId: string,
+  fileName: string,
+  mimeType: string,
+  pageCount: number | null,
+  wordCount: number,
+  textPreview: string
+}
+```
+
+Registered in `apps/api/src/app.ts` as `.route('/agent', agentRouter)`.
+
+---
+
+## LLM Provider Abstraction
+
+Configurable via environment variables:
+
+- `AI_PROVIDER` — `openai` | `anthropic` (default: `openai`)
+- `AI_API_KEY` — the provider API key
+- `AI_MODEL` — model name override (default: provider's recommended model)
+
+Provider factory in `packages/ai-assistant` normalizes into a single `LanguageModel` instance for `streamText()`.
+
+---
+
+## Conversation Persistence
+
+**v1**: Session-scoped — managed in-memory by the `Chat` class on the client. Conversation resets when sidebar closes or teacher navigates away.
+
+**v2 consideration**: Persist conversations per course in the database.
+
+---
+
+## Example Flows
+
+### Flow 1: Upload Document -> Plan -> Execute
+
+The core differentiating flow. Teacher has a textbook PDF and wants to turn it into a course.
+
+1. Teacher opens AI Assistant, clicks attachment icon, selects `Biology-101.pdf`
+2. File uploads to `/agent/upload`. Chat shows: `[Biology-101.pdf (142 pages)]`
+3. Teacher sends: "Create a course structure from this textbook"
+4. Agent receives the message + extracted text from Redis
+5. **Plan Mode**: Agent analyzes the document structure (chapters, headings, key topics) and calls `generate_course_plan` tool, returning a structured `CoursePlan`
+6. Chat renders the plan card with sections and lessons
+7. Teacher reviews: "Looks good but split the genetics section into two — basic and advanced"
+8. Agent refines the plan, returns updated `CoursePlan`
+9. Teacher clicks "Implement Plan"
+10. **Agent Mode**: Agent executes the plan step by step:
+    - `create_section("Cell Biology", 1)` -> sectionId
+    - `create_lesson(courseId, { title: "Cell Structure", sectionId, order: 1 })` -> lessonId
+    - `update_lesson_content(lessonId, { locale: "en", content: "<generated HTML>" })` -> success
+    - `create_exercise({ courseId, lessonId, sectionId, title: "Cell Structure Quiz", questions: [...] })` -> exerciseId
+    - ... repeat for each lesson in each section
+11. Progress card updates in real-time
+12. On completion: "Course structure created with 4 sections and 12 lessons. Content has been populated for all lessons."
+13. Course content tree refreshes — teacher sees the full course
+
+### Flow 2: "Generate 5 MCQ questions from this lesson"
+
+Teacher is viewing a lesson and opens the AI assistant.
+
+1. Teacher sends: "Generate 5 multiple choice questions from this lesson"
+2. Context includes `lessonId`
+3. LLM calls `get_lesson_content(lessonId)` to read the lesson text
+4. LLM generates 5 questions
+5. LLM calls `create_exercise({ courseId, lessonId, sectionId, title, questions })` or `add_questions(exerciseId, questions)` if an exercise already exists
+6. Chat shows tool status cards + summary
+7. Exercise data refreshes
+
+### Flow 3: "Rewrite the introduction paragraph"
+
+1. Teacher sends: "Rewrite the introduction paragraph to be more engaging"
+2. Context includes `lessonId`
+3. LLM calls `get_lesson_content(lessonId)`
+4. LLM identifies the introduction, rewrites it
+5. LLM presents the new introduction in chat and asks for confirmation
+6. Teacher says "apply it"
+7. LLM calls `update_lesson_content(lessonId, fullUpdatedContent)` — replaces full lesson HTML with only the introduction changed
+8. Lesson store refreshes
+
+### Flow 4: "Design a course about machine learning" (no document)
+
+Plan Mode works without a document too — the teacher can describe what they want.
+
+1. Teacher sends: "Design a 6-week course about machine learning for beginners"
+2. Agent enters Plan Mode using its training knowledge (no document needed)
+3. Returns a `CoursePlan` with sections and lessons
+4. Teacher reviews and approves
+5. Agent Mode executes — creates sections, lessons, writes content from LLM knowledge
+
+---
+
+## Implementation Phases
 
 ### Phase 1: Foundation
 
-1. Add "AI Assistant" button to course header (hidden when self-hosted)
-2. Add right Sheet with placeholder chat UI (no backend)
-3. Create `packages/ai-assistant` with types and client stubs
-4. Add agent API route skeleton with `courseTeamMemberMiddleware`
+- Create `packages/ai-assistant` with types (`AgentRole`, `AgentContext`, `CoursePlan`), provider factory, tool registry (9 v1 tools), system prompt with Plan/Agent mode instructions and no-hallucination boundary
+- Add `ai_token_usage` and `ai_credit_balance` tables to DB schema
+- Add `GET /agent/status` and `POST /agent/chat` route skeleton with role detection (students get 403 in v1) and token balance check
+- Add `POST /agent/upload` route with PDF/DOCX parsing (`pdf-parse`, `mammoth`)
+- Add Redis key management for uploaded document text
+- Add "AI Assistant" button to course sidebar (gated on status endpoint + plan check)
+- Build right sidebar Sheet with basic chat UI (hardcoded echo responses)
+- Add file upload UI (attachment icon, file chip, upload progress)
 
-### Phase 2: Chat + Execution
+### Phase 2: Agent Core
 
-1. Implement agent API `POST /chat` with LLM integration
-2. Implement intent parsing: update lesson, generate questions, draft lesson
-3. Wire agent to `updateLessonService`, `createLesson`, exercise services
-4. Connect chat UI to API; display responses and errors
+- Implement provider factory (OpenAI + Anthropic) using `createModel(config)`
+- Wire 9 v1 tools to existing services via `streamText()` with `maxSteps: 10`
+- Implement `generate_course_plan` tool with `CoursePlan` JSON schema
+- Record token usage after each call; enforce balance check before each call
+- Connect chat UI to streaming API via `@ai-sdk/svelte` `Chat` class
+- Render streamed tokens and tool status cards
+- Build Plan View component (structured plan card with sections/lessons)
+- Build Agent Mode progress card (checklist with real-time updates)
+- Implement "Implement Plan" button -> plan execution flow
+- Add usage meter to AI assistant sidebar header
+- Implement `onFinish` store refresh for course content tree, lessons, exercises
 
-### Phase 3: Polish
+### Phase 3: Polish + Safeguards + Credits
 
-1. Add quick-action prompts
-2. Add context injection (current lesson/exercise)
-3. Rate limiting and usage tracking (if needed)
+- Tool-level permission re-validation (verify resource belongs to course/org)
+- Rate limiting (per-user, per-org, requests/minute)
+- Quick-action chips and context-aware suggestions
+- Self-host env var detection and `GET /agent/status` logic
+- Conversation context windowing (trim long histories, especially after document upload)
+- `POST /agent/credits` for purchasing credit packs
+- Credit purchase UI in org settings + exhausted-state UI in chat
+- `GET /agent/usage` for detailed usage dashboard
+- Stop button during plan execution (graceful — keeps already-created content)
+
+### Phase 4: More Tools
+
+- Section management: `update_section`, `reorder_sections`, `delete_section`
+- Lesson management: `update_lesson_metadata`, `delete_lesson`, `reorder_lessons`
+- Exercise management: `update_exercise_metadata`, `update_question`, `delete_question`, `delete_exercise`
+- Other: `update_course_tags`, `create_newsfeed_post`
+
+### Phase 5: Student Assistant (v2)
+
+- Student tool schemas and execute functions
+- Student system prompt template
+- Remove the v1 student 403 gate
+- Student quick-action chips
+- Surface AI assistant in the student course view (course-app)
+- Student usage counts against org token budget (same pool)
 
 ---
 
-## 8. Open Questions
+## New Dependencies
 
-1. **Streaming**: Should responses stream (SSE/WebSocket) or be non-streaming for v1?
-2. **LLM provider**: OpenAI, Anthropic, or configurable per deployment?
-3. **Rate limits**: Per-user, per-org, or per-course? Needed for cloud cost control?
-4. **Exercise tagging**: Does "tag an exercise" mean org-level course tags, or exercise-template tags (e.g. mcq, coding)? Clarify semantics.
-5. **Draft persistence**: When agent drafts a lesson, does it create a draft immediately or return text for user to paste? Recommendation: create draft via API, user reviews before publishing.
+| Package | Where | Purpose |
+|---------|-------|---------|
+| `ai` | `packages/ai-assistant`, `apps/api` | Vercel AI SDK core (`streamText`, `tool`, types) |
+| `@ai-sdk/svelte` | `apps/dashboard` | Svelte 5 `Chat` class for streaming chat |
+| `@ai-sdk/openai` | `packages/ai-assistant` | OpenAI provider |
+| `@ai-sdk/anthropic` | `packages/ai-assistant` | Anthropic provider |
+| `pdf-parse` | `apps/api` | PDF text extraction |
+| `mammoth` | `apps/api` | DOCX text extraction |
 
 ---
 
-## 9. Success Criteria
+## Files to Create / Modify
 
-- Teachers can open the AI assistant from the course header and chat in a right sidebar
-- Agent can update lesson text, create draft lessons, and generate questions (as defined in Phase 2)
+### New files
+
+- `packages/ai-assistant/` — entire new package (types, providers, tools, prompts)
+- `apps/api/src/routes/agent/` — agent route handlers (chat, upload, status, usage, credits)
+- `apps/api/src/services/agent/` — agent service (document parsing, token tracking)
+- `apps/dashboard/src/lib/features/ai-assistant/` — UI components (sheet, chat, plan view, progress card, file upload)
+
+### Modified files
+
+- `packages/db/src/schema.ts` — add `ai_token_usage` and `ai_credit_balance` tables
+- `apps/api/src/app.ts` — register `/agent` route
+- `apps/api/src/utils/redis/key-generators.ts` — add agent document keys
+- `apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte` — add AI Assistant button
+
+### Existing files referenced (services the agent will call)
+
+- `apps/api/src/services/course/section.ts` — `createCourseSection`, `listCourseSections`
+- `apps/api/src/services/lesson/lesson.ts` — `createLesson`, `getLesson`
+- `apps/api/src/services/lesson-language.ts` — `upsertLessonLanguageService`
+- `apps/api/src/services/exercise/exercise.ts` — `createExercise`, `updateExerciseService`
+- `packages/db/src/queries/course/content.ts` — `getCourseContentItems`
+
+---
+
+## Success Criteria
+
+- Teacher can upload a PDF/DOCX and get a proposed course structure within 30 seconds
+- Teacher can review, edit, and approve the plan before any content is created
+- Agent can execute an approved plan end-to-end: creating sections, lessons, and content
+- Teacher can see real-time progress during plan execution
+- All standard agent actions work: update lesson text, generate questions, draft lessons
 - No user can modify another org's data; all actions pass permission checks
-- Self-hosted instances cannot use the assistant; UI and API are gated
-- Agent package integrates cleanly with existing API and dashboard structure
+- Self-hosted instances can enable/disable the assistant via env var
+- Token usage is tracked and metered per org plan
diff --git a/prd/ai-course-assistant/implementation-plan.md b/prd/ai-course-assistant/implementation-plan.md
index d6f448ed..c08243c6 100644
--- a/prd/ai-course-assistant/implementation-plan.md
+++ b/prd/ai-course-assistant/implementation-plan.md
@@ -3,64 +3,147 @@
 ## Scope Lock (v1)
 
 1. AI assistant is teacher-only (course team members; not students).
-2. Agent executes via API (no local-only execution).
+2. Agent executes via API using Vercel AI SDK tool-calling pattern.
 3. All actions are org/course-scoped; no cross-org access.
-4. Self-hosted: assistant not available; hide UI and block agent routes.
-5. Chat lives in a right sidebar (Sheet) from the course header.
-6. Supported intents: update lesson text, generate questions from text, draft lesson; exercise tagging TBD (clarify org tags vs template tags).
+4. Self-hosted: assistant disabled by default; enabled via `AI_API_KEY` env var.
+5. Chat lives in a right sidebar (Sheet) triggered from the course sidebar navigation.
+6. Two modes: **Plan Mode** (propose course structure from document or prompt) and **Agent Mode** (execute approved actions).
+7. Supported actions: upload PDF/DOCX, generate course plan, create sections, create/update lessons, create exercises with questions.
 
 ## Delivery Phases
 
-1. Phase A: Package + types + self-host gate
-2. Phase B: Agent API routes + permission checks
-3. Phase C: Chat UI + header button
-4. Phase D: LLM integration + intent execution
-5. Phase E: Polish (quick actions, context, rate limits)
+1. Phase 1: Foundation — package + types + DB tables + route skeletons + upload endpoint + sidebar UI shell
+2. Phase 2: Agent Core — LLM integration + 9 tools + streaming chat + plan view + agent execution + usage tracking
+3. Phase 3: Polish — rate limits, quick actions, self-host gating, credits, stop button
+4. Phase 4: More Tools — section/lesson/exercise management (delete, reorder, update metadata)
+5. Phase 5: Student Assistant (v2) — student tools, student prompt, course-app surface
 
 ## Ticket Breakdown
 
-| ID | Area | Task | Key Files | Dependencies | Done When |
-| --- | --- | --- | --- | --- | --- |
-| AI-A1 | Package | Create `packages/ai-assistant` with types (Message, Intent, Response) | `packages/ai-assistant/src/types.ts` | None | Package builds; types exportable |
-| AI-A2 | Package | Add optional API client for agent chat | `packages/ai-assistant/src/client.ts` | AI-A1 | Client can call agent endpoints (or dashboard uses RPC directly) |
-| AI-A3 | Dashboard | Add `isAiAssistantAvailable` util (false when `PUBLIC_IS_SELFHOSTED`) | `apps/dashboard/src/lib/utils/ai-assistant.ts` | None | Util returns bool; hide button when self-hosted |
-| AI-B1 | API | Add agent validation schemas (chat payload, intent payloads) | `packages/utils/src/validation/agent/` | None | Zod schemas for chat + intents |
-| AI-B2 | API | Add agent routes under `/course/:courseId/agent`; do not register or return 403 when self-hosted | `apps/api/src/routes/course/agent.ts` | AI-B1 | `POST /chat`, `POST /execute` (or combined); blocked when `PUBLIC_IS_SELFHOSTED` |
-| AI-B3 | API | Apply auth + courseTeamMember middleware to agent routes | `apps/api/src/routes/course/agent.ts` | AI-B2 | Unauthorized users get 403 |
-| AI-B4 | API | Add agent service: parse message → intent → call lesson/exercise services | `apps/api/src/services/agent.ts` | AI-B2 | Service orchestrates intents; returns structured response |
-| AI-B5 | API | Verify org/course scoping in every agent mutation | `apps/api/src/services/agent.ts` | AI-B4 | Cross-org requests rejected |
-| AI-C1 | Dashboard | Add AI Assistant button to course header | `apps/dashboard/src/lib/features/course/components/course-header.svelte` | AI-A3 | Button visible when `isAiAssistantAvailable` and teacher |
-| AI-C2 | Dashboard | Add right Sheet with chat UI (message list + input) | `apps/dashboard/src/lib/features/ai-assistant/ai-assistant-sheet.svelte` | AI-C1 | Sheet opens from button; placeholder chat |
-| AI-C3 | Dashboard | Create AI assistant feature module (store, API class) | `apps/dashboard/src/lib/features/ai-assistant/` | AI-A1 | API class calls agent endpoint; store holds messages |
-| AI-C4 | Dashboard | Wire chat input → API → message display | `apps/dashboard/src/lib/features/ai-assistant/` | AI-C3, AI-B2 | User can send message; response shows in chat |
-| AI-D1 | API | Integrate LLM provider (OpenAI/Anthropic) for chat completion | `apps/api/src/services/agent.ts` | AI-B4 | Agent can generate text from user message |
-| AI-D2 | API | Implement intent: update lesson text | Agent service + lessonLanguage service | AI-D1 | "Update this text..." → `updateLessonLanguageService` |
-| AI-D3 | API | Implement intent: generate N questions from text | Agent service | AI-D1 | Returns generated questions as text; user copies or we add create flow later |
-| AI-D4 | API | Implement intent: draft lesson | Agent service + `createLesson` | AI-D1 | Creates draft lesson; returns lesson ID for navigation |
-| AI-D5 | API | Clarify and implement exercise tagging intent | Agent service + tag/course APIs | AI-D1 | Semantic clarified in PRD; implement |
-| AI-E1 | Copy | Add i18n keys for AI assistant UI | `apps/dashboard/src/lib/utils/translations/en.json` | AI-C2 | No hardcoded strings |
-| AI-E2 | API | Add rate limiting for agent endpoints | Middleware or route-level | AI-B2 | Prevents abuse; configurable limit |
-| AI-E3 | Tests | Add auth/role tests for agent routes | API tests | AI-B3 | Unauthorized/student requests return 403 |
+### Phase 1: Foundation
 
-## API Contract (Target)
+| ID | Area | Task | Key Files | Dependencies |
+| --- | --- | --- | --- | --- |
+| AI-1.1 | Package | Create `packages/ai-assistant` with types (`AgentRole`, `AgentContext`, `CoursePlan`, `AIProviderConfig`) | `packages/ai-assistant/src/types.ts` | None |
+| AI-1.2 | Package | Implement provider factory (`createModel(config)`) with OpenAI + Anthropic | `packages/ai-assistant/src/providers/index.ts` | AI-1.1 |
+| AI-1.3 | Package | Implement tool registry (`getToolSchemas(role)`) with 9 v1 tool schemas | `packages/ai-assistant/src/tools/` | AI-1.1 |
+| AI-1.4 | Package | Implement system prompt builder with Plan/Agent mode instructions + no-hallucination boundary | `packages/ai-assistant/src/prompt/` | AI-1.1 |
+| AI-1.5 | DB | Add `ai_token_usage` and `ai_credit_balance` tables to schema + migration | `packages/db/src/schema.ts` | None |
+| AI-1.6 | API | Add agent route skeleton (`/agent/status`, `/agent/chat`, `/agent/upload`) with auth middleware + role detection | `apps/api/src/routes/agent/` | AI-1.1 |
+| AI-1.7 | API | Implement `POST /agent/upload` — plan gating (EARLY_ADOPTER+ required, 403 for BASIC), file size validation (max 5MB), PDF parsing (`pdf-parse`) + DOCX parsing (`mammoth`) + Redis storage | `apps/api/src/services/agent/document.ts` | AI-1.6 |
+| AI-1.8 | API | Add Redis key generators for agent documents | `apps/api/src/utils/redis/key-generators.ts` | None |
+| AI-1.9 | Dashboard | Add "AI Assistant" button to course sidebar nav (gated on `/agent/status`) | `course-sidebar-navigation.svelte` | AI-1.6 |
+| AI-1.10 | Dashboard | Build right sidebar Sheet with placeholder chat UI (message list + input + file upload button) | `apps/dashboard/src/lib/features/ai-assistant/` | AI-1.9 |
+| AI-1.11 | Dashboard | Implement file upload flow — plan gate (BASIC clicks attachment icon -> `openUpgradeModal()`), client-side 5MB size check, file picker -> upload -> chip display, handle 403 from server by triggering upgrade modal | `apps/dashboard/src/lib/features/ai-assistant/` | AI-1.7, AI-1.10 |
 
-### Agent Chat
+### Phase 2: Agent Core
 
-- `POST /course/:courseId/agent/chat`
-  - Body: `{ message: string, context?: { lessonId?, exerciseId? } }`
-  - Response: `{ success: true, data: { message: string, intent?: string, actions?: [...] } }`
-  - Auth: `authMiddleware`, `courseTeamMemberMiddleware`
+| ID | Area | Task | Key Files | Dependencies |
+| --- | --- | --- | --- | --- |
+| AI-2.1 | API | Wire `POST /agent/chat` to `streamText()` with provider factory + tool schemas + system prompt | `apps/api/src/routes/agent/chat.ts` | AI-1.2, AI-1.3, AI-1.4 |
+| AI-2.2 | API | Implement tool execute functions: `get_course_structure`, `get_lesson_content`, `get_exercise_details` (read tools) | `apps/api/src/routes/agent/chat.ts` | AI-2.1 |
+| AI-2.3 | API | Implement tool execute functions: `create_section`, `create_lesson`, `update_lesson_content` (write tools) | `apps/api/src/routes/agent/chat.ts` | AI-2.1 |
+| AI-2.4 | API | Implement tool execute functions: `create_exercise`, `add_questions` (exercise tools) | `apps/api/src/routes/agent/chat.ts` | AI-2.1 |
+| AI-2.5 | API | Implement `generate_course_plan` tool — structured `CoursePlan` JSON output | `apps/api/src/routes/agent/chat.ts` | AI-2.1 |
+| AI-2.6 | API | Inject uploaded document text from Redis into LLM context when `documentId` present | `apps/api/src/routes/agent/chat.ts` | AI-1.7, AI-2.1 |
+| AI-2.7 | API | Token usage tracking — record `promptTokens` + `completionTokens` after each `streamText()` call | `apps/api/src/services/agent/usage.ts` | AI-1.5, AI-2.1 |
+| AI-2.8 | API | Token balance check — enforce before each LLM call, return 402 when exhausted | `apps/api/src/services/agent/usage.ts` | AI-2.7 |
+| AI-2.9 | Dashboard | Connect chat UI to `/agent/chat` via `@ai-sdk/svelte` `Chat` class | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.1, AI-1.10 |
+| AI-2.10 | Dashboard | Render streamed tokens and tool status cards (spinner -> checkmark) | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.9 |
+| AI-2.11 | Dashboard | Build Plan View component — structured plan card with sections/lessons tree, "Implement Plan" and "Ask for Changes" buttons | `apps/dashboard/src/lib/features/ai-assistant/plan-view.svelte` | AI-2.5, AI-2.9 |
+| AI-2.12 | Dashboard | Build Agent Mode progress card — real-time checklist during plan execution | `apps/dashboard/src/lib/features/ai-assistant/progress-card.svelte` | AI-2.11 |
+| AI-2.13 | Dashboard | Implement `onFinish` store refresh — course content tree, lesson, exercise data | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.9 |
+| AI-2.14 | Dashboard | Add usage meter to AI assistant sidebar header | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.8 |
 
-### Optional Structured Execute
+### Phase 3: Polish + Safeguards + Credits
 
-- `POST /course/:courseId/agent/execute`
-  - Body: `{ intent: string, payload: Record<string, unknown> }`
-  - For tool-calling or explicit intent execution (e.g. from LLM tool use)
-  - Auth: same as above
+| ID | Area | Task | Key Files | Dependencies |
+| --- | --- | --- | --- | --- |
+| AI-3.1 | API | Tool-level permission re-validation (verify resource belongs to course/org in every tool execute) | `apps/api/src/routes/agent/chat.ts` | AI-2.2, AI-2.3, AI-2.4 |
+| AI-3.2 | API | Rate limiting — per-user, per-org requests/minute on agent endpoints | `apps/api/src/middlewares/` | AI-1.6 |
+| AI-3.3 | API | Self-host env var detection: hide assistant when no `AI_API_KEY`; uncap rate limits for self-hosted | `apps/api/src/routes/agent/status.ts` | AI-1.6 |
+| AI-3.4 | API | Conversation context windowing — trim long message histories, especially after document uploads | `apps/api/src/routes/agent/chat.ts` | AI-2.1 |
+| AI-3.5 | API | `POST /agent/credits` — credit purchase endpoint (orgAdmin only) | `apps/api/src/routes/agent/credits.ts` | AI-1.5 |
+| AI-3.6 | API | `GET /agent/usage` — detailed usage stats endpoint | `apps/api/src/routes/agent/usage.ts` | AI-2.7 |
+| AI-3.7 | Dashboard | Quick-action chips (context-dependent: document upload, draft lesson, generate questions, improve text) | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.9 |
+| AI-3.8 | Dashboard | Stop button during plan execution (graceful halt, keep created content) | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.12 |
+| AI-3.9 | Dashboard | Exhausted-state UI — disable chat input when tokens run out, show upgrade prompt | `apps/dashboard/src/lib/features/ai-assistant/` | AI-2.14 |
+| AI-3.10 | Dashboard | Credit purchase UI in org settings | `apps/dashboard/src/lib/features/org-settings/` | AI-3.5 |
 
-## Open Items Before Implementation
+## API Contract
 
-1. LLM provider choice (OpenAI vs Anthropic vs configurable).
-2. Streaming: v1 non-streaming vs SSE streaming.
-3. Exercise tagging semantics (org course tags vs exercise template tags).
-4. Draft lesson: create immediately vs return text for paste.
+### GET /agent/status
+
+```typescript
+// Response
+{
+  enabled: boolean,              // false when self-hosted + no AI_API_KEY
+  role: 'teacher' | 'student',
+  usage: {
+    used: number,
+    allowance: number,
+    creditBalance: number,
+    remaining: number
+  }
+}
+```
+
+### POST /agent/chat
+
+```typescript
+// Request
+{
+  courseId: string,
+  messages: UIMessage[],          // Vercel AI SDK format
+  context?: {
+    lessonId?: string,
+    exerciseId?: string,
+    documentId?: string
+  }
+}
+// Response: SSE stream (toUIMessageStreamResponse())
+```
+
+### POST /agent/upload
+
+```typescript
+// Request: multipart/form-data with 'file' field (PDF or DOCX, max 5MB)
+// Requires: EARLY_ADOPTER+ plan
+
+// Success Response (200)
+{
+  documentId: string,
+  fileName: string,
+  mimeType: string,
+  pageCount: number | null,
+  wordCount: number,
+  textPreview: string
+}
+
+// Error Responses
+// 403: { error: "document_upload_requires_upgrade", upgradeRequired: true }  — BASIC plan
+// 413: { error: "file_too_large", maxSize: 5242880 }                         — > 5MB
+// 415: { error: "unsupported_file_type", allowed: [...] }                    — not PDF/DOCX
+```
+
+### GET /agent/usage
+
+```typescript
+// Response
+{
+  used: number,
+  allowance: number,
+  creditBalance: number,
+  remaining: number,
+  history: Array<{ date: string, tokens: number }>
+}
+```
+
+### POST /agent/credits
+
+```typescript
+// Request
+{ amount: number }
+// Response
+{ creditBalance: number }
+```
diff --git a/prd/compliance-training-platform/README.md b/prd/compliance-training-platform/README.md
index b4f4275e..dd7c081b 100644
--- a/prd/compliance-training-platform/README.md
+++ b/prd/compliance-training-platform/README.md
@@ -1,979 +1,705 @@
-# Compliance Training Platform PRD
+# Compliance Course Type PRD
 
 ## Status
 - Draft
 
 ## Date
-- February 21, 2026
+- February 21, 2026 (updated April 11, 2026)
 
 ## Purpose
-Transform ClassroomIO into the go-to platform for companies that need to deliver, track, and prove compliance training for their employees. This PRD defines features for organizations in regulated industries (healthcare, finance, manufacturing, government) who must ensure their workforce stays compliant with regulations.
+Add a `COMPLIANCE` course type to ClassroomIO for courses that must be retaken after a given period. This targets organizations in regulated industries (healthcare, finance, manufacturing, government) that need recurring training with automated renewal, reminders, and compliance status tracking.
+
+> **Scope**: This PRD covers the `COMPLIANCE` course type only — retake intervals, completion validity, automatic re-enrollment, reminders, certificates, and dashboards. Programs already exist in the app and are out of scope. Policy attestation, audit trails, and HRIS integrations are separate efforts.
 
 ---
 
 ## 1. Executive Summary
 
 ### The Problem
-Companies in regulated industries struggle to:
-- **Assign** the right training to the right people based on their role/location
-- **Track** who completed training on time and who is overdue
-- **Remind** employees before deadlines and escalate to managers
-- **Prove** compliance to auditors with tamper-proof records
-- **Renew** certifications automatically when they expire
+Companies in regulated industries need courses that employees must retake periodically. Today, ClassroomIO courses are one-and-done — there's no way to say "this HIPAA course must be retaken every 12 months" and have the system enforce it.
 
 ### Target Customers
 | Industry | Example Use Cases |
 |----------|-------------------|
-| Healthcare | HIPAA training, patient safety, infection control, medical device handling |
-| Financial Services | Anti-money laundering, fraud prevention, data privacy, trading compliance |
-| Manufacturing | OSHA safety, quality control (ISO), hazardous materials handling |
-| Government | Security clearance, ethics training, procurement rules, FISMA |
-| Education | FERPA, Title IX, campus safety, student data handling |
-| Retail/Hospitality | Food safety, anti-harassment, PCI-DSS, workplace safety |
+| Healthcare | HIPAA training, patient safety, infection control |
+| Financial Services | Anti-money laundering, fraud prevention, data privacy |
+| Manufacturing | OSHA safety, quality control (ISO), hazardous materials |
+| Government | Security clearance, ethics training, procurement rules |
+| Education | FERPA, Title IX, campus safety |
+| Retail/Hospitality | Food safety, anti-harassment, PCI-DSS |
 
-### Solution Overview
-ClassroomIO becomes a **Compliance Training Management System** that helps organizations:
-1. **Deploy** compliance training programs efficiently
-2. **Automate** assignment, reminders, and renewals
-3. **Monitor** compliance status in real-time
-4. **Report** audit-ready evidence instantly
-5. **Scale** across thousands of employees and multiple locations
+### Solution
+A third course type — `COMPLIANCE` — that carries retake settings directly on the course. When a learner completes it, their completion is valid for N months. When it expires, they're automatically re-enrolled. The system sends reminders before deadlines and tracks compliance status per learner.
 
 ---
 
-## 2. Current State vs. Required Features
+## 2. Current State
 
-### ✅ What ClassroomIO Already Does Well
-| Feature | Current Capability | Compliance Gap |
-|---------|-------------------|----------------|
-| Course Creation | Rich content editor, videos, documents | ✅ Good enough |
-| Assessments | Basic exercises with grading | ⚠️ Need more question types & pass/fail rules |
-| Certificates | Generate PDF certificates | ⚠️ Need expiration, renewal, revocation |
-| User Management | Invite students, track progress | ⚠️ Need bulk assignment by role/department |
-| SSO | OIDC/SAML integration | ✅ Enterprise-ready |
-| Basic Reporting | Course completion stats | ❌ Need compliance-specific dashboards |
+### What Already Exists
+| Feature | Current State |
+|---------|--------------|
+| Course Types | `LIVE_CLASS` and `SELF_PACED` — no recurring/retake support |
+| Programs | Already implemented — can group courses together |
+| Assessments | Exercises with auto-grading for self-paced courses |
+| Certificates | PDF generation with themes, thresholds, and deadlines |
+| User Management | Invite students, track progress per course |
 
-### ❌ Critical Missing Features for Compliance Training
-
-| Missing Feature | Why It Matters | Customer Pain |
-|-----------------|----------------|---------------|
-| **Mandatory Training Assignment** | Compliance training isn't optional - everyone in a role MUST complete it | Currently can only invite, can't enforce |
-| **Recurring/Refresh Training** | Many regulations require annual/quarterly retraining | No automated renewal system |
-| **Compliance Dashboard** | See who is compliant, who is overdue, by department/role | No bird's-eye view for compliance officers |
-| **Policy Acknowledgment** | Track who read and agreed to policies | No policy attestation workflow |
-| **Audit Trail** | Prove "who did what when" to auditors | No immutable activity log |
-| **Automated Reminders** | Notify employees before deadlines, escalate to managers | Manual follow-up is unsustainable |
-| **Evidence Export** | One-click export of training records for auditors | Manual report generation takes hours |
+### What's Missing
+| Gap | Impact |
+|-----|--------|
+| No `COMPLIANCE` course type | Can't model courses that need periodic retaking |
+| No completion validity window | Completions are permanent — no expiry |
+| No automatic re-enrollment | Admins must manually re-invite learners |
+| No compliance status tracking | No way to see who is compliant vs overdue |
+| No retake reminders | Manual follow-up is unsustainable at scale |
 
 ---
 
 ## 3. Feature Requirements
 
-### 3.1 Compliance Training Programs (The Container)
+### 3.1 COMPLIANCE Course Type
 
 #### Purpose
-A "Program" groups related training requirements (e.g., "Annual HIPAA Compliance" or "New Hire Safety Training"). This is the top-level entity compliance officers manage.
+Add `COMPLIANCE` to the `COURSE_TYPE` enum. A compliance course behaves like a self-paced course for content delivery but carries retake settings that drive automatic re-enrollment and compliance tracking.
 
 #### Requirements
 
-**CP-1: Program Management**
-- Create programs with title, description, and regulatory framework (e.g., "HIPAA", "OSHA", "SOX")
-- Set program status: draft, active, archived
-- Assign program owner (compliance officer responsible)
-- Add custom fields for internal tracking (department codes, cost centers, etc.)
+**CCT-1: Course Type Enum Extension**
+- Add `COMPLIANCE` to the `COURSE_TYPE` PostgreSQL enum: `['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE']`
+- Compliance courses behave like self-paced courses for content delivery (lessons, exercises, grading) but carry additional retake/renewal configuration
+- All existing course features (content editor, assessments, certificates, invites) work unchanged
 
-**CP-2: Program Content**
-- Link multiple courses/lessons to a program (e.g., HIPAA includes: Basics course, Security course, Quiz)
-- Set completion rules: 
-  - "Complete all courses"
-  - "Complete any 2 of 3 courses" 
-  - "Complete Course A AND (Course B OR Course C)"
-- Set passing criteria: minimum score, attempt limits, time between retakes
+**CCT-2: Compliance Settings (per course)**
+When a course is created or updated with type `COMPLIANCE`, the following settings are available via a new `compliance` JSONB column:
 
-**CP-3: Program Assignment Rules**
-- Assign by: role, department, location, employment type, custom attributes
-- Examples:
-  - "All nurses in California hospitals"
-  - "All new hires in first 30 days"
-  - "All employees with security clearance Level 2+"
-- Support exclusions (e.g., "All managers EXCEPT contractors")
+| Setting | Type | Required | Default | Description |
+|---------|------|----------|---------|-------------|
+| `retakeIntervalMonths` | integer | Yes | — | Months after completion before the course must be retaken. Common: 3, 6, 12, 24 |
+| `gracePeriodDays` | integer | — | `0` | Additional days after the retake deadline before marking non-compliant |
+| `reminderDaysBefore` | integer[] | — | `[30, 7, 1]` | Days before retake deadline to send reminder notifications |
+| `isMandatory` | boolean | — | `true` | Whether the course is mandatory for all assigned learners |
+| `framework` | string | — | `null` | Regulatory framework tag: `HIPAA`, `OSHA`, `SOX`, `GDPR`, `PCI_DSS`, `FERPA`, `ISO`, `CUSTOM` |
+| `maxRetakeAttempts` | integer \| null | — | `null` | Max attempts per retake cycle. `null` = unlimited |
+| `passingScore` | integer | — | `80` | Minimum score (0–100) to count as a valid completion |
 
-**CP-4: Program Schedule**
-- One-time assignment (e.g., new hire training)
-- Recurring: every N months/years from completion date OR fixed date
-- Grace period: days after due date before marked overdue
-- Prerequisites: must complete Program X before starting Program Y
+**CCT-3: Completion Validity Window**
+- When a learner completes a compliance course (meets passing score), their completion is **valid for `retakeIntervalMonths` months**
+- `validUntil` = `completedAt` + `retakeIntervalMonths`
+- The system tracks this validity window per learner per course in the `course_completion_record` table
+- A valid completion satisfies compliance; an expired completion does not
 
-#### Database Schema
-```sql
--- Compliance training programs
-CREATE TABLE compliance_program (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  title VARCHAR NOT NULL,
-  description TEXT,
-  framework VARCHAR, -- 'HIPAA', 'OSHA', 'SOX', 'GDPR', 'Custom'
-  status VARCHAR DEFAULT 'draft', -- 'draft', 'active', 'archived'
-  owner_id UUID REFERENCES profile(id),
-  completion_rule JSONB NOT NULL DEFAULT '{"type": "all"}', -- { type: 'all' | 'any' | 'minimum', count: number }
-  passing_criteria JSONB NOT NULL DEFAULT '{"minScore": 80, "maxAttempts": 3}',
-  schedule_config JSONB NOT NULL DEFAULT '{}', -- { type: 'once' | 'recurring', intervalMonths: 12, graceDays: 7 }
-  custom_fields JSONB DEFAULT '{}',
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
+**CCT-4: Retake Lifecycle**
+A learner's relationship to a compliance course follows this cycle:
 
--- Program content (courses/exercises linked to program)
-CREATE TABLE compliance_program_content (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES compliance_program(id),
-  content_type VARCHAR NOT NULL, -- 'course', 'exercise', 'lesson'
-  content_id UUID NOT NULL,
-  is_required BOOLEAN DEFAULT true,
-  order_index INTEGER DEFAULT 0,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Assignment rules (who gets this program)
-CREATE TABLE compliance_program_assignment (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES compliance_program(id),
-  rule_type VARCHAR NOT NULL, -- 'role', 'group', 'location', 'attribute', 'all'
-  rule_value JSONB NOT NULL, -- { roleIds: [], groupIds: [], location: '', attributes: {} }
-  is_exclusion BOOLEAN DEFAULT false,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
 ```
+Enrolled → In Progress → Completed (Compliant)
+                              ↓
+                    [retakeIntervalMonths pass]
+                              ↓
+                      Expiring Soon  ← reminder notifications sent
+                              ↓
+                    [validity expires]
+                              ↓
+                      In Grace Period  ← if gracePeriodDays > 0
+                              ↓
+                    [grace period ends]
+                              ↓
+                      Non-Compliant  ← escalation triggers
+                              ↓
+                    [learner re-enrolled automatically]
+                              ↓
+                         In Progress → Completed (Compliant) → ...
+```
+
+**CCT-5: Compliance Status per Learner**
+Each learner enrolled in a compliance course has one of these statuses (tracked on `course_completion_record`):
+
+| Status | Condition |
+|--------|-----------|
+| `not_started` | Enrolled but hasn't begun |
+| `in_progress` | Started but not yet completed/passed |
+| `compliant` | Completed within validity window |
+| `expiring_soon` | Within the earliest reminder window (e.g., 30 days before expiry) |
+| `in_grace_period` | Past expiry date but within grace period |
+| `non_compliant` | Past expiry + grace period with no valid completion |
+| `waived` | Exempted by admin (with reason and optional expiration) |
+
+**CCT-6: Automatic Re-enrollment**
+- When a learner's completion validity expires, the system automatically creates a new completion record with status `not_started` and a new `dueDate`
+- Previous completions are preserved in history (never deleted)
+- The learner sees the course reappear in their "Due" list
+- A background job (`compliance-expiry-checker`) runs daily to process expirations
+
+**CCT-7: Auto-grading Behavior**
+- Like `SELF_PACED` courses, `COMPLIANCE` courses auto-grade submissions when all questions are auto-gradable
+- If the learner's score meets or exceeds `passingScore`, the completion is recorded as valid
+- If below `passingScore` and `maxRetakeAttempts` is not reached, the learner may retry
 
 ---
 
-### 3.2 Learner Assignments & Tracking
+### 3.2 Notifications & Reminders
 
 #### Purpose
-Track each learner's obligation, progress, and completion status for every program they're assigned.
+Automatically remind learners before their compliance course deadlines and notify admins about overdue learners.
 
 #### Requirements
 
-**LA-1: Assignment Lifecycle**
-- **Assigned**: User meets assignment rule criteria → creates assignment
-- **In Progress**: User started but not completed
-- **Completed**: User met all completion rules
-- **Overdue**: Past due date + grace period
-- **Waived**: Admin exempted user (with reason and expiration)
-- **Expired**: Previous completion past validity period → needs renewal
+**NR-1: Learner Reminders**
+- Send reminders at each interval defined in `reminderDaysBefore` (e.g., 30, 7, 1 days before due)
+- Email includes: course name, due date, current progress, direct link to course
+- In-app notification badge on the course card
 
-**LA-2: Assignment Attributes**
-- Assigned date, due date, completed date
-- Current status and status history with timestamps
-- Attempts count, best score, time spent
-- Certificate issued (if applicable)
-- Reminder history (when reminders were sent)
+**NR-2: Admin Alerts**
+- Notify course admins when learners become overdue (transition to `non_compliant`)
+- Daily digest option: summary of all overdue learners across compliance courses in the org
 
-**LA-3: Bulk Operations**
-- Bulk assign to users matching criteria
-- Bulk extend due dates (e.g., grant extension to entire department)
-- Bulk waive with reason
-- Bulk re-enroll (force retake even if completed)
+**NR-3: Completion Confirmation**
+- Email + in-app notification when a learner completes a compliance course
+- Include: course name, score, "compliant until" date, certificate download link (if applicable)
 
-**LA-4: Self-Service Portal (for Learners)**
-- "My Compliance" dashboard showing all assigned programs
-- Visual indicators: due soon (yellow), overdue (red), completed (green)
-- Download certificates for completed programs
-- See upcoming renewals
+**NR-4: Renewal Notification**
+- When a new retake cycle is created (automatic re-enrollment), notify the learner
+- Email includes: course name, new due date, link to start
 
-#### Database Schema
-```sql
--- Individual learner assignments
-CREATE TABLE compliance_assignment (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  program_id UUID NOT NULL REFERENCES compliance_program(id),
-  user_id UUID NOT NULL REFERENCES user(id),
-  
-  -- Assignment details
-  assigned_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  due_date TIMESTAMPTZ NOT NULL,
-  grace_period_days INTEGER DEFAULT 0,
-  
-  -- Status tracking
-  status VARCHAR NOT NULL DEFAULT 'assigned', -- 'assigned', 'in_progress', 'completed', 'overdue', 'waived', 'expired'
-  status_changed_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  status_history JSONB DEFAULT '[]', -- [{ status, timestamp, reason }]
-  
-  -- Progress
-  started_at TIMESTAMPTZ,
-  completed_at TIMESTAMPTZ,
-  progress_percent INTEGER DEFAULT 0,
-  
-  -- Results
-  attempts INTEGER DEFAULT 0,
-  best_score INTEGER,
-  passing_score INTEGER,
-  time_spent_minutes INTEGER,
-  
-  -- Certificate
-  certificate_id UUID,
-  
-  -- Waiver (if applicable)
-  waived_at TIMESTAMPTZ,
-  waived_by UUID REFERENCES profile(id),
-  waiver_reason TEXT,
-  waiver_expires_at TIMESTAMPTZ,
-  
-  -- For recurring programs
-  is_renewal BOOLEAN DEFAULT false,
-  previous_assignment_id UUID REFERENCES compliance_assignment(id),
-  
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  
-  UNIQUE(program_id, user_id, is_renewal) -- One active assignment per program per user
-);
-
--- Assignment content progress (track individual courses within program)
-CREATE TABLE compliance_assignment_progress (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  assignment_id UUID NOT NULL REFERENCES compliance_assignment(id),
-  content_type VARCHAR NOT NULL,
-  content_id UUID NOT NULL,
-  status VARCHAR NOT NULL DEFAULT 'not_started', -- 'not_started', 'in_progress', 'completed', 'failed'
-  started_at TIMESTAMPTZ,
-  completed_at TIMESTAMPTZ,
-  score INTEGER,
-  attempts INTEGER DEFAULT 0,
-  time_spent_minutes INTEGER,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-```
+> **Note**: The notification system PRD (`prd/notification-system`) covers the general delivery infrastructure (templates, channels, preferences). This section only defines the compliance-specific triggers.
 
 ---
 
-### 3.3 Automated Notifications & Escalations
+### 3.3 Certificate Lifecycle for Compliance Courses
 
 #### Purpose
-Ensure employees complete training on time without manual follow-up from compliance teams.
+Certificates issued for compliance courses should carry an expiration date matching the completion validity window, and be re-issued on each retake cycle.
 
 #### Requirements
 
-**NE-1: Reminder Schedule**
-- Configurable reminder schedule per program (e.g., 30, 14, 7, 1 days before due)
-- Customizable email templates per reminder stage
-- Include: program name, due date, progress, direct link to training
+**CL-1: Certificate Expiration**
+- When a compliance course has certificates enabled, the issued certificate includes an `expiresAt` date equal to the completion's `validUntil`
+- Certificate status follows the completion record: valid → expiring soon → expired
 
-**NE-2: Escalation Paths**
-- **Level 1**: Reminder to learner
-- **Level 2**: Notify learner + CC manager (when overdue)
-- **Level 3**: Escalate to compliance admin + learner's skip-level manager
-- **Level 4**: Flag for HR/executive review
+**CL-2: Certificate Re-issuance**
+- Each successful retake cycle issues a new certificate
+- Previous certificates are preserved in history with status `renewed`
+- Learner can view/download all historical certificates
 
-**NE-3: Manager Notifications**
-- Weekly digest of team's compliance status
-- Immediate alert when direct report goes overdue
-- Dashboard showing team compliance rate
+**CL-3: Certificate Display**
+- Certificate PDF shows: completion date, expiration date, cycle number, framework tag (if set)
+- Certificate list view in dashboard shows validity status badge (valid/expiring/expired)
 
-**NE-4: Compliance Team Alerts**
-- Daily summary of new overdue assignments
-- Alert when large group approaches deadline (e.g., "50 employees due in 3 days")
-- System health alerts (failed email deliveries, sync errors)
-
-**NE-5: Notification Preferences**
-- Email, in-app notification, or both
-- SMS for critical alerts (optional add-on)
-- Digest mode vs. immediate notifications
-
-#### Database Schema
-```sql
--- Notification templates
-CREATE TABLE compliance_notification_template (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  name VARCHAR NOT NULL,
-  trigger_type VARCHAR NOT NULL, -- 'reminder', 'overdue', 'escalation', 'completion'
-  trigger_days INTEGER, -- days before/after event (negative = before, positive = after)
-  subject_template VARCHAR NOT NULL,
-  body_template TEXT NOT NULL,
-  recipients VARCHAR[] NOT NULL, -- ['learner', 'manager', 'compliance_admin']
-  is_active BOOLEAN DEFAULT true,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Notification queue and history
-CREATE TABLE compliance_notification (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  assignment_id UUID NOT NULL REFERENCES compliance_assignment(id),
-  template_id UUID REFERENCES compliance_notification_template(id),
-  notification_type VARCHAR NOT NULL,
-  recipient_type VARCHAR NOT NULL, -- 'learner', 'manager', 'admin'
-  recipient_id UUID NOT NULL,
-  recipient_email VARCHAR NOT NULL,
-  scheduled_at TIMESTAMPTZ NOT NULL,
-  sent_at TIMESTAMPTZ,
-  status VARCHAR NOT NULL DEFAULT 'pending', -- 'pending', 'sent', 'delivered', 'failed', 'bounced'
-  error_message TEXT,
-  opened_at TIMESTAMPTZ,
-  clicked_at TIMESTAMPTZ,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Notification schedule (tracks what reminders are due)
-CREATE TABLE compliance_notification_schedule (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  assignment_id UUID NOT NULL REFERENCES compliance_assignment(id),
-  reminder_type VARCHAR NOT NULL, -- '30_days', '14_days', '7_days', '1_day', 'overdue', 'escalation'
-  scheduled_at TIMESTAMPTZ NOT NULL,
-  is_sent BOOLEAN DEFAULT false,
-  sent_at TIMESTAMPTZ,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-```
+> **Note**: This builds on the existing certificate system (`course.certificate` JSONB settings). No new certificate tables are needed — the `course_completion_record.cycle_number` links each certificate to its retake cycle.
 
 ---
 
-### 3.4 Policy Attestation (Read & Acknowledge)
+### 3.4 Compliance Dashboard
 
 #### Purpose
-Not all compliance is "training" - sometimes employees just need to read and acknowledge a policy. Track who has read and agreed to important documents.
+Give course admins visibility into who is compliant, who is expiring, and who is overdue — per compliance course.
 
 #### Requirements
 
-**PA-1: Policy Management**
-- Upload policy documents (PDF, Word, HTML)
-- Version control with version numbers and effective dates
-- Categorize (Security, HR, Safety, Code of Conduct, etc.)
-- Set required reading time (e.g., "Must view for at least 5 minutes")
+**CD-1: Course-Level Compliance Overview**
+Available on the course management page for any `COMPLIANCE` type course:
+- Summary stats: total enrolled, compliant, expiring soon, in grace period, non-compliant, waived
+- Compliance rate percentage (compliant / total)
+- Learner table with: name, status, due date, last completed date, score, cycle number
 
-**PA-2: Attestation Workflow**
-1. Employee receives notification of new/updated policy
-2. Employee opens and reads the document (viewer tracks time)
-3. Employee checks "I have read and understand this policy"
-4. Employee digitally "signs" with name, date, employee ID
-5. System records: user, policy version, timestamp, IP, time spent reading
+**CD-2: Status Filters & Sorting**
+- Filter learners by compliance status
+- Sort by: due date (soonest first), status severity, name
+- Search by learner name or email
 
-**PA-3: Attestation Tracking**
-- Who has attested to which version
-- Who hasn't attested (and how overdue)
-- Bulk attestation for initial rollout (with verification)
-- Re-attestation required when policy version changes
+**CD-3: Bulk Admin Actions**
+- Bulk waive selected learners (with reason and optional expiry)
+- Bulk extend due dates
+- Bulk force re-enrollment (reset cycle)
+- Export learner compliance data as CSV
 
-**PA-4: Attestation Certificate**
-- Generate proof of attestation per employee
-- Include: policy name, version, attestation date, digital signature hash
-
-#### Database Schema
-```sql
--- Policy documents
-CREATE TABLE compliance_policy (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  title VARCHAR NOT NULL,
-  description TEXT,
-  category VARCHAR NOT NULL, -- 'security', 'hr', 'safety', 'conduct', 'privacy'
-  status VARCHAR DEFAULT 'draft', -- 'draft', 'active', 'archived'
-  requires_reading_time_seconds INTEGER DEFAULT 0,
-  created_by UUID NOT NULL REFERENCES profile(id),
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Policy versions
-CREATE TABLE compliance_policy_version (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  policy_id UUID NOT NULL REFERENCES compliance_policy(id),
-  version_number INTEGER NOT NULL,
-  content_url TEXT NOT NULL, -- S3/MinIO URL
-  content_hash TEXT NOT NULL,
-  effective_date TIMESTAMPTZ NOT NULL,
-  requires_reattestation BOOLEAN DEFAULT true,
-  created_by UUID NOT NULL REFERENCES profile(id),
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  UNIQUE(policy_id, version_number)
-);
-
--- Who needs to attest to which policy version
-CREATE TABLE compliance_policy_assignment (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  policy_version_id UUID NOT NULL REFERENCES compliance_policy_version(id),
-  assigned_to_type VARCHAR NOT NULL, -- 'role', 'group', 'department', 'all'
-  assigned_to_id UUID,
-  due_date TIMESTAMPTZ,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Attestation records (immutable)
-CREATE TABLE compliance_policy_attestation (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  policy_version_id UUID NOT NULL REFERENCES compliance_policy_version(id),
-  user_id UUID NOT NULL REFERENCES user(id),
-  attested_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  ip_address INET,
-  user_agent TEXT,
-  time_spent_seconds INTEGER,
-  digital_signature VARCHAR NOT NULL, -- hash of user+policy+timestamp
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  UNIQUE(policy_version_id, user_id)
-);
-```
-
----
-
-### 3.5 Certificates with Lifecycle Management
-
-#### Purpose
-Issue certificates that expire, track renewals, and maintain a complete history for audit purposes.
-
-#### Requirements
-
-**CE-1: Certificate Templates**
-- Design certificate templates per program
-- Include: recipient name, program name, completion date, expiration date, certificate ID, QR code for verification
-- Custom fields (CE credits, accreditation body, instructor name)
-
-**CE-2: Certificate Issuance**
-- Auto-issue upon program completion
-- Manual issue by admin (for external training imported into system)
-- Bulk issue for historical data import
-
-**CE-3: Certificate Lifecycle**
-- **Valid**: Currently valid certificate
-- **Expiring Soon**: Within renewal window
-- **Expired**: Past expiration date
-- **Revoked**: Invalidated (with reason and revoked_by)
-- **Renewed**: Replaced by newer certificate (link to new cert)
-
-**CE-4: Certificate Verification**
-- Public verification page (for external auditors)
-- QR code on certificate links to verification
-- Shows: valid/invalid/revoked status, original issue details
-
-**CE-5: Certificate History**
-- Complete chain: Original → Renewal 1 → Renewal 2 → Current
-- Never delete - maintain full history even after revocation
-
-#### Database Schema
-```sql
--- Certificate definitions (linked to programs)
-CREATE TABLE compliance_certificate_definition (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  program_id UUID NOT NULL REFERENCES compliance_program(id),
-  name VARCHAR NOT NULL,
-  template_url TEXT NOT NULL, -- S3/MinIO URL to template file
-  validity_period_months INTEGER NOT NULL, -- 0 = no expiration
-  renewal_window_days INTEGER DEFAULT 30,
-  ce_credits DECIMAL(4,2), -- continuing education credits
-  accreditation_body VARCHAR,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
--- Issued certificates
-CREATE TABLE compliance_certificate (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  certificate_number VARCHAR UNIQUE NOT NULL, -- human-readable number
-  definition_id UUID NOT NULL REFERENCES compliance_certificate_definition(id),
-  user_id UUID NOT NULL REFERENCES user(id),
-  assignment_id UUID NOT NULL REFERENCES compliance_assignment(id),
-  
-  -- Certificate data
-  issued_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  issued_by UUID NOT NULL REFERENCES profile(id),
-  expires_at TIMESTAMPTZ,
-  
-  -- Certificate file
-  certificate_url TEXT NOT NULL,
-  certificate_hash TEXT NOT NULL,
-  
-  -- Lifecycle
-  status VARCHAR DEFAULT 'valid', -- 'valid', 'expiring_soon', 'expired', 'revoked', 'renewed'
-  revoked_at TIMESTAMPTZ,
-  revoked_by UUID REFERENCES profile(id),
-  revoke_reason TEXT,
-  
-  -- Renewal chain
-  is_renewal BOOLEAN DEFAULT false,
-  previous_certificate_id UUID REFERENCES compliance_certificate(id),
-  renewed_by_certificate_id UUID REFERENCES compliance_certificate(id),
-  
-  -- Verification
-  verification_token VARCHAR UNIQUE NOT NULL, -- for public verification URL
-  
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-```
-
----
-
-### 3.6 Compliance Dashboard & Reporting
-
-#### Purpose
-Give compliance officers and managers real-time visibility into organizational compliance posture.
-
-#### Requirements
-
-**CD-1: Organization Compliance Overview**
-- Overall compliance rate (% of required training completed on time)
-- Breakdown by: program, department, location, role
-- Risk indicators: overdue count, expiring soon count, non-compliant departments
-- Trend lines: compliance rate over time
-
-**CD-2: Program-Level Dashboard**
-- Assignment status pie chart (completed, in progress, overdue, not started)
-- Completion rate over time
-- Average time to complete
-- Pass/fail rates for assessments
-- Upcoming due dates calendar view
-
-**CD-3: Individual Learner View**
-- Complete training history
-- Current assignments and status
-- Certificates earned (with download links)
-- Policy attestations
-- Compliance "score" or rating
-
-**CD-4: Alerts & Warnings**
-- High-risk situations: "50 people overdue on HIPAA training"
-- Approaching deadlines: "200 certifications expire next month"
-- Completion milestones: "90% of organization completed annual training"
-
-**CD-5: Manager Dashboard**
-- My team's compliance rate
-- Direct reports' individual status
-- Overdue notifications sent
-- Team comparison to organization average
-
-**CD-6: Audit Reports**
-- One-click generation of compliance packages
-- Include: training records, certificates, policy attestations, audit log excerpt
-- Tamper-evident (checksums, signed manifest)
-- Date range selection
-- Filter by: program, department, individual
-
-#### API Endpoints
-```typescript
-// Organization compliance overview
-GET /compliance/dashboard/overview
-  Response: {
-    overallComplianceRate: number;
-    totalAssignments: number;
-    completedOnTime: number;
-    completedLate: number;
-    overdue: number;
-    inProgress: number;
-    notStarted: number;
-    expiringSoon30Days: number;
-    expiringSoon90Days: number;
-    byProgram: ProgramComplianceSummary[];
-    byDepartment: DepartmentComplianceSummary[];
-    trends: { date: string; rate: number }[];
-  }
-
-// Program detail dashboard
-GET /compliance/dashboard/programs/:programId
-  Response: {
-    program: ComplianceProgram;
-    stats: {
-      totalAssigned: number;
-      completed: number;
-      inProgress: number;
-      overdue: number;
-      averageCompletionTime: number;
-      passRate: number;
-    };
-    statusBreakdown: { status: string; count: number; percentage: number }[];
-    upcomingDueDates: { date: string; count: number }[];
-    recentCompletions: AssignmentSummary[];
-    atRiskLearners: AssignmentSummary[]; -- overdue or due soon
-  }
-
-// Generate audit report
-POST /compliance/reports/audit-package
-  Body: {
-    title: string;
-    dateRange: { start: string; end: string };
-    filters: {
-      programs?: string[];
-      departments?: string[];
-      users?: string[];
-    };
-    include: {
-      trainingRecords: boolean;
-      certificates: boolean;
-      policyAttestations: boolean;
-      auditLog: boolean;
-    };
-  }
-  Response: {
-    reportId: string;
-    status: 'generating' | 'ready' | 'failed';
-    downloadUrl?: string;
-    expiresAt?: string;
-    manifest: {
-      generatedAt: string;
-      generatedBy: string;
-      recordCounts: Record<string, number>;
-      checksums: Record<string, string>;
-    };
-  }
-
-// Learner compliance profile
-GET /compliance/learners/:userId/profile
-  Response: {
-    user: UserSummary;
-    currentAssignments: AssignmentDetails[];
-    completedPrograms: CompletedProgram[];
-    certificates: CertificateSummary[];
-    policyAttestations: AttestationSummary[];
-    complianceScore: number;
-    riskLevel: 'low' | 'medium' | 'high';
-  }
-```
-
----
-
-### 3.7 Audit Trail & Evidence
-
-#### Purpose
-Provide immutable, tamper-evident records of all compliance-related activities for auditor review.
-
-#### Requirements
-
-**AT-1: Comprehensive Event Logging**
-Log every compliance-relevant action:
-- Program created, modified, archived
-- Assignment created, completed, waived, expired
-- Certificate issued, revoked, renewed
-- Policy published, attested
-- Notification sent, opened, clicked
-- Report generated, downloaded
-- Admin actions (bulk operations, settings changes)
-
-**AT-2: Log Entry Content**
-- Timestamp (UTC, millisecond precision)
-- Actor (user ID, role, email)
-- Action type and description
-- Affected resources (program, assignment, user)
-- Before/after values for changes
-- IP address and user agent
-- Session ID
-
-**AT-3: Audit Log Characteristics**
-- Append-only (no modifications allowed)
-- Retained for 7+ years (configurable)
-- Exportable to CSV/JSON/PDF
-- Full-text searchable
-- Filterable by: date range, actor, action type, resource
-
-**AT-4: Evidence Integrity**
-- Cryptographic hash chain linking entries
-- Regular integrity verification reports
-- Tamper detection alerts
-
-#### Database Schema
-```sql
--- Audit event log (append-only)
-CREATE TABLE compliance_audit_event (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  organization_id UUID NOT NULL REFERENCES organization(id),
-  timestamp TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  
-  -- Actor
-  actor_id UUID REFERENCES user(id),
-  actor_email VARCHAR,
-  actor_role VARCHAR,
-  
-  -- Action
-  action_category VARCHAR NOT NULL, -- 'program', 'assignment', 'certificate', 'policy', 'report', 'admin'
-  action_type VARCHAR NOT NULL, -- 'created', 'updated', 'completed', 'revoked', etc.
-  action_description TEXT,
-  
-  -- Resources
-  resource_type VARCHAR, -- 'program', 'assignment', 'user', 'certificate'
-  resource_id UUID,
-  resource_name VARCHAR,
-  
-  -- Details
-  changes JSONB, -- { field: { from: x, to: y } }
-  metadata JSONB, -- additional context
-  
-  -- Context
-  ip_address INET,
-  user_agent TEXT,
-  session_id UUID,
-  
-  -- Integrity
-  previous_hash VARCHAR,
-  entry_hash VARCHAR NOT NULL, -- hash of this entry including previous_hash
-  
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-CREATE INDEX idx_audit_org_time ON compliance_audit_event(organization_id, timestamp DESC);
-CREATE INDEX idx_audit_action ON compliance_audit_event(action_category, action_type);
-CREATE INDEX idx_audit_resource ON compliance_audit_event(resource_type, resource_id);
-CREATE INDEX idx_audit_actor ON compliance_audit_event(actor_id);
-```
+**CD-4: Org-Level Compliance Summary**
+On the organization dashboard, show a summary card for compliance courses:
+- Count of compliance courses in the org
+- Overall compliance rate across all compliance courses
+- Number of overdue learners (link to drill down)
 
 ---
 
 ## 4. User Experience Flows
 
-### 4.1 Compliance Officer Journey
+### 4.1 Admin: Creating a Compliance Course
 
 ```
-1. Create Compliance Program
+1. Click "New Course" → Select type: "Compliance"
    ↓
-2. Add Content (courses, assessments)
+2. Fill in title, description (same as any course)
    ↓
-3. Set Assignment Rules (who needs to complete)
+3. Compliance settings panel appears:
+   - Retake interval: [12] months  (dropdown: 3, 6, 12, 18, 24, custom)
+   - Framework: [HIPAA] (optional dropdown)
+   - Passing score: [80]%
+   - Grace period: [14] days
+   - Reminders: [30, 7, 1] days before due
    ↓
-4. Configure Schedule & Reminders
+4. Add content: lessons, exercises, assessments (same as self-paced)
    ↓
-5. Launch Program → System auto-assigns to users
+5. Configure certificate (optional, same as today but will auto-expire)
    ↓
-6. Monitor Dashboard → See completion rates, overdue alerts
-   ↓
-7. Send Reminders / Escalate / Waive as needed
-   ↓
-8. Generate Audit Report → Export for auditor
+6. Publish course → Invite/enroll learners
 ```
 
-### 4.2 Employee (Learner) Journey
+### 4.2 Student: Taking a Compliance Course (First Time)
 
 ```
-1. Receive Email: "New Required Training: HIPAA Compliance"
+1. Receive invite / see course in dashboard
+   - Course card shows: compliance badge, framework tag, "Due by [date]"
    ↓
-2. Click Link → Login (if needed) → Go to "My Compliance" dashboard
+2. Open course → See banner: "Required: Complete by [date]"
    ↓
-3. See: List of assigned programs with due dates
+3. Work through lessons and exercises (same as self-paced)
    ↓
-4. Click Program → Start Training
+4. Complete final assessment
+   - Score >= passing score → "Compliant until [date]" confirmation
+   - Score < passing score → "You need [X]% to pass. [N] attempts remaining."
    ↓
-5. Complete Courses/Assessments
+5. Receive confirmation email + certificate (if enabled)
    ↓
-6. Receive Certificate + Confirmation Email
-   ↓
-7. Certificate stored in "My Certificates" for future reference
+6. Course card updates: green "Compliant" badge, "Valid until [date]"
 ```
 
-### 4.3 Manager Journey
+### 4.3 Student: The Renewal Cycle
 
 ```
-1. Weekly Email Digest: "Your Team's Compliance Status"
+1. [30 days before expiry] Receive reminder email:
+   "Your HIPAA Compliance certification expires on [date]. Retake the course to stay compliant."
+   - Course card turns yellow: "Expiring Soon"
    ↓
-2. Click to Manager Dashboard
+2. [7 days before] Second reminder
    ↓
-3. See: Team compliance rate, who's overdue, who's due soon
+3. [1 day before] Final reminder
    ↓
-4. Drill into individual → See their assignments
+4. [Expiry date] If not completed:
+   - Course card turns orange: "In Grace Period" (if grace period > 0)
+   - OR red: "Non-Compliant" (if no grace period)
    ↓
-5. Send reminder to specific team member
+5. Student clicks course → Sees their previous completion history:
+   "Cycle 1: Completed Jan 2025 (Score: 92%) — Expired"
+   "Cycle 2: Due by Jan 2026 — [Start Retake]"
    ↓
-6. Get notified when team member completes overdue training
+6. Completes retake → New certificate issued → Back to "Compliant"
 ```
 
-### 4.4 Auditor Journey
+### 4.4 Admin: Monitoring Compliance
 
 ```
-1. Compliance officer generates "Audit Package" 
+1. Open compliance course → "Compliance" tab in course management
    ↓
-2. Secure download link sent to auditor (time-limited)
+2. See dashboard: 85% compliant, 10% expiring soon, 5% overdue
    ↓
-3. OR: Auditor given time-limited read-only portal access
+3. Filter by "Non-Compliant" → See list of overdue learners
    ↓
-4. Auditor views/downloads:
-      - Training completion records
-      - Certificates with verification
-      - Policy attestations
-      - Activity audit log
+4. Select overdue learners → Actions:
+   - "Send Reminder" (manual nudge)
+   - "Extend Due Date" (grant extension)
+   - "Waive" (exempt with reason)
    ↓
-5. All auditor activity is itself logged
+5. Export compliance report as CSV for records
 ```
 
 ---
 
-## 5. Implementation Roadmap
+## 5. Database Schema
 
-### Phase 1: Core Assignment & Tracking (Weeks 1-6)
-**Goal**: Basic compliance program delivery
+### Enum Change
+```sql
+ALTER TYPE "COURSE_TYPE" ADD VALUE 'COMPLIANCE';
+```
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| Compliance program data model | 3 days | Database schema |
-| Program CRUD API | 4 days | Backend endpoints |
-| Assignment engine | 5 days | Auto-assignment logic |
-| Basic compliance dashboard | 5 days | Compliance overview UI |
-| "My Compliance" learner view | 4 days | Learner dashboard |
-| Assignment tracking | 4 days | Progress tracking UI |
-| **Milestone** | | Companies can assign and track compliance training |
+### New Column on `course` Table
+```sql
+ALTER TABLE course ADD COLUMN compliance JSONB DEFAULT NULL;
+-- Only populated when type = 'COMPLIANCE'. Example:
+-- {
+--   "retakeIntervalMonths": 12,
+--   "gracePeriodDays": 14,
+--   "reminderDaysBefore": [30, 14, 7, 1],
+--   "isMandatory": true,
+--   "framework": "HIPAA",
+--   "maxRetakeAttempts": null,
+--   "passingScore": 80
+-- }
+```
 
-### Phase 2: Notifications & Reminders (Weeks 7-10)
-**Goal**: Automated follow-up without manual work
+### New Table: `course_completion_record`
+```sql
+CREATE TABLE course_completion_record (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  course_id UUID NOT NULL REFERENCES course(id) ON DELETE CASCADE,
+  group_member_id UUID NOT NULL REFERENCES groupmember(id) ON DELETE CASCADE,
+  profile_id UUID NOT NULL REFERENCES profile(id),
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| Notification template system | 3 days | Template CRUD API/UI |
-| Reminder scheduling engine | 4 days | Background job processor |
-| Email delivery & tracking | 3 days | Sendgrid/SES integration |
-| Manager notifications | 3 days | Manager digest & alerts |
-| Escalation workflows | 4 days | Multi-level escalation |
-| **Milestone** | | Fully automated reminder system |
+  -- Cycle tracking
+  cycle_number INTEGER NOT NULL DEFAULT 1,  -- 1 = first time, 2 = first retake, etc.
+  status VARCHAR NOT NULL DEFAULT 'not_started',
+    -- 'not_started', 'in_progress', 'compliant', 'expiring_soon',
+    -- 'in_grace_period', 'non_compliant', 'waived'
 
-### Phase 3: Certificates & Renewals (Weeks 11-14)
-**Goal**: Complete certification lifecycle
+  -- Dates
+  due_date TIMESTAMPTZ NOT NULL,
+  started_at TIMESTAMPTZ,
+  completed_at TIMESTAMPTZ,
+  valid_until TIMESTAMPTZ,  -- completedAt + retakeIntervalMonths
+  expired_at TIMESTAMPTZ,   -- when status changed to non_compliant
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| Certificate templates | 3 days | Template designer |
-| Certificate generation | 3 days | PDF generation |
-| Certificate lifecycle mgmt | 4 days | Expire, revoke, renew |
-| Recurring assignment engine | 4 days | Auto-renewal logic |
-| Expiration dashboard | 3 days | Renewals view |
-| **Milestone** | | Automated renewal cycles |
+  -- Results
+  score INTEGER,             -- best score for this cycle
+  attempts INTEGER DEFAULT 0,
+  time_spent_minutes INTEGER DEFAULT 0,
 
-### Phase 4: Policy Attestation (Weeks 15-18)
-**Goal**: Policy acknowledgment tracking
+  -- Waiver
+  waived_by UUID REFERENCES profile(id),
+  waiver_reason TEXT,
+  waiver_expires_at TIMESTAMPTZ,
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| Policy document management | 3 days | Policy CRUD |
-| Document viewer with tracking | 4 days | Time-on-page tracking |
-| Attestation workflow | 3 days | Sign/acknowledge flow |
-| Attestation dashboard | 3 days | Who's attested view |
-| **Milestone** | | Policy attestation system |
+  -- Metadata
+  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
 
-### Phase 5: Reporting & Audit (Weeks 19-24)
-**Goal**: Audit-ready evidence and reporting
+  UNIQUE(course_id, profile_id, cycle_number)
+);
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| Audit event logging | 4 days | Event capture system |
-| Audit log viewer & export | 4 days | Log UI |
-| Advanced dashboards | 5 days | Drill-down reports |
-| Audit package generator | 5 days | One-click export |
-| Auditor portal (read-only) | 5 days | External auditor access |
-| **Milestone** | | Full audit readiness |
+CREATE INDEX idx_ccr_course ON course_completion_record(course_id);
+CREATE INDEX idx_ccr_profile ON course_completion_record(profile_id);
+CREATE INDEX idx_ccr_status ON course_completion_record(status);
+CREATE INDEX idx_ccr_due_date ON course_completion_record(due_date);
+CREATE INDEX idx_ccr_valid_until ON course_completion_record(valid_until);
+```
 
-### Phase 6: Integrations & Scale (Weeks 25-30)
-**Goal**: Enterprise integrations
+### Drizzle Schema (TypeScript)
 
-| Task | Duration | Deliverable |
-|------|----------|-------------|
-| HRIS integration (Workday, BambooHR) | 2 weeks | User sync |
-| SCIM provisioning | 1 week | Automated user lifecycle |
-| Advanced analytics | 1 week | Trend analysis, predictions |
-| API for external systems | 1 week | Public API endpoints |
-| **Milestone** | | Enterprise-ready platform |
+```typescript
+// In packages/db/src/schema.ts
+
+// Update enum
+export const courseType = pgEnum('COURSE_TYPE', ['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE']);
+
+// Add to course table definition
+compliance: jsonb().$type<{
+  retakeIntervalMonths: number;
+  gracePeriodDays?: number;
+  reminderDaysBefore?: number[];
+  isMandatory?: boolean;
+  framework?: 'HIPAA' | 'OSHA' | 'SOX' | 'GDPR' | 'PCI_DSS' | 'FERPA' | 'ISO' | 'CUSTOM' | null;
+  maxRetakeAttempts?: number | null;
+  passingScore?: number;
+}>(),
+
+// New table
+export const courseCompletionRecord = pgTable(
+  'course_completion_record',
+  {
+    id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
+    courseId: uuid('course_id').notNull(),
+    groupMemberId: uuid('group_member_id').notNull(),
+    profileId: uuid('profile_id').notNull(),
+    cycleNumber: integer('cycle_number').default(1).notNull(),
+    status: varchar().default('not_started').notNull(),
+    dueDate: timestamp('due_date', { withTimezone: true, mode: 'string' }).notNull(),
+    startedAt: timestamp('started_at', { withTimezone: true, mode: 'string' }),
+    completedAt: timestamp('completed_at', { withTimezone: true, mode: 'string' }),
+    validUntil: timestamp('valid_until', { withTimezone: true, mode: 'string' }),
+    expiredAt: timestamp('expired_at', { withTimezone: true, mode: 'string' }),
+    score: integer(),
+    attempts: integer().default(0),
+    timeSpentMinutes: integer('time_spent_minutes').default(0),
+    waivedBy: uuid('waived_by'),
+    waiverReason: text('waiver_reason'),
+    waiverExpiresAt: timestamp('waiver_expires_at', { withTimezone: true, mode: 'string' }),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+  },
+  (table) => [
+    foreignKey({ columns: [table.courseId], foreignColumns: [course.id], name: 'ccr_course_id_fkey' }),
+    foreignKey({ columns: [table.groupMemberId], foreignColumns: [groupmember.id], name: 'ccr_group_member_id_fkey' }),
+    foreignKey({ columns: [table.profileId], foreignColumns: [profile.id], name: 'ccr_profile_id_fkey' }),
+    unique('ccr_unique_cycle').on(table.courseId, table.profileId, table.cycleNumber),
+    index('idx_ccr_course').on(table.courseId),
+    index('idx_ccr_profile').on(table.profileId),
+    index('idx_ccr_status').on(table.status),
+    index('idx_ccr_due_date').on(table.dueDate),
+    index('idx_ccr_valid_until').on(table.validUntil),
+  ]
+);
+```
+
+### Validation Schema (Zod)
+
+```typescript
+// In packages/utils/src/validation/course/course.ts
+
+export const ZComplianceSettings = z.object({
+  retakeIntervalMonths: z.number().int().min(1).max(120),
+  gracePeriodDays: z.number().int().min(0).max(365).optional().default(0),
+  reminderDaysBefore: z.array(z.number().int().min(1).max(365)).max(10).optional().default([30, 7, 1]),
+  isMandatory: z.boolean().optional().default(true),
+  framework: z.enum(['HIPAA', 'OSHA', 'SOX', 'GDPR', 'PCI_DSS', 'FERPA', 'ISO', 'CUSTOM']).nullable().optional(),
+  maxRetakeAttempts: z.number().int().min(1).nullable().optional(),
+  passingScore: z.number().int().min(0).max(100).optional().default(80),
+});
+
+// Update ZCourseCreate
+export const ZCourseCreate = z.object({
+  title: z.string().min(1),
+  description: z.string().min(1),
+  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE']),
+  organizationId: z.string().min(1),
+  compliance: ZComplianceSettings.optional(),
+}).refine(
+  (data) => data.type !== 'COMPLIANCE' || data.compliance !== undefined,
+  { message: 'Compliance settings are required for COMPLIANCE courses', path: ['compliance'] }
+);
+
+// Update ZCourseUpdate
+export const ZCourseUpdate = z.object({
+  // ... existing fields ...
+  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE']).optional(),
+  compliance: ZComplianceSettings.optional(),
+});
+```
 
 ---
 
-## 6. Technical Architecture
+## 6. API Endpoints
 
-### New API Routes
+### Course Endpoints (extended)
 ```
-/compliance/programs              # CRUD for compliance programs
-/compliance/assignments           # Assignment management
-/compliance/assignments/:id/progress  # Track learner progress
-/compliance/certificates          # Certificate lifecycle
-/compliance/policies              # Policy document management
-/compliance/attestations          # Policy acknowledgment
-/compliance/dashboard             # Dashboard data
-/compliance/reports               # Report generation
-/compliance/audit-events          # Audit log access
-/compliance/notifications         # Notification management
-/compliance/settings              # Organization compliance settings
+POST   /courses                          # Now accepts type: 'COMPLIANCE' + compliance settings
+PATCH  /courses/:courseId                 # Can update compliance settings
 ```
 
-### Background Jobs
+### Compliance-Specific Endpoints
 ```
-assignment-processor      # Create assignments based on rules
-reminder-scheduler        # Queue upcoming reminders
-notification-sender       # Send emails/SMS
-expiration-checker        # Mark expired certifications
-renewal-processor         # Create renewal assignments
-report-generator          # Generate large audit reports
-audit-archiver            # Archive old audit logs
+GET    /courses/:courseId/compliance
+  → Compliance overview: stats + learner list with statuses
+
+GET    /courses/:courseId/compliance/learners/:profileId
+  → Learner compliance history: current cycle + all previous cycles
+
+POST   /courses/:courseId/compliance/waive
+  Body: { profileId, reason, expiresAt? }
+  → Waive a learner from the current cycle
+
+POST   /courses/:courseId/compliance/reset
+  Body: { profileId, newDueDate }
+  → Force re-enrollment (create new cycle)
+
+POST   /courses/:courseId/compliance/extend
+  Body: { profileIds[], newDueDate }
+  → Bulk extend due dates
+
+GET    /courses/:courseId/compliance/export
+  → CSV export of all learner compliance records
 ```
 
-### Frontend Features
+---
+
+## 7. Background Job Infrastructure
+
+### Current State
+There is no cron or job queue system in ClassroomIO today. Redis exists but is only used for rate limiting and caching. The compliance course type requires two daily jobs — this is the first scheduled work in the platform.
+
+### Architecture: Internal API Routes + Cron Runner
+
+The compliance logic lives inside the existing API (where it has DB access, services, and context). A separate lightweight Bun cron runner triggers it on a schedule by calling internal endpoints.
+
 ```
-apps/dashboard/src/lib/features/compliance/
-  pages/
-    programs-list.svelte
-    program-editor.svelte
-    assignments.svelte
-    dashboard.svelte
-    reports.svelte
-    audit-log.svelte
-    settings.svelte
+┌─────────────────┐       POST /internal/compliance/*       ┌──────────────┐
+│   Cron Runner   │  ──────────────────────────────────►    │   API        │
+│   (apps/cron)   │       x-api-key: PRIVATE_SERVER_KEY     │   (apps/api) │
+│   Bun + croner  │                                         │   Hono       │
+└─────────────────┘                                         └──────┬───────┘
+                                                                   │
+                                                            ┌──────▼───────┐
+                                                            │  PostgreSQL  │
+                                                            └──────────────┘
+```
+
+### Internal API Routes
+
+Two new routes under `/internal/`, protected by the existing `PRIVATE_SERVER_KEY` middleware (`apps/api/src/middlewares/api-key.ts`):
+
+```
+POST /internal/compliance/check-expiry
+  → Checks valid_until dates across all compliance courses
+  → Transitions statuses: compliant → expiring_soon → in_grace_period → non_compliant
+  → Creates new cycle records (automatic re-enrollment) when expired
+  → Returns: { processed: number, transitioned: number, reEnrolled: number }
+
+POST /internal/compliance/send-reminders
+  → Finds compliance courses with upcoming due dates
+  → Sends reminders based on each course's reminderDaysBefore settings
+  → Sends admin notifications for newly overdue learners
+  → Returns: { remindersSent: number, adminAlertsSent: number }
+```
+
+### Cron Runner (`apps/cron/`)
+
+Minimal Bun project. Its only job is to call the internal API endpoints on a schedule.
+
+```typescript
+// apps/cron/index.ts
+import { Cron } from 'croner';
+
+const API_URL = process.env.API_URL;
+const SERVER_KEY = process.env.PRIVATE_SERVER_KEY;
+
+const headers = { 'x-api-key': SERVER_KEY, 'content-type': 'application/json' };
+
+// Daily at 2:00 AM UTC — check expirations and transition statuses
+new Cron('0 2 * * *', async () => {
+  const res = await fetch(`${API_URL}/internal/compliance/check-expiry`, { method: 'POST', headers });
+  console.log('check-expiry:', await res.json());
+});
+
+// Daily at 2:30 AM UTC — send reminders (runs after expiry check so statuses are up to date)
+new Cron('30 2 * * *', async () => {
+  const res = await fetch(`${API_URL}/internal/compliance/send-reminders`, { method: 'POST', headers });
+  console.log('send-reminders:', await res.json());
+});
+
+console.log('Cron runner started');
+```
+
+**Dependencies**: Just `croner` (lightweight, zero-dep cron library for Bun/Node).
+
+### Security
+
+| Concern | How it's handled |
+|---------|-----------------|
+| **Authentication** | `PRIVATE_SERVER_KEY` — the existing server-to-server key, validated by the `api-key` middleware. No new auth mechanism needed |
+| **Route exposure** | `/internal/*` prefix is never registered in public-facing route groups. Middleware rejects requests without a valid key |
+| **Network isolation** | On Railway, the cron runner and API are separate services in the same project — internal communication stays within Railway's private network |
+| **Idempotency** | Both jobs are safe to run multiple times. `check-expiry` only transitions records that match date conditions. `send-reminders` tracks sent reminders to avoid duplicates |
+
+### Deployment
+
+**Railway** (production): The cron runner is a separate Railway service in the same project as the API. It needs two env vars:
+- `API_URL` — internal URL of the API service (Railway provides this via service references)
+- `PRIVATE_SERVER_KEY` — same value as the API's key
+
+**Self-hosted**: Not included in docker-compose. A `README.md` in `apps/cron/` explains the three options:
+
+1. **Run the cron runner directly** — `bun run apps/cron/index.ts` as a separate long-running process
+2. **Use system cron** — add two crontab entries that `curl` the internal endpoints:
+   ```
+   0 2 * * * curl -X POST -H "x-api-key: $PRIVATE_SERVER_KEY" http://localhost:3002/internal/compliance/check-expiry
+   30 2 * * * curl -X POST -H "x-api-key: $PRIVATE_SERVER_KEY" http://localhost:3002/internal/compliance/send-reminders
+   ```
+3. **Manual** — call the endpoints on demand, skip automation entirely
+
+### Adding Future Jobs
+
+When new scheduled work is needed beyond compliance, add a new `/internal/*` route in the API and a new `Cron(...)` call in the runner. The pattern scales without architectural changes.
+
+---
+
+## 8. Technical Architecture
+
+### Frontend Changes
+
+```
+apps/dashboard/src/lib/features/course/
   components/
-    program-card.svelte
-    assignment-status-badge.svelte
-    compliance-chart.svelte
-    notification-template-editor.svelte
-    certificate-viewer.svelte
-    policy-uploader.svelte
-    attestation-flow.svelte
-  api/
-    compliance.svelte.ts
-  utils/
-    types.ts
-    constants.ts
+    new-course-modal.svelte             # Updated: COMPLIANCE option alongside LIVE_CLASS/SELF_PACED
+    compliance-settings-form.svelte     # New: retake interval, framework, grace period, passing score
+    compliance-status-badge.svelte      # New: compliant/expiring/non-compliant badges
+    compliance-learner-table.svelte     # New: learner list with compliance statuses + bulk actions
+  pages/
+    settings.svelte                     # Updated: compliance settings section when type=COMPLIANCE
+    compliance.svelte                   # New: compliance tab in course management
+
+apps/course-app/  (learner-facing)
+  # Updated: show compliance status badge, due date, retake history on course page
+  # Updated: course card shows "Due by" and color-coded status
 ```
 
----
+### Files That Need Code Changes
 
-## 7. Success Metrics
-
-### Product Metrics
-| Metric | Target | Measurement |
-|--------|--------|-------------|
-| Time to create compliance program | < 30 minutes | User testing |
-| Time to assign training to 1000 people | < 5 minutes | Performance test |
-| Training completion rate | > 90% | Dashboard tracking |
-| Automated reminder open rate | > 60% | Email analytics |
-| Time to generate audit report | < 2 minutes | Performance test |
-
-### Business Metrics
-| Metric | Target |
-|--------|--------|
-| Compliance-focused customer acquisition | 10 new customers in 6 months |
-| Compliance feature NPS | > 50 |
-| Customer retention (compliance segment) | > 95% |
-| Expansion revenue from compliance add-on | 20% of ARR |
+| File | Change |
+|------|--------|
+| `packages/db/src/schema.ts` | Add `COMPLIANCE` to enum, `compliance` column to course, new `courseCompletionRecord` table |
+| `packages/utils/src/validation/course/course.ts` | Add `ZComplianceSettings`, update `ZCourseCreate`/`ZCourseUpdate` with `COMPLIANCE` and `.refine()` |
+| `packages/utils/src/validation/course-import/course-import.ts` | Add `COMPLIANCE` to `ZCourseImportDraftCourse.type` |
+| `apps/api/src/services/course/course.ts` | Handle `compliance` field in create/update |
+| `apps/api/src/services/submission/submission.ts` | Record valid completion on `course_completion_record` when score >= passingScore |
+| `apps/api/src/routes/v1/courses.ts` | Add `/courses/:courseId/compliance/*` endpoints |
+| `apps/api/src/routes/internal/compliance.ts` | New: `/internal/compliance/check-expiry` and `send-reminders` routes |
+| `apps/cron/index.ts` | New: Bun cron runner that calls internal endpoints on a schedule |
+| `apps/dashboard/.../new-course-modal.svelte` | Add COMPLIANCE option to course type selector |
+| `apps/dashboard/.../settings.svelte` | Show compliance settings panel for COMPLIANCE courses |
 
 ---
 
-## 8. Competitive Differentiation
+## 9. Implementation Roadmap
 
-| Feature | ClassroomIO | Competitors (LMS) | Compliance Tools |
-|---------|-------------|-------------------|------------------|
-| Course creation quality | ✅ Strong | ✅ Strong | ❌ Weak |
-| Compliance-specific features | 🆕 Building | ⚠️ Limited | ✅ Strong |
-| Price | 💰 Affordable | 💰💰 Expensive | 💰💰💰 Very expensive |
-| Open Source | ✅ Yes | ❌ No | ❌ No |
-| Self-hosted option | ✅ Yes | ⚠️ Limited | ❌ Rare |
-| Ease of use | ✅ Simple | ⚠️ Complex | ❌ Complex |
+### Phase 1: Schema & API (Week 1-2)
 
-**Positioning**: "The compliance training platform that doesn't suck - powerful enough for enterprise compliance, simple enough for anyone to use."
+| Task | Duration | Deliverable |
+|------|----------|-------------|
+| Extend `COURSE_TYPE` enum + migration | 1 day | `COMPLIANCE` in Postgres enum and Drizzle schema |
+| Add `compliance` JSONB column to course | 1 day | Migration + schema update |
+| `course_completion_record` table + Drizzle model | 2 days | New table with indexes |
+| `ZComplianceSettings` Zod validation | 1 day | Validation for create/update |
+| Update course create/update API | 2 days | Accept compliance settings |
+| Compliance-specific API endpoints | 2 days | Overview, waive, reset, extend, export |
+
+### Phase 2: Completion Tracking & Background Jobs (Week 2-3)
+
+| Task | Duration | Deliverable |
+|------|----------|-------------|
+| Record compliance completion on submission | 2 days | Submission service integration |
+| `/internal/compliance/*` routes + `PRIVATE_SERVER_KEY` guard | 1 day | Internal API endpoints |
+| `check-expiry` service logic | 2 days | Daily status transitions + auto re-enrollment |
+| `send-reminders` service logic | 1 day | Reminder emails based on `reminderDaysBefore` |
+| `apps/cron` Bun project + `croner` setup | 1 day | Cron runner calling internal endpoints |
+| Deploy cron runner as Railway service | 0.5 day | Running in production |
+| Admin overdue notifications | 1 day | Notify admins of newly non-compliant learners |
+
+### Phase 3: Dashboard & Admin UI (Week 3-4)
+
+| Task | Duration | Deliverable |
+|------|----------|-------------|
+| COMPLIANCE option in course creation modal | 1 day | Course type selector update |
+| Compliance settings form component | 2 days | Retake interval, framework, grace period UI |
+| Compliance settings in course settings page | 1 day | Edit compliance config after creation |
+| Compliance tab in course management | 3 days | Learner table with statuses, bulk actions |
+| Org-level compliance summary card | 1 day | Dashboard overview widget |
+
+### Phase 4: Student Experience (Week 4-5)
+
+| Task | Duration | Deliverable |
+|------|----------|-------------|
+| Compliance badge + due date on course card | 1 day | Learner dashboard update |
+| "Required: Complete by" banner on course page | 1 day | Course page update |
+| Retake history view | 2 days | "Cycle 1: Completed... Cycle 2: Due..." |
+| "Compliant until" confirmation on completion | 1 day | Post-completion UI |
+| Certificate with expiration date | 1 day | Certificate PDF update |
+
+**Milestone**: Organizations can create compliance courses with retake periods. Learners see due dates, get reminders, and are automatically re-enrolled when completions expire. Admins can monitor compliance status and take bulk actions.
 
 ---
 
-## 9. Open Questions
+## 10. Success Metrics
 
-1. Should we offer pre-built compliance program templates (e.g., "HIPAA Basics")?
-2. Do we need integration with third-party course libraries (Skillsoft, LinkedIn Learning)?
-3. Should we support instructor-led training tracking (ILT) or self-paced only?
-4. How important is mobile app support for field workers?
-5. Do we need e-signature integration (DocuSign) for high-stakes certifications?
-6. Should we build a marketplace for compliance content creators?
+| Metric | Target | How to Measure |
+|--------|--------|----------------|
+| Time to create a compliance course | < 5 min | User testing |
+| Compliance course completion rate | > 90% | `course_completion_record` data |
+| Reminder email → completion conversion | > 50% | Track completions within 7 days of reminder |
+| Overdue rate (non-compliant after grace period) | < 10% | `course_completion_record` status counts |
+| Admin time spent on manual follow-up | Reduced by 80% | Customer interviews |
 
 ---
 
-## 10. Next Steps
+## 11. Open Questions
 
-1. **Validate** this PRD with 3-5 compliance officers at target companies
-2. **Prioritize** Phase 1 features for immediate development
-3. **Design** the compliance dashboard UI mockups
-4. **Prototype** the program creation wizard
-5. **Plan** data migration strategy for existing ClassroomIO courses
+1. Should converting an existing `SELF_PACED` course to `COMPLIANCE` retroactively create completion records for current enrollees?
+2. When a waiver expires, should the learner automatically get a new cycle, or return to their previous status?
+3. Should compliance courses support a "pre-assessment" that lets learners who already know the material skip directly to the final assessment?
+4. Do we need org-level defaults for compliance settings (e.g., "all compliance courses in this org default to 12-month retake")?
diff --git a/prd/org-landing-page-theme-picker/README.md b/prd/org-landing-page-theme-picker/README.md
new file mode 100644
index 00000000..10d94a29
--- /dev/null
+++ b/prd/org-landing-page-theme-picker/README.md
@@ -0,0 +1,191 @@
+# Org Landing Page Theme Picker + Unified Content Editor
+
+## Context
+The org has 3 landing page theme templates (Minimal, Bold, Classic) in `packages/ui/` that all accept `OrgLandingPageProps` uniformly. However:
+1. The templates are **only used in Storybook** — the actual public landing page (`landing-page.svelte`) renders its own custom legacy HTML
+2. The stored `OrgLandingPageJson` is a complex format (header, aboutUs, faq, contact, mailinglist, etc.) that **doesn't align** with what the templates need
+3. There is no theme selection UI
+4. There is no edit flow like the course landing page (split-screen with live preview)
+
+This plan: simplifies the stored format to match `OrgLandingPageProps`, replaces the legacy public landing page renderer with the theme components, adds a theme picker in settings, and adds a split-screen content editor modeled after the course landing page editor.
+
+---
+
+## Simplified Data Model
+
+Replace `OrgLandingPageJson` (the DB-stored type) with a structure that maps 1:1 to `OrgLandingPageProps`:
+
+```ts
+// apps/dashboard/src/lib/utils/types/org.ts
+export interface OrgLandingPageJson {
+  theme: 'minimal' | 'bold' | 'classic';
+  hero: {
+    heading: string;
+    subheading: string;
+    primaryAction: { label: string; href: string };
+    secondaryAction?: { label: string; href: string };
+    image?: string;
+  };
+  navItems: Array<{ label: string; href: string }>;
+  footerLinks: Array<{ label: string; href: string }>;
+  footerText: string;
+}
+```
+
+Sections removed from old format: `header` (with banner/background/show toggles), `aboutUs`, `courses`, `faq`, `contact`, `mailinglist`, `customLinks`, `footer` (social links only).
+
+Fields from org data (not stored in `landingpage`): `orgName` → `org.name`, `logoUrl` → `org.avatarUrl`, `courses` → `orgApi.publicCourses`.
+
+---
+
+## Changes
+
+### 1. Update `OrgLandingPageJson` type
+**File:** `apps/dashboard/src/lib/utils/types/org.ts`
+
+Replace the full type with the simplified version above.
+
+### 2. Update settings store with new defaults
+**File:** `apps/dashboard/src/lib/features/settings/utils/store.ts`
+
+Replace `landingPageSettings` writable defaults with the new schema:
+```ts
+{
+  theme: 'minimal',
+  hero: {
+    heading: 'Master the Skills of Tomorrow',
+    subheading: 'Join thousands of learners and accelerate your career.',
+    primaryAction: { label: 'Explore Courses', href: '#courses' },
+    secondaryAction: { label: 'Learn More', href: '#about' },
+    image: ''
+  },
+  navItems: [
+    { label: 'Courses', href: '#courses' },
+    { label: 'About', href: '#about' }
+  ],
+  footerLinks: [
+    { label: 'Terms', href: '#terms' },
+    { label: 'Privacy', href: '#privacy' }
+  ],
+  footerText: '© 2026 All rights reserved.'
+}
+```
+
+Also update (or delete and inline) the old store at:
+`apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts`
+(currently used by the legacy landing-page.svelte — this store will go away when we replace the renderer).
+
+### 3. Redesign `landingpage.svelte` settings page — theme picker only
+**File:** `apps/dashboard/src/lib/features/settings/pages/landingpage.svelte`
+
+Remove all existing form fields. The page now shows only:
+- **Theme picker** (`Field.Set` "Choose a Theme"): 3 cards in `grid grid-cols-3 gap-4` using `RadioGroup.Root bind:value={$landingPageSettings.theme}`. Each card:
+  - Inline SVG thumbnail (distinct per theme — see SVG specs below)
+  - Theme name label
+  - Radio selection state: `border-primary ring-2 ring-primary/20` vs `border-border`
+  - `onValueChange={() => (hasUnsavedChanges = true)}`
+- **Save button** already in the route page header — saves only `theme` (plus full JSON as fallback)
+- **"Edit Content"** button below the theme picker (`Button variant="outline"`) → navigates to `/org/[slug]/settings/landingpage/edit`
+- `UnsavedChanges` component stays
+
+SVG thumbnail specs:
+- **Minimal**: white bg, light gray nav bar top, 2 text lines (heading/subheading), 2 course card outlines in a 2-col grid, thin footer line
+- **Bold**: dark `#111` bg top-half, large bold heading text block, course cards with image-left layout, dark inverted footer
+- **Classic**: dark navy `#1e3a5f` header bar, white body, centered heading, 3-col course card grid, minimal footer
+
+Subscriber fallback for old data (users who previously saved the old format):
+```ts
+if (!landingpage.theme || !landingpage.hero) {
+  // Set minimal defaults — discard old incompatible structure
+  $landingPageSettings = { ...defaultLandingPageSettings };
+} else {
+  $landingPageSettings = landingpage;
+}
+```
+
+### 4. New split-screen content editor route
+**File (new):** `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte`
+
+Modeled after `apps/dashboard/src/routes/courses/[id]/landingpage/+page.svelte`.
+
+Layout:
+```svelte
+<!-- Fixed full-screen overlay, fly transition -->
+<div class="fixed inset-0 z-250 h-screen w-screen">
+  <Sidebar.Provider>
+    <Sidebar.Root side="left" collapsible="icon">
+      <OrgLandingPageEditor bind:settings={landingPageSettings} {org} onSave={handleSave} onClose={handleClose} />
+    </Sidebar.Root>
+    <Sidebar.Inset class="relative h-screen overflow-y-auto">
+      <!-- Live theme preview -->
+      {#if $landingPageSettings.theme === 'bold'}
+        <BoldLandingPage {...previewProps} />
+      {:else if $landingPageSettings.theme === 'classic'}
+        <ClassicLandingPage {...previewProps} />
+      {:else}
+        <MinimalLandingPage {...previewProps} />
+      {/if}
+    </Sidebar.Inset>
+  </Sidebar.Provider>
+</div>
+```
+
+`previewProps` is derived from `$landingPageSettings` + `$currentOrg` + `orgApi.publicCourses` (mapped to `OrgLandingPageProps`).
+
+`handleClose()` → `goto('/org/[slug]/settings/landingpage')`.
+
+### 5. New editor sidebar component
+**File (new):** `apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte`
+
+Mirrors the section-based structure of the course landing page `editor.svelte`.
+
+Sections (left sidebar menu → click to edit):
+1. **Hero** — heading, subheading, primaryAction (label + href), secondaryAction (optional label + href toggle), image (upload widget, used by Bold/Classic)
+2. **Navigation** — list of nav items (label + href), add/remove rows
+3. **Footer** — footer text, list of footer links (label + href), add/remove rows
+
+Header: "Save" button + close button (back to settings).
+
+Section form pattern: inline `Input` / `Textarea` / `UploadWidget` fields, two-way bound to `settings` prop, changes reflect live in the preview panel.
+
+### 6. Replace legacy public landing page renderer
+**File:** `apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte`
+
+Replace the full custom HTML renderer with:
+- Import `MinimalLandingPage`, `BoldLandingPage`, `ClassicLandingPage` from `@cio/ui/custom/org-landing-page`
+- Load `org.landingpage` into local state with defaults fallback
+- Build `previewProps: OrgLandingPageProps` = `{ orgName: org.name, logoUrl: org.avatarUrl, ...landingpage, courses: orgApi.publicCourses }`
+- Render the correct theme component based on `landingpage.theme`
+- Remove all legacy section rendering (aboutUs, faq, contact, mailinglist, etc.)
+- Keep `orgApi.getPublicCoursesBySiteName(orgSiteName)` call for course loading
+- Keep `<svelte:head>` and `<PoweredBy />`
+
+---
+
+## Critical Files
+
+| File | Change |
+|------|--------|
+| `apps/dashboard/src/lib/utils/types/org.ts` | Replace `OrgLandingPageJson` type |
+| `apps/dashboard/src/lib/features/settings/utils/store.ts` | New defaults matching new type |
+| `apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts` | Delete or update (old format no longer needed) |
+| `apps/dashboard/src/lib/features/settings/pages/landingpage.svelte` | Theme picker + Edit Content button only |
+| `apps/dashboard/src/routes/org/[slug]/settings/landingpage/+page.svelte` | Minor adjustments if needed |
+| `apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte` | Replace renderer with theme components |
+| `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte` | **New** — split-screen editor route |
+| `apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte` | **New** — editor sidebar component |
+
+## Reused Patterns
+- `Sidebar.Provider/Root/Inset` from `@cio/ui/base/sidebar` — same as course landing page editor route
+- `RadioGroup.Root/Item` — already imported in `landingpage.svelte`
+- `Field.Set/Field.Legend/Field.Separator` — already imported in `landingpage.svelte`
+- `UploadWidget` — already imported in `landingpage.svelte`
+- `orgApi.update($currentOrg.id, { landingpage: ... })` — same save pattern
+- `UnsavedChanges` component — already in `landingpage.svelte`
+- `goto()` for close/navigate — same as course editor
+
+## Verification
+1. **Theme picker**: `/org/[slug]/settings/landingpage` shows 3 cards with distinct SVG previews; clicking a card highlights it; saving persists the selection; reload reflects saved theme
+2. **Edit Content**: clicking "Edit Content" navigates to `/org/[slug]/settings/landingpage/edit`; the editor opens as a full-screen overlay with the selected theme visible on the right; editing fields updates the preview live
+3. **Public landing page**: visiting the org's public URL renders the selected theme (Minimal/Bold/Classic) using actual org courses; switching theme in settings and saving changes what public visitors see
+4. **Backward compat**: orgs with old `OrgLandingPageJson` format get reset to minimal defaults gracefully (no crash)
diff --git a/prd/org-landing-page-theme-picker/implementation-plan.md b/prd/org-landing-page-theme-picker/implementation-plan.md
new file mode 100644
index 00000000..1d6a2a1a
--- /dev/null
+++ b/prd/org-landing-page-theme-picker/implementation-plan.md
@@ -0,0 +1,92 @@
+# Org Landing Page Editor Parity Plan
+
+## Scope Lock
+
+1. Keep the existing org landing page feature set, but refactor the editor and preview shell to match the course landing page structure.
+2. Preserve the query-parameter handoff for theme preview so content can be edited against a selected theme without publishing it.
+3. Do not add section descriptions in the org editor if the course editor does not use them.
+4. The editor preview pane must scroll like the course landing page preview pane, not like the current org implementation.
+5. The sidebar shell must use the same composition and visual rhythm as the course editor.
+6. Keep the editor sections limited to the existing org landing page content areas, including embed support.
+
+## Delivery Phases
+
+1. Phase A: Align the org editor route shell with the course landing page editor shell.
+2. Phase B: Split the org editor into small section components.
+3. Phase C: Fix scroll behavior, sidebar layout, and header/action placement.
+4. Phase D: Clean up remaining copy, state handling, and regression risks.
+
+## Ticket Breakdown
+
+| ID | Area | Task | Key Files | Depends On | Done When |
+| --- | --- | --- | --- | --- | --- |
+| OLP-1 | Route Shell | Rebuild the org editor route around the same `Sidebar.Provider` / `Sidebar.Root` / `Sidebar.Inset` structure used by the course editor | `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte` | None | Full-screen editor behaves like the course editor and preview is rendered in the inset pane |
+| OLP-2 | Sidebar Width | Match the course editor sidebar width and spacing defaults | `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte` | OLP-1 | Sidebar no longer looks visually broken or oversized |
+| OLP-3 | Component Split | Break the monolithic org editor into focused section components | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte` + new section components | OLP-1 | Editor shell stays thin and section logic is isolated |
+| OLP-4 | Hero Section | Extract hero editing into its own form component | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor/*` | OLP-3 | Hero controls render independently and update preview state live |
+| OLP-5 | Navigation Section | Extract navigation editing into its own form component | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor/*` | OLP-3 | Nav items can be added, removed, and edited without a long conditional tree |
+| OLP-6 | Embed Section | Extract embed editing into its own form component | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor/*` | OLP-3 | Embed fields render cleanly and iframe preview settings remain supported |
+| OLP-7 | Footer Section | Extract footer editing into its own form component | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor/*` | OLP-3 | Footer text and links edit cleanly in a dedicated section |
+| OLP-8 | Menu Copy | Remove section descriptions from the org editor section list and section header | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte` | OLP-3 | Sidebar matches the simpler course editor tone and density |
+| OLP-9 | Scroll Behavior | Make preview scrolling match the course editor behavior | `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte`, org landing page theme components | OLP-1 | The preview pane scrolls independently and the sidebar stays stable |
+| OLP-10 | Theme Query Param | Keep theme preview driven by `?theme=` without publishing the theme on content edits | `apps/dashboard/src/lib/features/settings/pages/landingpage.svelte`, `apps/dashboard/src/routes/org/[slug]/settings/landingpage/edit/+page.svelte` | None | Clicking Edit Content previews the selected theme while leaving the live theme unchanged until an explicit settings save |
+| OLP-11 | Header Actions | Keep save/close behavior aligned with the course editor style | `apps/dashboard/src/lib/features/settings/pages/landingpage-editor.svelte` | OLP-1 | Save remains explicit and the editor header remains consistent |
+| OLP-12 | Regression Check | Verify build and key interaction flows after the refactor | workspace build commands | OLP-1 to OLP-11 | Dashboard build passes and the editor flow is stable |
+
+## Structure Targets
+
+### Route Shell
+
+The org edit route should follow the same outer structure as the course landing page editor:
+
+1. Full-screen fixed overlay.
+2. `Sidebar.Provider` as the top-level layout container.
+3. `Sidebar.Root` for the left editor panel.
+4. `Sidebar.Inset` for the live preview pane.
+5. One trigger button in the preview pane, consistent with the course editor.
+
+### Editor Component Shape
+
+The org editor should be a thin orchestration layer that:
+
+1. Tracks selected section state.
+2. Renders a compact section list.
+3. Delegates form rendering to section-specific components.
+4. Handles save and close actions.
+5. Binds dirty state to the parent settings page.
+
+### Section Components
+
+Keep the editable sections aligned with the current org landing page model:
+
+1. Hero
+2. Navigation
+3. Embed
+4. Footer
+
+## UX Rules
+
+1. No section descriptions in the org editor if the course editor does not show them.
+2. No long `if`/`else` chains in the main editor component when a section registry or split components can express the same behavior.
+3. The preview pane should be the only scrollable surface inside the editor shell.
+4. Save remains explicit. Theme selection alone should not publish the selected theme when the user is only editing content.
+5. The query-param theme preview should be preserved when navigating into and out of the content editor.
+
+## Acceptance Criteria
+
+1. The org landing page editor matches the course landing page editor composition closely enough that the two routes feel like siblings, not separate implementations.
+2. The org sidebar no longer appears broken or mis-sized.
+3. The preview pane scrolls correctly and does not trap or duplicate scrolling behavior.
+4. The org editor sections are split into small, readable components.
+5. Section descriptions are removed from the org editor UI.
+6. Opening the editor with a selected theme preview does not publish that theme until the user explicitly saves the settings page.
+7. `pnpm --filter @cio/dashboard build` passes after the refactor.
+
+## Verification Commands
+
+1. `pnpm --filter @cio/dashboard build`
+2. Manually verify `/org/[slug]/settings/landingpage`
+3. Manually verify `/org/[slug]/settings/landingpage/edit?theme=minimal`
+4. Manually verify `/org/[slug]/settings/landingpage/edit?theme=bold`
+5. Manually verify `/org/[slug]/settings/landingpage/edit?theme=classic`
+
diff --git a/prd/programs/README.md b/prd/programs/README.md
index 3803f45b..fc902035 100644
--- a/prd/programs/README.md
+++ b/prd/programs/README.md
@@ -1,15 +1,347 @@
 # Programs PRD
 
+## Customer Documentation Draft
+
+This section captures the customer-facing documentation draft for Programs. It is written for end users and can later be adapted into public docs, onboarding content, or help-center material.
+
+### Overview
+
+Programs help you group multiple courses into one structured learning experience. Instead of treating every course as a separate training track, you can organize related courses, learners, and communication into a single program.
+
+This is especially useful when training is delivered as a journey rather than a one-off course.
+
+### When To Use Programs
+
+Use Programs when:
+
+- Learners should take more than one course as part of the same track.
+- The same group of learners should be enrolled across multiple courses.
+- You want one place to manage the people in that training path.
+- You need a shared announcement space across several related courses.
+- You want learners to experience the training as one program instead of a flat course list.
+
+If you only need to deliver one standalone course, a course by itself may be enough. If you are running a structured pathway, a cohort, or a multi-step curriculum, Programs are usually the better fit.
+
+### Common Use Cases
+
+#### Employee onboarding
+
+Create one program for new hires and include all required onboarding courses inside it.
+
+Example:
+
+- Company culture
+- Security awareness
+- IT setup training
+- Role-specific onboarding
+
+This makes it easy to enroll each new employee once and give them access to the full onboarding path.
+
+#### Certification or compliance training
+
+Use a program when learners must complete several courses to earn a certification or complete a compliance requirement.
+
+Example:
+
+- Safety fundamentals
+- Practical assessment prep
+- Final certification review
+
+This keeps the full certification journey together and makes communication easier for instructors and learners.
+
+#### Bootcamps and cohort-based learning
+
+Programs work well for cohorts that move through a sequence of courses together.
+
+Example:
+
+- Week 1 foundations
+- Week 2 intermediate material
+- Week 3 project work
+- Week 4 final review
+
+The program becomes the hub for that cohort.
+
+#### Customer education
+
+If you train customers on your product in stages, Programs can bundle those courses into one learning path.
+
+Example:
+
+- Product basics
+- Admin training
+- Reporting and analytics
+- Advanced workflows
+
+This gives customers a clearer path through your learning content.
+
+#### Partner or channel enablement
+
+Programs can package the training a reseller, implementation partner, or external team needs to complete.
+
+Example:
+
+- Brand overview
+- Sales certification
+- Technical onboarding
+- Support processes
+
+This makes it easier to assign the same learning experience to many partner groups.
+
+#### Internal academy or role-based development
+
+If your organization runs structured learning for managers, sales reps, engineers, or support teams, a program can become the container for each pathway.
+
+Example:
+
+- New manager program
+- Sales ramp-up program
+- Support excellence program
+
+### What A Program Includes
+
+A program usually brings together four things:
+
+- Courses: the learning content learners should complete.
+- Members: the people assigned to the program.
+- Roles: who can manage the program and who is participating in it.
+- Newsfeed: a shared place for updates and announcements.
+
+### How Programs Work
+
+At a high level, Programs work like this:
+
+1. Create a program.
+2. Add the courses that belong in that program.
+3. Add learners and tutors.
+4. Use the program newsfeed for updates and communication.
+5. Learners open the program and access the related courses from one place.
+
+Programs help reduce repetitive admin work because you manage the training track as one unit instead of handling every course separately.
+
+### Setting Up A Program
+
+#### Step 1: Create the program
+
+Start from the Programs section in your organization dashboard and create a new program.
+
+Typical information to add:
+
+- Program name
+- Program description
+
+Choose a name learners will understand immediately. Good program names are specific and outcome-based, such as:
+
+- New Hire Onboarding
+- Safety Certification Track
+- Customer Success Bootcamp
+- Manager Essentials Program
+
+#### Step 2: Add courses
+
+Once the program exists, add the courses that make up the learning path.
+
+You can use this for:
+
+- A short 2-course sequence
+- A multi-week curriculum
+- A full certification path
+
+Try to keep the program focused. A strong program usually represents one coherent goal rather than a random bundle of unrelated courses.
+
+#### Step 3: Add people
+
+After adding courses, assign the people who should participate in the program.
+
+This usually includes:
+
+- Learners who need access to the training
+- Tutors or trainers who will support the cohort
+
+The main advantage here is that you do not need to think course by course. You can manage participation at the program level.
+
+#### Step 4: Start communication
+
+Use the program newsfeed to post updates that matter across the whole learning path.
+
+This is useful for:
+
+- Welcome messages
+- Weekly announcements
+- Schedule changes
+- Program-wide reminders
+- Encouragement before assessments or deadlines
+
+### What Learners See
+
+Learners can open Programs from their LMS view and see the training paths they have been enrolled in.
+
+From there, they can:
+
+- Open a program
+- See the courses that belong to it
+- Read program-wide updates in the newsfeed
+- Move between related courses more easily
+
+This makes the experience feel more guided and intentional than a flat list of separate courses.
+
+### Roles Inside A Program
+
+Programs support different responsibilities for different people.
+
+Typical roles include:
+
+- Admins: manage the program and its settings.
+- Tutors: support delivery and help manage learners.
+- Students: participate in the program and take the courses.
+
+This makes Programs suitable for both internal teams and external learning groups.
+
+### Program Statuses
+
+Programs can move through different statuses as they progress.
+
+#### Active
+
+Use this when the program is currently running and available to learners.
+
+#### Inactive
+
+Use this when you want to keep the program and its structure but do not want it actively shown to learners in the same way as a live program.
+
+#### Archived
+
+Use this when the program is no longer part of your active training catalog and should be treated as historical.
+
+### Best Practices
+
+#### Build programs around one goal
+
+Each program should represent one clear outcome, audience, or training pathway.
+
+Good examples:
+
+- Sales onboarding
+- Compliance recertification
+- Frontend engineering bootcamp
+
+Less effective examples:
+
+- Miscellaneous courses
+- Team training library
+
+#### Keep communication program-wide
+
+Use the newsfeed for updates that affect everyone in the program. Keep course-specific communication inside the course when the message only applies to one course.
+
+#### Name programs clearly
+
+A learner should understand what a program is for just by reading its title.
+
+Good naming patterns:
+
+- Audience + goal
+- Time period + goal
+- Role + pathway
+
+Examples:
+
+- 2026 Graduate Trainee Program
+- Support Team Onboarding
+- ISO 27001 Readiness Track
+
+#### Use programs for repeatable training
+
+Programs are especially helpful when you run the same training structure more than once, such as onboarding every month or launching new cohorts every quarter.
+
+### Examples Of Strong Program Designs
+
+#### Example 1: New hire onboarding
+
+Program name: New Hire Onboarding
+
+Courses:
+
+- Welcome to the company
+- Security and compliance basics
+- Internal tools training
+- Team-specific workflow training
+
+Why this works:
+
+- One enrollment flow for every new hire
+- One place for onboarding announcements
+- A clear experience for learners
+
+#### Example 2: Certification pathway
+
+Program name: Health and Safety Certification
+
+Courses:
+
+- Safety fundamentals
+- Incident reporting
+- Practical safety review
+- Final certification preparation
+
+Why this works:
+
+- Related content is grouped in one place
+- Instructors can communicate with the full cohort
+- Learners can follow a single path to completion
+
+#### Example 3: Partner enablement
+
+Program name: Certified Implementation Partner Program
+
+Courses:
+
+- Product foundations
+- Solution setup
+- Client handoff
+- Support and escalation process
+
+Why this works:
+
+- External learners get a structured path
+- The training team manages one program instead of many separate enrollments
+
+### Frequently Asked Questions
+
+#### Should I use one large program or several smaller ones?
+
+Use one program when the courses belong to the same learner journey. Use separate programs when the audience, goal, or timeline is different.
+
+#### Can a program contain multiple courses?
+
+Yes. That is the main purpose of the feature.
+
+#### Is a program better than a single course?
+
+Not always. A single course is best for standalone training. A program is best when multiple courses should be delivered as one experience.
+
+#### Who should use Programs most often?
+
+Programs are especially useful for:
+
+- Training organizations
+- Companies onboarding employees
+- Teams running certification tracks
+- Bootcamps and cohort-based educators
+- Customer education teams
+
+Tip: if you already think about your training in terms of pathways, cohorts, tracks, academies, or onboarding journeys, Programs are likely the right structure for you.
+
 ## Purpose
 
-Enable instructors and org admins to group multiple courses — along with shared announcements, files, and community discussions — into a single **program**. Enrolling a student in a program auto-enrolls them in every course inside it, eliminating the need to manage per-course enrollment manually when delivering a structured program.
+Enable instructors and org admins to group multiple courses — along with a shared newsfeed — into a single **program**. Enrolling a student in a program auto-enrolls them in every course inside it, eliminating the need to manage per-course enrollment manually when delivering a structured learning path.
 
 ## Problem Statement
 
 Currently, ClassroomIO has no entity above the individual course. Every course has its own independent enrollment roster. This creates several pain points:
 
-- An instructor running a program (e.g., a bootcamp, onboarding track, or certification pathway) must enroll students in each constituent course one by one.
-- There is no shared space for program-wide announcements, files, or discussions that span multiple courses.
+- An instructor running a structured path (e.g., a bootcamp, onboarding track, or certification pathway) must enroll students in each constituent course one by one.
+- There is no shared space for program-wide announcements or discussions that span multiple courses.
 - Students cannot see a unified "program" view in the LMS — they only see a flat list of individual courses.
 - Org admins have no way to bundle courses for a specific cohort of learners (e.g., "Q1 2026 New Hire Onboarding") without creating separate organizations or duplicating content.
 
@@ -17,13 +349,14 @@ Currently, ClassroomIO has no entity above the individual course. Every course h
 
 1. **Terminology**: "Program" in both the instructor-facing admin UI and the student-facing LMS.
 2. **Auto-enrollment**: Joining a program automatically creates `groupmember` records for every course inside the program. Removing a student from a program does not remove them from individual course groups, preserving their submission and progress data.
-3. **Shared materials**: Each program has three shared material surfaces: announcements (instructor-authored posts), a file library, and a community Q&A board.
+3. **Newsfeed**: Each program has a newsfeed modelled exactly after `course_newsfeed` — same data shape (content, isPinned, reactions, comments), same service patterns, scoped to the program via `programId`.
 4. **Many-to-many courses**: A course can belong to multiple programs. Courses and programs are independent entities linked by a join table.
-5. **LMS visibility**: Programs are visible to students in the LMS under a dedicated "Programs" section. Students see enrolled programs and can navigate courses from within a program hub page.
-6. **Roles**: Program roles mirror the existing system (`ADMIN`/roleId 1, `TUTOR`/roleId 2, `STUDENT`/roleId 3). Program admins and tutors can manage the program; program students get read access to materials.
-7. **Program status**: Programs can be `ACTIVE`, `INACTIVE`, or `ARCHIVED`. `INACTIVE` programs are hidden from students in the LMS but preserved for instructors. `ARCHIVED` programs are soft-deleted and hidden everywhere.
-8. **Course independence**: Courses in a program remain fully independent. A student enrolled in a program is a regular `groupmember` in each course — existing course pages, progress tracking, submissions, and grading are unchanged.
-9. **Community reuse**: The existing `community_question` table gains a nullable `programId` FK. Program-level Q&A behaves identically to course-level community Q&A but scoped to the program.
+5. **Org nav placement**: Programs are added to `/org/[slug]` as a top-level nav item alongside Courses and Community, following the exact same pattern used for those pages (`org-navigation.ts`).
+6. **Program detail layout**: Opening a program follows the same `Sidebar.Provider` + `ProgramSidebar` + `ProgramHeader` pattern used for courses (`/courses/[id]`). The program detail lives at `/programs/[id]`.
+7. **Sidebar items (v1)**: Newsfeed, Courses, People, Settings — in that order.
+8. **Roles**: Program roles mirror the existing system (`ADMIN`/roleId 1, `TUTOR`/roleId 2, `STUDENT`/roleId 3). Program admins and tutors can manage the program; students get read access.
+9. **Program status**: Programs can be `ACTIVE`, `INACTIVE`, or `ARCHIVED`. `INACTIVE` programs are hidden from students in the LMS but preserved for instructors. `ARCHIVED` programs are hidden everywhere.
+10. **Course independence**: Courses in a program remain fully independent. A student enrolled in a program is a regular `groupmember` in each course — existing course pages, progress tracking, submissions, and grading are unchanged.
 
 ## Current-State Audit
 
@@ -31,50 +364,49 @@ Currently, ClassroomIO has no entity above the individual course. Every course h
 | --- | --- | --- |
 | Organization structure | `organization` → `group` (1:1 with `course`) → `course` | No intermediate grouping layer above course |
 | Course enrollment | `groupmember` rows per course's `group` | Per-course, no bulk enrollment mechanism |
-| Student LMS view | Flat list of enrolled courses under `/lms/mylearning` | No program/program concept |
-| Community Q&A | `community_question.courseId` scoped | Reusable with additional `programId` FK |
-| Shared file library | Per-course via `assets` table; no org-wide shared files | New `program_file` table needed |
-| Announcements | Per-course `course_newsfeed` | New `program_announcement` table needed |
-| Org admin navigation | "Courses" section listing all courses | "Programs" nav item needed |
-| LMS navigation | Home, My Learning, Exercises, Community, Explore, Settings | "Programs" nav item needed |
+| Org admin nav | Courses, Community, Audience, Media, Tags nav items under `/org/[slug]` | "Programs" nav item needed |
+| Newsfeed | `course_newsfeed` + `course_newsfeed_comment` tables, full service in `apps/api/src/services/newsfeed/newsfeed.ts` | Reuse shape; scope to program with `programId` |
+| Student LMS view | Flat list of enrolled courses under `/lms/mylearning` | No program concept |
 | Enrollment service | `enrollInCourse()` in `apps/api/src/services/course/invite.ts` | Must be called per-course when adding program member |
 
-**Key insight**: Because enrollment = `groupmember` rows per course, adding a student to a program is purely a matter of calling the existing enrollment logic for each course in the program within a single transaction. No course-level schema changes are needed.
-
 ## Product Goals
 
 1. Org admins and instructors can create a program, add courses to it, and manage program membership from the admin dashboard.
 2. Adding a student to a program auto-enrolls them in all courses currently in the program.
 3. Adding a new course to an existing program auto-enrolls all current program students in that course.
-4. Each program has a shared announcements feed, file library, and community board visible to all program members.
-5. Students can see their enrolled programs in the LMS with a unified hub view showing all courses, announcements, and files.
-6. Programs without students, and courses outside any program, continue to work exactly as they do today (zero regression).
+4. Each program has a newsfeed (posts, reactions, comments) visible to all program members, writable by admins and tutors.
+5. Admins and tutors can view and manage all program members from a People page.
+6. Students can see their enrolled programs in the LMS with a hub showing all courses and the newsfeed.
+7. Programs with no students, and courses outside any program, continue to work exactly as they do today (zero regression).
 
 ## Non-Goals (v1)
 
-- Program-level invite links (v1 enrollment is admin-managed; students cannot self-enroll in a program via a token).
-- Program-specific exercise deadlines or content overrides (courses are shared as-is).
-- Program progress analytics aggregated across all courses (available per-course; cross-course aggregation is a future improvement).
+- **Shared file library** — not in v1.
+- **Program-level community Q&A** — v2.
+- Program-level invite links (v1 enrollment is admin-managed).
+- Program-specific exercise deadlines or content overrides.
+- Program progress analytics aggregated across all courses.
 - Removing a student from a program also unenrolling them from individual courses (data preservation is the default).
 - Program templates or program cloning.
-- Public/discoverable program landing pages (programs are private to org members).
+- Public/discoverable program landing pages.
 - Billing or pricing at the program level.
-- Program-level attendance tracking separate from per-course attendance.
 
 ## Data Sources Checked
 
-- `packages/db/src/schema.ts` — all table definitions and constraint patterns
-- `apps/api/src/services/course/course.ts` — course creation flow
+- `packages/db/src/schema.ts` — `course_newsfeed`/`course_newsfeed_comment` shape to mirror
+- `apps/api/src/services/newsfeed/newsfeed.ts` — newsfeed service pattern to replicate
 - `apps/api/src/services/course/invite.ts` — enrollment flow (`enrollInCourse`)
-- `apps/api/src/routes/course/course.ts` — course router and sub-router mounting
+- `apps/api/src/routes/course/course.ts` — course router pattern
 - `apps/api/src/app.ts` — top-level router registration
 - `packages/db/src/queries/course/people.ts` — group member management
-- `packages/db/src/queries/group/group.ts` — group/member queries
-- `packages/db/src/queries/community/community.ts` — community Q&A pattern
-- `apps/dashboard/src/lib/features/lms/` — LMS navigation and pages
-- `apps/dashboard/src/lib/features/org/` — org admin navigation
-- `apps/dashboard/src/routes/lms/` — LMS SvelteKit routes
-- `apps/dashboard/src/routes/courses/` — course admin SvelteKit routes
+- `apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts` — where to add Programs nav item
+- `apps/dashboard/src/routes/org/[slug]/+layout.svelte` — org layout pattern (Sidebar.Provider + OrgSidebar)
+- `apps/dashboard/src/routes/org/[slug]/courses/+page.svelte` — courses listing pattern to mirror
+- `apps/dashboard/src/routes/courses/[id]/+layout.svelte` — course detail layout pattern to replicate
+- `apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte` — sidebar pattern
+- `apps/dashboard/src/lib/features/course/pages/people.svelte` — people page pattern
+
+---
 
 ## Functional Requirements
 
@@ -84,75 +416,93 @@ Currently, ClassroomIO has no entity above the individual course. Every course h
 - Programs can be updated (name, description, cover image, status).
 - Archiving a program sets `status = 'ARCHIVED'` and hides it from all views. Archived programs can be restored.
 - A program belongs to exactly one organization.
-- Program names do not need to be unique within an org (unlike course slugs), but should be descriptive.
 
-### 2. Course Management in a Program (Admin)
+### 2. Courses Page (`/programs/[id]/courses`)
 
 - Org admins and program tutors can add existing org courses to a program.
 - A course can belong to multiple programs simultaneously.
 - Adding a course to a program triggers auto-enrollment: all existing `STUDENT` program members are enrolled in the new course (a `groupmember` row is created in the course's `group` for each student not already enrolled).
-- Removing a course from a program does not unenroll any students from that course. Their progress and submissions are preserved.
-- Courses within a program are ordered (integer `order` field) so instructors can sequence them.
+- Removing a course from a program does not unenroll any students. Their progress and submissions are preserved.
+- Courses within a program have no explicit ordering; they are displayed by insertion order (`addedAt` ascending).
 
-### 3. Program Membership (Admin)
+**Admin/tutor view**:
+- Ordered list of course rows: cover image thumbnail, course title, description excerpt, lesson count.
+- "Add Course" button opens a searchable dropdown of org courses not already in this program.
+- "Remove" button per course with a confirmation dialog noting no students are unenrolled.
 
-- Org admins can add members to a program by profile ID or email, assigning them a role (ADMIN, TUTOR, or STUDENT).
-- Adding a STUDENT member triggers auto-enrollment: a `groupmember` row is created in every course currently in the program (skipping courses the student is already enrolled in; idempotent).
-- Adding an ADMIN or TUTOR member does not auto-enroll them in courses (their course-level permissions are managed separately via course membership).
-- Removing a member from a program removes the `program_member` row only. Individual `groupmember` rows in courses are left intact, preserving submissions, grades, and progress.
-- Batch add: admins can add multiple members at once (array of `{ email, roleId }` pairs).
+**Student view** (LMS): same list with individual progress bar per course; clicking navigates to the course.
 
-### 4. Program Announcements (Admin + LMS)
+### 3. People Page (`/programs/[id]/people`)
 
-- Program admins and tutors can post announcements to the program feed.
-- Announcements have a title and a rich-text body.
-- Announcements are visible to all program members (students, tutors, and admins) in both the admin program view and the LMS program hub.
-- Students cannot post announcements (read-only for students).
-- Announcements are ordered by `createdAt` descending (newest first).
+Admin/tutor only — students do not see this sidebar item.
 
-### 5. Program File Library (Admin + LMS)
+- Table of all `program_member` rows joined to `profile`.
+- Columns: Avatar + Full Name, Email (obscured, same pattern as course people page), Role badge (Admin / Tutor / Student), Actions.
+- Search input: client-side filter by name or email.
+- Role filter dropdown: All / Admin / Tutor / Student.
+- "Add Members" button: opens a modal with email input + role selector. Supports batch add (array of `{ email, roleId }` pairs), same pattern as the course invitation modal.
+- Per-row actions: change role (dropdown), remove member (with confirmation noting course enrollments are preserved).
 
-- Program admins and tutors can upload files to the program file library.
-- Each file record stores: name, URL (stored via the existing presigned upload flow), MIME type, size, uploader profile ID.
-- All program members can view and download files.
-- Only program admins and tutors can delete files.
+### 4. Newsfeed Page (`/programs/[id]/newsfeed`)
 
-### 6. Program Community (Admin + LMS)
+Modelled exactly after `course_newsfeed`. Same data shape, same service patterns, same sanitization, scoped to `programId`.
 
-- Program-level community Q&A reuses the existing `community_question` / `community_answer` infrastructure.
-- A nullable `programId` FK is added to `community_question`. Questions with `programId` set are program-scoped (not visible on the course-level community board).
-- All program members can post questions and answers in the program community.
-- The existing voting, commenting, and answer-acceptance behavior is unchanged.
+- Feed of posts by admins/tutors, ordered newest-first with pinned posts at the top.
+- Each post: author avatar, author name, timestamp, sanitized HTML content, pin indicator (if pinned).
+- Reaction bar: clap, smile, thumbsup, thumbsdown with counts. Clicking a reaction toggles the current user's entry in that reaction array.
+- Comment thread below each post: author avatar, name, timestamp, content. Comment input field at bottom (visible to all members).
+- "New Post" button (admin/tutor only) opens a rich-text editor.
+- Edit/delete controls on own posts (admin/tutor). Org admins can delete any post.
+- Students can react and comment but cannot create top-level posts.
 
-### 7. LMS — My Programs (Student)
+### 5. Settings Page (`/programs/[id]/settings`)
 
-- A "Programs" nav item appears in the LMS sidebar when the student is enrolled in at least one program.
-- The `/lms/programs` page lists all programs the student is enrolled in.
-- Each program card shows: program name, cover image, number of courses, brief description.
-- Clicking a program opens the program hub page.
+Admin only — students and tutors do not see this sidebar item.
 
-### 8. LMS — Program Hub (Student)
+- **General section**: Program name (text input), Description (textarea), Cover Image (upload via existing presigned upload flow).
+- **Status section**: Status select (Active / Inactive / Archived). Inactive hides the program from students. Setting to Archived requires a confirmation dialog.
+- Save button submits a `PUT /program/:programId`.
 
-- The program hub at `/lms/programs/[programId]` is the student's central page for a program.
-- It is divided into three tabs or sections:
-  - **Courses**: All courses in the program, each with the student's individual progress bar and a direct link to the course. Courses are shown in the instructor-defined order.
-  - **Announcements**: Program announcements in reverse-chronological order (read-only for students).
-  - **Resources**: The program file library (download only) and a link to the program community board.
-- The program community board lives at `/lms/programs/[programId]/community` and behaves identically to the existing course community pages.
+### 6. Org Admin — Programs Listing (`/org/[slug]/programs`)
 
-### 9. Admin — Programs Section
+- "Programs" top-level nav item added to `org-navigation.ts` directly after "Courses", same structure as every other item (title, path, icon, matchPattern).
+- Listing page shows all non-archived programs: name, cover image, course count, member count, status badge.
+- "Create Program" button opens a creation form/modal.
+- Clicking a program navigates to `/programs/[id]`.
+- Follows the exact file and component structure of `apps/dashboard/src/routes/org/[slug]/courses/+page.svelte`.
 
-- "Programs" is added as a top-level nav item in the org admin sidebar, alongside "Courses".
-- The `/courses/programs` page lists all org programs with name, course count, student count, and status badge.
-- A "Create Program" button opens a creation form.
-- Each program links to a program detail view with sub-pages: Overview, Courses, People, Announcements, Files.
+### 7. Program Detail — Sidebar Layout
 
-### 10. Access Control
+Opening a program follows the **exact same pattern** as opening a course (`/courses/[id]/+layout.svelte`):
 
-- Only `ADMIN` and `TUTOR` role members of a program (or org admins) can manage program content and membership.
-- Students can read announcements and files, participate in the community, and view the course list.
-- A student who is removed from the org loses access to all program content.
-- An `INACTIVE` program is hidden from students in the LMS but all data is preserved.
+```
+Sidebar.Provider
+├── ProgramSidebar (programId, path)
+└── Sidebar.Inset
+    ├── ProgramHeader (program name + breadcrumb back to /org/[slug]/programs)
+    └── <slot /> (child routes)
+```
+
+**ProgramSidebar** — four items, role-gated, using the same `Sidebar.Group` / `Sidebar.Menu` / `Sidebar.MenuItem` primitives as `course-sidebar-navigation.svelte`:
+
+| # | Label | Icon | Path | Visible to |
+| --- | --- | --- | --- | --- |
+| 1 | Newsfeed | `Newspaper` | `/programs/[id]/newsfeed` | All members |
+| 2 | Courses | `BookOpen` | `/programs/[id]/courses` | All members |
+| 3 | People | `Users` | `/programs/[id]/people` | Admin + Tutor only |
+| 4 | Settings | `Settings` | `/programs/[id]/settings` | Admin only |
+
+### 8. LMS — My Programs
+
+- "Programs" nav item in the LMS sidebar, shown conditionally only when `enrolledPrograms.length > 0`, positioned between "My Learning" and "Exercises".
+- `/lms/programs` lists all ACTIVE programs the student is enrolled in: program name, cover image, course count, description.
+- Clicking a program opens `/lms/programs/[programId]` — the program hub with two tabs: **Courses** (list by insertion order with per-course progress bars) and **Newsfeed** (read + react + comment; no post creation).
+
+### 9. Access Control
+
+- Only `ADMIN`/`TUTOR` program members (or org admins) can manage program content and membership.
+- Students can read the newsfeed and course list, react to and comment on newsfeed posts.
+- An `INACTIVE` program is hidden from students in the LMS; all data is preserved and accessible to admins/tutors.
 
 ---
 
@@ -171,13 +521,10 @@ export const programStatus = pgEnum('PROGRAM_STATUS', ['ACTIVE', 'INACTIVE', 'AR
 
 ```typescript
 // packages/db/src/schema.ts
-export const lmsProgram = pgTable(
+export const program = pgTable(
   'program',
   {
-    id: uuid()
-      .default(sql`gen_random_uuid()`)
-      .primaryKey()
-      .notNull(),
+    id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
     updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
     organizationId: uuid('organization_id').notNull(),
@@ -191,12 +538,12 @@ export const lmsProgram = pgTable(
     foreignKey({
       columns: [table.organizationId],
       foreignColumns: [organization.id],
-      name: 'class_organization_id_fkey'
+      name: 'program_organization_id_fkey'
     }).onDelete('cascade'),
     foreignKey({
       columns: [table.createdByProfileId],
       foreignColumns: [profile.id],
-      name: 'class_created_by_profile_id_fkey'
+      name: 'program_created_by_profile_id_fkey'
     }),
     index('idx_program_organization_id').on(table.organizationId)
   ]
@@ -205,52 +552,39 @@ export const lmsProgram = pgTable(
 
 #### New Table: `program_course`
 
-Many-to-many join between program and course, with an instructor-controlled display order.
-
 ```typescript
-// packages/db/src/schema.ts
 export const programCourse = pgTable(
   'program_course',
   {
-    id: uuid()
-      .default(sql`gen_random_uuid()`)
-      .primaryKey()
-      .notNull(),
+    id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
     programId: uuid('program_id').notNull(),
     courseId: uuid('course_id').notNull(),
-    order: integer().default(0).notNull(),
     addedAt: timestamp('added_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
   },
   (table) => [
     foreignKey({
       columns: [table.programId],
-      foreignColumns: [lmsProgram.id],
-      name: 'program_course_class_id_fkey'
+      foreignColumns: [program.id],
+      name: 'program_course_program_id_fkey'
     }).onDelete('cascade'),
     foreignKey({
       columns: [table.courseId],
       foreignColumns: [course.id],
       name: 'program_course_course_id_fkey'
     }).onDelete('cascade'),
-    unique('program_course_class_id_course_id_unique').on(table.programId, table.courseId),
-    index('idx_program_course_class_id').on(table.programId)
+    unique('program_course_program_id_course_id_unique').on(table.programId, table.courseId),
+    index('idx_program_course_program_id').on(table.programId)
   ]
 );
 ```
 
 #### New Table: `program_member`
 
-Membership roster for a program. Does not replace `groupmember` — it is a separate layer.
-
 ```typescript
-// packages/db/src/schema.ts
 export const programMember = pgTable(
   'program_member',
   {
-    id: uuid()
-      .default(sql`gen_random_uuid()`)
-      .primaryKey()
-      .notNull(),
+    id: uuid().default(sql`gen_random_uuid()`).primaryKey().notNull(),
     programId: uuid('program_id').notNull(),
     profileId: uuid('profile_id'),
     roleId: integer('role_id').notNull(),
@@ -260,8 +594,8 @@ export const programMember = pgTable(
   (table) => [
     foreignKey({
       columns: [table.programId],
-      foreignColumns: [lmsProgram.id],
-      name: 'program_member_class_id_fkey'
+      foreignColumns: [program.id],
+      name: 'program_member_program_id_fkey'
     }).onDelete('cascade'),
     foreignKey({
       columns: [table.profileId],
@@ -273,206 +607,101 @@ export const programMember = pgTable(
       foreignColumns: [role.id],
       name: 'program_member_role_id_fkey'
     }),
-    unique('program_member_class_id_profile_id_unique').on(table.programId, table.profileId),
-    index('idx_program_member_class_id').on(table.programId),
+    unique('program_member_program_id_profile_id_unique').on(table.programId, table.profileId),
+    index('idx_program_member_program_id').on(table.programId),
     index('idx_program_member_profile_id').on(table.profileId)
   ]
 );
 ```
 
-#### New Table: `program_announcement`
+#### New Table: `program_newsfeed`
+
+Mirrors `course_newsfeed` exactly. `authorId` references `program_member.id` (same as `course_newsfeed.authorId` → `groupmember.id`).
 
 ```typescript
-// packages/db/src/schema.ts
-export const programAnnouncement = pgTable(
-  'program_announcement',
+export const programNewsfeed = pgTable(
+  'program_newsfeed',
   {
-    id: uuid()
-      .default(sql`gen_random_uuid()`)
-      .primaryKey()
-      .notNull(),
-    programId: uuid('program_id').notNull(),
-    authorProfileId: uuid('author_profile_id'),
-    title: varchar().notNull(),
-    body: text(),
+    id: uuid().defaultRandom().primaryKey().notNull(),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow()
+    authorId: uuid('author_id'),
+    programId: uuid('program_id'),
+    content: text(),
+    reaction: jsonb()
+      .default({ clap: [], smile: [], thumbsup: [], thumbsdown: [] })
+      .$type<{ clap: string[]; smile: string[]; thumbsup: string[]; thumbsdown: string[] }>(),
+    isPinned: boolean('is_pinned').default(false).notNull()
   },
   (table) => [
     foreignKey({
-      columns: [table.programId],
-      foreignColumns: [lmsProgram.id],
-      name: 'program_announcement_class_id_fkey'
-    }).onDelete('cascade'),
-    foreignKey({
-      columns: [table.authorProfileId],
-      foreignColumns: [profile.id],
-      name: 'program_announcement_author_profile_id_fkey'
+      columns: [table.authorId],
+      foreignColumns: [programMember.id],
+      name: 'program_newsfeed_author_id_fkey'
     }),
-    index('idx_program_announcement_class_id').on(table.programId)
+    foreignKey({
+      columns: [table.programId],
+      foreignColumns: [program.id],
+      name: 'program_newsfeed_program_id_fkey'
+    }).onDelete('cascade'),
+    index('idx_program_newsfeed_program_id').on(table.programId)
   ]
 );
 ```
 
-#### New Table: `program_file`
+#### New Table: `program_newsfeed_comment`
+
+Mirrors `course_newsfeed_comment`.
 
 ```typescript
-// packages/db/src/schema.ts
-export const programFile = pgTable(
-  'program_file',
+export const programNewsfeedComment = pgTable(
+  'program_newsfeed_comment',
   {
-    id: uuid()
-      .default(sql`gen_random_uuid()`)
-      .primaryKey()
-      .notNull(),
-    programId: uuid('program_id').notNull(),
-    uploadedByProfileId: uuid('uploaded_by_profile_id'),
-    name: varchar().notNull(),
-    url: text().notNull(),
-    mimeType: varchar('mime_type'),
-    size: integer(),
-    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
+    id: bigint({ mode: 'number' }).primaryKey()
+      .generatedByDefaultAsIdentity({ name: 'program_newsfeed_comment_id_seq' }),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
+    authorId: uuid('author_id'),
+    content: text(),
+    programNewsfeedId: uuid('program_newsfeed_id')
   },
   (table) => [
     foreignKey({
-      columns: [table.programId],
-      foreignColumns: [lmsProgram.id],
-      name: 'program_file_class_id_fkey'
-    }).onDelete('cascade'),
-    foreignKey({
-      columns: [table.uploadedByProfileId],
-      foreignColumns: [profile.id],
-      name: 'program_file_uploaded_by_profile_id_fkey'
+      columns: [table.authorId],
+      foreignColumns: [programMember.id],
+      name: 'program_newsfeed_comment_author_id_fkey'
     }),
-    index('idx_program_file_class_id').on(table.programId)
+    foreignKey({
+      columns: [table.programNewsfeedId],
+      foreignColumns: [programNewsfeed.id],
+      name: 'program_newsfeed_comment_program_newsfeed_id_fkey'
+    }).onDelete('cascade')
   ]
 );
 ```
 
-#### Modified Table: `community_question`
-
-Add a nullable `programId` FK so community questions can be scoped to a program:
-
-```typescript
-// Add to community_question table columns:
-programId: uuid('program_id')
-
-// Add to community_question table constraints:
-foreignKey({
-  columns: [table.programId],
-  foreignColumns: [lmsProgram.id],
-  name: 'community_question_class_id_fkey'
-}).onDelete('cascade')
-```
-
-When `programId` is set, the question is program-scoped. When `courseId` is set, it is course-scoped. The two are mutually exclusive in practice (enforced at the service layer).
-
 #### Relationship Diagram
 
 ```
 organization
   └── program
         ├── program_course  ──────────────────────→  course
-        │     (order, addedAt)                        └── group → groupmember ← (auto-created)
+        │     (addedAt)                                  └── group → groupmember ← (auto-created)
         ├── program_member  ──────────────────────→  profile
         │     (roleId: ADMIN/TUTOR/STUDENT)
-        ├── program_announcement
-        │     (title, body, authorProfileId)
-        ├── program_file
-        │     (name, url, mimeType, size)
-        └── community_question (programId set)
-              └── community_answer
-```
-
-### Migration
-
-File: `packages/db/src/migrations/XXXX_add_programs.sql`
-
-```sql
--- 1. Create PROGRAM_STATUS enum
-CREATE TYPE "PROGRAM_STATUS" AS ENUM ('ACTIVE', 'INACTIVE', 'ARCHIVED');
-
--- 2. Create program table
-CREATE TABLE program (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ DEFAULT NOW(),
-  organization_id UUID NOT NULL REFERENCES organization(id) ON DELETE CASCADE,
-  name VARCHAR NOT NULL,
-  description TEXT,
-  cover_image TEXT,
-  status "PROGRAM_STATUS" NOT NULL DEFAULT 'ACTIVE',
-  created_by_profile_id UUID REFERENCES profile(id)
-);
-
-CREATE INDEX idx_program_organization_id ON program(organization_id);
-
--- 3. Create program_course join table
-CREATE TABLE program_course (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES program(id) ON DELETE CASCADE,
-  course_id UUID NOT NULL REFERENCES course(id) ON DELETE CASCADE,
-  "order" INTEGER NOT NULL DEFAULT 0,
-  added_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  UNIQUE(program_id, course_id)
-);
-
-CREATE INDEX idx_program_course_class_id ON program_course(program_id);
-
--- 4. Create program_member table
-CREATE TABLE program_member (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES program(id) ON DELETE CASCADE,
-  profile_id UUID REFERENCES profile(id),
-  role_id INTEGER NOT NULL REFERENCES role(id),
-  email TEXT,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  UNIQUE(program_id, profile_id)
-);
-
-CREATE INDEX idx_program_member_class_id ON program_member(program_id);
-CREATE INDEX idx_program_member_profile_id ON program_member(profile_id);
-
--- 5. Create program_announcement table
-CREATE TABLE program_announcement (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES program(id) ON DELETE CASCADE,
-  author_profile_id UUID REFERENCES profile(id),
-  title VARCHAR NOT NULL,
-  body TEXT,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-  updated_at TIMESTAMPTZ DEFAULT NOW()
-);
-
-CREATE INDEX idx_program_announcement_class_id ON program_announcement(program_id);
-
--- 6. Create program_file table
-CREATE TABLE program_file (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  program_id UUID NOT NULL REFERENCES program(id) ON DELETE CASCADE,
-  uploaded_by_profile_id UUID REFERENCES profile(id),
-  name VARCHAR NOT NULL,
-  url TEXT NOT NULL,
-  mime_type VARCHAR,
-  size INTEGER,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-CREATE INDEX idx_program_file_class_id ON program_file(program_id);
-
--- 7. Add programId to community_question
-ALTER TABLE community_question ADD COLUMN program_id UUID REFERENCES program(id) ON DELETE CASCADE;
+        ├── program_newsfeed
+        │     (content, isPinned, reaction JSONB)
+        │       └── program_newsfeed_comment
+        └── [community Q&A — v2]
 ```
 
 ---
 
 ## Access Control Logic
 
-Two middleware functions are needed in `apps/api/src/middleware/`:
+Two middleware functions in `apps/api/src/middleware/`:
 
 ### `programAccessMiddleware` (read access)
 
-Verifies the caller is either an org admin or a `program_member` for the given `:programId`. Used on all `GET /program/:programId/*` routes.
+Used on all `GET /program/:programId/*` routes.
 
 ```typescript
 // apps/api/src/middleware/program-access.ts
@@ -488,7 +717,7 @@ export async function programAccessMiddleware(c, next) {
 
 ### `programAdminMiddleware` (write access)
 
-Verifies the caller has `roleId` 1 (ADMIN) or 2 (TUTOR) within the program, or is an org admin. Used on all mutating routes.
+Used on all mutating routes.
 
 ```typescript
 // apps/api/src/middleware/program-admin.ts
@@ -530,7 +759,6 @@ export type TUpdateProgram = z.infer<typeof ZUpdateProgram>;
 
 export const ZAddCourseToProgram = z.object({
   courseId: z.string().uuid(),
-  order: z.number().int().min(0).optional()
 });
 export type TAddCourseToProgram = z.infer<typeof ZAddCourseToProgram>;
 
@@ -549,25 +777,32 @@ export const ZUpdateProgramMember = z.object({
 });
 export type TUpdateProgramMember = z.infer<typeof ZUpdateProgramMember>;
 
-export const ZCreateProgramAnnouncement = z.object({
-  title: z.string().min(1).max(500),
-  body: z.string().max(10000).optional()
+export const ZCreateProgramNewsfeed = z.object({
+  content: z.string().min(1),
+  isPinned: z.boolean().optional()
 });
-export type TCreateProgramAnnouncement = z.infer<typeof ZCreateProgramAnnouncement>;
+export type TCreateProgramNewsfeed = z.infer<typeof ZCreateProgramNewsfeed>;
 
-export const ZUpdateProgramAnnouncement = z.object({
-  title: z.string().min(1).max(500).optional(),
-  body: z.string().max(10000).nullable().optional()
+export const ZUpdateProgramNewsfeed = z.object({
+  content: z.string().min(1).optional(),
+  isPinned: z.boolean().optional()
 });
-export type TUpdateProgramAnnouncement = z.infer<typeof ZUpdateProgramAnnouncement>;
+export type TUpdateProgramNewsfeed = z.infer<typeof ZUpdateProgramNewsfeed>;
 
-export const ZAddProgramFile = z.object({
-  name: z.string().min(1).max(255),
-  url: z.string().url(),
-  mimeType: z.string().optional(),
-  size: z.number().int().positive().optional()
+export const ZUpdateProgramReaction = z.object({
+  reaction: z.object({
+    clap: z.array(z.string()),
+    smile: z.array(z.string()),
+    thumbsup: z.array(z.string()),
+    thumbsdown: z.array(z.string())
+  })
 });
-export type TAddProgramFile = z.infer<typeof ZAddProgramFile>;
+export type TUpdateProgramReaction = z.infer<typeof ZUpdateProgramReaction>;
+
+export const ZCreateProgramNewsfeedComment = z.object({
+  content: z.string().min(1)
+});
+export type TCreateProgramNewsfeedComment = z.infer<typeof ZCreateProgramNewsfeedComment>;
 ```
 
 Export from: `packages/utils/src/validation/program/index.ts` and re-export from `packages/utils/src/validation/index.ts`.
@@ -589,17 +824,18 @@ File: `packages/db/src/queries/program/program.ts`
 | `removeProgramMember(programId, memberId)` | Delete `program_member` by `id` |
 | `getProgramMembers(programId)` | All members joined to `profile` for display |
 | `getEnrolledProgramsByProfile(orgId, profileId)` | All `ACTIVE` programs where profile is a program member, for LMS |
-| `addCourseToProgram(programId, courseId, order)` | Insert `program_course` row |
+| `addCourseToProgram(programId, courseId)` | Insert `program_course` row |
 | `removeCourseFromProgram(programId, courseId)` | Delete `program_course` row |
-| `getCoursesByProgram(programId)` | All courses in program ordered by `order`, joined to `course` |
+| `getCoursesByProgram(programId)` | All courses in program ordered by `addedAt` asc, joined to `course` |
 | `getStudentMemberIdsByProgram(programId)` | All `profileId` values with `roleId = 3` in program (for auto-enrollment) |
-| `createProgramAnnouncement(data)` | Insert `program_announcement` |
-| `getProgramAnnouncements(programId)` | All announcements ordered by `createdAt` desc, joined to `profile` |
-| `updateProgramAnnouncement(announcementId, data)` | Update title/body |
-| `deleteProgramAnnouncement(announcementId)` | Delete row |
-| `addProgramFile(data)` | Insert `program_file` |
-| `getProgramFiles(programId)` | All files ordered by `createdAt` desc |
-| `deleteProgramFile(fileId)` | Delete `program_file` by `id` |
+| `createProgramNewsfeed(data)` | Insert `program_newsfeed` |
+| `getProgramNewsfeed(programId)` | All posts ordered by `isPinned desc, createdAt desc`, joined to `program_member` + `profile` |
+| `updateProgramNewsfeed(feedId, data)` | Update content / isPinned |
+| `updateProgramNewsfeedReaction(feedId, reaction)` | Update reaction JSONB |
+| `deleteProgramNewsfeed(feedId)` | Delete row |
+| `createProgramNewsfeedComment(data)` | Insert `program_newsfeed_comment` |
+| `getProgramNewsfeedComments(feedId)` | All comments for a post, joined to `program_member` + `profile` |
+| `deleteProgramNewsfeedComment(commentId)` | Delete row |
 
 Export from: `packages/db/src/queries/program/index.ts`
 
@@ -608,81 +844,75 @@ Export from: `packages/db/src/queries/program/index.ts`
 File: `apps/api/src/services/program/program.ts`
 
 #### `createProgram(orgId, profileId, data: TCreateProgram)`
-
 - Insert `program` row.
 - Add creator as `program_member` with `roleId = 1` (ADMIN).
 - Return the new program.
 
 #### `addCourseToProgram(programId, courseId)`
-
 - Verify program exists and course belongs to the same org.
 - Insert `program_course` row (error if already linked).
 - Fetch all current STUDENT program members (`getStudentMemberIdsByProgram`).
-- For each student profile, look up their `groupmember` status in the course's group; if not already enrolled, call `enrollInCourse` (or insert `groupmember` directly if the course is free and no invite is needed).
+- For each student profile, check `groupmember` status in the course's group; if not already enrolled, call `enrollInCourse`.
 - All writes in a single transaction.
-- Return updated course list for the program.
-
-#### `removeCourseFromProgram(programId, courseId)`
-
-- Delete `program_course` row.
-- No changes to `groupmember` records.
 - Return updated course list.
 
-#### `addMembersToProgram(programId, members: TAddProgramMembers['members'])`
+#### `removeCourseFromProgram(programId, courseId)`
+- Delete `program_course` row.
+- No changes to `groupmember` records.
 
+#### `addMembersToProgram(programId, members: TAddProgramMembers['members'])`
 Transaction:
-1. For each member in the batch, resolve `profileId` from `email` (look up `profile` by email, create if none exists as an invited-but-unregistered user following the same pattern as `addGroupMember`).
-2. Insert `program_member` row (skip if already a member of the program).
-3. If `roleId = 3` (STUDENT), fetch all courses in the program (`getCoursesByProgram`). For each course, check if the student is already a `groupmember`; if not, insert a `groupmember` row with `roleId = 3`.
+1. For each member, resolve `profileId` from `email` (same pattern as `addGroupMember`).
+2. Insert `program_member` row (skip if already a member).
+3. If `roleId = 3` (STUDENT), fetch all courses (`getCoursesByProgram`). For each course, check if the student is already a `groupmember`; if not, insert a `groupmember` row with `roleId = 3`.
 
 #### `removeMemberFromProgram(programId, memberId)`
-
 - Delete `program_member` row by `id`.
 - Leave all `groupmember` rows in individual courses intact.
 
-#### `createAnnouncement(programId, profileId, data: TCreateProgramAnnouncement)`
+#### `createNewsfeedPost(programId, profileId, data: TCreateProgramNewsfeed)`
+- Sanitize HTML content (same sanitization used in `course_newsfeed`).
+- Resolve `program_member` row for caller to get `authorId`.
+- Insert `program_newsfeed` row.
+- Return new post.
 
-- Verify caller is program admin or tutor.
-- Insert `program_announcement` row.
-- Return new announcement.
+#### `updateNewsfeedReaction(feedId, reaction: TUpdateProgramReaction['reaction'])`
+- Update the `reaction` JSONB column directly (same pattern as `updateNewsfeedReactionService`).
 
-#### `addFile(programId, profileId, data: TAddProgramFile)`
-
-- Insert `program_file` row.
-- Return new file record.
-
-#### `deleteFile(fileId, profileId)`
-
-- Verify caller is program admin or tutor.
-- Delete `program_file` row.
+#### `createNewsfeedComment(feedId, profileId, data: TCreateProgramNewsfeedComment)`
+- Sanitize content.
+- Resolve `program_member` row for caller.
+- Insert `program_newsfeed_comment` row.
+- Return new comment.
 
 ### Route Layer
 
 File: `apps/api/src/routes/program/program.ts`
 
-All routes require `authMiddleware`. Routes scoped to a `:programId` also apply `programAccessMiddleware` (read) or `programAdminMiddleware` (write) as noted.
+All routes require `authMiddleware`. Routes scoped to `:programId` also apply `programAccessMiddleware` (read) or `programAdminMiddleware` (write).
 
 | Method | Path | Middleware | Description |
 | --- | --- | --- | --- |
-| `GET` | `/program` | `authMiddleware` | List org's programs (org admin sees all; tutors/students see their own) |
+| `GET` | `/program` | `authMiddleware` | List org's programs |
 | `POST` | `/program` | `authMiddleware` + orgAdmin | Create program |
-| `GET` | `/program/:programId` | `programAccessMiddleware` | Get program with member/course counts |
-| `PUT` | `/program/:programId` | `programAdminMiddleware` | Update program name, description, cover, status |
-| `DELETE` | `/program/:programId` | orgAdmin | Archive program (`status = 'ARCHIVED'`) |
-| `GET` | `/program/:programId/courses` | `programAccessMiddleware` | List courses in program (ordered) |
-| `POST` | `/program/:programId/courses` | `programAdminMiddleware` | Add course to program + auto-enroll students |
-| `DELETE` | `/program/:programId/courses/:courseId` | `programAdminMiddleware` | Remove course from program |
-| `GET` | `/program/:programId/members` | `programAdminMiddleware` | List program members with profile info |
+| `GET` | `/program/:programId` | `programAccessMiddleware` | Get program detail |
+| `PUT` | `/program/:programId` | `programAdminMiddleware` | Update program |
+| `DELETE` | `/program/:programId` | orgAdmin | Archive program |
+| `GET` | `/program/:programId/courses` | `programAccessMiddleware` | List courses in program |
+| `POST` | `/program/:programId/courses` | `programAdminMiddleware` | Add course + auto-enroll students |
+| `DELETE` | `/program/:programId/courses/:courseId` | `programAdminMiddleware` | Remove course |
+| `GET` | `/program/:programId/members` | `programAdminMiddleware` | List members with profile info |
 | `POST` | `/program/:programId/members` | `programAdminMiddleware` | Batch-add members + auto-enroll students |
 | `PUT` | `/program/:programId/members/:memberId` | `programAdminMiddleware` | Update member role |
-| `DELETE` | `/program/:programId/members/:memberId` | `programAdminMiddleware` | Remove member from program |
-| `GET` | `/program/:programId/announcements` | `programAccessMiddleware` | List announcements |
-| `POST` | `/program/:programId/announcements` | `programAdminMiddleware` | Create announcement |
-| `PUT` | `/program/:programId/announcements/:announcementId` | `programAdminMiddleware` | Update announcement |
-| `DELETE` | `/program/:programId/announcements/:announcementId` | `programAdminMiddleware` | Delete announcement |
-| `GET` | `/program/:programId/files` | `programAccessMiddleware` | List files |
-| `POST` | `/program/:programId/files` | `programAdminMiddleware` | Add file record |
-| `DELETE` | `/program/:programId/files/:fileId` | `programAdminMiddleware` | Delete file |
+| `DELETE` | `/program/:programId/members/:memberId` | `programAdminMiddleware` | Remove member |
+| `GET` | `/program/:programId/newsfeed` | `programAccessMiddleware` | List newsfeed posts |
+| `POST` | `/program/:programId/newsfeed` | `programAdminMiddleware` | Create post |
+| `PUT` | `/program/:programId/newsfeed/:feedId` | `programAdminMiddleware` | Update post |
+| `PATCH` | `/program/:programId/newsfeed/:feedId/reaction` | `programAccessMiddleware` | Update reaction |
+| `DELETE` | `/program/:programId/newsfeed/:feedId` | `programAdminMiddleware` | Delete post |
+| `GET` | `/program/:programId/newsfeed/:feedId/comments` | `programAccessMiddleware` | List comments |
+| `POST` | `/program/:programId/newsfeed/:feedId/comments` | `programAccessMiddleware` | Create comment |
+| `DELETE` | `/program/:programId/newsfeed/:feedId/comments/:commentId` | `programAccessMiddleware` | Delete comment |
 
 #### Route Registration
 
@@ -691,10 +921,10 @@ All routes require `authMiddleware`. Routes scoped to a `:programId` also apply
 export * from './program';
 
 // apps/api/src/app.ts
-import { classRouter } from '@api/routes/program';
+import { programRouter } from '@api/routes/program';
 export const app = new Hono()
   // ... existing routes ...
-  .route('/program', classRouter);
+  .route('/program', programRouter);
 ```
 
 #### LMS Enrolled Programs Route
@@ -705,7 +935,7 @@ Add to `apps/api/src/routes/organization/organization.ts`:
 GET /organization/programs/enrolled
 ```
 
-Returns all `ACTIVE` programs where the current user is a STUDENT `program_member`, including the course list with per-course progress. Used by the LMS "My Programs" and "Program Hub" pages.
+Returns all `ACTIVE` programs where the current user is a program member, including the course list with per-course progress. Used by LMS "My Programs" pages.
 
 #### Build Verification
 
@@ -719,6 +949,14 @@ pnpm --filter @cio/api build
 
 ## Frontend Plan (Dashboard)
 
+### Follow AGENTS.md patterns strictly
+
+- All types in `utils/types.ts`, inferred from the API. Never define types in `.svelte.ts` files.
+- API logic in API classes only — components stay thin.
+- All UI copy in translation keys (`en.json`), referenced with `$t()` / `t()`.
+- Use `@cio/ui/custom/*-field` wrappers for forms; compose with `@cio/ui/base/field` primitives for settings/editor screens.
+- Theme color classes prefixed with `ui:` (e.g., `ui:text-muted-foreground`).
+
 ### Request Types
 
 File: `apps/dashboard/src/lib/features/program/utils/types.ts`
@@ -726,23 +964,22 @@ File: `apps/dashboard/src/lib/features/program/utils/types.ts`
 ```typescript
 import { classroomio, type InferResponseType } from '$lib/utils/services/api';
 
-export type ListClassesRequest = typeof classroomio.program.$get;
-export type CreateClassRequest = typeof classroomio.program.$post;
-export type GetClassRequest = typeof classroomio.program[':programId']['$get'];
-export type UpdateClassRequest = typeof classroomio.program[':programId']['$put'];
-export type ListProgramCoursesRequest = typeof classroomio.program[':programId']['courses']['$get'];
-export type AddCourseToClassRequest = typeof classroomio.program[':programId']['courses']['$post'];
-export type ListProgramMembersRequest = typeof classroomio.program[':programId']['members']['$get'];
-export type AddProgramMembersRequest = typeof classroomio.program[':programId']['members']['$post'];
-export type ListAnnouncementsRequest = typeof classroomio.program[':programId']['announcements']['$get'];
-export type CreateAnnouncementRequest = typeof classroomio.program[':programId']['announcements']['$post'];
-export type ListProgramFilesRequest = typeof classroomio.program[':programId']['files']['$get'];
+export type ListProgramsRequest = typeof classroomio.program.$get;
+export type CreateProgramRequest = typeof classroomio.program.$post;
+export type GetProgramRequest = (typeof classroomio.program)[':programId']['$get'];
+export type UpdateProgramRequest = (typeof classroomio.program)[':programId']['$put'];
+export type ListProgramCoursesRequest = (typeof classroomio.program)[':programId']['courses']['$get'];
+export type AddCourseToProgramRequest = (typeof classroomio.program)[':programId']['courses']['$post'];
+export type ListProgramMembersRequest = (typeof classroomio.program)[':programId']['members']['$get'];
+export type AddProgramMembersRequest = (typeof classroomio.program)[':programId']['members']['$post'];
+export type ListProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed']['$get'];
+export type CreateProgramNewsfeedRequest = (typeof classroomio.program)[':programId']['newsfeed']['$post'];
 
-export type ListClassesSuccess = Extract<InferResponseType<ListClassesRequest>, { success: true }>;
-export type ProgramItem = ListClassesSuccess['data'][number];
+export type ListProgramsSuccess = Extract<InferResponseType<ListProgramsRequest>, { success: true }>;
+export type ProgramItem = ListProgramsSuccess['data'][number];
 
-export type GetClassSuccess = Extract<InferResponseType<GetClassRequest>, { success: true }>;
-export type ProgramDetail = GetClassSuccess['data'];
+export type GetProgramSuccess = Extract<InferResponseType<GetProgramRequest>, { success: true }>;
+export type ProgramDetail = GetProgramSuccess['data'];
 
 export type ListProgramCoursesSuccess = Extract<InferResponseType<ListProgramCoursesRequest>, { success: true }>;
 export type ProgramCourse = ListProgramCoursesSuccess['data'][number];
@@ -750,30 +987,25 @@ export type ProgramCourse = ListProgramCoursesSuccess['data'][number];
 export type ListProgramMembersSuccess = Extract<InferResponseType<ListProgramMembersRequest>, { success: true }>;
 export type ProgramMember = ListProgramMembersSuccess['data'][number];
 
-export type ListAnnouncementsSuccess = Extract<InferResponseType<ListAnnouncementsRequest>, { success: true }>;
-export type ProgramAnnouncement = ListAnnouncementsSuccess['data'][number];
+export type ListProgramNewsfeedSuccess = Extract<InferResponseType<ListProgramNewsfeedRequest>, { success: true }>;
+export type ProgramNewsfeedPost = ListProgramNewsfeedSuccess['data'][number];
 
-export type ListProgramFilesSuccess = Extract<InferResponseType<ListProgramFilesRequest>, { success: true }>;
-export type ProgramFile = ListProgramFilesSuccess['data'][number];
-
-// LMS enrolled programs
-export type EnrolledClassesRequest = typeof classroomio.organization.programs.enrolled['$get'];
-export type EnrolledClassesSuccess = Extract<InferResponseType<EnrolledClassesRequest>, { success: true }>;
-export type EnrolledClass = EnrolledClassesSuccess['data'][number];
+export type EnrolledProgramsRequest = typeof classroomio.organization.programs.enrolled['$get'];
+export type EnrolledProgramsSuccess = Extract<InferResponseType<EnrolledProgramsRequest>, { success: true }>;
+export type EnrolledProgram = EnrolledProgramsSuccess['data'][number];
 ```
 
-### API Program
+### API Class
 
 File: `apps/dashboard/src/lib/features/program/api/program.svelte.ts`
 
 ```typescript
-program ProgramApi extends BaseApiWithErrors {
+class ProgramApi extends BaseApiWithErrors {
   programs = $state<ProgramItem[]>([]);
-  currentClass = $state<ProgramDetail | null>(null);
+  currentProgram = $state<ProgramDetail | null>(null);
   courses = $state<ProgramCourse[]>([]);
   members = $state<ProgramMember[]>([]);
-  announcements = $state<ProgramAnnouncement[]>([]);
-  files = $state<ProgramFile[]>([]);
+  newsfeed = $state<ProgramNewsfeedPost[]>([]);
   loading = $state(false);
 
   async list() { /* GET /program */ }
@@ -783,32 +1015,108 @@ program ProgramApi extends BaseApiWithErrors {
   async archive(programId: string) { /* DELETE /program/:programId */ }
 
   async listCourses(programId: string) { /* GET /program/:programId/courses */ }
-  async addCourse(programId: string, data: TAddCourseToProgram) { /* POST /program/:programId/courses */ }
-  async removeCourse(programId: string, courseId: string) { /* DELETE /program/:programId/courses/:courseId */ }
+  async addCourse(programId: string, data: TAddCourseToProgram) { /* POST */ }
+  async removeCourse(programId: string, courseId: string) { /* DELETE */ }
 
   async listMembers(programId: string) { /* GET /program/:programId/members */ }
-  async addMembers(programId: string, data: TAddProgramMembers) { /* POST /program/:programId/members */ }
-  async removeMember(programId: string, memberId: string) { /* DELETE /program/:programId/members/:memberId */ }
+  async addMembers(programId: string, data: TAddProgramMembers) { /* POST */ }
+  async removeMember(programId: string, memberId: string) { /* DELETE */ }
+  async updateMemberRole(programId: string, memberId: string, data: TUpdateProgramMember) { /* PUT */ }
 
-  async listAnnouncements(programId: string) { /* GET /program/:programId/announcements */ }
-  async createAnnouncement(programId: string, data: TCreateProgramAnnouncement) { /* POST */ }
-  async deleteAnnouncement(programId: string, announcementId: string) { /* DELETE */ }
-
-  async listFiles(programId: string) { /* GET /program/:programId/files */ }
-  async addFile(programId: string, data: TAddProgramFile) { /* POST /program/:programId/files */ }
-  async deleteFile(programId: string, fileId: string) { /* DELETE /program/:programId/files/:fileId */ }
+  async listNewsfeed(programId: string) { /* GET /program/:programId/newsfeed */ }
+  async createPost(programId: string, data: TCreateProgramNewsfeed) { /* POST */ }
+  async updatePost(programId: string, feedId: string, data: TUpdateProgramNewsfeed) { /* PUT */ }
+  async updateReaction(programId: string, feedId: string, data: TUpdateProgramReaction) { /* PATCH */ }
+  async deletePost(programId: string, feedId: string) { /* DELETE */ }
+  async listComments(programId: string, feedId: string) { /* GET */ }
+  async createComment(programId: string, feedId: string, data: TCreateProgramNewsfeedComment) { /* POST */ }
+  async deleteComment(programId: string, feedId: string, commentId: string) { /* DELETE */ }
 }
 
 export const programApi = new ProgramApi();
 ```
 
-### LMS API Program
+### Org Slug Integration
+
+**Nav item** — add to `apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts` directly after "Courses":
+
+```typescript
+{
+  title: t.get('program.title'),
+  path: `/org/${slug}/programs`,
+  icon: LayoutGrid,
+  matchPattern: /\/org\/[^/]+\/programs/
+}
+```
+
+**Listing page**: `apps/dashboard/src/routes/org/[slug]/programs/+page.svelte`
+- Mirrors `apps/dashboard/src/routes/org/[slug]/courses/+page.svelte` exactly in structure.
+- Calls `programApi.list()` on mount.
+- Grid/list of `ProgramItem` cards: name, cover image, course count, member count, status badge.
+- "Create Program" button → creation form/modal.
+- Clicking a card navigates to `/programs/[id]`.
+
+### Program Detail — Route Structure
+
+```
+apps/dashboard/src/routes/programs/
+└── [id]/
+    ├── +layout.svelte        ← Sidebar.Provider + ProgramSidebar + ProgramHeader
+    ├── +layout.server.ts     ← auth check, load programId
+    ├── +page.svelte          ← redirect to ./newsfeed
+    ├── newsfeed/
+    │   └── +page.svelte
+    ├── courses/
+    │   └── +page.svelte
+    ├── people/
+    │   └── +page.svelte
+    └── settings/
+        └── +page.svelte
+```
+
+**`+layout.svelte`** mirrors `courses/[id]/+layout.svelte`:
+
+```svelte
+<Sidebar.Provider>
+  <ProgramSidebar {programId} {path} />
+  <Sidebar.Inset>
+    <ProgramHeader />
+    <slot />
+  </Sidebar.Inset>
+</Sidebar.Provider>
+```
+
+### ProgramSidebar Component
+
+File: `apps/dashboard/src/lib/features/program/components/sidebar/program-sidebar-navigation.svelte`
+
+Mirrors `course-sidebar-navigation.svelte` using the same `Sidebar.Group` / `Sidebar.Menu` / `Sidebar.MenuItem` primitives:
+
+| # | Label key | Icon | Path | Visible to |
+| --- | --- | --- | --- | --- |
+| 1 | `program.newsfeed` | `Newspaper` | `/programs/[id]/newsfeed` | All members |
+| 2 | `program.courses` | `BookOpen` | `/programs/[id]/courses` | All members |
+| 3 | `program.people` | `Users` | `/programs/[id]/people` | Admin + Tutor only |
+| 4 | `program.settings` | `Settings` | `/programs/[id]/settings` | Admin only |
+
+### Feature Pages
+
+All page components live in `apps/dashboard/src/lib/features/program/pages/`. SvelteKit route files are thin wrappers that import and render the feature page component.
+
+| Page | Feature file | Key UI elements |
+| --- | --- | --- |
+| Newsfeed | `newsfeed.svelte` | Post feed (pinned first), "New Post" editor (admin/tutor), reaction bar, comment threads |
+| Courses | `courses.svelte` | Course list (insertion order), "Add Course" dropdown, remove per course (admin/tutor) |
+| People | `people.svelte` | Member table with search + role filter, "Add Members" modal, role change + remove per row |
+| Settings | `settings.svelte` | Name/description/cover image form, status select, save button |
+
+### LMS API Class
 
 File: `apps/dashboard/src/lib/features/lms/api/program.svelte.ts`
 
 ```typescript
-program LmsProgramApi extends BaseApiWithErrors {
-  enrolledClasses = $state<EnrolledClass[]>([]);
+class LmsProgramApi extends BaseApiWithErrors {
+  enrolledPrograms = $state<EnrolledProgram[]>([]);
   loading = $state(false);
 
   async listEnrolled() { /* GET /organization/programs/enrolled */ }
@@ -817,53 +1125,31 @@ program LmsProgramApi extends BaseApiWithErrors {
 export const lmsProgramApi = new LmsProgramApi();
 ```
 
-### Admin Pages
-
-| Route | File | Purpose |
-| --- | --- | --- |
-| `/courses/programs` | `apps/dashboard/src/routes/courses/programs/+page.svelte` | List all org programs |
-| `/courses/programs/new` | `apps/dashboard/src/routes/courses/programs/new/+page.svelte` | Create program form |
-| `/courses/programs/[programId]` | `apps/dashboard/src/routes/courses/programs/[programId]/+page.svelte` | Program overview |
-| `/courses/programs/[programId]/courses` | `.../courses/+page.svelte` | Manage courses |
-| `/courses/programs/[programId]/people` | `.../people/+page.svelte` | Manage members |
-| `/courses/programs/[programId]/announcements` | `.../announcements/+page.svelte` | Manage announcements |
-| `/courses/programs/[programId]/files` | `.../files/+page.svelte` | File library management |
-
-Feature pages live in: `apps/dashboard/src/lib/features/program/pages/`
-
 ### LMS Pages
 
-| Route | File | Purpose |
-| --- | --- | --- |
-| `/lms/programs` | `apps/dashboard/src/routes/lms/programs/+page.svelte` | My enrolled programs |
-| `/lms/programs/[programId]` | `apps/dashboard/src/routes/lms/programs/[programId]/+page.svelte` | Program hub (courses + announcements + files) |
-| `/lms/programs/[programId]/community` | `.../community/+page.svelte` | Program community Q&A |
+| Route | Purpose |
+| --- | --- |
+| `apps/dashboard/src/routes/lms/programs/+page.svelte` | My enrolled programs list |
+| `apps/dashboard/src/routes/lms/programs/[programId]/+page.svelte` | Program hub: Courses tab + Newsfeed tab |
 
-Feature pages live in: `apps/dashboard/src/lib/features/lms/pages/program/`
+Feature pages: `apps/dashboard/src/lib/features/lms/pages/program/`
 
 ### Navigation Updates
 
-**Org admin sidebar** (`apps/dashboard/src/lib/features/org/`):
-- Add "Programs" nav item at the same level as "Courses", linking to `/courses/programs`.
-- Use a suitable icon (e.g., a group/layers icon).
-
-**LMS sidebar** (`apps/dashboard/src/lib/features/lms/`):
-- Add "Programs" nav item (shown conditionally: only when `enrolledClasses.length > 0`).
-- Position between "My Learning" and "Exercises".
+- **Org admin sidebar**: add "Programs" to `org-navigation.ts` directly after "Courses".
+- **LMS sidebar**: add "Programs" nav item, shown only when `enrolledPrograms.length > 0`, positioned between "My Learning" and "Exercises".
 
 ### Translations
 
-File: `apps/dashboard/src/lib/utils/translations/en.json`
-
-Add keys under `program`:
+File: `apps/dashboard/src/lib/utils/translations/en.json` — add under `"program"`:
 
 ```json
 {
   "program": {
     "title": "Programs",
-    "my_classes": "My Programs",
+    "my_programs": "My Programs",
     "create": "Create Program",
-    "create_description": "Group multiple courses and materials under one program for your students.",
+    "create_description": "Group multiple courses under one program for your learners.",
     "name": "Program Name",
     "description": "Description",
     "cover_image": "Cover Image",
@@ -871,26 +1157,22 @@ Add keys under `program`:
     "active": "Active",
     "inactive": "Inactive",
     "archived": "Archived",
+    "newsfeed": "Newsfeed",
     "courses": "Courses",
     "people": "People",
-    "announcements": "Announcements",
-    "files": "Files",
-    "community": "Community",
+    "settings": "Settings",
     "add_course": "Add Course",
     "remove_course": "Remove Course",
     "add_members": "Add Members",
     "remove_member": "Remove Member",
     "course_count": "{count} courses",
     "student_count": "{count} students",
-    "new_announcement": "New Announcement",
-    "announcement_title": "Announcement Title",
-    "announcement_body": "Write your announcement...",
-    "upload_file": "Upload File",
-    "no_classes": "No programs yet. Create one to get started.",
+    "new_post": "New Post",
+    "write_post": "Write an announcement...",
+    "no_programs": "No programs yet. Create one to get started.",
     "no_courses": "No courses in this program yet.",
     "no_members": "No members yet. Add students or tutors.",
-    "no_announcements": "No announcements yet.",
-    "no_files": "No files uploaded yet.",
+    "no_posts": "No posts yet.",
     "archive_confirm": "Archiving this program will hide it from all views. Are you sure?",
     "auto_enroll_note": "Adding this course will enroll all current program students in it.",
     "remove_course_note": "Removing this course will not unenroll any students.",
@@ -899,95 +1181,87 @@ Add keys under `program`:
 }
 ```
 
-### Frontend Build Verification
-
-```bash
-pnpm --filter @cio/dashboard build
-```
-
 ---
 
 ## Implementation Order
 
 ### Phase 1: Database + Schema
-
 1. Add `programStatus` enum to `packages/db/src/schema.ts`.
-2. Add `lmsProgram`, `programCourse`, `programMember`, `programAnnouncement`, `programFile` tables to schema.
-3. Add `programId` FK column to `communityQuestion` table in schema.
-4. Write and apply migration SQL: `packages/db/src/migrations/XXXX_add_programs.sql`.
-5. Run `pnpm --filter @cio/db build`.
+2. Add `program`, `programCourse`, `programMember`, `programNewsfeed`, `programNewsfeedComment` tables to `packages/db/src/schema.ts`.
+3. Run `pnpm --filter @cio/db build`.
 
 ### Phase 2: Validation + Queries
-
 1. Create `packages/utils/src/validation/program/program.ts` with all Zod schemas.
-2. Export from `packages/utils/src/validation/program/index.ts` and re-export from `packages/utils/src/validation/index.ts`.
+2. Export from `packages/utils/src/validation/program/index.ts`; re-export from `packages/utils/src/validation/index.ts`.
 3. Run `pnpm --filter @cio/utils build`.
-4. Create `packages/db/src/queries/program/program.ts` with all query functions.
-5. Create `packages/db/src/queries/program/index.ts` and export.
+4. Create `packages/db/src/queries/program/program.ts`.
+5. Create `packages/db/src/queries/program/index.ts`.
 6. Run `pnpm --filter @cio/db build`.
 
 ### Phase 3: Service + Routes
-
-1. Create `apps/api/src/services/program/program.ts` with all service functions (auto-enrollment transactions are the most complex part).
-2. Create access control utilities: `apps/api/src/middleware/program-access.ts` and `apps/api/src/middleware/program-admin.ts`.
-3. Add new error codes to `apps/api/src/utils/errors.ts`: `PROGRAM_NOT_FOUND`, `PROGRAM_FORBIDDEN`, `COURSE_ALREADY_IN_PROGRAM`, `MEMBER_ALREADY_IN_PROGRAM`.
-4. Create `apps/api/src/routes/program/program.ts` with all route handlers.
-5. Create `apps/api/src/routes/program/index.ts` and register in `apps/api/src/app.ts`.
+1. Create `apps/api/src/services/program/program.ts` (mirror newsfeed service for newsfeed functions; auto-enrollment transaction is most complex).
+2. Create `apps/api/src/middleware/program-access.ts` and `apps/api/src/middleware/program-admin.ts`.
+3. Add error codes to `apps/api/src/utils/errors.ts`: `PROGRAM_NOT_FOUND`, `PROGRAM_FORBIDDEN`, `COURSE_ALREADY_IN_PROGRAM`, `MEMBER_ALREADY_IN_PROGRAM`.
+4. Create `apps/api/src/routes/program/program.ts`.
+5. Create `apps/api/src/routes/program/index.ts`; register in `apps/api/src/app.ts`.
 6. Add `GET /organization/programs/enrolled` to the organization router.
 7. Run `pnpm --filter @cio/api build`.
 
-### Phase 4: Admin Frontend
+### Phase 4: Org Listing Page
+1. Add "Programs" nav item to `apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts`.
+2. Add translation keys to `en.json`.
+3. Create `apps/dashboard/src/routes/org/[slug]/programs/+page.svelte`.
+4. Run `pnpm --filter @cio/dashboard build`.
 
+### Phase 5: Program Detail (Admin)
 1. Add request/response types to `apps/dashboard/src/lib/features/program/utils/types.ts`.
-2. Create `apps/dashboard/src/lib/features/program/api/program.svelte.ts` API program.
-3. Add translation keys to `en.json`.
-4. Create admin feature pages under `apps/dashboard/src/lib/features/program/pages/`.
-5. Create SvelteKit route files under `apps/dashboard/src/routes/courses/programs/`.
-6. Add "Programs" nav item to the org admin sidebar.
+2. Create `apps/dashboard/src/lib/features/program/api/program.svelte.ts`.
+3. Create `apps/dashboard/src/routes/programs/[id]/+layout.svelte` and `+layout.server.ts`.
+4. Create `ProgramSidebar` and `ProgramHeader` components.
+5. Create feature pages: `newsfeed.svelte`, `courses.svelte`, `people.svelte`, `settings.svelte`.
+6. Create SvelteKit route files under `apps/dashboard/src/routes/programs/[id]/`.
 7. Run `pnpm --filter @cio/dashboard build`.
 
-### Phase 5: LMS Frontend
-
+### Phase 6: LMS
 1. Create `apps/dashboard/src/lib/features/lms/api/program.svelte.ts`.
 2. Create LMS feature pages under `apps/dashboard/src/lib/features/lms/pages/program/`.
 3. Create SvelteKit route files under `apps/dashboard/src/routes/lms/programs/`.
-4. Add "Programs" nav item to the LMS sidebar (conditional on having enrolled programs).
+4. Add "Programs" nav item to the LMS sidebar.
 5. Run `pnpm --filter @cio/dashboard build`.
 
 ---
 
 ## Acceptance Criteria
 
-1. Org admin can create a program, add courses to it, and add students — all from the admin dashboard.
+1. Org admin can create a program, add courses to it, and add students from the admin dashboard.
 2. When a student is added to a program, `groupmember` rows are automatically created for every course in the program.
 3. When a course is added to an existing program that already has students, all those students are enrolled in the new course.
 4. Removing a student from a program does not remove their `groupmember` records in individual courses.
 5. Removing a course from a program does not unenroll any students.
-6. Students see a "Programs" section in the LMS sidebar (only when enrolled in at least one program).
-7. The program hub page shows all courses with per-course progress bars, the announcements feed, and the file library.
-8. Program admins and tutors can post announcements and upload files; students can only view them.
-9. Program community Q&A is scoped to the program and does not appear on course community boards.
-10. `INACTIVE` programs are hidden from the student LMS but remain fully accessible to admins and tutors.
-11. `ARCHIVED` programs are hidden from all views.
-12. Courses that are not in any program, and courses whose students were enrolled independently, continue to work exactly as they do today (zero regression on existing `groupmember` and course data).
-13. All user-facing strings use translation keys (no hardcoded English).
-14. `pnpm --filter @cio/api build` and `pnpm --filter @cio/dashboard build` pass after implementation.
+6. Program admins and tutors can create newsfeed posts; all members can react and comment; students cannot create top-level posts.
+7. Pinned posts appear at the top of the newsfeed.
+8. The People page shows all program members with search and role filter; only admins and tutors can see it.
+9. Settings page lets admins update name, description, cover image, and status.
+10. "Programs" nav item appears in the org admin sidebar under `/org/[slug]/programs`.
+11. Students see a "Programs" section in the LMS sidebar only when enrolled in at least one program.
+12. `INACTIVE` programs are hidden from the student LMS but accessible to admins and tutors.
+13. `ARCHIVED` programs are hidden from all views.
+14. Courses outside any program, and students enrolled independently, continue to work exactly as today (zero regression).
+15. All user-facing strings use translation keys.
+16. `pnpm --filter @cio/api build` and `pnpm --filter @cio/dashboard build` pass after implementation.
 
 ---
 
 ## Risks and Mitigations
 
-- **Risk**: Auto-enrollment transaction for large programs (hundreds of students, tens of courses) times out or partially fails.
-  - **Mitigation**: Process auto-enrollment in the service layer using a single transaction with batch inserts (insert multiple `groupmember` rows in one query using Drizzle's batch insert). For very large programs (> 500 students), offload to a background job via the existing email job queue or a new async task runner, and return a `202 Accepted` with a polling endpoint.
+- **Risk**: Auto-enrollment transaction for large programs (hundreds of students, many courses) times out or partially fails.
+  - **Mitigation**: Use a single transaction with Drizzle batch inserts. For very large programs (> 500 students), offload to a background job and return `202 Accepted` with a polling endpoint.
 
-- **Risk**: A student is already enrolled in a course independently before being added to a program. Duplicate `groupmember` rows violate the `(groupId, profileId)` unique constraint.
-  - **Mitigation**: The enrollment logic in `addMembersToProgram` must check for existing membership before inserting. Use `INSERT ... ON CONFLICT DO NOTHING` or check with `isUserCourseMember` before inserting. This is already idempotent in the existing enrollment service.
+- **Risk**: A student already enrolled in a course independently causes duplicate `groupmember` rows (unique constraint on `(groupId, profileId)`).
+  - **Mitigation**: Use `INSERT ... ON CONFLICT DO NOTHING` in `addMembersToProgram`. Same idempotency guarantee as the existing enrollment service.
 
-- **Risk**: The `community_question.programId` column causes existing community queries to break if they don't filter by `programId IS NULL` for course-scoped questions.
-  - **Mitigation**: Add `programId IS NULL` to all existing community query filters where `courseId` is used. The column is nullable so existing rows default to NULL and behavior is unchanged. Update `packages/db/src/queries/community/community.ts` alongside the schema migration.
+- **Risk**: Removing a course from a program confuses students who are still enrolled but no longer see it in the program hub.
+  - **Mitigation**: Show a confirmation dialog with the `program.remove_course_note` translation key: "Removing this course will not unenroll any students. They will still have access to it via My Learning."
 
-- **Risk**: Removing a course from a program causes confusion: students are still enrolled in the course but it no longer appears in the program hub.
-  - **Mitigation**: Show a confirmation dialog in the admin UI with the note: "Removing this course will not unenroll any students. They will still have access to it via My Learning." Use the `program.remove_course_note` translation key already specified.
-
-- **Risk**: Org nav gets crowded with a new "Programs" top-level item.
-  - **Mitigation**: Place "Programs" directly below "Courses" in the sidebar. Consider grouping them under a "Learning" section header if more items are added in future.
+- **Risk**: Org admin sidebar gets crowded with a new "Programs" top-level item.
+  - **Mitigation**: Place "Programs" directly below "Courses". Consider a "Learning" section header if more items are added in future.
diff --git a/prd/public-api/README.md b/prd/public-api/README.md
index 6a5400e2..662c240c 100644
--- a/prd/public-api/README.md
+++ b/prd/public-api/README.md
@@ -1,365 +1,379 @@
 ---
-name: Public API with Keys
-overview: Build a versioned public API (v1) authenticated via shared organization-scoped automation keys reused by MCP and Public API, with course CRUD, course export, student/audience CRUD endpoints, plus a dashboard Automation page with MCP, Zapier, and API tabs.
+name: Public API with Organization-Scoped Automation Keys
+overview: Build the public API on top of the shipped organization automation foundation: the `/org/[slug]/automation` section already exists, MCP is live, `/automation/api` and `/automation/zapier` exist as placeholder pages, and org-scoped automation keys already exist in the backend. This PRD updates the remaining work to ship the actual public API experience and docs.
 todos:
-  - id: db-schema
-    content: Add `api_key` table to schema.ts, update relations, generate migration
+  - id: confirm-existing-foundation
+    content: Confirm and preserve the shipped automation foundation (`Automation` nav, `/org/[slug]/automation` redirect, MCP page, organization automation key backend)
+    status: completed
+  - id: org-automation-foundation
+    content: Keep using `organization_api_key` and `/organization/automation/*` as the shared automation-key foundation for MCP, API, and Zapier
+    status: completed
+  - id: mcp-page-reference
+    content: Use the existing MCP implementation as the structural reference for the API page (route shell, server load, feature API class, feature page component, translations)
+    status: completed
+  - id: agents-guidance
+    content: Ensure all implementation in this initiative follows `AGENTS.md`
+    status: completed
+  - id: api-tab-page
+    content: Replace the placeholder `/org/[slug]/automation/api` page with a real API page that follows the MCP page pattern
     status: pending
-  - id: db-queries
-    content: Create api-key query functions (create, getByHash, getByOrg, revoke, updateLastUsed)
+  - id: api-tab-server-load
+    content: Add `/org/[slug]/automation/api/+page.server.ts` to load API key and usage data using the existing organization automation endpoints
     status: pending
-  - id: api-key-middleware
-    content: Build apiKeyMiddleware that authenticates via Bearer token and sets orgId in context
+  - id: api-tab-copy
+    content: Add API-specific translations and content for docs links, usage messaging, and key management states
     status: pending
-  - id: validation-schemas
-    content: Add Zod schemas for shared automation key management and public API input validation
+  - id: v1-validation-schemas
+    content: Add public API input/output validation schemas on top of the existing automation-key schemas
     status: pending
-  - id: api-key-service
-    content: Create api-key service (key generation, hashing, CRUD)
-    status: pending
-  - id: api-key-routes
-    content: Create session-authenticated automation key management routes reused by MCP and Public API
-    status: pending
-  - id: v1-course-service
-    content: Create v1 course service (list, get, create, update, delete, export, students)
-    status: pending
-  - id: v1-audience-service
-    content: Create v1 audience service (list, get, add, update, remove)
+  - id: v1-services
+    content: Create versioned public API services for courses and audience/students
     status: pending
   - id: v1-routes
-    content: Create versioned v1 router with course and audience sub-routers, register in app.ts
+    content: Create and register `/v1` public API routes authenticated by organization automation keys
+    status: pending
+  - id: public-api-scopes
+    content: Finalize the public API scope model and middleware requirements for `api` and `zapier` automation keys
     status: pending
   - id: tests
-    content: Write tests for api-key, v1/courses, v1/audience endpoints using Hono app.request()
-    status: pending
-  - id: translations
-    content: Add automation-related translation keys to en.json
-    status: pending
-  - id: sidebar-nav
-    content: Add Automation nav item to org-navigation.ts
-    status: pending
-  - id: automation-page
-    content: Create automation page with Tabs (MCP/Zapier/API), admin-only controls, and key setup flows
-    status: pending
-  - id: automation-api-class
-    content: Create frontend API class for api-key management
-    status: pending
-  - id: build-verify
-    content: Build API package, verify no lint errors, run tests
+    content: Add API tests for automation auth, `/v1` routes, and contract coverage
     status: pending
   - id: openapi-contracts
-    content: Ensure all new public API routes are included in OpenAPI generation (route metadata + schemas)
+    content: Ensure all public API routes are represented in generated OpenAPI output
     status: pending
   - id: openapi-publish
-    content: Regenerate and upload latest OpenAPI spec via `upload-openapi-spec.ts`
+    content: Regenerate and upload the latest OpenAPI spec via `upload-openapi-spec.ts`
     status: pending
   - id: docs-openapi-integration
-    content: Integrate OpenAPI docs page in `apps/docs` using Fumadocs OpenAPI integration
+    content: Add the public API docs experience in `apps/docs`
     status: pending
-  - id: docs-openapi-nav
-    content: Add `API` docs navigation entry/page in `apps/docs/content/docs/meta.json`
+  - id: build-verify
+    content: Build and verify API and docs packages after implementation
     status: pending
 isProject: false
 ---
 
-# Public API with Organization-Scoped API Keys
+# Public API with Organization-Scoped Automation Keys
 
-## Architecture Overview
+## Goal
 
-```mermaid
-flowchart TB
-    subgraph client [External Client]
-        APIKey["API Key in Authorization header"]
-    end
-    subgraph api [API Server]
-        V1Router["/v1 Router"]
-        APIKeyMiddleware["apiKeyMiddleware"]
-        CourseRoutes["Course Routes"]
-        AudienceRoutes["Audience Routes"]
-        APIKeyRoutes["API Key Management"]
-    end
-    subgraph db [Database]
-        APIKeyTable["api_key table"]
-        OrgTable["organization"]
-        CourseTable["course / group"]
-        AudienceTable["groupmember / profile"]
-    end
+Ship a versioned public API on top of the existing organization automation platform. The current codebase already supports shared org-scoped automation keys and a dedicated Automation section in `/org`; this PRD now focuses on the remaining API product work rather than re-specifying the already-shipped foundation.
 
-    client -->|"Bearer cio_..."| V1Router
-    V1Router --> APIKeyMiddleware
-    APIKeyMiddleware -->|"validates + resolves orgId"| APIKeyTable
-    APIKeyMiddleware --> CourseRoutes
-    APIKeyMiddleware --> AudienceRoutes
-    APIKeyRoutes -->|"session auth"| APIKeyTable
-```
+## Implementation Guardrails
 
+- All implementation in this initiative must follow [AGENTS.md](../../AGENTS.md).
+- Do not design this as a brand-new standalone automation surface. Follow the existing patterns already used by the MCP implementation.
+- For dashboard work, the API page must mirror the MCP structure:
+  - route shell under `apps/dashboard/src/routes/org/[slug]/automation/*`
+  - server-side data loading in `+page.server.ts`
+  - state and mutations in `apps/dashboard/src/lib/features/automation/api/automation.svelte.ts`
+  - request/response types in `apps/dashboard/src/lib/features/automation/utils/types.ts`
+  - page composition in `apps/dashboard/src/lib/features/automation/pages/api.svelte`
+- Do not define new dashboard types inside `.svelte.ts` files. Keep feature types in `utils/types.ts` and infer them from the API client.
+- Keep user-facing copy in `apps/dashboard/src/lib/utils/translations/en.json`.
 
+## Current State Confirmed in Code
 
-## 1. Database: `api_key` Table
+### Org navigation and routes
 
-Add a new table in [packages/db/src/schema.ts](packages/db/src/schema.ts):
+These pieces already exist and should be treated as the current baseline:
 
-```typescript
-export const apiKey = pgTable('api_key', {
-  id: uuid('id').defaultRandom().primaryKey(),
-  organizationId: uuid('organization_id').notNull().references(() => organization.id, { onDelete: 'cascade' }),
-  keyHash: text('key_hash').notNull(),       // SHA-256 hash of the key
-  keyPrefix: varchar('key_prefix', { length: 12 }).notNull(), // "cio_live_xxxx" for display
-  name: varchar('name', { length: 255 }).notNull().default('Default'),
-  lastUsedAt: timestamp('last_used_at'),
-  expiresAt: timestamp('expires_at'),
-  isRevoked: boolean('is_revoked').notNull().default(false),
-  createdAt: timestamp('created_at').defaultNow().notNull(),
-  createdBy: uuid('created_by').notNull().references(() => profile.id),
-});
-```
+- `apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts`
+  - contains an admin-only `Automation` section under `/org/[slug]/automation`
+  - exposes nested entries for `MCP`, `Zapier`, and `API`
+- `apps/dashboard/src/routes/org/[slug]/automation/+page.ts`
+  - redirects `/org/[slug]/automation` to `/org/[slug]/automation/mcp`
+- `apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.svelte`
+  - shipped MCP route shell using `Page.Root`, `Page.Header`, and `Page.Body`
+- `apps/dashboard/src/routes/org/[slug]/automation/mcp/+page.server.ts`
+  - already loads automation keys and usage for `type=mcp`
+- `apps/dashboard/src/routes/org/[slug]/automation/api/+page.svelte`
+  - already exists, but is currently a placeholder
+- `apps/dashboard/src/routes/org/[slug]/automation/zapier/+page.svelte`
+  - already exists, but is currently a placeholder
 
-- The raw key is only shown once on creation; we store a SHA-256 hash.
-- `keyPrefix` (e.g. `cio_live_a1b2`) lets users identify keys in the UI without exposing the secret.
-- DON'T GENERATE MIGRATION, when we run `pnpm db push` it will automatically apply the changes.
+### Frontend automation feature foundation
 
-## 2. API Key Queries
+These pieces already exist and should be reused:
 
-New file: [packages/db/src/queries/api-key/api-key.ts](packages/db/src/queries/api-key/api-key.ts)
+- `apps/dashboard/src/lib/features/automation/api/automation.svelte.ts`
+  - shared automation API class for list/create/revoke/rotate
+- `apps/dashboard/src/lib/features/automation/utils/types.ts`
+  - shared request and response inference types
+- `apps/dashboard/src/lib/features/automation/pages/mcp.svelte`
+  - the current reference implementation for page structure and composition
+- `apps/dashboard/src/lib/features/automation/pages/api.svelte`
+  - currently renders only a coming-soon callout
+- `apps/dashboard/src/lib/utils/translations/en.json`
+  - already contains automation navigation and MCP copy
 
-Functions:
+### Backend automation-key foundation
 
-- `createApiKey(orgId, createdBy, name?)` -- inserts row, returns id
-- `getApiKeyByHash(hash)` -- lookup for auth middleware
-- `getApiKeysByOrganization(orgId)` -- list keys (prefix, name, createdAt, lastUsedAt, isRevoked)
-- `revokeApiKey(keyId, orgId)` -- sets `isRevoked = true`
-- `updateApiKeyLastUsed(keyId)` -- stamps `lastUsedAt`
+This work is already implemented and should not be re-invented as a separate `/api-key` system:
 
-## 3. API Key Auth Middleware
+- `packages/db/src/schema.ts`
+  - already defines `organization_api_key`
+  - already defines `organization_automation_usage`
+- `packages/utils/src/validation/organization/automation-key.ts`
+  - already defines key types: `mcp`, `api`, `zapier`
+  - already defines scopes, query params, creation payload, and param validation
+- `packages/db/src/queries/organization/automation-key.ts`
+  - already handles persistence for organization automation keys
+- `apps/api/src/services/organization/automation-key.ts`
+  - already handles secret generation, hashing, creation, revoke, rotate, and auth
+- `apps/api/src/routes/organization/automation.ts`
+  - already exposes:
+    - `GET /organization/automation/usage`
+    - `GET /organization/automation/keys`
+    - `POST /organization/automation/keys`
+    - `DELETE /organization/automation/keys/:keyId`
+    - `POST /organization/automation/keys/:keyId/rotate`
 
-New file: [apps/api/src/middlewares/api-key.ts](apps/api/src/middlewares/api-key.ts)
+### Important correction to the old PRD
 
-- Reads `Authorization: Bearer cio_live_...` header
-- SHA-256 hashes the key, looks up via `getApiKeyByHash`
-- Checks `isRevoked`, `expiresAt`
-- Sets `c.set('orgId', key.organizationId)` on context (same pattern as `orgMemberMiddleware`)
-- Returns 401 on invalid/expired/revoked key
+The old PRD assumed:
 
-## 4. Validation Schemas
+- a brand-new Automation page still needed to be created
+- Automation should be one page with internal tabs
+- a standalone `/api-key` backend should be introduced
+- `Webhooks` was one of the primary tabs
 
-New file: [packages/utils/src/validation/api-key/api-key.ts](packages/utils/src/validation/api-key/api-key.ts)
+That is no longer accurate.
 
-Schemas for API key management and public API input validation:
+The current product structure is:
 
-- `ZCreateApiKey` -- `{ name?: string }`
-- `ZRevokeApiKeyParam` -- `{ keyId: string (uuid) }`
-- Public API schemas for course CRUD, audience CRUD, pagination, etc.
+- org navigation owns the Automation section
+- Automation is split into nested routes: `mcp`, `zapier`, and `api`
+- the shared backend lives under `/organization/automation/*`
+- MCP is the shipped reference page
+- `api` and `zapier` are present as placeholder pages
 
-## 5. Public API Routes (Versioned)
+## Existing Foundation to Build On
+
+### 1. Shared Automation Keys
+
+The public API must reuse the existing organization-scoped automation-key model.
+
+Current model:
+
+- table: `organization_api_key`
+- key types: `mcp`, `api`, `zapier`
+- key prefixes: generated from the actual secret prefix
+- auth: bearer token via the existing automation-key service/middleware path
+- rotation and revocation: already implemented
+- usage tracking: already implemented in `organization_automation_usage`
+
+Design requirement:
+
+- do not introduce a second key table or a second dashboard key-management surface
+- do not reintroduce the older `/api-key` route design from the original PRD
+- build the public API on the existing `organization/automation` contracts unless there is a deliberate migration plan
+
+### 2. Dashboard Information Architecture
+
+The Automation product is already organized as nested org routes, not a tabbed single-page shell.
+
+Required route structure:
+
+- `/org/[slug]/automation`
+  - redirect only
+- `/org/[slug]/automation/mcp`
+  - existing reference implementation
+- `/org/[slug]/automation/api`
+  - target page for public API setup and management
+- `/org/[slug]/automation/zapier`
+  - separate placeholder or future implementation
+
+Design requirement:
+
+- keep the org sidebar/navigation pattern unchanged
+- do not replace nested routes with a new internal tabs container for top-level Automation navigation
+- if tabs are used inside a page, use them only for local subcontent, the way MCP uses setup tabs for client snippets
+
+## Remaining Product Scope
+
+### 3. API Page in Dashboard
+
+The next dashboard milestone is to replace the placeholder API page with a real implementation.
+
+### Target route files
+
+- `apps/dashboard/src/routes/org/[slug]/automation/api/+page.svelte`
+- `apps/dashboard/src/routes/org/[slug]/automation/api/+page.server.ts`
+- `apps/dashboard/src/lib/features/automation/pages/api.svelte`
+- `apps/dashboard/src/lib/features/automation/api/automation.svelte.ts`
+- `apps/dashboard/src/lib/features/automation/utils/types.ts`
+- `apps/dashboard/src/lib/utils/translations/en.json`
+
+### Required structure
+
+The API page must follow the same structural pattern already used by MCP:
+
+1. Route shell:
+   - use `Page.Root`, `Page.Header`, `Page.HeaderContent`, `Page.Title`, and `Page.Body`
+   - set the page title from `automation.tabs.api`
+   - use an API-specific subtitle, not the generic coming-soon copy
+
+2. Server load:
+   - add `+page.server.ts`
+   - load key data with `classroomio.organization.automation.keys.$get({ query: { type: 'api' } })`
+   - load usage data with `classroomio.organization.automation.usage.$get({ query: { type: 'api' } })`
+   - hydrate the shared `automationApi` store the same way MCP currently does
+
+3. Feature page:
+   - keep composition in `apps/dashboard/src/lib/features/automation/pages/api.svelte`
+   - mirror the MCP page layout style and sectioning
+   - do not leave this page as a single callout
+
+### Required API page sections
+
+The real API page should include the following, using the MCP page as the UX baseline:
+
+- admin permission callout for non-admin users
+- usage cards or equivalent summary block for API-specific limits
+- API key table filtered to `type === 'api'`
+- create key flow
+- rotate key flow
+- revoke key flow
+- one-time secret reveal after creation or rotation
+- docs/discovery section with a link to the public API documentation
+- API-specific setup guidance
+
+### Reuse requirements
+
+- reuse `automationApi` instead of introducing a separate API-only dashboard client
+- reuse shared automation types in `utils/types.ts`
+- add new helper utilities only if the API page needs API-specific setup snippets or docs helpers
+
+### 4. Public API Routes
+
+The actual public API is still pending.
 
 ### Router structure
 
-New directory: `apps/api/src/routes/v1/`
+Create:
 
-Files:
+- `apps/api/src/routes/v1/index.ts`
+- `apps/api/src/routes/v1/courses.ts`
+- `apps/api/src/routes/v1/audience.ts`
 
-- [apps/api/src/routes/v1/courses.ts](apps/api/src/routes/v1/courses.ts) -- Course endpoints
-- [apps/api/src/routes/v1/audience.ts](apps/api/src/routes/v1/audience.ts) -- Audience endpoints
-- [apps/api/src/routes/v1/index.ts](apps/api/src/routes/v1/index.ts) -- Combines sub-routers
-
-Register in [apps/api/src/app.ts](apps/api/src/app.ts):
+Register in `apps/api/src/app.ts` as:
 
 ```typescript
-.route('/v1', v1Router)
+.route('/public-api/v1', v1Router)
 ```
 
-All v1 routes use `apiKeyMiddleware` (not session auth).
+### Authentication model
 
-### Course Endpoints (`/v1/courses`)
+All `/public-api/v1` routes must authenticate with organization automation keys.
 
+Requirements:
 
-| Method | Path                             | Description                                        |
-| ------ | -------------------------------- | -------------------------------------------------- |
-| GET    | `/v1/courses`                    | List all org courses (paginated)                   |
-| POST   | `/v1/courses`                    | Create a course                                    |
-| GET    | `/v1/courses/:courseId`          | Get course details                                 |
-| PUT    | `/v1/courses/:courseId`          | Update a course                                    |
-| DELETE | `/v1/courses/:courseId`          | Soft-delete a course                               |
-| GET    | `/v1/courses/:courseId/export`   | Export course content (lessons, exercises) as JSON |
-| GET    | `/v1/courses/:courseId/students` | List students enrolled in a course                 |
+- use the existing automation-key authentication path
+- require `type: 'api'` or an equivalent scope model that intentionally permits public API access
+- document and enforce scopes clearly
+- do not rely on session auth for `/public-api/v1`
 
+### Planned endpoint groups
 
-### Audience Endpoints (`/v1/audience`)
+Initial public API surface:
 
+| Method | Path | Description |
+| ------ | ---- | ----------- |
+| GET | `/public-api/v1/courses` | List organization courses |
+| POST | `/public-api/v1/courses` | Create a course |
+| GET | `/public-api/v1/courses/:courseId` | Get course details |
+| PUT | `/public-api/v1/courses/:courseId` | Update a course |
+| DELETE | `/public-api/v1/courses/:courseId` | Soft-delete a course |
+| GET | `/public-api/v1/courses/:courseId/export` | Export course content as JSON |
+| GET | `/public-api/v1/courses/:courseId/students` | List enrolled students |
+| GET | `/public-api/v1/audience` | List organization audience members |
+| POST | `/public-api/v1/audience` | Add a student to the organization |
+| POST | `/public-api/v1/audience/assign-courses` | Assign one or more audience members to one or more courses |
+| GET | `/public-api/v1/audience/:studentId` | Get student details |
+| PUT | `/public-api/v1/audience/:studentId` | Update student details |
+| DELETE | `/public-api/v1/audience/:studentId` | Remove a student from the organization |
 
-| Method | Path                      | Description                       |
-| ------ | ------------------------- | --------------------------------- |
-| GET    | `/v1/audience`            | List all org students (paginated) |
-| POST   | `/v1/audience`            | Add a student to the org          |
-| GET    | `/v1/audience/:studentId` | Get student details               |
-| PUT    | `/v1/audience/:studentId` | Update student info               |
-| DELETE | `/v1/audience/:studentId` | Remove student from org           |
+Enrollment decision:
 
+- keep only the audience assignment endpoint for enrollment
+- do not add a separate course-centric enrollment route such as `POST /public-api/v1/courses/:courseId/students`
+- a single audience member plus a single course in `POST /public-api/v1/audience/assign-courses` covers the single-enrollment case
+- multiple audience members and multiple courses in the same payload cover the bulk-assignment case
 
-### API Key Management (session-authenticated, not public API)
+### 5. Validation and Services
 
-New file: [apps/api/src/routes/api-key/api-key.ts](apps/api/src/routes/api-key/api-key.ts)
+Add public API schemas and services on top of the existing automation-key foundation.
 
+Target files:
 
-| Method | Path              | Description                                 |
-| ------ | ----------------- | ------------------------------------------- |
-| POST   | `/api-key`        | Generate new API key (returns raw key once) |
-| GET    | `/api-key`        | List API keys for the org                   |
-| DELETE | `/api-key/:keyId` | Revoke an API key                           |
+- `packages/utils/src/validation/...`
+- `apps/api/src/services/v1/course.ts`
+- `apps/api/src/services/v1/audience.ts`
 
+Requirements:
 
-Registered in `app.ts` as `.route('/api-key', apiKeyRouter)`. Protected by `authMiddleware` + `orgAdminMiddleware`.
+- follow the route/service/validation split defined in `AGENTS.md`
+- each route must return a single response type shape
+- keep business logic in services, not routes
+- reuse existing DB queries where possible
 
-## 6. Services
+### 6. OpenAPI and Docs
 
-- [apps/api/src/services/api-key.ts](apps/api/src/services/api-key.ts) -- Key generation (crypto.randomBytes), hashing, CRUD logic
-- [apps/api/src/services/v1/course.ts](apps/api/src/services/v1/course.ts) -- Public API course business logic (reuses existing queries from `@cio/db/queries/course`)
-- [apps/api/src/services/v1/audience.ts](apps/api/src/services/v1/audience.ts) -- Public API audience business logic (reuses `getOrganizationAudience` and related queries)
+The backend already has OpenAPI infrastructure. The remaining work is to ensure the new public API is included and discoverable.
 
-## 7. Tests
+### OpenAPI requirements
 
-New test files under `apps/api/src/__tests__/`:
+- all new `/public-api/v1/*` routes must be documented with the existing Hono OpenAPI patterns
+- request params, query, body, success, and error responses must be declared
+- avoid undocumented public API routes
 
-- `api-key.test.ts` -- API key creation, listing, revocation, auth flow
-- `v1/courses.test.ts` -- All course CRUD + export + students endpoints
-- `v1/audience.test.ts` -- All audience CRUD endpoints
+### Spec publishing
 
-Tests will use Hono's `app.request()` test helper (no HTTP server needed). Mock the DB layer with `vi.mock()`.
+Use the existing script:
 
-Additionally, include OpenAPI contract coverage:
-- verify all `/v1/*` and `/api-key/*` public-facing endpoints are represented in generated spec.
-- ensure schema components are generated for request/response payloads.
+- `apps/api/scripts/upload-openapi-spec.ts`
 
-## 8. Dashboard UI: Automation Page
+Required flow after API changes:
 
-### Sidebar Navigation
+1. Implement or update routes and schemas.
+2. Run `pnpm --filter @cio/api upload:openapi`.
+3. Verify the latest spec includes the new routes.
 
-Add an "Automation" nav item in [apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts](apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts), placed before Settings, with `requiresAdmin: true`:
+### Docs integration
 
-```typescript
-{
-  titleKey: 'org_navigation.automation',
-  path: '/automation',
-  icon: AutomationIcon, // use Zap or Workflow icon from lucide
-  requiresAdmin: true,
-  matchPattern: '^/org/[^/]+/automation(/.*)?$'
-}
-```
+Add the public API docs experience in `apps/docs`.
 
-### Route
+Target tasks:
 
-New file: [apps/dashboard/src/routes/org/[slug]/automation/+page.svelte](apps/dashboard/src/routes/org/[slug]/automation/+page.svelte)
+1. Add the API docs page or route.
+2. Wire it to the published OpenAPI source.
+3. Add docs navigation for API.
+4. Verify the docs build still passes.
 
-### Page Structure
+### 7. Testing
 
-```
-+----------------------------------------------+
-| Automation                                    |
-| Connect ClassroomIO with your tools and       |
-| workflows.                                    |
-+----------------------------------------------+
-| [ API ]  [ Zapier ]  [ Webhooks ]             |
-+----------------------------------------------+
-|                                               |
-|  (Tab content based on selection)             |
-|                                               |
-+----------------------------------------------+
-```
+Add tests for:
 
-- Title: "Automation" with description text
-- Uses `Tabs` from `@cio/ui/base/tabs`
-- Three tabs: **API**, **Zapier**, **Webhooks**
+- organization automation key auth behavior relevant to public API access
+- `/v1/courses`
+- `/v1/audience`
+- OpenAPI contract inclusion for public API routes
 
-### API Tab Content
+Use Hono app-level testing where possible.
 
-**Free plan users:** Show `UpgradeBanner` component (same pattern as other pages). Disable all controls.
+### 8. Build and Verification
 
-**Paid plan users:**
+Required verification commands after implementation:
 
-- API key display field (masked by default, e.g. `cio_live_••••••••••••a1b2`)
-- "Show" / "Hide" toggle button to reveal/mask the key
-- "Copy" button to copy to clipboard
-- "Regenerate" button (with confirmation) to create a new key and revoke the old one
-- "Read the Docs" button/link pointing to the API documentation URL
-
-### API Class
-
-New file: [apps/dashboard/src/lib/features/automation/api/automation.svelte.ts](apps/dashboard/src/lib/features/automation/api/automation.svelte.ts)
-
-Extends `BaseApi`, methods:
-
-- `fetchApiKeys()` -- GET `/api-key`
-- `createApiKey()` -- POST `/api-key`
-- `revokeApiKey(keyId)` -- DELETE `/api-key/:keyId`
-
-### Frontend Types
-
-New file: [apps/dashboard/src/lib/features/automation/utils/types.ts](apps/dashboard/src/lib/features/automation/utils/types.ts)
-
-### Translations
-
-Add keys to [apps/dashboard/src/lib/utils/translations/en.json](apps/dashboard/src/lib/utils/translations/en.json):
-
-- `org_navigation.automation`
-- `automation.title`, `automation.description`
-- `automation.tabs.api`, `automation.tabs.zapier`, `automation.tabs.webhooks`
-- `automation.api.key_label`, `automation.api.copy`, `automation.api.regenerate`, `automation.api.read_docs`
-- `automation.api.upgrade_prompt`
-- `automation.zapier.coming_soon`, `automation.webhooks.coming_soon`
-
-## 9. Versioning Strategy
-
-- All public API routes live under `/v1/`. When v2 is needed, a new `apps/api/src/routes/v2/` directory is created with its own router, registered as `.route('/v2', v2Router)`.
-- The v1 router remains untouched, ensuring backward compatibility.
-- The API key middleware is version-agnostic and shared across all versions.
-
-## 10. OpenAPI Spec Requirements
-
-### Route Annotation Requirements
-All new public API routes in this PRD must be OpenAPI-documented:
-- add route metadata using existing Hono OpenAPI patterns (`describeRoute`, validators/schemas).
-- ensure request params/query/body and success/error response shapes are declared.
-- avoid undocumented routes under `/v1/*` and `/api-key/*`.
-
-### Spec Generation and Publishing
-Use existing script in `apps/api/scripts/upload-openapi-spec.ts`:
-- generate spec from app routes.
-- save local output to `apps/api/dist/openapi/openapi.json`.
-- upload dated + latest specs to R2 (`openapi/openapi-YYYY-MM-DD.json`, `openapi/openapi-latest.json`).
-
-Required update flow after public API changes:
-1. implement/adjust routes and schemas.
-2. run `pnpm --filter @cio/api upload:openapi`.
-3. verify `openapi-latest.json` contains new endpoints.
-
-### CI/Verification Gate
-Add a verification step in this initiative to prevent stale API docs:
-- PR checklist requires successful OpenAPI generation for API changes.
-- include generated-spec validation in API CI for public API route changes.
-
-## 11. Docs Integration (Fumadocs OpenAPI)
-
-Integrate API docs in `apps/docs` following Fumadocs OpenAPI integration guidance:
-- reference: `https://www.fumadocs.dev/docs/integrations/openapi`
-- wire docs app to render OpenAPI spec from latest published source.
-
-Target implementation tasks:
-1. Add required Fumadocs OpenAPI integration package(s) to `apps/docs/package.json`.
-2. Add a docs route/page named `API` at `/api` in `apps/docs/src/routes` (or equivalent docs content route).
-3. Configure the page to load `openapi-latest.json` URL (env-driven preferred, with production fallback).
-4. Add an `API` entry to docs navigation in `apps/docs/content/docs/meta.json`.
-5. Validate local docs build still passes with the OpenAPI page.
-
-Suggested file touchpoints:
-- `apps/docs/package.json`
-- `apps/docs/src/routes/*` (new `/api` route) or `apps/docs/content/docs/api.mdx`
-- `apps/docs/content/docs/meta.json`
-- optional docs config/util files for OpenAPI URL env handling
-
-## 12. Build and Verification Commands
 1. `pnpm --filter @cio/api build`
 2. `pnpm --filter @cio/api upload:openapi`
 3. `pnpm --filter @cio/docs build`
-4. Manual check: docs navigation shows `API`, open `/api`, and verify new endpoints appear.
 
-Note: Follow AGENTS.md for code practices.
+Manual verification:
+
+1. `/org/[slug]/automation` still redirects to `/org/[slug]/automation/mcp`
+2. `/org/[slug]/automation/api` now renders the real API page rather than the placeholder
+3. API key creation, rotation, and revoke flows work for `type=api`
+4. `/public-api/v1/*` routes respond under the new base path
+5. docs navigation exposes the public API docs entry